移動用户体验设计新要素.docxVIP

无论是在一系列草图间快速切换，还是屏幕与屏幕之间的切换，或者其它类似场景，想要在这些场景切换中加入动效进行完美过渡，并不是一件容易的事情。这是一门需要耐心的艺术，需要用眼睛仔细的观察 ，人和物体如何在时间和空间两个维度中运动与变化。这种非常巧妙的动效和动画，正在慢慢成为一种新的、有意思的移动体验设计要素。并值得用户体验从业者去学习，最终学会如何有效率和优雅的使用在自己的设计中。好的动效和过场动画可以传达给用户更加清晰的当前所处场景和层级关系，甚至带给用户一种愉悦和有趣的感受。然而，过多的或者太夸张的动效，则可能毁掉一个完美的移动用户体验。所以想要巧妙的并且艺术的在设计中运用动效的第一步就是要理解动画艺术的原则和原理。谈到对动画艺术理解，可以说没有人比在沃尔特-迪斯尼工作的两位杰出的动画师Ollie Johnston和Frank Thomas理解的更加深刻。幸运的是，这两位动画师把在迪斯尼动画制作过程中的总结出来的动画的法则写成了一本书，分享给大家 The illusion of life Disney Animation。读到这里你可能想知道到在移动用户体验设计中动画需要扮演什么角色。虽然动画艺术的起源是在电影和电视行业，但从一开始动画艺术就在电脑和数字媒体艺术领域中体现了重大的价值，而现在移动设备中也开始运用动画和动效。不论是屏幕与屏幕之间的过渡，还是UI元素与手势进行交互，动画和动效都已经成为移动设备界面设计的重要元素。设计师可以用动效引导用户沿着自己设计出来的体验路径进行操作。还是从那两位动画大师说起，后文会从他们出版的书 The illusion of life Disney Animation中摘抄一部分来解释动画的12条基本原则。尽管这本书主要阐述的是电影和电视领域的动画，但这些基本原理在当今的移动设备上仍然适用。如果能够把动效精巧的运用在移动设备界面上，不仅能够提升移动设备用户体验，甚至会让用户感受到一点点梦幻的感觉。《The illusion of Life: Disney Animation》描述了动画的12条基本原则下面书中描述动画的12条基本原则挤压和拉伸预期展现连贯动作法和关键动作法重复与循环动作慢入和慢出弧度次要运动时机夸张可靠的草图感染力动画12条基本原则原则1. 挤压和拉伸人和物体都有其固有的质量。 当物体移动时，其移动时的状态往往反映了物体的刚性。在真实世界中的物体，比如说书架和木椅，属于刚性比较强，灵活性比较大。而柔软的曲面，像衣服和树叶等物体，则刚性比较差，但有更好的灵活性。挤压和拉伸这条动画法则就用来精确的表现一个物体的刚性如何。像一个盛满水的气球有有机和柔软曲面的物体，就在其外形上就有一定程度的灵活性。挤压和拉伸这一动画原则就恰好能描述这种状态。上图是用Flipboard 和iBooks作了一个对比，Flipboard表现出的在UI元素是坚硬的像木板似的。与此相反，iBooks的界面的过渡则用挤压和拉伸原则表现了像真实世界书本翻页的那种柔软的效果原则2. 预期当我们试图描述一个物体或者人物运动的状态时，为了让这个运动显得更加真实，有三个独立的阶段需要去考虑：在运动发生前的准备阶段运动过程本身运动产生的结果比如说，一个棒球击球手在击球前准备阶段会把身体弓起来的状态，一个弹簧压缩后弹起前的那个状态。预期这个原则就是描述物体运动前的准备状态，就像是精心策划一个舞台剧场景——灯光 、布局、道具和人物的组成等，这一切就是为了给用户一个线索什么即将发生。一个保龄球手扔出球之前蹲下的状态，这个姿势和动作就是预期原则所应用的一个最好的例证预期原则在移动用户体验领域中同样适用。预期原则就是让用户有一种预感即将发生什么。举例来说，这个原则可以运用在“闪屏”界面的视觉设计中，也可以用在不同体验的过渡中，还可以用来帮助增加手势的可见性。总得来说，预期可以为元素在界面中将要运动的速度和方向还有哪些手势可以使用提供线索。这个光圈的动画在很多智能手机中的camera应用中被使用，它描述了用户在进行拍照前准备的那个阶段。这个Palm的卡片流的UI设计给了用户关于手势运用的可见性这个windows phone 7锁屏跳动的动画也是用了预期原则，让用户可以提前瞥一眼windows phone 7动感的瓦片UI设计原则3. 展现比较善于卖房的的房产经济经常按照一个流程去“展现”各个房间，为的就是让各个房间的使用展现的非常清楚。展现原则在动画里的功能和房产经纪人非常相似，好的展现方式可以让观看动画的人清楚的理解动画想要说明的中心思想。在移动用户体验领域里，在界面过渡和切换时，展现这个原则至关重要。好的交互方式会把高亮，颜色，布局和动效精确的展现并传达到用户的眼中。该原则应用合理的会让移动设备用户感受到流畅和舒适，该原则应用不合