|
留白是一个活跃的元素，而不是被动的背景。它是界面设计中最宝贵的资源，页面上的留白，虽然经常被忽视，但它跟UI元素所占用的空间一样重要。 01 .认识留白 在介绍如何使用留白提升用户体验之前，我们需要先明确留白的意义。 留白是页面元素与元素之间，以及元素周围的空间。当设计师谈论留白时，实际上说的是负空间，术语“负空间”起源于传统艺术形式，它让我们更准确地捕获物体的形状。 ▼ “Suprematism: Self Portrait in two dimensions” 负空间就是元素之间的部分 by Kasimir Malevich 虽然我们称之为留白，但并不意味着就是白色的。只要该空间没有任何的文字和图像，即使被填充了任何颜色，这也算是一个留白。所以留白与实际的白色并没有关联，“留白”就是“负空间”。 ▼ 02 . 为什么留白很重要 留白是一个好设计的基本要素，与传统艺术一样，物体在GUI里也需要负空间，文字，Button，Logo，和其他元素需要空间去呼吸，所有优秀的用户界面里，从顶部到底部，页面中所有的元素都有适当的留白。 空白可分为两种类型：大留白和小留白。 ▼ 大留白 小留白
Note小留白：文本和网格之间的空白，它有助于内容的可读性。大留白：页面上主要元素之间的空白，与小留白不同，大留白是整体设计的容器。 03.七种影响用户体验的留白 留白是平衡设计元素的好工具，帮助我们更好得组织内容，提升视觉信息传达的体验。 — 1 强调特定元素 —强调某种元素，是设计师最常见的任务之一，虽然设计师可以用许多视觉方法让用户聚焦在某些特定元素上，在焦点的周围运用留白往往都能获得比较好的效果。 距离和注意力之间有特定的联系，较大的距离能吸引人的注意，周围的缺失使现有的元素更佳突出。设计师会运用合适的留白去强调重要的元素，例如一段内容，较大的Padding值会加强这个区域的吸引力，因为屏幕上没有其它元素可关注。 物体周围的留白越多，就越容易吸引眼球。 在下面的例子里，Google在设计中大力倡导留白，留白很好地传达了设计的意图，我们的注意力在页面的主要目标上，不会分散给其他区域。 ▼ MailChimp的主页运用了相同的方法，来突出操作按钮（call to action），你会注意到“Sign Up Free”这个按钮立刻吸引了人的注意。 ▼ — 2 链接相关元素 —当我们在检查元素布局时，通常把它看做是一些对象的组合，这是因为我们的大脑会根据物体之间的相对位置，来创造一个关系模型。格式塔的法则解释了，临近的物体会被看做是一个整体。留白也提供了一种视觉线索，看一下这张图： 很可能你看到的是两组点阵，而不是12个原点，这是12个相同的点，唯一不同的是他们的间距不同。 这个法则也可以用于交互设计，我们来看下面的Web表单。 - 相关元素成组：我们知道，一组元素靠在一起时，看上去是有关系的，所以相关的标签要靠得近。左图较难传达出标签与输入框的关系，而通过调整间距，如右图，表单的可浏览性提高了。
| 
