很多人想學(xué)習(xí)些關(guān)于網(wǎng)格設(shè)計(jì)的詳細(xì)經(jīng)驗(yàn)及方法。

在準(zhǔn)備了大量素材及資料后，今天咱們的這篇關(guān)于網(wǎng)格的方法文章，終于來(lái)啦。本文過(guò)于干貨，SO，記筆記的小本本，準(zhǔn)備起來(lái)~~

01/

什么是網(wǎng)格？

在掌握網(wǎng)格的設(shè)計(jì)方法之前，咱們得先知道，到底什么是網(wǎng)格？為什么會(huì)有網(wǎng)格系統(tǒng)這一說(shuō)？網(wǎng)格系統(tǒng)的存在，是為了解決設(shè)計(jì)什么樣的問(wèn)題？

實(shí)際上，說(shuō)到網(wǎng)格的歷史，得追溯到文藝復(fù)興時(shí)期。為了達(dá)到美的極致，藝術(shù)家從繪畫(huà)中找到了完美的比例分布圖，并嘗試以輔助線來(lái)實(shí)現(xiàn) 「完美」 構(gòu)圖的方法。

△ Masaccio, ‘The Tribute Money,’ Brancacci Chapel, 1425.

在13世紀(jì)，法國(guó)的建筑設(shè)計(jì)師 Villard de Honnecourt 將網(wǎng)格系統(tǒng)及黃金比例進(jìn)行了結(jié)合，創(chuàng)建了一個(gè)這樣的圖表，固定版面中內(nèi)容的結(jié)構(gòu)及邊距，來(lái)實(shí)現(xiàn)完美的布局。而這套方法，直到至今都仍在使用，大量的雜志排版、書(shū)籍排版都能看到這套方法的影子。

所以，網(wǎng)格的存在，最主要就是為了解決設(shè)計(jì)美感的問(wèn)題，通過(guò)網(wǎng)格讓雜亂無(wú)章的信息能通過(guò)一個(gè)較好的結(jié)構(gòu)來(lái)進(jìn)行約束，保障信息高效傳達(dá)的同時(shí)，充分提升版面設(shè)計(jì)的美感。

>網(wǎng)格的結(jié)構(gòu)

網(wǎng)格實(shí)際上，是一種結(jié)構(gòu)，通過(guò)線的垂直或者相交，來(lái)構(gòu)建一個(gè)參考界線。通過(guò)這個(gè)參考界線，我們可以在一個(gè)單一的容器中，把容器里的內(nèi)容，以參考線進(jìn)行對(duì)齊，來(lái)有秩序的布局組織并羅列分布。從而實(shí)現(xiàn)一個(gè)較好的視覺(jué)秩序感，提升閱讀效率的同時(shí)增加美感。

因?yàn)榫W(wǎng)格是一種結(jié)構(gòu)，所以網(wǎng)格本身是不一定可見(jiàn)（少部分作品會(huì)使用網(wǎng)格做裝飾），但這種結(jié)構(gòu)會(huì)映射到內(nèi)容元素的布局，影響信息的排列美感及閱讀效率。所有在有確定了網(wǎng)格的邊界和約束后，設(shè)計(jì)師就可以根據(jù)網(wǎng)格，來(lái)對(duì)內(nèi)容的位置比例，進(jìn)行調(diào)整約束元素的坐標(biāo)，達(dá)到一個(gè)比較理想的版式設(shè)計(jì)。

環(huán)顧我們的生活周圍，實(shí)際上也能看到很多網(wǎng)格的運(yùn)用場(chǎng)景。比如我很喜歡的這套宜家網(wǎng)格柜子~

不過(guò)網(wǎng)格目前運(yùn)用的最為廣泛的場(chǎng)景，還是在書(shū)籍、雜志的版式設(shè)計(jì)中。實(shí)際上，網(wǎng)格系統(tǒng)誕生的初衷也是為了解決印刷制版的問(wèn)題。所以從印刷術(shù)的興起，網(wǎng)格就開(kāi)始誕生了 ，并演繹的越來(lái)越豐富，越來(lái)越系統(tǒng)。

>網(wǎng)格的制版

在平面設(shè)計(jì)中，網(wǎng)格系統(tǒng)更常見(jiàn)，特別是用于書(shū)籍的裝幀及印刷場(chǎng)景。所以如果有從事平面設(shè)計(jì)或者是從事視覺(jué)相關(guān)行業(yè)的同學(xué)，我推薦有機(jī)會(huì)也可以讀讀下面這本書(shū)。

