看板設(shè)計在我們?nèi)粘I(yè)務(wù)的很多需求中是不可避免的，不知道如何排版，適配當前場景。本文聚焦系統(tǒng)日常使用中的業(yè)務(wù)需求，談?wù)効窗逶O(shè)計如何呈現(xiàn)，三個步驟帶你實現(xiàn)。

寫在前面

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

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

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

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

一、哪些場景適合看板

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

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

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

二、選擇看板風格

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

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

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

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

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

因此我們只需要結(jié)合當前呈現(xiàn)形式選擇合適的背景即可。

三、設(shè)計看板版式

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

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

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

1. 看板的布局規(guī)劃

看板設(shè)計之前，首先需要確定的就是看板的邊距和間距。只需要確定后這兩個地方，我們就可以將內(nèi)容區(qū)域?qū)⑵鋭澐譃?×4的方格系統(tǒng)。比如當你確定后邊距為24px,模塊間距為16px后。我們就可以計算每個模塊的距離，從而進行區(qū)域劃分：

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

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

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

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

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

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

2. 看板的內(nèi)容規(guī)劃

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

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

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

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

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

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

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

四、看板的拓展性

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

因此我們在設(shè)計看板時一定不能忽視后續(xù)內(nèi)容的拓展性。比如當我們已經(jīng)利用基礎(chǔ)版式設(shè)計好一版時（注：當前看板僅做說明展示，頂部欄和側(cè)邊欄都未呈現(xiàn)）：

如果此時產(chǎn)品或者業(yè)務(wù)進行對應(yīng)的新增需求時，你是否又需要改變整體結(jié)構(gòu)。但如果你是基于方格進行的設(shè)計時，你可以利用方格結(jié)構(gòu)，更加靈活和方便地調(diào)整視覺呈現(xiàn)。比如我們可以將「最近視頻數(shù)據(jù)」模塊下調(diào)一個單元格的距離，來呈現(xiàn)增加的信息。

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

調(diào)整后的結(jié)構(gòu)如下：

右側(cè)的區(qū)域可以進行滾動呈現(xiàn)更多的內(nèi)容：

通過這樣的結(jié)構(gòu)，能夠面對不斷拓展和變換的數(shù)據(jù)起到很好的承載作用。比如神策和數(shù)數(shù)科技均采用這種設(shè)計策略。

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

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

五、總結(jié)

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

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

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