怎样用「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 的倍数。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!