編輯導讀：儀表盤是一個產品的基礎功能，利用數據可視化的方式，將高度復雜的數據轉化為有助于解決用戶業(yè)務問題的關鍵要素。那么，如何打造一個高效的儀表盤呢？本文將從四個維度展開分析，與你分享。

數據可視化設計就是以數據表現(xiàn)的方式來幫助用戶規(guī)避風險并做出良好的業(yè)務決策。儀表盤則利用數據可視化的方式，將高度復雜的數據轉化為有助于解決用戶業(yè)務問題的關鍵要素。

儀表盤需要滿足兩點要求：

1. 數據應以最直觀的形式展示，用戶可以馬上采取行動。
2. 用戶可以靈活操作，根據數據能夠預判接下來可能發(fā)生的事情。

因此不管用戶花費時間是長是短，都能在儀表板查看到客觀有效的信息。

以下為本文框架：

一、儀表板的作用

儀表盤能促使用戶注意危險信息并采取相應的措施。

儀表盤可以顯示數據類型、趨勢和異常數據。

儀表盤可以使用戶預測可能發(fā)生的事情。

儀表板可以把兩個不同的圖表連接在一起。

儀表盤可以分析數據的結構和重要信息。

儀表盤可以追逐信息路徑、預測信息軌跡。

二、設計前：需求分析

1. 確定目標用戶

不論什么設計，第一步都應確定目標用戶。在儀表板設計中，了解用戶最好的方法是映射用戶的查詢路徑，即用戶實現(xiàn)其目標的所有需求的結構化路徑?？梢酝ㄟ^確定用戶目標和業(yè)務問題來進行規(guī)劃。

1）確定目標：首先列出主要業(yè)務目標。

如，查詢銷售業(yè)績等。

2）列出問題：列出用戶可能會回答的所有問題。

如：“本季度還有多少銷售業(yè)績未完成？”“我是否有足夠的渠道來達到業(yè)績？”。列出問題后，將問題按照不同的屬性進行分類，如可以分為業(yè)績預測、團隊績效、考核基準等。

3）匯總信息：信息并不是越詳細越好。

詳細信息越多，儀表盤顯示就越亂。無需一次將全部信息顯示在儀表盤上。這里需要仔細考慮真正重要的內容，確保儀表板有效且易于使用。

4）定義指標：選擇正確的指標來確定用戶的業(yè)務狀況。

如，負責跟蹤團隊業(yè)績的銷售經理希望能夠跟蹤每個銷售的指標，如銷售配額，贏利能力，交易規(guī)模等等。一旦發(fā)現(xiàn)數值異常，他們可以采取措施分配新的機會給代表，或者指導他們提升指標。

5）優(yōu)先排序：最后確定這些指標的優(yōu)先級。

優(yōu)先級排序可以幫助用戶建立數據的結構框架和層次關系，從而避免過多的信息干擾用戶。

了解目標用戶和用戶使用儀表盤的方式是一個好的開始。通過了解什么對用戶重要、各項數據對用戶意味著什么以及數據如何影響用戶的決策可以獲得重要的背景信息。

在設計前，不妨先嘗試提出幾個關鍵問題：

• 用戶需要顯示哪些信息？
• 用戶對什么感興趣？
• 用戶的痛點是什么？
• 用戶的目標是什么？

這些問題可以反映用戶的需求及目標，從而帶來更好的儀表板體驗。

2. 定義儀表盤的用途

儀表盤主要有兩種類型：操作儀表盤和分析儀表盤。選擇要構建哪種儀表盤取決于需要解決的問題類型，以及是否應該幫助用戶理解和管理既定指標、探索新的行動方案。

操作儀表盤的目的是提供當天信息的全面快照，可以對團隊的預定目標進行跟蹤。

分析儀表盤是一種工具，可以幫助用戶分析多個變量中的大量歷史數據，從而研究趨勢、預測結果、洞察細節(jié)，幫助決策者了解公司關鍵指標，以更好地制定未來的決策。

3. 梳理信息層級

對于一個完整的應用系統(tǒng)，了解儀表板在系統(tǒng)視圖中的作用很重要，我們需要知道用戶在儀表板上可能做什么，常見的儀表盤組件有以下幾個：

• 導航或常用功能/頁面的快捷按鈕。
• 對于正在發(fā)生的事情的信息可視化（如指標數據）。
• 所有需要用戶立即關注的內容（如警報、系統(tǒng)更新、警告）。

