最初看板Dashboard源于形容汽車儀表盤，恰如其分地擔當了瀏覽和查看的任務。這幾年設(shè)計看板項目不少，本篇文章聊聊如何設(shè)計一個好的設(shè)計看板。

為什么我們要自己設(shè)計看板Dashboard？

其實我們打開CNCF Cloud Native的Landscape，各類各種開源工具玲瑯滿目讓人眼花繚亂。

當我們按照CNCF的Trail Map再做劃分，就可以清晰看到他們的分類和路徑，在配置、存儲、安全、發(fā)布等諸多方面都有自己的工具。

其中只看監(jiān)控和分析Observability and Analysis部分，Prometheus、Fluentd、 Open Tracing和Jaeger都是大名鼎鼎的DevOps工具。

這些開源領(lǐng)域的大名鼎鼎的DevOps工具，打開后會變成什么樣子呢？下圖是用Prometheus中對Stack的一些傳統(tǒng)監(jiān)控指標，要不是專業(yè)運維工程師，一定一臉懵逼。

如果使用商業(yè)軟件的開源版本是不是會好理解點呢？業(yè)內(nèi)翹楚Elastic公司開源的Kibana的Stack健康指標界面雖然交互結(jié)構(gòu)清晰了許多，但是還是感覺很難用的樣子。

這樣的軟件可以為專業(yè)工程師所用，但還是存在一定的缺陷，比如針對普通用戶的交互視覺體驗感不佳，各個數(shù)據(jù)散布在不同的工具中難以規(guī)整統(tǒng)一查看，有些數(shù)據(jù)敏感有安全性的考量等等。

所以不管是想使用商業(yè)、開源軟件還是自研軟件，把看板設(shè)計好都是有挑戰(zhàn)的事情。今天我會用原創(chuàng)設(shè)計稿+網(wǎng)絡素材的方式做一個小小分享， 從設(shè)計師角度簡單七步設(shè)計出一個可落地的看板項目。

01 明確定義看板的用戶群體和用途

首先，看板的設(shè)計目的還是為用戶而生，所以定義用戶群體和他們核心所需非常重要。大多數(shù)看板都以看為主，輔以功能控制，大體可分為監(jiān)控類Operational Dashboard和數(shù)據(jù)分析類Analytical Dashboard。

淘寶賣家平臺千牛就是監(jiān)控類看板的一種，賣家可以迅速看到當日瀏覽數(shù)、交易量、交易額等核心數(shù)據(jù)，而這些展示會促使他迅速作出判斷，進行下一步行動。比如商家看到有未付款的商品，就會和客人積極溝通，促進下單成交，看到出現(xiàn)中差評，系統(tǒng)會預警賣家用以積極解決售后問題。

大多數(shù)產(chǎn)品的運維后臺也屬于監(jiān)控類看板，運維工程師需要關(guān)注系統(tǒng)的穩(wěn)定性和是否有異常情況等等，并作出反饋。

知乎和微信公眾號的看板就偏重數(shù)據(jù)分析類，這類看板對時間的敏感度比較低，更多地體現(xiàn)了歷史數(shù)據(jù)和總體趨勢。

02 定義大的交互板式和內(nèi)容表現(xiàn)的優(yōu)先級

了解了看板類型，我們可以看看這類設(shè)計的的交互結(jié)構(gòu)。通常Web端和移動端都有看板的存在，Web端的看板比較常用左右結(jié)構(gòu)，側(cè)邊欄承擔了菜單的功能。

為了給圖表更多展示空間，側(cè)邊菜單收起的樣式也很常見。

需要注意的是，設(shè)計時我們要考慮不同屏幕的自適應性，理想的話可以做到根據(jù)用戶的屏幕自適應排版。

在業(yè)務大屏項目中，曾要同時為ipad、大屏和pc上顯示看板內(nèi)容，此時的方案不僅要滿足多種平臺的樣式，而且要能求同存異。因為大屏的部分可能會對外部客人展示，所以在功能上補充了單圖全屏和隱私功能，當點擊隱私功能按鈕，大屏畫面會切換成屏保，避免客人看到過多敏感數(shù)據(jù)。

