網格系統與儀表盤設計實踐

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

在約瑟夫-米勒的「平面設計中的網格系統」一書中，作者總結了網格系統的主要優點：

更系統化的理清設計思路

以客觀取代主觀

理性的去看待創造和製造產品的過程

讓資訊的呈現整潔有序

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

進入資訊時代後，尤其是網際網路的普及，我們的資訊獲取與內容閱讀不再侷限於紙質的印刷品，這時對網格系統的應用也產生了新的需求與挑戰。不再是大家常見的A4，B3這樣的紙張尺寸，而是不同的螢幕解析度，不同的裝置，不同的閱讀場景（桌面，移動）。相比於紙質的靜態尺寸與字型大小，使用者在閱讀內容時，還可以方便的調整字型大小或透過滑動的方式檢視更多的內容。

作為資料視覺化領域，主要的排版挑戰來自於儀表盤的設計，如何在有限的空間，呈現豐富的圖表內容與資訊，並需要考慮：內容結構，螢幕尺寸，使用場景等。為了做好這件事，作為資料分析師，我們一般會憑經驗或感覺來放置：圖片、文字、圖表。以及透過和使用者的溝通反饋來最佳化迭代。在這個過程中，如果具備相關的排版佈局知識，相信可以進一步的提升儀表盤設計的效率與規範性，即：像設計師一樣思考。

所以在接下來的內容裡，除了會給大家介紹網格系統的基本知識，還會嘗試著結合資料視覺化領域的實踐與經驗，來講解如何將網格系統/佈局的知識應用到儀表盤設計中。

方格本佈局

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

網格系統基礎知識

作為頁面佈局，我們會考慮邊距/留白（決定了內容區域的大小），考慮一行放幾個內容塊會更合適，以及內容塊的間距，透過這樣的思考順序，最終決定了整體佈局。

這樣的排版需求與思考順序，決定了網格佈局的功能與形式。

網格系統的基本元素有：欄/行（Columns/Rows）、間距（Gutters）、邊距（Margins）。

「欄Columns 與行Rows」

「間距 Gutters」決定了內容區域之間的空白，用於區分內容。

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

通用的網格系統例子

圖書

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

企業

（

Visual Identity

）

在企業的VI手冊裡，會定義通用的網格尺寸與應用的場景。

比如在這兒的例子裡，就規定了圖片的佈局規範。

幻燈片模板

作為通用的幻燈片模板，會根據具體的頁面型別來提前設計好相應的網格佈局。

設計軟體中的網格佈局功能

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

在Figma設計軟體裡是這樣設定的：

基於需求，我們分別添加了3個網格樣式。

最簡單的是10 size 的 Grid樣式。

縱向是分成4列，並指定了左右的Margin與列之間的Gutters。

橫向的設定與縱向類似。

如果這是一個頂部4個數字指標，下面是2個圖表的儀表盤需求，基於這兒的網格佈局就已經能滿足需求了。

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

BI軟體中的網格佈局功能

在PowerBI中提供了Gridlines支援，在拖動圖表時，也會以紅色輔助線的方式，幫助你對齊。不足之處在於，這兒的網格大小是不能自定義的，以及只有浮動式佈局一種方式。浮動式佈局的好處是可以隨意的決定圖表位置並支援覆蓋，缺點是當儀表盤的內容多了以後，如果要調整某一行的多個圖表高度，需要手工單個的去調整。