交互界面中图形符号的设计研究

杨超杰 张运彬 周红石

关键词：交互界面 图形符号 色彩 尺度 材质

引言

从实体电子产品到虚拟应用软体，交互界面如今已渗透到大众生活的方方面面。图形符号作为数字界面中的“引路人”，帮助用户快速理解信息，并做出操作决策。由于极简主义、北欧风的盛行，大量智能产品将操作功能由外部转移至虚拟操作屏幕。造成外观黑箱化的同时，繁复庞杂的功能转换成图形符号存在于交互界面屏幕中。大量信息涌入用户视野，造成视觉捕获率及操作的低效性。因此，研究图形符号依然十分重要，已有良多学者从各个角度对此进行研究。本文基于体验要素中的视觉感知层，研究以交互界面为主的图形符号。着重分析色彩、尺度、材质对视觉捕捉率、操作效率性的影响。并基于用户体验原则提出以交互界面为基础的图形符号创新设计方法模型，以提高交互界面中用户的视觉捕获率及操作效率，创建一个新的交互界面图形符号设计方法论。

一、交互界面中的图形符号

（一）交互界面中图形符号的概念：交互界面中图形符号作为产品和用户之间沟通的管道，天然指代某种含义。且图形符号在不同语境中有不同的定义。例如，在城市交通语境下，方位、空间或某项交通规定是其主要指代的信息。在智能产品的语境下，图形符号主要指代用户可操作行为或象征特殊含义的信息。用户通过视觉感知将图形编码进行认知、分析、理解后，对该信息产生行为上的互动（图1）。Jef Raskin（2004）将图形符号定义为人类约定俗成的、具有指代性的按钮和图片。Ben Shneiderman（2004）把指代计算机处理系统中的图形表示为图形符号。Alan Dix（2006）认为图形符号是代表系统项目入口的图形。虽然对图形符号的理解和定义各不相同，但都具体有以下特征：1.以图形的方式表示交互功能；2.无需训练就可被用户理解；3.图像符号指代另一种物品或概念。设计者将复杂的信息转换为图形符号，以提高用户的视觉感知，从而加速了用户对信息的认知速度。交互界面中基本的图形符号元素包括色彩、尺度、材质、形状、动态。其中又以色彩、尺度、材质为用户进行界面交互行为时，最常接收到的视觉信号。因此本文主要针对色彩、尺度、材质三要素展开研究论述。

（二）交互界面中图形符号研究：自进入数字化时代后，有大量符号学、心理学等学科的学者对智能交互界面中的图形符号进行研究，McDougall（2016）[1]、Shen Z（2020）[2]等学者从图形符号的感性因素出发，研究图标具象、抽象、熟悉度对用户的认知程度、识别速度的影响。也有学者从图形符号的理性因素出发，对用户的操作层面进行研究。例如杨洋（2018）[3]等学者研究图形符号的外观、结构、组合间的大小或分布差异对用户操作的影响。也有Leung R（2011）[4]等学者对比不同人群对图形符号的识别速度与认知是否一致。付彧（2016）[5]等学者从符号学角度出发，将其分为图像符号、指示符号、象征符号三类。他们主要探讨图形符号的大众认知与传播的关系与影响。虽有众多学者对交互界面中的图形符号做了多种研究探索，但主要从心理学、符号学、人机工程学角度进行研究，与设计学相关的方法与理论依旧缺乏。图形符号的研究水平一直滞后于设计应用的发展，设计师无法有效运用设计学理论进行交互界面设计。致使用户对交互界面信息捕獲低效性、操作盲目性问题频出。

二、交互界面中的图形符号要素影响

图形符号的视觉捕获率及操作效率性一直是交互界面设计研究中的重点。设计者将产品的功能指示、具体内容编译成可被用户轻松理解的图形符号。用户通过视觉、触觉、听觉等感知通道对交互界面中释放出来的信息进行转译、解码，进而指导行为动作。此一系列的交互行为所产生的情绪反应被称为用户体验。在交互形式多元化的当下，虽然出现了语音交互、实体交互等多种技术，但图形用户界面依旧是大众进行交互的最主流的使用方式，大量复杂信息还是需要通过视觉感知系统传递给用户。在视觉认知系统当中，可被用户视觉感知的基本图形符号元素有色彩、尺度、材质、形状、动态。在交互界面设计中，设计者将信息通过色彩、尺度、材质等元素整理组织和编排后，传递给用户并引导其进行操作。然而数字化技术发展致使屏幕尺寸越来越小，信息却愈发庞杂，因此对图形符合的设计水平也更为严苛。

