快速迭代的产品存在着同质化趋向，如何做出差异性？如何将品牌精神向外传达？如何在有限的时间内，满足产品需求的同时带给用户更好的

体验感，进而体现设计的价值呢？静态画面动起来或许是个不错的选择！

作者：多点MP

转载请注明：优设网

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

Hi，我是彩云。界面是用户在与任何产品、APP 或平台交互时看到的内容，用户体验就是建立在坚实的界面设计基础之上的。所以，如果你想要在 UI 设计上提升能力，应该多去思考界面设计背后的原因。

今天会跟大家分享一些被广泛运用的界面设计规则，它们能快速使得你的界面设计更干净、高效。

文案要易于理解

用更容易让用户理解（说人话）的引导文案，提升使用体验。

（彩云注：下面 2 个案例中，左侧的“购物车”和“库存 2”太过于术语化，右侧的“仅剩 2”和“加入购物车”更加贴近用户的日常理解。大家平时工作的时候，也一定要注意界面中的文案，尤其是说明文字，控件文字等等，这个点经常容易被忽略。）

垂直对齐易于扫视

良好的对齐方式，可以增强内容的可读性，让用户的视线更容易扫描。

（彩云注：左侧的“之”字形视动线比较难阅读，且不够专业；右侧的垂直对齐增强了可读性，也让设计看起来更加统一，能够快速的提升设计细节。）

给选项加图标

使用图标、动画作为标签，有助于更轻松地理解内容，它使界面看起来更加理性和丰富，能瞬间抓住用户的眼球。

（彩云注：左侧的导航相较于右边，很难第一时间准确识别它的意思，增加图标后不仅更快看清，视觉上也更加美观。）

大段内容要拆分

大段的长句会让内容变得难以阅读。为了获得好的体验和 UI，应该注意拆分内容，并使用项目符号突出关键点，利用拆分好的内容块让用户更快抓住重点。特别是在“功能说明和条款条件”或任何声明时，提炼要点有助于提升用户体验，这样也不至于让用户直接忽略。

（彩云注：左侧的大段文字我想应该没多少人会去阅读，右边的至少还能在短时间内快速看看几个关键词。）

流程增加进度条

进度条帮助用户追踪流程，它也能使查看上下步骤更加容易。线上购物，表单填写，申请流程等场景使用这种格式能很好的简化流程。

（彩云注：左边的表单 UI 不方便跟踪进度和流程，右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。）

错误提示要明确

错误提示一定要明确，易于理解，方便用户进行下一步的操作。如果用户不理解界面上出现的错误，用户就会感到很失望，可能会放弃接下来的流程。在 UI 设计时，在正确的地方用通俗的语言说明问题，以避免歧义，这一点非常重要。

（彩云注：我常常遇到各种出错，但出现的提示太过于术语化，也没有提示在正确的地方让我非常苦恼。）

按钮要正确合理

从菲茨定律（Fitt’s Law）中我们应该知道，目标区域的距离和外观与所采取的行动成正比。因此，为了将注意力集中在转化按钮上，按钮应该准确放置在合理位置上。此外，按钮的大小应该易于点击，避免用户因尝试点击时不方便而流失。

（彩云注：左侧的按钮不在正确的决策位置以及按钮太小，右侧的按钮简洁明了并且符合用户的心理预期，能够让用户更快决策并点击。）

用好色彩心理学

颜色是 UI 中不可缺少的部分，它能影响用户使用应用时的情绪。正确地使用颜色将使 UI 看起来更加丰富合理。

（彩云注：左侧的蓝色按钮颜色并不符合用户对于删除的心理预期，右侧的红色按钮对用户的心理预期有危险和警告，用红色代表删除能够让用户集中注意力关注这一特殊的操作。）

单列更易保持关注度

用单列展示内容，能更好地帮助用户扫描。当你的应用和网站上要展示大量信息时，将所有信息垂直对齐时，能更好的保持用户关注度。

优先社交媒体账号登录

当用户准备登录或注册你平台的时候，把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号，能很好地增加点击率。

选择状态要清晰

在用户做选择的时候，需要清晰地告诉用户选中的到底是哪一个选项。模棱两可的颜色会增加用户的认知负担。更少的颜色和清晰的选中状态能让用户获得更好的体验。

（彩云注：左侧的问题在于选中状态不清晰且选项的颜色过于丰富，右侧的选中状态清晰且选项颜色只有 2 种，选中和非选中，体验会更好。）

用留白分组

如果想给信息分组，使用留白是最好的方式。加条线作为分组符号会在界面中增加了一个额外元素，空白能让 UI 看起来更加干净和优雅。用线分组的情况适用于类似 Twitter、Medium 之类的重内容平台等场景。

控件样式保持一致

保持设计的一致性，能够降低功能复杂度并让用户更快决策，一致性设计让用户更快熟悉操作而不需要太多思考。（彩云注：左侧的选项圆角不一致，会让用户思考为什么这里会有不同，而右侧的一致性选项设计，能让用户忽略内容外的干扰。）

搜索中的占位符要用好

在搜索输入栏添加适当的占位符，提示用户可以在平台上搜索和找到的内容，这样可以提供用户参考并带来更好的用户体验。

总结

以上这些就是在设计数字产品体验时应该遵循的 14 个基本规则，这些点虽然基础，但却经常被人忽略。

作者：彩云Sky¹

转载请注明：优设网

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

近年来界面设计工具不断推陈出新，一些新兴的实用界面设计工具渐渐走进设计师们的视野，逐步改变着设计师的工作模式。作为互联网设计师，效率至上的工作原则敦促我们不断尝试新工具，建立新的工作模式。本文将回顾界面设计工具的发展历程，并着眼界面设计工具的发展趋势，为大家推荐一些新兴、高效的界面设计工具，涉及UI、动效设计领域，希望对大家有所帮助。

Part1

——————————

界面设计工具的发展历程

随着互联网行业的日益繁荣，界面设计领域逐渐走向成熟，界面设计工具也一直在以惊人的速度发展。界面设计工具的发展历经了三个阶段：

1. 第一阶段是最早期界面设计领域刚刚起步，设计师普遍使用PS来制作界面。但PS是一个全面的而非专门针对界面设计的工具，因此界面设计师在界面的绘制、文件的交付上都存在一定不便。

