文(wén)刀(dāo)：在企業類應用(yòng)服務(wù)（SaaS）、檢測工(gōng)具(jù)（手機安(ān)全助手）、量化自我工(gōng)具(jù)（智能(néng)手環）等後台管理(lǐ)系統中(zhōng)，使用(yòng)Dashboard可(kě)以幫助用(yòng)戶監控和分(fēn)析數據，快速獲取重要信息。但如果對Dashboard設計缺乏認知，就很(hěn)可(kě)能(néng)會造成Dashboard呈現的信息雜亂，充斥着無關緊要的指标、文(wén)本信息及各種半成品的圖表等，讓用(yòng)戶抓不到重點。

那麽，設計師該如何設計内容精(jīng)确、體(tǐ)驗友好的Dashboard以滿足用(yòng)戶需求呢(ne)？文(wén)章将從以下幾個方面思考：

• Dashboard是什麽？
• 主要場景是什麽？能(néng)為(wèi)用(yòng)戶帶來什麽價值？
• 目标用(yòng)戶分(fēn)析
• 選定Dashboard内容
• Dashboard内容結構
• 功能(néng)特性
• 信息設計

一. Dashboard是什麽？

在了解Dashboard之前，可(kě)以先了解下汽車(chē)儀表盤和報表。

Dashboard的中(zhōng)文(wén)翻譯是“儀表盤”，與汽車(chē)的儀表盤相同——一種反映車(chē)輛各系統工(gōng)作(zuò)狀況的裝(zhuāng)置，有(yǒu)車(chē)速裏程表、轉速表、燃油表等。同時，還會有(yǒu)各式各樣的指示燈或警報燈，例如冷卻液液面警報燈、燃油量指示燈、充電(diàn)指示燈等。司機可(kě)以很(hěn)方便地從汽車(chē)儀表盤中(zhōng)獲得汽車(chē)整體(tǐ)狀況。而對于報表，簡單的說就是用(yòng)表格、圖表等格式來顯示彙總數據。同時，因為(wèi)常用(yòng)于定期彙報場景（如每月賬本彙總），報表也要考慮紙質(zhì)打印的限制。

△  汽車(chē)儀表盤（左）和報表（右）

而Dashboard沿襲了汽車(chē)儀表盤理(lǐ)念，在一個屏幕上有(yǒu)預設性地顯示對用(yòng)戶關鍵的信息，并實時告知用(yòng)戶正在發生的情況。同時，Dashboard進一步結合計算機互動的功能(néng)顯示和傳輸信息，突破了報表要考慮紙面打印輸出的限制。在Dashboard頁(yè)面中(zhōng)，用(yòng)戶不僅可(kě)以直接對數據和圖表進行分(fēn)析，還可(kě)以通過控件來控制數據的顯示、計算、過濾和分(fēn)組等等。

在Stephen Few的《Information Dashboard Design》一書中(zhōng)指出：Dashboard對重要信息做視覺呈現，這些重要信息是為(wèi)了達成一個或者多(duō)個目标而被統一組織在一屏内，以便能(néng)夠一眼就得到監控。

二. 主要場景是什麽？能(néng)為(wèi)用(yòng)戶帶來什麽價值？

Dashboard一般通過重要内容和核心數據來告知用(yòng)戶：“業務(wù)整體(tǐ)狀況如何？有(yǒu)哪些關鍵指标？各指标的運行情況分(fēn)别如何？哪些指标出現異常？需要用(yòng)戶做些什麽？”。由此可(kě)知，Dashboard主要應用(yòng)于監控、分(fēn)析和概覽三大場景。

△  Dashboard三大主要使用(yòng)場景

首先，在監控場景中(zhōng)，Dashboard主要為(wèi)用(yòng)戶集中(zhōng)提供便捷的關鍵指标實時監測，及時告知異常狀态，并引導用(yòng)戶定位問題。

△  Dashboard監控場景

其次，在分(fēn)析場景中(zhōng)，Dashboard主要通過數據圖表，配合控件進行不同維度的數據分(fēn)析。例如，用(yòng)戶可(kě)以通過時間篩選控件過濾圖表上的數據範圍等。

