UI设计中的视觉心理认知与情感化设计分析

陈越红 王烁尧

引言

日本工业设计大师荣久庵宪司说：“赞美轻盈简洁的美感，渴望提高功效、舒适、豪华和多样性，实现美和对美的渴望是未来设计的目标。”①当下未来已至，社会整体的数字化发展让人机交互技术胶黏糅合在人类社会活动的各方各面。UI就是让人与机器得以交流的“信息之窗”，其设计自然被包含于“未来设计”之中，分享共通的设计理念。

随着现代人们对心理认知研究的逐步深入，设计界也掀起了“以人为本”的理念浪潮。以“未来设计”的标准来看，产品的外观构造不应只依附于功能存在，应该更多地考量人的视角，以感受为根，以心灵为本。美国认知心理学家唐纳德·诺曼（Donald Arthur Norman）教授将这一思想概念化为“情感化设计”，并同名著有《情感化设计》一书。大趋势下，互联网应用开发作为新兴产业自然顺应形势，情感开始作为度值介入设计理念。UI作为人机对话的最主要渠道，包揽了绝大部分情感的设计、承接与表达的职责。优质的UI设计会给予用户高层次的产品使用体验，正向的情绪认知增强产品的用户黏度，大局上看能更进一步推动应用市场的经济效益。

鉴于环境与需求的双重发展，情感化UI设计应运而生，既是行业大势所趋，也是人类天性驱使。这一新标准要求设计师在全面理解产品逻辑的前提下，设计出不影响产品功能且满足用户更高层级期望的创意表达工具，以此修正引导用户的知觉、决策与行为。

一、互联网软件产品的UI设计要素

UI（User Interface，用户界面）设计是一广义概念，从字眼来看，UI被拆分为“用户”与“界面”两个部分，其研究内容却不局限于此。数字信号经过一系列能量转化，以像素矩阵的形式将应用界面表现在显示屏上，所形成的图案再投射至人的视网膜，形成一次机器到人的单向信息传递。在这一过程中，显示屏是人机之间信息流通的物理渠道，应用界面是信息的内容载体。硬件与软件共同构成“界面”的具象概念，而人是信息桥梁的另一端点，也就是“用户”。除去这两方面，整个过程本身也被囊括在概念里，代表了两者间的交互关系。

结合上述三方组成，完整的UI设计工作可以被分为：用户研究、IXD（Interaction Design，交互设计）以及GUI（Graphical User Interface，图形用户界面）三大流程模块，图1为UI设计的全套流程结构。

图1：完整UI设计流程的结构树状图，作者自绘

用户研究的工作发展需要归结于设计行业对用户体验日益加深的重视程度。产品设计理念经历了从人适应产品到产品服务于人的重大转变，设计重心从“功能”偏转到“体验”。用户研究的步骤时序通常优先于整体设计流程，其目的在于定义产品用户群、细化产品概念、为受众群体绘制用户画像、洞察需求以满足需求。简而言之，只有充分理解用户的设计团队才能设计出真正满足需求的应用产品。

IXD是对用户期望切实了解后的产品模型建构。确立产品概念后的一系列工作流程包括概念设计、可用性测试、方案评估与调整、制作高保真模型以及排版。交互设计的目的在于尽可能满足用户对应用产品功能上的一切需求，可用性、易用性、实用性与美观性都在交互设计的考量范畴。

GUI直意为采用图形方式实现的计算机用户操作界面，可被狭义概述为“界面优化”。一个应用产品只有程序开发成型后是无法被用户接受的。由于初始的字符界面程序语句晦涩难懂，非专业者无法理解与操作，需要图形设计师对界面接口进行图形化整合设计，让工整的几何区块替代字符语句成为信息显示的表面形式。从审美角度来看，经过设计的色彩图案可以直接从生物层面刺激人的视觉神经，唤醒人的本能审美取向。设计者也会使用具有象征意义的符号系统绘制功能图标，以此迎合人建立在社会基础上的文化认知。

若要将GUI设计分割拆解成独立的元素，色彩因素、整体风格、图形语言、视觉层级构图以及交互动画设计都属于其内容范畴，针对UI视觉的情感化运用基本围绕这几点要素展开。

二、产品用户的视觉思维与情感认知

