看板設計在我們日常業務的很多需求中是不可避免的，不知道如何排版，適配當前場景。本文聚焦系統日常使用中的業務需求，談談看板設計如何呈現，三個步驟帶你實現。

寫在前面

這篇文章無論對于產品還是UX設計師都比較適合閱讀，能幫助我們快速梳理版式和確定相關內容布局。

在B端設計的日常工作中，看板設計在很多需求中也是不可避免的。此前拿到看板設計的時候，總是糾結于該用哪種形式的排版，如何去適配更多的場景。

因此也通過查閱資料并結合實際工作進行對應的研究，想要通過更簡單的步驟，來提升看板設計效率。本篇更聚焦于非大屏類的業務模塊看板，主要針對系統日常使用中的業務需求。

因此如果在面對看板設計時，有相同問題的同學，接下來這篇文章也許能夠解決你的問題。

一、哪些場景適合看板

明白看板的使用場景，能夠讓我們快速判斷當前信息是否適合用看板進行呈現?？窗宓闹饕饔檬亲鳛楹诵男畔⒌臑g覽，用戶通過看板能夠掌握他想要了解的各類重要信息的匯聚。

因此看板更多的是作為重點信息的合集，因此當我們選擇用看板呈現時，各類信息模塊的重要程度是我們首先需要掌握的。這決定了后續看板的板塊劃分。

好了，本次不再啰嗦，進入本次文章的正題，三步教你掌握看板的設計思路。

二、選擇看板風格

在平常的設計工作中，我們可以將看板背景分為兩種：白色和灰色（對于可視化深色大屏的看板，在此不做討論）。而顏色的區分，也表示著對于看板視覺呈現的區分。

比如白色，我們一般采用的是線性分割：

而灰色則更多的是采用卡片分割：

在日常生活中，使用得更多的是灰色背景的卡片看板樣式，因為使用這種呈現方式會使得模塊之間分割得很清晰，讓用戶快速識別每個模塊的內容，提升信息獲取效率。比如神策和數數科技均采用的卡片分割方式。

但對于風格也不用太過糾結，比如coding在面對數據展示時在不同的界面中使用了不同風格：

因此我們只需要結合當前呈現形式選擇合適的背景即可。

三、設計看板版式

這可能是我們在拿到看板需求后比較糾結的地方，當前我們應該采用怎么的布局去呈現當前的內容。（注：這里所講述的內容布局會排除側邊欄和頂欄，只針對看板內容進行對應的規劃）

大部分人的方法可能都是先通過花瓣或者pinerest去尋找對應的參考，可能這時候就開始了漫長的「找參考」環節。

這雖然是一個比較常規的方法，那我們是否能夠探索一種更通用的方法來讓我們設計看板的效率得到提升呢。在進行對應的探索后，我發現有一種方法能夠幫我們快速確定看板需要的版式。

1. 看板的布局規劃

看板設計之前，首先需要確定的就是看板的邊距和間距。只需要確定后這兩個地方，我們就可以將內容區域將其劃分為4×4的方格系統。比如當你確定后邊距為24px,模塊間距為16px后。我們就可以計算每個模塊的距離，從而進行區域劃分：

在這里想要說一下為何采用4×4的方格，而不是3×3或者5×5的方格來進行計劃。因為對于內容區域來說，最適合閱讀和呈現內容的模塊是4個模塊，超過4個可能會顯得比較擁擠。而3×3方格的拓展性會相對弱，5×5的方格的實用性其實也不大。并且我們目前大部分看板運用4×4方格都能夠承載其內容。

當進行對應區域劃分后，剩下的事情可能比你想象要簡單不少。我們可以依據當前方格和需要的內容模塊，進行組合。比如當你想要2個模塊時，我們可以采用橫向或者豎向的組合進行劃分。

當然，你想要3個模塊，都可以在這個基礎上進行對應的劃分，比如我們可以基于上述兩種模式進行三個模塊的劃分：

