網(wǎng)站建設中UI設計中如何更好地使用柵格系統發(fā)布者：本站     時(shí)間：2022-05-05 09:05:20

環(huán)顧身邊常見(jiàn)的優(yōu)秀設計很多都使用了柵格系統，你可能非常贊同在界面中使用柵格系統，但卻沒(méi)有人告訴你應該如何使用它們。

印刷中也會(huì )用到柵格，但就本文而言，我主要想討論的是用于PC和移動(dòng)設備上的柵格系統設計。

UI設計中如何更好地使用柵格系統

紫色塊放內容

內容塊包括文本，圖片或者是兩者的組合形式，背景顏色實(shí)際上不能算是內容元素，除非是作為文本或者圖片的容器。

UI設計中如何更好地使用柵格系統

上圖中的粉色塊作為柵格中的列，它們構成了內容寬度。一般來(lái)說(shuō)，列寬是不會(huì )變的，只是列數會(huì )隨著(zhù)設備的不同而變化，比如從PC端的12列變?yōu)槠桨咫娔X上的8列，然后在移動(dòng)端變?yōu)?列。嚴格來(lái)說(shuō)，你其實(shí)可以定義任何想要的列寬，但大多數情況下的網(wǎng)格列寬都設置在60-80px之間。選擇合適的列寬是最重要的，因為它是內容寬度的主要決定因素。

UI設計中如何更好地使用柵格系統

水槽是在列與列之間的空間。20px是一個(gè)常見(jiàn)的尺寸設置，當設計塊狀或者卡片元素的網(wǎng)格時(shí)，這種間距非常重要，比如做照片類(lèi)設計的時(shí)候。有些系統會(huì )隨著(zhù)設備寬度的增加而增加水槽的寬度，但也可以保持固定。

UI設計中如何更好地使用柵格系統

外邊距也稱(chēng)為外水槽，是內容寬度之外的空白區域。為了更方便的設計，外邊距會(huì )隨著(zhù)設備寬度的增加而增加。移動(dòng)設備的邊距通常為20-30px，而在平板電腦和PC端，這個(gè)間距通常會(huì )差異很大。

下面會(huì )介紹一些基本的準則，但要明白在實(shí)際設計中其實(shí)沒(méi)有任何硬性的規定。

 

1. 內容元素必須位于若干列上

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

UI設計中如何更好地使用柵格系統

UI設計中如何更好地使用柵格系統

不同柵格設計展示

很棒，這看起來(lái)很簡(jiǎn)單對吧。有的時(shí)候，你想把內容嚴格的套用在柵格布局上，會(huì )發(fā)現可能不夠美觀(guān)，比如下面的例子。

UI設計中如何更好地使用柵格系統

UI設計中如何更好地使用柵格系統

如果我們把內容都放在網(wǎng)格上，文本內容會(huì )顯得很長(cháng)，最佳的位置是不嚴格在任何網(wǎng)格上，這也是可以的，只要理解了整個(gè)元素實(shí)際上是一個(gè)不可見(jiàn)的，更大的容器就行。

UI設計中如何更好地使用柵格系統

UI設計中如何更好地使用柵格系統

這也是4x3的布局，只是給了它內部不可見(jiàn)的填充。當把這樣的設計稿給到開(kāi)發(fā)時(shí)，他們就能很直觀(guān)的知道這一點(diǎn)，所以這更利于去理解如何實(shí)際地分配好內容。

 

2. 不要將內容元素留在水槽中

UI設計中如何更好地使用柵格系統

UI設計中如何更好地使用柵格系統

內容元素應該要在列寬以?xún)?，而不能流出在水槽之外，這樣會(huì )違背柵格化的目的。

 

3. 只要父級元素對齊柵格，子級可以不完全對齊列

有些時(shí)候，你想要將設計和卡片分成兩部分，一半是圖片，一半是文字。你可能遇到這樣尷尬的情況，圖片沒(méi)有完全落在一列上，文字被迫以一種奇怪的方式自適應。其實(shí)不用擔心，只要“父”容器對齊柵格，這就沒(méi)有關(guān)系。

UI設計中如何更好地使用柵格系統

UI設計中如何更好地使用柵格系統

父子級內容柵格排版示意

 

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

所有重要內容都應該與柵格列寬相適應。一開(kāi)始會(huì )覺(jué)得奇怪，因為如果不習慣使用網(wǎng)格，可能會(huì )把網(wǎng)格寬度當成全部?jì)热輩^域，所以還需要給它設定一定的內邊距。此時(shí)外邊距就起到了留白的作用，它們充當了內邊距。不要在網(wǎng)格內部利用列寬當成內邊距，而是要與網(wǎng)格最外面保持對齊，利用網(wǎng)格外的間距來(lái)當做留白區域。根據代碼實(shí)現方式，要么網(wǎng)格內的內容按比例縮放，邊距固定，要么外邊距與內容同時(shí)縮放。

UI設計中如何更好地使用柵格系統

UI設計中如何更好地使用柵格系統

正確的內容填充方式和不正確的把柵格當做邊距

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

 

5. 完全出血的元素或紋理圖形應該設計在畫(huà)板邊緣，并理解為出血的列網(wǎng)格

UI設計中如何更好地使用柵格系統

這個(gè)頁(yè)面布局的頂部圖片被設計成完全出血

