騰訊好文！如何設(shè)計內(nèi)容精確、體驗友好的Dashboard？（上篇）

文刀：在企業(yè)類應(yīng)用服務(wù)（SaaS）、檢測工具（手機安全助手）、量化自我工具（智能手環(huán)）等后臺管理系統(tǒng)中，使用Dashboard可以幫助用戶監(jiān)控和分析數(shù)據(jù)，快速獲取重要信息。但如果對Dashboard設(shè)計缺乏認知，就很可能會造成Dashboard呈現(xiàn)的信息雜亂，充斥著無關(guān)緊要的指標(biāo)、文本信息及各種半成品的圖表等，讓用戶抓不到重點。

那么，設(shè)計師該如何設(shè)計內(nèi)容精確、體驗友好的Dashboard以滿足用戶需求呢？文章將從以下幾個方面思考：

• Dashboard是什么？
• 主要場景是什么？能為用戶帶來什么價值？
• 目標(biāo)用戶分析
• 選定Dashboard內(nèi)容
• Dashboard內(nèi)容結(jié)構(gòu)
• 功能特性
• 信息設(shè)計

一.?Dashboard是什么？

在了解Dashboard之前，可以先了解下汽車儀表盤和報表。

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

△ ?汽車儀表盤（左）和報表（右）

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

在Stephen Few的《Information Dashboard Design》一書中指出：Dashboard對重要信息做視覺呈現(xiàn)，這些重要信息是為了達成一個或者多個目標(biāo)而被統(tǒng)一組織在一屏內(nèi)，以便能夠一眼就得到監(jiān)控。

二.?主要場景是什么？能為用戶帶來什么價值？

Dashboard一般通過重要內(nèi)容和核心數(shù)據(jù)來告知用戶：“業(yè)務(wù)整體狀況如何？有哪些關(guān)鍵指標(biāo)？各指標(biāo)的運行情況分別如何？哪些指標(biāo)出現(xiàn)異常？需要用戶做些什么？”。由此可知，Dashboard主要應(yīng)用于監(jiān)控、分析和概覽三大場景。

△ ?Dashboard三大主要使用場景

首先，在監(jiān)控場景中，Dashboard主要為用戶集中提供便捷的關(guān)鍵指標(biāo)實時監(jiān)測，及時告知異常狀態(tài)，并引導(dǎo)用戶定位問題。

△ ?Dashboard監(jiān)控場景

其次，在分析場景中，Dashboard主要通過數(shù)據(jù)圖表，配合控件進行不同維度的數(shù)據(jù)分析。例如，用戶可以通過時間篩選控件過濾圖表上的數(shù)據(jù)范圍等。

△ ?Dashboard分析場景

最后，在復(fù)雜業(yè)務(wù)中，Dashboard還用于概覽場景，集中呈現(xiàn)業(yè)務(wù)分散的重點信息，用戶還可以通過提供的入口快速跳轉(zhuǎn)至相關(guān)模塊。

△ ?Dashboard概覽場景

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

在監(jiān)控、分析和概覽主要場景中，總結(jié)提煉了Dashboard能為用戶帶來的直接價值主要如下幾點：

• 監(jiān)控告警，并引導(dǎo)用戶定位問題
• 深入分析數(shù)據(jù)，獲知細節(jié)信息
• 快速獲取業(yè)務(wù)整體重點信息，管理資源

三.?目標(biāo)用戶分析

在對Dashboard有基礎(chǔ)了解后并開始設(shè)計Dashboard，首先需要清楚：Dashboard的目標(biāo)用戶是誰？他們在什么環(huán)境中會使用到Dashboard？做什么事情等？考慮這些問題，有助于確定Dashboard的大致輪廓。例如，在分析用戶時獲知運維人員在工作時間需要監(jiān)視機器健康狀況，設(shè)計時可考慮在Dashboard中呈現(xiàn)正常、異常機器數(shù)，并引導(dǎo)用戶定位到出現(xiàn)異常的機器，排查問題。
在做目標(biāo)用戶分析時，可以從用戶、場景和任務(wù)這三方面考慮，以了解用戶特點和目標(biāo)等相關(guān)信息。

△ ? 用戶、場景和任務(wù)

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

四.?選定Dashboard內(nèi)容

