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

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

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

以客觀取代主觀

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

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

將色彩、形式和材料進行結合

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

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

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

方格本布局

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

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

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

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

「欄 Columns與行 Rows」

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

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

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

圖書

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

企業(yè)VI（Visual Identity）

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

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

幻燈片模板

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

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

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

在 Figma 設計軟件里是這樣設置的：

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

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

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

如果覺得頂部的指標內容太高，也可以很快的進行調整。

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

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

并支持內外邊距的設置。

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

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

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

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

元素對齊（Alignment）

整體構成矩形（Rectangularity）

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

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

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

明確需求

線框圖原型

設計準備：草圖，欄，間距，邊距，尺寸對齊等

正式的設計

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

九宮格式

卡片式

展開式

九宮格布局

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

卡片式布局

儀表盤內的內容以卡片的形式水平展開，每個卡片內的結構相似。

展開式布局

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

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

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

一些思考總結

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

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

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

責任編輯：haq