2. 第二阶段是Sketch的出现。虽然Sketch是一款Mac端软件，但其作为一款专门针对界面设计的工具，以其高效、小巧的优势迅速占领界面设计市场，逐步取代PS成为各大设计团队的首选。由于Sketch在动效制作方面的欠缺，出现了Principle、Flinto、Protopie等专门设计界面动效的工具，一般设计师都会将其搭配使用。

3. 当前阶段各种新兴设计工具如XD、Figma、Framer Web逐渐走进设计师们的视野，它们专注于界面设计领域，不断挖掘和突破Sketch的短板，为设计师们打造更良好的使用体验。

Part2

——————————

界面设计工具的未来发展趋势

界面设计工具的发展改变着设计师们的工作方式。界面设计工具也渐渐从单一专注设计本身向云端性、协作性、通用性发展，旨在实现更高效的设计生产活动。

云端性

随着云计算的发展，界面设计工具也在逐步走向云端化。设计从本地转向云端，不再依赖于本地硬件的性能，云端的计算能力让使用性能得以提高。设计也不再受时间和空间的限制，只要有网络，设计师可以随时随地的工作，临时使用其他电脑工作时省去了安装软件、同步设计文件的麻烦。 设计文件的共享从传送本地文件给对方，变成发送链接给对方。前者耗费本地内存与下载时间，后者有网即可打开。设计工具的云端性使得设计的灵活度增强，设计效率大大提高。

协作性

注重不同工种之间的高效协作也是设计工具的一个发展趋势。新兴的设计工具（如Figma、Framer Web）试图将产品、设计、开发、测试融为一个整体，让不同工种之间可以高效讨论、同步设计方案。实现整个团队效率的最大化。利用技术降低反复沟通的成本、减少同步不一致情况的发生，扫除各工种之间的协作障碍。

通用性

今年9月Figma举办的第二届Config Europe大会，其主题是让设计和代码连接更紧密。可以看出设计工具越来越注重其通用性，设计工具不仅可以帮助设计师输出设计稿本身，而且致力于打破设计与代码之间的壁垒，降低交接成本。让设计实现变得更加轻松高效。

Part3

——————————

界面设计工具推荐

1 UI工具篇

1.1 Figma

Figma是一款全平台通用的在线界面设计软件。2019年UXTOOLS设计工具使用报告中显示，Figma的使用率从12%增长至26%，在今年的Config Europe大会上Figma也预告了一些即将推出的功能迭代，其便捷高效的特性使其受到众多设计师的追捧，正在逐步抢占sketch的用户市场。

Figma与Sketch相比，亮点功能有哪些？

（1）Windows用户也可随心使用

与sketch只支持苹果生态系统相比，Figma最大的好处是windows用户也可以使用。他支持在Mac、windowsPC机甚至ipad上使用，理论上只要你能打开浏览器，就可以使用Figma愉快地设计。

（2）云端文件使用不卡顿，支持离线编辑

Figma创建的文件全部存储在用户的云端账户中，不占用本地内存。当文件过大时，sketch会出现卡顿现象，拖拽一个图层都会变得很困难。而Figma对本地资源的消耗很小，大文件也几乎不存在卡顿的情况。设计师们最关心的无网或若网情况下Figma的使用问题，Figma也给出了相应的解决方案。其支持离线编辑，离线时会自动把内容保存在本地，当网络恢复后自动同步到云端。

（3）一键导入sketch文件

Figma可导入Sketch文件，大大降低了文件迁移成本。如果你想迁移全部工作到Figma是十分便捷快速的。

（4）更强大的组件功能

Figma和Sketch都拥有组件功能。当原始组件更改时，复制组件就会同步变化，在这点上二者是相同的。但Figma在组件逻辑上比Sketch更进一步，复制组件可以灵活处理与原始组件的同步关系。当设计师修改复制组件的样式时，原始组件不受影响。此时二者的关联逻辑仍然存在，当再次修改原始组件，复制组件仍然会同步变化。相比于Sketch，Figma把组件做的更加灵活限制更少。

同时Figma也在不断优化其组件功能，在Config Europe大会上，Figma预告在今年11月会正式上线组件Variants功能。该功能是将一系列有关联的内容生成一个Variants组件，在使用时可以直接通过识别出来的组件属性改变组件样式。其优势在于使用组件时可以更轻松的切换所需组件的不同状态,再也不需要像在sketch中一样逐级寻找了。

如下图中的按钮组件，设计师可以将所有的按钮状态都列举出来并按层级、颜色、状态、大小命名。然后选中所有按钮将其组成一个Variants组件。

（5）与代码紧密结合

在使用sketch输出设计稿时，设计师往往需要借助蓝湖或zeplin输出标注文件。Figma则与代码紧密结合，本身自带交付功能。 其文件中的每个模块都有代码模式，只需要将开发同学的账号开通查看权限并发送链接，就可以直接在设计文件上获取标注，也可自行导出所需的CSS、ios、Android样式。

（6）一键恢复历史版本

Figma会将设计师的每一次修改存成对应的历史版本，当老板说想要某一版时，设计师只要恢复至老板想要的版本就ok啦。如果其他设计师误删除或错误修改文件，也有机会一键抢救。

（7）团队协作

团队协作功能可谓是Figma最大的核心竞争力。当几位设计师需要维护同一份设计文件时，Figma可以支持几位设计师同时在线修改，只要将文件链接分享给对方并给到相应权限（查看、编辑权限）即可。如果使用sketch，设计师一般会发送源文件给对方修改来达到协作效果。来回传输源文件不仅容易造成文件同步出错，而且有一定的下载时间成本和存储成本，相比之下Figma的优势显而易见。

除了设计师之间的协作，Figma也有效提高了设计评审的效率。与在工作群截设计图标红再描述相比，Figma的评论功能使得同事可以在设计文件中实时标注讨论方案，提高了线上评审效率。

小结

设计师受文件本地存储的限制，在工作中把源文件给同事、设计稿给产品、切图给开发、一项简单的输出对接任务变得琐碎起来。Figma的出现打破了设计师长久以来的孤岛工作状态，设计师只需分享一个链接，同事可以修改设计稿、产品可以评审、开发可以查看界面模块的属性甚至查看代码，大大提升了设计师的工作效率。如果您的团队正在考虑更换设计工具,Figma是一个不错的选择。