03 按照邏輯分組數(shù)據(jù)并以此建立網(wǎng)格

當框架定好以后，我們可以開始關(guān)注展示內(nèi)容，與業(yè)務&產(chǎn)品進行討論。通常我和業(yè)務會將同類數(shù)據(jù)的內(nèi)容盡量放在一起，比如典型的PV&UV、當日下單量&下單金額、歷史數(shù)據(jù)等等…按照優(yōu)先級一一排列后，我們將所有的內(nèi)容扔進了畫布中，再拼圖一般開始自由組合。

比如在溝通需求列表時，業(yè)務關(guān)注人數(shù)按照時間軸可分為今日 / 7日 / 15日/ 30日，前期我建議分開列好，最后設(shè)計時考慮合并在一張圖中表現(xiàn)，是設(shè)計師先發(fā)散再規(guī)整的過程。

同理運維數(shù)據(jù)中的響應時間和響應慢速比也可以放在一起展示。

在設(shè)計數(shù)據(jù)分組和展現(xiàn)方式時，也需要從技術(shù)上考慮數(shù)據(jù)獲取和統(tǒng)計分析的時效性和精確性，通?？梢詮囊韵聨讉€角度出發(fā)：

1. 實時性的處理方案

具體的時效要求要精確到秒/分鐘/小時/天/周/月中的哪個粒度，如果是實時流數(shù)據(jù)，通常可以引入實時計算的引擎和方法，如storm/spark streaming等進行計算；如果是非實時數(shù)據(jù)，可以通過小時表/天表等方式提前跑出離線數(shù)據(jù)結(jié)果，以便統(tǒng)計分析。

2. 前后端功能解耦，各司其職，前端負責展示邏輯，數(shù)據(jù)處理邏輯由后端完成

前端直接面向用戶，需要敏捷開發(fā)，小步快跑，對用戶的需求快速做出反饋，因此不能加入過重的業(yè)務和數(shù)據(jù)處理邏輯，要做到所見即所得，后端返回的數(shù)據(jù)，前端直接展示。

后端作為看板的基礎(chǔ)，負責代碼控制和數(shù)據(jù)處理，需要做到穩(wěn)定高效，具備異常處理，水平擴容，支持多數(shù)據(jù)源的特點，同時要做到API化，即每個前端的參數(shù)都可以通過API接口獲取，且具有一定含義，如/api/dashboard/visitors/pv，做到一目了然。

3. 數(shù)據(jù)格式的保留

一般看板展示時，會涉及到的數(shù)據(jù)格式有整型、浮點數(shù)、布爾型、字符串等數(shù)據(jù)類型，通常需要后端程序在處理時進行統(tǒng)一規(guī)劃，進行舍五入，以免數(shù)據(jù)溢出或類型異常。

說起來，業(yè)務需求和數(shù)據(jù)常常變化，我們在設(shè)計時，也需要考慮1-2個版本迭代后的整體效果。通常我會將固定信息排列在一起，尺寸保持統(tǒng)一，而把非固定展示的內(nèi)容占滿一行，這樣如果此欄目下架可以直接去掉該樓層，不影響整體布局。

04 選擇正確的數(shù)據(jù)圖形化表現(xiàn)方式

擬好了框架，又確定了數(shù)據(jù)內(nèi)容，我們可以考慮數(shù)據(jù)圖形化inforgraphic的設(shè)計部分啦。

在實際落地項目中，開發(fā)通常會使用開源代碼+自定義修改的方式。比如Echart就是我們常用的開源代碼，設(shè)計師在有跡可循的情況下，多考慮數(shù)據(jù)適合的圖表樣式和配色即可。

選擇圖表的大原則是使復雜的信息易于理解，界面簡單明了，最大限度的減少用戶的認知負擔。餅圖、折線圖和柱狀圖等都是常見又直觀的表現(xiàn)形式。

有些圖比如雷達圖、風玫瑰和環(huán)形分布圖雖然看似酷炫，但是其實閱讀性性不高，要根據(jù)展示內(nèi)容有所取舍。柱狀圖、折線圖和k線圖都帶有多項維度比較的性質(zhì)。而針對時間變化的數(shù)據(jù)內(nèi)容，我們可以選擇固態(tài)或者動態(tài)展現(xiàn)。

