8點(diǎn)網(wǎng)格流行有一段時(shí)間了，我最早知道這種設(shè)計(jì)方式是在看了谷歌的Material Design設(shè)計(jì)規(guī)范之后開始認(rèn)識(shí)的。發(fā)現(xiàn)這種設(shè)計(jì)方式實(shí)在是太適合我這種理科出生的設(shè)計(jì)師了，所以在這里也給大家科普一下為什么要使用8點(diǎn)網(wǎng)格。

看完本文你會(huì)學(xué)到：

1.?8點(diǎn)網(wǎng)格系統(tǒng)的意義

2. 為什么使用8點(diǎn)網(wǎng)格系統(tǒng)

3. 8點(diǎn)網(wǎng)格系統(tǒng)的技巧有哪些

什么是8點(diǎn)網(wǎng)格

就是建立8點(diǎn)為一個(gè)單位的網(wǎng)格，所有的元素尺寸都是8的倍數(shù)。

△ 圖片來(lái)自Material Deisgn設(shè)計(jì)規(guī)范

為什么是 8點(diǎn)？

為什么是基于8點(diǎn)去定義網(wǎng)格，而不是6點(diǎn)或者10點(diǎn)？引用下Quora上一個(gè)提問的回答：

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作為設(shè)計(jì)的最小單位，你可以很方便的縮小的你的設(shè)計(jì)尺寸，8/2=4,4/2=2,2/2=1。如果你從10開始，你縮小到的網(wǎng)格單位可能是2.5像素，在往下是1.25像素。

△ 8x8的元素被一直縮小50%的情況

如果你是2倍屏設(shè)計(jì)，1倍下就是奇數(shù)的尺寸，如果是要在偶數(shù)尺寸的屏幕中（基本上的屏幕尺寸都是偶數(shù)的）劇中對(duì)齊位置上就會(huì)產(chǎn)生小數(shù)點(diǎn)了，如果是再縮放一倍，這時(shí)候元素尺寸又產(chǎn)生了小數(shù)點(diǎn)了，相信各位的潔癖肯定是不能忍的。

為什么要使用這套系統(tǒng)?

這里引用一些Material Design中的設(shè)計(jì)指導(dǎo)和Spec的一篇文章中的信息，結(jié)合自己的經(jīng)驗(yàn)來(lái)說(shuō)明下：

1. 更統(tǒng)一的UI

當(dāng)所有的元素尺寸都符合同樣的規(guī)則時(shí)，你自然就獲得了一套更加統(tǒng)一的UI。

△ 圖片來(lái)自Material Deisgn設(shè)計(jì)規(guī)范

2. 更少的選擇=節(jié)約更多的時(shí)間

也許在設(shè)計(jì)某個(gè)元素的時(shí)候，或者定義某個(gè)空隙的時(shí)候，你用8好像稍微寬了點(diǎn)，于是你一點(diǎn)一點(diǎn)地調(diào)整。但你在選擇空隙是7還是8的時(shí)間時(shí)，你做其他事情的時(shí)間也就被浪費(fèi)了，最后效果的差異其實(shí)并沒有那么大。

更可怕的是最后你的設(shè)計(jì)稿里這里是6，那里是8，沒有一套清楚的規(guī)則的時(shí)候，會(huì)影響到開發(fā)對(duì)你設(shè)計(jì)稿元素間尺寸的認(rèn)知，于是你精心調(diào)好的細(xì)節(jié)也會(huì)沒有那么好的被還原。

試想你跟開發(fā)達(dá)成一種默契：如果我這里的標(biāo)注小于8，那你看成8就好。其他的，一定是8的倍數(shù)。

3. 多平臺(tái)的響應(yīng)式設(shè)計(jì)

基本的主流屏幕尺寸都至少在橫豎一個(gè)軸的維度上能被8整除，很多時(shí)候兩個(gè)軸的未讀都可以。甚至，有些平臺(tái)的設(shè)計(jì)規(guī)范（比如Material Deisgn）會(huì)特別要求建立4pt或8pt為基準(zhǔn)的網(wǎng)格，這樣整套系統(tǒng)就能自然的符合這一規(guī)則。

△ 當(dāng)前主流屏幕的解決方案，可以看到基本上都能被8整除

