首页 AI人工智能 APP源码

高手如何从零开始设计 UI 界面?这个实战案例告诉你!

这是 UI 设计师 Diana Malewicz 的一篇 UI 界面设计的分享。怎样在保证基本的可用性和易用性的同时,让界面柔和、富有亲和力?如何在让用户愉悦的同时,还能用设计取悦自己?Diana 的方法谈不上有多神奇,但是让人眼前一亮,值得借鉴。

真的关注趋势变化,你会清晰的感受到,视觉效果和设计技巧一直在变……它们一直是设计师们的话题中心。但是这篇文章并不打算讨论这个事儿,无论渐变是否流行,新拟物化的可访问性是否不足,都不在今天的讨论范围内。

对于各种风格、方法,我的观点始终是:做出来的设计要可用,有用,有良好的可访问性,用户可以轻松理解,就行了。不过,我更乐于从趋势中获得乐趣,而不是将它视作为约束,如果每个界面看起来都是一样的,那该是一件多么无聊的事情啊。

关键在于,要让产品的视觉样式和你的用户群体匹配起来。

我个人非常喜欢漂亮的渐变和微妙的阴影,这样的设计常常显得魅力非凡。这种自然的过渡和光影的变化,非常贴合我们对于现实世界的感知,这就是为什么这样的设计能够俘获大量没有技术背景的用户的心——因为它们看起来友好,并且易于理解。

在这篇文章当中,我将分享如何将 UI 效果设计得出彩又友好,让视觉效果柔和又让人感觉舒适。本文围绕着一个「面向年轻人的金融 APP」虚拟设计项目来进行展示。

下面我们开始吧!

视觉层次的一致性

怎么让我们的设计看起来柔和圆润呢?下面开始准备工作:

1、选择想要使用的配色(想想使用柔和的粉彩构成的背景主色调,搭配一个给人精致感的次要色,以及一个抓人注意力的强调色。)

2、选择合理的字体(我用的是 Brandon Grotesque,这是我最喜欢的字体,它足够友好,能够营造有趣的氛围,且具有良好的可读性)。接下来,给字体设计不同大小和字重(最好不超过5种不同的样式)。其中,标题字体应该较大,正文字体较小,最小的字体用于细节呈现。注意,尽量不要在长句子里面使用全大写。

3、确定你所需要的阴影的高程(Height)和模糊度。

4、如果使用的是图标,确定使用填充样式还是描边样式。尽量不要混用。

至此,一个小型的设计系统就已经确定了。挺好看的!