无形的力量:空间和形状

  2016-08-25 12:34

上一篇文章里,我们学到了怎样利用字体大小和变化比率来使你的设计干净和谐。在关于设计无形力量的最后这篇文章里,我们将学习如何巧妙地使用空间,也就是通常我们所说的“空白”或“留白”,来使你的设计沟通更流畅。

你的“数据墨水”比

谨慎地使用空白可以得到更高的“数据墨水比”。这是由信息设计师 Edward Tufte 提出的概念。这是计算每一滴墨水(在移动端和网页设计中则是每一个像素)能传递多少信息的函数。

上图中左边图表的数据墨水比例要大于右边的图表。这种图表真的需要用“墨水”填充吗?不,仅仅是点和线已经表达得很清楚了。

再加把劲儿,把线也删除掉,只留下这些点会如何?

现在,信息的传递已经破裂了。是的,你现在仍旧能看到这些数据,但已经无法直观地看到数据是如何随着时间波动的。此外,它和那种不包含时间变量,且数据非线性波动的散点图很难区分开来。

 临近的项目看起来相关

在这个系列的[第一篇文章][4]里,我们学到了怎样利用元素的排列表达元素间的关系。更重要的是,它还能传递出这些元素彼此有多相近。

下面是一个简单的方块网格,它看起来像地板砖。

如果把相邻两列方块间的水平间距调大,将得到一系列纵列。

像上面的图表中的数据那样急剧变化的时候,大脑倾向于错误地排列点与点之间的联系,因为他们之间的距离过于接近。

使用留白做出更好的布局

这些原则不单单是针对线性表格的。他们存在于你设计里的方方面面。尤其是在为小屏幕设计的时候,你不想让像素浪费,想让你的设计具有更高的数据墨水比。

设计师在布局时倾向于使用网格组织信息。利用网格使像线和文字这样的元素对齐将产生带有相近信息的区域。

这是利用网格设计的一种基础布局。左手边是导航,更大的区域放置主体内容。

这样的布局没有问题,但请注意导航处的空格与主体内容每一列间的空格是相同的。

稍微加宽页面导航与主体内容区之间的距离会更好些。

现在导航与主体内容的轮廓更加分明了,为此我们仅仅是增加了一点点空格。

使用留白创造更加清晰的排版

[上篇文章][7]我们学到了字号大小是众多用来创造布局层次感的因素之一。你也可以利用空白来组织布局。

例如,看看下面的标题、元数据和正文。

因为字号是基于固定的变化比例来选择的,他们看上去彼此很和谐,但还是颇有些凌乱。

这是因为没有考虑元素之间的留白。

元数据那一行已经很好地和标题区分开了:字号不同,字母全部大写,甚至留出了一点点空间。

这里有一种很好的技巧是利用元数据的字体高度来确定它和标题间的空间。就像这样:

你通常是用你的眼球来测算这个空间的。没有一种数学方法可以准确计算出这个空间应该是多少。那将是一个有关行高、内填充外边界的总和,以及其他字体特征的函数。

 现在,正文要怎么办?

元数据可以和标题很近,但标题和正文之间没有这个必要。事实上,标题和元数据是一个单元。

可以计算出标题顶部到元数据底部之间的距离,然后把这个距离的一半作为元数据与正文之间的距离。

 结论

注意思考空白对布局和信息传递的影响,你的设计将会看起来更加干净清晰、更加有用,转化效果也会更好。

这个打包的系列教程就到此结束了,没有看过的话,一定要去看一看系列中的第一篇第二篇

(粗略翻译,不足之处,还望谅解)

原文:Invisible Forces: Spacing and Shape
作者:David Kadavy

你好,游客!(点击更改信息)

您的电子邮件不会被公布,带*为必填。


  •   正在提交中,请稍候...
      评论提交成功
    回复 的评论,点击取消回复。