（一）色彩要素的影响及作用：色彩元素的运用在交互界面的设计中，相较于其他元素更能引起用户注意。对用户传递特定的层级关系、权重关系等信息，同时它还赋予界面视觉美感。合理的色彩运用可以让界面交互操作更具有暗示性，同时有效提升用户的信息捕获率，反之会造成界面信息混乱[6]。因此，设计者对色彩元素的选择时，需与用户的认知背景达成一致。有学者对色彩要素的视觉捕捉率进行研究，发现当图形符号的色彩与背景对比度越高，用户信息捕获率越高，色彩使用越复杂，用户信息捕获率则相对较低[7]。例如在交互信息架构设计阶段中，色彩元素主要作用于页面布局及信息层级的划分，起到突出重点弱化次要信息的作用。设计者通过强化色彩的明暗关系、色系对比去表达选中状态与非选中状态，给用户提供清晰明了的操作反馈，告知用户当前所处的位置。色彩对比度越大，用户对信息的视觉捕获速率就越高。例如图2，钉钉App的一级导航栏就通过明亮色的图标与灰色状态的图标进行对比，以此告知用户当前处于消息页面中。而灰色的状态的图标则暗示用户可通过点击的交互方式进行页面的切换。在开展设计工作时，除了向用户提供当前状态的可视性外，设计者还可以利用同一个色系去打造信息与信息之间的连续性[8]。

（二）尺度要素的影响及作用：尺度元素的运用对视觉捕获率与操作效率性有着重要的影响。有学者对图形符号的尺度进行实验调查发现，图形符号尺度占比越大，用户的视觉捕获率则越高[9]。根据菲兹定律，可点击按钮的尺度越大，用户的操作效率就越高。大量用户从大屏幕媒介流入小屏幕媒介，交互工具由鼠标切换成手指后，图形符号的尺度大小对操作效率方面的研究权重也有所提升。根据调查，不同开发系统对于图形符号尺度规范有严谨的规定。例如IOS系统的用户界面指南中指明，可进行操作的图形符号尺度不能低于44像素，当可操作图形符号低于44像素，用户的操作成功率降低，且易引起焦虑情绪，从而导致不良用户体验。而通知类的图形符号规定禁止小于24像素，以提升用户的视觉捕获效率。而Android系统也建议设计者将图标基础尺度设置在48像素，必要时可将其放大400%。在进行交互界面设计时，对图形符号尺度大小的考量主要以用户视觉感知度与操作成功的效率性为基本。也有设计者根据该特点进行反向设计。当设计者不想用户快速获取该信息或功能时，可通过降低图形符号的尺度大小，使用户低效率获取该信息。如图3的滴滴打车，设计者为达成用户可以轻松便捷下订单的目的，将呼叫下单按钮设计为整个页面尺度最大，最易被捕捉到和操作的图形元素。反之取消订单按钮的尺度大小则接近可视范围的最小值。

（三）材质要素的影响及作用：材质元素的运用在交互界面设计中也影响着用户的视觉感知与操作效率。设计者借助生活中对材质已有的认知，将其投射到界面图形符号中，利用视觉体验调动用户记忆中的触觉体验。设计者通过构建与用户认知程度高的交互方式，起到降低学习成本的目的，由此提高用户的操作效率性。人类在学习新鲜事物时，习惯从更为熟悉的事物中学习新知识，所以在界面中采用材质隐喻，可以很大程度上提高用户操作效率。苹果在iOS7系统中，首次使用材质更简洁抽象的图像符号。但过于扁平的图形让信息层级随之扁平，影响信息的有效传达。于是谷歌在2014年提出“材质即隐喻”这个观点，借助真实世界中的材质表达界面交互信息。例如采用光影和阴影来表达界面中的层级关系，帮助用户快速了解主次关系的同时，提高用户的视觉捕捉率。图形符号的材质元素主要作用于引导用户进行以行动为导向的互动。设计者采用有逻辑、符合用户认知的材质可以帮助用户更快地形成惯性记忆，提升用戶的使用体验。例如苹果IOS系统中闹钟时间的设定页面，用户将时间上下滑动至相应数值。该形式是对现实时间中齿轮的模仿借鉴。在进行交互界面视觉效果设计时，借助模拟真实的世界的材质，还可以营造出品牌形象与氛围。例如图4腾讯充值小程序中的点券红包设计，设计者借鉴红包的材质，结合现代化、抽象化的处理方式，构建出点券红包页面。设计者对红包材质的运用，有助于用户操作效率性的提升。

