編輯導語：Dashboard即儀表盤，它可以為用戶提供一個相對全局的概覽，可以讓數據可視化呈現。那么，在Dashboard設計中，應該遵循哪些原則和步驟呢？本篇文章里，作者總結了Dashboard設計的5個有效步驟，一起來看一下。

數據可視化一直是設計師的一項關鍵技能。我們將一些簡單的事情視覺化，比如本周我們在咖啡上花了多少錢，或者這個月我們離減肥目標有多近。像這樣的簡單可視化可以作為圖表插入到其他屏幕中，但是當數據更加復雜時，顯示內容通常會變成Dashboard。（但也許更重要的是）究竟什么是Dashboard？

我聽過一些有趣的答案，比如“任何帶有圖表的頁面”，或者“用戶構建自己UI的方法”，這些都有點極端，我個人最喜歡的是斯蒂芬·福（Stephen Few）的說法：

Dashboard（即儀表板），是實現一個或多個目標所需的最重要信息的可視化顯示，它們整合并排列在同一屏幕上，這樣信息就可以一目了然。

這個定義不僅抓住了Dashboard具有數據的可視化顯示的特點，而且該視覺顯示還具有明確的目標或價值。我看到的最常見的錯誤是，設計者們建立Dashboard的愿望是從做一個看起來不錯并鋪滿頁面的東西開始，然后再嘗試將功能放上去。

一、為什么Dashboard很重要？

Dashboard的功能是幫助用戶快速評估狀態，并確定在響應時需要做什么。Dashboard的可用性實際上可以說是服務可用性的小幅度下降和影響業務底線的全面中斷之間的區別。

在過去的四年中，我一直是VMware操作軟件的設計負責人，在那里我為多個產品設定了設計方向，包括vRealize操作管理器，vRealize Log Insight?和?Wavefront by VMware?。每一個都包含某種自定義儀表板功能。我團隊中的設計人員創建了Dashboard，幫助用戶克服大規模且經常是無序數據的復雜性。

這些產品被軟件開發人員和IT專業人員用來管理和操作世界上一些最重要的應用程序，對這些用戶來說，分析數據所花的時間至關重要。

二、有效設計Dashboard的5個步驟

雖然我確信有許多不同的方法，但以下步驟反映了我通常如何處理已明確需要Dashboard的項目。當我在VMware設計Dashboard時，我發現這些步驟很有幫助，我希望其他人也覺得它們有用。

1. 明確用戶及其目標

作為設計師，我們知道我們不是為自己設計軟件，而是為用戶設計軟件。 就像應用程序的其他部分一樣，Dashboard應專注于滿足用戶需求。 這意味著我們首先需要確定Dashboard是給誰用的。

打個比方，汽車的儀表板是圍繞駕駛員所需的東西構建的。 如果是為乘客而建的話，則發動機RPM之類的東西可能并不重要，但是無線廣播在放哪個電臺就變得至關重要。這是對特定用戶來說重要的事情。

其次，我們需要了解他們在這種情況下的目的是什么。 是駕駛員試圖把車從A點開到B點，還是乘客試圖為公路旅行選擇合適的歌曲？每個設計決策都是一個選擇，因此了解主要目標用戶的意圖將有助于您做出選擇。

Photo courtesy of Createria via Unsplash

2. 選擇正確的Dashboard類型

到目前為止，我一直在泛泛地提到Dashboard，但實際上Dashboard有許多形狀和大小。根據我的經驗，我將它們分為三種主要類型：

1. 監控儀表板；
2. 交互式分析儀表板；
3. 導航儀表板。

1）監控儀表板

監控儀表板是最傳統的儀表板風格。當被要求定義一輛汽車的儀表盤時，這很可能是大多數人最開始想到的，這是監視儀表板的好例子，它顯示了用戶應該經?？吹降男畔?，并且一目了然。

它還假定由信息引起的潛在行動是在別處采取的。例如，如果顯示已超速，您可能想要松開油門，如果超速太快，則可能需要踩剎車。

