三個步驟設計高效 Dashboard

研究國外業內前沿數據產品，了解當前實現數據價值的最新思路和實踐。

無論哪一種數據產品，儀錶盤（Dashboard）都是最核心的功能。它作為用戶接觸數據的第一個頁面，相當於數據產品的門戶，擔負著提綱挈領，引導分析的重要職能，幫助用戶能夠快速判斷業務情況，支持他們做出決策并行動。

個人有幸經歷過三個數據平台的 Dashboard 設計，企業內部和 ToB 型產品皆有涉獵。根據研究過的一些 Dashboard 設計案例和文章，最後將所有這些經驗總結成以下的「123」：一個原則，兩個時期，三個細則。

一個原則即「提綱挈領，引導分析」，在一個頁面里明確告訴用戶當前業務狀況好壞，並支持能夠針對某個問題進行下鑽分析，從而串聯起整個數據平台。由此原則從而可推出以下三個細則：

因人而異，細分場景：根據用戶和場景設計產品
少勝於多，分清主次：展示最關鍵的指標，區分優先順序
深入分析，落地行動：支持深入分析，並落地為具體行動

這就像講一個用戶故事。經過起承轉合慢慢鋪墊，最終進入正題，告訴用戶應該怎麼去執行，怎麼去優化產品和業務。

各類數據產品在實現前面提到的不同原則時，又可以分為兩個時期：Report（定製化）和 Customize（個性化）。前者是早期形態，如 GA 和 Mixpanel 等，特點是根據指定的分析思路，嚴謹地從匯總到細分，層層下鑽。它們為實現「因人而異」，往往會設定多個 Dashboard 頁面，或者本身就只針對某一類用戶群體。後者更常見於一些比較新型的分析產品，如 Domo 和 Looker，特點是報表自定義程度較高，通過自由選擇單圖的方式來組建 Dashboard。隨著時間的發展，這兩者的界限在慢慢模糊，但主要的特點依舊鮮明。

1. 因人而異，細分場景

產品的核心就是解決問題，解決某些用戶在某些場景下的某個問題。對於不同行業，不同業務，不同職位的人們來講，關注的內容自然不一樣。在設計一個數據產品或頁面時，我們需要圍繞著用戶和場景來做設計。

1.1 劃分用戶

劃分用戶，一般會從業務線或崗位入手。不同業務線間，關注的核心指標自然不同，比如轉轉下面各種業務部門，即使大家都關注大盤數據，但每天更關心的，還是自己的業務細節指標。

崗位也是同理，管理層重在把握全局，而執行層重在每個細節的執行效果，關注的數據層級和指標也會有所差異。

以 Domo 為例，它為每個職位的人單獨設一個 tab 來顯示，每一個崗位都有自己預設的 Dashboard 頁面。

同時，它也支持用戶對這些報表進行內容的增刪改查，以及對整體布局進行調整。

所有設計儀錶盤的第一件事情，就是明確自己的用戶，然後根據不同的用戶群體設計儀錶盤，及確定開發的優先順序。

1.2 劃分場景

劃分場景，主要的場景有包括但不局限以下情況：實時監控場景，指定主題分析場景，移動查詢場景，周日會彙報場景和大屏顯示場景等。

從實時監控場景來講，Dashboard 會被分為實時和歷史兩種，兩種略有差異。實時側重於監控，歷史側重於了解和分析。這兩種沒有明顯的分界，實時需要歷史的信息作為對比，來判斷當前的數據是否正常。而歷史也需要准實時的信息來更快地了解當前的情況。這兩種形態的Dashboard 對於數據產品來講都必不可少。

以下是較好的實時 Dashboard 設計方案，核心在於細分維度的多維監控，並確定合適的閾值點。

從特定主題分析場景來講，Domo 為每一個數據源設定相應的 Dashboard，如 Facebook 廣告，Google ADs 等等。因為每個數據源就代表著一種場景。

移動場景考慮到屏幕等硬體條件的限制，則側重於通知和展示，不深入到分析部分。到具體產品設計上，則是通過 M 頁或者 APP 等方式實現，提供最核心的數據查看和智能挖掘，不做過多的查詢功能和複雜的交互。同時，基於現有大部分人通過手機進行溝通，那麼頁面或數據的分析也變得重要。

同樣以 Domo 為例，它在移動端也有相應的場景劃分，支持消息的移動推送和展示：

2. 少勝於多，分清主次

根據「提綱挈領，引導分析」的原則，儀錶盤的界面上優先展示的指標應該是用戶最關心的，且因為每個用戶時間精力有限，在數量上要極度精簡。在挑選指標時，要遵循一下原則：