這本書(shū)是由瑞士的設(shè)計(jì)師約瑟夫·米勒–布羅克曼 編寫(xiě)的《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》，文中主要介紹了在平面設(shè)計(jì)中，網(wǎng)格的功能和使用方法，旨在為平面和空間的設(shè)計(jì)師們提供一個(gè)實(shí)際的工具，讓他們可以從概念、組織結(jié)構(gòu)和設(shè)計(jì)上更有效、 自信地處理和解決視覺(jué)問(wèn)題。

書(shū)中很多方法及版式，基本上可以現(xiàn)學(xué)現(xiàn)用，掌握起來(lái)也非常方便。

「事實(shí)上，絕大多數(shù)的設(shè)計(jì)師都不知道、也不理解為什么要建立這樣的一個(gè)秩序系統(tǒng)。所以，如果想要合理、功能地運(yùn)用網(wǎng)格系統(tǒng)，那就必須仔細(xì)地研究網(wǎng)格的所有原理。只要不嫌麻煩，任何研究網(wǎng)格的人都會(huì)發(fā)現(xiàn)，在網(wǎng)格系統(tǒng)的幫助下，他都能更快地解決設(shè)計(jì)中的問(wèn)題，并讓設(shè)計(jì)更具功能性、邏輯性和視覺(jué)美感。

——約瑟夫·米勒－布羅克曼 」

02/

網(wǎng)格的組成部分

講了網(wǎng)格的歷史，接下來(lái)咱們就開(kāi)始講正式的網(wǎng)格使用方法啦。

目前網(wǎng)格設(shè)計(jì)主要運(yùn)用在兩大場(chǎng)景，一個(gè)是印刷讀物，比如海報(bào)、書(shū)籍、封面等，而另外一個(gè)就是電子設(shè)備的熒幕，比如 iPhone、iPad、Windows 等，常見(jiàn)于 APP 設(shè)計(jì)、H5設(shè)計(jì)及 Web 設(shè)計(jì)中。

在這些不同場(chǎng)景的網(wǎng)格設(shè)計(jì)中，都會(huì)有一些很通用的基礎(chǔ)組件部分，如邊距、列寬、水槽、以及交叉的模塊，正是這些基礎(chǔ)的元素組成了復(fù)雜的網(wǎng)格系統(tǒng)。所以在使用網(wǎng)格設(shè)計(jì)方法做圖之前，我們需要先了解每個(gè)元素的具體含義以及其具體用法。

>網(wǎng)格邊距

網(wǎng)格邊距指的是內(nèi)容外部邊緣距離容器的空白距離，在紙質(zhì)設(shè)備中，容器就是紙張的大小，在界面設(shè)計(jì)里，容器就是設(shè)計(jì)稿的尺寸分辨率。這個(gè)邊距，一方面是為了信息不超出安全距離，二方面也主要是為了讓內(nèi)容看起來(lái)，能更加的聚焦在中心區(qū)域，以防信息太過(guò)于貼邊導(dǎo)致的不利于閱讀。

在APP設(shè)計(jì)中，也會(huì)用到邊距這個(gè)概念。基于@2x尺寸，很多APP內(nèi)容到屏幕的邊距，都采用的是24px，比如淘寶、支付寶、微博等。但也有不少的APP采用的是32px的邊距，比如微信、QQ、知乎等，這個(gè)大家可以截圖，縮到750的寬度，自行量~~當(dāng)然，文章后面也會(huì)詳細(xì)講這塊怎么定比較好

>列寬及水槽

除去邊距，在內(nèi)容區(qū)域的中心部分，網(wǎng)格主要由列寬及水槽組成，列寬就是每列中間的寬度，水槽就是每?jī)闪械闹虚g預(yù)留區(qū)域。列決定網(wǎng)格的復(fù)雜程度，而水槽決定內(nèi)容的疏密程度。

>交叉模塊

這個(gè)指的就是網(wǎng)格中的交叉區(qū)域，實(shí)際上是一個(gè)空間單位。我們可以把固定的圖片或者是段落，直接填充在這個(gè)模塊里。當(dāng)然，后面也有案例來(lái)解讀。

所有的網(wǎng)格，基本上都是由上面的基礎(chǔ)元素組成。正是這些，組成了龐大且復(fù)雜的網(wǎng)格系統(tǒng) Gird System

 03/