我們在VMware軟件中看到的常見示例是在操作中心的大型共享監視器上顯示的Dashboard。 人們可以看到Dashboard，但沒有人直接與之交互。它顯示的是在其他地方執行的操作。

VMware的Wavefront-單值統計儀表板

2）交互式分析儀表板

近年來，交互式分析儀表板變得越來越普遍，它們的作用不是立即顯示大量信息，而是以數據可視化的形式向用戶提供工具，展示具體所需的信息。這通常是通過普通過濾器和選擇器將圖表連接在一起來實現的。

VReficationOperationManager–對VM分析儀表板進行故障排除

3）導航儀表板

中心輻射型導航模型中，導航儀表板充當一種“目錄”，其中，中心頁面指向詳細信息頁面。不同之處在于，每一個統計數據都代表著一些更廣泛的信息元素，用戶可以清楚地了解到，與哪些內容進行交互可獲得更多信息。

VMware的Wavefront-儀表板到儀表板導航

這些分類不是固定的或孤立的儀表板類型。通常，儀表板具有多個特征。我看到的一種常見模式是，在監視器上和團隊之間共享一個監視儀表板。 監視的項目具有導航性，并允許團隊成員向下鉆取到單獨的Dashboard，其中包含有關該項目的更多詳細信息。在這種情況下，它既是監視儀表板又是導航儀表板。

3. 以正確的方式顯示正確的數據

1）數據粒度

一旦您了解了用戶、他們的目的和Dashboard類型，就可以將這些信息轉換為一個或多個簡單問題，用戶可以在其中找到Dashboard的真實價值。

注意簡單問題的范圍，如果問題太寬泛，您可能會無法回答，或者需要大量的數據來準確地回答它；如果問題太窄，不太可能解決用戶較大的目標。找到正確的問題來回答是Dashboard設計的藝術。

和大多數設計工作一樣，它實際上是從研究開始的。找到正確的問題可能就像調查一些有代表性的用戶一樣簡單，或者可能需要一些更深入的對話和語境詢問。只有當您知道用戶頭腦中的問題時，您才會知道您是否確實有數據可以正確地回答它。

為了更好地理解用戶目標，我們鼓勵設計師講述用戶的故事并想象這個故事是如何在軟件中流轉的，其中就可能會找到用戶需要回答的問題。如果產品能夠幫助回答問題，儀表板可能是最好的機制，但是產品必須有正確的數據才能使答案有用。

如果您發現確實有數據，那就太好了！ 如果沒有，那么您需要查看是否可以獲取數據（有時也可通過合并已有數據來得到目標數據），或者是否可以仔細地將問題更改為可用數據能夠回答的問題。

這一階段的典型陷阱是，被所掌握的數據左右了正在創建的Dashboard內容。一個API公開了20個獨特指標，并不意味著應該顯示20個圖表。 重在用戶，而不是數據！

2）時間與比較

數據會隨時間變化，這就是為什么它很有趣。 它發生變化的事實提供了第一類比較，即可視化隨時間而變化。

假設時間變化很有趣，我們需要考慮正確的顯示機制：

它與時間有何關系？ 當前狀態是唯一重要的嗎？ 如果是，那也許單一指標或量表是顯示它的正確方法。

過去的趨勢重要嗎？ 如果重要，那您可以考慮將該單一統計信息與一條簡單的火花線配對以顯示趨勢。

火花線是否足夠保真，還是需要在準確的時間查看準確的值？ 如果是這樣，則最好使用帶有清晰軸標簽的折線圖。

從單一指標到火花線到折線圖

但是時間并不是唯一的比較基準。有時，將多個來源相互比較同樣很有意義，正確的答案可能就像兩個并排的單一統計數據一樣簡單。

如果有兩個以上的來源，可使用條形圖或柱狀圖將值彼此比較，或是使用餅圖將單個值與總值進行比較。如果時間和多來源比較這兩者都很重要，那使用堆積面積圖是不錯的選擇。

從條形圖到餅圖到堆積面積圖

4. 按部就班地組織起來

