五月第三波 设计干货 合集来了！这次的合集当中，很多工具和素材是相辅相承的，比如图片压缩、格式转换、去除图片背景、移除图片内容的几款工具可以搭配在一起使用，给 Figma 的开源图标合集、Web UI 设计系统和框架以及高素质的 Lottie 动画素材库也可以搭配到一起使用。当然，前2期合集里也有宝藏：

第一波！2022年5月精选实用设计干货合集 五一假期结束了，给大家贡献一波设计干货吧！

阅读文章 >

第二波！2022年5月精选实用设计干货合集 五月的第二波设计干货合集紧跟着就来了！

阅读文章 >

下面我们具体看看这一期的干货：

1、免费 Figma 和 XD UI 设计资源 https://webui.design/

这个网站提供的功能还是非常直接的，它完全是针对 Figma 和 Adobe XD 这样的软件提供专业而全面的 UI 设计和开发框架，这些框架涵盖了很多不同的类型，但是并不包含移动端 UI ，而是以网页和 web app 为主。这个网站提供的 web UI 素材多数是免费的，有这类需求的设计师同学可以收藏一下。

2、免费在线情绪板 Visualist https://set.visualistapp.com/

很多设计师同学做设计的时候还是会用一下情绪板来着，这个名为 Visualist 的工具可以帮你在几分钟以内，快速梳理出情绪板，这个工具可以一键删除其中图片背景，并且帮你进行自动梳理，通过这种方式，帮你快速地整理出设计的思路和想法。

3、免费 Figma 开源图标合集 https://www.figma.com/community/plugin/1074084347757622122/Iconduck

这个图标合集当中包含 150 个开源合集的合集，总计包含有超过 120 000+ 免费可用的图标，你所需要做的就是安装这个插件，然后就可以调用其中超过 12 万个图标。其中的图标合集大都是超大图标合集，你可以很轻松地找到你的项目可用的全套图标。

4、在线图片压缩和转换工具 https://www.optimizeimages.com/

这个在线的图片格式转换和压缩工具，已经非常贴合如今的设计需求了，它除了可以帮你针对 jpeg、png、svg 和 gif 这类常见格式进行批量压缩优化、添加水印，还能批量抓取网站的图片素材，高效地转化 WebP 和 AVIF 这类更为高效的格式。

5、超强的免费背景去除工具 https://clipdrop.co/remove-background

随着之前很多图片背景移除工具相继收费，很多同学都在找优质的替代品，这个 ClipDrop 出品的背景移除工具就是不错的选择。一方面，这个工具可以处理高达 5000x5000px 这样的大尺寸图片，另一方面，它在抠图的时候精准度也超过很多市面上的竞品。正在找抠图工具的同学赶紧去试试吧。

6、图片内容移除工具 Photoroom https://www.photoroom.com/tools/remove-object-from-photo/

很大程度上，这个工具提供的元素去除功能，可以和上面的背景移除工具在功能上进行互补，上传你需要处理的图片，然后简单的擦除你想要移除的元素，它可以在强大的 AI 的协助下，帮你干掉它，并且保持整个图片的自然合理，值得试试哦。

7、高品质 Lottie 动画素材库 https://creattie.com/

如果你日常设计的时候会需要高素质的动画素材，那么这个素材库一定要收藏一下，这个素材库提供大量的 Lottie 动画素材，以及很多不错的矢量图。如果你不确定它是否值得付费，素材平台还提供了免费试用，你可以先尝试着用用来判断一下。

8、肌理超强的笔刷字体Brich

Brick 是一款典型的展示性的英文字体，字体笔触肌理感相当强，用来做 Banner 和海报设计是特别合适的。这款 免费字体 是仅限个人使用的的版本，具体可以在文章开头和结尾的百度云链接中获取。

9、免费矢量形状素材小合集

这是一组矢量素材合集，其中包含 15 个 3D 立体风（实际是2D）的几何立体线框和 40 个平面矢量素材，这些充满秩序感的矢量素材都是以 PSD 格式存在，仅限个人使用，可以在文章开头和结尾的百度云链接中下载获取。

10、免费的 Instagram 展示样机

老实国内设计师对于用到 Instagram 样机的场合似乎并不会太多，但是这套样机素材稍加处理其实是可以应用到其他的 APP 展示上，倒是不失为一个不错的展示模板，感兴趣的同学可以在文章开头结尾的百度云链接中获取，值得注意的是，这个免费样机仅限个人使用。

OK，以上就是这一期的设计 干货合集 ，希望里面有你需要的素材！

五月第三波 设计干货 合集来了！这次的合集当中，很多工具和素材是相辅相承的，比如图片压缩、格式转换、去除图片背景、移除图片内容的几款工具可以搭配在一起使用，给 Figma 的开源图标合集、Web UI 设计系统和框架以及高素质的 Lottie 动画素材库也可以搭配到一起使用。当然，前2期合集里也有宝藏：

第一波！2022年5月精选实用设计干货合集 五一假期结束了，给大家贡献一波设计干货吧！

阅读文章 >

第二波！2022年5月精选实用设计干货合集 五月的第二波设计干货合集紧跟着就来了！

阅读文章 >

下面我们具体看看这一期的干货：

1、免费 Figma 和 XD UI 设计资源 https://webui.design/

这个网站提供的功能还是非常直接的，它完全是针对 Figma 和 Adobe XD 这样的软件提供专业而全面的 UI 设计和开发框架，这些框架涵盖了很多不同的类型，但是并不包含移动端 UI ，而是以网页和 web app 为主。这个网站提供的 web UI 素材多数是免费的，有这类需求的设计师同学可以收藏一下。

2、免费在线情绪板 Visualist https://set.visualistapp.com/

很多设计师同学做设计的时候还是会用一下情绪板来着，这个名为 Visualist 的工具可以帮你在几分钟以内，快速梳理出情绪板，这个工具可以一键删除其中图片背景，并且帮你进行自动梳理，通过这种方式，帮你快速地整理出设计的思路和想法。

3、免费 Figma 开源图标合集 https://www.figma.com/community/plugin/1074084347757622122/Iconduck

这个图标合集当中包含 150 个开源合集的合集，总计包含有超过 120 000+ 免费可用的图标，你所需要做的就是安装这个插件，然后就可以调用其中超过 12 万个图标。其中的图标合集大都是超大图标合集，你可以很轻松地找到你的项目可用的全套图标。

4、在线图片压缩和转换工具 https://www.optimizeimages.com/

这个在线的图片格式转换和压缩工具，已经非常贴合如今的设计需求了，它除了可以帮你针对 jpeg、png、svg 和 gif 这类常见格式进行批量压缩优化、添加水印，还能批量抓取网站的图片素材，高效地转化 WebP 和 AVIF 这类更为高效的格式。

5、超强的免费背景去除工具 https://clipdrop.co/remove-background

随着之前很多图片背景移除工具相继收费，很多同学都在找优质的替代品，这个 ClipDrop 出品的背景移除工具就是不错的选择。一方面，这个工具可以处理高达 5000x5000px 这样的大尺寸图片，另一方面，它在抠图的时候精准度也超过很多市面上的竞品。正在找抠图工具的同学赶紧去试试吧。

6、图片内容移除工具 Photoroom https://www.photoroom.com/tools/remove-object-from-photo/

很大程度上，这个工具提供的元素去除功能，可以和上面的背景移除工具在功能上进行互补，上传你需要处理的图片，然后简单的擦除你想要移除的元素，它可以在强大的 AI 的协助下，帮你干掉它，并且保持整个图片的自然合理，值得试试哦。

7、高品质 Lottie 动画素材库 https://creattie.com/

如果你日常设计的时候会需要高素质的动画素材，那么这个素材库一定要收藏一下，这个素材库提供大量的 Lottie 动画素材，以及很多不错的矢量图。如果你不确定它是否值得付费，素材平台还提供了免费试用，你可以先尝试着用用来判断一下。

8、肌理超强的笔刷字体Brich

Brick 是一款典型的展示性的英文字体，字体笔触肌理感相当强，用来做 Banner 和海报设计是特别合适的。这款 免费字体 是仅限个人使用的的版本，具体可以在文章开头和结尾的百度云链接中获取。

9、免费矢量形状素材小合集

这是一组矢量素材合集，其中包含 15 个 3D 立体风（实际是2D）的几何立体线框和 40 个平面矢量素材，这些充满秩序感的矢量素材都是以 PSD 格式存在，仅限个人使用，可以在文章开头和结尾的百度云链接中下载获取。

10、免费的 Instagram 展示样机

老实国内设计师对于用到 Instagram 样机的场合似乎并不会太多，但是这套样机素材稍加处理其实是可以应用到其他的 APP 展示上，倒是不失为一个不错的展示模板，感兴趣的同学可以在文章开头结尾的百度云链接中获取，值得注意的是，这个免费样机仅限个人使用。

OK，以上就是这一期的设计 干货合集 ，希望里面有你需要的素材！

前言 1. 数字人 服务分类 随着 元宇宙 概念的大热，作为基础建设元素的数字人在去年出现了井喷式的爆发。但实际上数字人并非近几年的产物，如果从世界上第一位虚拟歌姬林明美算起的话，数字人已经产生了近 40 年。

这些年来，各界对于数字人的定义和分类尚没有统一的共识。从广义上来讲，任何以数字形式存在且具有类人外观和行为的数字化资产都可划为数字人范畴。依照此类定义，我们尝试将市面上的数字人服务进行归类。从下图可以看出，数字人依照应用形态大致可以分为三类。除了由来已久的 IP 型数字人以外，市场中还出现了以完成服务为目标的业务型数字人，以及以真人为原型强调替身属性的分身型数字人。

从5个方面，帮你了解什么是虚拟数字人 大家好，我是 Clippp。

阅读文章 >

像洛天依、AYAYI 这类虚拟偶像和博主可划入到 IP 分类中，此类方向更关注数字人个人特性以及世界观的塑造，通常会采用 3D 高保真风格和手 K 或高精动作捕捉来确保整体形象的质量。而虚拟分身型则是以现实世界中的真实人类作为原型，为其在数字世界中赋予新生命。像 Travis 与堡垒之夜合作，在游戏世界举办虚拟演唱会就是此类虚拟人的一种应用。伴随着元宇宙概念的流行，相信定位在分身赛道的产品会致力于形象制作成本的进一步降低，从而让虚拟分身能力成为新数字时代公民的基础配备。

而笔者所在团队打造的数字人则是第三种–业务型数字人。与前两类不同，业务型数字人通常使用 AI 驱动来完成人机交互。面对此类型数字人，如何发挥其拟人性的优势，打造真实的服务体验是本次设计的核心要点。接下来我们将在以下篇幅中介绍业务型数字人的设计实践。

2. 数字人带来的体验变革 “数字人”作为信息载体 服务趋向透明化

传统的交互方式将界面中不同的元素，通过最优信息组合与层级堆叠，来承载用户与计算机之间的交流，如同翻译一样让双方彼此理解。但这样固定行为路径的信息结构，对于用户来说需要适应和学习，丧失了一部分自主能动性。诺曼（Don Norman）曾提出“无界面的界面”，界面设计追求透明性，以将对人机互动的干扰降到最低。所以从本质上来看，界面是以一个“具体对象”的身份出现的，既连接又分隔人与机器，以最自然的方式牵引与反馈信息与服务。而数字人正是界面服务本身的载体，让用户脱离界面本身的屏障，用更原始自然的方式面对界面，通过自然对话牵引服务。

界面成为关系的动态空间 信息流动在“人”与“数字人”之间

当系统的对话由“数字人”来进行承接后，界面的价值变成了推进“数字人”与“人”之间的互动，建立连结。我们发现相比较传统的线性交互逻辑，数字人的界面信息更偏向根据当前环境与用户状态的动态推送，除反馈当前对话结果外，也会根据场景中用户不断变化的多维信息为用户进行引导与推荐，同时为了保证服务场景的真实性，也需要与当前的交互环境无缝衔接，就此可见，界面不止是任务效率工具，同时也模仿人与人之间关系构建的方式，建立了人与机器互动的人文情怀。

以线下银行客服为例的设计实践 1. 项目背景 用户与客户价值双驱动 为虚拟客服落地提供势能

在探寻数字人产品落地场景的过程中，我们发现，需要将数字人的核心特性在特定领域中发挥核心价值，才能在市场中落地生长。因此低成本高转化的线下银行虚拟人客服，成为撬动金融行业的首选落地场景。

就客户价值而言，线下服务场景每天有大量人工客服机械回答同样的问题，企业要为这些重复劳动支付巨额人力成本。且服务人员素质、知识储备参差不齐，现场表现不稳定，迫切需要低成本高质量的服务工具。虚拟人本身作为信息载体，保留人与人面对面沟通方式的同时，大大提升了沟通效率与服务稳定性，且平台灵活的配置能力可支持业务实时更新，省去大量人工培训成本，成为企业信息人工服务的新触点。

就用户价值而言，角色身份上，面容亲和衣着职业的客服人员更能获取用户信任，引发用户交互兴趣。互动形态上，虚拟人打破了传统界面交互框架，将人作为信息交互对象，让服务有了具体“身份”，更易上手，信息获取更自然，让信息化程度不高的用户也可以摆脱设备恐惧，实现零门槛交互。

2. 场景关系构建 打破设备隔阂 让 “职业形象” 等候在 “ 职业场景 ”

大屏设备仅仅作为承载数字人的媒介，我们希望界面在具体场景中 “隐身”，让数字人真实站立在场景中，获得用户亲和信任感，专注与她面对面沟通，不感到违和与侵扰。为达成这个目标，我们需要探究以下几个问题：

如何塑造金融客服的职业形象 如何营造自然真实的对话场景 A.如何塑造金融客服的职业形象

塑造数字人的形象，我们一般会从人格特质与职业特质两个方向分别对数字人的外表、情绪动作进行综合考量：

① 外表维度

即构建数字人的脸型五官、发型、妆容服饰。对于业务型数字人，我们需要从人格特质与职业特质两方面来思考他需要拥有什么样的面容、五官特征以及服饰要素。

人格特质：银行客服需要表现出聪明专业的职业特点，同时又具备与人亲和的性格。参考相关面相心理学研究，浓眉大眼、脸型略尖的外表会给人聪明的印象，而嘴角上扬、眼型略弯，脸型棱角不凸显的外表会更亲和讨喜，在模特的选择上我们也尽量靠近这些特点。

职业特质：偏分扎发是银行客服常见的职业发型，妆容不易过浓，显得干练有精神又平实亲和。在衣着的选择上，除职业工服外，为保障不同银行品牌的服务通用性，我们在工服上添加了品牌露出位，透传客户品牌形象。

② 情绪动作维度

即构建数字人情绪动作的选型与表现。因业务型数字人主要承载效率型任务，我们在情绪动作的选型上弱化了数字人人格特质的表现，更偏向于职业特质的表现。

职业特质：为体现数字人职业特性，我们观察了线下银行客服的标准职业动作，选择了双手交叉于上腹部，丁字步站立的默认站位体现职业素养，同时减少无意义的动作设计，利用数字人的动作表情传达有效信息，如点头表示聆听，挥手表示内容推荐与指引，动作表现上选择幅度小、中性、自然的动作，以在表现鲜活灵动的同时不过分侵扰用户注意力。

B.如何营造自然真实的对话场景

为了能让用户在真实的线下场景有效且愉悦的体验服务，我们观察了线下银行的服务链路与空间设计，思考数字人全链路的进店服务体验，就以下两方面进行了思考与拆解：

① 舒适安全的社交距离

为了让数字人真实存在于场景中，与用户建立舒适安全的沟通，我们需要探究合适的人物身高与大小以保障用户与虚拟人之间距离适中交互自然。以 2019 年中国人平均身高作为参照，将 168cm 作为数字人实际身高，以便与用户建立平等沟通的视角。通常人与人在进行一般社交活动时，会保持 1.2m 左右的礼貌距离，在大屏的使用场景中，用户与屏幕需保持 50cm 左右的操作距离，根据成像原理我们发现数字人的实际身高需要进行适当缩放才可以真实模拟礼貌社交距离。

我们采用真人模拟的测量方式，让 2 位 168cm 身高的同事面对面站立保持 1.2m 距离来进行大小观测，将真人模拟感受到的变化移植到虚拟人的大小调整上，做出相对舒适安全的社交距离。

② 高效流畅的场景体验

关于线下场景体验的拆解，我们主要思考两个方面，一是如何让大屏界面能够完美融入线下场景，数字人能够真正站立在场景里；二是拆解从用户进店到服务结束全链路体验，区分近远场的不同诉求精细打磨体验。

场景模拟。 关于数字人背景的设计，我们模拟了真实的线下客服场景，设立咨询柜台，本次方案中考虑到后续适用不同品牌银行接入，在品牌透出的视觉元素区位均可快速配置与替换。

近远场体验拆解。 Endsley 提出的三层情境意识（SA）模型，为信息处理提供了较为成熟的方法论，该理论分为三层：1.对当前情境中成分的感知；2.对当前情境的综合理解；3.规划预测该情境的未来情况。

将情景理论与远近场相结合可将用户认知与设计要素做如下拆解：

远场：建立认知，引导靠近

根据上述的情境意识的三层模型，在情景获取阶段，重点在于为用户提供明确的元素，帮助用户快速建立有效认知。界面中所传递的信息包括：动态的、模拟真实身高且身着职业装的真人数字人，模拟银行前台的柜台，银行 logo 以及“空闲中，欢迎咨询” 的状态字样；进入情境解释阶段，对上述的元素进行整合诠释，用户能够明确建立起“智能的、可咨询、可信赖、可使用”的认知，此时结合用户咨询业务的需求内因，能够激发体验冲动；到情境反馈与预测阶段，用户会预测能够与数字人进行互动，解决需求，因此主动靠近，由远场转为近场。

近场：建立关系，引导行为

银行柜台使用人群数字化程度不高，交互方式上尽量符合用户自然对话的惯性认知，实现新手的无感过渡，降低学习成本与认知负荷。我们在具体交互方式的构建上，总结出以下交互设计思路供参考：

主动服务 当用户进入与数字人的交互区域，大屏自动通过图像人脸识别获取用户信息，数字人进入服务状态，主动说话并推出服务卡片，让用户能够快速建立服务认知，聚焦任务操作。

指引明确 触屏用户天然习惯点击操作，在信息输入方式上，对于不同类型的任务需要引导用户使用 GUI 操作还是语音输入表达诉求，强调：“试试说 ” 与 “选择” 的引导差异。同时在交互中的每一个状态下，都需要让用户明确我现在可以做什么，如何做，可以获取什么结果。要求数字人与用户交互的每一个节点明晰，引导通俗易懂，操作简单。

渐进式引导 为减少用户理解成本，我们在信息与操作的引导上采用单一路径，用户只需要跟随虚拟人的逐步引导，傻瓜式操作即可流畅完成服务。

分支处理 在一问一答的语音交互中，有很多潜在分支需要处理才可以还原自然体验。比如用户在服务进行中长时间未给出明确操作，至少会有两种情况：1.我们认为用户可能存在困惑，虚拟人会主动引导用户进行限定内容选择或聚焦提出问题。2.本身反馈内容较复杂冗长用户未操作则可能是还在消化信息，虚拟人需要延长等待时长等等。

3. 交互式数字人大屏的设计要点 A.交互式大屏的功能分区

交互式大屏有自己独有的特性，本质上是一块超大触屏，但从交互方式与信息焦点两方面与传统触屏差异很大。在交互方式上，从手指的点按变成的整个手臂的移动，点触以多指拍按与扫动为主。在信息焦点上，用户曲臂操作屏幕，距离大屏的距离在 0.5m 左右，平视可接收的信息焦点有限，更多信息需要转动眼球或头部，那么用户的视线需要被引导与定位，信息需要按区块划分优先级，让用户更舒适流畅的获取信息。

最佳操作区的设定

我们根据人因工程学，确定出大屏的最佳交互区域最佳可视区，来展示核心卡片信息。以 55 寸大屏，1.68m 平均身高用户来进行方案探索。依照人体站立不屈膝，右侧大臂可旋转横向和纵向角度计算出最佳交互区域。

