柵格系統(tǒng)在用戶界面設(shè)計(jì)和前端開發(fā)中得到了廣泛的應(yīng)用。然而，并沒有多少人能夠真正掌握和運(yùn)用它。今天行家來分享如何更好地使用柵格系統(tǒng)。

看看你周圍的好設(shè)計(jì)，他們中的許多使用光柵系統(tǒng)。您可能非常贊成在界面中使用光柵系統(tǒng)，但沒有人告訴您如何使用它們。柵格也用于打印，但在本文中，將重點(diǎn)介紹PC和移動(dòng)設(shè)備柵格系統(tǒng)的設(shè)計(jì)。

紫色塊放內(nèi)容

內(nèi)容塊包括文本、圖片或兩者的組合。背景色實(shí)際上不是內(nèi)容元素，除非它用作文本或圖片的容器。

上圖中的粉紅色塊充當(dāng)網(wǎng)格中的列，它們構(gòu)成內(nèi)容寬度。一般來說，列的寬度不會(huì)改變，但是列的數(shù)目從PC上的12列到平板上的8列，然后是移動(dòng)側(cè)的4列。嚴(yán)格來說，您實(shí)際上可以定義所需的任何列寬，但在大多數(shù)情況下，網(wǎng)格列寬度設(shè)置在60-80px之間。選擇正確的列寬是最重要的，因?yàn)樗莾?nèi)容寬度的主要決定因素。

水槽的是列與列之間的距離。20px是常見的尺寸設(shè)置，在設(shè)計(jì)塊或卡元素的網(wǎng)格時(shí)非常重要，例如在進(jìn)行基于照片的設(shè)計(jì)時(shí)。有些系統(tǒng)隨著設(shè)備寬度的增加而增加水槽的寬度，但它們也可以保持不變。

邊距也稱為外部接收器，并且是內(nèi)容寬度之外的空白區(qū)域。為便于設(shè)計(jì)，外緣隨設(shè)備寬度的增加而增大。移動(dòng)設(shè)備的邊距通常為20-30px，而在平板電腦和PC端，這個(gè)間距通常會(huì)差異很大。

下面將介紹一些基本的指導(dǎo)原則，但要理解在實(shí)際設(shè)計(jì)中沒有硬性和快速的規(guī)則。

1. 內(nèi)容元素必須位于若干列上

其核心思想是內(nèi)容元素必須位于若干列上，你可以任意分割，比如6x2,3x4,4x3。在下面的例子中，我展示了以不同方式設(shè)計(jì)的信息卡。

不同柵格設(shè)計(jì)展示

很棒，這看起來很簡(jiǎn)單對(duì)吧。有時(shí)，如果希望將內(nèi)容嚴(yán)格應(yīng)用于網(wǎng)格布局，則可能不夠漂亮，例如下面的示例。

如果我們將所有的內(nèi)容放在網(wǎng)格上，文本內(nèi)容看起來會(huì)很長(zhǎng)，而且最好的位置不是嚴(yán)格地放在任何網(wǎng)格上，這也是可能的，只要我們理解整個(gè)元素實(shí)際上是一個(gè)看不見的、更大的容器。

這也是4x3的布局，只是給了它內(nèi)部不可見的填充。當(dāng)這樣的設(shè)計(jì)被賦予開發(fā)時(shí)，他們可以直觀地知道這一點(diǎn)，因此更好地理解如何實(shí)際分發(fā)內(nèi)容。

2. 不要將內(nèi)容元素留在水槽中

內(nèi)容元素應(yīng)該要在列寬以內(nèi)，而不能流出在水槽之外，這樣?xùn)鸥窕妥兊脹]有意義了。

3.只要父級(jí)元素對(duì)齊柵格，子級(jí)可以不完全對(duì)齊列