反思用户在界面交互过程中的现实情形，人在接收和反馈信息时主要依靠视觉感官、听觉感官与触觉感官，其中视觉在大多数情形下占绝对主导地位。基于此种特性，可以说用户主体对软件应用的感知与体验取决于屏幕界面的可视显示。

德裔美籍知觉心理学家鲁道夫·阿恩海姆（Rudolf Arnheim）在其著作《视觉思维》中的一系列论证都旨在证明：感知，尤其是视知觉，具有思维的一切本领。这种本领是说视知觉本身并非低级感官，它本身已经具备了思维功能、具备了认识能力和理解能力。②传统心理学认为视知觉只能从视觉活动中获得某种知觉意象，而对意象整合认知的处理器仍是人类大脑。阿恩海姆否定了这种对视知觉功能的狭隘观念，他认为人类对视觉意象的处理分为思维成分与感性成分，在我们的视觉接触到物象的一瞬间，感性成分就已经具有了直觉判断，这种本能的处理过程并不需要逻辑思维的参与。出生不久的婴孩对某些颜色或图形有着与生俱来的喜爱倾向，这一现象也证明了视觉思维中的感性成分具有独立处理与判断的能力。

知觉直觉是认知活动的其一方面，与理性思维并行。当主体尝试通过逻辑理解世界时，思维也无法脱离感性本能的基础平台肆意发散。这意味着在消费活动中，大多数情况下，视知觉已经在“第一眼”的无意识中为顾客做出了选择，这一现象的根源机制被阿恩海姆称为“审美直觉心理”。这种选择冲动生发于直觉所在的本能层，当产品的后续服务体验超出用户的期望阈值，用户将更乐于为该产品赋予某种价值取向。情感冲动随之进一步上升至反思层面，在人与物之间形成更为牢固稳定的依赖关系。

设计历史中那些让消费者一见倾心的、具有超高销售额的设计产品大多有着周正圆润的形状轮廓、流畅优美的外形曲线或迷人舒适的色彩搭配。类比到互联网软件，UI就是软件产品的包装，是作为主导感官的视觉的主要接触体。感官上的优质体验不仅是产品的附加值，更是软件整体服务的质量保障，能够促成产品口碑与经济效益的正向反馈。

除了直觉审美的抉择倾向，格式塔心理学理论的引进又为视觉思维阐释了一种新特征，即完型倾向。格式塔心理学的基本理念为：“知觉是一个整体，是一个格式塔，任何分析和还原都会破坏这种整体性。”③包括视知觉在内的心理认知都具有将感觉元素拼合成完整经验形式的能力与倾向，这项能力确保了人类只需要把握对象的数个主要特征即可大概掌握对象全貌，避免了人脑对信息处理的过载困扰。视觉思维的完型倾向映射到表层现象上可表现为人脑对类似人脸图案的识别，或是仅根据局部图案补充完整画面。大脑在面对“不完整”的信息图样时会自动生成一个同型的脑场模型，这种模型的存在常被设计者利用到图片的绘画创作上。

在视知觉的感知活动中涉及到了情感与认知两种心理现象，两者同属信息处理系统。这里的“情感”泛指人类的感情，包括情绪。情感是与生俱来的，全人类的情感表现都是相通的，美国心理学家保罗·艾克曼（Paul Ekman）曾说：“情绪表情是全球通用的，而不是在特定的文化下习得的，这是生物的本能和人类进化的产物。”④认知则是人类后天成长中潜移默化的影响塑成体，不同个体之间存在着认知差异。情感主导判断，帮助人类迅速对环境事物产生反应；而认知则尝试解释世界，负责弄清本真的逻辑。情感对应着自然人的感性成分，认知则是社会人的思维成分，两者不可分离，相互渗透。人们的所做所想在潜意识中影响着情感，而反过来，情感也会改变人类的思维方式，倾向于用本能反应来趋利避害。

人们在进行软件操作或其他复杂生命活动时，发出的行为指令可分为“自下而上”与“自上而下”两种（图2）。当行为冲动由情感发起，传递并影响到人的认知时，被称为“自下而上”行为；当活动由人类的理性认知发起，影响至人的情绪情感时，被称为“自上而下”行为。

图2：情感与认知关系简图，作者自绘

