框架消失了，它埋藏自己、隱沒(méi)自己，就在展現(xiàn)出最強(qiáng)大的能量時(shí)，它消融了?？蚣芙^對(duì)不是背景，但他也不像邊欄有著厚實(shí)的形體。或者至少它是一個(gè)自愿消失的形體。

——賈克 · 德希達(dá)

作為設(shè)計(jì)師，相信大家對(duì)「網(wǎng)格系統(tǒng)」這個(gè)詞一定不陌生。它存在與于大大小小的設(shè)計(jì)項(xiàng)目中，是排列內(nèi)容時(shí)的結(jié)構(gòu)指南，為版面帶來(lái)秩序和一致性，使得設(shè)計(jì)師可以高效地排布內(nèi)容。

現(xiàn)代意義上的編排設(shè)計(jì)是在 20 世紀(jì) 20 至 30 年代早期設(shè)計(jì)理論和原則基礎(chǔ)上建立起來(lái)的。第二次世界大戰(zhàn)之后，瑞士設(shè)計(jì)師根據(jù)網(wǎng)格打造了全面性的設(shè)計(jì)方法論，將它與思想融會(huì)貫通，網(wǎng)格成為普及性語(yǔ)言的鑰匙，平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)得到發(fā)展和應(yīng)用。在傳統(tǒng)的平面設(shè)計(jì)中，文本、圖片這些變量是可知的，通常不會(huì)改變。設(shè)計(jì)者依據(jù)確定的內(nèi)容、可以預(yù)估的閱讀距離（ 閱讀距離影響字體大小、列寬、行高）進(jìn)行設(shè)計(jì)，他們可以確定他們?cè)O(shè)計(jì)的網(wǎng)格系統(tǒng)可以滿足內(nèi)容的特定布局需求，盡可能地利用版面中的資源來(lái)達(dá)到秩序和經(jīng)濟(jì)的最大可能性。

然而一本書(shū)不會(huì)突然成為一份報(bào)紙，當(dāng)前接觸最多的界面設(shè)計(jì)是基于二維屏幕的。數(shù)字產(chǎn)品通常是圍繞動(dòng)態(tài)數(shù)據(jù)構(gòu)建的，設(shè)計(jì)師在設(shè)計(jì)時(shí)可能從未看到向用戶展示的內(nèi)容，真正像用戶展示的內(nèi)容隱藏在設(shè)計(jì)的框架里。并且為了保障好的瀏覽體驗(yàn)需要根據(jù)用戶使用設(shè)備的不同進(jìn)行不同尺寸的適配。這時(shí)應(yīng)用傳統(tǒng)的網(wǎng)格系統(tǒng)往往會(huì)感到不相容。所以對(duì)于 UI 設(shè)計(jì)師來(lái)說(shuō)，了解網(wǎng)格變化和如何應(yīng)用網(wǎng)格通常是必要的。

Tips: 本文將分為 3 個(gè)部分講述網(wǎng)格設(shè)計(jì)，瀏覽時(shí)間為 10 分鐘左右。

01

了解屏幕設(shè)計(jì)中的網(wǎng)格

關(guān)于網(wǎng)格相信不少初學(xué)者會(huì)有很多疑問(wèn)，這次通過(guò)列舉三個(gè)典型問(wèn)題進(jìn)行解答，幫助大家了解網(wǎng)格系統(tǒng)。

Q：常說(shuō)的「網(wǎng)頁(yè)柵格化」、「網(wǎng)格系統(tǒng)」、「grid system」指的是同一個(gè)意思嗎？

我們常說(shuō)的 Grid System 翻譯過(guò)來(lái)是網(wǎng)格系統(tǒng)。在網(wǎng)頁(yè)設(shè)計(jì)中，如果把網(wǎng)頁(yè)寬度平分為多個(gè)網(wǎng)格單元，每個(gè)單元之間預(yù)留一定的空隙，此時(shí)整個(gè)頁(yè)面就如同一個(gè)柵格系統(tǒng)也就是網(wǎng)格系統(tǒng)。所以他們是同一個(gè)意思。