通常，我們會使用多個圖表來回答多個問題，那么如何將它們排布在Dashboard上呢？

回到已經確定的問題，它們通?？梢孕纬梢粋€層次結構。

想象一下，您正在為私人教練設計一個Dashboard，用來跟蹤其客戶的健身進度。第一個問題可能是了解客戶是否達到了每月目標。如果答案為“否”，那么教練會想要知道這是由于鍛煉的方向錯了，還是客戶的”Cheating Day”趨勢在“突飛猛進”。 通過組織問題，您可以從邏輯上對小部件進行分組，以便最好地回答問題。

在排列圖表時，請考慮：

• 目標用戶的自然閱讀方向（從左到右還是從右到左？）
• 顯示尺寸（4K顯示器還是微小的iPhone 6 SE？如果兩者兼而有之，請準備好響應性的答案。）
• 時間對齊（顯示相同時間范圍的多個圖表，如果它們是垂直疊加的，則更容易關聯。）

現在您有了一個Dashboard，其中充滿了按邏輯順序排列的圖表和小部件，它們回答了所有您預見到的用戶提出的問題，但是將他們適配在單個屏幕上很難，并且滾動會破壞Dashboard的一覽無余。該怎么辦？

同樣，這也是問題結構起作用之處。如果您已經確定了主要問題，那么首先展示回答它所需的內容，這就是你的Dashboard默認顯示的內容。不在頁面加載最初就渲染大量的圖表，前端開發人員也會很樂意。

對于次要問題和其他問題，您可以默認情況下將它們折疊，或者將它們移到單獨的可導航儀表板上，從而逐步顯示它們。在使用輔助儀表板時，請確保導航清晰并可訪問。做決策時需要認識到每一種選擇的利弊：

• 導航似乎很容易，但是維持上下文往往很困難。
• 折疊看起來也很容易，但是頁面超載可能會給用戶和呈現Dashboard的系統帶來壓力。

5. 加強樣式設計

現在，您有了一個或多個Dashboard，其中充滿了圖表，用戶可以通過這些圖表來回答重要的問題。有些人可能會認為這樣做就夠了，但作為設計師，我們不僅要努力讓用戶能夠解讀數據，而且還要讓他們可以輕松甚至愉快地完成這些工作。顏色和字體的使用可以讓Dashboard兼顧功能和可用性。

1）顏色

跨圖表進行比較最常見的元素之一就是數據源。 重要的是，多個圖表（甚至不同圖表類型）上的數據應以相同的方式表示相同的來源，尤其是在顏色方面。

此外，請注意顏色本身的象征意義。例如，許多用戶會將紅色圖表理解為錯誤，或將綠色圖表理解為正常和健康。紅色和綠色也提出了另一個需考慮的因素：可訪問性。紅綠色盲（全色盲和全色弱）影響多達7%的男性人口，因此使用模擬工具來驗證您的圖表是否可區分非常重要。

以上相同的圖表使用色覺模擬器后…哦豁…

2）字體

為界面選擇合適的字體，這本身就夠困難的了，但圖表卻提出了自己的特定挑戰。圖表顯示的文字比大多數正文要小得多，因此找到一個小尺寸的可讀字體是關鍵。

此外，圖表的字體用于數字值的頻率遠高于界面的其他部分，因此請仔細考慮如何呈現數字。例如，許多字體給0加上斜杠或點，用以與字母“O”區分開，但是如果字體較小，它們可能看起來會像數字“8”。

數據可視化對于設計人員來說是一個關鍵挑戰，有效設計Dashboard的能力是一項有價值的工具。與任何工藝一樣，重要的是不僅要有正確的工具，而且要知道如何有效地運用它。

制作一個漂亮的圖表需要專業的技能，但要想制作一個解決用戶問題的Dashboard，并能讓用戶以愉快的方式使用，則需要思考和規劃。

原文鏈接：https://medium.com/vmwaredesign/5-steps-to-effective-dashboard-design-c1813455e159

本文由 @Hitomi 翻譯發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自 Pexels，基于CC0協議