缩略图
Education and Training

人的视知觉特性在产品交互界面设计中的应用研究

作者

孙冬梅

大连工业大学

引言

产品的交互界面是人机进行信息交换的通道,使用者通过交互界面向产品输入信息、进行操作,产品则通过交互界面向使用者提供信息。这里的交互界面主要是指产品二维界面,即显示与操作界面以及与产品相关的各种软件界面。产品交互界面的可视化设计是产品设计的重要内容之一。

一、格式塔原理与界面设计

在视知觉领域最为权威的一项理论是 20 世纪早期一些德国心理学家提出的“格式塔”(Gestalt)原理,该原理认为人的视知觉具有整体性的特点,当人们观察到周围世界的很多不同信息时,总是先看到整体,然后关注局部。即整体先于局部,局部元素的性质是由整体的结构关系决定的。这是因为人类对于任何视觉信息的认知,是一种经过知觉系统组织后的形态与轮廓,而并非所有各自独立部分的集合。多年来研究格式塔的学者门已经总结出了一些基本且可行的设计原则,为信息可视化设计提供视知觉方面的重要指导。

图与底原则:当人们在观察一副画面时,大脑通常认为画面中小的图形是观察的主体,而更大的图形则是背景。界面设计中通常用小的图形或文字来承载信息,背景则采用大面积的形状或色块,以便于人们能一眼接收到有效信息。如很多厨房电器的界面中主体显示信息由小的文字和图示标明,面板背景做单一颜色处理,并采用能够凸显主体的色彩。

相近性原则:人们通常会将排列在一起、位置比较靠近的物体看作一个整体,距离较远的看作另一个整体。因此,对于需要在同一个界面显示的信息,可以根据信息类别在排版时将同一类型的信息放在相对靠近的位置,而不同类别的信息拉开距离。如微信中很多界面的设计根据相近性原则对信息进行了归类设计。例如,发现列表的设计,将具有同一属性的功能菜单靠近排列,“视频号”与“直播”、“扫一扫”与“摇一摇”等,而不同功能属性的菜单之间在拉开距离的基础上添加了灰色粗线隔断,这样使整个界面结构更加清晰。

相似性原则:人们通常会将看起来具有一定相似性的物体视为一个整体。界面设计中可以通过在图形风格、色彩、大小等方面设置相似元素,使属于同一组的信息看起来相似,从而与其他组别区分开来。例如,在小米音箱的界面设计中,最左侧的菜单图标大小一致排成一列会被识别为一组;“离家”、“晚安”、“自定义”三对图标和文字的组合在字体、字号、图标大小等方面具有一致性,且增加了一个方形底框进一步说明其为一组;对各家电的单独控制部分包含内容较多,每个控制界面在图标和文字大小、排列形式方面保持一致,且具有相同的底框和“开关”图标,这些共同要素使界面更加有秩序,方便观者读取。

连续性原则:人们倾向于感知连续的形状,而不是分散的碎片。凡具有连续性或共同运动方向的信息容易被看成一个整体。例如,在天气预报软件的界面设计中,将每个时间节点的温度变化用线条连接起来,即便由于屏幕大小的限制无法将所有温度信息展示,人们也很容易理解屏幕左右两侧隐藏有剩余部分的信息。

简单性原则:人脑倾向于将复杂的事物知觉为具有对称、规则、平滑等简单特征的一个整体,即具有简明性的客体更容易被视觉认知。在各种界面的版面设计中,往往采用规则的排列方式,便于眼睛简化、归纳视觉元素,提高认读效率。

二、产品设计的可视性

产品设计的可视性是指所设计的产品能够让用户明白怎样操作是合理的、在什么位置及如何操作,是产品交互设计的内容之一。可视性设计主要包含造型提示、视觉符号、物理约束、视觉匹配、信息反馈等方面。

产品可操作部位的造型必须符合人的普遍认知,能够引导使用者正确操作。如最常见的条形门把手,使用者握住后向下旋转即可开门,把手形式明确,操作清晰;内凹形的扣手提示是左右推拉门;横向把手提示前后推拉或开启;如果用缺口代替把手,相比较于有明确把手的柜门,这种方式给人的认知度稍低,但经过短暂的观察后也能顺利开启;如果是两款表面上没有把手的柜门,在用户首次使用时会造成一定的困扰,熟悉后才能顺利使用。

产品的操作部位常常需要设计一些视觉符号,如在操作界面上设计的箭头、文字、图示等,以便指示使用者准确操作。如:为区分左右两扇门的开合方向而粘贴的标识;电烧水壶底部电源处注明“开”和“关”两个位置状态,把手处的按钮上设计凹槽提示“按压”的动作;微波炉的操作面板设计有很多文字和图形的功能说明符号,旋钮的一端做了线性标记,代表旋钮的指向。

产品设计的物理约束是指通过设计提示用户操作的范围,即物理结构上的局限性设计将可能的操作方法限定在一定的范围内,用户不需要经过专门的培训就能操作。比如:一把圆柱形的钥匙不可能插入一个长方形的门孔;三角形的插头只能按照三个孔的方向插入;各种电子产品上的接头种类繁多,但接口与插头之间在形状(或色彩)上有一对一的对应关系等。

视觉匹配是指产品上控制器与控制对象之间要存在明确的匹配关系,即空间位置的对应关系。如:阶梯教室里的开关往往是多位开关,分别控制不同组别的灯,但具体是哪个开关控制哪组灯则不明确,使用时经常需要多次开关进行确认;家里卫生间的控制开关也往往是多位开关,分别控制照明、取暖、换风等功能,为区分每个开关的控制对象常常采用粘贴指示贴纸等方法;餐饮行业用的多头燃气灶与控制开关之间也存在视觉不匹配的问题。设计时应注意尽可能地保证让操作者明确控制与控制对象之间的空间位置关系。

产品设计的信息反馈是人与产品沟通行为的结果,是产品对人操作后的即时反应,也是对产品当前运行状态的显示。操作反馈是必须的,反馈的形式多为视觉信号或声音信号。如:按下按键时的一声“滴”是在告诉操作者已经成功按下该按键;按下电饭锅的煮饭键,显示面板上的“煮饭”灯就会亮起;洗衣机面板对洗涤进程实时显示;在电脑上下载文件时会有下载进度条显示工作进程等。

结论

产品交互界面的可视化设计是提升产品交互效率的核心。通过格式塔理论合理规划界面布局,根据用户的操作逻辑结合以视觉为主的多感官反馈,可显著降低用户在使用产品过程中的认知负担。

参考文献:

[1]侯建军,张春玉.人机工程学[M].北京:清华大学出版社,2022.4.

[2]苟锐.设计中的人机工程学[M].北京:机械工业出版社,2020.4.

[3]张毅,王立峰.信息可视化设计[M].重庆:重庆大学出版社 2021.6.