举例说明，某款创意类应用的图标设计精致华美，界面配色高级优雅，用户的审美需求被满足，积极情绪促使其付费买下产品，从愉悦的产生到结账付款这一过程即“自下而上”行为；当人们在使用设计粗泛的某款产品时，因为卡顿的操作界面与残缺不全的功能而恼怒不已，不舒适的体验认知导致强烈负面情绪的产生，这种情况即为“自上而下”。

三、以用户体验为中心的UI情感化设计理论

将情感融入设计，是继人们开始重视用户体验后被提出的设计理念，设计师开始强调主客体之间的情感共鸣，以此满足内在的隐性需求。唐纳德·诺曼将情感化设计及其目标明确地划分为三层理论模型：本能层、行为层、反思层，并将三个层次对应的设计水平进行了有用的简化：本能水平的设计对应着产品外形；行为水平的设计对应使用的乐趣与效率；反思水平的设计对应自我形象、个人满意与记忆。⑤

“AJAX之父”杰西·詹姆斯·加勒特（Jesse James Garrett）在《用户体验的要素》中为用户体验制作了一个五层模型。

这一模型从下至上即为一般应用软件的开发流程顺序。在整个应用开发组成中，与软件UI的功能位置对应的是表现层、框架层与结构层。若将UI设计单独置放，其本身也可被视为一个独立的设计流程，具有完整的用户体验要素，对人的本能、行为与反思均有影响作用。以下围绕用户体验的不同层级，根据情感化设计的各层水平分点探讨UI设计中的应用理论。

1、本能层面的UI设计

人的基层本能来自于漫长的物种进化与自然竞择，在该层面上多数个体的情感偏好是相通的。对生物而言，求生本能是种群繁衍的根基，能提供食物、安全感与生存几率的事物与正面情感的关联更强，其具化为视觉意象为：温暖明亮的火光；鲜艳的高饱和度色彩；友善的微笑面孔；圆润平滑的表面；对称的形状；整齐的物品摆放；生物幼崽等等。这些碎片化情境又被设计者重新分解为设计元素运用在UI市场中，以确保应用界面外观能为大多数人接受。

除却生存本能，后天环境的养成同样影响着人脑本能层面的认知。在这方面，地理位置、国家种族、家族信仰、性别年龄、工作教育等社会条件都是影响个体认知形成的关键诱因，导致了种群之间、个体之间的差异存在，用户研究工作也基于这种用户群的差异性展开。某些情境下，后天养成本能会与先天本能相冲突，例如某类人群对食物口味的非主流偏好。出于能量摄取的生存需求，人类的味蕾天生更喜爱品尝甜味、鲜味与咸味，同时为了避免毒害，更抗拒带有酸味与苦味的食物。但在社会体系里，酒文化的风尚久兴不衰，喜爱饮酒的人不在少数。酒精味道苦涩，是后天环境的影响让部分人群克服了先天本能。在针对某些具有特定特征的人群设计应用产品时，除了先天本能外还需要考虑该群体独有的后天本能倾向。

基于以上观点，可以对市场上大部分产品UI的本能层设计做出几点总结：

（1）妄图用一套设计取悦所有人是不现实的，产品开发前应采用针对性设计策略对用户群体与应用类型细化分类。

用户界面的大体色调应该统一，尽量结合内容语义来使用色彩。娱乐类应用产品的表现层应当使用丰富多彩的方式呈示数据信息，使人的边缘性注意力不断被刺激，避免让用户因视觉空间狭小而感到焦虑。

（2）构图设计的精髓是把多种功能压缩到一个有限的空间且保持美感，简洁的直线或流线型是常用的区块分割设计方法。版块的排布不一定严格整齐但要有规律可循，大小位置按软件功能的重要性与使用次数顺序安置，整个界面中最主要的功能区块或图标要在视觉上被凸显出来。

（3）尽可能使用图标代替文字，界面的文字说明应扼要精当。图标的设计应简单、圆润且容易识别。

2、行为层面的UI设计

行为水平设计的优劣从四个方面来衡量：功能、易懂性、可用性与物理感觉。对一款应用程序而言，其功能性在于产品开发初期的策划与反思，物理感觉在于计算机硬件的设计与组装，易懂性、可用性在于功能性在UI中的体现程度。后两者是交互设计的考量重点。