設計專家 Lisa Battle在2016年的UXPA國際會議上發(fā)表了題為“為 SaaS和企業(yè)應用設計卓越的儀表盤”的演講，其中儀表盤可以包含10個元素：警報、待辦事項、統(tǒng)計信息、當前狀態(tài)、搜索篩選器、任務操作、社交組件、活動、公告和推送內容。

記錄了儀表盤組件列表之后，需要與產品經理等相關人員一起創(chuàng)建不同信息的層次關系。層級層級可以基于以下問題構建：

• 用戶最關心什么信息？
• 用戶希望執(zhí)行哪些操作？
• 假如有不同類型的用戶，他們的需求又如何呢？他們希望看到什么？

下面的圖表是信息層次結構圖的一個例子，可以為后面繪制低保真線框圖奠定基礎。

三、設計中：視覺與交互

1. 交互設計

1）線框、布局及數據可視化

當充分理解了關鍵內容之后，下一步就是處理布局，并開始繪制線框圖。最具挑戰(zhàn)性的步驟莫過于從零開始搭建框架了。

布局：

儀表盤的布局可以像報紙或文章一樣，具有概要、內容和結論。

• 概要：界面頂部顯示標題，概要顯示最重要的信息并匯總儀表盤的主要內容。
• 內容：儀表板主體，通過可視化形式提供有關概要的更多詳細信息。
• 結論：頁面的最后部分是詳細信息和用于查找詳細信息的操作列表。

根據瀏覽順序儀表盤通常分為F布局、Z布局和并列布局。這些形式可以先讓用戶注意到摘要看板，然后再注意可視化數據，最后關注詳細的操作列表。

F布局將概要放在左側中。隨后的詳情可視化數據位于右側，用于提供更多詳細信息。

Z布局遵循自上而下的閱讀模式。概要信息位于界面頂部。相關的可視化數據位于概要下方，并占據了內容區(qū)域的整個寬度。

并排布局用于比較兩項指標。這種模式允許用戶從左到右掃描，反之亦然，方便比較信息。

版面形式多種多樣，有時很難說哪種版面更好。 曾經有學者提到過設計儀表盤的原則：只要瀏覽儀表盤一秒鐘，用戶就能很快地了解到一個正在發(fā)生的故事，用戶可以大致明白他們關注的事情?！鞍l(fā)生了什么事？自從最后一次登錄后有什么變化？我需要馬上處理一些事情嗎？要采取什么行動嗎？”理論上，用戶不需要向下滾動頁面就能得到這些問題的答案。也就是說，我們需要把最重要的信息放在儀表板的頂部。

當用戶對系統(tǒng)有了良好的理解之后，他們可能會想要更深入地研究數據或者導航到產品的其他部分。這時候可以考慮一下提供給用戶其他更深層次的數據。

數據可視化：

在回答“你的故事是什么？”之后，就需要找出如何講述故事了。這需要用到儀表盤的重要組成部分——圖表。下圖的圖表選擇器可以幫助決定哪個圖表更適合目前的數據。具體的圖表設計將在視覺設計部分說明。

克利夫蘭的圖形感知級別可以幫助調整并選擇合適的圖形屬性，確保有效的傳達信息。

儀表盤設計的一個挑戰(zhàn)是信息超載。信息超載有兩種類型：數據超載和非數據超載。信息超載通常是由于缺乏重點和優(yōu)先次序所致。通常需求方想把大量數據集、功能或快捷操作放到儀表盤上，過量信息會使儀表盤變的很長，這時候就需要設計師做好決策。假如發(fā)現(xiàn)信息太多可以重新回到上一步，重新梳理信息層次。

2）交互路徑與交互模式

交互路徑：

高效的儀表盤結構主要基于兩個因素：其一是良好的可視化能力；其二是在兩個故事之間導航的方式，即，交互路徑。

有的用戶旅程是線性的。

有的是分層的，其結構更復雜，有許多分支和導航路徑。

通常儀表盤需要經歷多個分支交互路徑和圖表交互。為了將信息分解為更易于管理的模塊，復雜的儀表板還會有過濾、縮放、突出顯示、導出值等交互。

交互模式：

常見的交互模式有關鍵指標下鉆模式、詳情說明模式、多圖表構成模式。

