[原创译文] 10种帮你改善UI设计质量的窍门

2019-11-15 15:52:11 浏览数 (1)

静电说:这几天静电在公众号里做了预告,我们将会花几天时间来翻译国外作者Danny Sapio的一系列文章。前天的不可不知的10条UI设计经验法则 不知道大家有没有从中获得一些启发呢?今天咱们继续:10种帮你改善UI设计质量的窍门。一起来看看吧!

01. 为你的设计注入灵性

无论是启动页面还是加载消息,用户都会特别在意这些小细节,一个小的灵感都会让他们会心一笑。这就是为什么诸如Old Spice和Geico这样的公司拥有如此知名品牌的原因。将幽默和个性的灵魂融入到市场营销中,他们创造了无数令人难忘的广告和内容。

MailChimp用户体验总监Aarron Walter曾说过:“我们发现在设计作品中融入幽默的个性,彩蛋,会让原本平淡无奇的任务变的更人期待,甚至不想错过。”

打个比方,在你的设计稿中说“载入中...” 或者是“我们训练有素的程序猿们正在努力...”是有明显区别的,前者毫无生气,后者为产品注入了灵魂。这种出乎意料的文案让你的用户会心一笑,并且印象深刻。

好的文案不一定必须是幽默的。但它一定是引人入胜,并让用户产生深刻印象的。需要注意的是,滥用幽默也是不合适的。有时候会让人产生反感。

Reddit的联合创始人Alexis Ohanian说过我喜欢的《泰坦工具》中的一句话:“花一点时间让你的产品更人性化,或者更有趣,与众不同是非常值得的。这也是我所面临的挑战之一。”

所以在设计下一个产品时,不妨考虑下如何将这些有趣的元素融入你的设计中。

02.加入一些图标或者表情符号

添加表情符号或者图标可以帮你一目了然的了解元素的功能。看到放大镜图标,用户就会想到搜索,就是这么简单。

当然,你也不要过多的去使用它们,更不要通过过度创新来重新发明轮子。某些元素是有全局意义的,所以不要通过干扰用户熟悉的内容让用户感到困惑,尽可能使用约定俗成的图标定义。比如用户图标代表用户个人资料,“ ”图标表示添加,购物车就是表示购物车,齿轮表示设置等等。

03.通过插画使你的产品更具人情味

一副好的插画可以让你用一种更加轻松愉快的方式传达出复杂的信息。这是单纯使用文本不可比拟的。

当我们还是个蹒跚学步的孩子时,就知道图画和文字搭配起来进行学习会更加有趣也更加有效果。您是否看过没有插图的儿童读物?那太可怕了!

添加插画可以帮用户舒缓心情,并平衡界面的设计。插画可以吸引由用户的注意力,并且让应用程序的各个功能更易于理解。

但是请注意,插画一定是有目的性的,并且作为内容的补充存在,而不是文字的替代品。插画应该内容突出,可以改进用户体验,而不是干扰用户的操作。设计元素与插画的颜色和样式保持一致也很重要,确保它们不会显得格格不入。

04.更明智的使用黑暗模式

为你开发的应用加入深色主题是一个非常棒的选择,深色模式会让眼睛更舒服一些,让我们感觉自己不是总盯着灯泡。

在黑暗模式下进行设计与在浅色模式下设计并没有太大不同,你只是需要一个不同的配色方案。我们建议让用户自己决定使用黑暗模式还是浅色模式,这可以让你的应用体验更加友好和贴心。

05.使用高质量的图像

应用中的配图与其它视觉元素同等重要。好的配图可以增强图像的视觉效果,让画面更加生动,因此,谨慎选择配图。

06.让错误状态不再使人沮丧

错误状态通常都会让用户产生不好的感觉,尝试通过一些个性化,有趣的错误状态设计让这种消极变为有趣的经历。

我最喜欢的一个实例就是Google Chrome浏览器的没有互联网连接状态的提示页,这个页面提供了所有必要的信息,告知用户要如何去解决它们,除此之外,还提供了一个怪兽赛跑的游戏,非常有趣。

另一个很有趣的页面是Dribbble的404页。它之所有有趣,是因为用户可以参与其中,调整下方的滑杆就可以改变404的动画颜色。

07.让你的设计动起来

动效设计在现在的设计过程中变的越来越流行。动画可以采取自动播放的形式,也可以采取当用户与页面元素发生交互是进行运动的形式。

良好的动效并不是我们经常会在Dribbble上看到的那种。用户期待看到动效,但是这种动效必须基于真实的物理效果和运动原理,而不能想当然的随便乱动。例如,我在房间里踢一个球,那么在整个过程中它的速度不会一样。它会在开始时快速运行,然后由于失去动力而减速。这就是缓动的作用-它使动画的速度更逼真。这也是动画的基础部分,将使具有运动感的任何应用程序更加真实。

随着Principle,XD,AE,Flinto等工具的兴起,设计人员可以更方便的在自己的设计稿中增加动画效果。个人更喜欢使用Adobe XD的自动动画制作工具来完成,在投入大量时间进行细节设计之前,这种方式可以让我迅速检查运动创意是否有效。

另一个我经常使用的工具是Airbnb的Lottie。它可以让我轻松将AE动画转换成对于网络支持更好的SVG动画。

与插画设计类似,动画也应该具有目的性和针对性。它们的主要作用是丰富用户的体验,而非分散用户的注意力。google的物料设计可以帮助你建立动画标准。请务必牢记这个法则:动画不应该让用户放慢操作速度。

08. 通过微交互来表现小细节

与动画类似,微交互为用户带来了意想不到但值得称赞的体验。它们可以让你的应用程序体验模拟真实世界中的感觉,并为用户操作提供及时反馈。

Medium中的鼓掌效果是如何增强与应用程序交互体验的一个很好的例子。将Medium里的拍手效果和YouTube的“赞”相比,是完全不同的用户体验。YouTube中,单击时仅仅将颜色从灰色变更为蓝色。但是YouTube中,微交互可能会分散用户观看视频的注意力,因此这不是添加微交互最好的地方。

09.在设计中加入图案和渐变效果

图案和渐变是使不吸引人的内容变的更加醒目和美观的另一种好方法。在图像后面或者背景上添加简单的图案和渐变,可以让原本平淡无奇的设计增添不少乐趣。

但是请记住一点,你所做的所有这些都不应该分散主要内容。

10. 利用阴影增加纵深感

设计时不要忘记Z轴哦,设计空间其实也是“3D”的。

阴影是在设计中增加纵深感的一种好方法,可以让你的设计稿更有立体感。这种纵深感有助于在应用程序中创建信息层次结构。用户会认为纵深度代表信息重要程度,越靠近用户的元素优先级越高。

但是请注意,不要因为使用阴影看起来好看,就不分场合滥用它们。在设计决策时要有目的性,添加阴影前,请务必记住这些元素的重要程度。

在做如何决策之前,你都应该明确一点,这样做可以改善用户体验,而不是单纯为了美观。我已经提到过很多次,不要忘记应用是为用户完成某种目标而设计的,不是单纯为了好看。除非你做设计仅仅是为上Dribbble热推,那真是疯了。

0 人点赞