網(wǎng)格系統(tǒng)（Grid Systems）來自于設(shè)計(jì)師在平面設(shè)計(jì)過程中對于秩序的追求與實(shí)踐，產(chǎn)生于 20 世紀(jì)初期，經(jīng)過不斷的檢驗(yàn)和發(fā)展，廣泛應(yīng)用于不同的領(lǐng)域。大家接觸最多的是各種紙質(zhì)印刷品，如圖書、雜志、海報(bào)等。

在約瑟夫-米勒的「平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)」一書中，作者總結(jié)了網(wǎng)格系統(tǒng)的主要優(yōu)點(diǎn)：

更系統(tǒng)化的理清設(shè)計(jì)思路

以客觀取代主觀

理性的去看待創(chuàng)造和制造產(chǎn)品的過程

讓信息的呈現(xiàn)整潔有序

將色彩、形式和材料進(jìn)行結(jié)合

進(jìn)入信息時代后，尤其是互聯(lián)網(wǎng)的普及，我們的信息獲取與內(nèi)容閱讀不再局限于紙質(zhì)的印刷品，這時對網(wǎng)格系統(tǒng)的應(yīng)用也產(chǎn)生了新的需求與挑戰(zhàn)。不再是大家常見的 A4、B3 這樣的紙張尺寸，而是不同的屏幕分辨率，不同的設(shè)備，不同的閱讀場景（桌面，移動）。相比于紙質(zhì)的靜態(tài)尺寸與字體大小，用戶在閱讀內(nèi)容時，還可以方便的調(diào)整字體大小或通過滑動的方式查看更多的內(nèi)容。

作為數(shù)據(jù)可視化領(lǐng)域，主要的排版挑戰(zhàn)來自于儀表盤的設(shè)計(jì)，如何在有限的空間，呈現(xiàn)豐富的圖表內(nèi)容與信息，并需要考慮：內(nèi)容結(jié)構(gòu)，屏幕尺寸，使用場景等。為了做好這件事，作為數(shù)據(jù)分析師，我們一般會憑經(jīng)驗(yàn)或感覺來放置：圖表、文字、圖表。以及通過和用戶的溝通反饋來優(yōu)化迭代。在這個過程中，如果具備相關(guān)的排版布局知識，相信可以進(jìn)一步的提升儀表盤設(shè)計(jì)的效率與規(guī)范性，即：像設(shè)計(jì)師一樣思考。

所以在接下來的內(nèi)容里，除了會給大家介紹網(wǎng)格系統(tǒng)的基本知識，還會嘗試著結(jié)合數(shù)據(jù)可視化領(lǐng)域的實(shí)踐與經(jīng)驗(yàn)，來講解如何將網(wǎng)格系統(tǒng)/布局的知識應(yīng)用到儀表盤設(shè)計(jì)中。

方格本布局

在開始網(wǎng)格系統(tǒng)或布局之前，我們先看一下方格本，喜歡做手賬的朋友應(yīng)該都用過，相比于水平橫線的筆記本，方格本多了縱向的線，這樣的好處是方便從垂直的方向，對齊和布局，也容易把筆記劃分為多個內(nèi)容區(qū)域。方格本的布局容易使用，但也有一些缺點(diǎn)，比如格子的大小是固定的，假設(shè)每個格子是 10，我們的內(nèi)容塊是 100 * 80，同時想讓內(nèi)容塊的間距為 12 或 16，這時就不方便實(shí)現(xiàn)了。

網(wǎng)格系統(tǒng)基礎(chǔ)知識

作為頁面布局，我們會考慮邊距/留白（決定了內(nèi)容區(qū)域的大?。紤]一行放幾個內(nèi)容塊會更合適，以及內(nèi)容塊的間距，通過這樣的思考順序，最終決定了整體布局。

這樣的排版需求與思考順序，決定了網(wǎng)格布局的功能與形式。 網(wǎng)格系統(tǒng)的基本元素有：欄/行（Columns/Rows)、間距（Gutters）、邊距(Margins)。

「欄 Columns與行 Rows」

「間距 Gutters」決定了內(nèi)容區(qū)域之間的空白，用于區(qū)分內(nèi)容。

「邊距 Margins」決定了內(nèi)容區(qū)域與頁面邊界之間的留白。

通用的網(wǎng)格系統(tǒng)例子

圖書

在圖書排版時，要考慮裝訂與閱讀翻頁，所以版心的位置并不會嚴(yán)格的居中對齊，而是有所變化。

企業(yè)VI（Visual Identity）

在企業(yè)的 VI 手冊里，會定義通用的網(wǎng)格尺寸與應(yīng)用的場景。

比如在這兒的例子里，就規(guī)定了圖片的布局規(guī)范。

幻燈片模板

作為通用的幻燈片模板，會根據(jù)具體的頁面類型來提前設(shè)計(jì)好相應(yīng)的網(wǎng)格布局。

設(shè)計(jì)軟件中的網(wǎng)格布局功能

假設(shè)我們有一個 1920 * 1080的儀表盤頁面需要分成 4 欄 3 行，并且左右邊距是 80，上下邊距是 40，以及頁面內(nèi)的最小網(wǎng)格尺寸是 10。

在 Figma 設(shè)計(jì)軟件里是這樣設(shè)置的：

