@彩云注：經(jīng)?？吹胶芏郘OGO初看一般，但只要加上了柵格線，感覺瞬間就上了一個(gè)檔次。記得有個(gè)比較出名的例子就是錘子手機(jī)的Logo，是不是覺得右邊的柵格線加上之后，瞬間高大上了很多。
那這些柵格線真的只能拿來裝逼展示嗎？有什么目的呢？平時(shí)應(yīng)該怎么看待它，怎么用它，這篇文章或許能給你答案，一起來學(xué)習(xí)吧。
譯文：
logo是品牌形象非常重要的一部分。當(dāng)設(shè)計(jì)師運(yùn)用柵格系統(tǒng)設(shè)計(jì)logo時(shí)，可以讓logo的形狀看起來更加完美，使品牌經(jīng)久不衰且讓人印象深刻。
在這篇文章中，我會介紹我設(shè)計(jì)logo的經(jīng)驗(yàn)以及我為什么在logo設(shè)計(jì)中運(yùn)用柵格系統(tǒng)。剛開始設(shè)計(jì)logo的時(shí)候，我會做調(diào)研，頭腦風(fēng)暴，畫草圖，但是很難讓logo的幾何形狀設(shè)計(jì)到比較完美，而且我相信大多人也無法只用筆就可以畫出一個(gè)完美的logo。
Logo設(shè)計(jì)中的黃金比例
隨著工作經(jīng)驗(yàn)的累積，我改變了我的工作方式，在logo設(shè)計(jì)過程中融入柵格系統(tǒng)，結(jié)果有了很大的改善。但這并不是一夜之間的轉(zhuǎn)變，我是在設(shè)計(jì)過程中不斷的提升我的設(shè)計(jì)方式，才有這樣的變化，所以我是怎么做的？
下面我們會討論：
- 柵格系統(tǒng)的目的是什么？
- logo設(shè)計(jì)中使用柵格系統(tǒng)的目的是什么？
- 使用柵格系統(tǒng)設(shè)計(jì)logo的基本方法
- 每個(gè)設(shè)計(jì)師都有必要掌握柵格系統(tǒng)嗎？
SriSahasra 花卉活動裝飾 Logo
1. 柵格系統(tǒng)的目的是什么？
柵格系統(tǒng)并不是非常新鮮的東西，幾十年來，攝影師，藝術(shù)家，印刷師和設(shè)計(jì)師一直在用柵格來解決視覺問題。
柵格系統(tǒng)是排列所有元素的不可見結(jié)構(gòu)。
平面設(shè)計(jì)師利用柵格，可以使書籍，雜志，宣傳冊，logo，和其他的設(shè)計(jì)更簡單。
UX/UI設(shè)計(jì)師使用柵格來對齊復(fù)雜的頁面元素，網(wǎng)頁設(shè)計(jì)中可以使用多種類型的柵格，主要包括：Bootstraps 12列網(wǎng)格系統(tǒng)，960網(wǎng)格系統(tǒng)，黃金比例網(wǎng)格，基礎(chǔ)網(wǎng)格等。
12列柵格系統(tǒng)案例
在我的12個(gè)UX/UI 個(gè)網(wǎng)頁設(shè)計(jì)探索中運(yùn)用的是黃金分割柵格來進(jìn)行設(shè)計(jì)布局
建筑設(shè)計(jì)里面的黃金比例
使用柵格系統(tǒng)意味著遵循客觀通用規(guī)律。—柵格系統(tǒng)
（彩云注：如果想深入研究柵格系統(tǒng)），你可以從圖形設(shè)計(jì)和柵格系統(tǒng)的歷史開始進(jìn)行自己的調(diào)研。關(guān)于設(shè)計(jì)探索，新技術(shù)，色彩理論以及設(shè)計(jì)的各個(gè)方面的文章和視頻有很多。在這篇文章中，我們只討論logo設(shè)計(jì)中的柵格系統(tǒng)。一個(gè)比較好的學(xué)習(xí)方法是不斷的看優(yōu)秀logo設(shè)計(jì)作品并問自己為什么它們看起來如此新潮，現(xiàn)代，耐看和有影響力。他們使用了什么方法來設(shè)計(jì)？采用什么設(shè)計(jì)原則讓logo看起來這么完美？
順序原則：柵格系統(tǒng)是為了讓設(shè)計(jì)具有優(yōu)先級。
簡約性原則：柵格系統(tǒng)是為了讓設(shè)計(jì)更加簡約。
柵格系統(tǒng)在logo設(shè)計(jì)中非常有必要，但也不要為了使用柵格而使用柵格，logo設(shè)計(jì)也應(yīng)在視覺上保持平衡。一旦掌握了基礎(chǔ)使用方法，就可以輕松地根據(jù)需要打破規(guī)則。
2.logo設(shè)計(jì)中柵格系統(tǒng)的目的是什么？
品牌設(shè)計(jì)的各個(gè)方面都會用到logo，柵格系統(tǒng)通過順序性原則和簡約性原則使logo在品牌推廣過程中的應(yīng)用更簡單，也有利于以后與其他設(shè)計(jì)師的合作中保持視覺的一致性。
3.Logo中使用柵格系統(tǒng)的基本方法
你可以使用多種類型的柵格。但是基本上這些都是圓形，正方形和矩形的組合，或者一個(gè)形狀增加一定的角度。我最喜歡使用45度或90度的角度，因?yàn)檫@些角度看起來更自然。數(shù)學(xué)比率在logo設(shè)計(jì)中可以有利于保持logo的視覺平衡，例如：斐波那契數(shù)列或黃金分割。
4.每個(gè)設(shè)計(jì)師都有必要掌握柵格系統(tǒng)嗎？
1）柵格系統(tǒng)只是一個(gè)幾何工具
有一點(diǎn)需要說清楚的是，柵格其實(shí)并不是那么的重要。柵格系統(tǒng)只是一個(gè)幾何工具，你用一些其他視覺平衡的形狀也可以設(shè)計(jì)出讓人喜歡的logo。沒有一個(gè)固定原則或速成的方法要求每個(gè)設(shè)計(jì)師必須在設(shè)計(jì)中使用，有時(shí)候使用柵格反而會讓logo適得其反，這個(gè)需要我們隨著工作經(jīng)驗(yàn)和專業(yè)的不斷增加來靈活的運(yùn)用這些方法。
2）從別的設(shè)計(jì)師作品中學(xué)習(xí)
有很多設(shè)計(jì)師的作品非常值得學(xué)習(xí)，找到他們并持續(xù)關(guān)注。
3）不要一開始使用柵格設(shè)計(jì)
先從設(shè)計(jì)調(diào)研，概念探索開始，然后嘗試不同方案。大多數(shù)的設(shè)計(jì)師都跳過了前面的步驟，想直接通過柵格系統(tǒng)來設(shè)計(jì)讓人滿意的logo。柵格系統(tǒng)很重要，但這個(gè)方法應(yīng)該在最后一步完成。
所以剛開始設(shè)計(jì)的時(shí)候我建議先畫最少20-30個(gè)概念稿，選出最好的3個(gè)將其矢量化到軟件中，然后選出最好的一個(gè)用柵格系統(tǒng)來進(jìn)行完善。隨著經(jīng)驗(yàn)的積累，你畫的草圖會越來越少，并在選擇可行方案上更加有經(jīng)驗(yàn)。當(dāng)你開始使用上面所介紹的方法來設(shè)計(jì)logo的時(shí)候，就會離設(shè)計(jì)一個(gè)完美的logo更近一步。
原文地址：uxplanet
譯文地址：彩云譯設(shè)計(jì)（公眾號）
作者：Kanhaiya Sharma
譯者: 周慧敏
紫色塊放內(nèi)容
內(nèi)容塊包括文本，圖片或者是兩者的組合形式，背景顏色實(shí)際上不能算是內(nèi)容元素，除非是作為文本或者圖片的容器。
上圖中的粉色塊作為柵格中的列，它們構(gòu)成了內(nèi)容寬度。一般來說，列寬是不會變的，只是列數(shù)會隨著設(shè)備的不同而變化，比如從PC端的12列變?yōu)槠桨咫娔X上的8列，然后在移動端變?yōu)?列。嚴(yán)格來說，你其實(shí)可以定義任何想要的列寬，但大多數(shù)情況下的網(wǎng)格列寬都設(shè)置在60-80px之間。選擇合適的列寬是最重要的，因?yàn)樗莾?nèi)容寬度的主要決定因素。
水槽是在列與列之間的空間。20px是一個(gè)常見的尺寸設(shè)置，當(dāng)設(shè)計(jì)塊狀或者卡片元素的網(wǎng)格時(shí)，這種間距非常重要，比如做照片類設(shè)計(jì)的時(shí)候。有些系統(tǒng)會隨著設(shè)備寬度的增加而增加水槽的寬度，但也可以保持固定。
外邊距也稱為外水槽，是內(nèi)容寬度之外的空白區(qū)域。為了更方便的設(shè)計(jì)，外邊距會隨著設(shè)備寬度的增加而增加。移動設(shè)備的邊距通常為20-30px，而在平板電腦和PC端，這個(gè)間距通常會差異很大。
下面會介紹一些基本的準(zhǔn)則，但要明白在實(shí)際設(shè)計(jì)中其實(shí)沒有任何硬性的規(guī)定。
1. 內(nèi)容元素必須位于若干列上
其核心思想是內(nèi)容元素必須位于若干列上，你可以任意分割，比如6×2,3×4,4×3。下面的例子中，我展示了不同分割方式設(shè)計(jì)的信息卡片。
如果我們把內(nèi)容都放在網(wǎng)格上，文本內(nèi)容會顯得很長，最佳的位置是不嚴(yán)格在任何網(wǎng)格上，這也是可以的，只要理解了整個(gè)元素實(shí)際上是一個(gè)不可見的，更大的容器就行。
正確的內(nèi)容填充方式和不正確的把柵格當(dāng)做邊距
所以如果有人說“我需要一個(gè)1200px寬的設(shè)計(jì)”，這并不意味著你的設(shè)計(jì)就是1200px寬，這其實(shí)是說設(shè)計(jì)內(nèi)容寬度在1200px的畫布內(nèi)，實(shí)際內(nèi)容占位是960px，這樣就會有空間留出外邊距。
5. 完全出血的元素或紋理圖形應(yīng)該設(shè)計(jì)在畫板邊緣，并理解為出血的列網(wǎng)格
這個(gè)頁面布局的頂部圖片被設(shè)計(jì)成完全出血
這是一個(gè)例外的規(guī)則，當(dāng)背景顏色或者圖片在完全出血的情況下，開發(fā)同學(xué)會把它理解為一個(gè)全屏的內(nèi)容元素。
如果設(shè)計(jì)的是裝飾元素之類的內(nèi)容，可以接受它被裁切掉，此時(shí)也可以脫離柵格化的設(shè)計(jì)。
一些圖片和文字的出血設(shè)計(jì)
頁眉和頁腳有時(shí)也有例外，它們不被認(rèn)為是內(nèi)容的一部分。有些設(shè)計(jì)將它們固定在瀏覽器邊緣，有些則喜歡保持內(nèi)容的寬度，這取決于自身功能和內(nèi)容的情況。將它們保持在內(nèi)容寬度內(nèi)的好處是，當(dāng)用戶在寬屏顯示器上看頁面時(shí)，不需要來回掃視；將它們固定在瀏覽器上的好處是可以為導(dǎo)航元素提供更多的空間。
柵格化布局如何做到響應(yīng)式
圖片來源Intuit
在傳統(tǒng)的柵格化系統(tǒng)設(shè)計(jì)中，列的寬度和水槽的寬度是保持不變的，只是列的“數(shù)量”發(fā)生變化。為什么要這么處理呢？這是為了讓設(shè)計(jì)更簡單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會顯示兩張卡片，并把第三張卡片進(jìn)行折行顯示在第二行上。不需要做任何的調(diào)整，因?yàn)橐呀?jīng)知道它位于第四列上了。在手機(jī)上，答案也很簡單，只需要一張卡片，其他的就會自動堆到下面的行中。如果你愿意，也可以變得有創(chuàng)意，選擇只在手機(jī)上顯示一張卡片，或者做一個(gè)水平滾動。這些列的自適應(yīng)對于代碼來說就是很簡單的參考。
實(shí)際上，web必須呈現(xiàn)任何瀏覽器的寬度。例如，有一個(gè)大顯示器，它可以看到1600像素寬的東西，實(shí)際上pc端的網(wǎng)頁設(shè)計(jì)是1200px寬，平板電腦上是768px寬，手機(jī)是360px寬。所以你會看到一個(gè)小于1200px的設(shè)計(jì)，有大量的留白。但是當(dāng)你的瀏覽器再小一個(gè)像素，1199px，會發(fā)生什么呢？
固定網(wǎng)格
固定柵格示意
如果開發(fā)那邊寫了一個(gè)固定柵格，當(dāng)你從桌面縮小到平板電腦，就像是在900px的瀏覽器寬度時(shí)，你不會看到任何變化，設(shè)計(jì)就像是被剪掉了一樣。但當(dāng)達(dá)到768px臨界點(diǎn)時(shí)，設(shè)計(jì)馬上就會改變，平板電腦上的顯示效果就會好起來。如果繼續(xù)減小這個(gè)值，同樣的事情也會發(fā)生，在到達(dá)另一個(gè)臨界值之前，設(shè)計(jì)看起來都是不變的。
流動網(wǎng)格
流動網(wǎng)格的示例
現(xiàn)在來看看流動網(wǎng)格的特點(diǎn)，當(dāng)窗口縮小時(shí)，內(nèi)容將動態(tài)的發(fā)生變化，文本會進(jìn)行換行，元素也會變窄。然而，這些元素在內(nèi)容寬度縮小到下一個(gè)臨界值之前，布局是不會變化的。
所以我想說的是，設(shè)計(jì)的臨界值只是一個(gè)更改布局的參考點(diǎn)。這就是為什么列寬和水槽在網(wǎng)格中不會改變的原因，因?yàn)槲覀兿胱屧O(shè)計(jì)師在考慮布局時(shí)能夠更容易地創(chuàng)建一致性。
混合網(wǎng)格
在實(shí)際項(xiàng)目中，使用流動網(wǎng)格和固定網(wǎng)格的組合也是常見的做法。網(wǎng)站通常是流動網(wǎng)格，因?yàn)樗ミm應(yīng)各種不同終端的大小。
一些做的很酷的柵格系統(tǒng)
不需要太死板地去堅(jiān)持傳統(tǒng)柵格套路，12、8、4這樣的分布，甚至不需要20px的水槽。下面是一些在設(shè)計(jì)中使用柵格系統(tǒng)做的很棒的設(shè)計(jì)靈感。
可以看到，他們的設(shè)計(jì)故意不去使用任何的水槽，所以看起來是無縫的。
這個(gè)網(wǎng)站不僅設(shè)計(jì)的很好，他們還利用了在設(shè)計(jì)中展示他們自己的柵格系統(tǒng)來讓整體的設(shè)計(jì)變得更加酷炫。
他們沒有設(shè)計(jì)水槽和外邊距，相反，整個(gè)頁面被分成兩半，然后將內(nèi)容填充到這兩部分。
WordPress創(chuàng)建賬號頁面
使用網(wǎng)格的方式取決于你自己。你可以在主要內(nèi)容部分使用網(wǎng)格，次要內(nèi)容則不使用。在Wordpress的例子中，頁面中間的部分使用柵格化設(shè)計(jì)，左側(cè)的側(cè)邊欄則沒有使用。
內(nèi)容和網(wǎng)格也并不總是從中間開始，對于模型網(wǎng)站，內(nèi)容在左邊也未嘗不可。
我非常確定的說，Instagram的PC端是用上了6列柵格布局。
要點(diǎn)總結(jié)
寫這篇文章的目的是想提供一些關(guān)于如何在響應(yīng)式設(shè)計(jì)中使用柵格系統(tǒng)。我知道對于我自己來說，我花了很多年的時(shí)間寫了大量的代碼來理解網(wǎng)格是如何工作的。我在YouYube上看了很多視頻，也閱讀了大量的文章，但每個(gè)人都在關(guān)注它為什么重要，卻不去注重到底怎么在自己的項(xiàng)目中使用這些原則。
你要做的最好的事情就是從現(xiàn)在開始注意那些優(yōu)秀設(shè)計(jì)是如何對齊元素的，你將會開始看到這些模式。為了幫助理解，這里有一些設(shè)計(jì)系統(tǒng)概述了它們的網(wǎng)格使用：
Google’s Material 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è)完美的像素對齊。這樣的規(guī)范帶來了更一致，更簡潔的設(shè)計(jì)，當(dāng)用戶從一個(gè)界面到另一個(gè)界面流轉(zhuǎn)時(shí)，這真的提升了產(chǎn)品的檔次。我建議在你的設(shè)計(jì)中去應(yīng)用這些網(wǎng)格，并和開發(fā)一起，以相同的方式將它們落地，這將會是一個(gè)非常不錯(cuò)的進(jìn)步。
本文翻譯已獲得作者的正式授權(quán)
授權(quán)截圖
原文地址：uxdesign
譯文地址：彩云譯設(shè)計(jì)（公眾號）
作者：Christie Tang
譯者：彩云Sky
一、柵格系統(tǒng)的必要性
二、柵格系統(tǒng)的基本概念
三、柵格系統(tǒng)的分類及計(jì)算公式
四、柵格系統(tǒng)在響應(yīng)式布局中的應(yīng)用
五、網(wǎng)頁柵格系統(tǒng)的使用步驟
一、網(wǎng)頁柵格系統(tǒng)的必要性
更專業(yè)
使設(shè)計(jì)有跡可循，具有邏輯性，同時(shí)也更規(guī)范，減少設(shè)計(jì)中的尺寸計(jì)算和無效嘗試，設(shè)計(jì)師可以將更多的精力放在設(shè)計(jì)本身。
更高效
統(tǒng)一設(shè)計(jì)規(guī)范，減少決策時(shí)間，使溝通更高效。
布局更方便
特別是對響應(yīng)式布局，能夠使不同設(shè)備上呈現(xiàn)的界面更具統(tǒng)一性。
二、柵格系統(tǒng)的基本概念
基本組成:
- 柵格總寬度（W）
- 列（a）
- 水槽（i）
- 外邊距（M）
柵格總寬度(W)
柵格總寬度就是設(shè)計(jì)內(nèi)容的寬度，一般來說網(wǎng)頁的頂部和側(cè)邊導(dǎo)航、背景裝飾元素、通欄banner和底欄（footer）可以不受柵格總寬度限制。
列(a)
柵格的單位，它們構(gòu)成了內(nèi)容寬度。最常用的12列、24列。列的寬度一般會計(jì)算得出，或直接自定義，首先要確定的是列的數(shù)目。
水槽(i)
水槽是列與列之間的間隔，水槽寬度越小內(nèi)容越緊湊；越大留白越多，頁面更有呼吸感，但水槽寬度不能比列寬大，否則不利于內(nèi)容的展示。水槽內(nèi)不可以放內(nèi)容，不然的話使用柵格還有什么意義。
外邊距(M)
是內(nèi)容寬度之外的留白部分，會隨著設(shè)備的寬度不同而變化。外邊距一般有個(gè)安全距離，可以按照水槽寬度的（常用0.5、1.0、1.5、2.0）倍數(shù)來計(jì)算。
三、柵格系統(tǒng)的分類和計(jì)算公式
a、有邊距的柵格：適合已知要設(shè)計(jì)的內(nèi)容寬度（即W已知）
b、無邊距的柵格：適合已知要適配的網(wǎng)頁尺寸，使用最接近網(wǎng)頁內(nèi)容尺寸的柵格系統(tǒng)。
c、直接等分的網(wǎng)格：已知要設(shè)計(jì)的內(nèi)容寬度和列寬及列的數(shù)目
四、柵格系統(tǒng)在響應(yīng)式布局中的應(yīng)用
柵格系統(tǒng)應(yīng)用于響應(yīng)式布局，有三種類型：
- 固定網(wǎng)格布局；
- 流動網(wǎng)格布局；
- 混合網(wǎng)格
在此之前有個(gè)斷點(diǎn)的概念，需要了解一下
斷點(diǎn)：是具有特定布局要求的預(yù)定屏幕尺寸的范圍。在給定的斷點(diǎn)范圍內(nèi)，布局會根據(jù)屏幕大小和方向進(jìn)行調(diào)整。超出范圍則相當(dāng)于達(dá)到某個(gè)臨界點(diǎn)，界面布局會發(fā)生變化。
a、固定網(wǎng)格布局
固定網(wǎng)格，列寬和水槽寬不會改變，只是改變列的數(shù)目，當(dāng)窗口縮放時(shí)，排版布局不會發(fā)生任何改變，只有當(dāng)達(dá)到一個(gè)臨界值（開發(fā)那邊設(shè)置好的固定的值），界面才會發(fā)生改變。在此之前界面排版都是不變的，就像一部分被切掉了。
b、流動網(wǎng)格布局
內(nèi)容寬度會隨著窗口的縮放而發(fā)生改變，例如圖片會縮小，文本會換行。水槽的寬度不一定是固定的，可以隨著頁面寬度變化。
c、混合網(wǎng)格
即固定網(wǎng)格和流動網(wǎng)格組合的形式，常用于后臺系統(tǒng)設(shè)計(jì)、工具型界面設(shè)計(jì)等。
例如上面的后臺管理系統(tǒng)（dashboard）側(cè)邊欄是固定網(wǎng)格，右側(cè)內(nèi)容是流動網(wǎng)格。水槽寬度保持不變。
五、柵格系統(tǒng)的使用步驟
- 確定內(nèi)容的總寬度W（常用的1180px、1190px、1200px、1400px）
- 確定柵格數(shù)目n（如果你的網(wǎng)頁結(jié)構(gòu)相對簡單，則n=12即可，如果網(wǎng)頁結(jié)構(gòu)比較復(fù)雜或者具有排版的不確定性，則用n=24。）
- 確定水槽的寬度i（水槽寬度常用的6、8、10、15、20px）
- 在sketch/ps里設(shè)置上面的參數(shù)即可得到一套柵格系統(tǒng)
Sketch非常方便，在「視圖」-「畫布」-「布局設(shè)置」即可得到如下界面設(shè)置柵格系統(tǒng)（中文和英文對照）
Ps中「視圖」-「新建參考線版面」，雖然沒有Sketch那么方便，但依然能夠很方便設(shè)置出柵格系統(tǒng)，如圖。
本文總結(jié)
- 柵格系統(tǒng)組成：總寬度（W）、列（a）、水槽（i）、外邊距（M）
- 計(jì)算公式：有邊距網(wǎng)格：W=（a+i）*n；無邊距網(wǎng)格：W=（a+i）*n-i；確定總寬度，確定列寬和數(shù)目直接等分
- 響應(yīng)式布局三種類型：固定網(wǎng)格布局；流動網(wǎng)格布局；混合網(wǎng)格
- 柵格使用三步驟：第一步確定總寬度（W），第二步確定柵格的數(shù)目（n），③第三步確定水槽寬度（i）
其他的一些小技巧：
- 網(wǎng)頁中常用100px柵格，也就是列寬與水槽的常見組合（90+10、80+20、70+30、85+15）px
- 網(wǎng)頁中圖片推薦使用常用比例（21:9、16:10、16:9、7:5、4:3、1:1）
- 柵格不是固定死的，可以自定義符合當(dāng)前項(xiàng)目的柵格系統(tǒng)。
推薦一個(gè)智能生成柵格系統(tǒng)的網(wǎng)站：http://grid.guide/
有了這個(gè)省去了很多計(jì)算的過程，可以直接下載下來png格式，放到軟件里面直接拉參考線，就有了一套網(wǎng)格系統(tǒng)，是不是很方便。
原文地址：UI設(shè)計(jì)進(jìn)階（公眾號）
作者：阿倩
印刷中也會用到柵格，但就本文而言，我主要想討論的是用于PC和移動設(shè)備上的柵格系統(tǒng)設(shè)計(jì)。
紫色塊放內(nèi)容
內(nèi)容塊包括文本，圖片或者是兩者的組合形式，背景顏色實(shí)際上不能算是內(nèi)容元素，除非是作為文本或者圖片的容器。
上圖中的粉色塊作為柵格中的列，它們構(gòu)成了內(nèi)容寬度。一般來說，列寬是不會變的，只是列數(shù)會隨著設(shè)備的不同而變化，比如從PC端的12列變?yōu)槠桨咫娔X上的8列，然后在移動端變?yōu)?列。嚴(yán)格來說，你其實(shí)可以定義任何想要的列寬，但大多數(shù)情況下的網(wǎng)格列寬都設(shè)置在60-80px之間。選擇合適的列寬是最重要的，因?yàn)樗莾?nèi)容寬度的主要決定因素。
水槽是在列與列之間的空間。20px是一個(gè)常見的尺寸設(shè)置，當(dāng)設(shè)計(jì)塊狀或者卡片元素的網(wǎng)格時(shí)，這種間距非常重要，比如做照片類設(shè)計(jì)的時(shí)候。有些系統(tǒng)會隨著設(shè)備寬度的增加而增加水槽的寬度，但也可以保持固定。
外邊距也稱為外水槽，是內(nèi)容寬度之外的空白區(qū)域。為了更方便的設(shè)計(jì)，外邊距會隨著設(shè)備寬度的增加而增加。移動設(shè)備的邊距通常為20-30px，而在平板電腦和PC端，這個(gè)間距通常會差異很大。
下面會介紹一些基本的準(zhǔn)則，但要明白在實(shí)際設(shè)計(jì)中其實(shí)沒有任何硬性的規(guī)定。
1. 內(nèi)容元素必須位于若干列上
其核心思想是內(nèi)容元素必須位于若干列上，你可以任意分割，比如6×2,3×4,4×3。下面的例子中，我展示了不同分割方式設(shè)計(jì)的信息卡片。
不同柵格設(shè)計(jì)展示
很棒，這看起來很簡單對吧。有的時(shí)候，你想把內(nèi)容嚴(yán)格的套用在柵格布局上，會發(fā)現(xiàn)可能不夠美觀，比如下面的例子。
如果我們把內(nèi)容都放在網(wǎng)格上，文本內(nèi)容會顯得很長，最佳的位置是不嚴(yán)格在任何網(wǎng)格上，這也是可以的，只要理解了整個(gè)元素實(shí)際上是一個(gè)不可見的，更大的容器就行。
這也是4×3的布局，只是給了它內(nèi)部不可見的填充。當(dāng)把這樣的設(shè)計(jì)稿給到開發(fā)時(shí)，他們就能很直觀的知道這一點(diǎn)，所以這更利于去理解如何實(shí)際地分配好內(nèi)容。
2. 不要將內(nèi)容元素留在水槽中
內(nèi)容元素應(yīng)該要在列寬以內(nèi)，而不能流出在水槽之外，這樣會違背柵格化的目的。
3. 只要父級元素對齊柵格，子級可以不完全對齊列
有些時(shí)候，你想要將設(shè)計(jì)和卡片分成兩部分，一半是圖片，一半是文字。你可能遇到這樣尷尬的情況，圖片沒有完全落在一列上，文字被迫以一種奇怪的方式自適應(yīng)。其實(shí)不用擔(dān)心，只要“父”容器對齊柵格，這就沒有關(guān)系。
父子級內(nèi)容柵格排版示意
4. 除非有意，否則不要把列作為外部填充
所有重要內(nèi)容都應(yīng)該與柵格列寬相適應(yīng)。一開始會覺得奇怪，因?yàn)槿绻涣?xí)慣使用網(wǎng)格，可能會把網(wǎng)格寬度當(dāng)成全部內(nèi)容區(qū)域，所以還需要給它設(shè)定一定的內(nèi)邊距。此時(shí)外邊距就起到了留白的作用，它們充當(dāng)了內(nèi)邊距。不要在網(wǎng)格內(nèi)部利用列寬當(dāng)成內(nèi)邊距，而是要與網(wǎng)格最外面保持對齊，利用網(wǎng)格外的間距來當(dāng)做留白區(qū)域。根據(jù)代碼實(shí)現(xiàn)方式，要么網(wǎng)格內(nèi)的內(nèi)容按比例縮放，邊距固定，要么外邊距與內(nèi)容同時(shí)縮放。
正確的內(nèi)容填充方式和不正確的把柵格當(dāng)做邊距
所以如果有人說“我需要一個(gè)1200px寬的設(shè)計(jì)”，這并不意味著你的設(shè)計(jì)就是1200px寬，這其實(shí)是說設(shè)計(jì)內(nèi)容寬度在1200px的畫布內(nèi)，實(shí)際內(nèi)容占位是960px，這樣就會有空間留出外邊距。
5. 完全出血的元素或紋理圖形應(yīng)該設(shè)計(jì)在畫板邊緣，并理解為出血的列網(wǎng)格
這個(gè)頁面布局的頂部圖片被設(shè)計(jì)成完全出血
這是一個(gè)例外的規(guī)則，當(dāng)背景顏色或者圖片在完全出血的情況下，開發(fā)同學(xué)會把它理解為一個(gè)全屏的內(nèi)容元素。
如果設(shè)計(jì)的是裝飾元素之類的內(nèi)容，可以接受它被裁切掉，此時(shí)也可以脫離柵格化的設(shè)計(jì)。
一些圖片和文字的出血設(shè)計(jì)
頁眉和頁腳有時(shí)也有例外，它們不被認(rèn)為是內(nèi)容的一部分。有些設(shè)計(jì)將它們固定在瀏覽器邊緣，有些則喜歡保持內(nèi)容的寬度，這取決于自身功能和內(nèi)容的情況。將它們保持在內(nèi)容寬度內(nèi)的好處是，當(dāng)用戶在寬屏顯示器上看頁面時(shí)，不需要來回掃視；將它們固定在瀏覽器上的好處是可以為導(dǎo)航元素提供更多的空間。
柵格化布局如何做到響應(yīng)式
圖片來源Intuit
在傳統(tǒng)的柵格化系統(tǒng)設(shè)計(jì)中，列的寬度和水槽的寬度是保持不變的，只是列的“數(shù)量”發(fā)生變化。為什么要這么處理呢？這是為了讓設(shè)計(jì)更簡單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會顯示兩張卡片，并把第三張卡片進(jìn)行折行顯示在第二行上。不需要做任何的調(diào)整，因?yàn)橐呀?jīng)知道它位于第四列上了。
在手機(jī)上，答案也很簡單，只需要一張卡片，其他的就會自動堆到下面的行中。如果你愿意，也可以變得有創(chuàng)意，選擇只在手機(jī)上顯示一張卡片，或者做一個(gè)水平滾動。這些列的自適應(yīng)對于代碼來說就是很簡單的參考。
實(shí)際上，web必須呈現(xiàn)任何瀏覽器的寬度。例如，有一個(gè)大顯示器，它可以看到1600像素寬的東西，實(shí)際上pc端的網(wǎng)頁設(shè)計(jì)是1200px寬，平板電腦上是768px寬，手機(jī)是360px寬。所以你會看到一個(gè)小于1200px的設(shè)計(jì)，有大量的留白。但是當(dāng)你的瀏覽器再小一個(gè)像素，1199px，會發(fā)生什么呢？
固定網(wǎng)格
固定柵格示意
如果開發(fā)那邊寫了一個(gè)固定柵格，當(dāng)你從桌面縮小到平板電腦，就像是在900px的瀏覽器寬度時(shí)，你不會看到任何變化，設(shè)計(jì)就像是被剪掉了一樣。但當(dāng)達(dá)到768px臨界點(diǎn)時(shí)，設(shè)計(jì)馬上就會改變，平板電腦上的顯示效果就會好起來。如果繼續(xù)減小這個(gè)值，同樣的事情也會發(fā)生，在到達(dá)另一個(gè)臨界值之前，設(shè)計(jì)看起來都是不變的。
流動網(wǎng)格
流動網(wǎng)格的示例
現(xiàn)在來看看流動網(wǎng)格的特點(diǎn)，當(dāng)窗口縮小時(shí)，內(nèi)容將動態(tài)的發(fā)生變化，文本會進(jìn)行換行，元素也會變窄。然而，這些元素在內(nèi)容寬度縮小到下一個(gè)臨界值之前，布局是不會變化的。
所以我想說的是，設(shè)計(jì)的臨界值只是一個(gè)更改布局的參考點(diǎn)。這就是為什么列寬和水槽在網(wǎng)格中不會改變的原因，因?yàn)槲覀兿胱屧O(shè)計(jì)師在考慮布局時(shí)能夠更容易地創(chuàng)建一致性。
混合網(wǎng)格
在實(shí)際項(xiàng)目中，使用流動網(wǎng)格和固定網(wǎng)格的組合也是常見的做法。網(wǎ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ì)故意不去使用任何的水槽，所以看起來是無縫的。
這個(gè)網(wǎng)站不僅設(shè)計(jì)的很好，他們還利用了在設(shè)計(jì)中展示他們自己的柵格系統(tǒng)來讓整體的設(shè)計(jì)變得更加酷炫。
Dropbox Design
他們沒有設(shè)計(jì)水槽和外邊距，相反，整個(gè)頁面被分成兩半，然后將內(nèi)容填充到這兩部分。
WordPress
WordPress創(chuàng)建賬號頁面
使用網(wǎng)格的方式取決于你自己。你可以在主要內(nèi)容部分使用網(wǎng)格，次要內(nèi)容則不使用。在Wordpress的例子中，頁面中間的部分使用柵格化設(shè)計(jì)，左側(cè)的側(cè)邊欄則沒有使用。
The Mockup Club
內(nèi)容和網(wǎng)格也并不總是從中間開始，對于模型網(wǎng)站，內(nèi)容在左邊也未嘗不可。
我非常確定的說，Instagram的PC端是用上了6列柵格布局。
要點(diǎn)總結(jié)
寫這篇文章的目的是想提供一些關(guān)于如何在響應(yīng)式設(shè)計(jì)中使用柵格系統(tǒng)。我知道對于我自己來說，我花了很多年的時(shí)間寫了大量的代碼來理解網(wǎng)格是如何工作的。我在YouYube上看了很多視頻，也閱讀了大量的文章，但每個(gè)人都在關(guān)注它為什么重要，卻不去注重到底怎么在自己的項(xiàng)目中使用這些原則。
你要做的最好的事情就是從現(xiàn)在開始注意那些優(yōu)秀設(shè)計(jì)是如何對齊元素的，你將會開始看到這些模式。為了幫助理解，這里有一些設(shè)計(jì)系統(tǒng)概述了它們的網(wǎng)格使用：
Google’s Material Design System (https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins)
Intuit’s Design System (https://designsystem.quickbooks.com/foundations/responsive-column-grid/)
IBM’s Carbon Design System (https://www.carbondesignsystem.com/guidelines/layout#2x-grid-fundamentals)
…And here’s huge list of other systems you can look through (https://designsystemsrepo.com/design-systems/)
在完全理解了網(wǎng)格的工作原理之后，我已經(jīng)成為了一名更好的設(shè)計(jì)師，因?yàn)槲抑牢业脑O(shè)計(jì)將如何在臨界值之間進(jìn)行轉(zhuǎn)換。我也可以落地我的設(shè)計(jì)，使它們能夠有一個(gè)完美的像素對齊。這樣的規(guī)范帶來了更一致，更簡潔的設(shè)計(jì)，當(dāng)用戶從一個(gè)界面到另一個(gè)界面流轉(zhuǎn)時(shí)，這真的提升了產(chǎn)品的檔次。我建議在你的設(shè)計(jì)中去應(yīng)用這些網(wǎng)格，并和開發(fā)一起，以相同的方式將它們落地，這將會是一個(gè)非常不錯(cuò)的進(jìn)步。
作者：Christie Tang
譯者：彩云Sky
原文：https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01
]]>