怎么提升你的UI设计?

UI设计是对软件的人机交互、操作逻辑、界面美观度的整体设计。好的UI设计不仅要让软件变得漂亮舒适,还要充分考虑到用户的操作问题。掌握一些移动APP的设计技巧,才能够更轻松的应对设计工作。

如何觉得你的UI设计水平还不行,这里有一些我最喜欢的方法,可以让你的设计更加个性更鲜明。

让文案变幽默

无论是登录屏幕还是加载消息,用户都可以从这些小细节中获得乐趣。这就是为什么像Old Spice和Geico这样的公司拥有如此知名品牌的原因。通过在他们的营销中注入幽默感和个性化的设计,他们创造了更令人难忘的广告和内容。

MailChimp用户体验总监Aarron Walter说:“我们已经发现在副本中加入幽默、个性,以及许多塞进工作流的复活节彩蛋都可以把原本平凡的任务变成人们期待的体验,有时甚至是错过的体验。”

将生命注入复制中,这与说“正在加载...”与“我们训练有素的团队正在努力做到的”是有区别的。这是出乎意料的,并为你的用户提供了一点娱乐。

好的文案并不一定意味着它必须幽默。它只是意味着写一篇引人入胜、值得一读的文章。当然,在一些领域,如,医院、政府等地的应用是不合适的。

Reddit的联合创始人Alexis Ohanian在《Tools of Titans that I loved》中说了一些我非常喜欢的一句话:“花点时间使它更具人性化,或者(取决于你的品牌)更有趣、更不同、或者更多。这是值得的,这就是我的挑战。”

在你去设计你的下一个产品时,请考虑如何将体验与引人入胜或有趣的副本结合在一起。

 

放入一些图标和表情符号

添加表情符号和图标可以帮助快速描述元素的功能。就像是当用户看到放大镜图标时,可以立即识别出他们可以通过单击来搜索内容。

我喜欢Pieter Levels如何利用他的网站NomadList上的表情符号来使其更具吸引力和用户友好性。这是使UI更具视觉吸引力的简单但有效的方法。

除此之外,关于这一点没有太多要说的了,不要过度使用它,也不要通过尝试过度创意来重新发明轮子。用户认识到某些元素具有全局意义。因此,请勿通过干扰用户熟悉的内容来使用户感到困惑,尽可能尝试使用已有的约定。一个用户图标代表一个用户配置文件,一个“+”图标代表添加,一个购物车代表购物车,一个齿轮代表设置,等等。

 

通过插图使你的产品更具人性化

插图使你能够以轻松愉快的方式传达复杂的信息。

在我们还小的时候,我们就已经接受过将视觉与文字和思想相关联的培训。你见过没有插图的儿童读物吗?

添加插图可以帮助缓解心情并平衡界面。插图可以吸引用户的注意力,并使应用程序的各个方面更易于理解。

但是,更重要的是,插图要有目的性,并用作内容的补充,而不是替代。插图应重点突出,并提供对UX的改进,而不是干扰操作。与插图的颜色和样式保持一致也很重要,这样它们就不会显得格格不入。

 

添加一个黑暗模式选项

来源ProCreator

根据你正在开发的应用程序,添加深色主题选项可以为像我这样生活在深色模式下的用户提供安慰。黑暗模式对眼睛更友好。

在黑暗模式下进行设计与在明亮模式下进行设计没有太大不同。它所需要的只是一个不同的调色板。我建议让用户决定在暗模式还是亮模式之间进行选择-提供在两种模式之间切换的能力将改善您的应用程序体验,并允许用户保持对其体验的控制。

 

使用高质量的图像

Elena Petkovska

应用程序中的图像与其他任何视觉元素一样重要。你选择的图像中的视觉效果可以使UI更加生动生动,从而增强你的UI。

 

把错误状态变得更有趣

看到应用程序中的每个事件,即使不是那么令人兴奋的事件,都可以提供令人难忘的体验。

错误状态通常是消极的经历,但你可以通过提供一些个性或乐趣来将其转变为积极的经历。

我最喜欢的示例是Google Chrome浏览器的“没有互联网”错误屏幕。他们提供了所有必要的信息,以告知用户如何修复它,而且还提供了T-Rex无尽的跑步游戏。