△  Dashboard分(fēn)析場景

最後，在複雜業務(wù)中(zhōng)，Dashboard還用(yòng)于概覽場景，集中(zhōng)呈現業務(wù)分(fēn)散的重點信息，用(yòng)戶還可(kě)以通過提供的入口快速跳轉至相關模塊。

△  Dashboard概覽場景

通常，Dashboard三大主要使用(yòng)場景是相互配合使用(yòng)的。例如，用(yòng)戶通常先通過概覽Dashboard了解業務(wù)整體(tǐ)信息，觀察監控數據的情況，如需要進一步分(fēn)析，用(yòng)戶可(kě)以對數據進行多(duō)維度分(fēn)析已獲取更多(duō)信息。

在監控、分(fēn)析和概覽主要場景中(zhōng)，總結提煉了Dashboard能(néng)為(wèi)用(yòng)戶帶來的直接價值主要如下幾點：

• 監控告警，并引導用(yòng)戶定位問題
• 深入分(fēn)析數據，獲知細節信息
• 快速獲取業務(wù)整體(tǐ)重點信息，管理(lǐ)資源

三. 目标用(yòng)戶分(fēn)析

在對Dashboard有(yǒu)基礎了解後并開始設計Dashboard，首先需要清楚：Dashboard的目标用(yòng)戶是誰？他(tā)們在什麽環境中(zhōng)會使用(yòng)到Dashboard？做什麽事情等？考慮這些問題，有(yǒu)助于确定Dashboard的大緻輪廓。例如，在分(fēn)析用(yòng)戶時獲知運維人員在工(gōng)作(zuò)時間需要監視機器健康狀況，設計時可(kě)考慮在Dashboard中(zhōng)呈現正常、異常機器數，并引導用(yòng)戶定位到出現異常的機器，排查問題。
在做目标用(yòng)戶分(fēn)析時，可(kě)以從用(yòng)戶、場景和任務(wù)這三方面考慮，以了解用(yòng)戶特點和目标等相關信息。

△   用(yòng)戶、場景和任務(wù)

如上圖，了解用(yòng)戶對數據和行業的熟悉程度等，可(kě)以輔助判斷提供與用(yòng)戶水平相匹配的數據分(fēn)析能(néng)力。同時，也可(kě)以從中(zhōng)判斷是否需要嵌入内容注釋和輔助信息等，幫助用(yòng)戶理(lǐ)解。而在場景和任務(wù)中(zhōng)，用(yòng)戶行為(wèi)本身就受場景影響，設計Dashboard時要考慮不同場景下具(jù)體(tǐ)任務(wù)的合理(lǐ)性和重要程度，在後續處理(lǐ)内容時輔助判斷優先級。

四. 選定Dashboard内容

對目标用(yòng)戶、場景和任務(wù)進行分(fēn)析後，接着需要考慮在Dashboard中(zhōng)呈現什麽内容幫助用(yòng)戶完成不同場景下的任務(wù)。在選定内容前，首先需要明确Dashboard的主題是什麽？然後，再圍繞主題，考慮該呈現哪些内容？

1. 明确主題

Dashboard的主題是什麽？即通過Dashboard，要幫助用(yòng)戶完成什麽事情。

明确Dashboard的主題時，需要充分(fēn)考慮目标用(yòng)戶的需求。例如，運維人員需要Dashboard能(néng)夠幫助他(tā)“高效、精(jīng)确地發現、定位問題，确保業務(wù)正常運行”，而财務(wù)人員則需要在Dashboard了解到“賬戶各個季度收支情況”等。明确主題後，選定内容時就可(kě)以緊緊圍繞主題，考慮呈現能(néng)夠幫助用(yòng)戶的信息，規避雜亂、無效的數據。

△  電(diàn)腦管家Dashboard小(xiǎo)浮窗

