手机APP交互设计中动态色彩的视知觉研究

刘豪（南京理工大学，江苏 南京 210094）

1 色彩的物理及生理感知

1.1 物理角度的颜色信息通道因素

在大脑视觉神经研究的领域中，科学家发现颜色细胞聚集成团，斑点状排列方式，对可见光的反应功能各不同，Vautin和Dow发现成团的斑点可分为两类[1]。这项研究表明，大脑视皮层中存在对不同颜色的信息加工通道，每个通道处理相对应的敏感颜色，此外，每一个颜色信息加工通道对不同明度、饱和度和色调的颜色在认知上也存在差异，因此在设计界面色彩时，色彩搭配以及交互动效应当符合视知觉中不同颜色信息加工通道的认知过程和负荷特性，从而设计出符合视知觉规律的色彩方案，减缓观者视觉的不舒适感。

1.2 生理角度的颜色感觉影响因素

在色光的非视觉效应研究中，经典的色觉理论根据波长不同将颜色分为冷色和暖色，两者对人的生理感觉有影响，如冷色调使人安静，暖色调使人兴奋。Nancy J Stone等人通过实验表明，工作场所不同的颜色环境对工作绩效有不同的警醒程度，因此，应利用背景颜色差异的警醒特性，在动态色彩的交互设计过程中，作为引导性的指示，指引用户认知和操作。

2 心理学角度色彩对情绪和认知的影响因素

在微观色彩学中，加入了人对色彩的心理感知，即色彩心理学。色彩唤起各种情绪，表达感情，色环中不同色彩的三大属性即色调、明度、饱和度的变化，使得颜色让人产生了强弱、远近、冷暖等诸多感受。色彩在对维度空间中的变化，如位置、面积、时间等维度的变化，将使观者产生更丰富的视觉生理感受和心理情绪认知，其具有指导性特征。目前众多研究者对颜色情绪和颜色偏好作了系列研究，Li- Chen Ou等人对单一颜色的颜色情绪进行了归类，发展了以颜色科学为基础的颜色情绪模式，并分析得出了3个颜色情绪因子，即颜色活动性，颜色重量和颜色温度[3]。其中，颜色的活动性揭示了对颜色的研究应该立足于动态而非静态，只有动态色彩才能够更好地传达不同的情绪和认知，只有将不同色彩传达的情感进行综合考虑，才能够从全局关联的角度，更好地传达不同的情绪和认知。将不同颜色传达的情感与人的认知模型相匹配，才能使用户产生良好体验，从而设计出合理科学的色彩方案。同时，在对色彩的认知和情绪研究中，色彩认知受性格、年龄、情绪等影响，具有群体差异化。可以运用动态色彩符号，制定出自然明了、易于被人感知的色彩设计方案。色彩具有表情、引发人的联想以及象征意义，比如红色向人们传递出热烈、喜庆等表情信息，颜料中的橙色是人们凭借对桔橙联想来命名的，红色暗示正方形, 因为红色的重量和不透明性与正方形的静止和庄重相一致，因此，在色彩方案设计中，要了解不同色彩所表达的情绪符号，使其与人的情绪认知模型进行匹配，让情绪传递的通道能够快速、简洁、无障碍，降低用户认知的错误率、记忆负担和时间消耗，从而产生愉快、便捷的操作经验。最终整体结合物理、生理和心理三大角度，提出色彩认知模型，并通过案例证实该模型在设计上的应用。

交互设计中动态色彩设计方法

2.1 互动媒体中切屏的色彩变化要考虑色后觉的影响

时间过程中色觉、色彩认知是一个连续的、单向影响过程[5-7]。在交互中用户滑动切屏过程停留时间非常短，屏与屏之间的颜色会相互影响，即存在色后觉的干扰。从认知模型中可以看出，人体生理层上最先识别的是色相、明度和饱和度，颜色信息加工通道在认知识别上会自动地将三者相似处归为一类，从而形成整体的心理认知。互动媒体中切屏的色彩变化要考虑色后觉的影响，加入时间维度的思考，符合人识别和认知流动色彩的心理及生理规律，能够形成更加科学的色彩设计方案。

2.2 在单一界面多色配色情况中利用背景颜色差异的警醒特性

在单独界面中使用多个色相的配色方案时，应考虑使用者的短期记忆负担和认知速度，因此色调不宜过多。由于过多的颜色对用户的认知会产生负担，增加烦躁情绪，色彩应用设计中，主要颜色建议不多于3个不同的色调，但可以使用模糊边界的方法，即两个不同色调界面之间的边界是模糊的、虚化的边界，在视觉上呈现出一种渐变的效果，在观者的心理认知上自然温和、具有朦胧美和距离感[8]。安卓Material Design风格界面见图3（图片摘自Material Design 官网）。多色界面中采用邻近色和同色系的配色手法，能够使观者产生统一的视觉感受，从而在视觉和心理认知上达到很好的衔接，降低用户的记忆负担，加快信息识别和认知的速度，起到很好的调和作用。

考虑到用户在使用过程中，视觉暂留时间短，因此可基于颜色背景警醒差异特性，将颜色分出主次，有利于不同信息层级的传达和认知。例如导航和背景的颜色不同，这样在小屏幕和用户快速切换页面中，不会扰乱用户对主要内容的视觉聚焦，快速点击用户需求的内容，产生流畅的操作体验，避免用户操作中迷路产生慌乱和烦躁的情绪。

2.3 色彩的交互动效设计应符合自然中色彩变化的物理运动规律

交互色彩在交互过程中进行流动性实时变化，其动效模式越接近用户的色彩认知模型，用户就会感觉产品越容易理解，对用户的导向就越精确[9]。随着多媒体近几年的发展，人眼对动态页面的识别已经从24帧/s 变成了32 帧/s，因此当以24 帧/s 的速度播放时，人眼不仅速度上会觉得画面不自然、卡顿，在色彩上，也会觉得页面模糊，色彩有幻影，因此，应考虑从物理层、认知层以及心理情绪等角度进行规范设计。在色彩的交互动效设计过程中，应符合物理运动规律，匹配使用者的色彩认知模型，达到一种有序的效果。颜色作为色块元素在界面中具有流动和交互的特性，首先考虑色块在翻转和变形过程中视觉呈现符合不同级别用户的心智模型，便于认知和识别。笔者绘制的windows phone 8 动态贴磁见图4，它由3层组成，即图片层、中间过渡层以及色彩块层。默认状态为b，当用户hover 时下凹至c，点击后色彩层翻转至d。其色彩层的自然翻转动效，在视觉上进行强调。不同磁块颜色之间相关联系，如a 界面色调保持一致，通过明度不同或大小不同进行信息主次的认知引导，单一磁块在翻转过程中，淡入淡出都有所考究，能够让用户在等待信息转换的过程中通过动态色彩的变化，消除焦躁心理，增加用户的认知和趣味性。

动态模型较动效模型对APP整体的影响相对较大，色彩的面积变化会直接影响到色后觉持续的时间，因此色块放大和拉伸变化，要根据真实的自然运动规律及属性进行色彩的交互设计。Google L最新推出的Material Design设计理念中，将色彩分为交互式色彩和非交互式色彩。其中，交互式色彩即动态色彩，在用户的使用过程中有面积和动态的变化。

3 结语

这里针对动态色彩的交互设计，提出基于动态时间、空间等多维度的动态色彩设计细则，通过系统、整体地把握色彩心理因素，提出匹配用户体验认知的色彩认知模型图，达到自然交互的用户体验效果。在大数据时代，动态色彩的研究还需要结合色彩表达方式和认知媒介的变化发展，在移动载体方面作进一步的深入研究。