视知觉理论视角下奶茶类公众号界面设计方法研究

关键词：视知觉;奶茶类公众号;界面设计;设计方法

中图分类号：TP311.1 文献标识码：A 文章编号：1004-9436（2021）21-0-03

0 引言

大数据时代，数字技术给人们提供了全新的生活方式，奶茶类公众号是以手机为载体的集多功能为一体的平台，其主要功能为传播广告信息，通過图文形式让用户在碎片化时间中快速获取简单明确的信息。微信公众号平台发展至今，随着原创内容的质量不断提高，参差不齐的现象即将结束，去低质化成为趋势。快餐式的内容已无法满足用户需求，设计师需更加注重原创，通过解析视知觉原理平衡奶茶类公众号的实用性和艺术性，用更精良化、合理化的设计留住用户。

1 奶茶类公众号界面设计现状及架构

文章选取了国内50个奶茶品牌的公众号作为调研对象，品牌榜名单由CN10排排榜技术研究部门和CNPP品牌数据研究部门通过资料收集整理，基于大数据统计及人为根据市场和参数条件变化的分析测评得出，按照品牌影响力并综合了行业知名度、企业规模、经济实力排名。

1.1 奶茶类公众号界面设计的问题

第一，功能设计冗杂模糊。一是目录功能主次不分，如“线上下单”的入口较深，用户需要浏览全部子菜单后才能找到下单入口，增加了下单时间。二是目录功能冗杂，有些公众号的目录栏包含13个以上的功能，当用户感受到的认知负荷过高以至于超过其工作记忆的承受范围时，其信息处理能力就会下降，从而导致操作效率下降和失误率上升[1]。

第二，UI设计趋向同质化。目前，奶茶类公众号的点单界面布局雷同，均采用底部标签栏和侧边导航栏的形式，底部标签栏为点单小程序的一级导航，左侧抽屉式的二级标签栏是商品目录。在底部标签栏中，icon的选中状态和非选中状态的设计是一样的，都是利用增加色块的方法凸显选中状态，未选中的icon都呈灰色线型。由于没有结合品牌元素和追求过度简化，UI风格同质化严重。

第三，文字组设计缺少整体性把控。一是在界面中，精致的插画和动效图像往往是吸引视线的主体物，对比之下，正文文字略显单薄。二是由于奶茶类公众号很重视内容的趣味性，有些正文的排布过于复杂，过多装饰元素降低了阅读的流畅性。三是文字组的整体形态待优化。由于视知觉具有整体性、简化性的特征，当人们看到一组文字时，视觉会优先把握其整体形态，这些文字形态也充当了界面中的一种图形元素，字重变化、字号大小、字距大小及行距大小是影响文字组整体外形的因素，文字间的分隔形态也是对界面负空间的设计，所以这些小段落的文字排列更需要利用视知觉的组织律来优化。

第四，色彩设计混乱失调。文章总结了几个比较典型的问题。一是插画色彩、背景颜色与摄影图像的颜色不协调，缺少对影像颜色再设计的阶段，忽略界面颜色的整体性就会略显生硬;二是有些公众号的色彩调性不明确，导致消费者把握不了产品属性，饮品缺少氛围感，可能会导致购买欲降低，同时在色彩运用上忽略了视知觉具有恒常性，没有充分考虑选取的色彩意象能否准确传达出食物的色香味，所以对于味道的色彩意象应该进行更深入的探讨。

1.2 奶茶类公众号界面设计的架构及元素

奶茶类公众号大体拥有相似的框架，主要包含以下三个界面层级。

第一层级为公众号的主页界面，在微信搜索框检索某个公众号后就能看到主页界面。主页界面内容包括顶部导航栏、公众号基本信息、自定义分段式标签栏、历史信息列表。顶部导航栏包括返回、搜索框和更多按键，点击更多按键可弹出底部的行动面板。导航栏下方为公众号的基本信息，包含头像、公众号名称、简介、消息按键、关注按键、好友关注信息、视频号信息，中部为自定义分段式标签栏，界面下方是对应标签栏的历史信息列表。

第二层级为目录界面，点击发消息按键后会自动跳转到第二层级页面。目录界面包括导航栏、信息推送、自定义分段式标签栏。顶部导航栏包括返回按键、公众号名称、主页按钮;中部会显示推送的信息，用户关注公众号后会自动推送欢迎语、点单小程序或者最新咨询的文章，用户可以依据推送提示，输入相应的数字或文字看到更多的信息反馈;底部是自定义分段式标签栏，最大能设置成3*5的矩阵式子菜单，通过这些子菜单目录可跳转到各类第三层级界面，标签栏左侧带有切换按钮，可切换为消息输入框发送语音或文字信息进行一系列反馈操作。

