动效

国际站产品的体系是复杂庞大的。不仅量级巨大,而且功能复杂,频繁发生各种设计的变动。而B类贸易的特色,决定了页面有着极其的逻辑和严谨性,同时也存在着一定的枯燥度。随着商业和设计的变化,越来越多的产品对用户体验有了更高的要求。国际站需要一套全新的视觉体验升级来作为新变革的指导,动效设计也需要作出相应的规范。基于“国际化、信任感和创新性”的品牌设计内核,通过模块化的解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验。

重要性

动效,是一个高质量的互联网产品不可缺少的组成部分之一。它在原本静态的页面和用户的使用之间架起了一道桥梁,与用户产生了互动。

1. 消除陌生感:

用户对于产品的不熟悉,建立互动的纽带。让用户就能很快地把自己融入产品中,增强用户操作感。通过合理的动效,让虚拟的界面去模拟现实世界,比如运动、投影、高光、质感等。用户会把对现实世界的认知映射到产品上,从而消除距离感。动效可以让产品更加自然,更能被用户理解和接受。辅助用户信任该产品。

2. 丰富画面-情感化:

随着设计的发展,不同产品间的体验越变的同质化,因此需要通过更细化的设计和创新为产品增加亮点。动效则可以带来更惊喜的体验。情感化的目的,是帮助用户体验产品过程中,引导用户的积极情绪。适当运用动效,丰富的细节,进一步引导用户。惊喜的同时,也能帮助用户依赖于产品本身。

3. 吸引注意力:

同一个画面,动态相比静态,动的元素永远能在第一时间引起用户的关注。通过合理的动效,可以低成本的抓取用户注意力,让他们关注产品最关键的东西。通过动效能让用户优先对重要功能进行关注,方便用户快捷的得到重要信息,从而跟随着产品一步步的进行互动。

动效内核

动效内核是动效识别的核心。动效内核能够帮助品牌建立区别于竞争对手的“符号化、个性化”标志。根据“符号、个性化”对目标用户进行宣导教育,进而让用户对品牌形成独特的认知。动效内核是品牌推广的一种,以品牌作为核心的动效识别传播给用户,通过动效内核所表现出来的独特气质来辅助品牌的传播。

达成目标

在设计产品中,要用最简单快捷的方式解决问题,尽量不要再去增加用户使用过程中的复杂度。动效要做的就是为了让用户体验更进一步的传达到位。让国际B类贸易变的轻松。

衡量标准

做有意义的动效。设计动效并不是为了炫技,而是要在页面中将动效巧妙运用,解决问题,达到目的才是关键。

动效架构

需要有清晰的架构,这样才能让动效在整个产品中能够统一语言,让动效和产品设计更完美的结合。

时间

1. 合适的持续时间

动画的持续时间的长短,就决定了用户对用动效感知的时长。过短或过长的动效都会导致用户对产品产生不适感。而不同地方、不同元素的动画时间也是各有不同,需要针对实际情况进行设计。

同样的位移长度、同样的运动缓动速率,在不同时间条件下,就产生了不同的感觉。1秒的时长干净利落,2秒的时长已经有些拖沓。

2. 自然的运动

在对象元素的运动过程中,可以进行添加缓动函数。使动画的运动更加符合物理的规律。而使用的情况也是因场景而定。

同样的位移长度、时间,不同的缓动条件。除了Linear是一种直来直去的不带任何变化速率以外,其他的缓动都适合于元素的运动使用。更多缓动函数:easings.net/zh-cn#

3. 有规律的延时

当多个对象元素需要出现的时候,可以采用延时的方式来呈现。元素与元素之间靠动画做出了一个无形的区分,另外这样的呈现方式可以让用户感知到一定的积极情绪,不会显得死板。

每个元素对象出现的时间都是0.5秒,有延时的动画总长是1.5秒,每个元素的时间间隔是1帧(每秒30帧)。由于是依次出现,给人的感觉并不会觉得慢。

变化

1. 透明

元素对象的基本属性之一,和时间一样,是可以用具体的数值来量化确定的。通常使用百分比来量化使用。

通常情况下,建议透明度的变化持续的时间不短于0.2秒,不超过0.5秒。

2. 位置

元素对象的基本属性之一,和时间一样,是可以用具体的数值来量化确定的。有X、Y、Z轴向的分别,通常使用百分比(相对值)或像素(绝对值)来量化使用。

通常情况下,位置的变化持续的时间和位移的变化成正比,但不超过1秒,位置的变化也不宜过大。

3. 缩放

元素对象的基本属性之一,和时间一样,是可以用具体的数值来量化确定的。有X、Y轴向的分别,无特殊说明下都是指等比缩放,通常使用百分比来量化使用。

通常情况下,缩放的变化持续的时间和缩放的变化成正比,但不超过1秒,缩放的变化也不宜过大。

4. 旋转

元素对象的基本属性之一,和时间一样,是可以用具体的数值来量化确定的。有X、Y、Z轴向的分别。无特殊说明下都是指Z轴方向的旋转,通常使用角度值来量化使用。

通常情况下,旋转的变化持续的时间和旋转的变化成正比,但不超过1秒,旋转的变化也不宜过大。

关联

1. 协同关系

元素与元素之间,组与组之间,关系是紧密联系的。触发一个组的时候,另外一个组也会产生相应的变化。

在用户切换图片时,底部的图片位置锚点就说了了用户当前操作的结果和状态。让用户明确了所见即所得。

2. 父子关系

组与组内元素的关系,组内元素被触发后发生了变化,这种关系可以成为父子关系。子级继承父级的影响而变化。

在触发后,子级从父级中有规律的出现和消失。对于用户的感知明确了动效的来源和终点。

空间

1. 层级

通过层级关系,可以让用户明确的知道当前页面的关注重点是什么,清楚页面和内容。层级之间的关系,也指明了动效从哪里来,到哪里去。

在原先平面的空间中,通过阴影、蒙层来创造AB层之间的空间关系。

2. 景深

就像相机一样,当焦点过于集中于近景,远景的图像就会虚焦,变的模糊。人为的创造景深可以让画面不受其他无关因素的影响,从而更加的聚焦和集中精力。

当前景界面被激活而覆盖背景画面,使用背景模糊加透明覆盖让背景虚焦,远离用户的焦点。突出了视觉的空间感。

3. 视差

时差是一种动效元素之间运动不同速度的表现。也是一种刻意模仿现实空间中近景和远景运动的方式。

在现实空间中,近景因为距离近而运动幅度大,而远景因为距离远而幅度小,让用户聚焦于重要操作和内容。

4. 折叠

元素组件通过折叠的进行消失和出现,呈现了一种二维平面和三维过渡的方式。让元素的动画合乎情理的流畅过渡。

将二维组件运用3D控件去实现真实的折叠翻转效果,让用户明确知道二维的表象下是三维的关系。

上一篇: 图片 下一篇: 按钮