三、交互界面中图形符号的创新设计方法与运用

（一）交互界面图形符号的创新设计方法：根据上文所述，对图形符号色彩、大小、材质三要素的研究与分析，得出其对用户视觉捕获率、操作有效性有极大的影响。本文结合福雷斯特研究公司提出的用户体验金字塔模型，探讨出交互界面图形符号的创新设计方法论，如图5。创新方法模型旨在对视觉捕获率层面、操作高效性层面、愉悦度三分层面对交互界面设计进行规范。视觉捕获率、操作高效性、愉悦性属于设计方法的指导要素，用户体验愉悦度则为度量指标。其主要的设计方法为：1.利用色彩增强视觉反差，降低非主要信息的视觉感知度，让用户更为迅速地获取目标内容；2.放大可点击图形符号的尺度，引导用户操作并轻松点按，缩短操作时常；3.采用材质建立认知关联，减少用户学习成本与记忆负担，并确立品牌氛围。

（二）交互界面中图形符号创新设计方法的运用：为验证上述交互界面中图形符号创新设计方法的可行性，此次采用腾讯充值小程序的苹果卡活动为设计测试案例。据了解，该项目以“加强用户对玩法的引导”为主要设计目标。经分析后得出，本次交互界面图形符号的设计方向为“吸引用户视觉探索”和“助力用户更高效的操作”以及“建立欢快的氛围认知”，从而达到加强用户对玩法的引导，创建出更高层次的愉悦感体验。经过对该项目的梳理后，基于图形符号创新设计模型得出以下的设计方案：

1.吸引用户视觉探索：强化任务按钮色彩的饱和度与对比度，弱化非选中模块。根据该项目的设计目标衡量出此次交互界面中图形符号的优先级后，强化主要图形符号与背景的色彩对比，增强视觉反差。同时降低其他非主要图形符号的存在感，通过弱化其与背景的色彩对比度，使优先级高的图形符号在交互界面中脱颖而出。根据莱斯托夫效应，人类天然更容易注意到当前场景中最为特殊的现象，合理的色彩搭配使得优先级最高的图形符号快速且有效地传入用户视线。所以在设计该活动区域时，对界面中色彩结构关联性与强弱对比度的重视程度会高于视觉美感。如图6显示，通过对该区域优先级顺序的衡量后，得出优先级最高的图形符号为“开启任务”的图标按钮；已选中游戏的任务显示区域则为次要优先级；其次优先级最低的为苹果卡充值活动的整体区域。因此，在定义该项目主色调为活泼、热情且极具动感氛围的橘色调后，增强“开启任务”按钮与背景的视觉反差，快速吸引用户的注意力。其次通过弱化其他非选中游戏与背景色彩的对比度，降低其他游戏图标的饱和度与对比度达到降低信息噪音的目的。最后打造该活动区域的色彩层级，借助丰富的层次细节来吸引用户视线的停留时长。提升用户对“苹果卡充值活动”区域的注意力，通过合理的色彩设计引导用户关注该区域信息，提升用户视觉捕获率。

