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