<p>@十圆QCee：以前在团队内部做过一个关于 动效 的分享，当时，是从现实参照、功能性、品牌，等维度进行分析。这次为了更全面的了解界面 动效 ，我参考了5W2H分析法。5W2H又称七何分析法，分别是：What、Why、Who、When、Where、How、How much。</p>    <p><strong>WHAT</strong></p>    <p>什么是界面 动效 ？大家对其的理解大致是，用户界面上所有运动的效果，也可以视其为界面设计（UI design）与动态设计（motion design）的交集。</p>    <p>具体可以参考下图：The Disciplines of User Experience Design <a href="/misc/goto?guid=4959727229684897608" rel="nofollow,noindex"> </a></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/57e31e7c91da65ca5f02de05dc53eec1.png"></p>    <p>作为多学科交集的界面动效，其设计者可以交互，也可以是UI，甚至很多时候是前端开发直接完成的。而我碰到的很多比较完整的设计团队，专门招的 动效设计 师，除了做界面动效外，还会做与产品推广相关的motion graphic。</p>    <p>而我们所要讲解的界面动效（UI motion）区别于motion graphic 最大的差别，就是界面动效需要以用户体验与界面设计为大前提，来进行 动效设计 。所以下面很多观点也是基于此来进行说明的。</p>    <p>另一个值得注意的是，界面动效在设计师设计完成后，需要开发实现才能与用户见面。而不像MG动画，直接由设计师输出。</p>    <p><strong>WHY</strong></p>    <p>为什么需要界面动效？在我的理解里这是5W里最重要的一点。设计交流网站上有很多纯粹追求酷炫，或为了动起来而做的动效。他们如果只是为了展示设计技术，或者博得关注自然无妨。但是，界面动效毕竟要在真实产品中展示的，其目的自然需要符合产品的整体诉求。这里的目的，我总结了两方面：</p>    <p>1，保证产品的流畅体验。产品只要跟用户有互动，就会有状态的变化，而绝大多数的变化都是由界面视觉展示的。这时，界面上的状态变化，是否有过渡，过渡的是否流畅，就直接的影响着用户的感受。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/f8d4e3ea7ef0dd78836c3e86c83bd7a6.gif"></p>    <p>2.传递产品信息。动效其实跟交互，跟UI一样，都是传递产品信息的一种渠道。而这里的信息会有很多可能，可以是：趋势、来源、去向、结构、情感、属性，等。运用合理的动效传递信息，能大大增强产品的表现力，同时也能减少用户的理解成本。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/6367d1fd7f226d0254a38fe2a4c6fd49.gif"></p>    <p><strong>WHO</strong></p>    <p>这里的Who，不是指的人，而是表示的动效的对象。这个对象又是一个或多个界面元素组成。单个元素，大家比较好理解。多个元素的动效，除了表现元素属性变化以外，还会将这些元素之前的关系传递出来：譬如：主次、联动、并列先后、因果，等。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/97a13cad2d09c86a704e4872f0ad90ce.gif"></p>    <p><strong>WHEN</strong></p>    <p>使用动效的时机，对于动效来说，是非常基础的存在。用的好或不好，直接决定用户体验的感受。首先是实时性，动效作为人机交互反馈过程中的重要表现方式，必须做到快速，明确的表达当前的状态。这就类似，你跟人交谈，对方对你所说，完全没有回应，无动于衷。这会让你感到不确定，不认同甚至是疏远。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/339354fd680f61a7fbd4639cfe9ae3af.gif"></p>    <p>其次是动效过载，动效与界面视觉一样，当出现大量过于复杂或者重复的效果时，都会让人视觉疲劳，抓不住要点。而且动态的画面会让这种感受更加强烈。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/8cbc696f19e07a4be67f93efbdf3d859.jpg"></p>    <p><strong>WHERE</strong></p>    <p>动效用在哪里？根据“WHY”里所说，所有的元素只要状态发生变化，就可以用动效来过渡。那么这些位置都把动效用起来就可以了吗？然而事实是，很多时候动效并不是产品设计的必选项，其对可用性几乎没有影响，对于易用性有一定的影响。所以，资源有限的团队把动效的优先级放到很靠后的位置。那么，有没有哪儿的动效是必须的？哪儿的动效优先级比较高呢？同样可以从“WHY”中的两点目的来入手。</p>    <p>首先，是流畅度。其影响因素主要是，画面切换时变化太大，视觉的割裂让用户产出跳脱感。所以，当状态变化前后差异很大时，如：元素大小、颜色、明暗、位置等，就需要做适当的过渡来改善这种割裂感。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/615fb7579b52f27b713634950898ab5b.gif"></p>    <p>另一个，是信息传递，功能说明。动效是产品信息传递的方式之一，除此还有：文字，图形、音效，音频，视频等。在信息传递过程中，动效的是否必要取决于信息本身的重要性，以及动效是否比其他传递方式更高效。最常见的例子就是上文多次提到的加载，不管是文字，还是图形，都很难达到类似“转菊花”动效的诠释效率。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/3953e01e5eed1274635bf58d1875df46.gif"></p>    <p><strong>HOW</strong></p>    <p>终于来到了HOW，之前的5W大家大致知道了界面动效的目的和使用尺度，都是相对基础的。接下来的HOW会讲它的运动过程该如何表现。这个过程在设计时，需要具备两大特征：自然、统一。</p>    <p>先说自然，在宏观物理世界（人类可观测）的所有的运动，都是符合经典物理定律的，它反映的是运动相关对象的质量、密度、质地、阻力，等。然后这些运动又是通过物体状态、时间、缓动，等让我们感受到周围的世界。动效的不自然感受，也就是源自运动方式并不是人们日常生活中常观察到的，大家无法从运动想象其背后的物体属性及关系。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/7c545c2485c00e9a995c8c6ebeb49989.gif"></p>    <p>在界面动效中来表现自然，我们主要通过形变、运动时间及缓动曲线来体现。形变表现的是运动对象自身的质地，而运动时间及缓动曲线则是表现运动对象周围的环境。</p>    <p>至于，如何设置缓动曲线与时间让动效更加自然，可以看下面的一些总结，或许有些帮助。</p>    <p>1.linear曲线（匀速运动）除了一些特殊场景如加载、星空背景外，很少被使用。</p>    <p>2.easeIn（先缓后快）使用场景较少，主要在掉落、toWhere的动画中使用。</p>    <p>3.easeInOut（头尾缓、中间快）通常在轮转切换的动画中使用（One Out One In），这类动画的触发对象与运动对象并不是同一个元素。</p>    <p>4.easeOut（先快后缓）最常见的效果，其触发对象与运动对象往往是同一个。主要用在展开、收起、出现、移动等动画中。当不知道用哪个缓动曲线时，用这个一般不会错。</p>    <p>5.曲度主要表现运动过程的力的大小，曲度越大，启示力或阻力越大。</p>    <p>6.回弹则表现的是运动的剧烈程度及对象的质地。</p>    <p>7.运动时间一般都控制在0.3s-0.8s之间，过长的时间会让人感觉拖沓，不自然。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/5a4c1a514b8f108d9848ca1b12853625.gif"></p>    <p>统一，是界面动效需要具备的除自然外另一个重要指标。表现主要包括空间与环境质地这两方面。同时，整个产品设计的品牌特性也需要通过统一才能得以体现。</p>    <p>动效的空间表意需要我们构建一个由页面与元素组成的虚拟空间关系，以此来表达各元素的结构关系及功能。</p>    <p>环境质地在动效中主要需要通过缓动曲线、元素形变等来实现。他们与界面视觉所表现出的环境质地也需要统一。举个简单的例子，一个金属质感的控件，动效出现弹性形变，肯定是不合适的。</p>    <p>品牌特性的提炼。好的产品在设计之初都会基于自身的特色、目标人群及竞品等，确立自身的品牌特性。这些特性又需要具备可认知、有价值、特有性、长期性、规律性的特征。简单说就是界面元素、交互行为以及动效的符号化。让这些符号在产品中反复出现，加深用户的认知记忆。随着现在技术的提升，通过动效表达品牌特质的案例月来越多。</p>    <p>iOS的品牌特性透过三大设计原则来体现：Deference（遵从）、Clarity（清晰）、Depth（深度）。其中的深度完整的表述是Use Depth to Communicate（有层次的表达）。这正是在空间表意这个场景中，iOS找了深度这种方式来作为其设计原则。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/8580b97f5f70c08159b2d1b52ba00ee2.gif"></p>    <p>Android的品牌特性表现在其最新的设计语言Material design中。其核心观点Material is the metaphor（材料的隐喻）所讲的就是将不同的物品属性按照不同的场景赋予到界面元素中，让用户有亲切的感受。Andriod挖掘品牌特质的场景，恰恰是通过动效来表现的元素质地。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/5f5a4b384f4ea123a23345640930ca77.gif"></p>    <p>综上，界面动效需要具备自然和统一这两点。结合前面所提到的流畅、信息说明、对象关系、实时性、防止过载、必要性，等几个方面，我们可以对界面动效该如何呈现，有大致的了解。而关于动效如何实现，平时如何提高 动效设计 的能力，动效设计时有哪些技巧等，后续看时间，可以继续补充。</p>    <p>HOW MUCH</p>    <p>最后，我们要讲下界面动效的投入产出比，也就是性价比的问题。在Where我们提到，动效并不是产品界面设计中必不可少的部分，产品规划也往往会把其放到优先级比较低的位置，最关键的是，你设计出来动效，要在用户面前展现，实现其价值，需要通过前端编码这一必不可少的环节。很多设计同学会为此郁闷和纠结，我们不妨对比下不同状况下界面动效的投入与产出，看看如何处理更为合理。</p>    <p>我们先看下界面动效的成本，这里的成本主要的就是设计与开发的时间。动效的难易度与动效 使用的多少直接决定了所需的时间。</p>    <p>难易程度方面，较常见的大小、位移、旋转、透明度等的变化，是最常见的属性，实现起来也是比较方便的。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/dc4d5e69fb5314cc6e77eb28cab57e7c.gif"></p>    <p>非常见属性的动画类型，如：SVG路径动画，滤镜动画，特效动画等，对于一般开发人员还是有一定成本的。首先，你要将你要的效果准确的表述给开发人员。同时，他们还要查阅相关的案例，来实现方案并优化性能。这时作为一个设计者要做的，除了做动效demo外，还要将相关的属性及变化信息告诉开发人员，最好还能提供类似案例的源码。很多设计同学会觉得，没有必要，觉得将动效demo做出来就ok了。但是，在实际工作中，你做的动效，开发需要分解，反编译，同时量化后再以其代码表现出来。这个过程很容易产生彼此认知的偏差，然后开发产出的不是你想要的，你是让他改呢？还是改呢？改呢…所以，动画信息的量化表述，可以减少很多“我认为”的空间，同时提供案例源码，可以给开发提供参考，以免被一句“没法实现”给打发回来。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/1aae5d971f792d18df626d552208b8af.png"></p>    <p>关于动效的量，在“where”中有提到，界面动效如果做足做全，将是相对巨大的工作量。面对这样的成本，我们要怎样解决呢？答案是，规范与组件化。在前期设计时，与产品充分讨论，考虑组控件各种使用场景，制定相应的规范；同时，前端以组件化的方式开发，类似的效果只写一次，其他都通过组件复用。当然，要做到这些，需要各岗位的同学有很强的专业能力，同时团队的沟通协作又很顺畅。而对于，资源紧张，业务变化大的团队，产品中动效的运用就需要收敛在必要的环节上了。</p>    <p>说完成本，我们看看动效的产出价值。前面说了很多，包括：信息表述的功能价值以及流畅，自然，品牌这些体验价值，这里就不再赘述。我们说说动效的场景价值。</p>    <p>首先是业务场景。在不同业务场景下，对动效的需求是不同的。譬如，一个后台产品和一个前台产品，前台产品会更注重体验的顺畅性，后台产品更强调产品的稳定性（只是相对来说，在同质化严重的情况下也越来越强调体验）。所以前台的产品更需要通过动效来打差异，增加自身的附加值。</p>    <p>同时，不同功能场景下，动效也发挥着不同程度的价值。产品介绍页，往往会通过动效强化品牌质感，如苹果的新品介绍页。活动页，则会用动效来强化活动氛围。互动传播页面，动效除了渲染氛围，同时还有讲故事的作用。因为在这些页面里体验、设计、动效相对于产品功能，更能吸引用户关注，价值也被放的更大。</p>    <p>在不同平台场景下，动效会受到不同的技术限制。最常见的就是通过Native与H5来实现动效，性能和展现效果都会有所差异。一般来说，动效在系统层优于应用层优于web层。当然这里面的差距会随时间越来越小，现在很多简单的动效已经可以做到无差异了。</p>    <p>最后，将上述的相关内容整理了一张图片，如果不足之处欢迎大家补充。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/70344607ed22acb4817ac88852ab981c.png"></p>    <p>来自：http://www.uisdc.com/5w2h-animation-analysis-methods</p>    <p> </p>