2 动效工具篇

2.1 Framer Web

Framer Web是一款在线动效设计软件，于今年5月上线正式版，相比于Framer家族的前两款产品Framer classic、Framer X, Framer Web突破了其以代码为操作核心的理念，上线的新版本对设计师来说更加易用友好。

Framer Web的核心亮点是什么？

（1）网页端全平台可用

相比于Framer classic和Framer X作为本地客户端软件只支持Mac电脑，Framer Web是一款基于浏览器的在线设计工具，因此windows用户也可以安心使用。同时个人版本免费，大大降低了设计师的使用成本。

（2）文件导入

Framer Web可通过import选项导入Sketch甚至Figma文件，可搭配Sketch和Figma快速制作高保真动效。

（3）轻松实现复杂动效

Framer一直主打利用代码实现复杂可控的交互动效,。虽然可以保证输出高质量的动效，但对于设计师们来讲十分不友好，学习成本过高。此次发布的Framer Web为了解决这一问题，增加了适合设计师使用的可视化界面控制动效，设计师可以通过Magic Motion轻松实现复杂动效。

Magic Motion与principle、keynote的动画实现原理类似。当你选择目标元素添加了交互行为后，可以在Magic Motion中选择一个过渡方式。只要两个画板中的元素名称一致且在不同面板中拥有不同的形态，那么在画板切换时该元素就会生成补间动画发生相应变化。

同时Framer也新增了一些特别的交互控制实现一些特殊动效。比如自带控件中的video，本身会有一些独特的交互行为如End、Pause、Play（播放、停止、暂停），当进行这些操作时，会触发相应的页面变化。

（4）从设计到代码

代码一直是Framer的核心功能。Framer Web默认隐藏了代码面板，设计师还是可以在设定了动效后，通过点击顶部的handoff调出相应代码。如果你是一个需要使用代码的设计师，你仍然可以通过编辑代码实现更复杂的动效。对于设计师来说，Framer提供的丰富动效已经可以满足绝大部分诉求。绝大部分设计师已经无需再关注代码部分，通过可视化界面完全可以做出很丰富的交互效果。而Framer Web最终的野心是希望设计师通过可视化界面设计出参数化的动效，可以直接导出相应的能交付生产端的代码。目前Framer Web 已经可以实现导出相应动效代码，但导出的效果仍有待完善，只是可以导出Transiton的参数而已。

（5）高效协作

Framer Web和Figma一样，也非常注重团队协作。设计师可以将链接分享对方进行查看、编辑，方便几位设计师合作一个项目的情况。与需要反复传输文件相比，Framer Web省时省力，大大提高了设计师的工作效率。

小结

Framer Web放弃了攻占界面设计领域的策略，转而和Figma官方达成积极的战略合作，专注于做专业的动效设计软件。因此Framer Web非常适合和Figma搭配使用。随着产品策略的调整，相信在不久的将来Framer Web还会为设计师们提供更丰富、高效的动效设计功能，非常值得期待。

3 插件篇

虽然云端化的设计工具正逐渐兴起，但sketch仍然是目前较为主流的界面设计工具。因此接下来除了为大家介绍一些可以提升工作效率的Figma插件外，也会介绍一些好用的sketch插件，大家可以根据自己的需求自行尝试体验。

3.1 Design Lint（Figma）

设计师在做较大项目时可能会绘制几十个页面，难免会存在界面丢失元素的情况。Design Lint就能帮助你解决这一问题。它可以在你工作的时候进行实时更正，检查不同界面直接的差异，包括颜色、字体、填充、半径值等样式差异并纠正错误。如果你做了一些修改，Desgn Lint也会根据你的修改实时更新。这款插件可以让你更专注于设计本身，而不用浪费时间检查不同页面的元素是否使用正确，大大提高了设计师的工作效率。

https://www.figma.com/community/plugin/801195587640428208/Design-Lint

3.2 TinyImage Compressor（Figma）

设计师在做较大项目时导出的设计稿过大，存储和传播的成本高。用这款插件最多可以比Figma默认导出的文件小90%。同时支持导出多格式文件，导出多个图片时还会自动生成一个zip压缩包。

https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressorl

3.3 Design System Organizer（Figma）

这款插件帮助设计师在设计组件系统时管理组件系统。在设计组件系统时，会遇到如图所示的：“Buttons-Small-Default...”的组织形式。该插件可以对组件进行管理、如分组、取消分组、移动、重命名。当重命名组后，该组中所有组件的名称都会随之改变，十分方便。

https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer

3.4 Juuust Handoff（Figma）

Figma本身自带交付功能，但该插件的好处是生成的是离线文件，导出的文件可直接交付开发。开发同学可以不受网络影响随时查看间距、色值等信息。

https://www.figma.com/community/plugin/830051293378016221/Juuust-Handoff

3.5 Image Optim （Sketch）

设计师在导出设计稿时有时图片过大，Image Optim可以在导出图片时压缩图片，但不会影响图片的质量。使用时需先安装app再安装Sketch插件。

https://oursketch.com/plugin/imageoptim

3.6 FontFinder（Sketch）

设计师在做较大项目时可能会绘制几十个页面，难免会存在字体使用错误的情况，Font FInder就能帮助你解决这一问题。它可以检测出文件中存在的所有字体，你可以勾选想要更改的字体就可以一键将其改成目标字体。再也不需要在几十个页面中逐个寻找更改，大大提升了工作效率。

https://oursketch.com/plugin/font-finder

3.7 Craft（Sketch）

Craft插件十分强大，其中填充功能可以大大提升设计师的效率。在设计如列表页时，设计师为了效果需要编辑不同的标题、图片，都要冥思苦想编内容。Craft可以一键填充文字，如姓名、文章、日期、邮箱、地址、国家等。不同类别下面也设置了一些分类，方便设计师选择。除此之外，Craft还可以一键填充真实不重复的照片,为设计师节省了很多时间。

https://www.invisionapp.com/craft

3.8 BaseAlign（Sketch）

