掌握在UI交互设计中正确使用留白的技巧,以快速提升界面设计高级感

Less is more 是20世纪30年代著名的建筑师路德维希·密斯·凡德罗说过的一句话,意思是“少即多”这是一种提倡简单,反对过度装饰的设计理念。简单的东西往往带给人们的是更多的享受。

同样少即是多也是一种高级的简约的的UI设计风格,这种思想指导下的界面设计,不会一味地要求设计师在界面上堆积元素,而是会从界面的各个方面(从组件到页面,从微观到宏)考虑如何恰当地加入空白的应用。

学会正确地使用留白,可以获得一个和谐、清晰易读的界面。更重要的是,这种思路下得到的界面,通常有效且易于使用。通过日常的教学,UXD老师为同学们总结了7个有用的设计留白技巧,包含:

01.遵循邻近法则
02.确定留白基线
03.集中特定设计元素
04.统一的测量空间方法
05.使用间距系统
06.避免相似间距值
07.适当调整行距
下面我们就逐一带大家了解每个技巧的具体使用方法,帮助同学们找到界面设计过程中的节奏感。
#01
遵循邻近法则

UI中元素之间的空白量指示元素之间如何关联,该定律表明:
1.相关元素应相距较近,相反,不相关的元素应隔开。
2.相同“类型”的元素应均匀间隔。
请遵循这些基本规则,以帮助用户轻松组织和感知UI中的逻辑分组。

空白与文本的大小,粗细和颜色紧密配合,以传达界面中元素的层次结构。

#02
确定留白基线
基线可以让你的设计保持疏松和呼吸感,改善界面可用性的可靠方法是,确保所有元素之间都有足够的留白空间。
此处的控件之间的距离太近。
此处的控件间隔适当,因此效果更舒适。
对于大多数UI来说,拥有正确的留白通常比没有留白要美观、工整很多。
#03
集中特定设计元素
页面上较少的信息和元素可以让界面清楚和突出重点,并让用户注意到显示在页面上的信息和元素。
留白也可以是一种强调文本的有效方法,它可以与提高文本大小或更改文本的颜色、大小写或粗细结合使用,甚至可以替代。
.
.
.
这句话被空白包围着,就是一个很好的例子。
.
.
.
使元素变大或变亮并不是吸引人们注意的唯一方法,留白反而是即可以保证设计精致又能突出设计重点的方法。
#04
统一测量空间方法
相邻文本元素之间的间距,可以通过以下两种方法之一进行测量。

1.在相邻的“边界框”之间

大多数UI渲染引擎(例如,网页上的文档对象模型)都是通过这种方法来测量相邻元素之前的间距的。但是此方法不是特别精确,因为每个边界框的顶部和底部都存在多余空间。
测量相邻“边界框”之间的空间。

2.在相邻文本高度之间

下面的这种测量元素间真实间隔的方法更精确,但可能实现起来比较复杂。
测量相邻文本高度之间的空间。
两种方法都是合理的,但是要权衡取舍。这里需要强调的是,在设计和实现中都使用相同的空间测量方法,这样可以确保将设计准确地转换为代码。
#05
使用间距系统
间距系统指定要在设计中使用的一组视觉观感较好的间距值,使用间距系统可以帮助给UI带来一致性和和谐感。
在间距系统中只需要几个值。上图案例中使用四个不同的间距值,即12、16、32和56,构建了间距系统。
间距系统会迫使你从一组受约束的选项中做出UI设计决策。有了间距系统后,你只需在UI设计过程中考虑系统中的少数间距值,这使设计迭代更快,更系统。
#06
避免相似间距值
当间距值在数学上不同,但在视觉上过于相似时,用户在UI中感知逻辑分组的方式可能会变得模棱两可。对比很重要!如果你要使两个间距值不同,则需要很明显地看出它们实际上是不同的。
每个“动作行”上方和下方的空间太相似,因此尚不清楚每个动作行应与哪个视频相关联。
每个“动作行”下方都有足够的空间,有助于阐明每个视频及其相关动作之间的关系。
考虑使间距系统中的值“散布”区域更宽,这可以使得相邻间距值之间在视觉上有明显的差异。
这是一个非线性间隔系统,具有从一个间隔值到下一个间隔值的逐渐增大的增量。
#07
适当调整行距
UI设计中,不需要可以保持相同的比例行高,因为增加文本大小将导致字号较大的每行文本之间有太多空白。在实际操作中遵循字号越大,比例行高越小的原则,比如大标题的比例行高通常应小于正文的行高。
这两行文字彼此相距太远。
当使用较小的行高时,两行文本被视为一个视觉组。
#08
适元素关联

在信息密集的UI中,除了空白以外,还需要依靠其他技术来传达界面中的元素如何相互关联,例如:

·在一组相关元素周围添加填充或边框;
·使用一条线将垂直排列紧密的相邻元素分开,或者,使用(“·”)分隔水平排列的相邻元素;
·更改文本的大小、大小写、粗细或颜色,以关联或区分UI元素。
通过减少空格,减小文本大小以及添加细微的水平线来确保相邻行在视觉上彼此不同,从而提高信息密度。
使信息更加密集可以提高其使用效率,信息密集的界面只要通过合理的信息分层,不一定会令人感到混乱或不堪重负。
了解空白的一种有效方法(一般而言指UI设计)是临摹练习:从你喜欢的设计中选择一个或多个界面,然后完整地重新创建它。通过这种临摹练习,你将深入了解许多这些优秀的设计中容易让人忽视的小细节,并了解上述有关空白的技巧如何在精心设计的UI中实际发挥作用。
为什么界面“看起来正确”背后一定是有原因的,通过经验和实践,可以磨练如何在设计中应用留白的视觉感和直觉。
(0)

相关推荐