『 写在之前 』

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

文章分为两个部分：

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咨询、用户体验公司、软件界面设计公司