用戶即可以選擇左右滑動查看記錄，也可以選擇擴大時間線查看細節(jié)數(shù)據(jù)，Google Finance Analysis也使用了這樣的設(shè)計。

很多開源軟件也會自帶一些小小的動畫效果和交互表現(xiàn)，靈活運用會讓你的畫面更有趣和更好用。

實際開發(fā)上，設(shè)計師還需要注意數(shù)據(jù)表現(xiàn)的落地效果，比如餅圖和柱狀圖的極值情況和坐標軸的定義等等。比如運維數(shù)據(jù)App用戶通過率的展現(xiàn)中，大多數(shù)情況下通過率都很高，所以坐標軸基準就可以從96.0%起。

說到餅圖，當數(shù)據(jù)是40%和60%時畫面又美又和諧，但是現(xiàn)實是骨感的，數(shù)據(jù)也會出現(xiàn)95%、3%、1%和1%的極值情況。通常我會和開發(fā)討論后，定義一個大約3%的百分比，當數(shù)據(jù)小于3%時，餅圖上始終留一窄條顏色的顯示，這樣并非完全真實的數(shù)據(jù)呈現(xiàn)，卻讓用戶的視覺感受更好，柱狀圖也可以一樣處理。

05 色彩的選擇和特殊情況的補充

圖表顏色和整體配色息息相關(guān)，看板常規(guī)會使用深色或淺色背景。我個人偏好深色，感覺沉浸感更加明顯一些。loading.io Colors?就提供了API上圖表的預覽功能，Adobe的Kuler也很好用，可以為圖標的配色做參考。

當選擇深色背景后，高飽和度的顏色用在圖表上更加出彩。P站和dribble上已有很多佳作可以參考。很多圖表在細節(jié)上可以依靠漸變讓畫面更豐富，文字的陰影細節(jié)也會讓整體的視覺質(zhì)感更好。

而因為圖表眾多，重要的數(shù)據(jù)展示字體要分開設(shè)計，并且可以搭配亮色圖標畫龍點睛?？窗鍟挥脩纛l繁使用，一些常用圖標的運用會縮短用戶的理解時間，讓用戶效率更高。

視覺圖形表現(xiàn)上，我們也可以運用High Data-Ink原則，數(shù)據(jù)圖形化的書《The Visual Display of Quantitative Information》中提到圖標的兩種表現(xiàn)形式，數(shù)據(jù)筆墨Data-ink和非數(shù)據(jù)筆墨Non-data-ink。

數(shù)據(jù)筆墨Data-ink指極簡化的數(shù)據(jù)，代表了圖表中的不可刪除的部分，這些數(shù)據(jù)是可視化的核心。而非數(shù)據(jù)筆墨Non-data-ink代表了與數(shù)據(jù)沒有直接關(guān)系的部分，很多也是起到裝飾效果的部分。Data-Ink Ratio 數(shù)據(jù)筆墨比 = Data-Ink數(shù)據(jù)筆墨 / Total Ink總筆墨，理想情況下，圖標上的每一滴筆墨都應該有存在的意義，Data-Ink Ratio 數(shù)據(jù)筆墨比接近于1.0。

我覺得雖然這只屬于一種數(shù)據(jù)圖形化流派的觀點，但當我們設(shè)計好圖標后，避免過多的裝飾元素讓用戶的注意力能集中在數(shù)據(jù)上的確是很好的檢視原則。

另外，我們也不要忘記對特殊情況進行補充設(shè)計，比如圖表在加載時或者刷新失敗的狀態(tài)。

06 給予用戶使用的靈活性和自定義的功能

當我們搞定了核心需求內(nèi)容&交互邏輯，定下了核心頁面的視覺基調(diào)和關(guān)鍵頁，可以稍稍松口氣，除了補充賬戶登錄，如果開發(fā)人力盈余，我們還可以看看有什么錦上添花的內(nèi)容可做。

