网页或App界面的情感化设计，作为用户体验和需求金字塔的最高层级，越来越多的受到设计师们的关注和重视。Donald Arthur Norman， 作为享誉全球的认知心理学家和尼尔森·诺曼集团的联合创办人之一，也在其名为《情感化设计》的书籍中，从本能，行为和反思三个设计维度，讲述 了情感在界面设计的重要地位和作用，强调web或app设计要从情感层面吸引和留住用户，提升用户体验。

但作为设计师， 究竟如何才能将情感元素巧妙地融入网页或软件设计，使界面轻松摆脱冰冷的人机交流，增强界面吸引力和引导力的同时，提升用户认同感和忠诚度呢？

以下，本文将从六个方面为大家分析和讲解UI 界面设计中应该如何应用情感化设计，为Web或App设计锦上添花。当然，为方便大家理解和借鉴，小编也将结合最新且充满人情味的UI 设计实例和相关原型设计实例（本文所有原型实例都是小编使用一款简单快速的原型工具，Mockplus，制作完成）进行介绍，希望对大家有所帮助：

首先，什么是网页或App UI的情感化设计？

网页或App UI的情感化设计是指，设计师利用界面元素或元素的组合，激发和带给用户正面，积极的情绪反映，例如快乐，喜爱，自由等等。 一定情境下，一些设计师甚至大胆使用别出心裁的页面设计，激发用户负面情感（比如悲伤，遗憾等等），以求引起用户共鸣，从而拉近与用户的心理距离，更加高效地引导用户，提升用户认同感。

简而言之，情感化设计具体包括利用彩配色激发用户情感，或高兴，或温暖，或宁静祥和；利用简单易懂，自由流畅的交互设计，吸引用户点击或参与；以及利用暖心体贴的界面文本设计，打动用户等等。

总之，好的情感化设计界面会让用户眼前一亮，迅速抓住用户的心，让用户拥有更加暖心，愉悦的体验。

如图，利用界面所有元素，尤其是图片和文案，向用户传达其产品安全而值得信赖的情感信息。

那么，如何才能设计出充满人情味的Web或App设计？

正如以上情感化设计定义讲述的那样，Web或App设计的每一个元素或细节都可能成为用户情绪的激发点和源头。那么，设计师如何才能更加高效的利用简单常见的界面元素，打造吸睛又不失人情味的页面设计呢？为方便大家理解和借鉴，这里主要从 6 个主要方面为大家介绍：

1). 利用视觉元素的情感化设计，打动人心

视觉设计元素也可人情味十足。具体而言，设计师可以从以下几个方面尝试设计：

*利用色彩吸引用户，激发用户情感

色彩，作为页面视觉设计中最重要的元素之一，对于Web或App UI 能否在第一眼就吸引并留住用户发挥着至关重要的作用。无论是单个色彩的应用，还是多种色彩的搭配使用， 例如网页主色调，配色以及图片文字色调的选择等等，终究都是为了通过色彩带给用户不同的情绪反应，获得不同的情感体验。

例如，黄，红等积极的色彩或主色调的应用，给人以热情，青春，幸福，快乐等正面情绪，让用户不自觉地拥有更加积极正面的情感。而，蓝，绿，黑等消极色彩或配色的应用，给人以安静祥和，自由舒适之感，让用户不自觉地平静下来，变得更加理智而有耐心。总之，利用色彩引发不同的情感倾向，是页面设计中表达情感的重要途径之一。

如图，作为一款中餐厅的在线网页设计，设计师选择了最具东方特色的红，黄色作为整款设计的主色调。这样的色彩选择不仅让整款设计直观吸睛，引人入胜。而且，还营造出了极具东方之美的氛围，让人忍不住喜爱而跃跃欲试。

如图，以蓝，白色为主色调的 404 报错页面，能够在无形中传递出平静舒适之感，从而更加有效的缓解用户突然面对报错时的负面情绪。

*打造清晰直观的布局和排版设计，拒绝烦乱和用户反感

选择或设计更加清晰，直观，结构化和层次化的页面布局和排版，能够让用户更加简单快速的把握界面主次，从而避免杂乱无章或毫无层次重点的内容设计，带给用户的不快和反感。

如图，利用更加清晰直观，且层次结构分明的布局和排版，突出界面主次，方便用户更加简单快捷的查找所需内容， 拒绝烦乱和用户反感。

*利用网页视觉元素的组合和对比，打造舒适，统一的设觉设计

除了利用单个视觉元素（例如色彩，图片，文字等）吸引用户，多种视觉元素的组合和对比，对于打造舒适，统一的界面设计，作用也是极佳。比如，通过图片和文字的色彩，大小，位置，对齐方式，数量，以及层级的组合和对比，创建更加清晰直观，舒适易懂的页面设计。

如图，通过利用Mockplus的“图片”，“ 单行文字”以及“按钮” 等组件的组合，结合其尺寸，位置，排版，色彩，以及对齐方式的不同，打造出视觉上舒适，统一的网页原型设计。