贵阳水性笔价格交流组

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

优秀网页设计2018-11-15 12:21:45

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

太过刻意


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

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



过度使用


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


动画原则


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

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


到底什么才是界面


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


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


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

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

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

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

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

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



通知动画



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


吸引你的使用者



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

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

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

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

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


扩张信息



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

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


信息重要性的优先级


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

使用标题

画底线或是加上粗黑字体

使用颜色

使用形状与图片

动画

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


功能性vs美观


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

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




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


结语

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

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


来源:TechOrange 科技報橘

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


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