Q：網(wǎng)格系統(tǒng)在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中的具體用途是什么？

視覺(jué)上保持結(jié)構(gòu)清晰和一致：用于元素對(duì)齊、指導(dǎo)內(nèi)容排版。正確使用時(shí)，網(wǎng)格會(huì)增強(qiáng)結(jié)構(gòu)和平衡內(nèi)容，使之具有邏輯性和視覺(jué)美感。設(shè)計(jì)者想要像用戶展示的內(nèi)容信息從而變得更加清晰易讀。

協(xié)同的高效性：在一個(gè)團(tuán)隊(duì)中，可能會(huì)有多個(gè)設(shè)計(jì)師同時(shí)在設(shè)計(jì)一個(gè)項(xiàng)目，每個(gè)人負(fù)責(zé)不同的頁(yè)面、組件，這時(shí)候網(wǎng)格作為設(shè)計(jì)最基礎(chǔ)的指南，能夠保證協(xié)作時(shí)設(shè)計(jì)的統(tǒng)一和高效。

擴(kuò)展性：由于現(xiàn)在用戶使用設(shè)備繁多，為了保證良好的瀏覽體驗(yàn)，針對(duì)不同屏幕的設(shè)計(jì)適配工作尤為重要

Q：如何設(shè)置網(wǎng)格？

在設(shè)置網(wǎng)格前我們先了解下網(wǎng)頁(yè)網(wǎng)格的基本結(jié)構(gòu)：

1.Breakpoint

2.Margin

3.Column

4.Gutter

在 Sketch 中設(shè)置網(wǎng)格可以通過(guò) Layout Settings 設(shè)置柵欄 [ 布局參考線 ]，設(shè)計(jì)師根據(jù)需要可以自主選擇 Column Width / Gutter Width 以及最外側(cè) Margin 寬度，見(jiàn)下圖。

02

屏幕中版式設(shè)計(jì)的基本要點(diǎn)

設(shè)計(jì)的四大原則：對(duì)齊，親密性，對(duì)比，一致性，相信大家都比較了解本文就不過(guò)多介紹，重點(diǎn)講述下針對(duì)屏幕設(shè)計(jì)中版式設(shè)計(jì)需要考慮的基本要點(diǎn)：

比例：版面中的元素創(chuàng)造了視覺(jué)重量、深度、前/后景關(guān)系，這一系列元素之間的尺度關(guān)系叫做比例。比例會(huì)把元素之間正負(fù)空間的尺寸用來(lái)做對(duì)比。溫和的比例（元素之間的尺度相近）會(huì)讓人感受到靜態(tài)與和諧?？鋸埖谋壤ㄔ刂g的尺度差距巨大）會(huì)使得整個(gè)版式失去平衡或是突出版面中的某一部分。

強(qiáng)調(diào)：強(qiáng)調(diào)是指著重對(duì)某一元素增加視覺(jué)重量，引導(dǎo)觀者的注意力。在前景中的元素會(huì)被強(qiáng)調(diào)，中景與遠(yuǎn)景依次次之。

節(jié)奏：當(dāng)頁(yè)面中出現(xiàn)了元素的重復(fù)與變形，就有了節(jié)奏，由此也出現(xiàn)了視覺(jué)紋理或模式。節(jié)奏為觀者提供了一種統(tǒng)一的模式來(lái)幫助他們消化面前的內(nèi)容。根據(jù)動(dòng)態(tài)動(dòng)作或步幅的不同，節(jié)奏可以是統(tǒng)一化、漸進(jìn)的、流動(dòng)的。

統(tǒng)一的節(jié)奏

漸進(jìn)的節(jié)奏

流動(dòng)的節(jié)奏

視覺(jué)平衡：視覺(jué)平衡跟頁(yè)面里出現(xiàn)的視覺(jué)重量，元素排布有很大關(guān)聯(lián)。一個(gè)不平衡的版式會(huì)讓人感覺(jué)不穩(wěn)定，充滿緊張感。平衡可以是對(duì)稱(chēng)，也可以是不對(duì)稱(chēng)的。