第三层级界面种类较多，主要包括推文界面、线上点单小程序界面、话题标签界面及其他第三方平台界面。推文界面一般包括首图、长图文部分、尾图，这是最常用的界面类型。小程序通常为线上点单界面，包括顶部的滚动广告图、底部标签导航栏、左侧抽屉式菜单和中部商品列表图。话题标签界面的功能是展示公众号内部文章的分类。

2 视知觉理论与奶茶类公众号界面设计的关联性

2.1 视觉信息传达性

用户浏览推文的过程也是公众号传播视觉信息的过程，视觉信息设计强调的是信息，即视觉传达设计中的内容实体，是视觉传达设计中直接面对的核心对象[2]。视知觉是用户最直接的接触和解读信息的方式，受众通过眼睛读取客体信息，从而进行下一步行动[3]。用户与奶茶类公众号的交流方式还在于看，并通过视觉引导产生交互行为，接收公众号传达的理念。

2.2 界面布局整体性

平衡的美感能使人愉悦，这是人的本能所致。版面的稳定感与动感的产生在很大程度上都依赖画面元素编排的平衡与均衡 ，若版面设计中各个元素达到了平衡状态 ，那么画面就会相对稳定[4]。设计时必须遵从整体性原则，即无论是公众号的结构框架还是视觉表现都要进行系统性的规划，综合考虑界面中的元素分布、材质使用与颜色搭配，兼顾形式美与内容美，使其具有完整性。

3 基于视知觉理论的奶茶类公众号界面设计的用户调研

3.1 调研对象与内容

调研对象的范围锁定在30岁以下的年轻群体，一共搜集了140份问卷，其中有效问卷为127份，调查对象中男性为42人，女性为85人。问卷调研分为四个部分：第一部分为用户基本信息调研，包括性别、年龄、收入;第二部分为用户行为调研，包括对横屏阅读的态度、能接受的阅读时长、观看视频的频率以及常用功能;第三部分为用户视知觉调研，结合了奶茶类公众号的设计现状，对图文布局方式、表现手法、设计风格等内容展开调研;第四部分为色彩意象感知调研，研究用户对五种基本味觉的色彩意象。

3.2 用户行为调研分析

关于阅读奶茶类推文的时长，44%的用户认为应该控制在3～5分钟，43%的用户认为应该控制在3分钟内，12%的用户接受6～10分钟。关于对横屏和竖屏阅读的态度，56%的用户更喜欢竖屏阅读，37%的用户持中立态度，只有6%的用户喜欢横屏阅读。对于“奶茶類公众号中的小视频功能”，62%的用户偶尔点击观看，29%的用户从不点击观看，只有9%的用户经常点击观看。

调研分析发现，用户更喜欢竖屏阅读，希望在短时间内通过图文的方式快速获取信息，不太关注视频信息。公众号中确实设置了许多不常用的功能，用户浏览得最多的是线上点单界面和各种推文界面。综上，公众号内部功能冗杂，用户更偏向简约、精炼的内容。

3.3 用户视知觉调研分析

有72%的用户认为奶茶类公众号的设计风格应该基于原有的品牌形象进行延展。59%的用户更喜欢呈倍率变化关系的文字组，71%不喜欢排版装饰感过强的正文文字。对于“以下哪种视觉手法更能表现食物的色香味”，有85%的用户选择了摄影图像，64%的用户喜欢拼贴风格，39%的用户喜欢插画风格，21%的用户喜欢3D风格。在喜欢的插画风格中，用户最喜欢国潮插画风格，其次喜欢肌理插画风格，喜欢平扁渐变和平扁描边风格的占比较少。

调研分析发现，奶茶类公众号的视觉风格需要保持趣味性，应该加强摄影图像、插画方面的设计。装饰元素的使用应适度，不能干扰正文文字的可读性。

3.4 用户色彩意象感知

产品色彩意象产生于用户的产品色彩认知过程，是通过视觉感官通道对色彩感性需求获取与再创造的结果。它能充分表达用户的色彩感性需求，是设计师理解用户色彩情感的重要媒介[5]。这部分调研了用户对酸、甜、苦、辣、咸几种基本味的色彩意象，一共提供了12项色系涵盖了所有色相。从整体趋势来看，甜味、辣味的意象选择暖色系多，酸味、苦味和咸味的意象选择冷色系多。