基于需求，我們分別添加了 3 個網(wǎng)格樣式。 最簡單的是 10 size 的 Grid 樣式。

縱向是分成 4 列，并指定了左右的 Margin 與列之間的 Gutters。 橫向的設(shè)置與縱向類似。

如果這是一個頂部 4 個數(shù)字指標(biāo)，下面是 2 個圖表的儀表盤需求，基于這兒的網(wǎng)格布局就已經(jīng)能滿足需求了。

如果覺得頂部的指標(biāo)內(nèi)容太高，也可以很快的進(jìn)行調(diào)整。

BI 軟件中的網(wǎng)格布局功能

在 Tableau 中，同時提供了平鋪布局與浮動布局支持。如果是平鋪布局，還提供了水平/垂直容器布局，在容器內(nèi)放置內(nèi)容時，可以設(shè)置均勻分布。這樣如果是一行有多個指標(biāo)，可以隨著指標(biāo)的加入，動態(tài)的平均分布/調(diào)整寬度。

并支持內(nèi)外邊距的設(shè)置。

整體而言，Tableau 對頁面布局的支持更全面一些，有更多的尺寸、位置、邊距調(diào)整的選項(xiàng)。如果時間充裕，是可以進(jìn)行精細(xì)的排版調(diào)整的。同時 Tableau 的排版布局功能更接近于網(wǎng)頁的內(nèi)容布局，和設(shè)計(jì)軟件中默認(rèn)支持的網(wǎng)格系統(tǒng)不同，需要更多的經(jīng)驗(yàn)技巧才能做好這件事。

商業(yè)儀表盤設(shè)計(jì)中的網(wǎng)格布局

相比于書籍的文字+圖片布局，商業(yè)儀表盤的內(nèi)容除了必需的文字+圖表外，還會有：自定義參數(shù)、導(dǎo)航、圖片，篩選器，圖例等輔助與功能元素，更接近于應(yīng)用程序的界面布局。在內(nèi)容的填充上，商業(yè)儀表盤更關(guān)注空間利用率，而不會為了藝術(shù)效果有大塊的留白。

總結(jié)起來，儀表盤的基本布局要求有：

元素對齊（Alignment）

整體構(gòu)成矩形（Rectangularity）

優(yōu)先放置特定元素（Preferential Placement）

（參考：https://userinterfaces.aalto.fi/grids/）

在建筑設(shè)計(jì)領(lǐng)域有一句名言「形式服從功能 Form follows function」，作為儀表盤設(shè)計(jì)也是如此，我們會先從問題的定義與分解開始：

明確需求

線框圖原型

設(shè)計(jì)準(zhǔn)備：草圖，欄，間距，邊距，尺寸對齊等

正式的設(shè)計(jì)

在線框圖原型部分，會先確認(rèn)儀表盤的布局類型：

九宮格式

卡片式

展開式

九宮格布局

一般用于 KPI 數(shù)據(jù)的展示，如管理駕駛艙，各個指標(biāo)的呈現(xiàn)，在水平和垂直均勻分布即可。

卡片式布局

儀表盤內(nèi)的內(nèi)容以卡片的形式水平展開，每個卡片內(nèi)的結(jié)構(gòu)相似。

展開式布局

從整體的大數(shù)、到類別的分布，到明細(xì)的數(shù)據(jù)。

相比于前面兩種類型，展開式布局會更復(fù)雜一些，因?yàn)閮?nèi)容元素多，不同位置區(qū)域的呈現(xiàn)也有所不同。以藍(lán)色的指標(biāo)呈現(xiàn)區(qū)域?yàn)槔?，如果有更多的指?biāo)加入，我們可以進(jìn)一步均分為 6 個內(nèi)容塊。

甚至可以采用嵌套結(jié)構(gòu)的網(wǎng)格布局，將儀表盤劃分為：導(dǎo)航，篩選，指標(biāo)，圖表內(nèi)容等多個區(qū)域，以更靈活的方式來決定與調(diào)整儀表盤的內(nèi)容結(jié)構(gòu)。

一些思考總結(jié)

數(shù)據(jù)分析師的工作是忙碌的，相比于儀表盤的布局呈現(xiàn)，會更關(guān)注于：數(shù)據(jù)的獲取與質(zhì)量，指標(biāo)的定義，項(xiàng)目的推進(jìn)等。作為「表哥」「表妹」已經(jīng)很累了，為什么還要額外的學(xué)習(xí)這些知識？ 主要的原因有：具備網(wǎng)格布局知識可以幫助我們設(shè)計(jì)出更精美的儀表盤；發(fā)現(xiàn)和總結(jié)有效的結(jié)構(gòu)與形式；擴(kuò)展思路，學(xué)會「像設(shè)計(jì)師一樣思考」，從更高的層次思考布局排版，提高設(shè)計(jì)的可讀性和層次結(jié)構(gòu)，提升響應(yīng)能力。

原文標(biāo)題：像設(shè)計(jì)師一樣思考，網(wǎng)格系統(tǒng)與儀表盤設(shè)計(jì)實(shí)踐干貨分享

文章出處：【微信公眾號：Tableau社區(qū)】歡迎添加關(guān)注！文章轉(zhuǎn)載請注明出處。

責(zé)任編輯：haq