2.助力用户更高效的操作：放大操作按钮的尺度，缩短操作按钮之间的距离。在快速吸引用户视线探索后，设计目标由提高用户视觉捕获率更迭为引导用户点击“开启任务”按钮以及参与新手礼包、月礼包、每周礼包的活动。例如图7显示，借助放大图形符号的操作尺度去引导用户更为高效的点击行为。根据费茨定律提到的，用户点击按钮的时长由目标的大小以及距离所决定。与用户心智模型相似度越高的图形符号，引导性越强，同时用户操作行为时间越短、体验感越好。因此通过设置比可视区范围更大的点击区域，确保用户可以轻松点按，以此提升用户操作高效性，缩短用户操作时常；其次，根据格式塔原理，将用户常常操作的，同类型的图形符号聚拢在一起，缩短用户操作与操作之间的距离，提升操作高效性。基于该项目为多业务并行，有5款游戏业务参与该活动，因此将充值业务利益最大化的同时，考虑到未来可复用其他业务的情况，采用卡片式设计，结合异形tab栏切换的方式。引导用户高效率进行多款游戏的切换，增加其他游戏业务的曝光率与点击率，让信息层级更为扁平。其次放大新手礼包、周礼包、月礼包这三个功能模块入口，扩大其操作区域尺度的大小。提升用户操作高效性的同时，扩展信息层级深度，实现复杂内容简单化。最后，利用材质营造活动氛围的沉浸感，增强业务信息延展性与可复用性外，降低用户记忆成本，强化其点击的操作行为。

3. 建立情绪体验：利用材质在需求满足的愉悦体验中建立欢快氛围。由于本次苹果卡充值活动的项目为运营性质的交互页面，如图8所示，该活动详情页为非长期存在的界面，因此对用户传递的形象以欢快、热情、动感的活动运营氛围为主。在设计中利用如礼盒、中国云纹以及发光材质等元素去着重突出此次活动的欢快氛围。并添加该游戏的品牌元素，结合游戏IP形象，游戏LOGO等相关联的图形符号进行融合设计，给予用户品牌安全感与信赖感的同时，借助浓重的活动氛围感为用户搭建沉浸式体验。通过使用恰当的材质有效提升了用户对该活动的认知度，降低学习成本和记忆负担的同时，更快速地满足了目标需求。使用户其在体验过程中自然而然形成愉悦感。视觉捕获率及操作高效性是用户愉悦体验建立的基石[10]，用户在任务完成的过程中累积起来良好的品牌形象，这就是高愉悦度的用户体验。用户体验愉悦度的度量方法主要借助用户问卷调查、可用性测试、A/B测试或者眼动仪等工具，探析用户对该流程使用过程中的视觉感受、操作感受、满意度水平。用户体验愉悦度的目标是让用户感知到该流程是高效顺畅的，从而建立起愉快的体验感。苹果卡充值活动与用户建立起稳定的愉悦体验，用户留存率、转化率则相应提升。由于该项目为非长期存在的活动页，且上线时间紧张，因此未对其做用户体验愉悦度测试，但在使用该创新方法模型进行交互界面设计后，极大地缩短了设计流程，提升了设计效率，从侧面体现出该模型可以指导交互界面图形符号的设计。未来该模型会进行多维度的可用性测试，以便对其迭代优化，日后供交互界面图形符号设计提出更加高效性、易用性的方法论模型。

结论

用户与电子信息产品的交互方式由命令符更迭至图形符号的这40年，先后经历了像素化、拟物化、扁平化的风格转变，但无论界面风格如何转变，图形符号依然是当下用户操作界面的主角。此次根据对交互界面设计中图形符号的色彩、尺度、材质三要素的分析，提出了创新方法模型，该方法总结和归纳为：1.通过加大优先级别高的图形符号色彩对比度，降低非主要图形符号的视觉噪音，以此提升用户的视觉捕获率，促使用户快速获取主要信息与功能；2.借助放大操作图形符号尺度引导用户进行更快速、便捷的交互操作行为，缩短用户操作决策时间；3.利用恰当材质为用户打造沉浸式体验氛围，减少其记忆负担与学习成本。更快速地满足用户需求后，建立起独特的调性，创造一个心情愉悦的用户体验。交互界面设计中除了图形符号的影响外，还包括目标用户及使用场景、媒介等各因素的影响。本文的设计方法模型主要从图形符号中的色彩、尺度、材质三要素出发，探索的角度还不够深入，在真实的设计场景中使用还需要综合考虑多种因素再做判断。