三種常見(jiàn)的網(wǎng)格

在我們的設(shè)計(jì)當(dāng)中，目前這三種網(wǎng)格最為常見(jiàn)，且這三種也能滿足我們?nèi)粘５拇蟛糠中枰��?/span>

>單列網(wǎng)格

在咱們目前設(shè)計(jì)中，其實(shí)最常見(jiàn)的，就是這種單列的網(wǎng)格。這種單列的網(wǎng)格大多數(shù)以水平，或者是垂直的形態(tài)出現(xiàn)。比如你看到的現(xiàn)在咱們發(fā)的這篇文章，實(shí)際上它就是一種以水平形態(tài)的單列網(wǎng)格所組成，文字與文字中間的距離，就組成了水渠，它也是目前最簡(jiǎn)單的一種網(wǎng)格。

這種其實(shí)我們用文字的行高，就可以控制了，不需要設(shè)置特別多的信息。保證每一列的距離是一樣的即可。

>多列網(wǎng)格

多列網(wǎng)格，顧名思義就是有多列的網(wǎng)格，會(huì)包含交叉關(guān)系。實(shí)際上，創(chuàng)建的列數(shù)越多，你的網(wǎng)格在使用過(guò)程中覆蓋面會(huì)越廣，能對(duì)齊的內(nèi)容也會(huì)越多，不過(guò)處理不好的話，信息也會(huì)越碎。

咱們根據(jù)這個(gè)網(wǎng)格，簡(jiǎn)單排一些文字，看看效果

再把線去掉，順便加點(diǎn)顏色看看，再修飾一下細(xì)節(jié)~~

其實(shí)還是比較的簡(jiǎn)單，當(dāng)然，我這個(gè)只是隨意拼湊，小伙伴們可以在收藏本文后，抽時(shí)間自己動(dòng)手試試~~相信肯定會(huì)比我這個(gè)好

>交叉網(wǎng)格

交叉網(wǎng)格也比較好理解，其實(shí)就是基于水平及垂直領(lǐng)域的交叉網(wǎng)格。這種網(wǎng)格的節(jié)奏感非常好，適合在海報(bào)、雜志、封面版本中使用。包括在部分App以及Web的場(chǎng)景中，也可以使用這種布局方式。

比如：

是不是明白許多啦，再?gòu)?qiáng)調(diào)一句，光看是不行的，這里我鼓勵(lì)各位小伙伴們，多動(dòng)手進(jìn)行練習(xí)嘗試，只有動(dòng)手了，這些知識(shí)才能轉(zhuǎn)化成你自己的能力！加油，奧利給！ 

04/

界面設(shè)計(jì)中，如何使用網(wǎng)格布局

那么在界面設(shè)計(jì)當(dāng)中，如何使用網(wǎng)格來(lái)約束版式，讓設(shè)計(jì)看起來(lái)更整齊、更規(guī)律、更美觀？其實(shí)方法一樣的，無(wú)非只是容器的不同。

>先定邊距

在規(guī)劃網(wǎng)格之前，咱們的第一步實(shí)際上是需要先定內(nèi)容到容器的邊距，這個(gè)邊距定好了后，咱們才能開(kāi)始后面的網(wǎng)格制定。

通常在APP設(shè)計(jì)中，常見(jiàn)的邊距有24、32、40，這3個(gè)單位，信息比較密集的，通常會(huì)使用24這個(gè)單位，而信息比較寬松，偏工具型的產(chǎn)品，則會(huì)使用40的這個(gè)單位。當(dāng)然，也有很多產(chǎn)品，選擇了比較中立的32。

△ 圖中 ③ 綠色區(qū)域?yàn)檫吘啵��?藍(lán)色區(qū)域?yàn)樗�槽，�?紅色區(qū)域?yàn)檫吘?/span>

在Web或者是PPT的封面設(shè)計(jì)中，由于屏幕本身就是橫向的，所以咱們的邊距可以定的更大一些，通常為100、200、300不等，這個(gè)可以根據(jù)個(gè)人風(fēng)格喜好來(lái)定。

>確定列數(shù)

在確定了邊距之后，很重要的一步就是需要確定列數(shù)了。定義使用多少列，這個(gè)直接會(huì)影響到頁(yè)面的信息疏密以及靈活程度。在APP設(shè)計(jì)中，比較流行的有 4-6 列，而在Web設(shè)計(jì)中，10-12 列則是非常的主流

