每个设计师都需要懂得动效知识(一)

阅读数:1 2020 年 1 月 8 日 17:43

每个设计师都需要懂得动效知识(一)

精细而恰当的动画效果可以传达状态,增强用户对于直接操纵的感知。

一、什么是动效及作用?

动效是物体空间关系与功能有意识的流动之美,它让用户更了解交互。

在 IOS7 官方 guideline 中,给动效赋予了一个新的定义:精细而恰当的动画效果可以传达状态,增强用户对于直接操纵的感知,通过视觉化的方式向用户呈现操作结果。

为什么现在的产品越来越注重动效了那?我们先从人对于产品元素的感知。

顺序来看?不难看出人们对动态的信息感知是最强的。
每个设计师都需要懂得动效知识(一)

那么动效能给给产品设计带来什么好处那?

1. 让体验更连贯:帮助用户理解界面之间的关系,缩短用户和界面之间的鸿沟。消除屏幕伤的跳变。告诉用户元素从哪来到哪去。
2. 消化引导流程,降低学习成本:在最恰当的时机给用户有意义的引导。减轻认知负担,让体验更愉快。
3. 空间扩展:让当下用户不需要的信息隐藏,适当的时机出现。
4. 赋予设计趣味和活力:让错误不那么沮丧,让等待不那么无聊,让你的产品看起来更具活力。
二、动效是不是越多越酷炫越好那?

在平时项目中,我们有些设计师经常为了追求酷炫,生硬的在产品中展现。一个好的动效应该是自然,舒适,锦上添花绝对不是为了仅仅去吸引眼球,生拉硬套。所以要把握好动效的轻与重,先考虑用户使用的场景、频繁程度来确定动效的注目程度,其次重视整体性的编排。

下面我们来看一下经常在 APP 里面使用动效的场景:

  1. 开机启动图
    每个设计师都需要懂得动效知识(一)

强化产品品牌,动画短小。仅为简单变形,旨在突出产品 logo。因为开启启动图时间非常短,复杂的动画延迟了界面的过渡。

  1. poplayer 动画

强调惊喜,有创意的,有互动性的动(手淘的双十一活动)
每个设计师都需要懂得动效知识(一)

  1. 界面之间切换跳转

帮助用户理解界面刚发生的变化,让用户知道自己在哪。例如页面之间的转场,弹出等。

每个设计师都需要懂得动效知识(一)

  1. 扩展空间场景

强调关联性的场景,展开,放大缩小,翻转等。

每个设计师都需要懂得动效知识(一)

  1. 强调状态

抓住用户注意力,也可以说是分散用户注意力,例如加载时,出错时等。

每个设计师都需要懂得动效知识(一)

  1. 聚合入口

每个设计师都需要懂得动效知识(一)

  1. 突出元素,增加情趣 (播放器播放暂停案件)

每个设计师都需要懂得动效知识(一)

本文转载自 Think 体验设计公众号。

原文链接: https://mp.weixin.qq.com/s/AJneuIhv1UsUPlNk6ebaQg

评论

发布