动态设计，让交互更顺畅

魔幻陀螺

Sharing移动互联网的时代，随着越来越多的服务和功能搬进了狭小的屏幕，如何让操作更简单，让体验更符合直觉，是设计师们一直以来努力的方向。而动态设计作为起源于影视动画行业的概念，如今不只在内容创作行业大放异彩，在人机交互领域也日益发挥出重要的作用。本文从动态设计的角度，分析了影响动态感受的几个关键因素，希望通过对动画基本原理的描述和拆解，帮助大家理解自然顺畅的动态设计的必要条件，在之后的用户体验设计中助大家一臂之力。本期提纲：1.动态设计在交互中的作用•解释页面之间的关系•凸显重要的信息• 让互动更加生动有温度2.如何做出自然顺畅的动态设计•弹性•缓动• 预备动作• 补充细节3. 总结大家在使用软件的时候，有没有遇到过诸如找不到某个功能的入口、满屏的按钮不知道该点哪一个、在页面间跳来跳去以至于忘记怎么回去的情况？从一个按钮进入一个页面，再通过另一个按钮进入另一个页面，由于有限的屏幕面积无法让所有页面平铺在眼前，用户只能通过频繁跳转来切换不同的功能，跳转的越多，就越容易迷失，这时候我们可以使用动态设计，来帮助用户对其进行快速准确的定位。1动态设计在交互中的作用1.通过动态设计来解释页面之间的关系在iOS中，点击app图标时，新的页面会从图标的位置打开，回到桌面时，页面也会收起至图标的位置，通过图标和页面之间的动态连接，用户可以更清晰的看到页面从哪里出现和关闭，使视图的切换所带来的理解成本最小。▲视图切换动态这个从iOS7开始出现的特性，如今已成为各家手机系统的标配。多任务的操作也有类似的功能，手指上推展示出当前页面和其他页面的位置关系，方便用户进行定位。▲多任务动态仔细观察的话，会注意到后层的各个页面在滑入视图时存在细微的时间差，这种基于物理的延迟感，带来了更真实的层级关系感受。当我们需要表现元素间的层级关系以及位置信息时，可以通过动态设计对系统进行解释，让人理解动作的前后发生了什么，以此降低用户的理解成本。2.通过动态设计让重要信息凸显出来文字、、视频，屏幕承载的内容丰富多样，当多个信息同时存在，用户的注意力就容易被分散，这个时候除了让元素更大更鲜艳之外，让元素动起来也是个常用的手段。因为人对运动的物体更敏感，让物体动起来可以使信息更明显。▲动态凸显信息不过，动画的使用要有度，过多的动画会干扰视线，要动静结合，切勿滥用。3.让互动更加生动有温度生命力的塑造除了可以通过某个具体的卡通形象之外，给抽象元素赋予生物体的行为特征也是一个好方法。相信大家都对苹果设备的密码框抖动印象深刻，当用户输错密码时，密码框会摇摇头，然后清空输入，全程不需要文字提示就达成了目标，既符合直觉，又让设备仿佛有了生命，使操作变得美而简单。▲输入密码错误时的动态由此，我们可以看到，动态设计可以降低用户的理解成本，提升软件的易用性，以及增加亲和力。“道理我都懂，但做出来的动画总感觉很生硬”。很多初上手的设计师都会遇到动画不流畅的问题，这通常是因为元素的运动并没有遵循自然界的运动规律。2如何做出优秀的动态设计？“从自然界中学习”。当软件中的虚拟对象和动作是来自真实世界的映射时，人们会更快地理解。小球弹起，烟花绽放，秋叶落下……大自然纷繁复杂，但表象之下其实都遵循着最基本的运动本质——力，以及力的转化。1.弹性自然界中没有绝对硬的物体，物体在受力的时候通常会有不同程度的挤压和拉伸。拿小球动画举例：▲小球弹性动态小球在碰到地面的时候会压扁，落下前和弹起后会拉伸。▲动作拆解通过不同程度的挤压和拉伸，我们可以模拟出物体的软硬质感，为不同的元素赋予符合其特质的真实感受。2.缓动由于重力和摩擦力的存在，生活中几乎没有绝对的匀速运动，物体的移动通常是先加速再减速的过程。▲小球缓动动态在上面的例子中，小球左右移动的速度变化是一个S型曲线，先平缓，再陡峭，再平缓。▲缓动曲线需要注意的是衔接在一起的动画应该作为一个整体来看，加强力的连贯性：▲缓动衔接上面的演示中，绿色小球的放大和白色方块的出现是衔接在一起的，我们可以将其作为一个整体来处理，小球加速运动，方块减速运动。▲缓动衔接曲线如果分开独立调整，中间将会出现没有必要的停顿，让整体的节奏显得拖沓：▲ 衔接不连贯的效果在微信的直播礼物中，火箭动画就使用了缓动衔接的技巧：▲微信直播礼物中的火箭动画火箭升空时是加速运动，烟花炸开后是减速运动，这样整体处理能够减弱动态与动态之间的割裂感，让节奏更顺畅。3.预备动作能量是守恒的，“发力”之前要先“蓄力”。棒球投手在投球之前，胳膊会先往后扬，人在跳起前需要先往下蹲，这种发力之前先往反方向运动的行为，在动画中被称为“预备动作”。比如下面的小球，在撞击白色方块之前先往左回撤了一下：▲预备动作如果把回撤取消：▲ 取消预备动作的效果小球的发力则显得很虚，打击感变弱了。预备动作不只可以让发力更真实，同时还能让人提前注意到主体的变化，起到引导视线的作用。需要注意的是，只有当物体主动发力的时候才会使用预备动作，被动受力时则不需要。依旧是小球跳动的例子，和之前不同的是，我们在它跳起前加上一个“往下压” 的预备动作，就会有种它自己在奋力跳起的感觉：▲小球预备动作▲预备动作拆解在微信8.0版本的更新中，黄脸表情全都动了起来，其中也不乏预备动作的应用：▲微信8.0版本黄脸动态“加油”的表情在向下用力之前先向上仰起，“点赞”的手在竖起大拇指之前先向下蓄力，“敲打”的平底锅也是先向上再下落，这些预备动作都让力度更真实，情绪更饱满。4.补充细节细节是影响真实感的重要因素，用眼睛来举例，如果做一个眼睛左右看的动态，很多人凭直觉可能会这么处理：▲左右看乍一看好像没什么不对，但能感觉到有一丝机械，不够生动。这是因为我们的眼睛在转移视线的时候，通常会在中间进行一次无意识的眨眼，来帮助我们的视线重新定位。加上眨眼之后：▲左右看加眨眼是不是自然多了？容当我们觉得动态不自然，很有可能是忽略了重要的细节，日常保持多观察的习惯，必要的时候亲自实践。如果我们以自然界中的运动作为参照，强调弹性、缓动、预备动作，以及落实必要的细节，便能帮我们做出视觉感受顺畅的动态设计。3总结随着科技的发展，人们与设备和软件的互动正变得频繁和深入，希望这篇关于动态设计的文章，能够帮助大家做出更好的产品和内容，让信息的传递更有效率，也让沟通和互动更有温度，给用户带来出色的综合体验。—  Theend  —参考文献：➊《迪士尼动画原则》OllieJohnston/FrankThomas➋ MaterialDesign-Google➌人机界面准则-AppleDeveloper作者：Barry尽精微，致广大