Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory

无形的力量:间距和造型

by
Length:ShortLanguages:
This post is part of a series called Invisible Forces in Design.
Invisible Forces: Size, Contrast, and Balance

Chinese (Simplified) (中文(简体)) translation by Yushine (you can also view the original English article)

在前一篇文章中,我们了解了如何使用尺寸和缩放来使你的设计平衡和清晰。 而这是关于设计中看不见的力量的最后一篇文章,我们将了解如何使用间距(通常称为“空白”或“空白”)可以有效地使你的设计进行高效的传达。

“数据/墨水”比率

使用留白越多,“数据/墨水比率”越高。 这是信息设计大师 Edward Tufte 介绍的一个概念。 这是一个功能,即每一滴墨水所传送的信息量,或者在移动和网页设计的情况下,每一个像素。

左侧的图表具有比右图更高的数据/墨水比率。 图表真的需要用“墨水”填充吗? 不,它与点和线路通信很好。

如果你再走一步,删除线条,只留下圆点,如何?

现在,信息已经分崩离析了。 是的,你可以看到所有数据点,但现在你已经失去了关于数据随时间变化的“故事”。 此外,与简单的散点图不同,变得难以区分,其中“时间”不是变量之一,并且数据不是以线性方式进行。

靠近的项目被认为有相关性

本系列的第一篇文章中,我们了解了元素的对齐方式意味着这些元素之间的关系。同样重要的是,这些元素是如何彼此接近的。 同样重要的是,这些元素是如何彼此接近的。

这只是一个简单的正方形网格,就像地板上的瓷砖。

但是,如果你在垂直的正方形行之间创建更宽的水平间距,现在你有一系列的栏。

所以,当上图中的数据发生剧烈的变化时,注意力可能会用错误的顺序来连接点,只是因为一个点更靠近另一个点。

使用留白进行干净的布局

这些原则是超出线形图的延伸方法。 他们在你设计的一切中。 特别是当你设计小屏幕时,你不希望像素浪费,你希望以高的数据/墨水比率进行设计。

设计师倾向于使用网格来帮助组织布局中的信息。 网格帮助对齐元素(例如文本行),然后创建彼此相关的信息区域。

这是一个基于网格设计的基本布局。 左侧是你的导航,较大的区域是主要内容。

这个布局很好,但注意导航的留白和主内容区域内的文本栏之间的留白是相同的。

稍微加宽导航和主要内容区域之间的gutter 【栏距】是有意义的。

现在导航和主要内容之间有更清晰的界定,我们所做的只是添加一点留白。

使用留白让排版整洁

前一篇文章中,我们了解了尺寸是创建排版层次结构的许多因素之一。留白也可以帮助你组织排版。 例如,查看这个标题,摘要数据和正文。

例如,查看这个标题,摘要数据和正文。

他们彼此之间具有协调的尺寸关系,由于事实上他们的尺寸是从不同的规模中选出来的,但是他们看起来很草率!

问题是这些元素之间的负空间没有被考虑。

摘要数据已经和标题很好地区分开来:它的大小不同,全部大写,甚至有一点间隔。

一个很好的技巧是使用摘要数据类型的高度来确定它和标题之间应该有多少空间。 比如这个:

一般来说,你将使用你的眼球找出这个间距。 没有数学方法能够准确地告诉你有多少间距。 它是线高度,你使用的边距或填充量以及特定字体的特征的函数。

现在,正文怎么样?

摘要数据非常靠近标题是有意义的,但标题不需要如此靠近正文。 事实上,标题和摘要数据可以作为一个单元。

你可以使用标题顶部到摘要数据底部的距离作为指导,并放置在和摘要数据和正文之间的距离的一半的位置。

结论

通过思考如何构造你的布局和与用留白来传达,你的设计将看起来更干净、更清晰、更可用、更好地转换。

现在行动起来 - 如果你还没有,请务必查看系列的第一篇第二篇文章

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.