《移动用户体验设计新要素》由会员分享，可在线阅读，更多相关《移动用户体验设计新要素（25页珍藏版）》请在金锄头文库上搜索。
1、 沈阳网站建设 http:/无论是在一系列草图间快速切换，还是屏幕与屏幕之间的切换，或者其它类似场景，想要在这些场景切换中加入动效进行完美过渡，并不是一件容易的事情。这是一门需要耐心的艺术，需要用眼睛仔细的观察 ，人和物体如何在时间和空间两个维度中运动与变化。这种非常巧妙的动效和动画，正在慢慢成为一种新的、有意思的移动体验设计要素。并值得用户体验从业者去学习，最终学会如何有效率和优雅的使用在自己的设计中。好的动效和过场动画可以传达给用户更加清晰的当前所处场景和层级关系，甚至带给用户一种愉悦和有趣的感受。然而，过多的或者太夸张的动效，则可能毁掉一个完美的移动用户体验。所以想要巧妙的并且艺术的在设
2、计中运用动效的第一步就是要理解动画艺术的原则和原理。谈到对动画艺术理解，可以说没有人比在沃尔特-迪斯尼工作的两位杰出的动画师 Ollie Johnston 和 Frank Thomas 理解的更加深刻。幸运的是，这两位动画师把在迪斯尼动画制作过程中的总结出来的动画的法则写成了一本书，分享给大家 The illusion of life Disney Animation。读到这里你可能想知道到在移动用户体验设计中动画需要扮演什么角色。虽然动画艺术的起源是在电影和电视行业，但从一开始动画艺术就在电脑和数字媒体艺术领域中体现了重大的价值，而现在移动设备中也开始运用动画和动效。不论是屏幕与屏幕之间的过
3、渡，还是 UI 元素与手势进行交互，动画和动效都已经成为移动设备界面设计的重要元素。设计师可以用动效引导用户沿着自己设计出来的体验路径进行操作。还是从那两位动画大师说起，后文会从他们出版的书 The illusion of life Disney Animation中摘抄一部分来解释动画的 12 条基本原则。尽管这本书主要阐述的是电影和电视领域的动画， 沈阳网站建设 http:/但这些基本原理在当今的移动设备上仍然适用。如果能够把动效精巧的运用在移动设备界面上，不仅能够提升移动设备用户体验，甚至会让用户感受到一点点梦幻的感觉。The illusion of Life: Disney Anima
4、tion描述了动画的 12 条基本原则下面书中描述动画的 12 条基本原则挤压和拉伸预期展现连贯动作法和关键动作法重复与循环动作慢入和慢出弧度次要运动时机夸张 沈阳网站建设 http:/可靠的草图感染力动画 12 条基本原则原则 1. 挤压和拉伸人和物体都有其固有的质量。 当物体移动时，其移动时的状态往往反映了物体的刚性。在真实世界中的物体，比如说书架和木椅，属于刚性比较强，灵活性比较大。而柔软的曲面，像衣服和树叶等物体，则刚性比较差，但有更好的灵活性。挤压和拉伸这条动画法则就用来精确的表现一个物体的刚性如何。像一个盛满水的气球有有机和柔软曲面的物体，就在其外形上就有一定程度的灵活性。挤压和拉
5、伸这一动画原则就恰好能描述这种状态。 沈阳网站建设 http:/ 沈阳网站建设 http:/上图是用 Flipboard 和 iBooks 作了一个对比，Flipboard 表现出的在 UI 元素是坚硬的像木板似的。与此相反，iBooks 的界面的过渡则用挤压和拉伸原则表现了像真实世界书本翻页的那种柔软的效果原则 2. 预期当我们试图描述一个物体或者人物运动的状态时，为了让这个运动显得更加真实，有三个独立的阶段需要去考虑：在运动发生前的准备阶段运动过程本身运动产生的结果比如说，一个棒球击球手在击球前准备阶段会把身体弓起来的状态，一个弹簧压缩后弹起前的那个状态。预期这个原则就是描述物体运动前的准
6、备状态，就像是精心策划一个舞台剧场景灯光 、布局、道具和人物的组成等，这一切就是为了给用户一个线索什么即将发生。一个保龄球手扔出球之前蹲下的状态，这个姿势和动作就是预期原则所应用的一个最好的例证 沈阳网站建设 http:/预期原则在移动用户体验领域中同样适用。预期原则就是让用户有一种预感即将发生什么。举例来说，这个原则可以运用在“闪屏”界面的视觉设计中，也可以用在不同体验的过渡中，还可以用来帮助增加手势的可见性。总得来说，预期可以为元素在界面中将要运动的速度和方向还有哪些手势可以使用提供线索。这个光圈的动画在很多智能手机中的 camera 应用中被使用，它描述了用户在进行拍照前准备的那个阶段。
7、 沈阳网站建设 http:/这个 Palm 的卡片流的 UI 设计给了用户关于手势运用的可见性 沈阳网站建设 http:/这个 windows phone 7 锁屏跳动的动画也是用了预期原则，让用户可以提前瞥一眼windows phone 7 动感的瓦片 UI 设计原则 3. 展现 沈阳网站建设 http:/比较善于卖房的的房产经济经常按照一个流程去“展现”各个房间，为的就是让各个房间的使用展现的非常清楚。展现原则在动画里的功能和房产经纪人非常相似，好的展现方式可以让观看动画的人清楚的理解动画想要说明的中心思想。在移动用户体验领域里，在界面过渡和切换时，展现这个原则至关重要。好的交互方式会把高
8、亮，颜色，布局和动效精确的展现并传达到用户的眼中。该原则应用合理的会让移动设备用户感受到流畅和舒适，该原则应用不合理会让用户感觉到杂乱和脱节。右边这个展现的比较好，清楚的表达出两个人物在进行着对话和讨论。而左边这个展现的比较差，没有描述出两个人物之间的动态，让所要表达的中心思想不明确。在移动用户体验设计中使用动画和动效时，如何去展现是一个难以描述但又非常重要的要素。在创造 natural user interface 过程中最大的挑战就是缺少一个概念上的起始点。因此很多新接触 natural UI 的用户在体验触屏导航体验时，总是感觉到没有一个稳定的起始点。如果能在移动用户体验设计中把动画和动
9、效合理的展现出来，用户就能够清楚的理解整个界面并愿意与其发生交互。 沈阳网站建设 http:/举例来说，Keynote 的 iPad 版本动效的展现就比较合理，用户可以清晰的感觉到哪个文件正在编辑,所编辑的文件在所有文件中处在哪个层级。这种动效，让用户可以更清楚感受到当前所处位置并更好的理解整个 UI 界面原则 4 连贯动作法和关键动作法在动画草图绘制过程中经常使用连贯动作法和关键动作法。为了抓取非常快速且不规则的运动，动画师经常使用连贯动作法把整个运动过程中每一帧都抓取出来。而关键动作发则用动作的关键帧和关键帧之间的补间帧来描绘整个运动的过程。上面这幅插图描述了连贯动作的草图绘制方法，而下面
10、这幅则描述关键动作草图绘制方法大部分移动端用到的动画和动效都可以用关键动作法进行绘制，关键动作法使用起来工作量较小也能满足大部分移动端动效的表现。针对特别复杂且不常规的运动动效则可以选择连贯动作法进行表现。 沈阳网站建设 http:/植物大战僵尸就是使用的关键动作方法来绘制的像水果忍者这样运动轨迹比较复杂的游戏，就可以用连贯动作法描述动态运动轨迹原则 5 重复与循环动作想象一下一只有着比较大的下颌的狗，当这只狗摇头的时候，它的下颌两边的皮肤晃动起来的状态。这就是动画的第五条原则：重复与循环动作。预期这条原则解释的是动作前准备的状态，第五条原则阐述的是动作进行直到结束的过程。大多数动作一般来说不
11、会突然的结束，而是重 沈阳网站建设 http:/复渐渐变弱直到终止的一个过程。重复与循环动作描述物体本身（狗的头部）停止运动，物体的一部分像（狗下颌旁边的皮肤）仍然保持运动的一种状态。重复与循环动作描述了物体的不同部分以不同的速率进行运动的状态(狗的头部下颌两边的皮肤)现在想像一下上面图片中的大狗和它的主人走在人行道上，狗的整个身体正在移动，但是狗腿移动的频率，狗的尾巴晃动的频率，还有狗的头部晃动的频率各不相同。循环动作原则就是用来描述一个物体的不同部分是如何按照不同的频率进行运动的，即使运动频率差异非常小，如果能精确描述出来，会让动画看起来更加真实。通常来说，在下一个动作开始前，上一个动作都
12、不会完全结束。在移动端体验设计层面来说，需要多个 UI 元素整体考虑动效的重复和循环的速率，这有助于解释清楚各个 UI 元素之间的关系。采用动态 tile 的 windows phone 就是一个重复与循环动作的很好的例证。这些动态的 tiles并不是按照一个整体运动，不同的 tile 运动按照不同的速率。原则 6：慢入慢出 沈阳网站建设 http:/无论是一辆车的启动过程还是一个完全压缩的弹簧突然展开的过程，物体运动开始时都需要慢慢加速，物体停止的过程都是慢慢减速停止。而慢入慢出原则就是为了准确的描述人和物体在一个空间中运动的固有的惯性。在动画中，有一个简单的方法描述这一过程：在物体运动开始和结束加入更多的帧，在运动过程中使用较少的帧。动画中，描述物体本身的惯性，在运动开始和结束加入更多的帧。慢入慢出原则适用于描述一个角色在两个状态之间的运动，比如说坐下和站起；也可以描述物体的运动，比如说一个球掉在地上不断弹起的过程。移动端体验设计中是在一个屏幕后面的世界进行设计，如果能够引入一些真实世界中的物理定律，则会让用户感觉到更加真实。无论是一个列表或者数据的滚动，还是一个 app 打开的动效，慢入和慢出原则会让动效的体验对用户来说更加自然。 沈阳网站建设 http:/ 沈阳网站建设 h
