UI/UX设计布局大法：网格的实践技巧和高效的8点网格系统

交互设计小助手美国交互设计资讯

TOPIC:

UI · UX

—

LAYOUT GRID

UI Design UX Design

Article：2022/05/06

Hi~，欢迎来到「交互设计新视觉系」技法专栏的第六期！

空间和网格是任何设计的基础。一旦掌握并正确使用，网格可以帮助您为您的设计创建可靠且具有视觉吸引力的解决方案。

本文为大家带来UI/UX设计师Buninux和产品设计师Rumman分享介绍的网格的最佳实践技巧和高效的8点网格系统：

什么是网格

网格有助于建立任何界面的基础。您可以将其视为布局的框架。有助于组织 UI 元素、引导读者和识别设计的各个部分的框架。

术语：网格由网格单元组成。布局放置在网格上，并具有一定数量的列。列的左右边距，以及每列之间的填充。

网格的最佳实践技巧

Tip1 明智地选择数字

虽然类似Bootstrap的12列网格是最受欢迎的选择，但这不是强制性的。选择网格时，请选择您的设计真正需要的列数。

Tip2 了解您的限制条件

始终考虑您正在设计的屏幕。了解他人如何处理和操作它。要充分利用这些限制，并学习使用它们进行设计。

最常见的屏幕分辨率 (px) —— 桌面：1440x1024；

平板电脑：768x1024；手机：320x640

Tip3 水平和垂直间距

考虑垂直和水平间距，以使您的布局更具吸引力和一致性。

Tip4 塑造垂直节奏

使用基线网格来排列内容并为您的文本和布局元素带来视觉一致性。

提示——调整字体行高以匹配基线网格。

例如：如果您选择 4px 作为基线/网格单位，为了对齐文本，您需要将字体的行高设置为单位的倍数，这意味着行高应该是 4、12、32、64 等.

Tip5 使用框架和颜色的力量

使用框架作为工具，将用户的注意力集中在某个布局部分。在需要的地方添加额外的视觉重量。

Tip6 走出网格

将某些元素排除在网格之外。使用这个分解技巧来增加价值并使您的设计的某些部分脱颖而出。

Tip7 调整网格

确保您的布局适应常见的屏幕尺寸，并提供良好的移动用户体验。确保始终在不同的屏幕上检查您的设计。

Tip8 学习没有网格的设计

学习使用网格进行设计，而不必将其实际带到您的画布上。随时观察您的布局，不带“网格眼镜”，为您的任务找到最有创意的解决方案。

8点网格系统

为什么使用8点网格系统？

屏幕尺寸有很多种，使用8等数字来调整大小和空间元素可以轻松且一致地缩放各种设备。此外，大多数流行的屏幕尺寸都可以被8整除，很容易适应。

8pt 网格的原理是使用8的倍数（8、16、24、32、40、48、56 等）来对元素的布局、尺寸、内边距和边距进行设置。

8点网格系统的价值

· 它为元素提供视觉层次结构，并在保持质量的同时能以更少的决策来推动一致的可扩展性，设计 UI 时看起来更干净漂亮。

· 是设计师和开发人员之间最好的沟通系统。开发人员可以轻松理解并关注 8pt 增量，而不必每次都进行测量。

”如果您使用 8pt 网格系统，那么您的设计看起来会好 10 倍。对于界面或 UI 设计，我使用Figma 软件。您可以使用其他软件。在开始设计之前，我首先设置了一个网格系统，它可以帮助我更快地工作。此外，当我将设计交给开发人员时，他们可以轻松理解设计。“

究竟什么是“点”？

点 (pt) 是取决于屏幕分辨率的空间度量。

当我们开始 UI 设计时，我们使用小画板（iPhone X 为 375x812），但实际设备的屏幕分辨率很大（iPhone x 为 1125x2436 或 5.8 英寸）。发生这种情况是因为在 iPhone X 中，画板的渲染速度是 3 倍 (@3x)，因为它的 Super Retina 显示屏具有 3 倍的 PPI（每英寸像素）。

设计最小尺寸 (@1x) 的原因是，它允许我们将资产缩放到不同设备所需的不同尺寸，同时保持像素完美的渲染。

使用8点网格和Bootstrap设置布局系统

如果您正在为Web设计，那么您必须进行响应式设计（在所有设备上看起来都不错的网页）。此外，在为移动设备设计时，您必须确保它适合所有设备。这就是设置布局系统（8 点网格系统 + Bootstrap）很重要的原因。

首先，对于水平节奏/网格，使用 12 列布局的标准引导网格系统，间距宽度为 24px (1.5rem)。如果您使用 1440 像素（桌面尺寸）的画板，则在容器的每一侧使用 60 像素的边距。

对于垂直节奏/网格使用 8px（高度），因为当您使用 8 个点使用排版、图标、卡片、按钮等时，它将很容易适合您的布局系统。

元素之间的间距系统和8点网格

间距在 UI 设计中非常重要，因为它使设计整洁干净。UI 要看起来合乎逻辑（对开发人员友好）、有吸引力且美观，最好要使用 8 点原则：8px / 16px / 24px / 32px / 40px / 48px / 56px 等元素之间的所有每列填充和间距（如果需要更紧凑，有时可以使用 4px ）。

当我设计时，我将我的间距值定义为变量，以便开发人员可以轻松地理解我的间距系统。

图像和8点网格

设计时请确保使用SVG格式。如果您打算使用或设计图标，请使用 8 的倍数（16×16、24×24、32×32、40x40 等）。它很容易适应布局系统。

排版和8点网格

排版上的 8pt 网格在整个设计中提供了更加和谐的垂直节奏。为了快速创建一致的排版系统，有时我会使用这个网络工具：Type scale。（文末领取）

字体大小可能因设备而异，可能是 14px、15px、21px 等，但重要的是行高不会。行高应该是 8 (8, 16, 24, 32 ...) 的乘积，但如果需要，您可以使用 4 (4, 8, 12, 16, 20, 24...) 的乘积。我个人使用 4 的乘法来表示行高，因为它可以提供更细粒度的控制并带来更好的结果。