如何用「8点网格」来规范你的设计？看这篇好文！

　　8面网格盛行有一段工夫了，我最早晓得那种设想方法是正在看了谷歌的Material Design设想标准以后开端熟悉的。发明那种设想方法真正在是太合适我那种文科诞生的设想师了，以是正在那里也给各人科普一下为何要利用8面网格。

　　看完本文您会教到：

　　1. 8面网格体系的意义

　　2. 为何利用8面网格体系

　　3. 8面网格体系的本领有哪些

　　甚么是8面网格

　　便是成立8面为一个单元的网格，一切的元素尺寸皆是8的倍数。

　　△ 图片去自Material Deisgn设想标准

　　为何是 8面?

　　为何是基于8面来界说网格，而没有是6面大概10面?援用下Quora上一个发问的答复：

　　If you use 8, you can easily resize without ending up with half or quarter pixels. 8/2=4, 4/2=2 and 2/2=1. If you start with 10 you’ll end up with 2.5 pixels, and then 1.25 (10, 5, 2.5, 1.25 …) you get the idea. 8 gives you more flexibility than 10. /Sjur O. Sundin, Senior UX Architect / Design Manager – San Diego, CA/

　　意义是：假如您用8做为设想的最小单元，您能够很便利的减少的您的设想尺寸，8/2=4,4/2=2,2/2=1。假如您从10开端，您减少到的网格单元能够是2.5像素，正在往下是1.25像素。

　　△ 8×8的元素被不断减少50%的状况

　　假如您是2倍屏设想，1倍下便是偶数的尺寸，假如是要正在奇数尺寸的屏幕中(根本上的屏幕尺寸皆是奇数的)剧中对齐地位上便会发生小数面了，假如是再缩放一倍，那时分元素尺寸又发生了小数面了，信赖列位的净癖必定是不克不及忍的。

　　为何要利用那套体系?

　　那里援用一些Material Design中的设想指点战Spec的一篇文章中的疑息，分离本人的经历去阐明下：

　　1. 更同一的UI

　　当一切的元素尺寸皆契合一样的划定规矩时，您天然便得到了一套愈加同一的UI。

　　△ 图片去自Material Deisgn设想标准

　　2. 更少的挑选=节省更多的工夫

　　或许正在设想某个元素的时分，大概界说某个空地的时分，您用8仿佛略微宽了面，因而您一面一面天调解。但您正在挑选空地是7借是8的工夫时，您做其他工作的工夫也便被华侈了，最初结果的差别实在并出有那末年夜。

　　更恐怖的是最初您的设想稿里那里是6，那边是8，出有一套分明的划定规矩的时分，会影响到开辟对您设想稿元素间尺寸的认知，因而您粗心调好的细节也会出有那末好的被复原。

　　试念您跟开辟告竣一种默契：假如我那里的标注小于8，那您算作8便好。其他的，必然是8的倍数。

　　3. 多仄台的呼应式设想

　　根本的支流屏幕尺寸皆最少正在反正一个轴的维度上能被8整除，许多时分两个轴的已读皆能够。以至，有些仄台的设想标准(好比Material Deisgn)会出格请求成立4pt或8pt为基准的网格，那样整套体系便能天然的契合那一划定规矩。

　　△ 当前支流屏幕的处理计划，能够看到根本上皆能被8整除

　　有些屏幕会很易调解顺应那个体系，好比iPhone6开端的375×667的尺寸，可是处理办法也很简朴。连结挖充战空地(padding & margin)的尺寸同一遵照划定规矩，盈余的空间能够用块状的元从来挖充。有一些元素的尺寸是偶数的也不妨，只需他们能让团体服从那套划定规矩便好。

　　记着您的用户永久没有会看到您实践利用的尺寸。

　　好比Material Design出有限定元素的下度必然契合8的倍数，可是让元素的面击范畴服从8面网格的划定规矩。

　　以是道，那套体系更多的是用去标准本人的设想战开辟，节流开辟战设想相同的工夫，进步设想同一性，对用户去道能够感知没有年夜。

　　施行那套计划的本领

　　1. 成立网格并对齐网格

　　险些一切设想硬件皆有「对齐到网格」的选项。假如您的设想尽对契合那套体系的话，设置好响应的网格选项并对齐尽对会给您很年夜的协助。以是，您要先确保您翻开了「对齐到网格」选项。

　　△ Sketch中设置8px为基准的网格

　　2. 肯定您本人的删量风俗

　　年夜大都设想硬件皆能够调解挪动删量值，我喜好把我的年夜删减值(按住command挪动的删量)从默许的10调解到8，那会便利许多。

　　△ 正在sketch中调解键盘删量

　　3. 快速键

　　许多使用法式皆有快速键，能够让您正在设想时快速挪动元素、调解巨细。记着那些快速键，共同网格利用能够年夜年夜进步您的服从。

　　4. 成立icon的框架

　　△ Material Design icon的框架

　　图标凡是需求差别的巨细以连结不异的视觉重量。用框架去设想图标，那是连结尺寸分歧性的简朴办法。同时，框架能有用包管图标的巨细契合网格的标准。一样记得把图标的框架巨细设置成8的倍数，并从年夜的图标开端设想，缩放跋文得对细节做调解。

　　5. 放年夜、减少

　　假如您不断放年夜到1600%去设想，您能够会丧失垂曲标的目的上的规划感触感染。相反，假如您不断正在50%的缩放比例下检察您的UI稿，您能够会丧失一些主要的细节，好比完善像素。以是记着要常常放年夜减少界里，正在各类比例下检察您的设想。

　　Material Design设想标准：https://material.io/guidelines

　　Spec文章链接：https://spec.fm/specifics/8-pt-grid