UI界面看起来太low?这些实用技巧可以提高UI界面的高级感!

原标题:UI界面看起来太low?这些实用技巧可以提高UI界面的高级感!

大家在学习交互设计、平面设计等专业作品集时,可能会涉及到UI的设计,但不少同学设计的UI界面会存在“很low”的问题。

那有哪些技巧可以提高UI的高级感吗?本期克瑞斯便汇总了以下实用技巧,快来看下吧~

1、强化层次结构,提升UI的清晰度

对于信息层级,要处理好“字体大小”、“重量”、“颜色”、主体与背景等元素的关系。

•字体大小

字体大小通常会按照标题、副标题、正文、引用说明等常见的文本元素构成。

大标题应当突出,正文应当清晰明了,副标题起到的是对标题的辅助说明作用,所以应当适当缩小,这样一来,文本元素之前的大小关系,位置关系都更加清晰了。

•主体与背景

我们的大脑将视觉区域分为主体和背景 2 个部分。这个特征有利于我们对重要信息和次要信息的感知。

主体和背景的区别可以从以下两个方面来控制:

场景大小:我们倾向于将处于大场景中的中间小区域部分视为主体,而大场景视为背景;

层级关系:如果在同一个平面中,我们倾向于将处于视觉第一层级的物体视为主体。

在处理背景与主体的关系时,要注意对比度,比如在浅色背景下设计时候,避免使用过浅的文本浅,这样会导致阅读比较累。

通过强化层级结构,可以将界面中的元素优先级进行强化,明确的信息优先级会使得界面更易于阅读,也利于产品信息的传播;也可以让用户优先看到我们想让他们看到的事物,进而引导用户行为。时刻记住:信息传达要足够清晰,而不是模棱两可。

2、提高版面的呼吸感

提高版面的呼吸感,要注意字体的间距、行高、行长、重量感。

•行高

行高本身并不存在一个标准的数值,它通常取决于字体本身的特征以及设计需求。行高过低,会造成面页面拥挤,让用户失去阅读的耐心。

通常来说,字体大小越小,相对行高就要设置的更高,当字体大小变大时,同样的,减少行高会更好。

•字间距

字间距指的是文本在横向上的间距。在英文字体当中,字间距通常会遵循下面的准则:

使用大写字母的时候,需要增加字间距;

字号增加的时候,需要适当减小字间距;

增大字体粗细的时候,需要适当减小字间距。

•行长

行长是指文本段落的宽度,文本每行的长度。通常,文本的行长要控制得相对短一点,这样易于阅读。

在大屏幕上,比如 1440px 宽度的笔记本电脑屏幕上,使用每行 60~80 字符的长度(中文通常控制在每行 35~42 个字之间),但是,如果在是移动端的屏幕上,那么每行的字符数要缩短到 35~45 这个范畴(中文则可以控制在20~25个字即可)。

•重量

通常文字颜色越深,重量感越大;越浅,重量感越小。

而对于大段的文字内容,整体看起来会比较有视觉压力的,有时候运用正常文本字看起来依然有些沉重,不妨将字体的颜色变浅一些来优化这个问题,使文本看起来更舒服些。

•大胆使用留白

留白也是提高版面呼吸感的重要技能之一。在这个信息过载的时代,尽量给用户以舒适通透的体验。不要过度追求信息的饱和度,通过合理使用留白,能让界面有呼吸感,也可以让页面留下的元素更突出。

3、提升页面的一致性

•使用同一字体家族

如果你在不同字体的搭配上,并没有足够丰富的经验,那么使用同一字体族的字体来进行设计,总是最为安全的选择。通常,一个字体族是为一个明确的目标来设计的。它们有着更为统一的、富有凝聚力的外观,在设计使用过程中,会更加便捷。

•减少配色数量

不要总是用多种颜色来填充你的设计。如果项目允许,简单地使用少的配色。通过选择一个基础色,然后使用色调和阴影,可以简单快速地增加设计一致性。

•确保图标有相同的视觉风格

在UI中使用图标时,要保持一致性。确保他们共有相同的视觉风格,相同的重量,填充和描边。

4、使用对齐提高可读性

对齐是版式设计的最重要的原则之一,对齐可以建立一种整齐的外观,带给用户舒服的浏览体验。

基于从上到下,从左到右的阅读习惯,应用在界面设计中,一般是左对齐、居中对齐和右对齐,同时同一竖线上的元素,要保持居中对齐。

在世界上绝大多数的国家和地区,所使用的文字排版都是从左到右的(比如阿拉伯语就是反过来的),阅读顺序是自上而下的。这决定了左对齐是确保可读性的重要基准。