UI设计--为什么要使用八点网格

今天看到的比较枯燥的理论，给大家分享一下。确实有点深奥,细细品读。

为什么要使用八点网格

入门

代码>模拟

设计应用程序和原型工具允许您创建的什么UI幻想的愿景可能模样。但是当谈到数字产品设计时，模型或原型的唯一目的就是将利益相关者和开发者提出的解决方案明确地传达出去。最后，只有开发人员可以在代码中复制（与资产相结合）才能使其生产。

现在，几乎所有的东西你可以在一个设计工具使是可能的代码来创建的，但有几个原因-从实用性推出时间表，以性能问题-即一个设计可能不是实际的建立。

最重要的是你的设计如何在用户设备上的代码中进行操作，因此尽可能优化在Sketch或Photoshop中完美布局的思想和编程之间的时间。

盒子模型

Box模型是描述对象的尺寸和间距的一种方法。它由4个组件组成：边框，边距，填充以及元素本身的尺寸。

边框：围绕元素边缘的笔触的厚度。大多数设计工具不允许这样做影响总体间距和尺寸。

填充：元素与其子元素的界限之间的空间

边距：元素与邻近对象边界之间的距离

什么是积分？

点（pt）是依赖于屏幕分辨率的空间测量。最简单的解释是，在“1x”分辨率（或@ 1x）下，1pt = 1px。

在“2x”分辨率（@ 2x）下，1pt = 4px，因为X和Y轴上的分辨率加倍，使得像素高2像素宽。

在“3x”分辨率（@ 3x），1pt = 9px（3px x 3px）等等。

“@ 1X”

请注意，这里的所有内容都设计为“@ 1x”。@ 2x，@ 3x和所有其他变体的资产可以更容易地从@ 1x资产派生而不是在其倍数创建的设计。

例如，要将@ 2x设计的干净资产从@ 3x设计（假设为偶数行的厚度），你需要将艺术品缩放到原始尺寸的50％（至@ 1x），然后将所得到的图稿缩放到300％。

@ 1x设计另一方面可以轻松地缩放到任何整数倍 - @ 2x，@ 3x，@ 4x等。

通过在每个单独的决议中进行工作，可以为图标和优质资产添加更多的细节，但这样做的机会却相对不常见。在大多数情况下，为了速度和方便起见，1x工作是理想的工作。

使用像素网格

你创建的每个UI元素都应与像素网格对齐。这是一个被称为像素拟合的概念，它确保您的所有元素在用户设备上显得清晰明了。

文本在这里是一个异常值，因为允许你的眼睛阅读字母的独特指标需要一些反锯齿，使其他形状模糊。所以，不要担心你的字母的每一个点与像素网格对齐。

文本元素

诸如文本的内联元素几乎总是给定界面中最重要的部分，但是像文本大小和行高之类的东西并不总是容易地与其他元素一样容易地与其他元素一致，同时保持垂直的节奏和易读性。

在您的设计中建立垂直一致性的基础，您的文本是一个很好的工具。通过将每条文字的基线定位在均匀间隔的行上，您可以轻松地将所有UI元素都带入和谐的垂直节奏。

我喜欢将我的8pt UI网格与4pt基准网格相结合。这种配对可以保持数学的简洁和干净，同时提供足够的选项来适应各种文字样式。

大多数平台都有一些关于基础知识的指导原则，但是从默认字体打破可能会导致独特的结果，因此在布置文本时使用酌情决定权，然后在布置其他元素时将其作为基础。

8点网格

基本原则

使用8的倍数来定义块和内联元素的尺寸，填充和边距。

当块元素的唯一内容是文本（例如按钮）时，将文本设置为与UI和/或特定平台的其余部分一致的大小，然后使用填充来确定块元素的大小。在全宽元素的情况下，使用填充来确定高度和一致的水平边距以确定宽度。

两种方法

这个系统实际上有两个突出的版本。将元素放置在以8点增量定义的系统显示网格中（我们称之为“硬网格”方法），另一个简单地测量单个元素之间的8点增量（我们称之为“软”网格“方法）。

Hard Grid方法的主要参数是通过使用其他透明背景元素，然后将它们分组到小组前景元素，您可以在每个元素的基础上跟踪边距和填充，并将这些容器像这样砖块。材料设计 - 其中一切都已经设计成4pt网格 - 自然符合这种方法。

软网格方法的论点是，当编写接口时，使用实际的网格是无关紧要的，因为编程语言不使用这种格子结构 - 它只会被丢弃。当您达到高质量，可编程的模型集合的速度是一个优先事项时，绕过硬网格额外管理额外的层次，有利于软网格更流畅，最小的结构可能是一个优势。这也可能更有利于iOS，其中许多系统UI元素未被均匀网格定义。

为什么重要

一致的用户界面

当你的所有测量都遵循相同的规则时，你会自动获得更一致的UI。

更少的决定=更少的时间

通过删除每8个间距选项中的7个，您可以减少可用的数量，随后降低编码速度。

多平台设计

无论形状因素如何，大多数流行的屏幕尺寸在至少一个轴上可以被8整除 - 通常两者都是。另外，一些平台的风格指南（如“材料设计”）专门针对4或8点的网格进行调用，从而使该系统成为一个自然的契合点。

一些屏幕显然难以调整（iPhone 6是375 x 667点），但解决方案其实很简单。保持您的填充和边距尺寸一致，并减少/增加块元素的大小以填补剩余空间。如果使网格保持一致，则可以使用奇怪大小的元素。请记住，您的用户可能永远不会看到您使用的实际测量。

实施提示

对齐网格

几乎每个设计应用程序都有一个“对齐网格”选项。如果您使用硬网格方法，那肯定会使您的工作更容易。无论如何，如果有可用的话，您需要确保启用“对齐像素网格”选项。

REMS＆变量

如果将根文本大小设置为16，您可以轻松地使用.5rem增量在8点网格上构建布局。

如果您不想这样做，或者不喜欢rems，您可以使用CSS或预处理器间距变量来处理布局，同时保留变量提供的额外的可维护性值。

定义你的网格

大多数设计应用程序允许您调整“大的微调”值。我使用一个名为Nudg.it 的应用，将素描中的我从10调整为8 。这是一个非常简单的应用程序，使您的整个工作流程更快更容易。

SHORCUTS

许多应用程序具有快捷键，可让您轻松地调整大小并调整增量。我强烈推荐学习它们 - 特别是微调和大小调整。

你的图标的框架

图标通常需要具有不同的尺寸以保持相同的视觉重量。在它们周围放置一个框架，类似于Hard Grid如何定义元素大小是保持测量一致的简单方法，同时允许在定义的参数内进行变化。

放大，缩小

如果你把所有的时间都放大到1600％，你可以误判你的垂直节奏。相反，如果您总是以50％的速度观看您的用户界面，您可能会错过重要细节，如像素拟合。经常调整缩放，以确保您看到整个图片。