我最喜欢的另一个是Dribbble的404页面。它之所以出色,是因为它可以使用户参与其中,并且他们可以快速返回浏览涂料设计。

“人们仍然在推特上发布关于我们在Hipmunk上的错误推文,这是一条错误消息。他们为什么要这样做?因为这样做使他们在做一些原本希望很无聊的事情(例如寻找航班)时显得举足轻重。” -Hipmunk的创始人Alexis Ohanian说。

 

让你的设计动起来

运动很快就在设计过程中变得更加根深蒂固。运动可以采取插图的形式,动画自己或移动发生时,用户与页面上的元素交互。

 

在Dribbble上,运动并不是一件简单的事情。用户现在期望它。用户认为他们在屏幕上的体验将类似于他们在现实世界中所熟悉的体验。他们还期望物体的动量和速度根据它们惯常的物理原理运动。

这就是宽松政策的用武之地。如果我把球踢过房间,它不会一直以相同的速度前进。一开始它会走得很快,然后当它失去动力时就会慢下来。这就是缓动所做的——它使动画的速度感觉更像生活。它是动画的基础部分,将使任何运动的应用程序感觉更真实。

随着诸如Principled、XD的自动动画,Invision Studio、After Effects、Lottie、Flinto等工具的兴起,设计人员可以在其设计中添加更多的可能性。

我更喜欢使用Adobe XD及其自动动画原型制作工具—它很直观,而且在投入大量时间之前,我可以快速查看运动创意是否有效。

我最近经常使用的另一个很棒的工具是Airbnb的Lottie。Lottie使我可以轻松地将任何After Effects动画转换为网络友好的SVG动画。如果你想尝试一下LottieFiles,但不想学习如何使用After Effects,请查看LottieFiles以获得免费的动画。

与插图类似,动画应该是有目的性的(在这里开始注意到趋势了吗?)。他们应该致力于丰富体验,而不是分散用户的注意力。动画很容易使人大吃一惊,但是幸运的是,有一些设计资源,例如Google的材料设计,可以帮助你建立运动标准。请牢记一个好的经验法则- 动画不应使用户放慢速度。

 

通过包括微交互来关注小细节

Danny Sapio — Dribbble

与动画类似,微交互为用户提供了微妙的体验,这是不被期望的,但也是值得赞赏的。它们允许应用程序中的体验模仿真实世界中的体验,并为用户操作提供即时反馈。

中度鼓掌是使用微交互如何增强与应用程序交互体验的一个很好的例子。

 

将媒体上的掌声与YouTube上的“赞”按钮相比较——这是一种完全不同的体验。在YouTube上,没有互动和体验——它只是在点击时从灰色变成蓝色。然而,在YouTube上,微互动可能会分散观看视频的注意力,所以这里不是添加视频的最佳地点。

 

加入一些模式和渐变

Whimsical’s sign up screen

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

对于模式,你可以尽可能地有创造性,也可以尽可能地简单。不过,它们不应该偏离主要内容。

 

利用阴影来增加深度

设计时不要忘记z轴!

阴影是在设计中增加深度的一种好方法,它可以使你的生活看起来更加立体。

元素的高度可以帮助你在应用程序中创建信息的层次结构。用户认为深度代表了重要性-因此,越靠近的元素优先级越高。

但是,仅仅因为阴影看起来不错,并不意味着它们始终是不错的设计选择。在设计决策时要有目的性,并在添加阴影时要记住这些元素的重要性,这一点很重要。

在做出任何设计决策时,你应该始终这样做以改善体验,而不仅仅是美观。我已经提到过几次,因为我想开车回家。不要忘记,应用是为使用而设计的。不只是因为好看才被人看的。除非你仅为Dribbble设计,否则就别着急了!

 

来源:Danny Sapio:10 Ways to Spice Up a UI Design

 

推荐阅读

9个构建视觉层次的有效提示

如何使用网格来改善视觉层次结构?

网页设计中的5种基本图像类型

黄金比例在UI设计中的运用

用户界面的3C规则:颜色、对比度和内容

UI设计中负面空间的重要性

用户体验:对设计一致性的洞察

本页面最后更新于 2021年06月11日 11:09