空间是用户界面布局设计的基础构建块，空间无处不在 ！虽然经常被忽视为UI设计中的布局组件，但空间对网站和应用程序的可用性有直接影响。

在UI布局中有效地使用空间有助于提高可读性，从而提供反馈并将读者的注意力吸引到屏幕最重要的部分。在今天的文章中，我们将从空间和布局方面来探索UI设计。

正确获取UI布局

与UI设计有关的空间布局

空间是设计视觉语言的重要方面，与颜色、类型和图像一起，与用户界面布局和组成相关。空间可以帮助设计师为创造视觉呼吸空间，并引起客户的关注。它还可以帮助客户分辨并创建重点内容。

格式塔原则在空间中用得最多的就是图底关系。你设计中的所有元素都会被看作是一个图形或者是另一个背景，并且它们之间的关系实现互排斥的。两者都不会被感知，除了涉及到另一个。图底关系也是互补的。图形和背景的关系可能对比强烈或是对比减弱，并且在组织这两个彼此之间的关系是设计重要的方面之一。

当我们谈论UI设计中的空间时，我们指的是三个概念：接近、闭合和空白。

用户界面接近性

接近性是UI / UX设计中的格式塔理论的一个原则。接近原则是使用空间来连接元素和通过空间中闭合一些元素来分离元素。我们可能会想到的例子是页面上的文本段落。 段落与段落之间的空间大于一个段落中文本的行间距。

通常，设计人员将实现接近度来区分元素组，并为UI元素和图标组创建子层次结构。接近度是设计师的强大工具。它能够帮助用户与品牌建立有意义的联系。

Font Awesome库的UI布局

闭合原则（closure)

闭合原则是利用元素之间的间隙空间。观众用自己的信息来填补空白从而完成一个整体的部分。

大量的留空间和留空间太少都是闭合原则的忌讳。只有已有的空间和需要被填充的空间之间保持正确的平衡关系，才会使空间灵活并且产生闭合原则。

用户界面布局中的空白

空间在视觉上执行者同样的功能。它给元素提供呼吸的空间。通过设计它让眼睛自由移动，并且来发现它要找的元素。正形和负形形成对比。没有空间，就没有设计，你的视觉就会混乱。（也就是我们通常说的留白。）

空白是屏幕上UI元素之间的空间。良好地使用空白有助于消除您的网站或应用程序的混乱，以便用户可以专注于重要元素并更轻松地阅读内容（实际上，空白有助于提高最多20％的可读性）。

UI设计中的布局合理化原则

在进行UI设计时需要充分考虑布局的合理化问题，遵循用户从上而下，自左向右浏览、操作习惯，避免常用业务功能按键排列过于分散，以造成用户鼠标移动距离过长的弊端。多做“减法”运算，将不常用的功能区块隐藏，以保持界面的简洁，使用户专注于主要业务操作流程，有利于提高软件的易用性及可用性。

在UI布局设计中有效利用空间

将空间合并到UI布局设计中往往是因网站而异。例如，您可能会在主页上使用大量空白来强调号召性用语按钮，但在列出多个项目（例如电子商务产品页面）的网站上可能会较少。

为了适当地使用UI布局空间，你需要合适的工具。通过使用Justinmind等原型工具设计界面，你始终可以360度地查看设计空间，UI元素和链接。在这里，我们可以用高保真原型创建更好的用户界面布局设计。

视觉层次在用户界面布局中的重要性

组织内容和视觉层次结构

视觉层次是设计中一个有趣的概念。这是用户在屏幕上处理信息的顺序。

设计师需要注意视觉层次结构，以确保用户能够轻松找到并理解信息。当屏幕缺乏强大的视觉层次结构时，就会冒失去用户注意力的风险。

以下是视觉特征，设计师应该考虑使其屏幕尽可能易读和可用：

• 接近度 - 放置相关元素

• 空白 - 适量的空白可以帮助突出显示重要内容

• 大小 - 更大的UI元素将吸引用户的注意力

• 颜色 - 明亮的颜色在眼睛比眼睛静音之前更容易吸引眼球。

• 对比 - 用户被吸引到更明亮的作品

• 对齐 - 创建更清晰，更具视觉吸引力的设计

• 重复 - 重复创建一致性并帮助将元素连接在一起

加强用户界面的视觉层次结构

专注于用户界面的视觉层次结构是思考设计空间的好方法。幸运的是，有一些技巧可以帮助您组织内容并加强UI的视觉层次结构。

无论是针对网络还是移动设计，您的用户界面是否内容丰富以及您的目标用户是谁，都会影响您使用的布局类型。

通过映射网站的视觉特征（包括空间），您可以在界面中传达内容的顺序和重要性，并使其更易于阅读。