這是一個(gè)例外的規則，當背景顏色或者圖片在完全出血的情況下，開(kāi)發(fā)同學(xué)會(huì )把它理解為一個(gè)全屏的內容元素。

UI設計中如何更好地使用柵格系統

UI設計中如何更好地使用柵格系統

如果設計的是裝飾元素之類(lèi)的內容，可以接受它被裁切掉，此時(shí)也可以脫離柵格化的設計。

UI設計中如何更好地使用柵格系統

UI設計中如何更好地使用柵格系統

一些圖片和文字的出血設計

頁(yè)眉和頁(yè)腳有時(shí)也有例外，它們不被認為是內容的一部分。有些設計將它們固定在瀏覽器邊緣，有些則喜歡保持內容的寬度，這取決于自身功能和內容的情況。將它們保持在內容寬度內的好處是，當用戶(hù)在寬屏顯示器上看頁(yè)面時(shí)，不需要來(lái)回掃視；將它們固定在瀏覽器上的好處是可以為導航元素提供更多的空間。

 

柵格化布局如何做到響應式

UI設計中如何更好地使用柵格系統

UI設計中如何更好地使用柵格系統

圖片來(lái)源Intuit

在傳統的柵格化系統設計中，列的寬度和水槽的寬度是保持不變的，只是列的“數量”發(fā)生變化。為什么要這么處理呢？這是為了讓設計更簡(jiǎn)單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會(huì )顯示兩張卡片，并把第三張卡片進(jìn)行折行顯示在第二行上。不需要做任何的調整，因為已經(jīng)知道它位于第四列上了。

在手機上，答案也很簡(jiǎn)單，只需要一張卡片，其他的就會(huì )自動(dòng)堆到下面的行中。如果你愿意，也可以變得有創(chuàng )意，選擇只在手機上顯示一張卡片，或者做一個(gè)水平滾動(dòng)。這些列的自適應對于代碼來(lái)說(shuō)就是很簡(jiǎn)單的參考。

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

 

固定網(wǎng)格

UI設計中如何更好地使用柵格系統

固定柵格示意

如果開(kāi)發(fā)那邊寫(xiě)了一個(gè)固定柵格，當你從桌面縮小到平板電腦，就像是在900px的瀏覽器寬度時(shí)，你不會(huì )看到任何變化，設計就像是被剪掉了一樣。但當達到768px臨界點(diǎn)時(shí)，設計馬上就會(huì )改變，平板電腦上的顯示效果就會(huì )好起來(lái)。如果繼續減小這個(gè)值，同樣的事情也會(huì )發(fā)生，在到達另一個(gè)臨界值之前，設計看起來(lái)都是不變的。

 

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

UI設計中如何更好地使用柵格系統

UI設計中如何更好地使用柵格系統

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

現在來(lái)看看流動(dòng)網(wǎng)格的特點(diǎn)，當窗口縮小時(shí)，內容將動(dòng)態(tài)的發(fā)生變化，文本會(huì )進(jìn)行換行，元素也會(huì )變窄。然而，這些元素在內容寬度縮小到下一個(gè)臨界值之前，布局是不會(huì )變化的。

所以我想說(shuō)的是，設計的臨界值只是一個(gè)更改布局的參考點(diǎn)。這就是為什么列寬和水槽在網(wǎng)格中不會(huì )改變的原因，因為我們想讓設計師在考慮布局時(shí)能夠更容易地創(chuàng )建一致性。

 

混合網(wǎng)格

在實(shí)際項目中，使用流動(dòng)網(wǎng)格和固定網(wǎng)格的組合也是常見(jiàn)的做法。網(wǎng)站通常是流動(dòng)網(wǎng)格，因為它要去適應各種不同終端的大小。

 

一些做的很酷的柵格系統

不需要太死板地去堅持傳統柵格套路，12、8、4這樣的分布，甚至不需要20px的水槽。下面是一些在設計中使用柵格系統做的很棒的設計靈感。

Invision’s Genome Project

UI設計中如何更好地使用柵格系統

可以看到，他們的設計故意不去使用任何的水槽，所以看起來(lái)是無(wú)縫的。

UI設計中如何更好地使用柵格系統

這個(gè)網(wǎng)站不僅設計的很好，他們還利用了在設計中展示他們自己的柵格系統來(lái)讓整體的設計變得更加酷炫。

 

Dropbox Design

UI設計中如何更好地使用柵格系統

他們沒(méi)有設計水槽和外邊距，相反，整個(gè)頁(yè)面被分成兩半，然后將內容填充到這兩部分。

 

WordPress

UI設計中如何更好地使用柵格系統

WordPress創(chuàng )建賬號頁(yè)面

使用網(wǎng)格的方式取決于你自己。你可以在主要內容部分使用網(wǎng)格，次要內容則不使用。在Wordpress的例子中，頁(yè)面中間的部分使用柵格化設計，左側的側邊欄則沒(méi)有使用。

 

The Mockup Club

UI設計中如何更好地使用柵格系統

內容和網(wǎng)格也并不總是從中間開(kāi)始，對于模型網(wǎng)站，內容在左邊也未嘗不可。

 

Instagram

UI設計中如何更好地使用柵格系統

我非常確定的說(shuō)，Instagram的PC端是用上了6列柵格布局。