优秀的UI设计是在界面的所有尺度上，包括从组件到页面，从微观到宏观，都要深思熟虑地使用留白。如果留白运用得当，能够让界面和谐、清晰，更重要的是有效和易用。

　　UI设计中的八个应用技巧

　　1.遵循相近法则

　　UI中元素之间的留白量表明了元素之间的关系。根据邻近法则：

　　1.相关的元素之间的距离应该更近。反之，不相关的元素应该间隔较远。

　　2.同一"类型"的元素应该均匀地分开。

　　遵循这些基本规则，可以帮助用户在你的UI中轻松地组织和感知逻辑分组。

　　白色空间与文本的大小、重量和颜色携手合作，以表达界面中元素的层次结构。

　　2.从增加页面中的留白开始

　　让你的设计有唿吸感。提高界面可用性的一个可靠方法是确保所有元素之间有适当的空白。这里的表格控件间距太近，这里的表单控件间距适当，因此在视觉上更舒适。当然，也有例外，但对于大多数用户界面来说，使用大量的空白通常比没什么空白要好。

　　3.使用间距系统

　　间距系统规定了设计中可能使用的一组间距值。使用间距系统有助于为UI带来一致性和和谐感。在间距系统中，你只需要少量的数值。这里使用了四种不同的间距值，分别是12、16、32和56。间距系统对空白作用就像调色板对颜色的作用一样。间距系统迫使你从一组有限的选项中做出UI设计决定。有了间距系统，在UI设计过程中，你只需要考虑系统中的少量间距值。这使得设计迭代更快、更系统。

　　4.在设计和实现中使用相同的方法来测量空间

　　相邻文本元素之间的空间可以用以下两种方法之一进行测量。相邻"边界框"之间，这种方法是大多数UI渲染引擎（例如网页上的文档对象模型）测量空间的方法。然而，这种方法并不是特别精确，因为在每个边界框的顶部和底部都有多余的空间"未被计算"。测量相邻"界框"之间的空间，相邻“字母高度”之间，这种方法比较精确，但操作起来可能比较复杂。，测量相邻“字母高度”之间的空间。这两种方法都是合理的，但有不同的取舍。重要的是，在设计和实现中都要使用相同的测量空间的方法。这是为了确保设计能够准确地转化为代码。

　　5.避免使用视觉上过于相似的间距值

　　当间距值在数字上不同，但在视觉上过于相似时，用户对UI中逻辑分组的感知方式可能会变得模煳不清。对比很重要。如果你的意图是让两个间距值不同，那么就要让人很容易看出它们实际上是不同的。

　　每个操作，距离上下内容的空间太过相似，不清楚每个动作行应该与哪个视频相关联。在每个操作下面有足够的空间，有助于明确每个视频及其相关动作之间的关系。考虑在你的间距系统中，有更宽的数值"分布"，相邻间距值之间有明显的视觉差异。这是一个非线性间距系统，从一个间距值到下一个间距值的增量越来越大。

　　6.使用空白将注意力集中在特定的设计元素上

　　减少页面上的信息和元素，能够让页面更清晰，并且让用户的注意力集中到页面上的信息和元素上。空白是一种能够有效强调页面中文本内容的方式。它可以与调整文字大小，改变文字颜色和字重等结合使用，甚至替代以上方法。这句被空白包围的句子就是一个例子。让一个元素变大或变亮并不是吸引注意力的唯一方法。考虑到当所有的东西都更大、更亮、更重要时，其实所有内容反而变得不重要了。

　　7.在信息密集型的UI中，除了空白之外，还要依靠其他技术来表达UI中的元素之间的关系

　　比如说：

　　在一组相关元素周围添加一个微妙的填充或边框。

　　使用一条线来分隔垂直方向紧密堆积的相邻元素。或者，使用一个穿插字符来分隔水平排列的相邻元素。

　　改变文本的大小、大小写、重量或颜色，以此来关联或区分UI元素。

　　通过减少空白、缩小文字大小和增加一条微妙的水平线来增加信息密度，以确保相邻的行在视觉上被认为是彼此不同的。

　　使界面的信息密度更高，可以帮助提高界面的使用效率。请记住，一个信息密集的界面并不一定会让人感觉到杂乱无章或不知所措。

　　学习空白的一个有效方法是创建一个"母版"：从任何应用或网站中挑选一个或多个你所欣赏的界面，从头开始重新制作它的全部内容。你将深入了解许多小的设计细节，发现有趣的模式，并看到上述关于空白的提示如何在精心设计的用户界面中实际发挥作用。

　　一个界面"看起来是对的"是有原因的。通过经验和实践，你可以磨练你的视觉感受和直觉，了解如何在你的设计中应用空白。你的用户会为此而感动的。

　　8.随着文字大小的增加，降低行高

　　在保持相同比例的行高的同时增加文字大小，会导致每行文字之间有太多的白色空间。相对于文字大小，标题的行高比例一般应小于正文的行高。

　　两行文字相隔太远

　　当使用较小的行高时，两行文字会被认为是一个单一的视觉组。

Powered by Froala Editor