從用戶的需求出發
精準，精確反映當前業務情況
核心指標不超過7個
確定核心指標間的聯繫及優先順序

Webtrend 創立於 1993 年，是目前公認市場佔有率第一的商業網站分析方案，為接近 2000 個公司提供服務。作為一款通用的商業分析產品，它在 Dashboard 頁面提供了網站用戶最關心的 7 個指標，包括最近 30 天的匯總PV，訪問量，訪問深度，新訪問用戶，日均訪問用戶數，平均訪問時間，跳出率。同時通過與上個30天的環比的增減，跌漲與紅綠對應，能夠使用戶一眼就了解到當前業務情況。

同時，這幾個業務從幾個側面整體衡量了網站的用戶數量及質量，既能監測網站訪問用戶數的情況，同時通過跳出率等指標來分析訪問用戶的質量，可監測爬蟲或及時識別偽造用戶。

對於非通用性產品，如企業內部的數據產品，這個環節的關鍵就落在了確定核心指標頭上。結合《精益數據分析》和個人經驗，有個簡單的方案可供參考：

根據商業領域不同及企業發展時期的不同，要採取不同的指標驗證
建立第一性指標，目標要依據情況而變

比如在美團外賣最開始的時候，關注的重點的是訂單數，後續發展成訂單額，新客數和資金使用率等等。在不同戰場，在戰場的不同時期，需要觀測的指標都不一樣。

以下是《精益數據分析》中關於各種商業模式和公司階段應該思考的問題，和採取的第一性指標，僅供參考：

在具體設計第一性指標及衍生指標時，需要注意：

（1）注意行業常識

比如社交產品，電商產品等應該關注什麼類型的第一性指標

（2）選擇合適形式

採取簡單易懂的指標：複雜的指標發生異常時，並不能明確告訴你問題的原因，簡單成本中
採取比率指標：相對於資金使用量，資金使用率，如訂單金額/活動金額能防止資金濫用，產生更大的經濟效益。
採取伴生指標：在關注某個指標時，需要有個另一個指標對它進行制衡，避免「跑偏」。如關注新客數時，也必須關心獲客成本，避免市場部門為了完成新客指標而花費了過高的成本

（3）避免統計陷阱

平均值的一項巨大能力就是阻礙決策的制定。因此在使用平均值時，要注意通過使用分佈數據來防止這種偏差。只說全國人民平均收入時，會給大家造成理解偏差。但如果加上省份間的分佈數據的話，情況就一目了然了。
百分比/比率，要注意顯示絕對值。當一個業務部門說自己增長 100% 時，可能只是因為他上一個周期的絕對值低而已。

（4）塑造指標易用性

幫助用戶理解和相信他們看到的數據：提供數據的來源，演算法以及異常的原因。異常的數據需要提供可驗證的途徑
提供上下文信息：提供數據清晰的標題，標籤和解釋，提供易於理解的指標名稱，以及標記數據異變的原因。

對於第四點，通常需要通過滑鼠懸浮的方式展示每個核心指標的定義，在有條件的情況下，還需要對每個數據異動提供註釋。在 Mixpanel 中，它支持在某個指標的某個時間點上添加備註，來說明數據變化的原因。

至於「精準，精確反映業務情況」，精準講的是指標要設計合理，精確講的是一定要保證數據準確性。一個老闆天天看的頁面，數據出錯了能發現還好，如果依賴錯誤的數據作出了決策，後果你能想象…

3. 深入分析，落地行動

分析無非「對比，細分，溯源」，從這個角度講，儀錶盤的設計需要讓用戶能夠在「提綱挈領」之餘，也要能提供給用戶分析思路。當發現數據異常時，能夠沿著思路自主得到答案，或者分析方向。

3.1 對比

沒有對比就沒有分析，從各種指標的對比中才能看出指標的偏離。對比可分為三大維度：

時間維度：同比，環比
空間維度：地區對比，團隊對比，商品／服務/渠道對比
設計維度：目標值，業界值，極限值等與實際值的對比

Qlik 作為一個老牌的可視化廠商，它旗下的產品 QlikView 將對比的概念發揮的淋漓盡致，基本涉及了以上各種對比類別。

在 Sales 圖表中，提供了各個月份間的時間維度對比。在 Sales/Margin/Customer 上和左側的列表中，則提供了地區，渠道，品類等各空間維度的對比。而在 KPI Scorecard（計分卡）圖表中，是設計維度的對比：「當前銷售額」和「某個時間段內的最高值和最低值」，「利潤率」和「目標利潤率」&&「利潤率區間」，從而使所有地區的銷售情況一目了然。

