Draw and guide the users to the most important parts of the screen seamlessly.

A布局是我们安排元素来指导读者通过界面的一种方式。布局可以在不同的上下文中使用，以驱动不同的意图，以提高用户方面的设计的生产率和效率。

One of the most famous layouts that we can find in the outside world is the Fast Food Assembly Line created by McDonald's, which specifies the role, tasks, and times with the intent of improving the production time that increases efficiency and profits for the company.

There is no talk of layouts that do not include grid systems, designers use grid systems as a structure to create layouts that give specific and consistent measurements to the design, which also helps the design to be displayed in multiple devices. The layout is the real estate framework that allows designers to define how the content would be displayed and how would be the behavior of the interface.

模块化布局is a practice that splits the design canvas(artboard, page, screen, etc.) into smaller subdivisions that work independently and can be created, exchanged, or rearranged across multiple designs.

在设计多个平台时，模块也很重要。它允许将设计重新排列在多个设备上。模块的大小可能会根据内容的意图，重点和优先级而有所不同，但必须根据列数进行设置，这就是为什么首先设置网格系统很重要的原因。

In the market, we can findmultiple display resolutions, which is why we create a grid system that can work across them. The most common grid system is the 12 column grid system, because of its flexibility and capability to be split into six possible symmetrical (divided by 1, 2, 3, 4, 6, and 12 columns) and much more asymmetrical layouts.

When looking at a UI, we could be able to identify the number of columns the layout is divided, however, we still need to know the grid system used, the following example shows 6 column layout displayed, but in the background still remains 12 column grid system

6 Columns Layout

与6列布局相同，即使有些很常见，我们也可以设计多种布局。

1 Column Layout — Display

In this design, multiple sections are highlighted (with a red outline), even though the layout used has only 1 column (the entire 12 columns grid) This is because the elements inside do not have a fixed structure, such as tables or navigation bars that have dynamic measurements and alignments, depending on the content, it is fine to have 1 column layout that avoids confusion and properly neutralizes the real state of the screen

2 Column Layout

当我们将屏幕分为两个相等的部分（6/6）时，这种布局可能是对称的。

但是，功率是，网格使我们能够根据要求或我们各节的目的使用列的大小。9/3）。这是因为该组件具有更多的层次结构，并且是设计的主要交互部分。

2列布局 - 变体

即使在相同的2列布局中，基线也可以修改从网格中使用的列数，并仍然反映2列布局。下面的示例在顶部（7/5）和底部用途（9/3）中使用，但仍传达了2列布局。所有这些都由相同的内容和目的给出。

Multi-Column Layout

以前的示例可以在任何级别使用。根据屏幕的复杂性，它将为网格和布局使用提供更大的灵活性。下面的示例是一个在线学习平台的主屏幕，这是一个betway娱乐官网单一的布局将变得非常无聊。设计师倾向于使用不同的布局安排探索，以诱导设计和参与设计。

随着复杂性的增加，网格必须变得更加灵活。在仪表板等用例中，某些区域可能需要探索复杂的布局

There is an uncountable number of layout configurations, we as designers have to identify the requirements and information that will be displayed on our design to define what kind of configurations we will apply. The layout has to enhance our design in terms of accessibility and productivity.

在页面上安排文本，形状，图像，S和负空间时，布局起着重要作用。

Once the layout is set on top of your grid system, it creates containers in which we will place the design elements. For this, the negative space will play a key role to maintain balance within the container. Also, containers can have their own grid to give more flexibility, the inside grid works in the same way as the main grid, trying to keep the consistency with it.

As a best practice to implement the layout it’s important to consider the following factor in the treatment of the containers or boxes.

框型号

This model covers all the specifications that a box should have in order to be laid out in your design. These are also the specifications that the developer will use to compose your design in code.

• Margins是容器的边界和周围元素之间的空间。
• 边界are the thickness of the stroke around the edges of a container, some elements don’t have any border.
• Paddings是容器的边界和内部元素之间的空间。
• Dimensions: the size of the element, measured by width and height.

始终如一！

• 定义您的规模：措施和一致性应保持一致和理性。第一步是定义屏幕上所有测量和对齐的数字比例。

As best practice use multiples of 8 to match them with your grid system, all the containers, different components, alignments will be divisible by 8, which gives a system to follow.

• Define Rules in the UI:Any size, margin, padding, and spacing should be defined and documented with their use cases to keep consistency across your design. As a good practice, it is good to have use cases and visual examples that communicate the behavior of the rule. Below you can see some examples of rules documentation.

Prioritize Sections

要提供布局变化，请了解屏幕在每个部分中的百分比中分配和优先级的部分，它代表将要在屏幕上占用的空间数量了解所有观点，并确定哪个是您设计要求的最佳观点。

定义模板以提高效率

创建一个可以应用于多个屏幕的布局，该屏幕在多种情况下将相似，保持一致性，通过创建标准规则来减少设计团队的时间和精力。

提示 /最佳实践

1. Create your containers based on the box model.
2. 使用八个的倍数进行比例。
3. Define templates that can be used in multiple experiences.
4. 始终将布局切成基础网格。

清单

1. 首先设置网格系统。
2. 根据框型号定义布局，并用八个尺寸的倍数定义您的布局。
3. Prioritize containers and sections.
4. 根据用例定义规模和规则。

相关话题

1. 颜色
2. Typography
3. Iconography
4. 网格

Quick Question

在使用框模型时，我们必须考虑：

1. 填充，边缘，边界和尺寸。
2. 填充，不透明和边界
3. 颜色，边缘，厚度和填充
4. 填充，边缘，边界，高度和宽度

Leave your answer in the comments section below and join ourcommunity有关UX设计的更有趣的讨论