Sketch自带的对齐工具对形状来说很好用，但对于文字来讲一般是文字的文本框对齐，并不是文字本身对齐。BaseAlign插件使用的是文字自身的基线对齐，这样就以保证不同大小的文字都可以对齐，设计效果更完美。

https://oursketch.com/plugin/basealign

4 协作工具篇

4.1 XSHOW

XSHOW是一款由ISUX研发的高效设计协作平台。XSHOW连接了产品经理、开发等各个不同工种，提高了设计资源输出和分发效率。设计师将设计文件上传到XSHOW，就可以将文件链接分享给产品经理、开发等同学。产品经理在手机小程序上就可以预览方案，设计师每次更新的方案也可以直接预览。开发同学可以直接查看标注和切片。同组设计师也可以直接下载源文件、甚至查看历史迭代版本。

网址：https://xshow.tencent.com

XSHOW是如何实现高效协作的？

对于设计师

（1）可视化上传文件

设计师先在Sketch中安装XSHOW插件，可使用快捷键或直接点选需要上传的文件画板，接着直接选择XSHOW中的“导出”，就可直观快速的将文件上传到XSHOW。

（2）记录所有版本迭代，轻松找回第一稿

设计师每一次上传的文件都会有云端记录，设计师可以通过时间轴便捷找回历史文件，轻松找回第一稿。

（3）灵活丰富的分享权限

对于项目分享的权限，XSHOW的设置更为灵活，除了支持私密、公开、指定人或团队可见外，也可以控制权限的时效。

对于项目管理者

（1） 直观了解团队输出,组建团队展示能力空间

XSHOW除了个人使用外还可以组建团队。项目管理者可以通过XSHOW直观查看整个团队的设计稿件输出修改情况，同时可以组件团队展示能力空间。

（2）方案变更及时知道

XSHOW有记录所有版本迭代的能力，因此作为项目管理者可以及时知道团队成员对方案的修改变更，解决了团队内部有时同步不及时的问题。

（3）便捷组建项目和管理团队成员

项目管理者可以在XSHOW便捷组建项目和管理团队成员，大大提高了项目管理者的管理效率。

对于合作产品经理或甲方

（1）多端查看更方便

XSHOW支持web和小程序两种沉浸式查看方案的方式。在小程序上查看方案方便合作方直观感受方案在手机上的真实效果，如果合作方身边没有电脑也可以及时查看稿件。

2. 查看历史变更

XSHOW的历史变更功能可以使合作方也及时了解方案的变更情况，大大提升了信息同步效率。

对于开发工程师

（1）便捷查看标注与管理切片

设计师将文件上传到XSHOW后，只要将链接分享给开发，开发就可以直接在线查看文件标注、下载切片。

作者：腾讯ISUX       来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 

ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

『 写在之前 』

最近在阅读《佐藤可士和的超整理术》，书里讲述的是作者通过对空间、信息和思考的整理，来解决复杂问题，让工作变得高效。生活和工作离不开“整理”，好的设计也要从“整理”开始，组件化设计思维，也可以看做一种“整理术”。本篇文章将与大家探讨如何运用组件化设计思维去“整理”项目，并发挥更高的价值。

文章分为两个部分：

1. 组件化设计思维

2. 滴滴表单优化项目的沉淀总结：组件化思维的推动和执行

『 组件化设计思维 』

1. 什么是组件化设计思维

我们知道“分子是由原子组成的，分子分成原子，原子也可以重新组合成新的分子”。一个界面是由独立的分子组件搭建而成，分子组件由原子元件构成，这些原子可通过不同的组合方式，组成新分子组件，继而重组构成新的界面。

组件化设计思维是通过对功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成规范化的组件，通过多维度组合来构建整个设计方案，从而提升设计效能。

2. 滴滴运用组件化带来的收益

随着滴滴业务的飞速增长，组件化为滴滴带来了一致的设计语言和工作效率上的提升，因此滴滴在组件化道路上的决心愈发坚定。选择以组件化展开设计实践，带来的变化与收益主要体现在公司、项目和个人三个维度：

2.1 公司维度

一款产品的更新迭代是依附于产品、设计、开发、测试等多个团队协作进行的，随着产品功能的完善，背后支撑的团队也在不断壮大。以运用组件化推动的产品设计与迭代，可以使团队增效，降低成本。设计师可以只用几个小时设计出几十个页面，开发人员也可以通过查看prd文档，直接调取组件代码完成需求，使得我们的生产力产生质的飞跃。在保证数量和质量的前提下，原本200人的团队，可以缩减为100人，为公司节省了人力成本。组件化能让公司以更快的速度和更低的成本开发产品，也能对产品想法快速验证。

2.2 项目维度

● 从设计方案上

对于一些适用组件化的产品形态，我们可以运用组件化思维将其“化整为零”，对需求有更规范的统筹，理清框架，建立一个可复用的组件结构并持续优化，以保证交互和视觉的一致性。

● 从工作流程上

传统的设计流程大多是同属性多角色并行的，从需求到设计，从设计到前端的工作流程会涉及到不同的设计师及不同的前端工程师。相同角色间无交集、缺乏沟通会导致大量重复性工作，增加项目周期和管理难度。

而将组件化思维贯穿其中的设计流程，带来了工作流程上的创新。我们建立了一套设计组件库来提高协同效率，大量需求均通过需求评估来判断是否需要新增或复用组件，对于组件库里已有的组件，设计师可直接调取，组合构建出新页面。对于新增组件则经过常规设计流程后，归纳沉淀并由组件委员会审核通过后方可入库，以提升后续组件扩展能力，助力产品快速更新迭代。 

2.3 个人维度

利用组件化，设计师可以从低价值的机械式工作中解放出来，参与到设计创新中去，发挥更高的设计价值。

另外，在工作中运用组件化设计思维有助于设计师更完整的思考，培养全局思维的能力；也有助于我们专注于细节，提供个性化的创新方法，产出适应不同场景的最优方案。

下面用一款优秀案例来解析组件化设计思维

『 滴滴表单优化项目沉淀 』

1. 项目背景

1.1 为什么要优化表单

滴滴出行5.0版本从2016年11月上线至今，随着用户体验痛点不断增加，业务的需求逐渐多元化，我们希望对表单进行一次统一的整合梳理和升级。为未来更多业务发展提供快速支撑和拓展，同时也注重用户体验的提升。