如上圖所示，騰訊電(diàn)腦管家Dashboard小(xiǎo)浮窗的主題——幫助用(yòng)戶實時監控機器使用(yòng)情況。為(wèi)此，在小(xiǎo)浮窗中(zhōng)呈現CPU、内存和流量關鍵指标實時數據。同時，也提供了各指标資源占用(yòng)較高應用(yòng)的實時數值監測，讓用(yòng)戶獲知更多(duō)詳細數據。

2. 選定和編輯内容

• 選定内容

内容選定時需要很(hěn)好地區(qū)分(fēn)真實、可(kě)付諸行動的信息和無效信息，這可(kě)以從以下三個方面進行考慮：

• 緊扣主題

内容緊扣主題，要很(hěn)清楚Dashboard呈現的内容能(néng)幫助用(yòng)戶完成什麽事情。避免呈現的内容太多(duō)太雜，反而讓用(yòng)戶不容易理(lǐ)解。當然，無可(kě)避免會呈現一些輔助内容，一種有(yǒu)效的處理(lǐ)方法就是将這些内容放在頁(yè)面底部，确保關鍵、有(yǒu)用(yòng)的信息放在首屏。

• 引導行動

在考慮所呈現的内容時，不應該隻片面考慮“用(yòng)戶想要知道什麽？”，而應該進一步考慮“如果用(yòng)戶知道了這個信息，會用(yòng)它來做什麽？”。這能(néng)讓呈現的内容更為(wèi)聚焦、實用(yòng)，讓用(yòng)戶抓住重點并采取行動。例如，在Dashboard實時監控資源健康狀态，用(yòng)标紅的數字表示發生異常資源數，強烈引起用(yòng)戶注意，并通過該數字跳轉至資源列表，篩選出異常機器。

• 統一認知

内容應符合用(yòng)戶認知，易獲取且真實可(kě)信。如指标命名(míng)、數據統計規則等，要與行業标準保持一緻。避免使用(yòng)不易理(lǐ)解的标簽、定義或内容。

△  選定内容判斷條件

需要注意的是，選定Dashboard内容時，不一定需要全部滿足上述提到的三個方面。但精(jīng)确、符合用(yòng)戶需求的内容，應該都是緊扣主題，又(yòu)能(néng)引導用(yòng)戶行動和符合用(yòng)戶認知。

• 編輯内容

選定内容後，還需要從用(yòng)戶角度做恰當的編輯處理(lǐ)，更直觀、精(jīng)确地呈現符合用(yòng)戶需求的内容。例如，财務(wù)人員制作(zuò)每季度的報表，那麽提供按“季度”呈現内容會更符合用(yòng)戶需求，方便且高效。
在編輯内容時，可(kě)以從内容的覆蓋範圍、時間跨度、粒度和個性定制等這些方面考慮，讓Dashboard的内容更為(wèi)符合用(yòng)戶需求。

△  内容編輯思考細則

五. Dashboard内容結構

在《Information Dashboard Design》一書中(zhōng)指出：“Dashboard内容必須合理(lǐ)組織，從而反映信息的本質(zhì)和支持有(yǒu)效且有(yǒu)意義的監控；信息不能(néng)随便放置，也不能(néng)隻是根據剩餘空間來設定大小(xiǎo)；相互關聯的項目應該放置在臨近的位置；重要的項目版面要大一些，這樣才能(néng)比相對次要的信息更加突出；有(yǒu)特定順序的項目，要以一種視覺上被關注的順序排列。”

合理(lǐ)的信息結構能(néng)夠幫助用(yòng)戶高效閱讀，理(lǐ)解内容。所以，當Dashboard的内容選定後，就需要考慮如何将信息碎片有(yǒu)邏輯地組合在一起，合理(lǐ)呈現和布局，引導用(yòng)戶理(lǐ)解全局。從更實用(yòng)的角度來說，内容結構能(néng)夠成為(wèi)用(yòng)戶的導航機制，用(yòng)戶知道該從哪裏開始，接着該看什麽。

選擇使用(yòng)什麽結構視内容而定。依據經驗，Dashboard内容結構主要有(yǒu)三種類型：分(fēn)類型、關聯型和流程型。