优秀的设计往往通透易懂，其产品外形就是其操作方法的表达，互联网软件的设计同理。如何让交互界面引导用户的操作思维是UI行为水平设计需要思考的基本问题，其中反馈是行为水平上对设计者与用户两者而言最为关键的系统机制。反馈是主客体产生理解的重要因素，一个软件程序必须提供连续且有效的反馈，准确地表明已经发生了什么和正在发生什么，才能让人清楚它在怎样地运行，从而决定下一步指令。

人们对一款产品的信任程度取决于它的概念模型及从中获取的反馈，因此在设计过程中需要不断调整并增强产品模型，以强调信息的反馈。模型的增强需要将用户的使用感受反馈给设计师，设计师再进行用户体验改良，这一过程也同样利用反馈机制。这种方法在软件开发领域被广泛应用，被称为“快速原型模型（Rapid Prototype Model）”（图3）。代入UI设计的具体流程，该模型可具体化为一系列循环迭代的设计步骤（图 4）。

快速原型模型在UI行为水平设计上的引入，让设计者把界面交互重点放在了理解和满足用户的真实需要上。从用户角度来看，UI最根本也最被需要的功能就是使数据信息更容易储存、发送和共享，使用过程应尽可能地保留效能并去掉阻碍，这一目标的实现需要用户与设计者共同的参与。

3、反思层面的UI设计

人脑在反思水平的加工是兼具社会性与个体性的。人类是“活在他者眼光中”的族群，只要生活在社会环境中，任何人都无法避免对自我形象的关注。即使是那些声称对别人的评论毫不在意的人群也是如此，这种思想言论本身也是对自我生活哲学的公开声明。组织或团体中的个体会为自身打上“群体标签”与“个体标签”，前者帮助个体更好地融入群体，后者在于对自身个性的树立与维护。

个体拥有的产品集合是自我形象树立的重要成分，一个人的日常用品也在向别人诉说它的使用者是个怎样的人。在大众看来，高品位的、高价值的产品设计可以和高档次的人格地位挂钩，这便是强调情感化设计的真正价值所在：满足人建立其自我形象和社会地位的需要。

反思水平的活动常常决定大众对一款产品的主观印象，某些UI设计元素对一部分人具有积极作用，但同样的设计却可能引起另一部分人的消极情绪。用户研究的目的就在于让应用开发商“对症下药”，根据不同人群画像差异来打造针对性应用软件，匹配的界面设计也应符合目标用户的期望形象设定。当下流行的“个性化定制设计”便是为了满足个人反思水平的审美需求。当反思水平的设计可以让人产生足够多的正向情绪时，情感上的价值可以弥补甚至超过行为水平的设计缺憾。

对UI的反思水平设计通常需要本能层的设计来实现，通过外形设计达成的反思认知具有公众性与目的性。更深层次的反思认知则与产品本身设计的关联性不大，如对家人的情感依托、对故事的纪念等，它们与个人经历记忆有关，并非设计师能够满足的大众需求。

不同水平的设计方案是有差异的，循环迭代的UI模型设计步骤在行为水平上是高效可用的，但从本能与反思水平上看，经过反复迭代的过程打磨、并经过多人数成员检验的设计产品是不断折中妥协后得到的最中庸的结果。这样呈现的外形设计虽然保证了安全、能被广大群众接受，但却往往是枯燥干瘪、乏善可陈的。

四、情感化设计在UI交互设计中的实际应用

情感化设计理论自提出以来便拥趸无数，受到广大设计从业者的认可。基于该理论的UI设计应用在各类程序上处处可见，用户的情感需求已然成为软件市场中的核心竞争条件之一。以下选取几个角度举例，分析实际应用中UI设计的情感化体现。

1、启动页面主题展示

最好的设计始终遵从一个概念主题，具有明确的视觉重点。软件应用通常会设定一个Slogan，用来传达产品的核心理念，并将其作为用户群体的代表性标签。部分移动端APP将Slogan展示在启动页面上，这即是反思水平设计的一种体现，在面向年轻受众群体的设计作品中常见这种手段。主题标语的选择要贴合年轻人的心理定位，尽量让产品看上去更“酷”，更与众不同。除了拟定主题，还应当为产品应用选择适合的主题色彩。色彩对人眼来说比文字更加直观，能从本能层面上将产品的“情绪”传达给用户。