而當你需要更多模塊時，比如4個或者5個，你都可以回到最初劃分的4×4方格，依照方格可以得到更多的設計版式：

而我們在平日在網站上找到的參考很多都是基于上述版式而得來的：

通過這種方式你幾乎能夠通過方格劃分找到最適合你內容展示的看板版式，從而更快地進行下一步。

2. 看板的內容規劃

當規劃好看板布局后，就來到了看板的內容規劃。說到看板內容，其實很多人都是想到的都是可視化數據。的確，在看板中最常見也最熟悉的就是各類數據的表達，比如柱狀圖、餅圖等，在這里不做深入的講解，感興趣的同學可以去看下關于圖表規范的文章。

但在很多業務場景中，可能很多時候都并不能提供最直觀的數據表格來呈現數據。而更多的是一串串數字給到你。當看板的數據更多是文字時，我們應該如何處理。其實在B端設計中這類數據還比較常見，個人認為有以下2種處理方式:

1. 借助圖標等圖形化元素來輔助表達內容，即使我們接收到的信息只有單純的文字，但我們可以思考如何借助圖形幫助我們的表達。

比如coding的近期創建事項，旁邊也用圖形化表達來突出其余以前創建事項的對比，能夠讓整體視覺傳遞更好。

2. 借助簡易表格分散大段數據，避免造成大量文字。在很多時候，我們接收到的信息特別散亂，且也不利于圖形化。

因此我們可以通過將信息拆解，利用承載能力最強的表格去分散特別多的信息，讓整體視覺傳遞更加舒適，且表格中也可以加入某些元素讓表達更合理。

通過上述的講述，大家應該對于看板的布局和規劃有了一定的了解和認知，其實關于看板內容規劃還有很多點可以討論，但在這里就不進行深入的展開了。

四、看板的拓展性

這其實是很多設計師容易忽略的一個點，那就是看板的拓展性。我們大部分在設計時都只會基于目前情況進行對應的設計，而一旦該面板增加或者減少某類數據時，整體版面就會變得非常難看。

因此我們在設計看板時一定不能忽視后續內容的拓展性。比如當我們已經利用基礎版式設計好一版時（注：當前看板僅做說明展示，頂部欄和側邊欄都未呈現）：

如果此時產品或者業務進行對應的新增需求時，你是否又需要改變整體結構。但如果你是基于方格進行的設計時，你可以利用方格結構，更加靈活和方便地調整視覺呈現。比如我們可以將「最近視頻數據」模塊下調一個單元格的距離，來呈現增加的信息。

但如果面對特別多的模塊，我們則需要改變當前看板的布局結構來讓我們整體的拓展性更強，需要采取固定區和拓展區的形式來進行排布（這里的固定區也可以在右側）：

調整后的結構如下：

右側的區域可以進行滾動呈現更多的內容：

通過這樣的結構，能夠面對不斷拓展和變換的數據起到很好的承載作用。比如神策和數數科技均采用這種設計策略。

我還見過一種更加靈活有趣的結構，那就是每個模塊都支持自定義拓展。這樣的結構需要嚴格遵循模塊化排版來進行設計，使用上會顯得非常靈活，比如下方的示例：

目前該設計在coding上也見過實際案例，且在調整模塊大小時會按照程序進行自動適配，倒也是個不錯的方法。

五、總結

以上是本次對于當前看板設計的思路總結，運用上述方法能夠讓你根據業務場景，快速確定當前看板需要的版式，從而更好地進行后續內容的設計。

采用方格結構的好處是對于看板的規劃排布和拓展性都相對比較友好，當然在實際的應用場景中，肯定也有不按照方格結構設計的看板，這當然也沒有問題。本篇文章也只是本人對于看板場景的一種快速高效的設計方案，希望對大家有所幫助。

由于時間和個人探索的局限性，文章難免有不足之處，對于文章有更好的建議，歡迎同學們提供。