根据最佳交互区，我们可以将核心交互卡片放置于此，次级交互放置于外沿，边缘区域不适合放置操作内容。

最佳可视区的设定

垂直可视区域：在用户保持站立时，最大视区为视平线以上 50° 和视平线以下 70°。视平线以上 25° 至视平线以下 30° 范围内为最佳眼睛转动区，能够以放松的状态识别信息，所以展示内容的最佳垂直视角在标准视线以上 25° 至以下 30°。

水平可视区域：双眼区域大约在左右 60° 以内，观察超出左右 60° 的物体时，则需要集中精力才能识别物象，因此核心内容区域在左右 60° 视角内较为合理。

根据最佳垂直视角与水平视角的人因特点，结合头部小幅度垂直向下 15° 转动扩大视角，我们计算得到 3 个可视区的划分，核心可视区展示主要对话流信息；次级可视区展示次要的状态信息，如收音反馈状态；最大可视区内尽量不放置信息。

基于对交互区和可视区的计算测量，在页面布局中，我们将信息卡片最大程度的置于有效视区和次级交互区的重叠区域，用户可以最舒适的状态进行阅读和操作；将结束服务按钮放置在次级交互区外延，减少对核心内容的注意力分散；将音波引导动画放在次级可视区，通过色彩与动态变化对用户进行引导。

B.交互式大屏的视觉设计

文字清晰易读

考虑大屏的尺度与真实的使用场景，界面中内容也需要相应的放大以适配大屏体验。在金融产品场景下，界面中最主要呈现的内容是文本信息，所以设计中要充分考虑文字的辨识度。合理运用字阶与对比度，能够有效提高信息的可读性，通过对比多种字号在不同距离下（远场、近场）的测试效果，对字体进行了标准化定义，阅读舒适的字号应不小于 36px，辅助说明的文字可降至 24px。

除了字号大小，合理的对比度也对文本的易读性起到至关重要的作用，参考 WCAG（Web 内容无障碍指南）中对比度的不同级别建议，考虑公共的使用场景及部分中老年使用人群，因此将常规信息对比度设定为 7:1 以上，辅助信息不低于 4.5:1。

视觉焦点一致

用户在浏览内容需要头部有上下小幅度转动，为了让用户形成相对稳定的阅读模式，减少视线的跳跃感，我们将内容区的信息展示设定为用户输入和客服回答相对应的两条内容，且将它们的位置固定展示，这样用户在每次阅读信息时，视觉焦点可以保持由同一位置开始。

数智人合理展示

数智人作为服务温度与情感连接的对象，信息的展示要尽可能避免对数智人面部的遮挡，我们将信息的最大显示区顶部设定在数字人下颌向下 10cm 处，确保数字人能够较为舒适的呈现在用户面前，当页面发生滚动时内容与数智人的展示也较为合理。

但也存在有大量信息展示的需求，为了满足高密度信息的有效传达，针对图片内容进行弹窗式扩展展示，在该场景下，将弹窗高度设计为完全遮挡数字人的方式，避免卡片高度跟随内容变化而遮挡部分数字人面部的情况出现。

次级可视区信息强化

用户对于次级可视区的信息获取效率有所降低，且该区域对于颜色和动态的获取更为敏感。因此想要提升该区域信息的传达效率，可通过强对比颜色及增加动态的方式进行强化。本次设计中语音输入的引导信息放置在次级可视区，因此通过采用大面积深色蒙层，强化收音区信息有效露出，较为明显的状态切换，能够从视觉上让用户对语音输入的引导高效获取。

关于未来思考 在数字人未来场景的应用中，会越来越趋向于实时的自然交互。计算机视觉、语音语义理解等 AI 服务能力日益精进成熟，多模态信息输入使得数字人的感知能力逐渐增强，我们在复杂信息的拆解与应用上，需要从用户作为人本身的需求与高效完成任务两方面出发，深度思考数据加工与应用逻辑。在交互反馈上，数字人与 GUI 的配合方式也是值得研究的方向，对不同的应用场景，在“人”与“ GUI ”的信息通道选择侧重会有很大差异，比如娱乐场景更偏向于人本身的情感化表现，而任务场景更侧重于信息高效传达。对于虚拟人本身生动性的表现上，也应该更多的考虑虚拟人相貌、情绪、动作、表情在人物世界观、生命感、人格化、业务属性等方面的映射与表现，真正实现人与“人”的连接。对于以上方向我们也都在探索的路上，期待 AI 与人类能日益共生共荣，共创未来。

欢迎关注作者 微信 公众号：「腾讯设计族」

前言 1. 数字人 服务分类 随着 元宇宙 概念的大热，作为基础建设元素的数字人在去年出现了井喷式的爆发。但实际上数字人并非近几年的产物，如果从世界上第一位虚拟歌姬林明美算起的话，数字人已经产生了近 40 年。

这些年来，各界对于数字人的定义和分类尚没有统一的共识。从广义上来讲，任何以数字形式存在且具有类人外观和行为的数字化资产都可划为数字人范畴。依照此类定义，我们尝试将市面上的数字人服务进行归类。从下图可以看出，数字人依照应用形态大致可以分为三类。除了由来已久的 IP 型数字人以外，市场中还出现了以完成服务为目标的业务型数字人，以及以真人为原型强调替身属性的分身型数字人。

从5个方面，帮你了解什么是虚拟数字人 大家好，我是 Clippp。

阅读文章 >

像洛天依、AYAYI 这类虚拟偶像和博主可划入到 IP 分类中，此类方向更关注数字人个人特性以及世界观的塑造，通常会采用 3D 高保真风格和手 K 或高精动作捕捉来确保整体形象的质量。而虚拟分身型则是以现实世界中的真实人类作为原型，为其在数字世界中赋予新生命。像 Travis 与堡垒之夜合作，在游戏世界举办虚拟演唱会就是此类虚拟人的一种应用。伴随着元宇宙概念的流行，相信定位在分身赛道的产品会致力于形象制作成本的进一步降低，从而让虚拟分身能力成为新数字时代公民的基础配备。

而笔者所在团队打造的数字人则是第三种–业务型数字人。与前两类不同，业务型数字人通常使用 AI 驱动来完成人机交互。面对此类型数字人，如何发挥其拟人性的优势，打造真实的服务体验是本次设计的核心要点。接下来我们将在以下篇幅中介绍业务型数字人的设计实践。

2. 数字人带来的体验变革 “数字人”作为信息载体 服务趋向透明化

传统的交互方式将界面中不同的元素，通过最优信息组合与层级堆叠，来承载用户与计算机之间的交流，如同翻译一样让双方彼此理解。但这样固定行为路径的信息结构，对于用户来说需要适应和学习，丧失了一部分自主能动性。诺曼（Don Norman）曾提出“无界面的界面”，界面设计追求透明性，以将对人机互动的干扰降到最低。所以从本质上来看，界面是以一个“具体对象”的身份出现的，既连接又分隔人与机器，以最自然的方式牵引与反馈信息与服务。而数字人正是界面服务本身的载体，让用户脱离界面本身的屏障，用更原始自然的方式面对界面，通过自然对话牵引服务。

界面成为关系的动态空间 信息流动在“人”与“数字人”之间

当系统的对话由“数字人”来进行承接后，界面的价值变成了推进“数字人”与“人”之间的互动，建立连结。我们发现相比较传统的线性交互逻辑，数字人的界面信息更偏向根据当前环境与用户状态的动态推送，除反馈当前对话结果外，也会根据场景中用户不断变化的多维信息为用户进行引导与推荐，同时为了保证服务场景的真实性，也需要与当前的交互环境无缝衔接，就此可见，界面不止是任务效率工具，同时也模仿人与人之间关系构建的方式，建立了人与机器互动的人文情怀。

以线下银行客服为例的设计实践 1. 项目背景 用户与客户价值双驱动 为虚拟客服落地提供势能

在探寻数字人产品落地场景的过程中，我们发现，需要将数字人的核心特性在特定领域中发挥核心价值，才能在市场中落地生长。因此低成本高转化的线下银行虚拟人客服，成为撬动金融行业的首选落地场景。

就客户价值而言，线下服务场景每天有大量人工客服机械回答同样的问题，企业要为这些重复劳动支付巨额人力成本。且服务人员素质、知识储备参差不齐，现场表现不稳定，迫切需要低成本高质量的服务工具。虚拟人本身作为信息载体，保留人与人面对面沟通方式的同时，大大提升了沟通效率与服务稳定性，且平台灵活的配置能力可支持业务实时更新，省去大量人工培训成本，成为企业信息人工服务的新触点。

就用户价值而言，角色身份上，面容亲和衣着职业的客服人员更能获取用户信任，引发用户交互兴趣。互动形态上，虚拟人打破了传统界面交互框架，将人作为信息交互对象，让服务有了具体“身份”，更易上手，信息获取更自然，让信息化程度不高的用户也可以摆脱设备恐惧，实现零门槛交互。

2. 场景关系构建 打破设备隔阂 让 “职业形象” 等候在 “ 职业场景 ”

大屏设备仅仅作为承载数字人的媒介，我们希望界面在具体场景中 “隐身”，让数字人真实站立在场景中，获得用户亲和信任感，专注与她面对面沟通，不感到违和与侵扰。为达成这个目标，我们需要探究以下几个问题：

如何塑造金融客服的职业形象 如何营造自然真实的对话场景 A.如何塑造金融客服的职业形象

塑造数字人的形象，我们一般会从人格特质与职业特质两个方向分别对数字人的外表、情绪动作进行综合考量：

① 外表维度

即构建数字人的脸型五官、发型、妆容服饰。对于业务型数字人，我们需要从人格特质与职业特质两方面来思考他需要拥有什么样的面容、五官特征以及服饰要素。

人格特质：银行客服需要表现出聪明专业的职业特点，同时又具备与人亲和的性格。参考相关面相心理学研究，浓眉大眼、脸型略尖的外表会给人聪明的印象，而嘴角上扬、眼型略弯，脸型棱角不凸显的外表会更亲和讨喜，在模特的选择上我们也尽量靠近这些特点。

职业特质：偏分扎发是银行客服常见的职业发型，妆容不易过浓，显得干练有精神又平实亲和。在衣着的选择上，除职业工服外，为保障不同银行品牌的服务通用性，我们在工服上添加了品牌露出位，透传客户品牌形象。