有些屏幕會(huì)很難調(diào)整適應(yīng)這個(gè)系統(tǒng)，比如iPhone6開始的375x667的尺寸，但是解決方法也很簡(jiǎn)單。保持填充和空隙（padding & margin）的尺寸統(tǒng)一遵循規(guī)則，剩余的空間可以用塊狀的元素來(lái)填充。有一些元素的尺寸是奇數(shù)的也沒關(guān)系，只要他們能讓整體遵守這套規(guī)則就好。

記住你的用戶永遠(yuǎn)不會(huì)看到你實(shí)際使用的尺寸。

比如Material Design沒有限制元素的高度一定符合8的倍數(shù)，但是讓元素的點(diǎn)擊范圍遵守8點(diǎn)網(wǎng)格的規(guī)則。

所以說(shuō)，這套系統(tǒng)更多的是用來(lái)規(guī)范自己的設(shè)計(jì)和開發(fā)，節(jié)省開發(fā)和設(shè)計(jì)溝通的時(shí)間，提高設(shè)計(jì)統(tǒng)一性，對(duì)用戶來(lái)說(shuō)可能感知不大。

執(zhí)行這套方案的技巧

1. 建立網(wǎng)格并對(duì)齊網(wǎng)格

幾乎所有設(shè)計(jì)軟件都有「對(duì)齊到網(wǎng)格」的選項(xiàng)。如果你的設(shè)計(jì)絕對(duì)符合這套系統(tǒng)的話，設(shè)置好相應(yīng)的網(wǎng)格選項(xiàng)并對(duì)齊絕對(duì)會(huì)給你很大的幫助。所以，你要先確保你打開了「對(duì)齊到網(wǎng)格」選項(xiàng)。

△ Sketch中設(shè)置8px為基準(zhǔn)的網(wǎng)格

2. 確定你自己的增量習(xí)慣

大多數(shù)設(shè)計(jì)軟件都可以調(diào)整移動(dòng)增量值，我喜歡把我的大增加值（按住command移動(dòng)的增量）從默認(rèn)的10調(diào)整到8，這會(huì)方便很多。

△ 在sketch中調(diào)整鍵盤增量

3. 快捷鍵

很多應(yīng)用程序都有快捷鍵，可以讓你在設(shè)計(jì)時(shí)快速移動(dòng)元素、調(diào)整大小。記住這些快捷鍵，配合網(wǎng)格使用可以大大提高你的效率。

4. 建立icon的框架

△ Material Design icon的框架

圖標(biāo)通常需要不同的大小以保持相同的視覺重量。用框架來(lái)設(shè)計(jì)圖標(biāo)，這是保持尺寸一致性的簡(jiǎn)單方法。同時(shí)，框架能有效保證圖標(biāo)的大小符合網(wǎng)格的規(guī)范。同樣記得把圖標(biāo)的框架大小設(shè)置成8的倍數(shù)，并從大的圖標(biāo)開始設(shè)計(jì)，縮放后記得對(duì)細(xì)節(jié)做調(diào)整。

5. 放大、縮小

如果你一直放大到1600%來(lái)設(shè)計(jì)，你可能會(huì)丟失垂直方向上的布局感受。相反，如果你一直在50%的縮放比例下查看你的UI稿，你可能會(huì)丟失一些重要的細(xì)節(jié)，比如完美像素。所以記住要經(jīng)常放大縮小界面，在各種比例下查看你的設(shè)計(jì)。

Material Design設(shè)計(jì)規(guī)范：https://material.io/guidelines

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

附上MD 規(guī)范中文版：

1. 《學(xué)霸的自學(xué)筆記！Material Design設(shè)計(jì)規(guī)范學(xué)習(xí)心得》
2. 《重磅教程！幫你全面徹底搞定MATERIAL DESIGN的學(xué)習(xí)筆記》

歡迎關(guān)注作者公眾號(hào)：「LookApp」

「向高手學(xué)習(xí)！成為網(wǎng)格專家」

• 入門指南：《網(wǎng)格系統(tǒng)的入門基礎(chǔ)知識(shí)+案例演示》
• 專業(yè)科班方法：《專業(yè)科班方法！幫你學(xué)會(huì)網(wǎng)格工具這個(gè)理性的排版利器》
• 實(shí)例演示：《深入淺出幫你學(xué)會(huì)網(wǎng)格系統(tǒng)應(yīng)用》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com