“设计实际上是一种交流行为,这意味着要深刻理解与设计师交流的人。” ——来自唐纳德·诺曼(Donald A. Norman)《设计心理学》作者通过一定的设计手段,观察用户的反馈,激发用户联想并产生共鸣,使其获得情绪上的愉悦感和情感上的满足感。用户提供有温度、有人情味的产品设计体验。
为什么需要情感化设计?
总体来说,好的情感化设计可以为用户创造更好的价值,三点思考如下:
- 心理学研究表明,人类具有情感的诉求。
- 当诉求得到满足后,会产生一系列的正向情感,这些情感具有改变人脑解决问题并帮助大脑做决策的能力。
- 一般用户研究基于用户行为,关注产品自身的功能性和用户的体验感。
一、情感化设计的三个层次
在唐纳德·诺曼的《设计心理学3-情感化设计》一书中从知觉心理学的角度解释了人的本性三个特征层次,即本能层次、行为层次、反思层次。
马斯洛需求简化可以分为:生理需求、安全需求、情感需求。将三种需求映射到产品设计中,分别对应的是产品的可用性、稳定性和情感设计的需要。再将其与情感化设计的模型对应,建立情感化设计的需求模型:本能层次的设计、行为层次的设计、反思层次的设计。
一款优秀的 APP 产品,往往要有良好的界面视觉设计、流畅的交互体验感、引发用户共鸣的情感价值等优点。
1. 本能层次的设计
人是视觉动物,对外在审美的洞察和认知是本能思考的。此时主要的外在特征,视觉审美占人的主要支配因素。
具有美感的设计画面,人们喜欢接受并且有好感度。本能层是感官刺激的直接反馈。对应到产品层面的设计能力便是外在的美观性,根据本能层的定义建立与之对应的情感化需求模型是—视觉(形、色、字、质、构)设计等审美思考点。
2. 行为层次的设计
行为水平的设计,注重的是效用,产品功能要好用,高效解决用户使用功能的行为水平的设计。
对应产品的易学性与易用性。易用性是通过交互与技术手段达成;易学性,是好的用户引导设计;由此我们可以建立与行为层对应的情感需求模型是 — 用户的有效引导设计。
交互信息层级明确,按钮设计运用了弥散大投影,列表的扁平化的场景设计中,用户使用单手手势容易操作。
3. 反思层次的设计
当用户在使用产品后,产品与用户之间建立情感链接,通过与用户之间的互动,满足用户的安全感心理、满意度、品牌 IP 的记忆点等。
通过本能层与行为层的共同作用,在用户的内心会产生混合的情感,融合了文化、仪式、个人经历、情感等很多。
因素。映射到产品的设计中就是产品的情感温度,对应的情感需求模型-营销类的运营设计(成就感、关怀、互动)人性的设计。
成就激励,实现用户的自我价值,签到打卡、一枚勋章、一个标签、排行榜等正向情感的视觉设计。
情感化设计的思考
a. 本能水平的设计(如下图所示)
1. 本能水平的设计,要求UI设计师在设计中,学会从视觉层面思考,使用符合用户心智的本能认知的图形创意设计,以此来满足用户本能的审美体验感和满足感。
人们第一眼看到、感觉到的设计画面,看APP界面元素的设计是否会激发用户的兴趣点,以及其界面的可用性和审美如何。
上面的设计,是用户容易认知的精美的视觉设计作品。容易识别的图形创意设计,扁平化的极简主义设计风格,是符合现代用户的审美需求的设计风格。
容易理解和操作的界面设计。从布局上思考,手机界面尺寸有限,APP界面设计风格简约,用合适的模块设计,来展示APP的主要内容,以此突出产品的核心功能的体验设计。
b. 行为水平的设计(如下图所示)
1. 产品为人们服务,提升用户的满意度和好感度。事实是:三分之二的用户在安装应用程序72小时后,就很少使用它了。最成功的应用程序是那些由于良好的行为水平的设计,人们才会经常使用它,因为良好的产品设计可以更好的为用户服务。
提升用户体验最关键的是:产品设计不仅要好看,同时也要方便用户更好的使用这款产品。
行为层次的设计,侧重于实现产品交互上的易用性,用户是否能够顺利地完成操作,使用产品是否符合用户的使用习惯。
1. 左边案例:得到产品截图后,有意见反馈和分享两个按钮操作的设计,方便用户分享截图,或者收集用户的意见反馈;是符合用户心智模式的易用性的行为水平的设计。
2. 右边案例:微信设计,当用户点击“+”后,微信系统会识别手机相册最近的一张截图,设为用户可能发送的图片;是符合用户心智模式的易用性的行为水平的设计。
c. 反思水平的设计(如下图所示)
反思层次的设计。产品设计是否会调动用户的情感;用户情感的反馈,是属于更深层次的体验设计,受到用户的文化背景、经验、教育程度等因素的综合影响。
1. 左边案例:金融交易产品设计的界面设计,当用户想保护自己资产的隐私时,可以点击右上方的关闭眼睛icon,资金显示变为隐藏的星号,传递给用户以安全感。
2. 右边案例:为了您的账户安全,请设置手势密码,或者跳过;一个小小的关怀,安全感的体验设计,马上让用户感觉到登录的流程中,有了安全感。
3. 反思水平的品牌 IP 形象的融入和视觉设计-是符合用户的心智模式的体验设计。比如下面的界面设计作品和品牌 IP 形象设计作品等。吉祥物融入界面设计,既能减少用户的负面情绪,也可以不断的增强品牌在用户心中的形象。如下图所示。
下面我将从和用户内心感受相关的三大情感体验入手分析。
安全感
安全感就是渴望稳定、安全感的心理需求。安全感主要表现为用户的可控感和确定感的设计。
具体案例分析如下:(有效传达安全策略、产品设计的品质感、品牌效应、信息安全、为用户着想、预先告知用户操作结果等方面)来做设计,以此来传达给用户安全感。
有效的传达安全策略。1. 京东金融-安全感的蓝色品牌色使用。2. 京东金融的隐私政策-传递给用户安全感 。如下图所示:
产品设计的品质感,带给用户以安全感。 界面设计的简约风格、大气、导航清晰的产品,显得很专业和值得信任的感觉,如下图所示。
品牌效应是安全感传递的元素,用户对互联网产品的感受,通过品牌调性传递给用户以安全感,得到用户的信任。
营造安全氛围,品牌蓝色赋予用户以安全氛围;收益率和理财期限,信息层级明确;大公司品牌营造安全的氛围,风险等级等展示,传递给用户良好的安全氛围感。
预先告知用户操作结果,提升用户的信任感
1. 发红包的运营设计弹窗。通用红包,满 35 元优惠 4 元 , 提升用户的信任感。
2. 住宿的界面设计。住宿的列表设计,展示了用户需要看的核心内容,信息层级明确,提升了用户的信任感。
满足感
一个好的情感化设计,可以满足用户的精神需求。生存需求满足后,人们更想实现自我价值,获得满足感。
接下来,我会从(分享成果,赋予用户专属元素,超出用户预期)三方面分析
a. 分享成果让用户得到满足感
1. 当用户旅游或参加活动后,美食、住宿后,开心的心情和场景,希望通过社交平台分享出去。
b. 赋予用户专属感的元素设计( VIP 会员等 )
飞猪的会员界面设计,会员的卡片化设计,星巴克升杯,行程管家,西溪湿地门票 0.1元购买,都是赋予用户专属元素的体验设计,提升用户的满足感,进而提升产品的会员注册率和商业变现价值。
c. 超出用户预期的界面设计
虾米音乐的主题换肤设计,除了官方配色的皮肤设计,还有海上钢琴师等主题设计,同时用户还可以根据自己的审美偏好,自行定义皮肤的颜色,体验设计感很棒。都是超出用户预期的视觉体验设计。
亲切感
亲切感是指亲近友善的感受,一个人得到他人赏识、喜爱、好的评价,受到称赞而使内心得到满足感和愉悦感;在产品设计中,产品设计对用户友好,用户就会对产品产生好感。
案例分析如下 :
a. 鼓励用户分享和反馈,增加亲切感
作为一款旅游产品,用户分享内容,宝贝评价、和分享者的互动,都可以增加用户的粘性度和留存率。
增加了用户对产品的亲切感,是很棒的产品体验设计。
b. 以服务者的姿态做设计,增加用户的亲切感
作为一款内容型产品,让用户选择自己近期最感兴趣的内容,最美路线的旅行等内容设计,推送符合用户需要的出行信息,提升产品的活跃度。行程线路的设计,宝贝评价和很美的主题文案设计,提升了产品的亲切感。
什么样的设计具有格调感和品质感?
1. 具有高格调色感的设计,看起来具有典雅之美,设计特别有品质感。
a. 苹果的海报设计感,如下图所示。
1 . 周围留白的深色背景,很好的突出主视觉和主题的设计。
2 . 光感的映射,展示精致的 Ipone 的产品外观美,显得整个画面设计感,格调很美。
3 . 信息层级很明确:主视觉、主题内容,背景层、文字链接层,信息设计层级很明确,设计很棒。
b. 来自站酷海洛的设计图,很有品质感和格调美感,如下图所示。
c. 很有格调的海报设计展示,如下图所示。
绿色背景色,英文字母,文字排版很有设计感。辅助图片很好的融入整体画面,显得海报设计很有设计感。
小结:
- 情感化设计:可以拉近用户与产品之间的距离,让用户感受到产品的温度。
- 情感化设计的三要素:本能水平的设计、行为水平的设计、反思水平的设计。
- 情感化设计带给用户的三大情感体验:安全感,满足感,亲切感。
- 格调感和品质感的设计,有典雅美,可以提升用户体验的设计感。
情感化设计的价值和意义
1. 产品设计不仅要理解用户的使用习惯,也要掌握用户的情绪感受和体验。
关于 404 界面的情感化设计,如下图所示:
2. 情感化动效设计,让产品的体验设计去触动用户的内心,拉近产品与用户之间的距离。
比如,产品 UI 的情感化的动效设计,动态的展示可以方便用户更好的理解产品的操作过程,产品的界面设计和动态交互,可以触动用户的内心,拉近产品与用户之间的距离。
Guillaume Kurkdjian的动画
3. 互联网同类型的产品,在服务、功能、内容上,缺少差异化的设计,我们要重视设计的驱动价值,更好的满足用户的情感化需求的设计,可以提升用户的粘性度和愉悦感,如下图所示。
4. 差异化设计,采用符合用户心智模式的体验设计,可以占据用户心理的位置;节奏感是动画的灵魂。
好的体验设计,为您的产品设计赋能和提升用户的满意度。
差异化设计-动效设计的价值 :
1. 增加体验设计的舒适度:让用户认知过程更为清晰。
2. 增加界面活力:第一时间吸引注意力,突出重点功能。
3. 层级关系:体现元素之间的层级与空间关系。
4. 用户的反馈: 助力交互体验。
5. 微交互动画在情感化设计中的价值
微交互动画在界面状态之间进行了平滑的转换,并改善了应用设计的体验。用户可以更好的了解之前和当前的状态。同时,微交互动画使得设计有了情绪价值,同时为产品设计增加了必要的设计细节展示。
TinoFran的应用内动画
6. 语音识别动画在情感化设计中的应用
2020年的一个趋势,应用程序内语音导航工具,基于振动的用户手势响应,以及可以使内容更具对比度的应用程序,更好的提升了用户的体验感。
Cristian Hurhui的语音识别动画
小结:
微交互动画,UI界面的精美设计和微交互引导 – 成为了应用程序的设计条件。微交互动画都可以创造情感吸引力,并为用户带来审美满意度。可以帮助品牌与目标受众建立联系感,并建立用户对公司的忠诚度。
二、B端产品在情感化设计中的应用
1. 原研哉曾经提过一个理念:让感官被重新发现。“设计师先不要急着画草图,而是先想想使用者的感受”。
2. 我们决定从用户的感官情感作为切入点,通过解读用户行为背后的情绪感受,来解决用户体验设计的需求。
3. B端产品为什么要做情感化的设计 ?
用户调研思考
与用户的聊天发现,他说用某个产品经常有不想使用的感受,但是用户每天都必须使用 B 端系统设计的工作。
常规的用研方法通常是基于用户的行为。“基于产品的自身功能、设计、体验是否有问题” 这三个维度的思考。
对用户的内心感受和情感关怀的视角是关注很少。
B端产品如何去做情感化设计?
回顾 TO C 端的情感化设计,登录提示、空状态等使用插画和微交互,会提升用户体验,带给用户满足感和惊喜感,产品设计上起到锦上添花的效果。
我们在落地 B 端产品时,会发现三个问题 :
- 提升用户情感的方法缺少体系化和系统化。
- 使用视觉和微交互的设计手法,可以给用户带来部分好的价值感和情绪价值。
- 不能全面验证设计的产出。
学习一下 Ant Design 特色的情感化设计体系 ?
回顾一下 2018 年前,Ant Design 的设计价值观是:”确定”、”自然”。
“确定”指代设计的边界,使设计者在保持克制的状态下做出更好的决策。
“自然”是指汲取自然界中的灵感,挖掘自然的美学表达和行为交互,创建更高效和有层次的产品体验。
在”确定”和”自然”的基础上,我们反思 Ant Design 情感化设计要为用户带来什么样的基调呢。
提到企业级产品,给人的印象有”技术门槛”、”操作复杂”、”专业术语”等一些冰冷的、缺乏人情味的关键词,所以我们需要给用户带来有温度的、有人情味的产品设计。
情感化的产品设计体验,”情感”这个词,是 Ant Design 设计语言中的第三个价值观。
覆盖范围
接上文,情感化设计聚焦在插画、微交互层面,结合诺曼的情感化设计的三层次理论来看,偏本能层比较多。
这是我们非常好的设计机会点,还可以更加丰富一些。
比如:企业级产品的核心价值体现在解放生产力、提升效率,设计者如何通过完善的设计方案,协助产品为用户提升效率。
这就需要我们通过行为水平的设计去做一些事情,辅助用户更高效的使用产品,对产品产生正向的情感。
对于反思水平的设计,体现在用户对产品的所思所想,是点睛之笔,需要我们全局思考。
Ant Design 的情感化设计体系,不仅停留在视觉本能层,还要加入行为水平的设计思考。
切入点,从用户情感诉求出发,系统性地思考产品设计,哪些场景需要做情感化设计、怎么做、做到什么程度,确定什么样的产品设计目标,作出情感关怀的设计方案,结合业务层面的思考,迭代优化设计落地,提升用户在使用产品过程中的情绪体验价值。
情感定义
用户的”情绪感受”,来源于心理学,它是人对客观事物是否满足自己的需要而产生的态度和体验,引申到企业级产品领域,可以理解为用户对产品是否满足自己的需要而产生的体验感。
情感诉求导向的设计流程,分五个步骤完成情感化设计的探索和落地,如下图所示。
以 Ant Design 的企业级产品设计的情感指标 :
提升正向情感指标:
愉悦、惊喜、信任、期待、自豪。
转化负向情感指标:
生气、失望、疑惑、焦虑、挫折。
参考 Ant design 系列的产品设计,用户对于期待、疑惑这两种情绪是感受最多的,而自豪的成就感非常少,排到最后。
根据这个排序,Ant design 设计做到了:提升用户的正面情绪的价值感,转化用户的负面情绪价值感;
结合工作场景的思考,制作用户听得懂的情感化设计
a. 维持和提升用户对产品设计的期待感
b. 减少用户的焦虑感
c. 强化用户的信任感和愉悦感
e. 提升产品设计带给用户的惊喜感和自豪感
以阿里的企业级产品为例,落地情感化的设计目标。
在产品设计的首页,我们主要关注的是疑惑、期待、信任的三种情感。
1. 与用户产生的微互动的设计,有助于培养 Ant DataGo “简单、易用”的用户心智模型。
如上图,用心呈现的美学与用户互动的设计,能为我们产品打造良好的第一印象,给用户带来愉悦感和惊喜感。
2. 在次屏位置,补充了对产品核心能力的描述,进一步帮助新手用户快速认识这个产品,降低疑惑感。
3. 第三屏,图表分类展示。
4. 第四屏,满足用户的工具和资源,带给用户满足感和惊喜感。
以上的产品设计,提升用户的信任感,这是一个真正帮助用户的企业级系统的产品设计。
企业级产品的设计语言体系
1、网页PC端的设计语言
国外的案例如下:
2020年,Web端设计趋势中,插画始终保持着一定的地位,插画用新的方式重新定义了网页设计、UI 设计,在设计界面时,它应该是设计过程的一部分,以帮助强调品牌或网站所提供的服务及产品的信息,它能营造产品的氛围感,表达产品的情感。
国际网页设计师 Mike 的作品,精致的原型设计和视觉、插画设计,如下面两个图。
几何插画在网页设计中的应用,如下图所示。
2、国内企业级产品的设计体系 —— Ant Design
蚂蚁的企业级产品是一个庞大且复杂的系统,数量多且功能复杂,而且变动频繁,常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件,可以得到一些稳定且高复用性的组建化设计。
随着商业化的趋势,越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个目标,蚂蚁金服体验技术部经过大量项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。
基于「自然」、「确定性」、「意义感」、「生长性」之四大设计的价值观,通过模块化设计的解决方案,让计师专注于更好的用户体验设计。
色彩
系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中,基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。
色彩模型
Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计,该模型更便于设计师在调整色彩时对于颜色有明确的心理预期,同时也方便团队间设计师的沟通。
布局
UI 界面的布局空间要基于「动态、体系化」的角度出发展开思考。受到建筑界大师柯布西耶的模度思想的启发,基于「秩序之美」的原则,探索 UI 设计中的动态空间秩序,形成了 Ant Design 的界面布局方式,为设计者构筑具备理性之美的布局空间创造了条件。
在中后台视觉体系中定义布局系统,我们建议从 5 个方面出发:
1. 统一的画板尺寸。2. 适配方案。3. 网格单位。4. 栅格设计。5. 常用模度。
字体
在中后台的视觉体系中,定义字体系统,我们建议从五个方面思考字体:
1. 字体家族的选择。2. 主字体的运用。3. 字阶与行高。4. 字重的选择。5. 字体的颜色选择。
图标
Ant Design 的图标设计原则,源自”确定”和”自然”,落实到图标的设计领域,一共有四个设计原则。
1. 准确: 设计造型准确的图标(保持偶数原则,去掉小数点),选择表意准确的图标设计风格。
2. 简单: 在表意清晰准确的基础上,尽量保持图形设计的简洁。
3. 节奏:图标设计构图中的秩序之美。
4. 愉悦:图标设计带给用户的愉悦感。
关于图标设计,建立优秀的图标设计体系,需要整个团队在设计前、设计中以及设计后,都能够达成一致性的思路并且精诚合作去完成一套图标设计。
阴影
阴影来源于现实生活的反映物体与物体之间距离的物理现象。在界面设计中,通过模拟元素的投影直截了当的来告诉用户,元素之间的高度距离与层次关系。
暗黑模式使用场景思考
- 当需要长时间在暗光环境下工作时,建议使用暗黑模式,减小亮度对比带来的视觉压力,保证使用者的体验舒适感。
- 当需要沉浸式的专注工作内容时,建议使用暗黑模式,可以帮助使用者更关注凸显出来的内容和操作。
暗黑模式的设计原则
1. 内容的舒适性
暗黑模式下避免使用对比很强的色彩或内容,长时间使用会带给用户以疲劳感。
2. 信息上的一致性
暗黑模式下的信息内容需要和浅色模式保持一致性,保持原有的层级关系。
以百度网盘为例,如下图所示:
设计模式
秉承 Ant Design 设计价值观,针对企业级产品反复出现的设计问题,设计模式给出一般性的解决方案,实现跨应用交互一致性的有效融合。依照设计模式使用 ant design 组件化设计界面,即减少了不必要的认知成本,又能够提升交互确定性和设计的效率价值。
设计模式包含以下内容:
原则
基于设计的价值观衍生出的设计技巧,包括如何高效组织信息、帮助建立用户与界面设计的互动等原则性要求。
全局规则
通过规范用户常见的互动行为,包括导航、数据录入、数据展示、反馈、操作、帮助等,呈现组件化设计元素的标准用法。
模板文档
基于蚂蚁中台的设计经验,总结了表单、列表、数据可视化、详情页、工作台、异常、结果、编辑器等典型的解决方案,介绍每类页面的设计目标、设计技巧以及典型页面内容等,帮助广大设计者可以快速构建界面。
可视化的设计
可视化的设计语言是基于 Ant Design 衍生的一套具有数据可视化特性的设计指导原则,让数据表达更符合用户的心理,以帮助『设计者』孵化出更具业务特性的数据可视化解决方案,屏蔽不必要的设计差异和实现成本,从而解放『设计者』和前端的生产力,实现数据图表的研发效能全面提高。
比如:国外的一个案例 :
小结:
企业级产品设计中,进行情感化设计的思路和方法总结
我们希望这条情感化设计之路能给大家带来启发,其中有两点可以分享:
1. 以人为本:从用户自身出发,优先关注用户的情感,洞察到用户的真实诉求,以此来改进我们的产品体验设计。
2. 标本兼治:运用整体逻辑、全局思维,去思考情感化的设计,让设计师的视角更加开阔、更加贴近用户和产品,带着对 “人” 的关怀,去打造温暖人心的企业级产品设计。
三、插画在情感化设计中的应用
插画(图形化的设计语言)
“插画是一种视觉形象化的设计,它的基本诉求功能是将信息最清晰、最明确、最直接的传递给观众。”——徐海鸥《插画的艺术》
插画的设计原则
从最底层的设计价值观到最上层的设计方法,HiTu 沿袭了 Ant Design 的 ETCG 的设计思路,将图形化资产组件化,分可形成模板,合则可拼搭成案例。
国外设计师的插画案例,应用在网页设计中,如下图所示。
2. 数码插画在情感化设计中的应用
当下,带有醒目的有趣数字插图的用户界面。在创新和艺术实验的渴望驱使下,设计师们在UI设计中尝试使用明亮而勇敢的插图。
用户界面设计者Victor Nikitin
用户交互伴随着精美的插画。您可以看到各种插画的艺术设计风格,技术和新的数字插画趋势,成为一幅令人难忘的画面,对用户产生了强烈的情感吸引力。
3. 插画提升信息的传达效率,插画在产品设计中越来越重要。
用户对于具象元素的感知能力远高于文字,为了提升内容的易读性,可以使用插画。以教育APP 为例,如果我学教育课程,就会在教育界面的任务界面中,搭配一个教育类型的插画;通过插画上所描绘的场景可以知道是教育产品的主题设计。插画在这里替代传统意义上“标题”,插画结合 “标题” 可以更加高效传达内容。
4. 插画能传递情绪价值。例如我们一般会给一个产品界面配一个主题插画,而所有的活动都是通过创建使用场景,使用户产生诉求的。如果这里只使用文字,那么用户需要通过文字进行联想来感知这个场景,配上插画则省去了思考的过程,让用户更容易认知,推送消息的打开率会提升,如下图所示。
插画可以让用户更好的感知的界面设计中的内容;用户对于插画的欣赏,让用户有很好的代入感。
5. 插画的尺寸比例一般是:1:1、3:2、4:3 和 16:9 ,如下图所示。
a. 突出展示内容的主体,考虑正方形构图,1:1 的比例 ,突出表现产品的信息 ; 如下图红色的区域所示。
b. 3:2 和 4:3 的尺寸比例差不多,比如 ipone 默认拍摄出来的照片,网页设计中的图片比例是 4:3, 如下图红色的区域所示。
c . 目前主流手机的屏幕比就是 16:9 这个尺寸。
为什么是16:9 ?因为根据人体工程学的研究,人的两只眼睛的视野范围是一个长宽比例为16 : 9 的长方形,所以笔记本显示器等行业都是根据黄金分割比例来设计产品。16:9 的配图在视频类 APP 中应用得最多,符合用户的浏览习惯。如下图红色的区域所示。
小结:以上列举的是常见插画的尺寸比例。
6. 国际网页设计师 Mike 的设计作品,插画在网页设计中的应用,如下图所示。
今天就分享到这里了,小伙伴我们下期再见