有時(shí)候，你想把設(shè)計(jì)和卡片分為兩部分，一部分是圖片，另一部分是文字。你可能會(huì)遇到這樣一個(gè)尷尬的情況，圖片并不完全落在一個(gè)專欄上，文本被迫以一種奇怪的方式進(jìn)行改編。其實(shí)不用擔(dān)心，只要“父”容器對(duì)齊柵格，這就沒有關(guān)系。

父和子內(nèi)容網(wǎng)格排版

4. 除非有意，否則不要把列作為外部填充

所有重要內(nèi)容都應(yīng)與網(wǎng)格列寬度匹配。一開始會(huì)很奇怪，因?yàn)槿绻涣?xí)慣使用網(wǎng)格，則可以將網(wǎng)格寬度視為完整的內(nèi)容區(qū)域，因此還需要為其設(shè)置一些內(nèi)部邊距。在這一點(diǎn)上，外部距離起到了離開空白空間的作用，它們充當(dāng)了內(nèi)部邊界。與其在網(wǎng)格中使用列寬度作為內(nèi)部邊距，不如保持與網(wǎng)格的最外層對(duì)齊，并使用網(wǎng)格的額外間距作為空白區(qū)域。根據(jù)代碼實(shí)現(xiàn)的不同，要么將網(wǎng)格內(nèi)的內(nèi)容縮放，邊緣距離固定，要么將外部距離與內(nèi)容同時(shí)縮放。

正確的內(nèi)容填充和不正確使用網(wǎng)格作為邊距

所以如果有人說“我需要一個(gè)1200px寬的設(shè)計(jì)”，這并不意味著你的設(shè)計(jì)就是1200px寬，這其實(shí)是說設(shè)計(jì)內(nèi)容寬度在1200px的畫布內(nèi)，實(shí)際內(nèi)容占位是960px，這樣就會(huì)有空間留出外邊距。

5.完全出血的元素或紋理圖形應(yīng)設(shè)計(jì)在繪圖板的邊緣，并理解為出血柱網(wǎng)格

此頁面布局的頂部圖片設(shè)計(jì)為完全出血。

這是一個(gè)例外，當(dāng)背景顏色或圖片完全出血時(shí)，開發(fā)人員將其理解為全屏內(nèi)容元素。

如果你設(shè)計(jì)了一個(gè)裝飾性的元素或者類似的東西，你可以接受它被切斷，或者你可以擺脫光柵化的設(shè)計(jì)。

一些圖文的出血設(shè)計(jì)

頁眉和頁腳有時(shí)有例外，它們不被視為內(nèi)容的一部分。一些設(shè)計(jì)將它們固定在瀏覽器的邊緣，而另一些則根據(jù)自身的功能和內(nèi)容，更傾向于保持內(nèi)容的寬度。將它們保持在內(nèi)容寬度內(nèi)的優(yōu)點(diǎn)是當(dāng)用戶在寬屏顯示器上查看頁面時(shí)，不需要搖動(dòng)和搖擺;將它們固定到瀏覽器的好處是它為導(dǎo)航元素提供了更多空間。

6.如何對(duì)柵格格布局進(jìn)行響應(yīng)

圖片來源Intuit

在傳統(tǒng)的柵格系統(tǒng)設(shè)計(jì)中，柱的寬度和水槽的寬度保持不變，但柱的“數(shù)”卻發(fā)生了變化。你為什么要這么做？這是為了使設(shè)計(jì)更容易。如果在桌面的四列中每列放置一組三張卡片，則在平板電腦上顯示兩張卡片，在第二行上分解第三張卡。沒有必要進(jìn)行任何調(diào)整，因?yàn)樗呀?jīng)在第四欄中了。在電話里，答案也很簡(jiǎn)單。您所需要的就是一張卡，其余的將自動(dòng)堆放到下面的行中。如果你喜歡，你也可以有創(chuàng)意，選擇只在你的手機(jī)上顯示一張卡片，或者做一個(gè)水平滾動(dòng)。對(duì)這些列的修改是對(duì)代碼的簡(jiǎn)單引用。