對目標(biāo)用戶、場景和任務(wù)進行分析后，接著需要考慮在Dashboard中呈現(xiàn)什么內(nèi)容幫助用戶完成不同場景下的任務(wù)。在選定內(nèi)容前，首先需要明確Dashboard的主題是什么？然后，再圍繞主題，考慮該呈現(xiàn)哪些內(nèi)容？

1. 明確主題

Dashboard的主題是什么？即通過Dashboard，要幫助用戶完成什么事情。

明確Dashboard的主題時，需要充分考慮目標(biāo)用戶的需求。例如，運維人員需要Dashboard能夠幫助他“高效、精確地發(fā)現(xiàn)、定位問題，確保業(yè)務(wù)正常運行”，而財務(wù)人員則需要在Dashboard了解到“賬戶各個季度收支情況”等。明確主題后，選定內(nèi)容時就可以緊緊圍繞主題，考慮呈現(xiàn)能夠幫助用戶的信息，規(guī)避雜亂、無效的數(shù)據(jù)。

△ ?電腦管家Dashboard小浮窗

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

2. 選定和編輯內(nèi)容

• 選定內(nèi)容

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

• 緊扣主題

內(nèi)容緊扣主題，要很清楚Dashboard呈現(xiàn)的內(nèi)容能幫助用戶完成什么事情。避免呈現(xiàn)的內(nèi)容太多太雜，反而讓用戶不容易理解。當(dāng)然，無可避免會呈現(xiàn)一些輔助內(nèi)容，一種有效的處理方法就是將這些內(nèi)容放在頁面底部，確保關(guān)鍵、有用的信息放在首屏。

• 引導(dǎo)行動

在考慮所呈現(xiàn)的內(nèi)容時，不應(yīng)該只片面考慮“用戶想要知道什么？”，而應(yīng)該進一步考慮“如果用戶知道了這個信息，會用它來做什么？”。這能讓呈現(xiàn)的內(nèi)容更為聚焦、實用，讓用戶抓住重點并采取行動。例如，在Dashboard實時監(jiān)控資源健康狀態(tài)，用標(biāo)紅的數(shù)字表示發(fā)生異常資源數(shù)，強烈引起用戶注意，并通過該數(shù)字跳轉(zhuǎn)至資源列表，篩選出異常機器。

• 統(tǒng)一認知

內(nèi)容應(yīng)符合用戶認知，易獲取且真實可信。如指標(biāo)命名、數(shù)據(jù)統(tǒng)計規(guī)則等，要與行業(yè)標(biāo)準(zhǔn)保持一致。避免使用不易理解的標(biāo)簽、定義或內(nèi)容。

△ ?選定內(nèi)容判斷條件

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

• 編輯內(nèi)容

選定內(nèi)容后，還需要從用戶角度做恰當(dāng)?shù)木庉嬏幚恚庇^、精確地呈現(xiàn)符合用戶需求的內(nèi)容。例如，財務(wù)人員制作每季度的報表，那么提供按“季度”呈現(xiàn)內(nèi)容會更符合用戶需求，方便且高效。
在編輯內(nèi)容時，可以從內(nèi)容的覆蓋范圍、時間跨度、粒度和個性定制等這些方面考慮，讓Dashboard的內(nèi)容更為符合用戶需求。

△ ?內(nèi)容編輯思考細則

五.?Dashboard內(nèi)容結(jié)構(gòu)

在《Information Dashboard Design》一書中指出：“Dashboard內(nèi)容必須合理組織，從而反映信息的本質(zhì)和支持有效且有意義的監(jiān)控；信息不能隨便放置，也不能只是根據(jù)剩余空間來設(shè)定大小；相互關(guān)聯(lián)的項目應(yīng)該放置在臨近的位置；重要的項目版面要大一些，這樣才能比相對次要的信息更加突出；有特定順序的項目，要以一種視覺上被關(guān)注的順序排列。”

合理的信息結(jié)構(gòu)能夠幫助用戶高效閱讀，理解內(nèi)容。所以，當(dāng)Dashboard的內(nèi)容選定后，就需要考慮如何將信息碎片有邏輯地組合在一起，合理呈現(xiàn)和布局，引導(dǎo)用戶理解全局。從更實用的角度來說，內(nèi)容結(jié)構(gòu)能夠成為用戶的導(dǎo)航機制，用戶知道該從哪里開始，接著該看什么。

