讓設(shè)計(jì)更高效！正式為大家安利這個(gè)好用的「8點(diǎn)柵格」

作為設(shè)計(jì)師，就算你不使用柵格系統(tǒng)，那你也至少會(huì)頻繁地接觸到“柵格”這個(gè)概念。無(wú)論是設(shè)計(jì)網(wǎng)站、雜志，還是app，各類(lèi)柵格應(yīng)有盡有。但由于我最近接觸到了“8點(diǎn)柵格”，并對(duì)其產(chǎn)生了極大興趣。為一探究竟，我要搞清它對(duì)于我們的設(shè)計(jì)到底能帶來(lái)怎樣的好處？

歡迎關(guān)注作者的知乎專欄：Sketch 中文教程

沒(méi)它又如何？畢竟不用8點(diǎn)柵格不還是照樣能干好設(shè)計(jì)

我一直以來(lái)都使用Bootstrap或Foundation之類(lèi)的系統(tǒng)進(jìn)行設(shè)計(jì)，甚至有時(shí)會(huì)打造我自己的設(shè)計(jì)系統(tǒng)。但卻逐漸愈發(fā)地意識(shí)到一件事，那就是雖然這些系統(tǒng)可以幫助你定義各個(gè)控件自身的規(guī)范，但當(dāng)元素越多，就越難以用統(tǒng)一的規(guī)范，將這些控件協(xié)調(diào)地串聯(lián)起來(lái)。

在下面這個(gè)對(duì)比中，你可以看到8點(diǎn)柵格系統(tǒng)內(nèi)的padding或margin或sizing永遠(yuǎn)是8的倍數(shù)。而非8點(diǎn)柵格系統(tǒng)則沒(méi)有相對(duì)嚴(yán)謹(jǐn)?shù)募s束，采用的是隨意值。

為何界面需要一致性？

雖然“一致性”并非必要條件。但，如果你希望你的作品足夠?qū)I(yè)、足夠值得信賴。那么你就應(yīng)該盡其所能去追求良好的一致性。我就因曾經(jīng)在網(wǎng)購(gòu)時(shí)，填寫(xiě)信用卡信息的文本域樣式和其它部分的樣式看起來(lái)非常不同，因此而感到困惑、猶豫。。要知道，滴水能夠穿石，如果你放任微小的一致性問(wèn)題置之不理，那么將來(lái)極容易引發(fā)該問(wèn)題的滑坡效應(yīng)。

為何類(lèi)Bootstrap的系統(tǒng)不足以解決問(wèn)題？

Bootstrap是一套強(qiáng)大的組件庫(kù)，它能讓設(shè)計(jì)師與工程師專注于內(nèi)容本身。從而提高了無(wú)數(shù)網(wǎng)站的質(zhì)量。但它卻缺少一套底層的、統(tǒng)一的測(cè)量單位，供多個(gè)設(shè)計(jì)師之間進(jìn)行協(xié)作。這樣極容易導(dǎo)致padding、margin、sizing的分歧。

最近我們的項(xiàng)目就遇到了這個(gè)問(wèn)題。雖然每個(gè)設(shè)計(jì)師對(duì)整套風(fēng)格的理解是一致的，但細(xì)節(jié)處理卻略有不同，到底哪一種是錯(cuò)的？

其實(shí)哪種都不算錯(cuò)。盡管他們有著不同的高度和padding，但它們都缺乏一套背后的思想，從底層的角度去解釋，為什么該高度或padding該如此定義，以及為什么這套思想更優(yōu)，人們應(yīng)該遵從之。

說(shuō)了這么半天，你行你上？

→ 8點(diǎn)柵格 ←（自帶BGM），簡(jiǎn)而言之：就是以“8”為一個(gè)步進(jìn)，來(lái)調(diào)整元素的間距及尺寸。這意味著任何padding、margin、sizing，都將是8的倍數(shù)。

為什么是8的倍數(shù)？

當(dāng)今，屏幕尺寸和分辨率種類(lèi)層出不窮，且趨勢(shì)有增無(wú)減。使得設(shè)計(jì)師對(duì)“維護(hù)適配性”的難度越來(lái)越大。而使用偶數(shù)（比如8）將更容易對(duì)元素進(jìn)行不失真的縮放。

例如在某些設(shè)備上你的設(shè)計(jì)會(huì)以1.5x呈現(xiàn)，從而導(dǎo)致總會(huì)有奇數(shù)像素（比如5px）會(huì)出現(xiàn)半像素偏移。

OK，但為什么不是6的倍數(shù)、10的倍數(shù)，非得是8？

因?yàn)榇蠖鄶?shù)的主流屏幕都可以被8整除，足夠普適。且以8為一個(gè)步進(jìn)既不會(huì)使你的系統(tǒng)過(guò)于細(xì)碎（比如6點(diǎn)柵格），也不會(huì)使你的系統(tǒng)過(guò)于捉襟見(jiàn)肘（比如10點(diǎn)柵格）。最終你要拿捏一個(gè)最“合適”的步進(jìn)作為你的柵格基礎(chǔ)。這套系統(tǒng)必須足夠易于上手且易于復(fù)用，才能稱之為好的系統(tǒng)。

（譯者：作者此處有循環(huán)論證之嫌，因?yàn)榇颂帉?shí)際上只是解釋了一遍8為什么好（8的倍數(shù)最好，因?yàn)?和10都不夠好），至于為什么不夠好，只提出了“6過(guò)于細(xì)碎”而“10過(guò)于笨拙”，但分別具體如何導(dǎo)致的細(xì)碎/笨拙，從而導(dǎo)致了怎樣的弊端，以及細(xì)碎與笨拙的定義，都缺少進(jìn)一步舉證。我并不是說(shuō)此處錯(cuò)，只是認(rèn)為此處缺乏論證。）

8點(diǎn)柵格的價(jià)值幾何？

• 對(duì)于設(shè)計(jì)師：提升效率、減少?zèng)Q策、同時(shí)讓元素之間保持一種協(xié)調(diào)的節(jié)奏。
• 對(duì)于團(tuán)隊(duì)：設(shè)計(jì)師和工程師之間更容易達(dá)成默契，工程師可以較輕松地用肉眼丈量8的倍數(shù)，而不是趴在那一個(gè)一個(gè)數(shù)像素。
• 對(duì)于用戶：這讓他們信賴的品牌得以保持高質(zhì)量的一致性體驗(yàn)。并且在自己的設(shè)備上也不會(huì)出現(xiàn)模糊的半像素偏移。

我該從何做起？

這有一些設(shè)計(jì)師和工程師對(duì)于8點(diǎn)柵格的探討，很有價(jià)值：

• Bryn Jackson的8點(diǎn)柵格?是從定義到實(shí)現(xiàn)的最全面的指南。
• Anthony Collurafici寫(xiě)的關(guān)于Sketch工作流的文章?是一篇超贊的入門(mén)指南。 他也是Nudg.it?的創(chuàng)造者，大大加快了我的工作流程。
• Google Material Design - Metrics＆keylines?版塊是另一處極佳的資源，例子和注釋都非常詳實(shí)。
• Intuit的“Harmony設(shè)計(jì)系統(tǒng)”?對(duì)響應(yīng)式柵格的基本原理也有很好的解釋。

「柵格相關(guān)好文推薦」

1. 《網(wǎng)頁(yè)設(shè)計(jì)中，如何突破柵格的限制又保持協(xié)調(diào)？》
2. 《最熱門(mén)工具推薦！為響應(yīng)式網(wǎng)站而生的40款柵格神器》

原文地址：medium
譯者：@Alpha_Lynnn

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com