陌北默

我之前撰文讲过多余的动画,引发了一些共鸣。得到了非?;姆蠢?,我很高兴了解到,动画过多的界面也会令其他人手足无措。

老实说,我并不反对为界面进行动效设计。我主要是在质疑那些妨碍用户的动画。

克制,是一名优秀UI设计师的特质。它要求你了解所选平台的能力,然后避免使用它(除非时机成熟)。

与其为多余的动画惋惜,我宁可学习深思熟虑的动画,尽量提出一些方案。

我期望得到你对本文的评价与建议。

做作的动画案例

下面是一则快速且做作的动画案例,我以此来演示UI动画中的卡通化现象。尽管这是个略微夸张的例子,但事实上,确有许多界面呈现出了这种花哨的动画。

1KNDtrZZKN5-bNQ7YVB8_fQ

点此查看案例原文。

似乎我们刚抛弃了拟物化的视觉设计,又陷入了行为上的拟物化。我们把虚拟物表现得像是果冻,或像是挂在隐形的橡皮绳上。

拒绝肆无忌惮的动画

动画就像某种咒法。如果过度使用,就会效力尽失。

动画原则

我听闻一些UI设计师推崇卡通化的动画设计,将它作为UI设计师的必读准则。不幸的是,这增强了UI的娱乐功效,总会使得界面变成用户的阻碍。

许多UI动效设计师似乎把界面设计当成了他们的动画作品集。除非你想被收录进Pixar,否则请避免使用“弹跳”、“加速后减速”这样的缓动效果。

界面是什么?

在计算机科学中,界面是指计算机系统中,两个独立组成部分相互交换信息的衔接处。
界面(计算机)——维基百科,自由的百科全书http://www.ccopus.com/wiki/Interface_(computing)

界面居中衔接、传达信息的作用使得它如此重要。决定何时可以违背这条UI中心原则,是设计师所面临的挑战。

UI设计中的动效

这些简单的准则让我受益良多,在此推荐:

  • 站在用户的立场对每段动画做出决断,“挺好看的”可不是正确答案。
  • 保持每段动画时间不超过300ms。
  • 避免使用线性动画,它使得动画看起来迟缓、无趣且机械。
  • 99%的动画都应该使用简单的“加速”或“减速”缓动效果。
  • 你极少会需要那些更加醒目的缓动效果,例如弹簧、弹跳等等。

界面案例

这些例子请尽情批评、挑刺。你们的评论和建议常常能改善我的想法。

通知

1UJdmc7IUuOjJFSNnpUmH0w

通知案例1

点此查看案例原文。

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

通知的升级

1bX8hBD6PmbjedK0SYzBSlA

通知案例2

点此查看案例原文。

上面的例子使用了更强烈的动画。

  • 首次点按,通知淡入显现
  • 再次点按,整个标签晃动

如果用户持续点按按钮,还可以叠加一个模态窗口吸引用户注意。

而且在后续失败的尝试后,也可以通过改变按钮本身颜色来警示。

卡片展开

这是卡片视图的一种简单有效的实现,移动端通常都这么做。我非常喜欢这个交互,因为它让用户熟悉来龙去脉。即使列表视图不见了,我们也知道它就在那里,在展开项的背后。

1YaoMTOLjuUBRrfBATGzSxA

卡片展开案例

点此查看案例原文。

我故意让卡片的关闭按钮稍稍延迟显现,同时使用了位置与透明度的动画。用户的视线不会漏掉这个重要的UI元素,他们在收起卡片时会需要它。

重要性分层次

作为设计师与开发者,必然要决定我们界面中哪些元素更重要。它有很多种体现方式:

  • 使用标题
  • 下划线、或是加粗
  • 使用色彩
  • 使用形状和图片
  • 运动

你当然不会把文章的每一句话都当作标题。这个原则也适用于动画。界面中的每个动画元素,都等同于文章中的一个标题。它应该用来显现元素的重要性。过度使用反而会混淆层次,同时干扰你试图表达的信息。

功能动画 vs 装饰动画

程序员常常谈论“代码嗅觉”。这是指编写代码时的某种特质,它并无绝对的对错,但能避免老练的程序员写出低质量代码。

如果你听到团队伙伴谈论UI动画“愉悦”用户,你的“设计嗅觉”警钟可能就响起了。为了动画而做动画(几乎任何时候)是糟糕的设计。

切记,动画同样符合少即是多的原则。功能动画总是胜过纯粹的装饰动画。

1s9LTV7aFZeWvN-rTbGAwUA

不要让动画妨碍了用户。这就是为什么飞机驾驶舱的界面从不用使用动画。额外增加毫无必要的300ms动画,对你的界面而言可能人畜无害,但它给用户带来的烦恼远比“愉悦”更多!

总结

界面中还是需要动画的。要将它作为迅速传递重要信息的工具。多用功能性而非纯装饰动画,珍视用户花在你界面上的每一毫秒。

原文地址:medium

译文地址:可乐橙

译者:可乐橙

转载请注明:学UI网—UI设计师学习教程平台 » UI动画可不是卡通片

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
不会C4D与手绘的设计师还有出路吗?不会C4D与手绘的设计师还有出路吗?
版画语言在广告设计中的运用版画语言在广告设计中的运用
浅谈影响用户的行为浅谈影响用户的行为
界面设计 ≠ 屏幕设计界面设计 ≠ 屏幕设计
优秀设计师:设计中的故事思维优秀设计师:设计中的故事思维
腾讯设计师!给路边摊暖心大变样~腾讯设计师!给路边摊暖心大变样~
阿里设计师带你探讨UxD设计是什么?阿里设计师带你探讨UxD设计是什么?
你掉进过“心理账户”的坑么?你掉进过“心理账户”的坑么?
云计算交互设计师的必备知识!云计算交互设计师的必备知识!
如何才能做到原创?如何才能做到原创?
?