看板設計，掌握這三步就夠了

01.寫在前面

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

因此也通過查閱資料並結合實際工作進行對應的研究，想要通過更簡單的步驟，來提升看板設計效率。本篇更聚焦於非大屏類的業務模組看板，主要針對系統日常使用中的業務需求。因此如果在面對看板設計時，有相同問題的同學，接下來這篇文章也許能夠解決你的問題。

02.哪些場景適合看板

明白看板的使用場景，能夠讓我們快速判斷當前資訊是否適合用看板進行呈現。看板的主要作用是作為核心資訊的瀏覽，使用者通過看板能夠掌握他想要了解的各類重要資訊的匯聚。

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

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

03.選擇看板風格

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

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

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

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

但對於風格其實也不用太過糾結，比如coding在面對資料展示時在不同的介面中使用了不同風格：

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

04.設計看板版式

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

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

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

4.1 看板的佈局規劃

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

在這裡想要說一下為何採用4x4的方格，而不是3x3或者5x5的方格來進行計劃。因為對於內容區域來說，我們一般最多劃分的模組是4個模組，3x3方格的拓展性會相對弱，而5x5的方格的實用性其實也不大。並且我們目前大部分看板運用4x4方格都能夠承載其內容。

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

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

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

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

4.2 看板的內容規劃

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

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

1.藉助圖示等圖形化元素來輔助表達內容，即使我們接收到的資訊只有單純的文字，但我們可以思考如何藉助圖形幫助我們的表達，比如coding的近期建立事項，旁邊也用圖形化表達來突出其餘以前建立事項的對比，能夠讓整體視覺傳遞更好。

2.藉助簡易表格分散大段資料，避免造成大量文字。在很多時候，我們接收到的資訊特別散亂，且也不利於圖形化，因此我們可以通過將資訊拆解，利用承載能力最強的表格去分散特別多的資訊，讓整體視覺傳遞更加舒適，且表格中也可以加入某些元素讓表達更合理。

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

05. 看板的拓展性

這其實是很多設計師容易忽略的一個點，那就是看板的拓展性。我們大部分在設計時都只會基於目前情況進行對應的設計，而一旦該面板增加或者減少某類資料時，整體版面就會變得非常難看。因此我們在設計看板時一定不能忽視後續內容的拓展性。比如當我們已經利用基礎版式設計好一版時：（注：當前看板僅做說明展示，頂部欄和側邊欄都未呈現）

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

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

調整後的結構如下：

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

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

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

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

06. 總結

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

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

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

Powered by Froala Editor