很多人想學(xué)習(xí)些關(guān)于網(wǎng)格設(shè)計的詳細經(jīng)驗及方法。
在準備了大量素材及資料后，今天咱們的這篇關(guān)于網(wǎng)格的方法文章，終于來啦。本文過于干貨，SO，記筆記的小本本，準備起來~~
第一：什么是網(wǎng)格？
在掌握網(wǎng)格的設(shè)計方法之前，咱們得先知道，到底什么是網(wǎng)格？為什么會有網(wǎng)格系統(tǒng)這一說？網(wǎng)格系統(tǒng)的存在，是為了解決設(shè)計什么樣的問題？
實際上，說到網(wǎng)格的歷史，得追溯到文藝復(fù)興時期。為了達到美的極致，藝術(shù)家從繪畫中找到了完美的比例分布圖，并嘗試以輔助線來實現(xiàn) 「完美」 構(gòu)圖的方法。
△ Masaccio, ‘The Tribute Money,’ Brancacci Chapel, 1425.
在13世紀，法國的建筑設(shè)計師 Villard de Honnecourt 將網(wǎng)格系統(tǒng)及黃金比例進行了結(jié)合，創(chuàng)建了一個這樣的圖表，固定版面中內(nèi)容的結(jié)構(gòu)及邊距，來實現(xiàn)完美的布局。而這套方法，直到至今都仍在使用，大量的雜志排版、書籍排版都能看到這套方法的影子。
所以，網(wǎng)格的存在，最主要就是為了解決設(shè)計美感的問題，通過網(wǎng)格讓雜亂無章的信息能通過一個較好的結(jié)構(gòu)來進行約束，保障信息高效傳達的同時，充分提升版面設(shè)計的美感。
1. 網(wǎng)格的結(jié)構(gòu)
網(wǎng)格實際上，是一種結(jié)構(gòu)，通過線的垂直或者相交，來構(gòu)建一個參考界線。通過這個參考界線，我們可以在一個單一的容器中，把容器里的內(nèi)容，以參考線進行對齊，來有秩序的布局組織并羅列分布。從而實現(xiàn)一個較好的視覺秩序感，提升閱讀效率的同時增加美感。
因為網(wǎng)格是一種結(jié)構(gòu)，所以網(wǎng)格本身是不一定可見（少部分作品會使用網(wǎng)格做裝飾），但這種結(jié)構(gòu)會映射到內(nèi)容元素的布局，影響信息的排列美感及閱讀效率。所有在有確定了網(wǎng)格的邊界和約束后，設(shè)計師就可以根據(jù)網(wǎng)格，來對內(nèi)容的位置比例，進行調(diào)整約束元素的坐標，達到一個比較理想的版式設(shè)計。
環(huán)顧我們的生活周圍，實際上也能看到很多網(wǎng)格的運用場景。比如我很喜歡的這套宜家網(wǎng)格柜子~
不過網(wǎng)格目前運用的最為廣泛的場景，還是在書籍、雜志的版式設(shè)計中。實際上，網(wǎng)格系統(tǒng)誕生的初衷也是為了解決印刷制版的問題。所以從印刷術(shù)的興起，網(wǎng)格就開始誕生了 ，并演繹的越來越豐富，越來越系統(tǒng)。
2. 網(wǎng)格的制版
在平面設(shè)計中，網(wǎng)格系統(tǒng)更常見，特別是用于書籍的裝幀及印刷場景。所以如果有從事平面設(shè)計或者是從事視覺相關(guān)行業(yè)的同學(xué)，我推薦有機會也可以讀讀下面這本書。
這本書是由瑞士的設(shè)計師約瑟夫·米勒–布羅克曼 編寫的《平面設(shè)計中的網(wǎng)格系統(tǒng)》，文中主要介紹了在平面設(shè)計中，網(wǎng)格的功能和使用方法，旨在為平面和空間的設(shè)計師們提供一個實際的工具，讓他們可以從概念、組織結(jié)構(gòu)和設(shè)計上更有效、 自信地處理和解決視覺問題。
書中很多方法及版式，基本上可以現(xiàn)學(xué)現(xiàn)用，掌握起來也非常方便。
「事實上，絕大多數(shù)的設(shè)計師都不知道、也不理解為什么要建立這樣的一個秩序系統(tǒng)。所以，如果想要合理、功能地運用網(wǎng)格系統(tǒng)，那就必須仔細地研究網(wǎng)格的所有原理。只要不嫌麻煩，任何研究網(wǎng)格的人都會發(fā)現(xiàn)，在網(wǎng)格系統(tǒng)的幫助下，他都能更快地解決設(shè)計中的問題，并讓設(shè)計更具功能性、邏輯性和視覺美感。
——約瑟夫·米勒－布羅克曼 」
第二：網(wǎng)格的組成部分
講了網(wǎng)格的歷史，接下來咱們就開始講正式的網(wǎng)格使用方法啦。
目前網(wǎng)格設(shè)計主要運用在兩大場景，一個是印刷讀物，比如海報、書籍、封面等，而另外一個就是電子設(shè)備的熒幕，比如 iPhone、iPad、Windows 等，常見于 APP 設(shè)計、H5設(shè)計及 Web 設(shè)計中。
在這些不同場景的網(wǎng)格設(shè)計中，都會有一些很通用的基礎(chǔ)組件部分，如邊距、列寬、水槽、以及交叉的模塊，正是這些基礎(chǔ)的元素組成了復(fù)雜的網(wǎng)格系統(tǒng)。所以在使用網(wǎng)格設(shè)計方法做圖之前，我們需要先了解每個元素的具體含義以及其具體用法。
1. 網(wǎng)格邊距
網(wǎng)格邊距指的是內(nèi)容外部邊緣距離容器的空白距離，在紙質(zhì)設(shè)備中，容器就是紙張的大小，在界面設(shè)計里，容器就是設(shè)計稿的尺寸分辨率。這個邊距，一方面是為了信息不超出安全距離，二方面也主要是為了讓內(nèi)容看起來，能更加的聚焦在中心區(qū)域，以防信息太過于貼邊導(dǎo)致的不利于閱讀。
在APP設(shè)計中，也會用到邊距這個概念?；贎2x尺寸，很多APP內(nèi)容到屏幕的邊距，都采用的是24px，比如淘寶、支付寶、微博等。但也有不少的APP采用的是32px的邊距，比如微信、QQ、知乎等，這個大家可以截圖，縮到750的寬度，自行量~~當(dāng)然，文章后面也會詳細講這塊怎么定比較好
2. 列寬及水槽
除去邊距，在內(nèi)容區(qū)域的中心部分，網(wǎng)格主要由列寬及水槽組成，列寬就是每列中間的寬度，水槽就是每兩列的中間預(yù)留區(qū)域。列決定網(wǎng)格的復(fù)雜程度，而水槽決定內(nèi)容的疏密程度。
3. 交叉模塊
這個指的就是網(wǎng)格中的交叉區(qū)域，實際上是一個空間單位。我們可以把固定的圖片或者是段落，直接填充在這個模塊里。當(dāng)然，后面也有案例來解讀。
所有的網(wǎng)格，基本上都是由上面的基礎(chǔ)元素組成。正是這些，組成了龐大且復(fù)雜的網(wǎng)格系統(tǒng) Gird System
第三：三種常見的網(wǎng)格
在我們的設(shè)計當(dāng)中，目前這三種網(wǎng)格最為常見，且這三種也能滿足我們?nèi)粘５拇蟛糠中枰?/p>
1. 單列網(wǎng)格
在咱們目前設(shè)計中，其實最常見的，就是這種單列的網(wǎng)格。這種單列的網(wǎng)格大多數(shù)以水平，或者是垂直的形態(tài)出現(xiàn)。比如你看到的現(xiàn)在咱們發(fā)的這篇文章，實際上它就是一種以水平形態(tài)的單列網(wǎng)格所組成，文字與文字中間的距離，就組成了水渠，它也是目前最簡單的一種網(wǎng)格。
這種其實我們用文字的行高，就可以控制了，不需要設(shè)置特別多的信息。保證每一列的距離是一樣的即可。
2. 多列網(wǎng)格
多列網(wǎng)格，顧名思義就是有多列的網(wǎng)格，會包含交叉關(guān)系。實際上，創(chuàng)建的列數(shù)越多，你的網(wǎng)格在使用過程中覆蓋面會越廣，能對齊的內(nèi)容也會越多，不過處理不好的話，信息也會越碎。
咱們根據(jù)這個網(wǎng)格，簡單排一些文字，看看效果
再把線去掉，順便加點顏色看看，再修飾一下細節(jié)~~
其實還是比較的簡單，當(dāng)然，我這個只是隨意拼湊，小伙伴們可以在收藏本文后，抽時間自己動手試試~~相信肯定會比我這個好
3. 交叉網(wǎng)格
交叉網(wǎng)格也比較好理解，其實就是基于水平及垂直領(lǐng)域的交叉網(wǎng)格。這種網(wǎng)格的節(jié)奏感非常好，適合在海報、雜志、封面版本中使用。包括在部分App以及Web的場景中，也可以使用這種布局方式。
比如：
是不是明白許多啦，再強調(diào)一句，光看是不行的，這里我鼓勵各位小伙伴們，多動手進行練習(xí)嘗試，只有動手了，這些知識才能轉(zhuǎn)化成你自己的能力！加油，奧利給！
第四：界面設(shè)計中，如何使用網(wǎng)格布局
那么在界面設(shè)計當(dāng)中，如何使用網(wǎng)格來約束版式，讓設(shè)計看起來更整齊、更規(guī)律、更美觀？其實方法一樣的，無非只是容器的不同。
1. 先定邊距
在規(guī)劃網(wǎng)格之前，咱們的第一步實際上是需要先定內(nèi)容到容器的邊距，這個邊距定好了后，咱們才能開始后面的網(wǎng)格制定。
通常在APP設(shè)計中，常見的邊距有24、32、40，這3個單位，信息比較密集的，通常會使用24這個單位，而信息比較寬松，偏工具型的產(chǎn)品，則會使用40的這個單位。當(dāng)然，也有很多產(chǎn)品，選擇了比較中立的32。
△ 圖中 ③ 綠色區(qū)域為邊距，② 藍色區(qū)域為水槽，① 紅色區(qū)域為邊距
在Web或者是PPT的封面設(shè)計中，由于屏幕本身就是橫向的，所以咱們的邊距可以定的更大一些，通常為100、200、300不等，這個可以根據(jù)個人風(fēng)格喜好來定。
2. 確定列數(shù)
在確定了邊距之后，很重要的一步就是需要確定列數(shù)了。定義使用多少列，這個直接會影響到頁面的信息疏密以及靈活程度。在APP設(shè)計中，比較流行的有 4-6 列，而在Web設(shè)計中，10-12 列則是非常的主流
在做PPT或者是網(wǎng)頁的時候，我最喜歡還是使用12列，因為它其實最靈活，而且大小不大不小，剛剛合適~~大家可以對應(yīng)下面這張圖（基于@1x），來決定自己設(shè)計稿中，列數(shù)的數(shù)量是多少。
3. 設(shè)定水槽寬度
邊距及列數(shù)都確定下來了后，咱們其實需要定的，就是水槽的寬度了。
在移動端設(shè)計中，我建議水槽的距離，最小尺寸為16，其次以4為單位往上遞增，比如16、20、24、28、32、36，可以根據(jù)產(chǎn)品的類型來定義這個水槽的寬度。如果你的屏幕信息密度很高，那么我建議使用20、24這種小距離的，如果密度非常低，整個屏幕里都沒什么內(nèi)容，那么可以使用32、36等大水槽邊距。
在Web或者PPT封面設(shè)計中，則是以8為單位整加比較合適，比如16、24、32、40、48、56，這種大寬屏的尺寸，在定義水槽邊距的開放度會更高。
列跟水槽，sketch自帶的工具其實都可以實現(xiàn)，我們用這個工具，能很輕松的達到自己想要的效果。在PS里，可能更多的是需要靠自己繪制矩形量尺寸，然后來拉取輔助線。
4. 按照網(wǎng)格調(diào)整設(shè)計稿
待網(wǎng)格定好后，我們再根據(jù)網(wǎng)格，去制定界面中元素的間距及尺寸即可，盡量保證各個元素的垂直間距是一致的。
網(wǎng)格定義好了之后，其實后面就很簡單了，就是按照網(wǎng)格，咱們來約束內(nèi)容的邊界了，我們可以通過手動把文字的邊距，或者圖片的尺寸，來控制到跟網(wǎng)格一樣大小，調(diào)整整個頁面的和諧程度。
第五：熟練掌握&插件提效
方法掌握了后，實際上就是需要自己日常多收藏一些優(yōu)秀的網(wǎng)格作品，其次多加練習(xí)，尋找網(wǎng)格排版的手感。畢竟只有不斷練習(xí)，不斷發(fā)現(xiàn)問題、總結(jié)問題，你才能牢牢的掌握知識，提升自己的動手能力。
不要完全被網(wǎng)格約束
網(wǎng)格實際上也只是一種參考線，并不是需要完全約束內(nèi)容，比如有的文字長度會超出網(wǎng)格線，實際上完全參考網(wǎng)格，也會出現(xiàn)問題。所以網(wǎng)格最終只是參照，不要完全刻意約束，避免出現(xiàn)適得其反的效果。
橫向的水槽高度需要保持統(tǒng)一
在APP設(shè)計中，不同信息的高度不一致，所以我們很難用等距網(wǎng)格去約束它，更多的時候是去約束模塊與模塊的間距。在那種大模塊與大模塊的間距中，咱們的水槽高度盡量保持統(tǒng)一。
2. 網(wǎng)格插件神器下載
最后為了方便大家制定網(wǎng)格，我這里也給大家推薦一些制定網(wǎng)格的插件神器，非常好用，推薦指數(shù)五顆星。
Bootstrap Grid（ Sketch 使用）
用這個插件，可以在 Sketch 里輕松創(chuàng)建自定義網(wǎng)格，不需要那么多繁瑣的設(shè)置，簡單兩步就能搞定！
還支持針對不同的尺寸，自定義生成不同的網(wǎng)格參考線~~
flavor（ Sketch 使用）
部分文獻參考資料
- 「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」
原文：UX小學(xué)
