时间: 2021-07-30 10:40:31 人气: 23 评论: 0
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用户体验，提出了“令人惊叹”的设计要素这一概念，即那些给用户带来的体验感受可以达到其心中某个“情感阀值”的表现层元素。而以下三方面因素将决定着产品带来的体验感受能否跨越用户心中的“情感阀值”：
书中还提出，上述的三点推动因素主要在三个属性维度上得以体现：
在某一方面做到出类拔萃，产品就**让人印象深刻。对照iOS7的设计不难发现，Apple选择了交互动效这一方向进行着重，而这也让我们记住了iOS。 翻看iOS7的HIG，文档中这样描述动效的作用“精细而恰当的动画效果可以传达状态、增强用户对于直接操纵的感知、通过视觉化的方式向用户呈现操作结果”。 在移动产品交互设计中，我们可以把动效的作用更深入地归结为以下几点：
1.流畅过渡
2.高效反馈
作为与用户之间发生联系的一个很重要的交互元素，良好的反馈设计可以让用户更好地了解到操作的结果与程序当前的状态，减轻用户在等待过程中的焦虑。与文字型的静态反馈相比，使用动效可以让反馈高效直观。iOS7的app store中通过环状的进度圈来表现应用的下载过程，并将其与暂停按钮结合，让用户对进度一目了然，还可以便捷地暂停进程。
3. 增强操纵
“直接操纵”是移动产品用户体验中很重要的一个概念，简单来说，它要求我们的产品与用户交互的方式尽量接近真实世界的互动方式。它要求交互对象的反应行为是可以预测的，不需要任何提示，并且符合我们对于现实世界规律的认知。这就要求我们拉近界面操作与用户的距离，让用户难以发现虚拟的交互对象与现实的操作行为之间的屏障，很多令人新奇和兴奋的设计点都来源于此。通过交互动效对于现实世界的模拟，我们可以显著地增强产品的“直接操纵”特性。以Paper App为例，使用过它的同学都**被它精致的交互动画所吸引。轻轻翻动绘图本，打开一页开始绘画，栩栩如生的体验让你即使初次使用也能很快投入。
4. 帮助引导
由于移动界面的空间非常有限，我们经常要藏起一部分功能，同时手势操作也是移动应用中很常见的交互元素。我们要怎么样让用户发现隐藏的功能，告诉他们怎么使用手势呢？这个时候，动效作为一种生动的表现形式，往往可以起到很好的帮助引导效果。iOS7中锁屏界面滑动解锁的提示**显示一种从左到右的渐变效果，用户可以根据这种运动方向去预知手势的方向。在打开read it！的时候，**短暂显示左侧的菜单，然后右边的主内容区域划过来逐渐覆盖，直到左侧只剩下图标作为入口，这帮助用户了解了侧边栏所隐藏的功能。
5. 升华体验
如果你的产品已经拥有了良好的可用性，却缺乏亮点，也许你可以考虑为其增加动效。将动效融入产品之中，往往带来更愉悦地使用体验，也更细腻地表达应用的情绪和气质。具有一致性的标志动效，常常帮助产品在细节中流露出独有的品牌特性，增加产品的魅力值。
我们可以发现，交互动效的设计既在产品的功能层面提供支持，又在表现层面发挥影响，而且在移动产品的交互设计中，它确实很有实用价值。那么，要怎么做才能更好地为我们的产品设计交互动效呢？在这里，总结出以下一些设计要关注的点：
作为移动端的交互设计师，我们云阅读设计组也一直在思考怎么用动效来丰富自己的产品。但是在日常交互设计工作中进行动效设计时，我们常常**遇到以下的一些问题：第一，对于动效的相关素材搜集有一定的难度，且缺乏管理，这导致设计的时候缺乏灵感来源，无法借鉴常见的动效，也不利于整体把握当前的动效设计趋势；第二，动效设计很难在传统的交互文档中进行表述，以前总是由设计师拿类似的应用去和开发沟通，不够规范；第三， 程序员开发的过程中也期待有一个常用界面动画效果的代码库，可以作为开发时的参考。
“交互动效库”就是我们对解决上述问题制作的一款工具。设计师们可以把自己平时看到的应用中出现的动效，录制成短视频并上传，通过简短的相关说明填写，就可以在网站上相应页面呈现刚上传的动效视频。在设计项目中遇到需要动效参考的时候可以去网站上寻找灵感，找到合适的，可以把动效视频的网页地址直接黏贴在交互稿上，加上简单的说明，就可以让开发同学直观了解要做的效果。开发所搜集的常见效果的代码也可以上传入动效库，在该动效视频的页面上可直接下载代码。
在此分享下记录动效的两个比较好的工具：
Mac系统下
AirServer: 同步移动设备屏幕到电脑 http://www.airserver.com
screenflow: 录屏软件 http://www.telestream.net/screenflow/overview.htm
Win系统下
Reflection:同步移动设备屏幕到电脑 http://www.reflectionapp.com/
FastStone Capture：录屏软件 http://www.itopdog.cn/graphic-image/image-capture/fscapture.html
第二个方面，主要是功能实现上的问题，要研究一种技术代价比较小的解决方案，实用为先。我们选择了HTML5的视频组件去呈现动效记录，因为它比较轻量，在集中总览的瀑布流页面，和详情页面都可以便捷地播放视频。对动效视频数据的管理，我们没有搭建数据库，而是在每一个目录下设置了一个JS文件存放记录视频信息的数组，再通过全局JS在加载每个页面的时候去读取相应目录下的这个JavaScript数组将相关文件加载进来。设计师在将自己搜集的视频放到相应目录下后，为该目录下的JS文件，添加相关数组记录，即可以把自己上传的视频添加到动效库的网站上。
在具体的云阅读新版本的交互设计中，我们利用交互动效库来说明和解释相关的动效设计。交互动效库对推动动效设计落实到具体产品中，起到一定的作用。它虽然还很不完善，但是对于有限的资源下小团队如何创建自己的设计工具库，我们提出一个解决问题的思路，希望也能给大家带来启发。
总结对移动端动效的相关研究，还存在这以下一些值得深入探究的点：
1. 动效创意方面的创新。如今国内的交互动效设计大多数还停留在使用国外已经出现的设计，很少有独创性的动效设计出现，如何去设计动效也缺乏相关的指导。
2．表达动效设计的Demo方法。如何更好地高效地表现我们设计的动效，对AE、Flash等软件呈现动画效果原型的实践**是比较有实用价值的一个方向。
3. 关于移动端界面交互技术方面的学习研究。在网页设计领域，有不少设计师对前端技术已经有了一定的了解。但是在移动设计领域，学习界面和交互效果如何用代码实现还没有受到设计师们的广泛重视。但我们认为这是很重要的一步，如果你了解了技术实现层面的知识，很多设计阻碍就**消除，创意更容易得到发挥也更容易在产品中落实。这**有点难，但也许真正的设计推动力来源于此。
最后，想把2013 WWDC上的开场写在这次分享的结尾。“如果每个人都在忙于完成设计，那么谁来完善产品？我们曾经对为方便而设计还是为愉悦而设计感到困惑。当决定要设计一个大家所真正需要的产品时，我们开始面对许多选择，而帮助我们专注的，是最初提出的一个问题:我们希望自己的产品带给用户什么样的感受？快乐、惊喜、爱、联系。抱持这样的初心，我们开始精益求精地创造，每一次肯定背后都是上千次的否定。我们简化、我们不断优化，然后推倒重来，直到确信让我们感动的设计可以让每一个用户的生活更美好。现在我们做到了，它真正触动人心。”透过这段文字，我们可以感受到苹果所坚持的一种精神：专注于用户情感，对体验精益求精。或许，这就是苹果的产品**让我们记住的原因，也是体验设计由优秀迈向卓越的秘诀。
来源：网易uedc
