如何从零开始设计UI界面?

如题所述

如何从零开始设计UI界面?

如果你真的关注潮流的变化,你会清晰地感觉到视觉效果和设计技巧在不断变化它们一直是设计师的话题中心.然而,本文不打算讨论此事.渐变是否流行,新的准物化的可及性是否不足,已经超出了今天讨论的范围.

对于各种风格和方法,我的观点是:设计应该是有用的、有用的、可访问的、容易被用户理解的.然而,我更喜欢享受这种趋势,而不是将其视为一种约束.如果每个界面看起来都一样,那该是多么无聊的事情.

关键是要让产品的视觉风格和你的用户群相匹配.

个人很喜欢漂亮的渐变和细微的阴影.这种设计通常看起来很有吸引力.这种自然的过渡和光影的变化契合了我们对现实世界的感知,这也是为什么这种设计能够在没有技术背景的情况下俘获大量用户的心——因为他们看起来很友好,很容易理解.

在这篇文章中,我将分享如何将用户界面效果设计得辉煌友好,使视觉效果柔软舒适.本文重点研究了一个“青少年理财APP”的虚拟设计项目.

开始吧!

1.视觉层次的一致性.

如何让我们的设计看起来柔和圆润?让我们开始准备:

1)选择自己想要使用的配色方案(考虑使用柔和的粉彩作为主要背景色,搭配一种给人精致感的副色和一种吸引人注意力的强调色.)

2)选择合理的字体(我用的是BrandonGrotesque,这是我最喜欢的字体.足够友好,营造有趣的氛围,可读性好).接下来,设计不同大小和粗细的字体(最好不超过5种不同的样式).其中,标题字体要大一点,正文字体要小一点,细节呈现要用最小的字体.注意长句不要全用大写.

3)确定你需要的阴影的高度和模糊度.

4)如果使用图标,确定是使用填充样式还是笔画样式.尽量不要混用.至此,已经确定了一个小的设计体系.挺好看的!

2.为UI元素营造一种柔和梦幻的氛围.

在设计界面时,要注意棱角分明会让界面看起来严肃专业,而圆角则会充满亲和力.

自然的漫反射阴影也让设计看起来足够精致,所以在给元素添加阴影的时候,会加强视觉层次.不同的阴影效果给人不同的“仰角”感受.

阴影较暗的元素会更靠近背景,而阴影较亮、色散较宽的元素在底部会出现在海拔较高、远离背景的位置.这就是为什么很少有元素有很深的阴影,因为太多的元素会显得不自然.

选择元素并赋予其一定的模糊效果是一个需要不断尝试的过程.但是不要怕,这是一个调整参数的小游戏.以下是我设计界面时的一些参数设置.

如果想让阴影看起来更独特,尽量让阴影和前景元素使用相同的颜色,然后降低不透明度.理想情况下,背景应该有相似的色调.

3.让渐变看起来更平滑细腻.

为了让渐变看起来更舒服,可以从同一个配色方案中选择对比度强的颜色,甚至同一个色系的颜色,只需稍微调整一下亮度即可.

然后重新拉伸渐变,使颜色过渡更加平滑.这样的渐变虽然几乎看不到,但元素会有明显的凹凸感.

对于白色元素,可以选择类似于背景的颜色来做阴影,只要保证对比度就不会融合.

4.选择与背景相匹配的正确字体.

黑色和灰色是字体配色最经典的选择.但是,如果想让字体在视觉上与整个设计保持和谐,就需要在其中注入一些其他的颜色,使其与整个设计更加融合.比如这里用绿色背景,可以加一点绿色色调,这样协调性就很大了.

5.添加细节元素,使项目更具吸引力.

有些细节可能没必要.但个人喜欢引人入胜的小细节.通过这些“额外”的设计细节,让人感觉与众不同,其乐融融.

那么应该添加什么样的细节呢?

假设你的页眉是一个平淡单调的形状,让它变得柔和一点,加上一个小三角形,那么它就会变成一个对话框气泡,在界面和用户之间产生一种对话感.

如果背景是单调的白色,可以添加一些更具娱乐性的阴影,可以是简单的图标,也可以是其他.你可以简单的复制粘贴同一个元素,调整它的大小和角度,只要不影响前景的可读性.

对简单的数据展示感到厌烦?然后可以加一些小图标来区分,解释,展示.

让你的界面看起来尽可能有趣和有创意.如果不知道怎么办,可以用现实生活中的物品或者设计作为灵感.

最后,调整用户头像的细节.

一般来说,这一步完全没有必要...但是我每次都花很多时间调整这件事,可能是强迫症.

我会为我的原型选择一个漂亮的用户头像,但是她的妆容和整个UI界面的配色可能不匹配,这对于我这样的完美主义者来说是无法接受的.

所以我总是会多花一点时间来微调妆容,满足自己的强迫症.比如这种情况,我会从界面上取颜色,把头像中原本褐色的瞳孔微调成绿色的“化妆品隐形眼镜”,在头像上新建一层,使用PS混合模式给瞳孔添加颜色(不透明度50%).

现在头像终于完美了!

总之,UI界面设计的核心始终遵循一致性、可用性和良好的可访问性.但在遵循这些规则的前提下,要尽可能发挥想象力,创造出让自己开心的用户体验,发挥创造力.这样的UI界面会让人爱不释手!

温馨提示:答案为网友推荐,仅供参考
相似回答