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

寫(xiě)在前面

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

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

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

因此如果在面對(duì)看板設(shè)計(jì)時(shí)，有相同問(wèn)題的同學(xué)，接下來(lái)這篇文章也許能夠解決你的問(wèn)題。

一、哪些場(chǎng)景適合看板

明白看板的使用場(chǎng)景，能夠讓我們快速判斷當(dāng)前信息是否適合用看板進(jìn)行呈現(xiàn)?？窗宓闹饕饔檬亲鳛楹诵男畔⒌臑g覽，用戶(hù)通過(guò)看板能夠掌握他想要了解的各類(lèi)重要信息的匯聚。

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

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

二、選擇看板風(fēng)格

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

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

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

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

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

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

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

這可能是我們?cè)谀玫娇窗逍枨蠛蟊容^糾結(jié)的地方，當(dāng)前我們應(yīng)該采用怎么的布局去呈現(xiàn)當(dāng)前的內(nèi)容。（注：這里所講述的內(nèi)容布局會(huì)排除側(cè)邊欄和頂欄，只針對(duì)看板內(nèi)容進(jìn)行對(duì)應(yīng)的規(guī)劃）

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

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

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

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

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

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

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

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

而我們?cè)谄饺赵诰W(wǎng)站上找到的參考很多都是基于上述版式而得來(lái)的：

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

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

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

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

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

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

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

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

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

四、看板的拓展性

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

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

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

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

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

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

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

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

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

五、總結(jié)

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

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

由于時(shí)間和個(gè)人探索的局限性，文章難免有不足之處，對(duì)于文章有更好的建議，歡迎同學(xué)們提供。