滴滴出行作为出行服务类应用，精准的发单表达是触达用户进入服务流程的关键。每个业务在确认呼叫的节点上拥有独立的入口并满足不同的需求（如下图），确认呼叫页表单（以下简称表单）作为最重要的多功能、多信息载体，需要高效、精准的表达和流畅的体验。

1.2 跨业务共建

滴滴出行是涵盖出租车、专车、快车等多项业务在内的一站式出行平台，我们希望在保证全平台统一化的基础上，与业务寻求一种相辅相成的关系，并且在保证规范化输出的同时，展现出业务特色。在需求阶段，确定各业务接口人，收集需求，沟通评审促成各方达成一致目标。在方案执行阶段，平台设计师产出方案，与各业务线沟通并优化，1～2次循环后方案评审到最终确立。开发和测试阶段，各方验收通过后发版上线，上线后平台沉淀设计规范，完善组件库，跟踪反馈，推动体验优化形成工作流程闭环。 

2. 确立设计目标

项目初始，平台设计师需从业务诉求及用户诉求两方面着手，在收集到两方需求后，对其进行归类整理并定义优先级，从而确立设计目标，制定出具体的设计策略，提炼交互框架，再深入到细节的设计。 

在表单项目中，基于满足业务未来多元化及提升用户体验的需求，输出目标为：

1）兼容各业务需求，建立具有可承载多种业务共性及特性的组件能力框架；

2）主要信息及次要信息的合理化分布；

3）传递真实感及专业感，拉近用户体验共鸣。

3. 以组件化设计思维展开设计探索

有了明确的目标后，根据目标制定相应的方向策略，也便于我们在后续的设计工作中寻找发力点。和业务沟通后，明确整体方案的设计基调聚焦在“扩展性”“统一性”“逻辑性”“个性”四个方向上：

扩展性——组件化视觉表达，能够随着滴滴多场景、多业务需求的变化进行延展和扩充；

统一性——各业务信息归类统一、简化；

逻辑性——信息层级清晰，增强主焦点认知，次要信息弱化；

个性——设计个性化表达

3.1 以组件化思维进行框架探索

在方案构思阶段，我们是以组件化设计的思维方式先去全面的思考并分析问题，再进行拆解分类，最后归纳重组。

● 全面多维度分析问题

框架层：针对快、专、豪的确认呼叫表单的关键场景进行框架分析

因为业务不同，场景不同，确认呼叫这个流程触点在各业务中是具有共性和差异性的。我们重新梳理了确认呼叫页表单各业务的功能点（如下图），可见各业务表单虽有一致模块，但信息内容十分繁杂，层级区分无规律可循；操作区位置不统一，样式各异；框架的兼容性及扩展性不高。

表现层：在视觉表现层面上，也暴露了很多问题，如：不同业务的车型选择分别有各自的展示方式；价格区选中项的感知较弱且各业务的样式不统一；价格小数点展示位数不一致等等。

新增业务特性诉求：新的框架还需满足业务特性的诉求（如下图）。

● 拆解并简化

如何让新的框架既能满足越来越多的业务类型，保证体验的统一，又能体现出业务特性，平衡取舍促进产品更新迭代呢？

我们回归到本质，从以下四个方面对框架进行重新构思：

删除——去掉无用的功能点

组织——根据类别将这些功能点分解后重新划分成组

隐藏——突出主焦点的认知并隐藏次要信息

抽取——抽取共性，对比差异性

综上，即对框架进行简化，保证框架可灵活适配具有业务共性与特性的组件。 

● 重组

简化后的框架几乎可以覆盖所有必要功能点，有很强的适应能力和扩充能力，可以轻松应对未来多元化的出行服务及场景。

在共性中寻找差异性：全局操作、车型与价格、发单按钮是业务共性部分，除车型／价格区和发单按钮外，其余均可显示或隐藏，可根据业务特点灵活配置。 

在差异中寻找共性：车型与价格区所包含的服务选择与附属操作是业务差异部分，快车需要在一个卡片中呈现三个车型比价、需要有附属操作，专豪则需要强调车型图片的露出和服务配置。我们要找一个平衡去把这些差异点串联起来，确保用户拥有同样的感受，不仅是交互方式、动效流转，也需要关注同一层级信息的视觉表达。

3.2从框架层到表现层——从整体到细节的设计

● 视觉尝试探索

在交互框架明确后，便进入视觉设计阶段。平台设计师基于统一的的框架进行视觉风格探索，兼顾扩展性和逻辑性，同时不能忽视业务特性，从而迸发更加出彩的设计想法。设计师是界面的规划师，也是品质的把控者，大到页面布局、组件的组合方式、颜色定义，小到按钮在空间布局上的占比是否合理都要面面俱到。在这个过程中，不断打磨微调，进一步细化并且有针对性的进行动效设计，以呈现更完美的方案。

● 组件化设计的细节打磨

在方案确定的同时，将模块再次拆分成组件，组件包含不同类型、不同状态的基本元件，进行深入打磨，从而实现与设计目标的高度吻合。

● 根据组件构建页面

表单运用了组件化设计方法，建立了可承载业务共性与特性的框架。通过设计评审敲定最终方案后，提炼规范，设定组件标准，提取组合用法以覆盖各业务场景。由于业务线设计师更了解业务的需求根源及业务流程，所以由其枚举场景并输出业务遍历图。

平台与业务共建的过程，可以更好的调动业务线设计师的积极性和参与度，也能从业务的角度验证组件的扩展能力；“共建”也能更快速的将组件规范推动落地，实现组件的复用、协调与升级，是快速搭建页面、促进产品快速迭代的重要因素。

4. 项目反思

表单在 2017年10月19日 随乘客端 V5.1.16 发布，我们通过数据分析来验证表单优化的合理性。（以ios为例，分析上线一周后10月25日-10月31日的发单率和发单时长数据） 

4.1 体验量化

- 新表单较老表单，发单量增加，发单率提升14.83%；

- 新表单较老表单的平均发单时间降低了2%

数据分析表明，表单的设计优化是成功的，是设计师运用组件化思维在自驱项目中的每一个环节发挥高价值的体现。

4.2 快速落地

