作為一個(gè)設(shè)計(jì)師無(wú)論是在設(shè)計(jì)網(wǎng)站岂昭、平面排版署恍、甚至移動(dòng)界面兴溜，你都可能聽(tīng)說(shuō)過(guò)網(wǎng)格系統(tǒng)這個(gè)概念项鬼。在設(shè)計(jì)中是有一個(gè)巨大的網(wǎng)格來(lái)對(duì)齊我們?cè)O(shè)計(jì)的內(nèi)容哑梳，就像我們PS中常用的參考線或者像素點(diǎn)那樣。那么是否有一種通用的網(wǎng)格設(shè)計(jì)方法能為我們的設(shè)計(jì)做一些指導(dǎo)绘盟，在聽(tīng)了bryn jackson教授關(guān)于8像素網(wǎng)格系統(tǒng)之后鸠真，我自己也去總結(jié)了以下的規(guī)律。
不用8像素系統(tǒng)有什么問(wèn)題龄毡？
我曾經(jīng)使用Bootstrap和Foundation框架來(lái)迅速搭建網(wǎng)站吠卷，也嘗試過(guò)建立一個(gè)類型的個(gè)人框架系統(tǒng)，方便以后的復(fù)用沦零。但是最近我才意識(shí)到一些組件比如按鈕可以方便美觀的獨(dú)立使用祭隔，但是把這些獨(dú)立控件直接使用在其他復(fù)雜的項(xiàng)目中去會(huì)有巨大的缺陷。我可以用自己的像素眼來(lái)保證每個(gè)元素的位置路操，但是沒(méi)有辦法保證項(xiàng)目中其他的設(shè)計(jì)師與前端工程師有相同的視角疾渴，如果沒(méi)有一個(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ì)，那么一致性是必須的慌核。如果你用過(guò)淘寶的話你就會(huì)發(fā)現(xiàn)距境，付款的頁(yè)面與購(gòu)物流程的界面是不同的，在付款頁(yè)面你會(huì)有強(qiáng)烈的意識(shí)垮卓，你是一個(gè)付款頁(yè)面垫桂，需要你輸入一些重要的個(gè)人信息。風(fēng)格統(tǒng)一這件事可能比你想象的價(jià)值要高很多粟按。
為什么使用Bootstrap或其他的類似系統(tǒng)還不夠诬滩？
Bootstrap架構(gòu)更多的偏向于一種標(biāo)準(zhǔn)的組件庫(kù)架構(gòu)霹粥，用于保證設(shè)計(jì)師和開(kāi)發(fā)者關(guān)注于產(chǎn)品的內(nèi)容和用戶體驗(yàn)。但是沒(méi)有一致性的規(guī)則會(huì)導(dǎo)致在不同頁(yè)面設(shè)計(jì)時(shí)會(huì)造成沖突疼鸟，特別是在一個(gè)項(xiàng)目中超過(guò)兩個(gè)設(shè)計(jì)師時(shí)后控。
我之前在Pivotal工作的時(shí)候，經(jīng)常需要去做一些新的控件和圖層空镜，當(dāng)我最近在把幾個(gè)設(shè)計(jì)部門(mén)結(jié)合起來(lái)的時(shí)候發(fā)現(xiàn)浩淘，每個(gè)頁(yè)面頂部的菜單欄有一些細(xì)微的差異。由于每個(gè)頁(yè)面是由世界各地不同的分公司制作的吴攒，雖然看起來(lái)差不多张抄，但是在細(xì)節(jié)上難以統(tǒng)一。每個(gè)部分有不同的高度和邊距洼怔，每個(gè)設(shè)計(jì)部門(mén)的數(shù)值設(shè)置沒(méi)有背后的準(zhǔn)則署惯。
更好的解決方案應(yīng)該是怎樣的？
使用8的倍數(shù)來(lái)控制組建的大小和間隔镣隶。這意味著极谊，所有的高度，寬度和間隔都將會(huì)是8的倍數(shù)矾缓。
不同尺寸的屏幕和分辨率為設(shè)計(jì)師帶來(lái)了不必要的麻煩怀酷。用8這樣的偶數(shù)讓縮放變得很簡(jiǎn)單，并且能夠適用于大部分的情況嗜闻。
對(duì)于有1.5倍大小的設(shè)備來(lái)說(shuō)，縮放一個(gè)基數(shù)大小的畫(huà)面就會(huì)產(chǎn)生虛邊桅锄。比如將一個(gè)5px的方格縮放到1.5倍琉雳，就會(huì)產(chǎn)生0.5px的邊緣。
那么為什么不用其他的數(shù)字友瘤，比如6或者10翠肘？
大多數(shù)屏幕的尺寸都是8的倍數(shù)，這讓8變的更加適用辫秧。用8的倍數(shù)來(lái)縮放束倍，這時(shí)候就比6或10來(lái)的更得心應(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ì)給他們帶來(lái)高度的一致性。和半個(gè)像素的模糊邊緣說(shuō)再見(jiàn)吧律歼。