關鍵指標下鉆模式：該模式通常為可單擊的圖形，如條形圖和環(huán)形圖。使用數據圖來驅動關鍵指標面板。單擊某個細分數據可以顯示指標的數據詳情。

說明模式：此模式使用關鍵指標面板來驅動儀表盤，并通過數據圖表為關鍵指標提供解釋說明。常見說明形式有指標趨勢和指標細分。

多圖表模式：此模式為一個圖表驅動另一個圖表。用戶可以單擊某個細分數據以查看另一個關聯(lián)數據圖。例如，點擊某個用戶群體（細分）查看用戶群體的瀏覽量（趨勢） 。

2. 視覺設計

1）信息標識

信息標識是一種視覺提示，通過改變或新增界面中的某個元素，來引起用戶注意，告訴用戶該元素所代表的項目已經發(fā)生了變化。用戶能根據標識判斷某個指標是好是壞，激發(fā)好奇心以查看詳細內容。

信息標識通常以圖標的形式呈現(xiàn)，易于識別的圖標是非常有效的反饋方式。字體樣式的變化也可以用作指示標識，如改變字體的粗細、顏色等。動效或其他功能（如，振動）也可以吸引用戶，充當指示標識。

標識一般有如下特征：與界面環(huán)境相關，它們總是與某個元素或內容相關聯(lián)，并且顯示在相關元素附近；有條件的，它們并不總是存在，而是根據某種情況發(fā)生而變化；被動的，它們一般不需要用戶操作，而是作為系統(tǒng)與用戶溝通的工具，提示用戶注意事項。

頻繁使用信息標識會造成界面的混亂，并使用戶分心，因此，在界面中添加標識需謹慎。決定是否適合使用時可以考慮以下問題：這些信息用戶多久使用一次？用戶希望看到該信息嗎？如果沒有提供，用戶會錯過什么嗎？用戶發(fā)現(xiàn)這些信息對系統(tǒng)很重要嗎？

2）圖表

要想講好故事，設計出能反應重要信息的圖表是關鍵。用錯了則會導致混淆，甚至導致基本數據表達錯誤。

如果您曾經設計過儀表板或從事過任何其他需要數據的項目，那么您就會知道這是一項特別復雜的任務。下面將會列出一些選擇正確的圖表類型的簡單方法，以及常見的圖表設計的最佳實踐。

如何選擇正確的圖表類型：

選擇正確的圖表類型取決于顯示的數據類型。通常，圖表分為構成、對比、關系或分布。選擇哪種類型取決于：是否要顯示某件事的組成部分？是否要比較值或顯示一段時間內的差異？是否想更好地理解兩個或多個變量之間的關系？是否要顯示數據的分布？

根據顯示的內容，可以分為以下類型：

餅圖和環(huán)形圖：

餅圖或環(huán)形圖是常用的圖表之一。它們用來顯示整體的某一部分，并且用百分比表示，所有部分之和等于100%。使用餅圖最好的一種情況就是，用戶必須回答“是”或“否”時。

餅圖設計應遵循的原則：

如果類別太多，切勿使用餅形圖，切片太薄將無法經行比較。將標簽控制在8個之內比較合適。

類別的值太相似時不要使用餅圖。在這種情況下，條形圖是更好的選擇。

如果值的總和不等于100％，不要使用餅圖。餅圖細分的總和必須等于100％。

切片應由大到小順時針展示，方便比較。

柱狀圖和條形圖：

柱狀圖和條形圖是比較不同數值、顯示數值隨時間變化的最簡單直接的方法。柱狀圖為垂直條形，條形圖為水平條形。

柱狀圖有三種類型：基礎柱狀圖、分組柱狀圖和堆疊柱狀圖。如果要了解圖表中每個類別的數量、比率和頻率，應選擇基礎柱狀圖；要比較各個類別的數據，應選擇分組柱狀圖；如果要顯示每個類別之間的部分與整體的關系，應選擇堆疊柱狀圖。

柱狀圖設計應遵循的原則：

y軸應從0開始，客觀反映圖表中的值。

標簽較長時，請使用條形圖。

除了日期外，其他類別最好由多到少按順序排序。

在使用堆疊柱狀圖時，應使用不同色調的顏色，以提高閱讀的清晰度。

折線圖：

折線圖顯示了一段時間內數據變化趨勢。圖形的y軸代表一個變量值，x軸通常為時間軸。

折線圖設計應遵循的原則：

