如何用「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 的倍数。

相关推荐