手机二维码 手机二维码

长沙UI设计培训丨提升产品体验的5个动效

发表时间:2020-05-04    人气:1565    作者:牛耳教育
首先,想为点进这篇文章的设计师们点个赞。因为UI视觉设计师真的不是只要把插画、icon、动效做得美就行了。

实际上,视觉设计中也涉及到了很多细节上的体验。尤其是动效的设计,它赋予静态图像以“生命”,从而帮助用户更好地理解正在发生的事情或如何更有效地使用你的产品,这也正是动效能够提升产品体验感的原因。

那接下来我们就结合一些实际案例,来看提升产品体验感的5个动效指南吧。

一、反馈当前状态


虽然颜色和动画都能比较好地引起用户的注意,但为什么还要加入动效呢?

一方面,由于数十万年的自然习得,让我们对于检测周围的运动特别敏感,从而快速应对从任何一方接近的危险。

另一方面,动效其实对于视障人士来说更加友好。下面这幅图是正常人和视障人士看到的同一个画面,纯色彩突出的情况下视障人士是很难感知到错误提示的。


(左为正常视角,右为绿色盲视角)

二、保持动作的关联性

在真实的物理世界中,一切动作都有它的“来源”和“去向”,这可以帮助我们很好的理解行为动作。动效也是一样的,正确的动画可以帮助用户理解方向,而不会感觉内容突然发生变化。

三、注意展现方式

受限于移动设备的尺寸限制,动效是展现更多信息的一个好方法,利用图片/文字在有限范围内的滚动,从而在有限的空间范围内展示更多的信息。

不过在展现方式这里也容易出差错,从天猫的动效设计里,我们可以同时看到可取和不可取之处。

四、增加情绪的传递

除了功能型的用处外,还能将情感化设计以动效形式表现出来,增强某种情绪的感觉,向用户传递我们所想要表达的情绪。

五、避免强烈的反差

还有一个小点,动效有时还会作为衔接两个画面的过渡态,如果两个页面之间反差过大,眼睛受到的刺激就会较大。就像在暗处待久了,突然强光来袭的不适应感。




五个动效指南,你都记住了吗?

动效不是为了炫技,每个动效都应该有它对应的目的,帮助用户更好地理解正在发生的事情或如何更有效地使用你的产品,这也正是动效能够提升产品体验感的原因。

2020年,牛耳教育推出企业订单人才直招计划,开设新课程体系,定制企业直招班。本期名额30个,招满即止,先到先得噢!赶紧咨询报名吧!

长沙UI设计培训

牛耳教育成立于2001年,是中国专业从事职业教育的机构之一,牛耳数字艺术学院从艺术设计技能培养、职业素质训练、项目实训到人才输送的一体化服务体系。以提供职业技能培训与就业实训为核心,为国内、外企业输送合格艺术人才,主要从事游戏动漫、场景动画、角色动作、平面设计、网页设计、UI设计、室内设计、软装设计、家居设计、后期合成、服务外包人才培养等业务,成为近千家知名企业的人才培养基地。

免责声明:1、文章部分图片源于网络,均为示意图;2、所有文章、图片、音频视频文件等资料版权归版权所有人所有;3、因非原创文章及图片等内容无法一一和版权者联系,如原作者或编辑认为作品不宜上网供浏览,或不应无偿使用,请及时通知我们,以迅速采取适当措施,避免给双方造成不必要的经济损失;4、本页面内容如无意中侵犯了媒体或个人的知识产权,请来电告之,我们将于24小时内删除。

每日前50名预约咨询

可免费获取专属优惠

*
*

电话咨询

400-0731-162

在线咨询

返回顶部