“设计实际上是一种交流行为，这意味着要深刻理解与设计师交流的人。” ——唐纳德·诺曼（Donald A. Norman）《设计心理学》作者
写在前面：
–
回顾C端的情感化设计：
1数码插画在情感化设计中的应用
当下，带有醒目的有趣数字插图的用户界面。在创新和实施艺术实验的渴望的驱使下，设计师们不惧怕在UI设计中尝试明亮而勇敢的插图。
用户界面设计者Victor Nikitin
现在，用户交互伴随着可爱的微动画或插图。它们看起来像是奢侈的艺术品！您可以看到各种艺术风格，技术和新的数字插图趋势，这些趋势组合在一起，成为一幅令人难忘的图片，对用户产生了强烈的情感影响。
2 微交互动画在情感化设计中的应用
动画概念可以维持公司的整体风格并展现品牌声音。通过在移动应用动画中重复一些品牌元素，企业试图在客户的感知中灌输与其品牌风格的强烈关联，并提高品牌知名度。
3 语音识别动画在情感化设计中的应用
2020年的一个趋势，催生了屏幕文本评分应用程序，应用程序内语音导航工具，基于振动的用户手势响应以及可以使内容更具对比度的应用程序，更好的提升用户体验感。
一 情感化设计分为三种：
–
在唐纳·A·诺曼的《设计心理学3-情感化设计》一书中从知觉心理学的角度解释了人的本性三个特征层次，即本能的、行为的、反思的。
1. 本能水平的设计
人是视觉动物，对外在形象的观察和理解是处于本能思考的。此时主要的物理特征，视觉审美占主要支配因素。
好的具有美感的画面，人们容易接受并且喜欢。
2. 行为水平的设计
行为水平的设计注重的是效用，产品功能要好用，高效的解决用户使用功能的行为水平的设计。
3. 反思水平的设计
当用户在使用产品后，产品与用户之间建立情感的链接，通过与用户之间的互动，满足用户的安全感心理、满意度、品牌记忆点等。
情感化设计案例 ：
–
本能水平的设计（如下图所示）
–
1.本能水平设计要求UI设计师在设计中学会从审美视觉本身出发，采用符合用户心智的本能认知的符号和图形元素，以此来满足用户本能的审美体验和惊喜感。
上面五个设计就是，符合用户认知的、精美的、本能的优秀设计作品。
行为水平的设计（如下图所示）：
–
1.产品为人们服务，提升用户的满意度和好感。
事实是：三分之二的用户在安装应用程序72小时后就再也不用它了。最成功的应用程序是那些由于良好的行为设计，人们经常使用，更好的服务用户。
如上图所示，提升用户体验最关键的点：
产品设计不仅要好看，同时要方便用户的行为操作；
1.左边案例：得到产品截图后，弹窗底部有意见反馈和分享两个按钮操作的设计，符合用户认知的、易用性的行为操作的设计。
2.右边案例：微信设计，当用户点击“+”后，微信系统会识别相册里最近的一张截图，设为用户可能发送的图片。
优质的产品设计-符合用户行为心理学，比如下面的设计作品
优质的产品设计-符合用户行为心理学，比如上述设计作品
反思水平的设计（如下图所示）：
–
反思性设计：“它使我完整和充满个性化的设计。可以讲述关于它(和我)的故事记忆点。”这是关于IP形象、个人安全感和满足感、品牌点记忆以及对经历的美好回忆点。
1 左边案例：交易产品设计的界面，当用户想保护自己资产的隐私时，可以点击右上方的关闭眼睛icon，资金显示变为隐藏的星号，传递给用户以安全感。
2 右边案例：为了您的账户安全，请设置手势密码，或者跳过；一个小小的关怀，安全感性设计，马上让用户感觉到登录的流程中，有了安全感。
反思水平的品牌和形象设计-符合用户心智模式，比如下面的优秀的设计作品：
反思水平的品牌和形象设计-符合用户心智模式，比如上述优秀的设计作品
情感化设计的价值很有意义 —
1.产品设计不仅要理解用户的使用习惯，也要掌握用户的情绪感受和体验，如下图：
比如上面的：404界面的情感化设计
2. 情感化动效设计，让产品的体验要触动用户的心声，拉近产品与用户之间的距离。
–
3. 互联网同类型的产品在服务、功能、内容缺少差异化的设计，重视设计的驱动，更好的满足用户的情感化需求的设计，提升用户的粘性和愉悦感。如下图所示：
–
4. 差异化设计，符合用户心智模式的设计，占据用户心理的位置；好的体验设计，为您的产品设计赋能和提升用户的满意度。如下图所示：
–
二 B端的情感化设计探索：
1.原研哉曾经提过一个理念：让感官被重新发现。“设计师先不要急着画草图，而是先想想使用者的感受”。
2.我们决定从用户的感官的情感为切入点，通过解读用户行为背后的情绪感受，来挖掘用户被忽视的需求。
3.重点是：B端为什么做情感化设计？
用户调研思考：
-
跟用户的聊天发现，他说用某个产品经常有不想使用的感受，每天必须使用B端系统工作，常规的用研方法通常是基于用户的行为，“基于产品自身功能、设计、体验是否有问题”这三个维度思考，对用户的内心和情感关怀的视角是关注很少的。
B端产品如何去做情感化设计？
TOC端的情感化设计，登录提示、空状态等使用插画和微交互，提升用户体验，带来满足感和惊喜感，起到锦上添花的效果。
我们在落地B端产品时发现三个问题：
-
提升用户情感的方法缺少体系化和系统化；
-
使用视觉和微交互手法，而对于企业级产品用户来说略显单薄，可以给用户带来部分好的价值和情绪点；
3.不能全面验证设计产出对于提升用户情感的准确性和实际效果。
这里我们学习一下：
Ant Design 特色的情感化设计体系？
Ant Design 设计价值观
先回顾一下 2018年前，Ant Design 的设计价值观是：”确定”、”自然”。
“确定”指代设计的边界，使设计者在保持克制的状态下做出更好的决策；
“自然”是指汲取自然界中的灵感，挖掘自然的美学表达和行为交互，创建更高效更有层次的产品体验；
在”确定”和”自然”的基础上，我们反思 Ant Design 情感化设计要为用户带来什么样的基调。
提到企业级产品，给人的印象有”技术门槛”、”操作复杂”、”专业术语”等一些冰冷的、缺乏人情味的关键词，所以我们要给用户带来有温度的、有人情味的产品。
有情感的产品体验，”情感”这个词，是 Ant Design 设计语言中的第三个价值观。
覆盖范围
接上文，情感化设计聚焦在插画、微交互层面，结合诺曼的情感化设计三层次理论来看，偏本能层比较多：
这是我们非常好的设计机会点，还可以更加丰富一些：
比如：企业级产品的核心价值体现在解放生产力、提升效率，设计者如何通过完善的设计方案，协助产品为用户提升效率？
这就需要我们通过行为设计去做一些事情，辅助用户高效的使用产品，对产品产生正向的情感。
对于反思水平的设计，体现在用户对产品的所思所想，是点睛之笔，需要我们全局思考，在哪些场景中适合做画龙点睛之笔。
Ant Design的情感化设计体系，不仅停留在视觉本能层，还要加入行为水平的设计思考。
切入点，从用户情感诉求出发，系统性地思考产品中哪些场景需要做情感化设计、怎么做、做到什么程度，确定设计目标，作出情感关怀的解决方案，结合业务层面的思考，迭代优化实现，提升用户在使用产品过程中的情绪体验。
情感定义：
用户的”情绪感受”，来源于心理学，它是人对客观事物是否满足自己的需要而产生的态度体验，引申到企业级产品领域，可以理解为用户对产品是否满足自己的需要而产生的态度体验。
这里我们借鉴常规的设计流程，分五个步骤完成情感化设计的探索和落地：
以Ant Design 企业级产品情感指标为案例：
提升正向情感指标：
愉悦、惊喜、信任、期待、自豪
转化负向情感指标：
生气、失望、疑惑、焦虑、挫折
参考Ant design系列的产品，用户对于期待、疑惑这两种情绪是感受最多的，而自豪感（也就是成就感）非常少，排到最后；
根据这个排序，Ant design团队，做到了：强化/提升用户的正面情绪，减少/转化用户的负面情绪；
结合工作场景思考，作出了用户听得懂的情感化设计很重要：
a 维持期待感
b 减少疑惑和焦虑
c 强化信任和愉悦感
d 转化挫折生气和失望
e 提升惊喜和自豪感
以阿里的企业级产品为例，落地情感化设计目标：
1 在产品首页中，我们主要关注 疑惑、期待、信任 三种情感。
与用户动态的微互动的设计，有助于培养 Ant DataGo 是 “简单的、易用的”用户心智模型。
如上图，用心呈现的美学与互动设计，能为我们产品打造良好的第一印象，为用户带来愉悦感和惊喜感。
2 在次屏位置，补充了对产品核心能力的描述，进一步帮助新手用户快速认识这个产品，降低疑惑感。
3 第三屏，图表分类： 期待感
4 第四屏：满足用户的工具和资源，带给用户满足感和惊喜感：
以上的设计，提升用户的信任感，这是一个真正帮助用户的企业级系统，这个产品做的非常棒！
在此感谢和致敬，阿里优秀团队的企业级产品设计，向他们学习先进的设计语言和提升情感化设计的思路。
三 企业级产品的设计语言体系：
1 网页PC端的设计语言：
国外的案例如下：
2020年，Web端设计趋势中，插画始终保持着一定的地位，插画以新的方式重新定义了Web /产品设计，在设计界面时，它应该是设计过程的一部分，以帮助强调品牌或网站所提供的服务及产品的信息，它能营造产品的氛围，表达产品的情感。
插画有助于讲述品牌故事，用言语无法做到的方式传达产品信息、风格和个性。并且图像识别最为直观、速度最快，因此插画对品牌的商业运作也是有着很深的影响。
“插画是一种视觉形象化的设计，它的基本诉求功能是将信息最清晰、最明确、最直接的传递给观众。”——徐海鸥《插画的艺术》
国际UI设计师 Mike 的作品：
精致的原型设计如下：
几何插画如下：
2 国内企业级产品的设计体系 —— Ant Design
蚂蚁的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
色彩：
Ant Design 将色彩体系解读成两个层面：系统级色彩体系和产品级色彩体系。
系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。
色彩模型：
Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。
布局：
空间布局是体系化视觉设计的起点，和传统的平面设计的不同之处在于，UI 界面的布局空间要基于「动态、体系化」的角度出发展开。我们受到建筑界大师柯布西耶的模度思想的启发，基于「秩序之美」的原则，探索 UI 设计中的动态空间秩序，形成了 Ant Design 的界面布局方式，为设计者构筑具备理性之美的布局空间创造了条件。
在中后台视觉体系中定义布局系统，我们建议从 5 个方面出发：
-
统一的画板尺寸
-
适配方案
-
网格单位
-
栅格
-
常用模度
字体：
在中后台视觉体系中定义字体系统，我们建议从下面五个方面出发：
-
字体家族
-
主字体
-
字阶与行高
-
字重
-
字体颜色
图标：
Ant Design 的图标设计原则源自”确定”和”自然”，落实到图标设计领域，一共有四个，他们分别为：
-
准确： 设计造型准确的图标（保持偶数原则，去小数点）；选择表意准确的图标，不对用户的认知造成困扰。
-
简单： 在表意清晰准确的基础上，尽量保持图形的简洁，不做多余的修饰。
-
节奏： 挖掘构图中的秩序之美。
-
愉悦： 赋予适度的情感。
图标的设计是 UI 设计中非常容易被忽略的环节，建立优秀的图形体系也不是一、二个设计人员的事，需要整个团队在设计前、设计中以及设计后都能够达成共识并且通力合作去完成共建。
阴影
阴影来源于现实生活的反映物体与物体之间距离的物理现象。在界面中，我们往往通过模拟元素的投影直截了当的来告诉用户，元素之间的高度距离与层次关系。
-
高度
-
光源
-
阴影值
暗黑模式使用场景思考：
-
当需要长时间在暗光环境下工作时，建议使用暗黑模式，减小亮度对比带来的视觉压力，保证使用者的体验舒适。
-
当需要沉浸式的专注工作内容时，建议使用暗黑模式，可以帮助使用者更关注凸显出来的内容和操作。
暗黑模式的设计原则：
-
内容的舒适性
暗黑模式下避免使用对比很强的色彩或内容，长时间使用会带来疲劳感。
-
信息的一致性
暗黑模式下的信息内容需要和浅色模式保持一致性，不应该打破原有的层级关系。 -
如下图所示：
B：设计模式：
秉承 Ant Design 设计价值观，针对企业级产品反复出现的设计问题，设计模式给出一般性的解决方案，实现跨应用交互一致性的有效融合。依照设计模式使用 antd 组件设计界面，即减少了不必要的认知成本，又能够提升交互确定性和设计的效率。考虑到需要适应各种独特的业务场景，模式的规则具有一定的灵活性，变不离宗，通过了解设计模式的构建逻辑，可以衍生出更具场景特性的解决方案。设计模式包含以下内容：
原则
基于价值观衍生出的一般设计技巧，包括如何高效组织信息、帮助建立用户与界面的互动等原则性要求。
全局规则
通过规范常见的互动行为，包括导航、数据录入、数据展示、反馈、操作、帮助等，呈现组件元素的标准用法和弹性空间，并了解如何将他们组织在一起来创建良好的体验。
模板文档
基于蚂蚁中台的设计经验，我们总结了表单、列表、数据可视化、详情页、工作台、异常、结果、编辑器几类页面的典型解决方案，介绍每类页面的设计目标、设计技巧以及典型页面内容等，帮助广大设计者可以快速开始构建界面。你还可以在 Ant Design Pro 里在线预览这些典型页面。
Ant design企业级产品，做的真是太贴心了，优秀～
C：可视化的设计：
可视化语言是基于 Ant Design 衍生的一套具有数据可视化特性的设计指导原则，让数据表达更符合用户心理，以帮助『设计者』孵化出更具业务特性的数据可视化解决方案，屏蔽不必要的设计差异和实现成本，从而解放『设计者』和前端的生产力，实现数据图表的研发效能全面提高。
比如：国外的一个案例：
D：插画（图形化的设计语言）
设计原则
从最底层的设计价值观到最上层的设计方法，HiTu 沿袭了 Ant Design 的 ETCG 的设计思路，将图形化资产组件化，分可形成模板，合则可拼搭成案例。为设计值提供强大的灵活性和定制性。
国外的插画案例：
E：动效价值
-
增加体验舒适度： 让用户认知过程更为自然。
-
增加界面活力： 第一时间吸引注意力，突出重点。
-
描述层级关系： 体现元素之间的层级与空间关系。
-
提供反馈、明确意向： 助力交互体验。
小结：
简短的动画视频，动画的UI装饰和微交互-这些元素中的每一个已成为几乎所有行业的移动应用程序的必备条件。各种形式的动画都可以创造情感吸引力，并为用户带来审美满意度。它还可以帮助品牌与目标受众建立更个人的联系，并建立用户对公司的忠诚度。
通过在移动应用动画中重复一些品牌元素，企业试图在客户的感知中灌输与其品牌风格的强烈关联，并提高品牌知名度。
总结：
–
企业级产品中进行情感化设计的思路和方法总结：
我们希望这条情感化设计之路能给大家带来启发，其中有两点，特别值得和大家分享：
-
以人为本：从用户自身出发，优先关注用户多样的情感，洞察到用户的真实诉求，以此改进我们的产品体验设计。
-
标本兼治：避免情感化设计由于忽略情感本源导致的 “治标不治本”的问题，平衡本能、行为和反思三个层面，运用整体逻辑、全局思维，去思考情感化设计，让设计视角更加开阔、更加贴近用户和产品，带着对 “人” 的关怀，去打造温暖人心的企业级产品设计。
-
致敬和感恩阿里企业级产品设计和国际的优秀设计作品，让我对企业级产品有了很多新的认知和落地应用企业级产品设计的思路。
Powered by Froala Editor