作為一個(gè)設(shè)計(jì)師無論是在設(shè)計(jì)網(wǎng)站、平面排版、甚至移動(dòng)界面，你都可能聽說過網(wǎng)格系統(tǒng)這個(gè)概念。在設(shè)計(jì)中是有一個(gè)巨大的網(wǎng)格來對(duì)齊我們?cè)O(shè)計(jì)的內(nèi)容，就像我們PS中常用的參考線或者像素點(diǎn)那樣。那么是否有一種通用的網(wǎng)格設(shè)計(jì)方法能為我們的設(shè)計(jì)做一些指導(dǎo)，在聽了bryn jackson教授關(guān)于8像素網(wǎng)格系統(tǒng)之后，我自己也去總結(jié)了以下的規(guī)律。
不用8像素系統(tǒng)有什么問題？
我曾經(jīng)使用Bootstrap和Foundation框架來迅速搭建網(wǎng)站，也嘗試過建立一個(gè)類型的個(gè)人框架系統(tǒng)，方便以后的復(fù)用。但是最近我才意識(shí)到一些組件比如按鈕可以方便美觀的獨(dú)立使用，但是把這些獨(dú)立控件直接使用在其他復(fù)雜的項(xiàng)目中去會(huì)有巨大的缺陷。我可以用自己的像素眼來保證每個(gè)元素的位置，但是沒有辦法保證項(xiàng)目中其他的設(shè)計(jì)師與前端工程師有相同的視角，如果沒有一個(gè)通用的空間布局系統(tǒng)規(guī)則就很難保證設(shè)計(jì)的一致性。
在下面這個(gè)比較中你可以直觀地看到8像素網(wǎng)格系統(tǒng)在垂直對(duì)齊上與其他利用一個(gè)任意數(shù)的對(duì)齊系統(tǒng)的區(qū)別。
為什么界面需要保持一致性？
如果你只是簡(jiǎn)簡(jiǎn)單單做一個(gè)飛機(jī)稿，那么一致性不是必須的。但是如果你想做一個(gè)專業(yè)的，令人相信的設(shè)計(jì)，那么一致性是必須的。如果你用過淘寶的話你就會(huì)發(fā)現(xiàn)，付款的頁面與購物流程的界面是不同的，在付款頁面你會(huì)有強(qiáng)烈的意識(shí)，你是一個(gè)付款頁面，需要你輸入一些重要的個(gè)人信息。風(fēng)格統(tǒng)一這件事可能比你想象的價(jià)值要高很多。
為什么使用Bootstrap或其他的類似系統(tǒng)還不夠？
Bootstrap架構(gòu)更多的偏向于一種標(biāo)準(zhǔn)的組件庫架構(gòu)，用于保證設(shè)計(jì)師和開發(fā)者關(guān)注于產(chǎn)品的內(nèi)容和用戶體驗(yàn)。但是沒有一致性的規(guī)則會(huì)導(dǎo)致在不同頁面設(shè)計(jì)時(shí)會(huì)造成沖突，特別是在一個(gè)項(xiàng)目中超過兩個(gè)設(shè)計(jì)師時(shí)。
我之前在Pivotal工作的時(shí)候，經(jīng)常需要去做一些新的控件和圖層，當(dāng)我最近在把幾個(gè)設(shè)計(jì)部門結(jié)合起來的時(shí)候發(fā)現(xiàn)，每個(gè)頁面頂部的菜單欄有一些細(xì)微的差異。由于每個(gè)頁面是由世界各地不同的分公司制作的，雖然看起來差不多，但是在細(xì)節(jié)上難以統(tǒng)一。每個(gè)部分有不同的高度和邊距，每個(gè)設(shè)計(jì)部門的數(shù)值設(shè)置沒有背后的準(zhǔn)則。
更好的解決方案應(yīng)該是怎樣的？
使用8的倍數(shù)來控制組建的大小和間隔。這意味著，所有的高度，寬度和間隔都將會(huì)是8的倍數(shù)。
不同尺寸的屏幕和分辨率為設(shè)計(jì)師帶來了不必要的麻煩。用8這樣的偶數(shù)讓縮放變得很簡(jiǎn)單，并且能夠適用于大部分的情況。
對(duì)于有1.5倍大小的設(shè)備來說，縮放一個(gè)基數(shù)大小的畫面就會(huì)產(chǎn)生虛邊。比如將一個(gè)5px的方格縮放到1.5倍，就會(huì)產(chǎn)生0.5px的邊緣。
那么為什么不用其他的數(shù)字，比如6或者10？
大多數(shù)屏幕的尺寸都是8的倍數(shù)，這讓8變的更加適用。用8的倍數(shù)來縮放，這時(shí)候就比6或10來的更得心應(yīng)手。最后你還是需要決定你的觀眾適合什么樣的系統(tǒng)。一個(gè)系統(tǒng)能夠稱之為系統(tǒng)是因?yàn)樗軌虮粡?fù)制并且被遵守。
8像素網(wǎng)格系統(tǒng)的價(jià)值在哪里？
對(duì)于設(shè)計(jì)師：高效，減少不必要的爭(zhēng)論和更高的統(tǒng)一性。
對(duì)于團(tuán)隊(duì)：一個(gè)簡(jiǎn)單的規(guī)則讓設(shè)計(jì)師和工程師保持高度統(tǒng)一，減少不必要的溝通。工程師在這樣的系統(tǒng)下就能夠更快速的識(shí)別一個(gè)8px的間隔，而不需要每次都進(jìn)行測(cè)量。
對(duì)于用戶：它們相信的品牌會(huì)給他們帶來高度的一致性。和半個(gè)像素的模糊邊緣說再見吧。