② 情绪动作维度

即构建数字人情绪动作的选型与表现。因业务型数字人主要承载效率型任务，我们在情绪动作的选型上弱化了数字人人格特质的表现，更偏向于职业特质的表现。

职业特质：为体现数字人职业特性，我们观察了线下银行客服的标准职业动作，选择了双手交叉于上腹部，丁字步站立的默认站位体现职业素养，同时减少无意义的动作设计，利用数字人的动作表情传达有效信息，如点头表示聆听，挥手表示内容推荐与指引，动作表现上选择幅度小、中性、自然的动作，以在表现鲜活灵动的同时不过分侵扰用户注意力。

B.如何营造自然真实的对话场景

为了能让用户在真实的线下场景有效且愉悦的体验服务，我们观察了线下银行的服务链路与空间设计，思考数字人全链路的进店服务体验，就以下两方面进行了思考与拆解：

① 舒适安全的社交距离

为了让数字人真实存在于场景中，与用户建立舒适安全的沟通，我们需要探究合适的人物身高与大小以保障用户与虚拟人之间距离适中交互自然。以 2019 年中国人平均身高作为参照，将 168cm 作为数字人实际身高，以便与用户建立平等沟通的视角。通常人与人在进行一般社交活动时，会保持 1.2m 左右的礼貌距离，在大屏的使用场景中，用户与屏幕需保持 50cm 左右的操作距离，根据成像原理我们发现数字人的实际身高需要进行适当缩放才可以真实模拟礼貌社交距离。

我们采用真人模拟的测量方式，让 2 位 168cm 身高的同事面对面站立保持 1.2m 距离来进行大小观测，将真人模拟感受到的变化移植到虚拟人的大小调整上，做出相对舒适安全的社交距离。

② 高效流畅的场景体验

关于线下场景体验的拆解，我们主要思考两个方面，一是如何让大屏界面能够完美融入线下场景，数字人能够真正站立在场景里；二是拆解从用户进店到服务结束全链路体验，区分近远场的不同诉求精细打磨体验。

场景模拟。 关于数字人背景的设计，我们模拟了真实的线下客服场景，设立咨询柜台，本次方案中考虑到后续适用不同品牌银行接入，在品牌透出的视觉元素区位均可快速配置与替换。

近远场体验拆解。 Endsley 提出的三层情境意识（SA）模型，为信息处理提供了较为成熟的方法论，该理论分为三层：1.对当前情境中成分的感知；2.对当前情境的综合理解；3.规划预测该情境的未来情况。

将情景理论与远近场相结合可将用户认知与设计要素做如下拆解：

远场：建立认知，引导靠近

根据上述的情境意识的三层模型，在情景获取阶段，重点在于为用户提供明确的元素，帮助用户快速建立有效认知。界面中所传递的信息包括：动态的、模拟真实身高且身着职业装的真人数字人，模拟银行前台的柜台，银行 logo 以及“空闲中，欢迎咨询” 的状态字样；进入情境解释阶段，对上述的元素进行整合诠释，用户能够明确建立起“智能的、可咨询、可信赖、可使用”的认知，此时结合用户咨询业务的需求内因，能够激发体验冲动；到情境反馈与预测阶段，用户会预测能够与数字人进行互动，解决需求，因此主动靠近，由远场转为近场。

近场：建立关系，引导行为

银行柜台使用人群数字化程度不高，交互方式上尽量符合用户自然对话的惯性认知，实现新手的无感过渡，降低学习成本与认知负荷。我们在具体交互方式的构建上，总结出以下交互设计思路供参考：

主动服务 当用户进入与数字人的交互区域，大屏自动通过图像人脸识别获取用户信息，数字人进入服务状态，主动说话并推出服务卡片，让用户能够快速建立服务认知，聚焦任务操作。

指引明确 触屏用户天然习惯点击操作，在信息输入方式上，对于不同类型的任务需要引导用户使用 GUI 操作还是语音输入表达诉求，强调：“试试说 ” 与 “选择” 的引导差异。同时在交互中的每一个状态下，都需要让用户明确我现在可以做什么，如何做，可以获取什么结果。要求数字人与用户交互的每一个节点明晰，引导通俗易懂，操作简单。

渐进式引导 为减少用户理解成本，我们在信息与操作的引导上采用单一路径，用户只需要跟随虚拟人的逐步引导，傻瓜式操作即可流畅完成服务。

分支处理 在一问一答的语音交互中，有很多潜在分支需要处理才可以还原自然体验。比如用户在服务进行中长时间未给出明确操作，至少会有两种情况：1.我们认为用户可能存在困惑，虚拟人会主动引导用户进行限定内容选择或聚焦提出问题。2.本身反馈内容较复杂冗长用户未操作则可能是还在消化信息，虚拟人需要延长等待时长等等。

3. 交互式数字人大屏的设计要点 A.交互式大屏的功能分区

交互式大屏有自己独有的特性，本质上是一块超大触屏，但从交互方式与信息焦点两方面与传统触屏差异很大。在交互方式上，从手指的点按变成的整个手臂的移动，点触以多指拍按与扫动为主。在信息焦点上，用户曲臂操作屏幕，距离大屏的距离在 0.5m 左右，平视可接收的信息焦点有限，更多信息需要转动眼球或头部，那么用户的视线需要被引导与定位，信息需要按区块划分优先级，让用户更舒适流畅的获取信息。

最佳操作区的设定

我们根据人因工程学，确定出大屏的最佳交互区域最佳可视区，来展示核心卡片信息。以 55 寸大屏，1.68m 平均身高用户来进行方案探索。依照人体站立不屈膝，右侧大臂可旋转横向和纵向角度计算出最佳交互区域。

根据最佳交互区，我们可以将核心交互卡片放置于此，次级交互放置于外沿，边缘区域不适合放置操作内容。

最佳可视区的设定

垂直可视区域：在用户保持站立时，最大视区为视平线以上 50° 和视平线以下 70°。视平线以上 25° 至视平线以下 30° 范围内为最佳眼睛转动区，能够以放松的状态识别信息，所以展示内容的最佳垂直视角在标准视线以上 25° 至以下 30°。

水平可视区域：双眼区域大约在左右 60° 以内，观察超出左右 60° 的物体时，则需要集中精力才能识别物象，因此核心内容区域在左右 60° 视角内较为合理。

根据最佳垂直视角与水平视角的人因特点，结合头部小幅度垂直向下 15° 转动扩大视角，我们计算得到 3 个可视区的划分，核心可视区展示主要对话流信息；次级可视区展示次要的状态信息，如收音反馈状态；最大可视区内尽量不放置信息。

基于对交互区和可视区的计算测量，在页面布局中，我们将信息卡片最大程度的置于有效视区和次级交互区的重叠区域，用户可以最舒适的状态进行阅读和操作；将结束服务按钮放置在次级交互区外延，减少对核心内容的注意力分散；将音波引导动画放在次级可视区，通过色彩与动态变化对用户进行引导。

B.交互式大屏的视觉设计

文字清晰易读

考虑大屏的尺度与真实的使用场景，界面中内容也需要相应的放大以适配大屏体验。在金融产品场景下，界面中最主要呈现的内容是文本信息，所以设计中要充分考虑文字的辨识度。合理运用字阶与对比度，能够有效提高信息的可读性，通过对比多种字号在不同距离下（远场、近场）的测试效果，对字体进行了标准化定义，阅读舒适的字号应不小于 36px，辅助说明的文字可降至 24px。

除了字号大小，合理的对比度也对文本的易读性起到至关重要的作用，参考 WCAG（Web 内容无障碍指南）中对比度的不同级别建议，考虑公共的使用场景及部分中老年使用人群，因此将常规信息对比度设定为 7:1 以上，辅助信息不低于 4.5:1。

视觉焦点一致

用户在浏览内容需要头部有上下小幅度转动，为了让用户形成相对稳定的阅读模式，减少视线的跳跃感，我们将内容区的信息展示设定为用户输入和客服回答相对应的两条内容，且将它们的位置固定展示，这样用户在每次阅读信息时，视觉焦点可以保持由同一位置开始。

数智人合理展示

数智人作为服务温度与情感连接的对象，信息的展示要尽可能避免对数智人面部的遮挡，我们将信息的最大显示区顶部设定在数字人下颌向下 10cm 处，确保数字人能够较为舒适的呈现在用户面前，当页面发生滚动时内容与数智人的展示也较为合理。

但也存在有大量信息展示的需求，为了满足高密度信息的有效传达，针对图片内容进行弹窗式扩展展示，在该场景下，将弹窗高度设计为完全遮挡数字人的方式，避免卡片高度跟随内容变化而遮挡部分数字人面部的情况出现。

次级可视区信息强化

用户对于次级可视区的信息获取效率有所降低，且该区域对于颜色和动态的获取更为敏感。因此想要提升该区域信息的传达效率，可通过强对比颜色及增加动态的方式进行强化。本次设计中语音输入的引导信息放置在次级可视区，因此通过采用大面积深色蒙层，强化收音区信息有效露出，较为明显的状态切换，能够从视觉上让用户对语音输入的引导高效获取。

关于未来思考 在数字人未来场景的应用中，会越来越趋向于实时的自然交互。计算机视觉、语音语义理解等 AI 服务能力日益精进成熟，多模态信息输入使得数字人的感知能力逐渐增强，我们在复杂信息的拆解与应用上，需要从用户作为人本身的需求与高效完成任务两方面出发，深度思考数据加工与应用逻辑。在交互反馈上，数字人与 GUI 的配合方式也是值得研究的方向，对不同的应用场景，在“人”与“ GUI ”的信息通道选择侧重会有很大差异，比如娱乐场景更偏向于人本身的情感化表现，而任务场景更侧重于信息高效传达。对于虚拟人本身生动性的表现上，也应该更多的考虑虚拟人相貌、情绪、动作、表情在人物世界观、生命感、人格化、业务属性等方面的映射与表现，真正实现人与“人”的连接。对于以上方向我们也都在探索的路上，期待 AI 与人类能日益共生共荣，共创未来。

欢迎关注作者 微信 公众号：「腾讯设计族」

