加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营 > 正文

十二条动效体验原则

发布时间:2017-09-19 18:58:42 所属栏目:运营 来源:woshipm
导读:如果你想要了解更多背景信息,建议先阅读我的前一篇译文《动效的基本常识》,其中介绍了动画与动效的差异、即时与非即时的定义、动效提升可用性的四种方式(可预期、连续性、表述性、关联性)、以及理论、手段、属性与值之间的关系。 时间相关的原则:缓动

用户动态的方式展现变化的值,会给人一种“神经反射”。用户感受到数据的动态特征后,能够感受到其意义,并联想到与之相关的对象。这是的数值就成为了沟通用户与关联对象(数据背后含义)的桥梁。相对的,如果这些数值看起来是静态的,就无法连接用户与关联对象,桥梁的作用自然也没有了。

十二条动效体验原则

十二条动效体验原则

十二条动效体验原则

值变的理论既可以是即时,也可以是非即时发生的。如果是即时事件,用户一边进行操作一边改变数值。如果是非即时事件,像是加载或过渡,数值在没有用户参与的情况下自动变化。

原则6:遮罩

如果一个界面元素的不同的展示方式对于不同的功能,那么让展示方式的变化过程具有连续性。

十二条动效体验原则

遮罩行为的问题可以理解成元素形状与功能之间的关系。

虽然设计师们在做静态设计时就对遮罩有所了解,但需要区分的是动效体验原则中的遮罩是随着时间而发生的行为,而不是禁止的状态。

这种连续无缝地遮住或露出元素区域的方式,也能创造连续的描述性。

十二条动效体验原则

上例中,头图通过形状和位置的改变成为了唱片。在不改变元素内容的情况下,通过遮罩来改变元素本身,相当不错的技巧。这个例子属于非即时事件,在用户操作之后才发生。

记住,界面动画的原理与时间紧密相关,通过持续性、描述性、关联性与可预期这四种方式来成为可用性的支柱。上述的例子中,尽管元素的内容前后保持不变,但是轮廓和位置决定了它是什么。

原则7:覆盖

用堆叠元素的相对位置来描述它们的扁平空间关系。

十二条动效体验原则

覆盖通过堆叠排序来弥补扁平空间缺乏层次的问题,以此提高体验可用性。

再直白一点,就是在一个非三维的平面空间里,通过排列元素之间的上下关系来传递它们的相对位置的动效。

十二条动效体验原则

十二条动效体验原则

上图一中,前景元素滑到右边露出背景元素。上图二中,整个界面向下滑动露出列表和选项(同时使用移动和延迟原则来描述照片之间的独立性)。

对设计师来说,在一定程度上,“层”的概念是非常明确的,我们做的设计本身就是有层级的。但是必须要明确分清的是,“绘制”与“利用”并不相同。因为我们设计师通过长时间地“绘制”层级,对所设计的一切元素(包括被隐藏的信息)都十分了解。然而对于用户来说,被隐藏的元素必须被定义出来,或者经过尝试,才能够看到并了解。

总的来说,覆盖原则让设计师能够通过层级之间的Z轴位置关系,像用户传达空间方位。

原则8:复制

当新的元素从已有元素复制出来时,用连贯的方式描述其关联关系。

十二条动效体验原则

当新的元素在当前场景(从存在的元素)被创造出来时,描述其形态十分重要。在这篇文章里,我要强调的是描述元素的产生和分离至关重要。要做到这一点,单纯的透明度渐强渐弱是不够的。像遮罩、复制和翻转这些动效原则都需要根基于强烈的形式感。

十二条动效体验原则

十二条动效体验原则

十二条动效体验原则

上面的三个例子中,当用户集中注意力在主体元素上时,新的元素从主体元素上被创造出来。这双重动作(先引导注意力,然后通过复制将实现导向新元素)能够明确信息地将事件传达出来:由“X”动作引发创造新元素的“Y”动作。

原则9:景深

允许用户瞥得到非主要元素或场景。

十二条动效体验原则

与前面说过的遮罩原则类似,景深原则既可以是静止的,也可以具有时效性。

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读