“共建”和“组件化”是促成表单项目在短时间内达成落地目标的关键因素，平台与业务共建的工作方法也扩展运用到了更多项目中，是平台与业务之间迅速确立方案、搭建设计规范、推动体验优化和迭代的最高效路径。

4.3 设计研发一体化

不仅如此，表单优化项目取得成功，离不开“组件化设计思维”在设计全流程上的应用。我们坚信，滴滴将在组件化道路上继续前行，然而这条路任重而道远。就现状而言，我们的两个组件库——设计库和开发库仍需要分别维护，且设计和开发在沟通时成本较高。这使得我们需要创建一个能够同时面向设计师和开发人员的共享组件库，实现设计和研发一体化，让设计师面向开发，让开发贴近设计，减少设计及开发人员的额外工作量。我们设想，在设计和研发一体化的生态系统下，不论设计师或开发人员，通过搜索名称就可以从共享组件库中调取相应的组件进行设计，这些组件都有一对一的设计和开发数据，这会让工作变得十分高效。

在滴滴的未来，设计研发一体化是可以将代码实时渲染到设计软件中审阅设计的生态系统，且并不遥远。

作者：滴滴出行CDS       来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 

ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

本文从What/How两个部分循序渐进地阐述如何输出清晰有效的设计方案，希望给大家一些建立系统性设计思路的启发，帮助大家更好地输出设计方案，为决策设计方案提供更有力的参考。

 WHAT: 什么是清晰有效的设计方案

首先我们需要对清晰有效有一个整体的认知。所谓清晰，从字面上理解是指看得很清楚、明朗，设计层面来说就是方案能做到方向明确，方案明了。而有效字面上指的是有效果，有效力，从设计层面来说就是输出的方案可以解决存在的问题，能达到设定的目标以及可以切实落地。

清晰和有效的考量维度是不一样的：清晰更多是针对设计这一环节，在于不同方向/方案的差异度和侧重点；而有效则更多需要联合设计上下游（用户/产品/开发）。对于优秀的设计方案来说两者相辅相成，缺一不可。

接下来我们来详细拆解什么是清晰和有效。

1.清晰 - 方向明确，方案明了

——————————

很多设计师对方案输出的数量有个认知误区，认为设计方案越多越好，可以给老板、合作方更多选择，往往不假思索地用大量的时间输出所有可能的方案，并拿出来让别人评审，认为把所有的可能性列出来就不会错，这正是对方案清晰性缺乏认知的表现。

在设计最初期，不要着急动手输出界面，先结合目标（近期目标和远期目标）综合考量，系统性地思考有哪些途径达到目标，确保所有实现手段的方式都有考虑到，并且可以整合途径一致、方向近似的方案。对差异性不大的方案进行合并划归，才能在合理范围内整理出具有不同思考维度与目标侧重的提案方向。前期规划思考的深度决定了方案的广度，只有清晰的思考方案才会创造无限的可能。

 用案例来让大家对清晰这个定义有更具象的认知：

相册小程序Logo这个需求的目标是需要突出相册元素，并强化品牌识别度。

这是设计师输出的Logo提案初稿，虽然输出了28个方案之多，但没有设计思路的规划，想到哪就画到哪，很多方案是重复的，还有一些方案在设计初期就应该Pass，设计的整个细致度也不够充分。

于是设计师对设计方向重新进行规划整合，按照输出形式重新规划了分类。

按照分类筛选出四个可以继续优化的方案。并且拿着四个不同方向的方案去汇报。最终确定D方案。

我们重新回顾一下这个需求，28个方案 VS 4个方案，设计师需要的不是尽可能输出多方案的能力，方案越多可能表示你在错误的道路上越走越远，需要的是通过前期系统的思考能一次把方案做对的能力。

2. 有效 - 解决存在的问题、能达到设定的目标、可以落地的方案

——————————

很多设计师拿到产品需求会立即动手，认为满足了产品这个角色提的需求便是好的设计输出，或者把方案出的天花乱坠，当产品或者其他角色提出不同意见就会觉得他们不懂什么是好的设计。这些现象大多是因为设计师在项目前期没有正确思考和评估这个需求本身需要解决什么问题、方案能否达到团队共同设定的目标，以及方案是否能平稳落地这三个维度。

解决存在的问题—从问题出发

我们在实际输出方案的时候，不能从产品经理的需求文档开始，而是要把考量维度更前置，从项目现有的问题出发。这个问题的搜集包括外部用户的反馈，内部团队的声音，但需要注意的是用户的反馈不一定是真正的问题，需要做到筛选和甄别。比如新发布一个版本可能会碰到的一个情况是很多用户打一星反馈说界面太难看太丑，这种属于用户感受，我们可以再深挖一下用户觉得丑的原因，是不是改变了太多用户习惯，但又没有给用户真的带来更好的体验和更多的收益。

能达到设定的目标—从目标启动

问题还需要结合目标一起考虑，解决问题的思路并不完全等同于目标，目标是大家一起制定的未来产品的发展方向。比如我们新发布的版本里面新加了一个Tab改变了用户习惯，大批用户投诉，但如果这个新Tab是符合我们目标的，我们不能为了短期解决用户投诉把这个Tab下掉，应该继续观察用户在这个使用过程中碰到了什么问题，解决实际操作中碰到的问题。

用案例来让大家对问题和目标有更具象的认知：

我们需要优化QQ空间的为空界面，首先我们梳理下现网存在的问题，风格整体比较老旧，很多图形表意不明确，新出模块就会有新风格，所以存在很多不统一的地方，空间整个业务有一百多个为空界面，导致开发也不清楚到底应该怎么用，用什么，所以很长一段时间是处于乱用的状态。

接着我们梳理了这次优化的目标：

1 界面统一，用户能对表意感知明确（解决现网问题）

2 强化QQ的品牌

3 做成基础组件，保证复用性

4 低成本开发

确定了优化目标以后我们没有马上急于尝试风格，而是先遍历了所有为空异常页，整合了所有场景最后梳理出八种情况，这八种情况可以覆盖所有的为空场景，梳理整合场景是目标1、3、4能实现的前提。

然后我们基于这八个场景来输出设计风格，要低成本开发，所以这里没有考虑加动画，用企鹅剪影结合具体的场景来表意，不仅强化了品牌，也能做到表意清晰明确。图形定好以后我们马上也输出了规范，Push给对接的开发同学方便调用。

在输出方案过程中，始终都要紧紧贴合问题和目标，避免无效设计。

能落地的方案—技术可以实现

在输出设计方案的时候，设计师需要考虑到开发成本是什么，需要消耗多少资源去实现这个需求，最低成本达到目标的路径是什么。如果有些方案开发成本很大却收益价值却很小，我们就需要斟酌它是否仍有执行的必要。避免一味的追求设计效果不去对齐成本、人力，最后也只会是设计的自嗨。

用案例来让大家对清晰这个定义有更具象的认知：

产品提了好友生日推送礼物的需求，目标是想用生日这一比较温情的场景去设计专门的祝福页，用来提升写操作和大盘活跃。我们需要设计送给用户的礼物卡片，从实现手段的难易规划了三个方向：

A 手势交互但开发难度大: 3D手势交互动画

B 趣味动图且开发成本适中：局部小动画

C 静态但开发成本低：全静态视觉，复用已有开发流程

最后团队对齐了人力成本，决定采用方案C，把设计精力放在本身卡片的表现上。

HOW: 如何输出清晰有效的设计方案

那如何才能输出清晰有效的设计方案呢？设计方案归根结底是思维方式的具体体现，输出清晰有效的设计方案最核心的点在于体系化的思考方式，我总结了一下几点：

1 拓宽边界

——————————

拓宽边界需要设计师站在更高的视角和有更广的视野，把设计从表现和执行抽离往前后延展，在整个设计过程中往前去挖掘需求和规划产品结构，往后做到把控和沉淀，能站在上下游各维度去Review整个项目，只有站在更全局的视角审视，才能跳出片面设计的维度。

2 转换视角

——————————

从不同的视角看待问题，学会拆解问题和解决问题，从产品/开发不同的角度来全盘看整个产品，分析这个需求的投入产出比是不是足够，是不是能达到目标（包括设计目标和产品目标）。设计、产品、开发从来都不是对立的，都是不同角色为了整个产品发力。

举个例子，产品同学觉得输出的方案不好看，是在用感性表达，我们可以尝试继续拆解不好看背后的原因，比如是不是核心内容不够突出、担心按钮转化率等，一开始就抱着产品不懂设计这种想法是没有办法解决问题的。

还有一个就是用户同理心，很多时候我们不能只站在设计师和产品的角度看待用户反馈的问题，比如新功能内部团队觉得很厉害，但实际门槛太高，用户根本不知道怎么操作，而我们长期体验这个产品反而忽略了产品的易用性。

3 结构思维

——————————

我们在启动项目的时候，不要单点去看要在某个页面要做什么改动，而是从问题入手，和产品同学对齐好目标，结合设计理念，最后找到发力点在哪里，循序渐进，这样很大程度上能避免项目的反复，对设计流程的准确把控也是输出优秀设计方案的基础。

举一个日常生活的例子帮助大家理解，比如我的问题是长得丑，我的目标是要变得更年轻漂亮，我的理念就是改善体型和优化五官，最后找到具体的发力点比如晚上不吃晚饭，去美容院打美容针、学会怎么化妆等。

4 认知创新

——————————

有些新设计师对设计创新的认知还停留在是去做一些创造世界、改变世界的事情，认为创新就是把原项目进行翻天覆地的改变，初入职场会觉得负责的业务和项目都很小，没有什么意思，其实创新的维度有很多，包括设计工作流程的优化、还有从小的问题点着手去深挖和思考，找到合适的解决方案并打磨细节给用户创造惊喜。摆正心态才能做对事做好事。

5 及时复盘

——————————

完成项目以后需要不断的总结方法，遇到的问题，除了技法层面的提升，更重要的还包括思考层面的提升。学会去总结之前踩过的坑，避免重复性的问题，比如你的输出一直存在层级不清晰的问题，那么你需要关注后续输出的界面里大模块之间以及元素之间的层次是否还存在这个问题。可以犯错误，但是尽量避免总是犯同样的错误，这样才能加速成长的脚步。

作者：腾讯ISUX     来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 

ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

前言

前人早已总结了让动画生动的技巧，早在1981年由两位迪士尼动画师所撰写的《The illusion of life:Disney Animation》一书就提到了动画的12项基本法则，该法则也是受用至今。法则虽是针对传统动画而制定，但对于我们日常需求中所接触的动效/动画需求也同样受用。

目录

1）动画原则介绍

2）结合案例应用原则

3）流程方法论沉淀

4）结语

01: 挤压与伸展

挤压与伸展是我们最常用的运动技巧。使用挤压与拉伸来强调物体的质感、重量、速度。挤压和拉伸会给予物体运动时具备质量感和体积感的错觉。例如当一个皮球正在进行下落运动，在运动过程中让皮球体积产生一定拉伸来表现它的速度感，皮球落地后则因力的作用产生挤压变形。

技巧建议

挤压与伸展的幅度影响着物体的质感、重量。设计师们可根据物体的质感去决定挤压伸展的幅度。动画虽存在夸张性，但对于物体挤压拉伸的体积尽可能保持视觉统一，避免较大的体积误差导致运动的突兀。

02: 预期动作

预期动作可告知观者物体运动即将发生，增强观者的场景代入感，使运动更加生动真实。如果我们去除前期的预备过程物体所呈现的运动感知像是突然被前方磁铁所吸引。

技巧建议

预期动作可对观者视线进行引导，设计师可以根据预期动作所引导的方向来衔接镜头/场景的转场。反之预期动作也可以用来欺骗观众，当用户预期与画面不符时也可增加动画舞台的趣味性。

03: 演出方式

每个角色/运动元素在运动过程中都会流露出独特的态度和气质。针对不同的角色/元素的运动特性运用不同的运镜、表演技巧、时间节奏以及舞台的编排技巧，传递贴合角色/元素气质的动态感知。

04: 持续动作与关键动作

在现今动画工作流程中，考虑到流程效率及技巧利弊，我们可以使用两者相互结合的方式。关键动作描述的是设计师们熟知的关键帧动画的方式（类似AE）。在动画设计前进行基本运动的关键动作提炼，再进行细化，一层层的递进。底层的关键运动越完善，在后续添加细节时才不会耗费大量时间调整。而对于持续动作（逐帧动画）的技巧，我们可以利用它处理一些复杂效果例如（涉及到运动空间的变化、形状上的灵动变化等）。