这是体验设计扫盲的最后一篇，来讲讲 体验设计 的缺点和局限性在哪。

往期回顾：

基础全扫盲！用大白话帮你掌握用户体验设计（一） 今天再来继续一个比较现实的话题 —— 用户体验是什么？

阅读文章 >

基础全扫盲！用大白话帮你掌握用户体验设计（二） 相信很多同学在上一篇有留意到，体验设计中包含了以用户体验为中心增加和修改产品功能的目标，既然都从用户分析到产品原型输出，界面输出一条龙全套完成了，那还要产品经理做什么？

阅读文章 >

之所以单独写一篇，是因为长期以来搜索体验设计基本是一连串的赞美和重要性强调，完全脱离事物的真实发展现状。所以适当泼一盆冷水，让想要投入这个领域的同学能具备更正确的认识，不会把持不切实际的期待，认不清自己的职业定位，从而在入行伊始备受打击。

第一个问题，就是直击灵魂的核心问题，体验设计在整个产品的发展中占据什么样的地位。 今天我们已经适应在网上看到任何有关产品的分析还是产品团队自己的声明，都会反复强调 “用户体验” 的重要性，听起来是不错，体验差的产品谁会想用呢？

但前面我们提过，体验是一个非常宽泛的命题，是用户使用产品前后积累下来的感受。除了产品基本的交互、界面这些可视内容外，还包含了一大堆其它的因素。

比如一个电商产品，产品体验一定涉及到商品种类、价格、防伪、物流和售后。如果商品本身价格比其它平台高，出现各种假货，客服态度极差，那么它不管 UI 还是交互做的再好， 用户体验 也是上不去的。

在这个场景下，核心体验几乎都和体验设计师关系不大。最有代表性的产品就是拼 XX 了，它的设计、交互、功能只能在所有你听说过的电商产品里垫底，即使小米有品、造作、考拉、严选这些二三梯队的产品也比不过。

但是它成功了，成为和淘宝、京东竞争的巨头。那么体验设计师在这中间发挥了什么样的作用？

再比如音乐类产品，产品最重要的功能，必然是歌曲的丰富性和时效性对吧。如果进去搜索歌手或歌曲，大半是找不到的，那界面和交互做得再好，又有什么意义呢？

正因为如此，我最喜欢的虾米音乐才沦落到今日坟头草都三米高的结局，体验设计能挽救它的败局嘛？

在互联网历史中还有非常多产品本身设计和交互非常优秀的行业老二老三，但……

举这些例子，并不是单纯为了打击大家的热情，而是要客观认识体验设计的价值，就不能把它抬得太高。一款可以成功的产品，它成功的核心原因大多和体验设计师可以负责的工作是无关的，是由产品经理或背后的管理团队决定的。

他们决定了产品是否具备成功的可能性，而体验设计的作用，就是缩短成功的速度，以及和功能基本相同的竞品竞争中处于优势地位。

所以，多数项目场景中，体验设计的权重是低于产品、市场、技术的，这是由行业特性决定的，只要自己作为用户的角度去审视一下就可以得出结论了。

那么就不存在用户体验对产品起到决定性影响的行业嘛？

当然不是，在我看来，工具类产品就是主要由用户体验支撑的行业。比如笔记应用，番茄应用，代办清单，思维导图，资源管理等。大家功能都差不多，但是赢得用户推荐和真金白银支持的，只能是产品本身在体验上打磨到远超竞争对手的地步。

比如我在用的 AppStore 获奖和编辑精选应用 Things，作为一个非常简单的待办清单工具，它的 MacOS 买断价格是 328，iOS 买断 68。

还有我最喜欢的 Markdown 文本工具 Ulysses，非常简洁，没有太多花哨的功能，但是售价 ￥293/年（一直涨价，想骂脏话）。

工具行业是最 Old School 的行业，也是 UI、交互、体验最佳的实践场所。奈何受限于国内比较畸形的软件消费观念，这类产品的市场暂时还太小，容纳不了大量的体验设计师进入。

既然我们知道体验设计在多数产品中的权重并不是最高的，那么推导下来，产品决策中体验设计优先级不高也就成为了必然。

摆在体验设计面前的真正问题，就是我们的工作建议、产出往往无法得到有效的落实，就是因为优先级太低，团队资源有限的情况下往往会选择其它的建议和选项。

除此之外，就是体验设计的整体流程太长成本太高，从前期确定问题，到展开用研，分析，输出，往往要耗费大量的人力物力。

主要的障碍就是做研究通常是需要充分的样本量的，如果每次用研都是十个八个用户的访谈、问卷、测试，分析的报告能拿得出手嘛？

就是想要做大范围数据测试，那么数据埋点和统计建模也需要开发团队做出大量的准备。尤其是听起来很简单的 A/B Test、灰度测试，需要一整套开发框架来支撑，对于中小团队而言是一种非常沉重的负担。

即使前面这些工作全都克服障碍去落实了，还要应对一个最致命的问题 —— 研究实验不一定会有结果。

大学有做过复杂实验的同学，应该知道不管怎么设计整体流程，总会因为各种没办法控制的变量或外部影响，导致最终的实验结果是没有价值的。体验设计作为社科，不可能脱离这种规律，所以不管你有多努力或者多专业，也会有不少的试验结果是错误的，更不可能推导出有效的结论。

所以严谨的团队，在采纳体验设计结论或者建议前，要经过大量的审核，再次确认实验流程合理，数据来源有效，结论推导符合逻辑。这直接导致大厂的体验设计团队每次要写几十上百页的 PPT，事无巨细的回顾一遍。

即使前后的实验流程，结论推断都是合理的，但也不代表分析的推论最终要被接受。比如你是微信的体验设计师，经过大量的研究和分析都论证了应该增加语音播放的进度控制、iOS 要支持双开、电脑端无需扫码、社交群支持 2000 人。但最终小龙哥就是不同意。

至于为什么不同意……

体验设计的工作最终能有效推动，被认真采纳，并产出价值，处于一个并不高的比率。日常工作的大多数时间，就是接受任务或自己找活干，做了一堆研究输出了一堆的报告供决策者采纳。

这定位很像古代的谋士，为主公献策，自己没有统率权，你可以巧舌如簧来施加影响力，但最终三军该如何调动，还是主公说了算。

而新手体验设计师很难看清楚和认清自己的定位，往往会忍不住过度干预决策，就是 “手伸得太长”、“管得太宽” 的表现，引起团队内部的争吵和内耗。

所以，再来完善一遍体验设计师的职能：

通过用研和分析，来提供提升用户体验的设计方案让团队负责人做出更合理的决策。

PS：仔细想想和有关部门、大型企业的经济学家岗位很类似……

最后，再谈谈体验设计的未来发展和做一些不负责任的预测。

我越来越感觉，体验设计的工作内容和性质，对产品是有意义也有价值的，但体验设计师这个岗位，却不一定那么重要或纯粹。

除了团队在运作中体验的权重和决策优先级以外，问题依旧集中在体验设计本身所需的技能和知识点上。我们知道它是一个广而宽的行业，远没有开发或平面、3D 的深度，意味着它的学习门槛并不高，成为其它职业的必修内容是完全没问题的。

比如现在产品经理入门培训，体验和用研已经成为必备的学习模块，在产品初期针对用户做访谈、调研和分析数据是要亲自下场的。

而在 UI 端，纯粹的界面设计师越来越难发展，如果走纯视觉路线就是拓展平面能力、插画能力、3D 能力。而如果想走项目路线的，那么体验和交互就成为必须深耕的对象，掌握相关技能也成为非常迫切的目标。

至于独立的交互设计师……

仔细想想就会明白，如果一个岗位上下游的职业都具备自己专业的能力，那话语权要如何获得，不可替代性又在哪边。这会进入一个非常尴尬的境地。

并且一个产品团队中，需要做决策、评审的角色越多，团队协作流程就越低效，因为要相互说服对方接受自己的方案，是一个特别容易内耗的过程。

我们会发现，往往和程序员开会不容易就专业问题引出一系列的争吵，而在产品、体验、交互、设计上，却很容易陷入谁都说服不了谁的困境。

借用著名经济学家施蒂格勒（G. J. Stigler）的一句话来解释：

如果你说自己是个物理学家，听者会回应：“物理学我不懂。”于是不再说下去。但如果你说自己是个经济学家，听者会回应：“经济学吗？我不懂，但我认为……”跟着滔滔不绝。

在未来，随着产品团队成员基础培训内容越来越专业，初级专业人才越来越丰富的情况下，减少具体角色，合并对应职能才是顺应趋势的。

再存在一个只会做体验设计，且只做体验设计的岗位，是不符合沟通和效率需要的。而这部分职能大多应该由 UI 设计师来分担，UX + UI 合并成一个岗位才是符合现实世界发展需要的。

这样，即保证设计师本身有更宏观的思考分析能力、交互素养，又具备产品和开发都不能直接替代的视觉设计能力。

体验、交互、视觉一体化在我看来是未来的发展方向，司职单一领域的发展会越走越窄。其实在今天的大厂招聘 JD 中，这个趋势也越来越明显了。

不管是 UX 设计师、UI 设计师、产品设计师，技能要求往往是全部覆盖的，只是职业名称一样而已。所以不用再对这种情况感到惊讶，它们会逐步成为常态。

关于体验的认识和扫盲就解析到这边，之后有精力的话，再额外增延续写下去用研和相关分析的具体介绍和学习了。

我们下篇再贱~

欢迎关注作者的微信公众号：「超人的电话亭」

最近打开 Figma ，点击我的插件，发现我已经安装了这么多插件…

我究竟要用哪一个插件？我不知道，每一个插件的是用来做什么的？我不清楚。因为身边的同学不停的给我推荐插件，而我便不停的安装，导致这么很多插件，我都没怎么用。今天为了解决这个问题，花了一下午的时间整理，分享一下我最常用的 7 款 Figma 插件，大家也可以跟着我的思路，一起来整理一下你的 figma 插件。

往期回顾：

这 9 个效率逆天的 Figma 插件，用完回不去了！ 第二波插件推荐，都是我用过觉得还不错的，希望你们能喜欢！

阅读文章 >