實(shí)際上，web必須呈現(xiàn)任何瀏覽器的寬度。例如，有一個(gè)大顯示器，它可以看到1600像素寬的東西，實(shí)際上pc端的網(wǎng)頁設(shè)計(jì)是1200px寬，平板電腦上是768px寬，手機(jī)是360px寬。所以你會(huì)看到一個(gè)小于1200px的設(shè)計(jì)，有大量的留白。但是當(dāng)你的瀏覽器再小一個(gè)像素，1199px，會(huì)發(fā)生什么呢？

固定柵格

固定柵格示意

如果你在開發(fā)方面寫一個(gè)固定的網(wǎng)格，當(dāng)你從桌面縮小到平板電腦，比如900px瀏覽器寬度，你就不會(huì)看到任何變化，設(shè)計(jì)就像被切斷。但當(dāng)達(dá)到768px臨界點(diǎn)時(shí)，設(shè)計(jì)馬上就會(huì)改變，平板電腦上的顯示效果就會(huì)好起來。如果您繼續(xù)減少此值，則會(huì)發(fā)生相同的情況，在達(dá)到另一個(gè)閾值之前，設(shè)計(jì)將保持不變。

流動(dòng)網(wǎng)格

流動(dòng)網(wǎng)格的示例

現(xiàn)在看看移動(dòng)網(wǎng)格的特點(diǎn)，當(dāng)窗口變窄時(shí)，內(nèi)容將動(dòng)態(tài)變化，文本將被包裝，元素將被縮小。但是，直到內(nèi)容寬度縮小到下一個(gè)臨界值時(shí)，這些元素的布局才會(huì)改變。

所以我想說的是，設(shè)計(jì)閾值只是更改布局的參考點(diǎn)。這就是為什么列寬和接收器在網(wǎng)格中不會(huì)更改的原因，因?yàn)槲覀兿ＭO(shè)計(jì)人員在考慮布局時(shí)更容易地創(chuàng)建一致性。

混合網(wǎng)格

在實(shí)際項(xiàng)目中，通常使用移動(dòng)和固定網(wǎng)格的組合。該站點(diǎn)通常是移動(dòng)網(wǎng)格，因?yàn)樗仨氝m應(yīng)各種終端的大小。

7.一些很酷的網(wǎng)格系統(tǒng)。

不需要太死板地去堅(jiān)持傳統(tǒng)柵格套路，12、8、4這樣的分布，甚至不需要20px的水槽。這里有一些在設(shè)計(jì)中使用光柵系統(tǒng)的好主意。

Invision’s Genome Project

可以看出，他們的設(shè)計(jì)故意不使用任何水槽，因此它看起來無縫。

8. 要點(diǎn)總結(jié)

本文的目的是提供一些有關(guān)如何在響應(yīng)性設(shè)計(jì)中使用柵格系統(tǒng)的信息。你要做的最好的事情就是從現(xiàn)在開始注意好的設(shè)計(jì)是如何將元素對(duì)齊的，然后你將開始看到這些模式。在完全理解了柵格的工作原理之后，你們一定能成為一名更好的設(shè)計(jì)師，因?yàn)橹懒俗约旱脑O(shè)計(jì)將如何在閾值之間進(jìn)行轉(zhuǎn)換。這樣的規(guī)范帶來了更加一致和簡(jiǎn)單的設(shè)計(jì)，當(dāng)用戶從一個(gè)界面流向另一個(gè)界面時(shí)，這真正提高了產(chǎn)品的質(zhì)量。建議在您的設(shè)計(jì)中應(yīng)用這些網(wǎng)格，并以與開發(fā)一起研究落地方式，這將是一個(gè)非常好的進(jìn)步。

圖片來自于網(wǎng)絡(luò)

想學(xué)習(xí) 上行家