對(duì)稱(chēng)的平衡

不對(duì)稱(chēng)的平衡

整體性：整體性是指不同部分被作為一個(gè)整體來(lái)看待時(shí)的布局關(guān)系。它是由元素以及留白一同創(chuàng)造出來(lái)的，或整體或分離。

整體

分離

03

如何應(yīng)用網(wǎng)格系統(tǒng)設(shè)計(jì)網(wǎng)頁(yè)

針對(duì)一個(gè)設(shè)計(jì)項(xiàng)目的設(shè)計(jì)流程我們可以分解為以下四個(gè)步驟：

STEP 1、了解項(xiàng)目需求，規(guī)劃好網(wǎng)頁(yè)結(jié)構(gòu)：

在深入了解項(xiàng)目需求之后，你可能需要快速畫(huà)個(gè)草圖，將你的網(wǎng)頁(yè)布局規(guī)劃好。通常你要考慮這個(gè)網(wǎng)頁(yè)的布局是上下布局還是左右布局？左右布局（常見(jiàn)于后臺(tái)系統(tǒng)）常見(jiàn)的做法是將左邊的導(dǎo)航欄固定，對(duì)右邊的工作區(qū)域進(jìn)行動(dòng)態(tài)縮放。上下布局（常見(jiàn)于官網(wǎng)）做法是對(duì)兩邊留白區(qū)域進(jìn)行最小值的定義，當(dāng)留白區(qū)域到達(dá)限定值之后再對(duì)中間的主內(nèi)容區(qū)域進(jìn)行動(dòng)態(tài)縮放。

STEP 2、考慮下 Breakpoint：

你的網(wǎng)頁(yè)需不需要為多種尺寸的設(shè)備考慮閱讀體驗(yàn)，你期望兼容什么設(shè)備，這些設(shè)備的 device-width 就可以作為你要考慮的 breakpoint 。

STEP 3、確定欄數(shù) Column，設(shè)置網(wǎng)格：

不需要糾結(jié)多少欄才是最好的，你實(shí)際項(xiàng)目中能完美應(yīng)用的才是最適合的!

STEP 4、填充內(nèi)容、完善風(fēng)格：

安排好內(nèi)容之后進(jìn)行風(fēng)格嘗試與提煉，再細(xì)調(diào)元素之間的關(guān)系，確保可讀性與統(tǒng)一性。

設(shè)計(jì)實(shí)踐小成果

根據(jù)以上流程我們研究小組成員也做了小小的設(shè)計(jì)嘗試，對(duì)流利說(shuō)設(shè)計(jì)團(tuán)隊(duì)網(wǎng)頁(yè)進(jìn)行了設(shè)計(jì)實(shí)踐，在設(shè)計(jì)初期我們希望它是比較有意思的，打破常規(guī)的。所以在依據(jù)基本網(wǎng)格的情況下，我們?cè)O(shè)計(jì)出了具有明顯風(fēng)格的網(wǎng)頁(yè)樣例。網(wǎng)格的應(yīng)用不會(huì)束縛設(shè)計(jì)想法，在實(shí)際的設(shè)計(jì)過(guò)程中去理解、組織網(wǎng)格、利用網(wǎng)格，反而這樣產(chǎn)出的作品才能兼具理性秩序和美學(xué)風(fēng)格。

感謝耐心讀完，希望本文能對(duì)你有幫助 :P

本文為研究小組研究成果，有參考國(guó)內(nèi)外文章、書(shū)籍。下面是書(shū)籍、文章列表，敢興趣的同學(xué)可以了解一下。

參考書(shū)籍：

《Thinking With Type》《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》

文章為：

Better grid systems in UI design tools.

Are grid systems still relevant in digital product design?

設(shè)計(jì)語(yǔ)言：

IBM Design、Ant Design

研究員：Olivia, Cyan

來(lái)源:微信公眾號(hào):流利說(shuō)設(shè)計(jì)團(tuán)隊(duì)

出處
:https://mp.weixin.qq.com/s/ZhtL8G8zXpHjCLhz5h_JqQ