结合交叉分析的数据来看，性别与年龄因素对于色彩意向的选择没有明显影响，用户认为5、6号色系意象酸味，2、3号色系意象甜味，11、10号色系意象苦味，3、2号色系意象辣味，10、9色系意象咸味。用户对于色系的选择范围跨度较小，这部分用户对于色彩的意象感知较为统一。

4 视知觉理论应用于奶茶类界面设计的具体方法

4.1 整合目录功能，提高决策效率。

依据调研结果可以将用户最常用的线上点单功能单独设置为一栏，不常用的品牌加盟、品牌招聘、品牌资讯等功能就可以进行整合或删减。同时，注意功能的重复设置，尽量呈现数量少、多方位的功能。有些功能是属于包含关系就可以合二为一，如“会员中心”和“会员积分”，减少展示选项和不必要任务就是减少用户的选择时间，提高其决策效率。企业可以将这些功能、入口进行重要性排序，目录命名应该清晰准确，避免增加用户的短期记忆负担，使用户想到所要做的操作时，能马上找到界面中的任务区域[6]。

4.2 简化界面信息，减轻认知负荷。

精简文章内容，控制阅读时长。尽量将阅读时长控制在3分钟左右，图片与相关文字信息的排布不宜过密，不适宜采用双栏的形式进行排列，因为过于密集的信息加上较小的页边距会呈现出视觉压迫感、紧张感。最好采用图片在上文字在下的形式，长度控制在一屏左右为佳，这样不仅用户可以在一屏距离内浏览完相关图文，文字与图片之间还可以保持合适的空间感。若图文排布超过一屏距离，图片与文字的间距就会过大，会缺少阅读连续性，同时还会增加文章的整体篇幅以及用户滑动手势的频率。要注意适用装饰元素，奶茶类公众号虽然需要带有趣味性，但正文文字的编排不宜复杂多变，应该降低装饰元素对重要文字的干扰，确保文字的可读性与易读性。

4.3 把握知觉相似性，优化界面秩序感。

调整信息倍率关系、元素大小比例。可以利用字号倍率变化、字重倍率变化或行距倍率变化塑造层次感。字号倍率就是用倍数关系设置的字号的大小变化，注释、正文、小标题、主标题的字号可以1.5的倍率增长，让字符面积有规律地变化。字重倍率变化就是控制字体的描边粗细、黑度变化。行距倍率变化是指以基础行距为单位进行倍数递增，通过控制行距调整文字之间的负空间形态。在设计时应综合运用这三种倍率关系调整文字之间的关系，使文字组之间的变化富有规律性。

4.4 利用色彩意象，提升用户购买欲。

颜色知觉是视觉中一种有效的区分维度，对于事物而言色彩能起到识别作用。味道偏向酸味的茶饮可多采用柠檬黄或者黄绿色系，偏甜味的奶茶可以多采用桃红色系、紫红色系，苦涩的茶饮则适用青色系、紫色系。饱和度越高的暖色系往往会给人饮品甜度高、香味浓郁的感觉，饱和度较低的颜色适合运用于味道清淡或苦涩的茶饮。根据奶茶饮品的不同类别选择合适的色彩意象，把控好色彩运用的比例才可以准确传达出食物的色香味，增强用户的食欲及购买欲。此外，还要注意摄影图像的色彩不宜过于繁杂，版面的色彩要与图像色彩协调统一。

5 结语

随着信息时代的进步，媒介不断变革和影响着人们的生活方式，年轻人的审美需求逐渐提高。视知觉原理在奶茶类公众号中的作用不容忽视，设计师需要用视知觉的特性影响观者的心智，遵循视知觉运作原则对公众号进行设计，使其视觉内容更加出彩且兼具实用性，从而提升用户的阅读质量和体验。

参考文献：

[1] 贺孝梅，李剑钰.人机交互中认知负荷的成因分析与设计策略研究[J].包装工程，2020，41（10）：24-30.

[2] 齐志鹏.视知觉下通用信息设计研究：由字到图的思考[J].湖南包装，2020，35（6）：22-24.

[3] 卢建洲.论版式设计中的平衡[J].大舞台，2012（9）：164-165.

[4] 张燕.奶茶绑架Z世代[J].中国食品工业，2021（15）：108-109.

[5] 张新新，杨明刚，张书涛，等.基于本体的产品色彩意象知识表达[J].包装工程，2019，40（8）：41-46.

[6] 熊英，张明利.基于用户体验的互联网产品界面设计分析[J].包装工程，2016，37（4）：88-91.

作者简介：魏畅（1996—），女，四川成都人，硕士在读，研究方向：设计学。