这10个效率逆天的 Figma 插件，用完回不去了！ 从 9 月中旬开始，陆陆续续更新 Figma 系列到现在已经第十篇了，期间非常非常多的小伙伴因为这个系列获得了帮助、甚至加我好友催更，真的感谢你们所有人的支持。

阅读文章 >

Contento Contento 是一款内容填充插件，当然，在插件市场上你会发现，类似这样的插件非常多，但是我在使用过一段时间过后我都放弃了。

有的是因为 操作过于复杂，比如：Content Reel，他没办法做到本土化的数据，因此不能开箱即用。

有的是因为功能简单，比如：Chinese User Data Generator，我没办法做到自定义数据内容：

使用 Contento 主要能够满足我三个需求：

1. 内容简单：

其实在日常的使用当中，我们要填充的无外乎就是常见的 “姓名、地址、电话、邮箱”等内容，在常用功能当中，我们最主要的是想要功能地快速上手，当我打开 Contento 就可以直接进行使用

2. 社区强大：

如果系统预设的内容不满足你的需求时，你也可以打开社区，在社区里作者会更新一些较为常用的图库和文本，然后你只需要这样点击，即可拥有这个素材内容。

3. 自定义：

假设系统自带以及社区的内容库还不能够满足你的需求，你还可以利用 Contento 进行系统的自定义，在插件当中点击这里的 “加号”，选择想要添加的 文本、图片 等格式，进而将自己产品独有的内容放到里面，下一次就可以直接使用。

Chinese Font Picker Figma 的中文字体选择，真的无力吐槽，Figma 你看看其他同学，像 PS、Sketch、甚至是 PPT、Axure，别人字体选择是怎么做的，再看看你，Figma，长点心吧！

因为 Figma 软件本身自带有很多种字体，而这些系统字体也就造成了我们很难从众多字体的字体当中，选择用户想要的字体内容。

另一方面，我们没办法快速预览字体，因此只能够通过 猜测这款中文字体的英文名字，来进行寻找。因此被逼无奈，只能够曲线救国，使用字体选择插件来解决这个问题。

Chinese Font Picker 插件就能够快速呼出字体选择器，并且这里展示的字体都是经过筛选，会主要展示支持中文的字体

通过每一款字体，我们可以预览字体具体的样式，方便我们快速的做出判断，Chinese Font Picker 是我使用频率最高的插件。

FigmaEX Figma 当中使用插件也会非常的麻烦（专业一点来说应该是操作路径过长 : ），因为 Figma 本身插件呼出非常低效，再加上很多设计师并不会记住插件的名字，导致寻找插件非常鸡肋。

在 Figma 当中，比较难使用的便是如何高效的切换插件。这其实是一个交互问题，恰好 FigmaEX 解决了这个问题。

我们都知道电脑屏幕的布局本身就是以宽屏的形式存在，也就意味着，FigmaEX 利用了横向的宽度，在右侧固定一个区域用于展示基础的信息，这样就能够固定快速你想要的 figma 插件，并且这款插件是国人产出的，也更令人骄傲。

不过 Figma EX 需要单独安装，不过这类插件确实已经超过 Figma 可以开放权限的范畴，只能够单独安装。

NB Charts 在我们 B 端需求当中，一定会存在很多图表类的需求，这时候便可以使用 NB Charts 这款软件来快速实现页面，方便与团队明确这样的方案是否能够接受。

并且还可以根据图表进行内容的调整，导入对应的数据 JSON 等等…，可谓是非常强大。

这位开发者也是中国人，还开发了这两款在线神器：

数据可视化神器！帮你一秒生成三维地图的免费工具NB Maps 大家好，我是灰色执照。

阅读文章 >

可视化神器第二弹！一秒生成三维饼图的免费工具NB PIE 大家好，我是灰色执照~ 很开心又和大家见面了。

阅读文章 >

Measure 虽然 figma 软件自带的标注功能就已经非常出色，但是在日常的工作协同当中，我们还是需要对页面当中的内容进行细致的标注，以便让程序员更加清楚的理解我们设计的含义。因此可以使用 Measure 这款软件来对页面的信息进行单独的标注。

这款老牌插件，含金量自然不必多说，因为我平时也只是简单用一用标注功能，因此这款插件还是非常不错。

Auto follower 流程图怎么办？有的时候想要快速连接原型之间的交互，便可以使用它，可以快速连接不同的页面，还可以自定义这条流程线条的颜色、粗细、圆角大小等等。

虽然比不了传统的流程图工具，但是解一解燃眉之急还是非常不错的。

SkewDat 如果想要把一个页面稍稍倾斜一下，你会怎么办？在没使用 这款插件，我需要将这个图片导出、打开 PS、通过 PS 来对图片进行调整，然后导出，再导入到 Figma 里面，整个操作方式可谓是“一气呵成”。

SkewDat 恰好能够解决这个问题，同样，它可以斜切：图片、形状、文本 等内容，在使用上可以更加方便，并且这里的倾斜操作是非破坏性的，也就是说我们可以倾斜了过后继续调整字体。

当然上面的所有插件都可以在 Figma 社区找到，大家按照名字自行下载即可。

欢迎关注作者的微信公众号： CE青年Youthce

Hi，我是彩云。最近在研究竞品时发现了一个动效非常丝滑，设计非常新潮的 APP，叫 Zenly，里面还埋了很多彩蛋设计，把体验设计做到了极致。

严格来说， Zenly 不算是一个新 APP，上线的时间还比较早，但这次 5.0 大版本更新后，设计风格更加新潮大胆，它们不是在追随趋势，而是在引领趋势。我想作为一个视觉设计师，对这种风格新潮的应用趋势，是必须加以关注并研究的，所以今天就跟随彩云的视角对这款应用做一个赏析吧。

实际上它上一个版本的设计也非常优秀，所以我会把更新前后的设计变化也做一个介绍。这次会重点介绍 5.0 更新的内容，因为升级后的风格更加有自己的个性了。

更多改版案例复盘：

大厂实战！vivo官网APP首页改版设计过程复盘 vivo 官网 APP是什么？

阅读文章 >

如何系统化进行设计改版？用一个实战案例教会你！ 项目背景 当公司的发展规模到一定程度时，考虑到信息安全、持续采购成本与相关风险，企业会采取自研的方式来实现部分协同工作软件的自产与自用，本文将以内部目标管理系统为例，阐述我们是如何系统化的做企业系统设计改版。

阅读文章 >

视觉设计 这次大版本更新，在风格上改变很彻底，几乎是截然不同的设计风格了，从 APP 图标到界面里的功能图标、背景、图形、颜色都做了很大的改变。

1. 扁平多彩的图标和界面

应用主图标除了冰棍造型保持延续外，整体效果从清新可爱到暗黑潮酷，有了一个非常大的变化。在上一个版本中 UI 风格中规中矩，设计团队好像是在犹抱琵琶半遮面，压抑着内心情绪一样，而到了这个版本，就彻底放飞自我了。

关于主图标还有一个小彩蛋的设计就是当你完成了它的一些任务后，可以解锁更多的主图标效果，算是给了用户更多的个性化体验。我目前已经解锁了 2 个图标了。其实这个应用还藏了不少彩蛋设计，后面会讲到。

这里做的好的地方之一是，主图标的风格跟内部界面保持了很好的一致性，从图标就能感受到内部界面的风格特点。5.0 版本的图标风格化更加明显，用到了非常大胆的渐变色，具有很强的风格特点。

2. 多重渐变颜色

APP 中的颜色体系也是跟随整体调性做了巨大改变。在上一个版本中，主要以白色加一些微渐变颜色为主，而到了最新 5.0 版本，主色调改为了暗色系。在这种颜色氛围下，很适合增加一些比较酷炫的渐变色，这在 APP 中几乎随处可见，包括图标、背景、图案、按钮、文字等等。

3. 超大字体

上一个版本中字体字号相对还比较常规，而到了这个版本，字号设计变得非常大，几乎是到了比较夸张的地步。单纯从字号上来看，在其他 APP 中就不太常见，也算是一个记忆点了。只是个人觉得有点大的过分了些，美观度没有太好。

4. 3D 质感表情

表情设计也算是 Zenly 的一大特色之一了。在上一版中的质感，整体来说是比较偏清爽可爱的，虽然也有一定的 3D 质感，但总体来说做的都比较弱。而到了这个版本，3D 质感做的特别强，且颜色细节做的特别多，仿佛到了舞厅那种感觉，把潮酷风拉满了。（上一个版本使用语音还会有一个同步的表情跟随你一起说话，但到这个版本去掉了，有点可惜）

而且它这里的表情不仅仅是设计上做的炫酷，还是有声音的，当你给好友头像发表情的时候，会有相应的表情配音，表情音其实是蛮少见的。结合声音，也算是它的一个设计亮点了，值得学习。

带上耳机，可以感受表情音效，做的非常好

动效设计 动效设计可以说是 Zenly 中的一大亮点了，它的动效无处不在，且丝滑无比，是一个非常值得参考学习的地方。其实，动效设计现在越来越被重视，尤其在 UI 行业内卷到这种程度的时候，丝滑的动效越来越会影响用户的使用体验。

在大厂，老板们对动效的要求也越来越高，大家都在追求极致丝滑的感觉，这个 APP 就是被推荐的参考之一。Zenly 被 Snapchat 收购后，动效体系的打通可能也是一个重要因素，母公司 Snapchat 的动效也是极其优秀。

我自己体验下来，感觉它们做的这些动效有一个很关键的地方在于，动效的风格节奏和弹性度做得非常好。整个 Snapchat 动效体系都是以 Q 弹为特征，Zenly 延续了这种动效风格，动效风格也是品牌的一部分，在这里得到了很好的应用。我们可以从这款应用中学到动效应该用在哪些地方，以及这些动画的节奏和动态曲线等等。

1. 融入品牌感的动效设计

在添加好友这里有一个地球的酷炫动效，跟应用的核心功能有一个很强的结合，让这个动效有了更多价值。添加按钮的确认动效也做了 Z 轴上的旋转，虽然是一个细节设计，但也与整体的 3D 风格保持了统一。

2. 符合物理规律的动态设计