而且從上面的例子可以看出，對比對於顯示關鍵信息來講非常重要。在設計相關的對比模塊時，一要在合適的維度上進行對比，這個維度應該對當前指標的變動起主導作用。二要突出對比的結果，方式有顏色變化，內容閃爍或數據報警等。

這裡順便提下對於紅綠色含義的認知差別。有些國內的數據產品會以為在股市中，紅漲綠跌，並且在傳統文化中紅色代表喜慶，所以在數據產品中紅色應該也代表數據變好。其實數據可視化的原則是，高效地向用戶傳遞數據信息。而用戶天然對紅色的內容會比較敏感，紅色應該用來傳遞更重要的信息。數據下跌比數據上漲要重要得多，因此數據產品在指標的顯示上，應該仍遵循紅壞綠好的原則。

3.2 細分

細分是對核心指標進行多維度的劃分，分為單維度細分，多維度細分，流程細分及TonN細分等等。

以 Ptengine 為例，它提供了對不同核心指標的細分，包括訪問來源，訪問地區，訪問設備及頁面。同時，用戶可以在頁面對不同指標進行切換。當你對某些數據有疑問時，你可以通過點擊相應的維度跳轉進入各個子頁面，起到了「引領分析」的作用。

流程細分一般是指的從漏斗的角度去拆解指標的上下游。舉例來說，當我們關注的指標是支付訂單數時，我們就需要去拆分從列表頁，詳情頁，下單頁到支付頁的每個流程的數據及轉化。

TopN 細分則是注重看中某個維度下佔比前列的維度值的變化，來直接反映某些指標值的變化。

3.3 溯源

其實，溯源作為一個對於數據異變根本原因的追查過程，很難融合在以簡潔為原則的 Dashboard 中，不過 Amplitude 通過隱藏選項並且通過和內在其他功能的融合，很好地解決了這個問題。

Amplitude 首先提供了不同主題，不同形式的數據的對比細分展示。而在某類具體業務和數據點上，我們可以選取某個時間點的用戶群體作為 Cohort 對象或者針對這批用戶的流向結合產品內其他功能進行分析。它甚至能夠將整個用戶id列表下載下來，做線下分析。

事實上，對比，細分和溯源不是嚴格區分出來的三個流程，而是互相融合在一起的。在不斷地在異常的維度上進行對比和細分時，才能得到可以付諸行動的結果。

3.4 行動

在設計儀錶盤時，要反覆地問自己「So What」。從設定用戶場景，到確定指標和優先順序，再經歷對比細分溯源三個分析流程，最後要做的，就提供給用戶決策和行動的建議和方向。

這裡有點個人的技巧：先假定幾個異常的場景，然後通過設計出來的儀錶盤，演練拆解場景中出現的問題。如果能夠在若干個場景中都順利走通，那就證明你整個設計能夠支持用戶做出決策和行動，已經馬克森斯了。

再往上一層，就是能夠直接給出業務建議的層次了。這個一方面需要對業務的極度熟悉，另一方面可能還需要數據挖掘和機器學習的內容。舉個 Google Analytics 的移動版為例，在這個版本的 Dashboard 里，已經有這種智能化的提醒了。

4. Dashboard 設計原則

剛開始做 Dashboard 設計時，不要一上來就畫原型圖，而是先劃分用戶和場景，然後用思維腦圖確認核心指標和衍生維度。再根據思維腦圖畫出草圖，演練幾遍在 3.4 提到的「用戶故事」。在整個流程都走順之後，再開始儀錶盤的設計。

在設計細節上，不要刻意追求炫酷的效果，而是注重設計的內在邏輯和傳遞消息的有效性。有一些設計原則可以參考：

在功能設計上

突出核心指標：不能讓複雜的設計掩蓋了指標的呈現
突出對比：時間對比，空間對比，設計對比等等
提供細分及下鑽：方便用戶在有疑問時能夠快速得到方向
減少用戶選擇：提供默認的同環比和時間選擇，提供最常見的維度切分

在可視化設計上

簡潔為上：減少Tab、按鈕、單選框、複選框，在1-2個頁面里完成展示
避免過多的顏色和點綴：太多的顏色會讓人眼花繚亂，失去重點
選擇正確的可視化形式，可參見華爾街是怎麼做可視化的