避免比較過多數據，超過 8 個其他數據可默認置灰，通過圖例交互進行查看。

不要使用色調相近的顏色，應使用對比度強的顏色。

如果不是對比時間的話，不要使用折線圖。在這種情況下請選擇柱狀圖。

面積圖：

面積圖與折線圖相似，但存在細微差異。它們都可以顯示時間變化的總體趨勢以及整個數據集的連續(xù)性。雖然面積圖與折線圖的功能相同，但是線和軸之間的空隙可以用來表示面積。

面積圖共有三種類型：基礎面積圖，重疊面積圖和堆積面積圖。比較各組之間的值時，可以使用重疊面積圖。跟蹤合計值并且想要了解按組劃分的合計明細時使用堆積面積圖。面積圖能對比每一段線的高度，可以讓我們對每個子集與其它子集的總貢獻有一個大概的了解。

面積圖設計應遵循的原則：

使用重疊的面積圖時，請使用帶透明度的顏色，否則信息會含糊不清。

類別過多時，避免使用面積圖。在這種情況下，請使用折線圖。

小結：

使用餅圖、堆疊柱狀圖或堆積面積圖來呈現(xiàn)整體與部分的關系。

使用基礎柱狀圖或分組柱狀圖來比較不同值的變化差異。

使用折線圖可以顯示一段時間內數據的變化趨勢或數據的連續(xù)性。

需要表示體積時，請使用面積圖而不是折線圖。

3）顏色

顏色是一種信息的表現(xiàn)方式。由于儀表板通常需要大量數據，因此會需要多種顏色。在儀表盤中使用適當的顏色有助于用戶注意到警報并采取所需的措施。但是，使用過多顏色會破壞數據與顏色之間的關系。5個以內的顏色最合適，最多不要超過8個。不同顏色有不同顏色的特定含義，紅色表示危險，綠色表示良好，等等。在定義圖表的調色板時，必須考慮到這一點。

設計顏色信息時，可以考慮以下幾點:

• 信息的價值是否與用戶對顏色的理解相符？
• 哪些信息最需要用戶關注？信息的顏色是否傳達了這種緊迫性？
• 在設計時是否使用了適當的色相或顏色強度？
• 信息涉及正面信息還是負面信息？與用戶對顏色的理解是否相符？
• 顏色是否能幫助用戶有效經行數據比較？

四、設計后：可視化測試

在測試可視化時，需要檢查以下內容：

能理解：可視化傳達了我們想要傳達的功能

可解釋：用戶可以將可視化與正在測試的潛在現(xiàn)象相關聯(lián)

能影響：用戶可以得出結論，并且可以感受到它帶來的情感傾向。

可操作：用戶可以根據需求進行合理操作。

向用戶提問以下五個問題，能有效驗證儀表盤的可用性：

1. 您在這里看到什么？

要想使某件東西易用，就要進行優(yōu)化以減少認知負擔。將復雜的數據簡單呈現(xiàn)是數據可視化的基礎。

可以從 “您在這里看到什么？”之類的開放性問題開始詢問，不要給用戶任何提示，看用戶如何回應。這可以說明吸引用戶注意的是什么，以及他們是否能自己得出的結論。

• 好的情況：他們迅速按優(yōu)先順序說出預期的結論。
• 壞的情況：他們分心于細節(jié)，說出假想、矛盾的答案（如“瀏覽量是200，是今天還是本周？它是綠色的，所以這個數據是好的嗎？”）

提示：如果測試者只是復述他們在界面上看到的內容，例如“我看到一張藍色圖表，上面寫著今天的瀏覽量，然后是綠色圖表，上面寫著訪客數，顏色挺好看的”。那么我們需要換一種方式提問，例如“此界面試圖告訴您什么？”

2. 最好的值是什么？最差的值是什么？

可視化的重點是利用可視化比較數值。所以需要向測試者詢問有關數據的問題。較可靠的一種方式是請他們確定極端情況。（例如“什么時候銷售額最高？什么時候最低？”）

您也可以考慮根據價值判斷（例如“最佳，最差”，而不是“最大，最小”）來表述，以確保他們能夠區(qū)分數量并得出適當的結論。需要注意的是，“好”不一定是所呈現(xiàn)的最高值（例如血糖數）。

