布局是元素在特定区域内的放置。屏幕使用的布局应充分表示服务的抽象空间的结构以及静态屏幕平衡。它们还显示在各种屏幕上，因此应将它们设计为在任何环境中的类似上下文中使用。

格式塔理论

格式塔理论是放置颜色，文本，图像和图层等元素时最重要的概念之一。它在德语中的意思是“形状”和“形式”，并主张“整体不是单个元素的总和”，并且是当各种元素组合在一起时的视觉效果理论。

UI设计中的格式塔原则

 

接近

相关元素比其他元素放置得更近。接近原则是将彼此靠近的元素识别为彼此相关的现象。它比按形状或颜色分组更强大。

 

相似

执行相同功能的元素被表示并放置在相同的形状中。相似性是视觉上相似的元素的分组，通常通过大小，形状和颜色来区分。由于我们预测具有相似形状的元素将表现相似，因此我们设计了具有相同形状的相同特征。邻近性是区分元素的强大方法之一。

 

延续

放置滚动或重复元素时，它们会将相同的形状与特定线条对齐。连续性是在元素排列中识别方向时，将方向上的元素识别为一个组的现象。根据注视的流动，以直线或曲线排列的元素被识别为一个组。

 

闭塞性闭合

尽可能使用边距和间距设计整体形状。即使每个元素没有通过一条线连接，也要跟随眼睛的流动来把握整体的形状。您不必使用线条或正方形元素进行分组，而是可以通过创建具有边距和间距的整体形状来减少认知负荷。

 

同无素同行为

具有相同概念的元素被设计为具有相同的行为。当元素沿同一方向移动时，它们被识别为同一级别的元素。

 

前景和背景

设计使前景和背景清晰区分。当人眼感知到元素重叠时，它会根据焦点分别识别前景和背景。为了减少杂乱，我使用黑暗和阴影来分隔前景和背景。

 

公共区域

需要分隔的元素由背景或线条分隔。聚集在同一区域的元素被理解为属于同一上下文的元素，因此它们与其他元素有明显的区别。

 

屏幕

我主要为数字设备设计屏幕。出现了各种数字设备，例如PC，智能手机和智能手表，并且支持的设备类型根据服务的性质而有所不同。通常，我们基于用户最多的智能手机进行设计。

 

空间

有两个主要区域需要设计最多：智能手机的屏幕尺寸，这是一个垂直矩形，桌面，这是一个水平矩形。图层、文本、图标和图像用于在此方形空间上构成各种屏幕。

 

单位

设置最小单位以实现高效设计。若要在多个倍数（如 1.5x 2x）中使用设计元素，请使用在相乘或除以时为整数的偶数。其中，可以按整数划分主显示器整个像素的8点网格系统被广泛使用。它并不严格适用于所有单元，因为有些单元不会除以8，例如iOS上的375和750屏幕。

 

网格网格

网格是一种通过定义大型框架来放置元素来实现高效设计的工具。它使用放置元素的列和定义边距的装订线。它易于构建具有一致的大小，并提供一致的视觉节奏，允许用户自然地浏览视觉元素。

 

模式

有三种主要模式会影响布局。基本上，布局是固定的，并根据屏幕大小而变化，并且经常使用即使滚动也不会消失并固定在特定区域中的固定图案以及可以左右滚动的轮播。

 

屏幕尺寸

根据服务支持的设备之间的通用智能手机屏幕尺寸进行设计。在iOS的情况下，要生产的设备是固定的，因此它主要是基于旗舰智能手机生产的。由于Android与无数设备一起发布，因此不可能优化所有屏幕，因此它倾向于遵循Google提供的规范。

 

固定和可变面积

定义每个可视元素在屏幕的物理大小更改时的行为方式。如果将元素大小定义为变量，则当屏幕增长时，它只会放大一定百分比，如果固定元素的大小，则元素保持不变，并且只有屏幕会展开以查看更多内容。如果将元素设置为可变元素，它可能会看起来过于放大，因此我倾向于尽可能多地修复该元素。

 

密度

为了在屏幕展开时显示相同的尺寸，您需要了解屏幕密度。PPI是一种常用单位，代表每英寸像素数，是指在1英寸x 1英寸的区域内物理显示的像素数。以DP和PT为单位进行设计，以便在任何屏幕上实际显示相同的尺寸，图形设计工具通常设置为1px = 1pt，因此无需单独更改设置。

 

结构

对于同时支持移动设备和桌面的 Web 服务，使用各种模式来表达相同的内容。我主要使用响应式Web方法，并根据下面的一般结构为服务定制它。

导航：顶级导航菜单区域，如类别、菜单等。

工具：工具区域，如搜索，书签等。

内容：内容显示区域，如文本，图像，列表等。

 

导航

不同的平台对移动屏幕有不同的推荐导航结构。建议在Android上显示在顶部，在iOS上显示在底部。在移动网络的情况下，它通常位于顶部，但最近，导航或工具栏也放置在底部。虽然存在特定于平台的建议，但为了便于设计，通常以统一的布局应用整个平台。

原文作者：Jake Park