分(fēn)類型

即将有(yǒu)相關聯的内容進行分(fēn)組呈現，讓Dashboard内容歸類而不雜亂無章。如 Google Cloud Platform 的Dashboard頁(yè)面，将内容按卡片分(fēn)為(wèi)Project info、Billing、Documentation等。同時，卡片與卡片之間也進行了分(fēn)組，左邊是資源信息，中(zhōng)間是指标監控，右邊是文(wén)檔幫助。

△ Google Platform Dashboard

關聯型

内容相互之間具(jù)有(yǒu)一定的邏輯關系，如地理(lǐ)位置關系、數字包含關系、對象父子關系等，這種結構可(kě)以讓對象之間的邏輯關系十分(fēn)直觀。如騰訊雲VPC網絡拓撲，将資源對象的位置和關系抽象表示，很(hěn)直觀的呈現了資源對象之間的相互關系。

△ 騰訊雲VPC網絡拓撲

流程型

流程型結構的内容一般會出現多(duō)個環節，每個環節之間都會有(yǒu)相應的内容，按照一定的流程逐步細化，深入引導用(yòng)戶閱讀。符合這種結構，如市場銷售各環節流程，像這種垂直的流程型内容結構，很(hěn)容易讓用(yòng)戶清楚每個環節的數據變動，定位哪個環節出了問題。這種結構有(yǒu)個較為(wèi)典型的統計模型是：漏鬥。

△ UV轉化率分(fēn)析（圖片來源：Echarts）

六. 功能(néng)特性

适當考慮為(wèi)Dashboard提供一些常用(yòng)功能(néng)特性，能(néng)夠讓整個頁(yè)面擁有(yǒu)較為(wèi)出色的用(yòng)戶控制和友好的體(tǐ)驗。

鑽取

鑽取是改變維的層次，變換分(fēn)析粒度，提供用(yòng)戶駕馭Dashboard内不同層次的内容。它包括向上鑽取（roll up）和向下鑽取（drill down）。roll up是在某一維上将低層次的細節數據概括到高層次的彙總數據，或者減少維數。而drill down則相反，它從彙總數據深入到細節數據進行觀察或增加新(xīn)維。

篩選

允講用(yòng)戶根據需要篩選Dashboard數據的範圍，可(kě)以是全局性的 （在整個概覽頁(yè)範圍内選擇），也可(kě)以是局部的（在特定圖表或是規定範圍内選擇）。特别涉及到時間的篩選，可(kě)以從記錄曆史（回溯過往數據趨勢）、快照（顯示單點數據）、實時（監控新(xīn)進活動）和預測（預估未來走向）等這些更細粒度角度考慮數值呈現，讓用(yòng)戶獲取精(jīng)确數據。

比較

指标數值的對比，能(néng)夠并列比較兩個或多(duō)個數據集。例如折線(xiàn)圖、面積圖等能(néng)提供數據集對比功能(néng)。

警報

根據預設的條件高亮顯示，當指标超出特定界限時就觸發報警。

可(kě)定制

允許用(yòng)戶根據需求定制不同的内容。

導出

為(wèi)用(yòng)戶提供Dashboard中(zhōng)導出數據的功能(néng)。

保存

當用(yòng)戶定制的情況越來越多(duō)時， 提供保存定制的功能(néng)就越發顯得重要。

總結

本文(wén)開篇先陳述什麽是Dashboard，其主要應用(yòng)場景和用(yòng)戶價值是什麽。然後，再從用(yòng)戶分(fēn)析、内容、結構和功能(néng)等闡述設計Dashboard過程中(zhōng)需要着重考慮的。在《Dashboard設計思考》的下一篇，将分(fēn)析如何設計清晰、簡潔的頁(yè)面，将前期分(fēn)析整理(lǐ)的内容和功能(néng)更好的呈現給用(yòng)戶。控。即Dashboard集中(zhōng)呈現重要信息，便于用(yòng)戶快速浏覽獲知全局。