实战：如何设计移动端交互动效.doc

实战：如何设计移动端交互动效 论文类别：计算机?-?互联网研究上传时间：2014/8/27?12:33:00论文作者：未知 ? 　　(中讯)iOS7的发布带来了苹果历史上最大的一次设计风格的改变，强调依从于内容的扁平化UI、纤细的字体和鲜明的图标、带有纵深感的层次与动画表现构成了它的全新设计特点。撇开饱受争议的细节设计，静观iOS7，不难发现，许多让我们眼前一亮的瞬间，来自以下一些交互动效设计的创新点： 　　3D视差 　　3D视差(Parallax?Effect)是在用户倾斜和移动屏幕的时候，IOS主屏可以根据感应器数据，调整壁纸和图标的相对位置，产生一种三维空间上的景深效果。 　　拟真动态 　　将现实中的运动现象简化抽象，形成了iOS?7中一些蛮有特色的动画效果。天气应用中，全屏的气象动画优雅而逼真，洋洋洒洒的雪粒、悠然飘浮的云朵、划破天际的闪电传达出一种独特的表现力，赢得了发布会上的阵阵掌声。指南针工具中的水平仪动画，采用两个圆圈逐渐相合的过程生动地表现了水平校准的过程。iOS7中还增加了动态图标，时钟图标和设置图标还原了时针分针走动和齿轮转动的状态。 　　弹性 　　信息应用中，聊天气泡随着文字一起被丢上屏幕，当用户滚动屏幕，它们互相碰撞并产生挤压缓动。类似的，一打开Game?Center，六个鲜艳的泡泡富有节奏地弹出然后在与手指的交互过程中弹开消散。IOS7中的通知中心可以从锁屏界面激活，而激活过程中面板会与屏幕底部碰撞产生回弹效果。 　　缩放(Zoom)当用户解锁之后，图标以屏幕中心为轴渐次缩放每个图标，产生一种由远及近贴到主屏上的感觉，点击打开应用、打开分组均采用放大展开的形式，这里的缩放更多地体现了系统的空间感。 　　手指跟随 　　iOS7中跟随手势的动画很多，比如点击拨号键盘相应的按钮会变为半透明，右滑返回中当前页面的拖动效果，滑动解锁过程中的渐变动效，这些为我们带来了很强的操纵体验。 　　如果说之前在移动端交互设计中，动效可有可无，那IOS7的出现，可以说宣告了动效设计已经不容忽视。还记得在《iOS?Wow?Factor:Apps?and?UX?Design?Techniques?for?iPhone?and?iPad》一书中，探讨了如何创造卓越的IOS用户体验，提出了“令人惊叹”的设计要素这一概念，即那些给用户带来的体验感受可以达到其心中某个“情感阀值”的表现层元素。 　　而以下三方面因素将决定着产品带来的体验感受能否跨越用户心中的“情感阀值”： 　　1)符合直觉：保证设计能引导用户做出最符合直觉的操作； 　　2)差异化的创新特征：设计中要有显著的创新特征，即让用户感觉到某些不同寻常的产品体验； 　　3)积极响应：设计方案要以积极的姿态去缓解那些由于差异化导致的用户陌生感。 　　书中还提出，上述的三点推动因素主要在三个属性维度上得以体现： 　　1)界面外观：即基本的静态视觉元素； 　　2)交互方式：包括人机物理交互、手势以及其他常规的输入方式； 　　3)交互动效：包括哪些能够为产品赋予生机的动态的界面元素及视觉效果，这些交互效果通常与特定的响应行为相关，甚至包括那些与交互行为没有直接关联的临时状态。 　　在某一方面做到出类拔萃，产品就会让人印象深刻。对照iOS7的设计不难发现，Apple选择了交互动效这一方向进行着重，而这也让我们记住了iOS。翻看iOS7的HIG，文档中这样描述动效的作用“精细而恰当的动画效果可以传达状态、增强用户对于直接操纵的感知、通过视觉化的方式向用户呈现操作结果”。 　　在移动产品交互设计中，我们可以把动效的作用更深入地归结为以下几点： 　　1.流畅过渡 　　如果说界面布局可以组织UI元素的静态位置，那么动效可以组织UI元素在时间维度上的演进。每一个毫秒里界面元素如何出现和消失，它的大小、位置、透明度和颜色如何变化，通过动效的诠释，用户与产品的交互过程会更加顺畅。Appflow中，界面元素的出现，菜单的停靠，都伴随着富有节奏感的动画效果，让整个使用过程一气呵成。多米音乐中使用旋转的唱片来作为场景过渡之间的连接点，契合音乐应用的主题，也是转场过程连贯自然。 　　2.高效反馈 　　作为与用户之间发生联系的一个很重要的交互元素，良好的反馈设计可以让用户更好地了解到操作的结果与程序当前的状态，减轻用户在等待过程中的焦虑。与文字型的静态反馈相比，使用动效可以让反馈高效直观。iOS7的app?store中通过环状的进度圈来表现应用的下载过程，并将其与暂停按钮结合，让用户对进度一目了然，还可以便捷地暂停进程。 　　3.增强操纵 　　“直接操纵”是移动产品用户体验中很重要的一个概念，简单来说，它要求我们的产品与用户交互的方式尽量接近真实世界的互动方式。它要求交互对象的反应行为是可以预测的，不需要