選擇使用什么結(jié)構(gòu)視內(nèi)容而定。依據(jù)經(jīng)驗，Dashboard內(nèi)容結(jié)構(gòu)主要有三種類型：分類型、關(guān)聯(lián)型和流程型。

分類型

即將有相關(guān)聯(lián)的內(nèi)容進行分組呈現(xiàn)，讓Dashboard內(nèi)容歸類而不雜亂無章。如 Google Cloud Platform 的Dashboard頁面，將內(nèi)容按卡片分為Project info、Billing、Documentation等。同時，卡片與卡片之間也進行了分組，左邊是資源信息，中間是指標(biāo)監(jiān)控，右邊是文檔幫助。

△ Google Platform Dashboard

關(guān)聯(lián)型

內(nèi)容相互之間具有一定的邏輯關(guān)系，如地理位置關(guān)系、數(shù)字包含關(guān)系、對象父子關(guān)系等，這種結(jié)構(gòu)可以讓對象之間的邏輯關(guān)系十分直觀。如騰訊云VPC網(wǎng)絡(luò)拓撲，將資源對象的位置和關(guān)系抽象表示，很直觀的呈現(xiàn)了資源對象之間的相互關(guān)系。

△ 騰訊云VPC網(wǎng)絡(luò)拓撲

流程型

流程型結(jié)構(gòu)的內(nèi)容一般會出現(xiàn)多個環(huán)節(jié)，每個環(huán)節(jié)之間都會有相應(yīng)的內(nèi)容，按照一定的流程逐步細化，深入引導(dǎo)用戶閱讀。符合這種結(jié)構(gòu)，如市場銷售各環(huán)節(jié)流程，像這種垂直的流程型內(nèi)容結(jié)構(gòu)，很容易讓用戶清楚每個環(huán)節(jié)的數(shù)據(jù)變動，定位哪個環(huán)節(jié)出了問題。這種結(jié)構(gòu)有個較為典型的統(tǒng)計模型是：漏斗。

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

六.?功能特性

適當(dāng)考慮為Dashboard提供一些常用功能特性，能夠讓整個頁面擁有較為出色的用戶控制和友好的體驗。

鉆取

鉆取是改變維的層次，變換分析粒度，提供用戶駕馭Dashboard內(nèi)不同層次的內(nèi)容。它包括向上鉆取（roll up）和向下鉆取（drill down）。roll up是在某一維上將低層次的細節(jié)數(shù)據(jù)概括到高層次的匯總數(shù)據(jù)，或者減少維數(shù)。而drill down則相反，它從匯總數(shù)據(jù)深入到細節(jié)數(shù)據(jù)進行觀察或增加新維。

篩選

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

比較

指標(biāo)數(shù)值的對比，能夠并列比較兩個或多個數(shù)據(jù)集。例如折線圖、面積圖等能提供數(shù)據(jù)集對比功能。

警報

根據(jù)預(yù)設(shè)的條件高亮顯示，當(dāng)指標(biāo)超出特定界限時就觸發(fā)報警。

可定制

允許用戶根據(jù)需求定制不同的內(nèi)容。

導(dǎo)出

為用戶提供Dashboard中導(dǎo)出數(shù)據(jù)的功能。

保存

當(dāng)用戶定制的情況越來越多時， 提供保存定制的功能就越發(fā)顯得重要。

總結(jié)

本文開篇先陳述什么是Dashboard，其主要應(yīng)用場景和用戶價值是什么。然后，再從用戶分析、內(nèi)容、結(jié)構(gòu)和功能等闡述設(shè)計Dashboard過程中需要著重考慮的。在《Dashboard設(shè)計思考》的下一篇，將分析如何設(shè)計清晰、簡潔的頁面，將前期分析整理的內(nèi)容和功能更好的呈現(xiàn)給用戶。控。即Dashboard集中呈現(xiàn)重要信息，便于用戶快速瀏覽獲知全局。

「超實用的設(shè)計原則大全」

1. 用戶登錄：掌握這9個設(shè)計原則，快速提高用戶登錄的體驗
2. 無線表單：專業(yè)干貨！提高無線端表單可用性的7個設(shè)計原則
3. 動效設(shè)計：讓動效不止于好看！移動APP的7種動效設(shè)計和9條設(shè)計原則

原文地址：騰訊ISUX

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com