动效设计要想给用户带来自然流畅的感觉，符合物理运动规律是一个很重要的点，像这里的冰棍弹起的动态效果就好像很多冰棍凑到一块儿，因为很光滑加上冲击力比较大，被高速弹起然后由于重力下落直至静止后，再出现一个点赞的动效，整体看下来就很自然。因为在 Zenly 中，冰棍就是代表了一个个用户，所以动效元素也融入了品牌元素，每一个元素的运用都是有意义的。

3. Q 弹的动效设计

在 Zenly 中有大量的动态元素，甚至包括了很多文字内容。比如在注册环节，文字是一串串错位出现，然后又同时增加了明显的回弹效果，整体看下来显得非常 Q 弹，符合它们年轻的品牌个性。

在回弹设计中也用了一些迪士尼动画 12 原则中的形变规律，对动态图标做了夸张的设计，让动画有趣又真实。比如在首页中的小房子图标，大家仔细看这个图标的扭动，是由一个预备动作+挤压变形+旋转组合而成的，这样就能让这个动画变得更加生动有趣。

4. 呼吸感的动效设计

在核心功能路径上，Zenly 把动效做得更加极致。因为整个应用的核心玩法是基于定位来的，所以 Zenly 把定位图标做了非常夸张的设计，用到了多种动态效果进行叠加，用了略快的呼吸节奏不断给用户反馈当前的位置。

5. 充满生机的动效设计

在 Zenly 中做的特别好的一点就是对于反馈的设计，几乎没有哪一个地方是完全静止的，让整个应用充满了生机和活力。就算当前页面本不会有动态变化，也会将你做的手势交互尽可能的给你一些动态反馈。在游戏中，及时反馈是一个非常核心的设计，可以说游戏就是靠不断的给玩家反馈让人沉迷其中的，在 Zenly 中这一点也得到了运用。

比如在这个地图页面，你用手滑动侧面，也会给你反馈，而且跟随力度大小，反馈的形态也会有相应的动态变化，值得我们学习。

再比如这里的卡片和信息提示，在你拖动的时候都会给到你即时的反馈，这种反馈对用户来说是非常友好的，可以算是一种惊喜体验。

6. 动态分享背景

在分享的时候可以预览不同的分享模板，并且背景上添加了动感的文字，显得动感十足。在一些背景设计上，如果期望能动态生成背景，文字可能是一个很好的方式，又一个学习点。

7. 抖动与活力的反馈设计

抖动也是 Zenly 的一大特点，会在很多关键路径上给用户即时的触感反馈。看，又讲到了反馈机制，大量的反馈让应用有了更多活力。

玩法设计 1. 解锁模式

应用中模仿了很多游戏的做法，利用上瘾机制，让用户通过一个个小任务去解锁更的体验玩法。

万字读书笔记！产品设计宝典《上瘾》全面解读！（上） 为什么人们每天都会刷朋友圈、刷抖音，而且一刷就是几个小时，根本停不下来？

阅读文章 >

万字读书笔记！产品设计宝典《上瘾》全面解读（下） 《上瘾》这本书从大量的实验案例调研中，总结出那些让用户上瘾的产品设计原则，最后提炼出了一个让用户上瘾的模型，读完以后，真的恍然大悟，原来习惯类的产品需要这么设计。

阅读文章 >

2. 表情连续发射

在地图上，点击好友头像可以连续对他发射表情，这个表情还可以累积计数，是一个让用户很有点击欲望的设计，每个表情还有完全不同的配音，我就经常喜欢连击这些表情。对方收到这些表情时，如果数量比较多，会直接在他屏幕上爆开，是一个蛮有意思的设计。

3. 地图标记

地图标记应该是它的一个核心玩法设计之一了，它会根据你在某个对方停留的时长以及时间段，判断你是在家还是在公司。这也就是为什么它不断的提醒你要把手机定位功能改为始终允许，不然它的很多设计就没法正常玩耍了。

4. 彩蛋设计

在应用中还预埋了不少彩蛋设计，在一定的条件下会触发，给用户创造惊喜感。

不同距离的导航提示也有做区别设计。我们可能会对附近的定位提示习以为常，但当在定位距离很远的地方，比如我在深圳，如果搜索美国的话，要想去到那边的话，规划的路线提示会出现飞机动效，出乎意料。

再比如在上一个版本中，当你在地面上的缩放比例已经是很小时，双击或者双手持续放大，会出现裂缝到地心，且每次触发后看到的地心场景居然还是不一样的，当时发现这个彩蛋的时候简直惊讶到我了。

只可惜在新版本中，这个彩蛋设计被去掉了，我猜可能是这个彩蛋埋的太深了，用的人过少所以就去掉了，设计最终还是要服务于用户。

总结 最后总结一下，这款应用非常值得设计师朋友们体验学习，设计风格上做的非常大胆和新潮，尤其是动效设计上做的非常体系化，体验起来非常丝滑。如果你平时也有体验产品的习惯，那么这个 APP 一定不要错过了，也欢迎你在体验过程中把你觉得比较惊喜的地方留言和大家一起分享吧。

欢迎关注作者的微信公众号：「彩云译设计」

大家好，这里是设计夹，今天为大家分享的是「图标设计细节」。图标在页面中的尺寸很小，却包含着很多细节。作为通用的视觉化语言，把握住其中的 设计细节 至关重要。

之前有分享过关于图标设计的文章：

5000+干货！从4个方面掌握图标设计的基础知识 Hi，小伙伴们，Q 什伍最近花了两周时间，整理了这篇关于图标设计的文章解析，分享给大家。

阅读文章 >

这次总结一下图标设计的属性以及在 图标设计 中，很重要但容易被忽略的知识点。

在 UI 设计中，图标主要有两大类：一类是 APP 启动图标，每个 APP 独一份；另一类是系统 icon，搭配文字，方便用户快速理解信息，也是这篇文章重点讲解的内容。

风格 常见的图标风格有线性、面性、彩色、写实、3D 等，图标的选用因页面的设计风格、图标的位置等原因会有所差异，主要的作用是反馈动作和吸引用户更多注意力。

线形/面性：最基本也是做常用的风格，广泛用在页面设计中。 彩色：通常用于反馈用户的操作或者增加用户的注意力。 3D/写实：当页面中的某哥内容需要引起用户高度注意时使用，一下抓住用户的视线。

Tips: 现在字节、百度新推出的一些年轻化产品中，有很多精致的 3D 写实图标，极具个性，很好地迎合了年轻用户的喜好。在扁平风格流行的当下，这样的尝试也是一种突破。

如何从零开始完成一套3Ｄ图标设计？来看大厂的实战案例！ 背景 QQ 游戏中心经过设计改版之后，我们重新设定了整体的世界观——多彩的游戏宇宙。

阅读文章 >

重量 简单的线性图标重量轻，看起来更简约，不会给页面带来太大的视觉负担。比如当页面中已经有很丰富的图片和内容，那么更适合选用简约的、重量轻的线性/面形图标，防止页面过于杂乱。

相反，如果当前的页面中只有文字，信息量很少，那么更适合利用重量大的彩色甚至 3D 图标来增加页面的丰富性，让页面看起来更有设计感，给用户带来视觉上的愉悦，简约而不简单。

属性 构成图标的元素包括描边的粗细、端点的方圆、圆角的大小、色彩的轻重等，表达式规则是统一的，以便只给观看者识别图标所需的最小更改。

描边粗细：手机上常用到的描边粗细有 2px、3px、4px。2px 的看起来会显得更加精致，4px 的描边视觉较重，可以用在优先级较高的区域作为功能性图标,。 端点/节点：图标的端点有平头、圆头和方头，图标的节点有斜接连接、圆角连接、斜角连接，具体使用哪种样式要根据页面的情况统一设置。 圆角半径：方形的图标边角过于锋利，用户有时候看起来会不舒服，圆角图标更圆滑，相对来说更容易让用户接受。虽然圆角用的更普遍，但具体使用哪种，还是要考虑页面的整体风格再决定。 网格 图标的外形有圆形、方形、三角形甚至不规则形状的，所以我们很难将不同形状的图标尺寸完全统一。

这个时候网格就起到很关键的作用，有了网格相当于提前将图标限定范围，在网格范围内根据图标的重量和重心灵活调整大小，这样会让不同形状的图标看起来更统一。

视觉校正 由于设计软件的局限性，虽然有些图形已经居中对齐，但有时候还需要进行视觉校正。

最典型的图标案例是“播放”图标，利用设计软件对齐中间的三角形后，会发现三角形的位置看起来偏左。

利用软件对齐后，我们还需要再用眼睛确认一遍，我们可以将三角形向右移动，保证三角形的重心与圆形的重心一致，这样整个播放图标看起来会更舒服。

角度 设计图标时，我们的第一反应是不带透视的二维图形。因为我们观看手机的视角都是平视，所以大多数的图标都没有透视，看起来会更简洁。

带透视的图标会给用户营造一种空间感，可能会感到认知失调。虽然这种带透视的图标能引发用户关注，但不建议这么设计。

比例 图标比例通常使用 8 的倍数作为基准，例如 8px、16px、24px 和 32px，以便在各种环境中进行流畅地切换。除此之外，在移动端等屏幕尺寸较小的页面中，还会使用 4px 的倍数，来实现多功能性。

清晰 图标的设计要使用用户能够快速理解的且最简洁的元素。图标的尺寸通常很小，要尽可能做到对用户友好，可以使用一些简单的隐喻设计，但含义不能过于复杂。

一个图形能说明的问题，没必要再添加多余的图形。复杂的图标可能需要花费用户很长时间才能理解它们的含义，这样反而会影响用户的操作。

细节 这一点和刚才说到的图标清晰道理一样。图标最重要的目标是快速传递信息，特别是对于尺寸很小的系统图标，最好只保留最基本的内容，移除多余的装饰元素。

一致性 这里说得一致性，并不是指一个产品中所有页面都只能使用一种图标风格。一个产品有很多页面，线性、面性等多种图标风格可以一起使用。

但在同一个页面场景中，执行相同功能的图标应该保持相同的样式。

熟悉感 面对不同的操作系统，例如 iOS 和 Android，同一功能对应的图标也会有差异。针对不同的系统，我们可以选用大多数用户熟悉的图标，这样用户能更快地理解图标的含义