在做PPT或者是網(wǎng)頁(yè)的時(shí)候，我最喜歡還是使用12列，因?yàn)樗�其�?shí)最靈活，而且大小不大不小，剛剛合適~~大家可以對(duì)應(yīng)下面這張圖（基于@1x），來(lái)決定自己設(shè)計(jì)稿中，列數(shù)的數(shù)量是多少。

>設(shè)定水槽寬度

邊距及列數(shù)都確定下來(lái)了后，咱們其實(shí)需要定的，就是水槽的寬度了。

在移動(dòng)端設(shè)計(jì)中，我建議水槽的距離，最小尺寸為16，其次以4為單位往上遞增，比如16、20、24、28、32、36，可以根據(jù)產(chǎn)品的類型來(lái)定義這個(gè)水槽的寬度。如果你的屏幕信息密度很高，那么我建議使用20、24這種小距離的，如果密度非常低，整個(gè)屏幕里都沒(méi)什么內(nèi)容，那么可以使用32、36等大水槽邊距。

在Web或者PPT封面設(shè)計(jì)中，則是以8為單位整加比較合適，比如16、24、32、40、48、56，這種大寬屏的尺寸，在定義水槽邊距的開(kāi)放度會(huì)更高。

列跟水槽，sketch自帶的工具其實(shí)都可以實(shí)現(xiàn)，我們用這個(gè)工具，能很輕松的達(dá)到自己想要的效果。在PS里，可能更多的是需要靠自己繪制矩形量尺寸，然后來(lái)拉取輔助線。

>按照網(wǎng)格調(diào)整設(shè)計(jì)稿

待網(wǎng)格定好后，我們?cè)俑鶕?jù)網(wǎng)格，去制定界面中元素的間距及尺寸即可，盡量保證各個(gè)元素的垂直間距是一致的。

網(wǎng)格定義好了之后，其實(shí)后面就很簡(jiǎn)單了，就是按照網(wǎng)格，咱們來(lái)約束內(nèi)容的邊界了，我們可以通過(guò)手動(dòng)把文字的邊距，或者圖片的尺寸，來(lái)控制到跟網(wǎng)格一樣大小，調(diào)整整個(gè)頁(yè)面的和諧程度。

 05/

熟練掌握&插件提效

方法掌握了后，實(shí)際上就是需要自己日常多收藏一些優(yōu)秀的網(wǎng)格作品，其次多加練習(xí)，尋找網(wǎng)格排版的手感。畢竟只有不斷練習(xí)，不斷發(fā)現(xiàn)問(wèn)題、總結(jié)問(wèn)題，你才能牢牢的掌握知識(shí)，提升自己的動(dòng)手能力。

不要完全被網(wǎng)格約束

網(wǎng)格實(shí)際上也只是一種參考線，并不是需要完全約束內(nèi)容，比如有的文字長(zhǎng)度會(huì)超出網(wǎng)格線，實(shí)際上完全參考網(wǎng)格，也會(huì)出現(xiàn)問(wèn)題。所以網(wǎng)格最終只是參照，不要完全刻意約束，避免出現(xiàn)適得其反的效果。

橫向的水槽高度需要保持統(tǒng)一

在APP設(shè)計(jì)中，不同信息的高度不一致，所以我們很難用等距網(wǎng)格去約束它，更多的時(shí)候是去約束模塊與模塊的間距。在那種大模塊與大模塊的間距中，咱們的水槽高度盡量保持統(tǒng)一。

網(wǎng)格插件神器下載

最后為了方便大家制定網(wǎng)格，我這里也給大家推薦一些制定網(wǎng)格的插件神器，非常好用，推薦指數(shù)五顆星。 

Bootstrap Grid（ Sketch 使用）

用這個(gè)插件，可以在 Sketch 里輕松創(chuàng)建自定義網(wǎng)格，不需要那么多繁瑣的設(shè)置，簡(jiǎn)單兩步就能搞定！

還支持針對(duì)不同的尺寸，自定義生成不同的網(wǎng)格參考線~~

  flavor（ Sketch 使用）

 部分文獻(xiàn)參考資料

• 「A Brief History of Grids,」 Lucienne Roberts, Graphics

• 「The Secret Law of Page Harmony,」 Retinart

• 「Responsive layout grid 」Material Design Team

• 「Building Better UI Designs With Layout Grids」