Keep是一款提倡自律自控的健身应用，致力于提供健身指导、交友及装备购买的一站式运动问题解决方案。Keep在启用页面中展示的宣传语为“自律即自由”，选择了深灰色作为背景颜色，整个界面设计兼具工业时代的秩序感与计划性，以及运动健美的力量感。网易云音乐作为一款音乐播放平台，其启动页面宣传语为“音乐的力量”，主题色也采用高饱和度的红色来表现音乐的澎湃力量。

2、合理使用摄影、插画设计装饰界面

在现代平面设计中，插画、摄影等图像艺术是颇为常用的展示性元素，在UI设计中也常使用平面艺术来引导、启发与呈现信息。在界面交互领域，“一图胜千言”是非常经典且有用的经验总结，除了图像作品本身的艺术性能让用户感受到美之外，一张图片所能传达的信息与情绪也远非一段密集的文字能媲美。不少软件会使用具有一定审美价值的图像作品作为启动展示。

3、频繁有效的反馈

对反馈的重视与优化是行为水平的情感化设计，拥有有效且频繁的反馈机制的应用产品能很轻松地赢取用户的信任。理财类应用、电商类应用等涉及金钱交易与隐私保护的软件需要用户极高的信用额度，在这类产品界面中常能见到可视化反馈机制的建构与运用。

4、个性化定制

系统为用户提供若干套不同风格的界面皮肤来挑选，这一举措让设计师避免了为趋和大众审美而殚精竭虑，用户们只需要从众多风格中选出一套最适合自己的即可。个性化定制让产品的界面设计工作成为用户体验的延伸，个人设计满足的不只是用户本能层的审美需求，也满足了用户自我品味形象的塑造需要。

5、拟人化情感设计

人们倾向于从任何有生命或无生命的物品中读取情感反应。为软件设定性格、赋予人性化的语言表现，是开发企业常用的博取用户共情的手段。这种手段是情感化设计的最为直接的表现，也往往最为有效。它让应用产品从冷冰冰的程序变成了有感有情的“生命”，程序的通知提醒借拟人化的口吻传达给用户，通过对话表达情感、同理心与鼓励，这种设计从三个层面上均有适用性。

适当的趣味设计与视觉刺激会给产品界面以及产品本身增色不少，但情感化设计不要过于强硬，不应使情感化信息侵占过多界面区域，扰乱用户正常使用产品的信息接收。

五、结论

从人类视知觉的生理层面进行的系统化研究，是对以人为本设计思想的理论式践行，是从生物本能的根源去挖掘，并分析人对审美的倾向天赋。人类主体通过知觉思维来认识世界，研究其涵盖的情感与认知也是对认识行为本质的探索，成果可作为设计理论的填充基础。情感的赋予让冰冷的方寸之间变得生机盎然，让程序与机器也沾染了感性的温度。唐纳德·诺曼的三层设计水平的高匹配性使其同样适用于UI设计领域，两者结合的UI情感化设计理论可以有效提升用户的交互体验，将体验从本能的审美直觉上升至反思的情感依赖。对情感设计元素的合理运用能够加固用户与产品的情感枢纽，进而扩增产品的忠实粘性用户，为应用市场带来长远的经济收益。

情感化设计有效化的前提是对用户进行细致充分的调研且让用户直接参与到设计流程中来。由于个体的认知差异，反思层情感化设计具有明显的群体划分特性，在界面概念模型成型之前需要绘制用户群体画像，针对不同人群进行匹配设计。在个体意识不断觉醒的今天，UI设计行业应当继续围绕用户体验发展，借助科学量化人类的情感认知，用艺术美学与同理情感在科技与心灵之间构架交互桥梁。

注释：

① （美）唐纳德·诺曼著，付秋芳译：《情感化设计》，北京：电子工业出版社，2006年，第83页。

② （美）鲁道夫·阿恩海姆著，滕守尧译：《视觉思维：审美直觉心理学》，成都：四川人民出版社，1998年，第28页。

③ （美）鲁道夫·阿恩海姆著，朱疆源译：《艺术与视知觉》，成都：四川人民出版社，1998年，第308页。

④ （美）保罗·艾克曼著，宾国澍译：《心理学家的读脸术：解读微表情之下的人际交往与情绪密码》，北京：当代中国出版社，2014年，第37页。

⑤ （美）唐纳德·诺曼著，付秋芳译：《情感化设计》，北京：电子工业出版社，2006年，第21页。