匯總以上提到的各種類型的 Dashboard ，可供參考的設計框架有以下兩種，均可從本文中提到的各個大廠設計的 Web Dashboard 的樣式作為佐證。

（1）總分式，先展示核心指標，再對核心指標進行拆分

在實際操作過程中，因為指標往往比較多，通常會通過加上指標篩選框或者 Tab 的方式來進行區分。

在實際使用過程中，模塊間可以任意組合。如 GA 和 Ptengine 就是上趨勢下數字搭配若干個細分維度，而 Webtrends 則是上數字下趨勢再搭配細分維度，Mixpanel 和 Amplitude 則乾脆就是趨勢+細分維度。

（2）分散式，常見於 Customize 類型的數據產品，形式是若干個報表集中在一個頁面展示。

這是因為此類產品一般沒有等級明確的金字塔結構來承接分析思路。此類形式勝在自由，但缺陷在於信息量太大，讓用戶一下子不知道該關係哪個指標。所以建議此類產品必須可以定製每個單圖的大小，從而起到「少勝於多，分清主次」的作用。

為了追求視覺效果，在大屏展示場景下，也會經常採取這種布局方式，比如天貓的雙十一大屏和一些公司內部的大電視上。

在《Information Dashboard Design》一書中，作者給出了他眼中最完美的 Dashboard 設計範例，堪稱簡潔典範：

在實際設計過程中，以上幾個方法可能會互相衝突，比如 Amplitude 產品中，我們說盡量減少 Tab 切換，可它就在頁面中提供了若干個切換的入口。這時候就得在業務需求，產品簡潔和信息量上做好取捨。

設計完成和產品上線后，都必須持續聽取用戶的意見，對指標和交互進行修正。隨著企業階段的演變，Dashboard 也會處在不斷變化當中。

5. Report && Customize

我們先用 Google Analytics 和 Looker 來舉例說明這兩者的差別。

Google Analytics 中根據分析主題劃分出受眾群體，流量獲取，行為，轉化四個子菜單，每個菜單會再按照菜單層次依次往下拆分，就像一層層金字塔一樣。

另外一面，在 Looker 中，會採取這種分散的圖表的組織方式，每個圖表都可以再次編輯。整個分析頁面，不再是簡單的圖和表的堆砌，而是變成了一個畫布。用戶可以在這個畫布上放置他們任意想要的內容。

這兩種方式各有利弊。

Report Dashboard 適用於整個市場的數據利用意識處於早期階段，分析思路匱乏，對指標的需求比較單一，只能由設計者提供一個抽象普適的分析思路，供用戶日常使用。

而隨著數據運營的方法論越來成熟，整個數據採集和分析工具越來越先進時，原先的方案已經不能滿足人們的需求。不同的人，同一個人不同時期關注的內容都不一樣。因此對個性化的要求便能越來越高。

不過，Customize Dashboard 會面臨幾個問題：1，對底層數據的規範要求較高；2，對使用者要求較高，這需要用戶有十分明確的分析思路及定義指標的概念。為了解決這個問題，很多產品便提出了兩者相融合的方式：在 Customize Dashboard 的基礎上，提供一些默認的報表，方便用戶使用。允許用戶修改，從而具備更大的自由性，適用於跨業務跨部門的情況。同時帶來的問題就是分析思路不明確，可能沒有重點和框架，用戶在分析使用的過程中容易困惑。這種情況下，預定義的多主題的 Dashboard 和分析思路就顯得非常重要，否則整個產品的上手難度會比較高。

在 Kilometer.io 的設計中，它會給用戶預設幾個常見的模板，同時允許用戶對模板進行自定義的編輯。這是很多 TOB 數據產品都具備的功能，而 kilometer.io 比其他產品更進一步的做法時，在自主添加報表時，它同樣提供了默認的指標和形式供你選擇，避免了用戶在自定義報表時無所適從的問題。

說起來，這有點像降維打擊，後者只要有完善的底層數據和交互規範，片刻就可完成多種類型的 Report 的設計。這已經不是一個層次的戰爭。

這個趨勢不但是 ToB 類數據產品出現，在企業內部數據產品上亦是如此。很多公司如美團，轉轉都開啟了這種以自定義 BI 為基礎，以「個性化看板」的方式組織所有定製化和自定義的報表的模式。這種 BI2.0 的結構能夠為不同的業務線，不同的場景提供不同的 Dashboard。私以為，這將是大幅提高企業內數據使用，分析和分享的效率。

當數據倉庫基礎已經完善或業務需求非常多樣化的時候，就可以開始考慮這種架構了。