设计布局

将布局视为数字产品的架构。您应该遵循某些规则和准则，就像在设计建筑物时一样。如果你的走廊太窄或者你的门与天花板而不是地板对齐，那栋楼的居民不会高兴。

布局也是如此。如果布局中的元素存在可用性问题，那将破坏用户体验。了解每种布局技术如何影响 UX，您可以有效地使用每个概念来创建用户真正喜欢使用的功能体验，以及视觉上令人愉悦的布局。

间距

布局结构中最基本的元素是间距。间距是一组规则，用于定义界面中的元素应如何排列。它包括定义元素内部和外部距离的可测量值。 

当间距一致时（我们建议将间距定义为 8 倍），它有助于保持整洁有序的布局。在与客户合作时，它还可以帮助消除关于“请在此处添加一些空间，或在此处添加一些空间”的评论。空间平衡的 UI 使用户更容易浏览您的产品。

我们始终建议以 8 倍定义间距。

布局间距

您需要了解间距的一些特定方面。布局间距定义了最重要的元素与页面本身之间的距离。一致的布局间距使页面在视觉上看起来平衡，有助于轻松导航，并定义响应式设计的关系。

组件间距

布局间距关注全局，而组件间距则关注细节。组件间距定义给定组件内的空间关系，例如按钮图标和标签之间的距离。如果您没有在页面上的所有按钮之间保持这种间距一致，那么它可能会在潜意识中让用户感到不安并且看起来很草率。在这里保持一致性为您的 UI 组件带来平衡，因此请花时间建立在整个产品中使用的规则。

边距

边距是元素之间存在的空间。这可能是按钮周围、列之间或图像与周围文本内容之间的空间。边距是布局间距的基本组成部分。 

边距还为我们提供页面上的空白（或负空间）。将此视为页面上的喘息空间，有助于消除视觉混乱。空白还有助于保持页面元素之间的平衡和节奏。

白色空间不是浪费空间！将其视为可用于创建干净且有凝聚力的设计的另一个元素。

填充物

边距是外部的，而填充是内部的。内边距是元素边界内的空间，从边界开始延伸到下一个内部元素。例如，如果一个按钮是一个组件，那么按钮标签和按钮边缘之间的间距就是内边距。

几乎每个元素都会有填充。确保始终在元素中设置最小填充——我们建议至少 12px。当在较小的屏幕上查看时，这可以防止响应式设计中的空间不足。

始终为元素设置最小内边距——我们建议不少于 12px。

关键线

在设计中创建一致的间距时，关键线是必不可少的工具。这些是假想的线，有助于对齐可能在布局网格之外冒险的元素。它们有助于维持结构和组织。它们对于保持内容平衡至关重要，尤其是在不同类型的相邻元素之间，例如个人资料图片和随附的文本。

左对齐

由于文字处理程序，您可能至少对对齐有点熟悉。但对齐不仅仅适用于文本内容。它可以用于设计中的每个元素，以确保这些元素一致排列。

左对齐是最常见的对齐方式。顾名思义，左对齐元素从页面左侧（或其父元素）开始定位。

右对齐

右对齐与左对齐相反。元素相对于页面或父元素的右侧定位。除了从右到左阅读的语言外，这是最不常用的对齐方式。虽然它可以用于非基于文本的元素，但由于每行的起始点不同，它使文本内容难以阅读。

像左和右这样的水平对齐只是对齐元素的一个方面。还需要考虑垂直对齐。

中心对齐

居中对齐可以指水平对齐和垂直对齐。元素沿假想的中心线对齐。它通常应用于标题或按钮标签等内容。 

水平面上的居中对齐对于大文本块（包括三行以上的文本）并不是特别有用，因为每行的不同起点会使阅读变得更加困难。

不要使用超过 3 行的居中对齐文本元素。

顶部对齐

顶部对齐是最常见的垂直对齐方式。在这种对齐方式中，元素从页面顶部开始，每个元素都出现在前一个元素的下方。这与我们在纸上书写的方式相同，从顶部开始一直向下移动，因此它是最直观和可扫描的对齐方式。

底部对齐

相比之下，底部对齐从页面或容器的底部开始，就好像元素受到重力影响一样。这些元素总是粘在容器的底部，即使高度增加也是如此。当标题出现在图像底部时，可以看到底部对齐的一个示例，即使图像大小发生变化，它们也保持在底部。

容器

容器是包含其他 UI 元素的绑定区域。它们是文本、图像、图标和表面的家园。一个大的组件，例如一个表，可能包括许多子组件，每个子组件都包含一个自己的容器。您可以使用几种不同类型的容器。

灵活的容器

灵活的容器根据其内容和可用空间缩小或扩展。它们将根据页面大小（在响应式设计中很有用）以及添加或删除内容来调整大小。

刚性容器

另一方面，刚性容器无论内容或可用空间如何，都保持其大小。虽然这对某些类型的元素很有用，但刚性容器没有响应性，并且可以在较小的显示屏幕上从页面的侧面运行。

尺寸

尺寸是指每个元素的大小。二维形状有两个维度（宽度和高度），而三维形状有三个维度（宽度、高度和深度）。预先定义尺寸有助于确保设计的一致性。

纵横比

纵横比是元素的宽度和高度尺寸之间的比例。这对于用户生成的内容尤其重要，因为人们上传不同尺寸的图片，并以一致的方式正确显示它们可以保持视觉和谐。想想社交媒体网站上的个人资料图片：它们仅限于方形或圆形图像，需要用户调整大小或裁剪它们。最常见的图像纵横比是 16:9 和 4:3，尽管由于 Instagram 等网站，1:1 方形图像越来越受欢迎。

网络上最常见的纵横比是 16:9 和 4:3。 

本文内容为转载