一般使用看板的人基本屬于專家性用戶，所以對自定義的需求會比普通C端用戶強烈許多，在項目資源允許的情況下，為用戶提供自定義功能就是個很好的交互方案。

比如設(shè)置中允許用戶調(diào)整圖表顯示的順序，圖表可以選擇增加或隱藏基準線做對比等等，我的其中一個項目中因為多國用戶會查看，還提供了中英文語言&金額顯示格式的切換功能。

千牛平臺

看板屬于前端系統(tǒng)，從技術(shù)角度考慮自定義功能的話，可以單獨開發(fā)一個后臺管理頁面。用戶可以借此在后臺管理頁面中單獨進行個性化設(shè)置，比如頁面布局，開關(guān)，排版等；同時和權(quán)限系統(tǒng)進行有機結(jié)合，添加適當安全審計和訪問控制功能。

07 上線后的的迭代

經(jīng)歷了上述設(shè)計的打磨和討論，終于看板項目的第一版成功上線啦！通常0到1的過程是側(cè)重核心功能并帶著一點點簡陋的，因為開發(fā)工作會大量花費在賬號體系的建立、后端數(shù)據(jù)對接和前端數(shù)據(jù)反饋速度和刷新性能上。

從技術(shù)角度來看，上線后為確保系統(tǒng)穩(wěn)定性，我們需要給看板設(shè)計一個統(tǒng)一的兜底方案，避免前端產(chǎn)生空白頁或數(shù)據(jù)異常的效果。通常來說，看板的數(shù)據(jù)源肯定不止一個，會有多個不同的數(shù)據(jù)源。當前端用戶刷新請求時，看板的后端服務會從各數(shù)據(jù)源獲取數(shù)據(jù)，進行適當處理后最終返回給前端以供展示。

此時，為避免一個或多個數(shù)據(jù)源不可用或請求超時的情況，可以引入緩存機制，即把之前成功的請求結(jié)果在緩存中記錄一份，作為兜底數(shù)據(jù)。當發(fā)生數(shù)據(jù)源異常時，可從緩存中讀取數(shù)據(jù)，雖然犧牲時效性，但可以提升用戶體驗。

從設(shè)計上看，第一版為了追趕上線的日期，設(shè)計時間通常被壓縮的很緊。在設(shè)計第二版時，增加新的數(shù)據(jù)需求的同時，設(shè)計師會在迭代中為圖表增加下級詳情頁提高閱讀體驗；部分常用圖表組件化降低復用成本；增加微動畫讓整體交互體驗更好等等。

比如如果是業(yè)務類看板，我們可以考慮增加公司目標系數(shù)設(shè)定，設(shè)定后可以在圖表中做同期對比目標和實際達成對比。

當項目迭代多個版本時，會需要整體布局，細化分出三級菜單，或者增加搜索功能。

通過以上七個步驟，大致可以做出一份兼具美感和實用性的看板。隨著5G時代的到來，IOT，邊緣計算等等新的技術(shù)又會產(chǎn)生大量的新數(shù)據(jù)源，新一代的EdgeComputing的結(jié)構(gòu)也呼之欲促，像EdgeX這樣的架構(gòu)已經(jīng)開始在工程項目上應用開來。

這些新的技術(shù)必然會給看板設(shè)計帶來更多的挑戰(zhàn)：比如在多層次硬件數(shù)據(jù)結(jié)構(gòu)上過濾出業(yè)務需要的數(shù)據(jù)，在數(shù)據(jù)并發(fā)出現(xiàn)時能有效捕捉Key Data并合理呈現(xiàn)等等。

綜上所述，設(shè)計數(shù)據(jù)圖形化看板是最具沖擊力的視覺項目之一，產(chǎn)品、設(shè)計和開發(fā)都在用戶體驗和技術(shù)創(chuàng)新中尋找一個平衡點。我站在一個設(shè)計師的角度寫下了一些心得體會，希望對大家有所幫助。

最后，大力感謝后端運維工程師楊亞童鞋從技術(shù)角度對本文的補充，讓文章更豐富，也讓大家看到新的的角度。：）

作者：喵嗚不吃魚，公眾號：呼嚕貓薄荷

本文由 @喵嗚不吃魚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議