最后 以上就是常用却容易忽略的图标设计细节，希望通过这些内容能帮助你对图标设计有更深的认识。

欢迎关注作者微信公众号：「Clip设计夹」

Hi，我是彩云。最近在研究竞品时发现了一个动效非常丝滑，设计非常新潮的 APP，叫 Zenly，里面还埋了很多彩蛋设计，把体验设计做到了极致。

严格来说， Zenly 不算是一个新 APP，上线的时间还比较早，但这次 5.0 大版本更新后，设计风格更加新潮大胆，它们不是在追随趋势，而是在引领趋势。我想作为一个视觉设计师，对这种风格新潮的应用趋势，是必须加以关注并研究的，所以今天就跟随彩云的视角对这款应用做一个赏析吧。

实际上它上一个版本的设计也非常优秀，所以我会把更新前后的设计变化也做一个介绍。这次会重点介绍 5.0 更新的内容，因为升级后的风格更加有自己的个性了。

更多改版案例复盘：

大厂实战！vivo官网APP首页改版设计过程复盘 vivo 官网 APP是什么？

阅读文章 >

如何系统化进行设计改版？用一个实战案例教会你！ 项目背景 当公司的发展规模到一定程度时，考虑到信息安全、持续采购成本与相关风险，企业会采取自研的方式来实现部分协同工作软件的自产与自用，本文将以内部目标管理系统为例，阐述我们是如何系统化的做企业系统设计改版。

阅读文章 >

视觉设计 这次大版本更新，在风格上改变很彻底，几乎是截然不同的设计风格了，从 APP 图标到界面里的功能图标、背景、图形、颜色都做了很大的改变。

1. 扁平多彩的图标和界面

应用主图标除了冰棍造型保持延续外，整体效果从清新可爱到暗黑潮酷，有了一个非常大的变化。在上一个版本中 UI 风格中规中矩，设计团队好像是在犹抱琵琶半遮面，压抑着内心情绪一样，而到了这个版本，就彻底放飞自我了。

关于主图标还有一个小彩蛋的设计就是当你完成了它的一些任务后，可以解锁更多的主图标效果，算是给了用户更多的个性化体验。我目前已经解锁了 2 个图标了。其实这个应用还藏了不少彩蛋设计，后面会讲到。

这里做的好的地方之一是，主图标的风格跟内部界面保持了很好的一致性，从图标就能感受到内部界面的风格特点。5.0 版本的图标风格化更加明显，用到了非常大胆的渐变色，具有很强的风格特点。

2. 多重渐变颜色

APP 中的颜色体系也是跟随整体调性做了巨大改变。在上一个版本中，主要以白色加一些微渐变颜色为主，而到了最新 5.0 版本，主色调改为了暗色系。在这种颜色氛围下，很适合增加一些比较酷炫的渐变色，这在 APP 中几乎随处可见，包括图标、背景、图案、按钮、文字等等。

3. 超大字体

上一个版本中字体字号相对还比较常规，而到了这个版本，字号设计变得非常大，几乎是到了比较夸张的地步。单纯从字号上来看，在其他 APP 中就不太常见，也算是一个记忆点了。只是个人觉得有点大的过分了些，美观度没有太好。

4. 3D 质感表情

表情设计也算是 Zenly 的一大特色之一了。在上一版中的质感，整体来说是比较偏清爽可爱的，虽然也有一定的 3D 质感，但总体来说做的都比较弱。而到了这个版本，3D 质感做的特别强，且颜色细节做的特别多，仿佛到了舞厅那种感觉，把潮酷风拉满了。（上一个版本使用语音还会有一个同步的表情跟随你一起说话，但到这个版本去掉了，有点可惜）

而且它这里的表情不仅仅是设计上做的炫酷，还是有声音的，当你给好友头像发表情的时候，会有相应的表情配音，表情音其实是蛮少见的。结合声音，也算是它的一个设计亮点了，值得学习。

带上耳机，可以感受表情音效，做的非常好

动效设计 动效设计可以说是 Zenly 中的一大亮点了，它的动效无处不在，且丝滑无比，是一个非常值得参考学习的地方。其实，动效设计现在越来越被重视，尤其在 UI 行业内卷到这种程度的时候，丝滑的动效越来越会影响用户的使用体验。

在大厂，老板们对动效的要求也越来越高，大家都在追求极致丝滑的感觉，这个 APP 就是被推荐的参考之一。Zenly 被 Snapchat 收购后，动效体系的打通可能也是一个重要因素，母公司 Snapchat 的动效也是极其优秀。

我自己体验下来，感觉它们做的这些动效有一个很关键的地方在于，动效的风格节奏和弹性度做得非常好。整个 Snapchat 动效体系都是以 Q 弹为特征，Zenly 延续了这种动效风格，动效风格也是品牌的一部分，在这里得到了很好的应用。我们可以从这款应用中学到动效应该用在哪些地方，以及这些动画的节奏和动态曲线等等。

1. 融入品牌感的动效设计

在添加好友这里有一个地球的酷炫动效，跟应用的核心功能有一个很强的结合，让这个动效有了更多价值。添加按钮的确认动效也做了 Z 轴上的旋转，虽然是一个细节设计，但也与整体的 3D 风格保持了统一。

2. 符合物理规律的动态设计

动效设计要想给用户带来自然流畅的感觉，符合物理运动规律是一个很重要的点，像这里的冰棍弹起的动态效果就好像很多冰棍凑到一块儿，因为很光滑加上冲击力比较大，被高速弹起然后由于重力下落直至静止后，再出现一个点赞的动效，整体看下来就很自然。因为在 Zenly 中，冰棍就是代表了一个个用户，所以动效元素也融入了品牌元素，每一个元素的运用都是有意义的。

3. Q 弹的动效设计

在 Zenly 中有大量的动态元素，甚至包括了很多文字内容。比如在注册环节，文字是一串串错位出现，然后又同时增加了明显的回弹效果，整体看下来显得非常 Q 弹，符合它们年轻的品牌个性。

在回弹设计中也用了一些迪士尼动画 12 原则中的形变规律，对动态图标做了夸张的设计，让动画有趣又真实。比如在首页中的小房子图标，大家仔细看这个图标的扭动，是由一个预备动作+挤压变形+旋转组合而成的，这样就能让这个动画变得更加生动有趣。

4. 呼吸感的动效设计

在核心功能路径上，Zenly 把动效做得更加极致。因为整个应用的核心玩法是基于定位来的，所以 Zenly 把定位图标做了非常夸张的设计，用到了多种动态效果进行叠加，用了略快的呼吸节奏不断给用户反馈当前的位置。

5. 充满生机的动效设计

在 Zenly 中做的特别好的一点就是对于反馈的设计，几乎没有哪一个地方是完全静止的，让整个应用充满了生机和活力。就算当前页面本不会有动态变化，也会将你做的手势交互尽可能的给你一些动态反馈。在游戏中，及时反馈是一个非常核心的设计，可以说游戏就是靠不断的给玩家反馈让人沉迷其中的，在 Zenly 中这一点也得到了运用。

比如在这个地图页面，你用手滑动侧面，也会给你反馈，而且跟随力度大小，反馈的形态也会有相应的动态变化，值得我们学习。

再比如这里的卡片和信息提示，在你拖动的时候都会给到你即时的反馈，这种反馈对用户来说是非常友好的，可以算是一种惊喜体验。

6. 动态分享背景

在分享的时候可以预览不同的分享模板，并且背景上添加了动感的文字，显得动感十足。在一些背景设计上，如果期望能动态生成背景，文字可能是一个很好的方式，又一个学习点。

7. 抖动与活力的反馈设计

抖动也是 Zenly 的一大特点，会在很多关键路径上给用户即时的触感反馈。看，又讲到了反馈机制，大量的反馈让应用有了更多活力。

玩法设计 1. 解锁模式

应用中模仿了很多游戏的做法，利用上瘾机制，让用户通过一个个小任务去解锁更的体验玩法。

万字读书笔记！产品设计宝典《上瘾》全面解读！（上） 为什么人们每天都会刷朋友圈、刷抖音，而且一刷就是几个小时，根本停不下来？

阅读文章 >

万字读书笔记！产品设计宝典《上瘾》全面解读（下） 《上瘾》这本书从大量的实验案例调研中，总结出那些让用户上瘾的产品设计原则，最后提炼出了一个让用户上瘾的模型，读完以后，真的恍然大悟，原来习惯类的产品需要这么设计。

阅读文章 >

2. 表情连续发射

在地图上，点击好友头像可以连续对他发射表情，这个表情还可以累积计数，是一个让用户很有点击欲望的设计，每个表情还有完全不同的配音，我就经常喜欢连击这些表情。对方收到这些表情时，如果数量比较多，会直接在他屏幕上爆开，是一个蛮有意思的设计。

3. 地图标记

地图标记应该是它的一个核心玩法设计之一了，它会根据你在某个对方停留的时长以及时间段，判断你是在家还是在公司。这也就是为什么它不断的提醒你要把手机定位功能改为始终允许，不然它的很多设计就没法正常玩耍了。

4. 彩蛋设计

在应用中还预埋了不少彩蛋设计，在一定的条件下会触发，给用户创造惊喜感。

不同距离的导航提示也有做区别设计。我们可能会对附近的定位提示习以为常，但当在定位距离很远的地方，比如我在深圳，如果搜索美国的话，要想去到那边的话，规划的路线提示会出现飞机动效，出乎意料。

再比如在上一个版本中，当你在地面上的缩放比例已经是很小时，双击或者双手持续放大，会出现裂缝到地心，且每次触发后看到的地心场景居然还是不一样的，当时发现这个彩蛋的时候简直惊讶到我了。

只可惜在新版本中，这个彩蛋设计被去掉了，我猜可能是这个彩蛋埋的太深了，用的人过少所以就去掉了，设计最终还是要服务于用户。

总结 最后总结一下，这款应用非常值得设计师朋友们体验学习，设计风格上做的非常大胆和新潮，尤其是动效设计上做的非常体系化，体验起来非常丝滑。如果你平时也有体验产品的习惯，那么这个 APP 一定不要错过了，也欢迎你在体验过程中把你觉得比较惊喜的地方留言和大家一起分享吧。

欢迎关注作者的微信公众号：「彩云译设计」