您现在的位置: 破洛洛 >> 建站学院 >> 网站设计 >> 交互设计 >> 正文

十二条动效体验原则

作者:佚名 来源:chinaz 更新时间:2017-7-17
分享到

如果你想要了解更多背景信息,建议先阅读我的前一篇译文《动效的基本常识》,其中介绍了动画与动效的差异、即时与非即时的定义、动效提升可用性的四种方式(可预期、连续性、表述性、关联性)、以及理论、手段、属性与值之间的关系。

时间相关的原则:缓动(Easing)、偏移(Offset)和延迟(Delay)关联性相关的原则:父子关系(Parenting)连续性相关的原则:过渡(Transformation)、值变(Value Change)、遮罩(Masking)、覆盖(Overlay)、复制(Cloning)时间层级相关的原则:视差(Paralax)空间连续性相关的原则:景深(Obscuration)、折叠(Dimensionality)和滑动变焦(Dolly & Zoom)

原则1:缓动

时效事件发生时,元素的行为应与用户预期相符。

所有展示时效行为的界面元素(无论即时还是非即时),都需要缓动。缓动可以加强体验中的自然感,并创造出符合用户预期的连续性。迪士尼的动画原则将其称之为缓入缓出。

上面第一个图例中的线性动效看起来不太好,而上面那个范例(三个相似动画中的第一个)看上去要好很多。上面三个范例的帧数和动作事件都一样,唯一的区别是缓动。

作为可用性相关的设计师,除了美学之外,我们要需要严格要求自己思考,哪个立即更能够支持可用性?

你可以想象一种完全不符合用户预期的缓动方式,让可用性大大下降。合适的缓动相比起来,用户体验到的动效是无缝的,并且很大部分是不可见的——这其实是一件好事,以免让用户分心。线性动效(linear motion)看起来就过于明显了,感觉缺少了什么,不完整,刺眼,又让分分心。

现在看看上面第二个图例,动效不是无缝的,而是有设计感。我们可以注意到元素的着陆过程。总的来说还是比线性动效(linear motion)好多了。

缓动可能对可用性产生负面影响吗?答案是肯定的,方式有很多。第一种是时间掌控不对,太慢或太快,都会打破用户的预期,并分散注意力。并且如果你的缓动与产品整体的体验不一致,也会产生相似的影响。

我想要告诉你的是,作为设计师的你,可以使用的缓动种类无穷无尽。当用户触发时,不用的缓动所带来的预期响应都不一样。

总结:什么时候使用缓动?任何时候!

想要了解更多缓动相关知识,可以去看看我的文章《The irony of usability and linear motion》。

原则2:偏移与延迟

加入新的界面元素或场景时,可用与表达元素之间的关系。

本文介绍的原则中,只有两种与迪士尼动画原则相关,即原则1缓动与现在介绍的原则2偏移与延迟。本原则与迪士尼动画原则中的Follow and Overlapping Action相似。然而,虽然执行手段,但是目的与效果不同。迪士尼想要的是“更有吸引力的动画”,而界面动画原则想要的是可用性更好的体验。

这个原则的实用性在于它通过用自然的方式描述界面元素来让用户预先感知到下一步结果。上图范例告诉用户,上面两条与下面一条是分开的。可能上面两条是不可以点击的图文信息,下面一条是一个按钮。

这种动效能够让用户在看清楚之前,就感受到眼前的东西是什么,它们之间是如何区分的。这种功能非常有帮助。

上面这个例子中,浮动按钮变成了由三个按钮组成的头部导航。因为按钮是依次出现的,所以它们之间的分离感能够提升体验上的可用性。换一种讲法,在用户看清楚这些头部导航之前,设计师已经用户时间差说明了元素之间的分离关系。这便有了一种与视觉设计不同的方式,来向用户介绍界面元素。

为了更好地展示上述效果,我下面就给你一个打破这条原则的反例。

在上图的静态视觉设计中,背景图上浮着一些图标。看起来所有的图标是互相分开的,它们分别拥有各自的功能。但是动效的表达却发生了矛盾。

运动时,每一行图标都成了一组,看起来一行就是一个元素。图标的标题也是一行一行地分成了3个元素。这个动效展示的东西,与动效完成后用户看到的东西感受完全不同。我们可以说这个例子中的界面元素的时效行为并不能对可用性产生帮助。

原则3:父子关系

当界面元素较多时,可以利用时空差异创造出可以感知到的父子继承关系。

父子关系是将界面元素关联起来的重要原则。上图中,顶部子元素的尺寸和位置都与底部父元素相对应。父子关系将不同元素的属性关联起来,创造出关联和继承关系,以增强可用性。这需要设计师更好地协调事件的发生时间,以此向用户传达元素之间的关系。

很多元素属性都可以创造用户体验的协同感,暗示元素之间的继承关系,例如尺寸、透明度、位置、旋转角度、形状、颜色等。

转载请注明:破洛洛(谢谢合作)
网友评论: