一、前言

1、代码>原型

无论是高保真还是低保真原型，设计人员在软件中的展现所有效果，最终目的都是传递给开发人员进行实现。当开发人员开始使用代码还原页面时，设计就不可以再随意修改。

最重要的不是在设计软件中展现的效果，而是实际在用户设备上实现的效果，因此在设计时，要提前考虑代码实现的成本。

2、盒子模型

盒子模型是一种描述对象尺寸和间距的方法。有四个部分组成：“边框Border”、“边距Margin”、“填充Padding”、“元素本身Element”。

• Border：围绕元素外围的边线。

• Padding：元素及其子元素之间的间距。

• Margin：元素和其相邻对象之间的间距。

3、什么是point（pt）

点（pt）取决于屏幕物理尺寸大小，是绝对尺寸单位。对应@1x图的1px。

像素（px）取决于实际屏幕显示分辨率，是相对尺寸单位。在@2x图情况下1pt=2px，在@3x图情况下1pt=3px.

4、@1x

建议使用“@ 1x”进行设计，其他尺寸图可以从@1x进行衍生。

如果是以@2x进行设计，那么若要得到@3x则要先缩小50%然后再扩大300%，增加了不必要的工作量，并且很容易出现奇数、小数等不便利数值。

5、使用像素网格

创建的每个UI元素都应该和像素网格对齐，防止出现半像素的“锯齿“效果。

文本由于其图形的特殊性，难免会出现无法对齐像素的情况，这里可以忽略。

6、文本元素

文本是页面中最重要的元素之一，但因为其本身的多样性，产生的不同的字体、行高很难和其他元素一起适用网格。因此给文本设置基线网格，将基线网格采用4pt进行等距划分，来和其他元素进行和谐搭配。

二、8点网格

1、基本原理

使用8的倍数来定义区块和内部元素的尺寸，间距等。

当区块元素为文本（例如按钮）时，将文本设置成其余部分一致（或者平台预先定义好）的大小，然后使用padding来确定区块大小。如果是全宽的元素，使用padding来确定高度，并使用一致的水平边距来确定宽度。

2、两种方法

• 硬网格：将元素放置在以8为增量定义的显示网格中，使用额外的透明背景元素，和前景元素组成一个整体。

• 软网格：保证元素之间的的间距为8的倍数，以此获得更快的处理速度，从而得到更流畅的体验。

三、为什么重要

1、保持一致性

当所有尺寸都遵循相同的规则时，就有了一致的UI。

2、更少的决定=更少的时间

减少自定义的尺寸规则，得到更快的代码运行速度。

3、多平台设计

无论设备外形如何，主流的屏幕的屏幕尺寸长宽值至少有一个维度可以被8整除。

有一些屏幕的尺寸无法被整除（iPhone 6的375*667pt），只需要保持padding和margin一致，适当调整区块的大小来进行适配。

四、实施技巧

1、对齐网格

确保开启了“对其像素网格”选项。

2、Rems和变量

如果根文根大小设置了16px，则可以使用0.5rem的增量在8点网格上构建布局。

如果不喜欢这样做，或者是不喜欢rems的使用方式，可以使用CSS或预处理器间距变量来处理布局，同时保留变量以供后期维护。

3、定义你的网格

大多数软件都可以设置快速“微调”，一般默认为10px，sketch中可将其调整为8px，便于快速的工作。

4、捷径

学习并善用快捷键，提高工作效率。

5、框架你的图标

图标设计通常需要进行视觉修正，因此，在其周边放置透明框架（例如Hard Grid的方式），来保证整体的一致性。

6、放大、缩小

设计时经常会放大预览界面来进行设计，这会导致会略整体；如果以缩小的尺寸会导致看不到细节，因此要经常变焦画面来确保能看到整个画面。