2019-5-24 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
柵格系統(tǒng)在UI設(shè)計(jì)和前端開(kāi)發(fā)中是被應(yīng)用的很廣泛一套體系，但真正能掌握并很好運(yùn)用的人卻不多，一起來(lái)學(xué)習(xí)吧！
環(huán)顧身邊常見(jiàn)的優(yōu)秀設(shè)計(jì)很多都使用了柵格系統(tǒng)，你可能非常贊同在界面中使用柵格系統(tǒng)，但卻沒(méi)有人告訴你應(yīng)該如何使用它們。
印刷中也會(huì)用到柵格，但就本文而言，我主要想討論的是用于PC和移動(dòng)設(shè)備上的柵格系統(tǒng)設(shè)計(jì)。
紫色塊放內(nèi)容
內(nèi)容塊包括文本，圖片或者是兩者的組合形式，背景顏色實(shí)際上不能算是內(nèi)容元素，除非是作為文本或者圖片的容器。
上圖中的粉色塊作為柵格中的列，它們構(gòu)成了內(nèi)容寬度。一般來(lái)說(shuō)，列寬是不會(huì)變的，只是列數(shù)會(huì)隨著設(shè)備的不同而變化，比如從PC端的12列變?yōu)槠桨咫娔X上的8列，然后在移動(dòng)端變?yōu)?列。嚴(yán)格來(lái)說(shuō)，你其實(shí)可以定義任何想要的列寬，但大多數(shù)情況下的網(wǎng)格列寬都設(shè)置在60-80px之間。選擇合適的列寬是最重要的，因?yàn)樗莾?nèi)容寬度的主要決定因素。
水槽是在列與列之間的空間。20px是一個(gè)常見(jiàn)的尺寸設(shè)置，當(dāng)設(shè)計(jì)塊狀或者卡片元素的網(wǎng)格時(shí)，這種間距非常重要，比如做照片類(lèi)設(shè)計(jì)的時(shí)候。有些系統(tǒng)會(huì)隨著設(shè)備寬度的增加而增加水槽的寬度，但也可以保持固定。
外邊距也稱(chēng)為外水槽，是內(nèi)容寬度之外的空白區(qū)域。為了更方便的設(shè)計(jì)，外邊距會(huì)隨著設(shè)備寬度的增加而增加。移動(dòng)設(shè)備的邊距通常為20-30px，而在平板電腦和PC端，這個(gè)間距通常會(huì)差異很大。
下面會(huì)介紹一些基本的準(zhǔn)則，但要明白在實(shí)際設(shè)計(jì)中其實(shí)沒(méi)有任何硬性的規(guī)定。
1. 內(nèi)容元素必須位于若干列上
其核心思想是內(nèi)容元素必須位于若干列上，你可以任意分割，比如6x2,3x4,4x3。下面的例子中，我展示了不同分割方式設(shè)計(jì)的信息卡片。
不同柵格設(shè)計(jì)展示
很棒，這看起來(lái)很簡(jiǎn)單對(duì)吧。有的時(shí)候，你想把內(nèi)容嚴(yán)格的套用在柵格布局上，會(huì)發(fā)現(xiàn)可能不夠美觀，比如下面的例子。
如果我們把內(nèi)容都放在網(wǎng)格上，文本內(nèi)容會(huì)顯得很長(zhǎng)，最佳的位置是不嚴(yán)格在任何網(wǎng)格上，這也是可以的，只要理解了整個(gè)元素實(shí)際上是一個(gè)不可見(jiàn)的，更大的容器就行。
這也是4x3的布局，只是給了它內(nèi)部不可見(jiàn)的填充。當(dāng)把這樣的設(shè)計(jì)稿給到開(kāi)發(fā)時(shí)，他們就能很直觀的知道這一點(diǎn)，所以這更利于去理解如何實(shí)際地分配好內(nèi)容。
2. 不要將內(nèi)容元素留在水槽中
內(nèi)容元素應(yīng)該要在列寬以?xún)?nèi)，而不能流出在水槽之外，這樣會(huì)違背柵格化的目的。
3. 只要父級(jí)元素對(duì)齊柵格，子級(jí)可以不完全對(duì)齊列
有些時(shí)候，你想要將設(shè)計(jì)和卡片分成兩部分，一半是圖片，一半是文字。你可能遇到這樣尷尬的情況，圖片沒(méi)有完全落在一列上，文字被迫以一種奇怪的方式自適應(yīng)。其實(shí)不用擔(dān)心，只要“父”容器對(duì)齊柵格，這就沒(méi)有關(guān)系。
父子級(jí)內(nèi)容柵格排版示意
4. 除非有意，否則不要把列作為外部填充
所有重要內(nèi)容都應(yīng)該與柵格列寬相適應(yīng)。一開(kāi)始會(huì)覺(jué)得奇怪，因?yàn)槿绻涣?xí)慣使用網(wǎng)格，可能會(huì)把網(wǎng)格寬度當(dāng)成全部?jī)?nèi)容區(qū)域，所以還需要給它設(shè)定一定的內(nèi)邊距。此時(shí)外邊距就起到了留白的作用，它們充當(dāng)了內(nèi)邊距。不要在網(wǎng)格內(nèi)部利用列寬當(dāng)成內(nèi)邊距，而是要與網(wǎng)格最外面保持對(duì)齊，利用網(wǎng)格外的間距來(lái)當(dāng)做留白區(qū)域。根據(jù)代碼實(shí)現(xiàn)方式，要么網(wǎng)格內(nèi)的內(nèi)容按比例縮放，邊距固定，要么外邊距與內(nèi)容同時(shí)縮放。
正確的內(nèi)容填充方式和不正確的把柵格當(dāng)做邊距
所以如果有人說(shuō)“我需要一個(gè)1200px寬的設(shè)計(jì)”，這并不意味著你的設(shè)計(jì)就是1200px寬，這其實(shí)是說(shuō)設(shè)計(jì)內(nèi)容寬度在1200px的畫(huà)布內(nèi)，實(shí)際內(nèi)容占位是960px，這樣就會(huì)有空間留出外邊距。
5. 完全出血的元素或紋理圖形應(yīng)該設(shè)計(jì)在畫(huà)板邊緣，并理解為出血的列網(wǎng)格
這個(gè)頁(yè)面布局的頂部圖片被設(shè)計(jì)成完全出血
這是一個(gè)例外的規(guī)則，當(dāng)背景顏色或者圖片在完全出血的情況下，開(kāi)發(fā)同學(xué)會(huì)把它理解為一個(gè)全屏的內(nèi)容元素。
如果設(shè)計(jì)的是裝飾元素之類(lèi)的內(nèi)容，可以接受它被裁切掉，此時(shí)也可以脫離柵格化的設(shè)計(jì)。
一些圖片和文字的出血設(shè)計(jì)
頁(yè)眉和頁(yè)腳有時(shí)也有例外，它們不被認(rèn)為是內(nèi)容的一部分。有些設(shè)計(jì)將它們固定在瀏覽器邊緣，有些則喜歡保持內(nèi)容的寬度，這取決于自身功能和內(nèi)容的情況。將它們保持在內(nèi)容寬度內(nèi)的好處是，當(dāng)用戶(hù)在寬屏顯示器上看頁(yè)面時(shí)，不需要來(lái)回掃視；將它們固定在瀏覽器上的好處是可以為導(dǎo)航元素提供更多的空間。
柵格化布局如何做到響應(yīng)式
圖片來(lái)源Intuit
在傳統(tǒng)的柵格化系統(tǒng)設(shè)計(jì)中，列的寬度和水槽的寬度是保持不變的，只是列的“數(shù)量”發(fā)生變化。為什么要這么處理呢？這是為了讓設(shè)計(jì)更簡(jiǎn)單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會(huì)顯示兩張卡片，并把第三張卡片進(jìn)行折行顯示在第二行上。不需要做任何的調(diào)整，因?yàn)橐呀?jīng)知道它位于第四列上了。在手機(jī)上，答案也很簡(jiǎn)單，只需要一張卡片，其他的就會(huì)自動(dòng)堆到下面的行中。如果你愿意，也可以變得有創(chuàng)意，選擇只在手機(jī)上顯示一張卡片，或者做一個(gè)水平滾動(dòng)。這些列的自適應(yīng)對(duì)于代碼來(lái)說(shuō)就是很簡(jiǎn)單的參考。
實(shí)際上，web必須呈現(xiàn)任何瀏覽器的寬度。例如，有一個(gè)大顯示器，它可以看到1600像素寬的東西，實(shí)際上pc端的網(wǎng)頁(yè)設(shè)計(jì)是1200px寬，平板電腦上是768px寬，手機(jī)是360px寬。所以你會(huì)看到一個(gè)小于1200px的設(shè)計(jì)，有大量的留白。但是當(dāng)你的瀏覽器再小一個(gè)像素，1199px，會(huì)發(fā)生什么呢？
固定網(wǎng)格
固定柵格示意
如果開(kāi)發(fā)那邊寫(xiě)了一個(gè)固定柵格，當(dāng)你從桌面縮小到平板電腦，就像是在900px的瀏覽器寬度時(shí)，你不會(huì)看到任何變化，設(shè)計(jì)就像是被剪掉了一樣。但當(dāng)達(dá)到768px臨界點(diǎn)時(shí)，設(shè)計(jì)馬上就會(huì)改變，平板電腦上的顯示效果就會(huì)好起來(lái)。如果繼續(xù)減小這個(gè)值，同樣的事情也會(huì)發(fā)生，在到達(dá)另一個(gè)臨界值之前，設(shè)計(jì)看起來(lái)都是不變的。
流動(dòng)網(wǎng)格
流動(dòng)網(wǎng)格的示例
現(xiàn)在來(lái)看看流動(dòng)網(wǎng)格的特點(diǎn)，當(dāng)窗口縮小時(shí)，內(nèi)容將動(dòng)態(tài)的發(fā)生變化，文本會(huì)進(jìn)行換行，元素也會(huì)變窄。然而，這些元素在內(nèi)容寬度縮小到下一個(gè)臨界值之前，布局是不會(huì)變化的。
所以我想說(shuō)的是，設(shè)計(jì)的臨界值只是一個(gè)更改布局的參考點(diǎn)。這就是為什么列寬和水槽在網(wǎng)格中不會(huì)改變的原因，因?yàn)槲覀兿胱屧O(shè)計(jì)師在考慮布局時(shí)能夠更容易地創(chuàng)建一致性。
混合網(wǎng)格
在實(shí)際項(xiàng)目中，使用流動(dòng)網(wǎng)格和固定網(wǎng)格的組合也是常見(jiàn)的做法。網(wǎng)站通常是流動(dòng)網(wǎng)格，因?yàn)樗ミm應(yīng)各種不同終端的大小。
一些做的很酷的柵格系統(tǒng)
不需要太死板地去堅(jiān)持傳統(tǒng)柵格套路，12、8、4這樣的分布，甚至不需要20px的水槽。下面是一些在設(shè)計(jì)中使用柵格系統(tǒng)做的很棒的設(shè)計(jì)靈感。
Invision’s Genome Project
可以看到，他們的設(shè)計(jì)故意不去使用任何的水槽，所以看起來(lái)是無(wú)縫的。
這個(gè)網(wǎng)站不僅設(shè)計(jì)的很好，他們還利用了在設(shè)計(jì)中展示他們自己的柵格系統(tǒng)來(lái)讓整體的設(shè)計(jì)變得更加酷炫。
Dropbox Design
他們沒(méi)有設(shè)計(jì)水槽和外邊距，相反，整個(gè)頁(yè)面被分成兩半，然后將內(nèi)容填充到這兩部分。
Wordpress
Wordpress創(chuàng)建賬號(hào)頁(yè)面
使用網(wǎng)格的方式取決于你自己。你可以在主要內(nèi)容部分使用網(wǎng)格，次要內(nèi)容則不使用。在Wordpress的例子中，頁(yè)面中間的部分使用柵格化設(shè)計(jì)，左側(cè)的側(cè)邊欄則沒(méi)有使用。
The Mockup Club
內(nèi)容和網(wǎng)格也并不總是從中間開(kāi)始，對(duì)于模型網(wǎng)站，內(nèi)容在左邊也未嘗不可。
我非常確定的說(shuō)，Instagram的PC端是用上了6列柵格布局。
要點(diǎn)總結(jié)
寫(xiě)這篇文章的目的是想提供一些關(guān)于如何在響應(yīng)式設(shè)計(jì)中使用柵格系統(tǒng)。我知道對(duì)于我自己來(lái)說(shuō)，我花了很多年的時(shí)間寫(xiě)了大量的代碼來(lái)理解網(wǎng)格是如何工作的。我在YouYube上看了很多視頻，也閱讀了大量的文章，但每個(gè)人都在關(guān)注它為什么重要，卻不去注重到底怎么在自己的項(xiàng)目中使用這些原則。
你要做的最好的事情就是從現(xiàn)在開(kāi)始注意那些優(yōu)秀設(shè)計(jì)是如何對(duì)齊元素的，你將會(huì)開(kāi)始看到這些模式。為了幫助理解，這里有一些設(shè)計(jì)系統(tǒng)概述了它們的網(wǎng)格使用：
Google’s Material Design System
Intuit’s Design System
IBM’s Carbon Design System
…And here’s huge list of other systems you can look through
在完全理解了網(wǎng)格的工作原理之后，我已經(jīng)成為了一名更好的設(shè)計(jì)師，因?yàn)槲抑牢业脑O(shè)計(jì)將如何在臨界值之間進(jìn)行轉(zhuǎn)換。我也可以落地我的設(shè)計(jì)，使它們能夠有一個(gè)完美的像素對(duì)齊。這樣的規(guī)范帶來(lái)了更一致，更簡(jiǎn)潔的設(shè)計(jì)，當(dāng)用戶(hù)從一個(gè)界面到另一個(gè)界面流轉(zhuǎn)時(shí)，這真的提升了產(chǎn)品的檔次。我建議在你的設(shè)計(jì)中去應(yīng)用這些網(wǎng)格，并和開(kāi)發(fā)一起，以相同的方式將它們落地，這將會(huì)是一個(gè)非常不錯(cuò)的進(jìn)步。
藍(lán)藍(lán)設(shè)計(jì)( www.jghy.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jghy.net
