UI 炫技要不得!设计师别求花俏,简单明了才最重要

回复 已回复12 星标
更多
本区置顶
2435066<2435066> 2015-10-16 17:34 只看该作者

UI 炫技要不得!设计师别求花俏,简单明了才最重要

515290

要知道使用者界面里的动画不全都是坏事,坏的是那些过度滥用动画以至于影响使用者体验的设计师。一个好的设计师应该要知道该如何取舍使用的时机,以下几点将会告诉各位,在什么样的情况适合使用动画,让你在未来不会再不必要的时机乱用动画。


太过刻意

以下的例子指的是现在迪斯尼化的UI动态设计,看起来是有点夸张没错,但还真的这样设计的UI其实不在少数。

这样的设计看起来就好像我们用隐形的橡皮筋把这些符号Icon垂吊在半空中让它一直晃,一点都不好看。

515290

过度使用

动画就像杀虫剂一样,你用太多就会失去它的效果。

动画原则

很多UI设计师常常会建议大家多去看看迪斯尼的动画制作原则,但其实这种东西只会让使用者的界面使用起来更缓慢而已。

很多UI设计师常常把界面当成动画展示区,但除非你真的是想进到皮克斯当动画家,最好还是少用那些太过卡通化的动画效果。

到底什么才是界面

界面存在的目的就是将不断流通的信息传达出去,对于设计师来说,他们的工作就是决定何时是他们介入流通信息中的最好时机。

动画在UI设计中扮演的角色

以下是几个使用动画的基本原则:

你是否能确定使用动画能帮助到使用者。「看起来很好看」不是一个正当的理由

尽量让动画出现的时间少于300毫秒

避免使用线性移动的动画,因为这会让整个界面看起来迟缓无趣

99%的动画都应该使用简单的缓入缓出效果

只有在极少数的情况下才会使用弹簧(Spring),弹跳(Bounce)等效果

通知动画

515290

简单的通知动画最常不要超过300毫秒,这样的设计才能真正帮助使用者,因为它能吸引到使用者的目光。

吸引你的使用者

515290

从以上的例子我们可以看到,通知的强度在第二次点击的时候大大的增强。

第一次点击时,通知缓慢地出现。

第二次点击时,通知列的信息激烈的震动。

当使用者不断的点击按钮时,界面会出现另外的信息通知使用者。

设计师也可以改变安钮的颜色来吸引使用者的注意。

扩张信息

515290

这个设计非常的简单且有效,常常在行动装置上能看到它的踪迹。它特别的点是,使用者即使在扩张列表之后,原先的画面还是维持在原本的状态。

在上方的案例中,我刻意将关闭键的出现时间稍微延长,我也使用转折的动画让使用者把目光聚集在较重要的信息上。

信息重要性的优先级

身为一位设计师与软件开发者最重要的就是决定UI上哪个设计元素才是优先选择,以下方法可以用来强调:

使用标题

画底线或是加上粗黑字体

使用颜色

使用形状与图片

动画

没有人会把文件里每一段文字都改成标题大小,同样的,也没有人会把界面里的每一个符号元素都改成动画。请把动画当成一只荧光笔,只在重点的部分运用。过多的使用会让人很难抓到重点,造成你想传达的信息流失掉。

功能性vs美观

如果你开始听到团队里有人提到他的UI动画能让使用者「赏心悦目」,那你就该当心了,因为单纯为了美观而设计的动画几乎都不是什么好设计。

记住,简洁就是美,功能性的设计永远胜过纯粹为了美观的动画。

515290

不要让你的动画影响使用者的体验,想想看为什么飞机的导航界面为什么从不使用动画。你也许会觉得300毫秒的动画又无伤大雅,但对于使用者来说,你多余的动画只会烦死大家,不会让任何人「赏心悦目」!

结语

你就尽情的运用动画吧,把动画当成一个能更快传达信息的工具,但记得,功能性远比美观更重要,多为使用者着想,不要让他们在你的界面上多浪费那几毫秒。

(数据源:翻译自Sophie Paxton;图片来源:Pixabay、Sophie Paxton、Wikipedia)

来源:TechOrange 科技報橘

推荐人:周周周周周周周…

【优设投稿:2650232288@qq.com】

2018-07-20 16:14:30更新过

正序阅读 13# 2018-05-05 17:58

方法

12# 2018-05-05 17:58

烦烦烦

11# 2016-04-14 22:26

撒的嘎嘎

10# 2016-04-14 22:19

ddd

9# 2016-04-14 22:02

u
动画

8# 2016-04-14 22:00

方法

7# 2016-04-13 21:16

撒大哥撒个的

6# 2016-04-13 21:13

撒大哥

5# 2016-04-13 18:55

来啦

4# 2016-04-13 18:54

理解

3# 2016-04-13 18:50

理解

1# 2016-04-01 18:16

淘汰
淘汰

591136093 2016-04-13 21:10:47更新过
新窗口打开 关闭