查看: 5222|回复: 3

[UI设计] UI动画可不是卡通片

[复制链接]

1240

主题

11

听众

6720

积分

版主

Rank: 7Rank: 7Rank: 7

纳金币
5474
精华
6

荣誉管理 论坛元老 突出贡献 优秀版主

发表于 2017-4-10 17:20:32 |显示全部楼层
我之前撰文讲过多余的动画,引发了一些共鸣。得到了非常积极的反馈,我很高兴了解到,动画过多的界面也会令其他人手足无措。
老实说,我并不反对为界面进行动效设计。我主要是在质疑那些妨碍用户的动画。
克制,是一名优秀ui设计师的特质。它要求你了解所选平台的能力,然后避免使用它(除非时机成熟)。
与其为多余的动画惋惜,我宁可学习深思熟虑的动画,尽量提出一些方案。
我期望得到你对本文的评价与建议。
做作的动画案例
下面是一则快速且做作的动画案例,我以此来演示UI动画中的卡通化现象。尽管这是个略微夸张的例子,但事实上,确有许多界面呈现出了这种花哨的动画。
1.gif

似乎我们刚抛弃了拟物化的视觉设计,又陷入了行为上的拟物化。我们把虚拟物表现得像是果冻,或像是挂在隐形的橡皮绳上。
拒绝肆无忌惮的动画
动画就像某种咒法。如果过度使用,就会效力尽失。
动画原则
我听闻一些UI设计师推崇卡通化的动画设计,将它作为UI设计师的必读准则。不幸的是,这增强了UI的娱乐功效,总会使得界面变成用户的阻碍。
许多UI动效设计师似乎把界面设计当成了他们的动画作品集。除非你想被收录进Pixar,否则请避免使用“弹跳”、“加速后减速”这样的缓动效果。
界面是什么?
在计算机科学中,界面是指计算机系统中,两个独立组成部分相互交换信息的衔接处。
界面(计算机)——维基百科,自由的百科全书https://en.wikipedia.org/wiki/Interface_(computing)
界面居中衔接、传达信息的作用使得它如此重要。决定何时可以违背这条UI中心原则,是设计师所面临的挑战。
UI设计中的动效
这些简单的准则让我受益良多,在此推荐:
*站在用户的立场对每段动画做出决断,“挺好看的”可不是正确答案。
*保持每段动画时间不超过300ms。
*避免使用线性动画,它使得动画看起来迟缓、无趣且机械。
*99%的动画都应该使用简单的“加速”或“减速”缓动效果。
*你极少会需要那些更加醒目的缓动效果,例如弹簧、弹跳等等。
界面案例
这些例子请尽情批评、挑刺。你们的评论和建议常常能改善我的想法。
通知
2.gif

通知案例1
这个简单的动画只持续300ms。它有细微的分层效果,卡片的动画开始后,消息在100ms内淡入显现。本例中的动效确实提升了用户体验,因为它将用户的注意力引向了不可忽视的重要的通知。
通知的升级
3.gif

通知案例2
上面的例子使用了更强烈的动画。
*首次点按,通知淡入显现
*再次点按,整个标签晃动
如果用户持续点按按钮,还可以叠加一个模态窗口吸引用户注意。
而且在后续失败的尝试后,也可以通过改变按钮本身颜色来警示。
卡片展开
这是卡片视图的一种简单有效的实现,移动端通常都这么做。我非常喜欢这个交互,因为它让用户熟悉来龙去脉。即使列表视图不见了,我们也知道它就在那里,在展开项的背后。
4.gif

卡片展开案例
我故意让卡片的关闭按钮稍稍延迟显现,同时使用了位置与透明度的动画。用户的视线不会漏掉这个重要的UI元素,他们在收起卡片时会需要它。
重要性分层次
作为设计师与开发者,必然要决定我们界面中哪些元素更重要。它有很多种体现方式:
*使用标题
*下划线、或是加粗
*使用色彩
*使用形状和图片
*运动
你当然不会把文章的每一句话都当作标题。这个原则也适用于动画。界面中的每个动画元素,都等同于文章中的一个标题。它应该用来显现元素的重要性。过度使用反而会混淆层次,同时干扰你试图表达的信息。
功能动画 vs 装饰动画
游客,如果您要查看本帖隐藏内容请回复



回复

使用道具 举报

0

主题

2

听众

405

积分

设计实习生

Rank: 2

纳金币
175
精华
0
发表于 2017-9-20 10:51:43 |显示全部楼层
值得看看
回复

使用道具 举报

0

主题

1

听众

28

积分

设计初学者

Rank: 1

纳金币
2
精华
0
发表于 2017-9-25 02:07:52 |显示全部楼层
值得看看
回复

使用道具 举报

0

主题

10

听众

6047

积分

高级设计师

Rank: 6Rank: 6

纳金币
1391
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

发表于 2019-1-11 09:21:44 |显示全部楼层
值得看看值得看看值得看看
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

关闭

站长推荐上一条 /1 下一条

手机版|纳金网 ( 闽ICP备08008928号

GMT+8, 2024-3-29 06:05 , Processed in 0.127501 second(s), 31 queries .

Powered by Discuz!-创意设计 X2.5

© 2008-2019 Narkii Inc.

回顶部