• 好的情況：他們應該能夠迅速回答這些問題?？梢栽试S有歧義的數據，但將測試者必須能將數量與標簽相關聯(lián)。
• 壞的情況：歪頭看、用手指追蹤數據。

3. 是什么導致數據變成這樣？現(xiàn)實生活中發(fā)生了什么，影響了您看到的數字？

數據可視化本質上是抽象的。所以會面臨過于抽象的風險。這使用戶很難將數據與現(xiàn)實生活中可能遇到的事情聯(lián)系起來，最終限制了數據的含義。

通過要求人們對潛在現(xiàn)象進行解釋，可以確定他們將數據與自己的生活聯(lián)系起來的難易程度。這可以表明是否需要通過添加上下文來簡化、分解或補充可視化內容。

• 好的情況：測試將數據與個人經歷聯(lián)系起來，可以提供合理的解釋（例如“本周可能對T恤的銷售不利，因為現(xiàn)在是12月”），至少測試者應通過其他數據來解釋信息（例如，點擊餅圖的某個切片來分解數據）。
• 壞的情況：無答案，答案模棱兩可，沒有試著四處尋找上下文線索。

4. 總體而言，這是好事還是壞事？

好的儀表盤，不僅要在理性上說服用戶，還應在情感上得到用戶的共鳴。所以，可視化不僅要強調“這是現(xiàn)在的狀況”還應表現(xiàn)出“現(xiàn)在的狀況很好還是很糟”。

要驗證這一點，只需讓測試者自己判斷即可。（例如“您認為這是好事還是壞事？”）

• 好的情況：至少測試者應該能夠識別“正負情感傾向”，并說出數據呈現(xiàn)的是好是壞。理想情況下，他們可以說出數字差異的大小。
• 壞的情況：猶豫、差錯、冷漠。

5. 下一周/月/年，您有什么不同的方法來改變這些數據？這些信息將如何影響您？

測試“可操作性”的原因有兩個：

1. 要確保可視化可以幫助用戶充分理解數據，并知其將來的操作。這是用戶采取行動的前提。
2. 還要確保數據不是無用的。如果數據無法告知某些決策或行為，則可能無需可視化。

首先，確定幾種情況，在給定A、B和C的情況下，有足夠知識的人會告訴你做X、Y、Z。（例如“溫度計顯示0度需要穿外套”；“體溫計40度要去醫(yī)院）。

其次，請確保測試者具有一定的專業(yè)知識，這一點很重要。即使是客觀有效的可視化，對于那些在專業(yè)領域沒有經驗的用戶來說也是行不通的（例如，交易圖對我來說毫無意義，但這并不意味著它們對交易者無用）。因此，請確保您正在與知道如何處理信息的人員進行測試。

一旦有了場景并合理地通知了測試者，就可以按照可視化表示的方式逐步引導測試人員完成每個場景，并詢問他們將要做什么。他們的回答可能有所不同，但是每個回答都應表明測試者是否想要采取行動。

• 好的情況：測試者可以將想要呈現(xiàn)的場景轉換為特定的操作過程。
• 壞的情況：“我不知道” 。這可能表明 ：a）此人不是專家；b）所提供的數據不足以使他采取行動；c）數據對下一步行動產生不了任何影響。c是需要提防的情況。

設計是迭代的，數據設計也不例外。向幾個測試用戶詢問這五個問題，不斷改善可視化效果，打造真正有效的儀表板設計。

五、結語

寫這篇文章的原因是最近在做一個數據產品的項目，為此查閱了很多資料，探索了很多方法，所以打算把數據設計的整個過程總結起來，形成一個較完整的方法體系。感謝閱讀，下篇文章見~

參考文章

1. https://uxplanet.org/data-heavy-applications-how-to-design-perfect-charts-c0c893fef6de
2. https://uxdesign.cc/https-medium-com-yifei-liu-lets-talk-about-dashboard-design-c63cd1a45b3f
3. https://medium.com/nightingale/ux-in-interactive-dashboard-design-73af3d6dbaae
4. https://uxdesign.cc/crucial-questions-for-user-testing-data-visualizations-297413f7d6ab
5. https://uxdesign.cc/how-to-make-sure-your-audience-understands-your-visualization-90293bd0d1a9
6. https://medium.com/salesforce-ux/transforming-data-to-insights-773d25acd53f
7. https://medium.com/salesforce-ux/designing-for-efficient-b2b-data-visualization-b08548495443

本文由 @LIZ醬 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載

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