1）持续动作（Frame by Frame）

逐帧动画。

优点：自由且流畅的动态。

缺点：难以把控时间长短、体积大小。

2）关键动作（Key Frame）

关键帧动画。

优点：清晰、可靠、规范。

缺点：修改成本略高。

05: 跟随与重叠动作

跟随动作指的是元素运动结束后不会立刻停止，会因为质量、惯性等因素，元素会慢慢进行振动减幅的过程。重叠动作则指的是运动不会同一时间发生，主体与附属部分的运动会因质感、外力等因素产生不同的速率。

技巧建议

1)表达运动的力量、速度感

当一个人跳跃的时候，自身的衣帽等附属物也会随之摆动。跟随&重叠动作反应着运动的力量感和速度感，利用好跟随与重叠动作，可以更好地表现角色/元素主要动作/运动。当主要动作/运动力量大、速度快的时候，跟随与重叠的物体运动幅度大，反之则运动幅度小。

06: 缓动

真实世界的运动遵循着缓动运动的规律，而并非匀速运动。根据物体运动情况、动态质感去编排元素合适的运动速率。关于运动的速率编排相关内容，可以看看过往的文章-《动效的质感》。

07: 弧形运动

仔细观察可发现自然界中的运动多为弧形运动的组合，而匀速运动只存在于机械运动中。

技巧建议

1） 弧形运动路径

角色动画:

在人物运动过程中使用弧形运动增添角色动画表现力。比如当人物抬头或转头时，通过弧度的变化映射人物的情感，是充满好奇心的还是沮丧的。

交互动效:

在交互动效中，弧形运动路径会给予观者运动表现力较年轻活泼的感知隐喻。设计师可根据品牌调性及产品属性去选择运动路径类型。

08: 附属动作

当主体在运动时，设计师可通过附属物运动来辅助表达主体运动气质。比如人物敲门时，捏紧拳头的敲（代表生气）与翘起兰花指敲的（代表精致）区别。

09: 时间控制

在上篇文章其实我们有提到影响动效质感的原因之一就是时间，控制好物体的运动时间也是表现良好动画节奏感的关键。

技巧建议

1) 时间偏差（角色动画侧）

使用「时间偏差」的技巧，可以让你的动画更加生动。因为受力、质感等因素影响，主体运动时附属部分的运动不会同时发生。比如当人物正在打哈欠时，首先是从嘴巴发力，再扩散至五官眉毛。

2) 时间偏差（体验动效侧）

为保持动效的连续性以及营造自然流畅的交互体验，适当的使用时间偏差，可避免动效元素变化过程出现空档期，提升信息传递效率减少认知负荷。

10: 夸张

通过夸张手法增添动画表现张力，加强运动元素的吸引力令动画更有代入感和戏剧性。

11: 多维表现

动画设计时可通过营造镜头透视感、景深感模拟真实的空间感打破二维扁平视觉效果，提升画面表现力。

12: 吸引力

一部好的动画作品一定会有令人吸引的人事物，比如动态气质或视觉风格等它们都能很好的吸引观众。除此之外，如何讲好一个故事，通过趣味幽默的故事表达手法也可以增添动画的吸引力。

原则归类

通过对十二大基本原则的学习，我将技巧分为以下两大类：设计技巧和表演技巧。

设计技巧：动画设计的技法，增添动画细节令动画表现更生动自然。

表演技巧：舞台表演的技巧，提升动画舞台全局的表现力。

结合案例

接下来我们结合上述所提及的动画原则，根据实际案例进行结合应用。一起来探讨下当接到动效设计需求时，我们需要思考哪些点？才能使我们的动效表现力更上一层楼。

脚本背景

假设在项目中我们需要对设计元素（猪猪存钱罐）添加动效以提示用户已省钱成功的情感氛围。设计前我们先来分析下元素以什么动态/动作表现会更贴合元素性格。考虑到猪猪的可爱属性，采用了跳跃的运动方式。并拟定了跳跃后天上落下金币的动画脚本。

动态分析

将脚本确定后，我们在脑海里已经有大概的运动画面。但在进入动效设计前，还需要明确在动画中使用哪些动画原则来提升动画生动性。

应用技巧

在添加动画细节前，我分享下在项目中经常用到的两个技巧。

1) 实现挤压与伸展的多种形式

实现挤压与伸展的方式有很多种，最常见的是直接改变物体的缩放比例或形状路径来实现。但在设计项目中我们往往会遇到非矢量的设计元素，利用xxx可实现图层的弯曲扭曲等变形效果。

2) 考虑运动物体质感

质地坚硬的物体受外力的影响较小，质地柔软的物体受外力的影响较大。而像猪猪这类柔软的物体在恢复静止吋肉肉会有一个跟随&重叠动作（抖动）。在处理这类抖动的效果除了使用常规的弹性表达式外还可配合使用AE的 CC bend it 效果增加形变细节令物体运动更为生动自然。

差异对比

当我们去除这些动画原则后，再去作对比明显的感知差异就出来了。

经验沉淀

根据过往项目经验，我总结了动效/动画设计的流程思路。从业务目标的分析到动画脚本的确定，层层递进。前期的目标和框架确定后，之后进行动画原则的梳理及最后的动效输出。设计师们不妨在项目中尝试上述的流程思路及原则技巧，将自身动画的表现力提升一个档次。

结语

随着动画/动效的落地方式愈来愈完善，像Lottie、svga等新型的动画落地形式所带来的高品质画面呈现。设计师们不能满足于动画仅仅只是动那么简单，如何去塑造生动的动画形象还有不少我们需要考虑的细节。恰好前人总结了相应的原则技巧，帮助我们站在巨人的肩膀上看得更远。除《The illusion of life:Disney Animation》外，近期也在阅览《动画师的生存手册》里面涵盖了不少关于角色动画的运动技巧及细节。其中部分技巧并不局限于角色动画的设计中，下期文章我将分享关于角色动画的知识沉淀内容。

作者：Fiasc1         来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 

ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司