移动界面动效设计的全方位科普指南.doc

《移动界面动效设计的全方位科普指南.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、移动界面动效设计的全方位科普指南　　读了这篇文章，你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等，特别全面，强烈推荐收藏学习。　　　　动效在用户体验设计中正变得越来越重要，那么动效能带来什么好处呢？体现交互层级：动态界面使人更容易理解交互层级关系，减轻了人们的认知负担给予反馈：给人感觉界面是活的，让体验流畅弥补静态页面的表达不足：在内容优先的设计趋势下，用户界面变的更加简洁。这将给用户带来操作上的盲目感；动效则可以在不打破界面美感的前提下，弥补认知的损失　　原则　　设计是为了解决问题，

2、动效设计作为设计的手段之一，能解决一些静态界面设计无法解决的问题。但是，它并不是万能的，动效要克制，过多、过慢或不适合的动效，只能让界面失去重点，让团队和用户怨声载道。　　在实际项目中应用的动效，只有精准地对齐需求，才能使动效带来真正应有的价值。那么，如何评估一个动效是否有价值呢？动效是否必要动效是否带来体验提升动效开发的成本是否过高　　如果都没有问题，送给工程师一个飞吻吧。　　动效工具　　AdobeAfterEffect　　视频特效软件，被普遍使用的动效和MG制作软件，功能强大，和其他Adobe软件无

3、缝配合，可做的效果也是不限量的。　　QuartzComposer+OrigamiStudio　　Apple的可视化编程软件，搭配Facebook的Origami可以非常好的模拟机器效果，做单页面的动效可以用它，Origami还可以导出直接可实施的代码。　　Hype3　　可交互的Demo，虽然是HTML5制作工具，但是做动效也算是一只［好猫］吧。　　其他的还有原型工具Framer、Pixate、Form等和QuartzCode、PaintCode也都可以用来做动效。具体工作时候可以选用适合的来做，目前还没

4、有一站式解决的软件出现。　　数值化动效　　只谈制作动效，不谈实现都是耍流氓，动效设计师同样需要为动效标注。　　常规的值包括：属性：移动距离旋转角度时间：运动持续时间延迟出现时间重复时间曲线Android：插值器曲线iOS：运动曲线自定义曲线　　　　动效标注模版，包括常用动作、曲线、表格。Sketch格式，Sketch的快速、矢量特性也非常适合进行动效标注。　　动效标注技巧　　　　有些运动需要分解成多种值标注。比如MaterialDesign里面的「重力运动」　　设计师的思维是Position到Posit

5、ion的弧线运动，但实现时并没有运动轨迹的开发方式。　　那么如何表述这个运动轨迹呢？　　两种方法　　时间错位：　　　　延迟单个值的时间（真实运动曲线为绿色虚线略有夸张）　　不同曲线：　　　　两个值持续时间相同，但应用的曲线不同　　曲线/插值器　　刚才提到了曲线是什么呢？　　在Android系统内，调用系统内置曲线插值器，改变动画的播放速率，可以实现大部分动态速率的效果。　　　　图为Android插值器　　自定义曲线　　插值器默认的速率无法完全符合需求时，还需要给它进行数值调整。　　调整Factor的值，

6、就可以快速改变速率：　　　　当然，你也可以尝试使用自定义的去曲线，将曲线换算成二次贝塞尔曲线，可以直接用于开发。　　如下图，为cubic-bezier(.82,.25,.29,.78)　　　　Android和iOS都支持二次贝塞尔和三次贝赛尔曲线。　　交互与动效　　动效和交互联系很紧密，这也要求动效是先于视觉考虑的。　　　　如上图，在内容优先的设计中常用的共享元素样式，从交互层面就需要对动效有一定的规划，否则会遇到动效很牵强或视觉返工的情况。　　动画与动效　　动效不同于动画，动效常发生在过场或操作之后，

7、有趋向于表现更快的倾向。动画中看上去恰到好处的运动时间，直接套用在动效中应用会显得拖沓沉冗效率不高。显然，简单粗暴的把动画中的时间直接应用在动效中，是不合适的。　　在MaterialDesignMotion中，对动效时间有比较详细的定义，对各种设备的动画时间都有推荐，实际应用时还需要考虑元素变化的范围，给出合适的时间。　　虽然Android动效已经支持60fps的速度，但是在实际应用中，有时运动不够平滑*确实存在，甚至为了达到理想效果，要同之前标注时间相差很大。这时，可能需要对部分标注时间进行修改，不过

8、我一般会遵循一个原则：尽量保持时间之间的比例，倾向相信模拟中的时间。因为机器的个体差异导致的问题很难被量化。当然，解决这种问题，需要工程师和设计师的通力配合。　　项目中的动效　　就好像工业设计师需要懂材料、平面设计师需要了解印刷知识，动效设计同样需要设计师具有「跨专业」的视野。　　在iOS和Android上，系统其实已经帮你完成了不少工作，很多常见的、被经常使用的动效，可能已经有做好的「轮子」，这些「轮子」往往经过多次验证，效果和性能都说的