起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識5個步驟，教你完成優秀的Dashboard設計
文章中給出了設計優秀Dashboard的5個步驟以及詳細的示例。希望對你有所幫助。
數據可視化一直是設計師的一項關鍵技能。我們將一些簡單的事情可視化，比如本周我們在咖啡上花了多少錢，或者這個月我們離減肥目標有多近。像這樣的簡單可視化可以作為圖表插入到其他屏幕中，但是當數據更加復雜時，顯示內容通常會變成Dashboard。(但也許更重要的是)究竟什么是Dashboard？
我聽過一些有趣的答案……從“任何帶有圖表的頁面”到“用戶構建自己的UI的方法”的所有內容。這些都有些極端，但是互聯網上有一些好的定義(以及一些糟糕的定義)。
我個人最喜歡的是斯蒂芬·福（Stephen Few）的說法：
“Dashboard是實現一個或多個目標所需的最重要信息的可視化顯示；整合并排列在同一屏幕上，這樣信息就可以一目了然?！?/p>
為什么要這么定義？因為，它不僅抓住了Dashboard具有數據的可視化顯示的特點，而且該視覺顯示還具有明確的目標或價值。
我看到的最常見的錯誤是，設計者們建立Dashboard的愿望是從做一個看起來不錯并鋪滿頁面的東西開始，然后再嘗試將功能放上去。從Dribbble上漂亮的Dashboard開始，希望你能獲得一個有效的界面，這是災難的秘訣(一個美麗的災難，但仍然是一個災難)。
為什么Dashboard很重要？
我們使用Dashboard幫助用戶快速評估狀態，并確定在響應時需要做什么。Dashboard的可用性實際上可以說是服務可用性的小幅度下降和影響業務底線的全面中斷之間的區別。
在過去的四年中，我一直是VMware操作軟件的設計負責人，在那里我為多個產品設定了設計方向，包括vRealize操作管理器, vRealize Log Insight和Wavefront by VMware 。每一個都包含某種自定義Dashboard功能。我團隊中的設計人員創建了Dashboard，幫助用戶克服大規模且經常是無序的數據的復雜性。
這些產品被軟件開發人員和IT專業人員用來管理和操作世界上一些最重要的應用程序，對這些用戶來說，分析數據所需的時間不僅重要，而且至關重要。
優秀Dashboard設計的5個步驟
雖然我確信有許多不同的方法，但以下步驟反映了我通常如何處理已確定需要Dashboard的項目。當我在VMware設計Dashboard時，我發現這些步驟很有幫助，我希望其他人也覺得它們有用。
1. 明確用戶及其目標
作為設計師，我們知道我們不是為自己設計軟件，而是為用戶設計軟件。就像應用程序的其他任何部分一樣，Dashboard應專注于滿足用戶需求。這意味著我們首先需要確定Dashboard是給誰用的。
打個比方，汽車的儀表盤是圍繞駕駛員所需的東西構建的。如果你是為乘客而構建的話，則發動機RPM之類的東西可能并不重要，但是無線廣播在放哪個電臺就變得至關重要。這是對特定用戶來說重要的事情。
其次，我們需要了解他們在這種情況下的目的是什么。他們是駕駛員試圖把車從A點開到B點，還是乘客試圖為公路旅行選擇合適的歌曲？每個設計決策都是一個選擇，因此了解主要目標用戶的意圖將有助于你做出選擇。
2. 選擇正確的Dashboard類型
到目前為止，我一直在泛泛地提到Dashboard，但實際上Dashboard有許多形狀和大小。根據我的經驗，我發現將它們分為三種主要類型是有用的：
- 監控儀表板
- 交互式分析儀表板
- 導航儀表板
（1）監控儀表板
監控儀表板是最傳統的Dashboard風格。當第一次被要求定義一輛汽車的儀表盤時，它們很可能是大多數人所想的。這是監視儀表板的一個很好的例子，因為它顯示了用戶應該經?？吹降男畔?，并且一目了然。
它還假定由信息引起的潛在行動是在別處采取的。例如，如果顯示已超速，你可能想要松開油門，如果超速太快，則可能需要踩剎車。
我們在VMware軟件中看到的一個常見示例是在操作中心的大型共享監視器上顯示的Dashboard。許多人可能會看到Dashboard，但沒有人直接與之交互。它顯示的是在其他地方執行的操作。
VMware的Wavefront——單值統計儀表板
（2）交互式分析儀表板
近年來，交互式分析儀表板變得越來越普遍，它們的目的不是立即顯示大量信息，而是以數據可視化的形式向用戶提供工具，以便它們可以顯示所需的信息。這通常是通過普通過濾器和選擇器將圖表連接在一起來實現的。
VReficationOperationManager——對VM分析儀表板進行故障排除
（3）導航儀表板
中心輻射型導航模型中，導航儀表板充當一種“目錄”，其中，中心頁面指向詳細信息頁面。不同之處在于，每個統計數據都代表了一個更廣泛的元素。該值區分了項目，這使用戶清楚地了解與哪些交互可獲得更多信息。
VMware的Wavefront——儀表板到儀表板導航
這些定義不是固定的或孤立的Dashboard類型。通常，Dashboard具有多個特征。我看到的一種常見模式是，在監視器上和團隊之間共享一個監視儀表板。
監視的項目具有導航性，并允許團隊成員向下鉆取到單獨的Dashboard，其中包含有關該項目的更多詳細信息。在這種情況下，它既是監視儀表板又是導航儀表板。
3. 以正確的方式顯示正確的數據
（1）數據粒度
一旦你了解了用戶、他們的目的和Dashboard類型，就可以將該信息轉換為一個或多個簡單問題。用戶可以在其中找到Dashboard的真實價值。如果這個問題太寬泛，你可能無法回答，或者你需要大量的數據來準確地回答它。
另一方面，如果問題太窄，不太可能解決用戶較大的目標。找到正確的問題來回答是Dashboard設計的藝術，和大多數設計工作一樣，它實際上是從研究開始的。
找到正確的問題可能就像調查一些有代表性的用戶一樣簡單，或者可能需要一些更深入的對話和語境詢問。只有當你知道用戶頭腦中的問題時，你才會知道你是否確實有數據可以正確回答它。
為了更好地理解用戶目標，我們鼓勵設計師講述用戶的故事并想象這個故事是如何在軟件中流轉的。故事的一部分可能會看到用戶需要回答問題。如果產品能夠幫助回答問題，Dashboard可能是最好的機制，但是產品必須有正確的數據才能使答案有用。
如果你發現確實有數據，那就太好了！如果沒有，那么你需要查看是否可以獲取數據（有時通過合并已有數據），或者是否可以仔細地將問題更改為可用數據可以回答的問題。
這一階段的典型缺陷是，讓你所掌握的數據決定你正在創建的Dashboard的內容。一個API公開20個唯一指標，并不意味著你應該顯示20個圖表。重在用戶，而不是數據！
（2）時間與比較
數據隨時間變化，這就是為什么它很有趣。它發生變化的事實提供了第一類比較，即可視化隨時間而變化。
假設時間變化很有趣，我們需要考慮正確的顯示機制：它與時間有何關系？當前狀態是唯一重要的嗎？那么，也許單一指標或量表是顯示它的正確方法。
過去的趨勢重要嗎？你可以考慮將該單一統計信息與一條簡單的火花線配對以顯示趨勢?；鸹ň€是否足夠保真，還是需要在準確的時間查看準確的值？如果是這樣，則最好使用帶有清晰軸標簽的細線圖。
從單一指標到火花線到線圖的進展
但是時間不是唯一的比較類型。有時，將多個來源進行相互比較同樣重要。如果是這樣，那么正確的答案可能就像兩個并排的單一統計數據一樣簡單。
但是，如果有兩個以上的來源怎么辦？使用條形圖或柱狀圖將值彼此比較是否重要，或更重要的是使用餅圖將值與整個值進行比較。而且，如果與其他來源進行比較并隨時間進行比較兩者都很重要怎么辦？
在這種情況下，你可能會發現自己轉向堆積面積圖。
從條形圖到餅圖到堆積面積圖的進展
4. 按部就班地組織起來
通常，你會使用多個顯示來回答多個問題，那么如何將它們布置在Dashboard上？回到你確定的問題，它們通常可以形成一個層次結構。
想象一下，你正在為私人教練設計一個Dashboard，以跟蹤其客戶的進度。第一個問題可能是了解客戶是否達到了每月目標。如果答案為“否”，那么培訓師將想知道這是朝錯誤方向的平穩發展，還是反映客戶“作弊日”趨勢的“突飛猛進”。
通過組織問題，你可以在邏輯上對小部件進行分組，以最好地回答問題。
在排列圖表時，請考慮：
- 目標用戶的自然閱讀方向（從左到右還是從右到左？）
- 顯示尺寸（4K顯示器還是微小的iPhone6SE？如果兩者兼而有之，請準備好響應性的答案。）
- 時間對齊（顯示相同時間范圍的多個圖表，如果它們是垂直疊加的，則更容易關聯。）
因此，現在你有了一個Dashboard，其中充滿了按邏輯順序排列的圖表和小部件，它們回答了所有你預見到的用戶提出的問題，但是將他們適配在單個屏幕上很難，并且滾動會破壞儀表板的一覽無余。該怎么辦？
同樣，這也是問題結構起作用之處。如果你已經確定了主要問題，那么首先確定回答它所需的內容。這就是你的Dashboard默認顯示的內容。前端開發人員不被要求在最初就渲染盡可能多的圖表，他們也會很樂意。
對于這些次要問題和其他問題，你可以通過默認情況下將它們折疊在Dashboard上，或者將它們移到它們自己單獨的可導航儀表板上，從而逐步公開它們。如果使用輔助Dashboard方法，請確保導航清晰并可訪問。
開發人員通常會決定這是否是一種選擇，但要認識到每一種選擇的權衡：
- 導航似乎很容易，但是維持上下文往往很困難。
- 折疊看起來也很容易，但是頁面超載可能會給用戶和呈現Dashboard的系統帶來壓力。
在極少數情況下，你可能會發現你所倡導的用戶只有一個問題，而你只需要顯示該答案即可。如果是這樣，則此部分并不是真正必要的，但是我可以算一下我曾經看到過的實例的數量。
5. 加強造型設計
現在，你有了一個或多個Dashboard，其中充滿了圖表顯示，用戶可以解釋這些圖表來回答重要的問題。
有些人可能會認為這樣做就夠了，也是可行的，但作為設計師，我們不僅要努力讓用戶能夠解讀數據，而且他們還可以輕松甚至愉快地完成這些工作。顏色和字體的使用可以將Dashboard從功能擴展到真正可用。
（1）顏色
以前，曾考慮過進行比較，跨圖表進行比較最常見的事情之一就是數據源。重要的是，多個圖表（甚至不同圖表類型）上的數據應以相同的方式表示相同的來源，尤其是在顏色方面。
此外，請注意顏色是如何被解讀的。例如，許多用戶會將紅色圖表理解為錯誤，或將綠色圖表理解為正常和健康。紅色和綠色也提出了另一個考慮因素：可訪問性。紅綠色盲（全色盲和全色弱）影響多達7%的男性人口，因此使用模擬工具來驗證你的圖表是否可區分非常重要。
以上相同的圖表使用色覺模擬器后…哦豁。
（2）字體
為界面選擇合適的字體本身就夠困難的了，但圖表卻提出了自己的特定挑戰。圖表顯示的文字比大多數正文要小得多，因此找到一個小尺寸的可讀字體是關鍵。
此外，圖表的字體用于數字值的頻率遠高于界面的其他部分，因此請仔細考慮如何呈現數字。例如，許多字體給0加上斜杠或點，以與字母“ O”區分開，但是如果字體較小，它們可能看起來會像數字“ 8”。
數據可視化對于設計人員來說是一個關鍵挑戰，設計優秀Dashboard的能力是一個有價值的工具。與任何工藝一樣，重要的是不僅要有正確的工具，而且要知道如何有效地使用它。雖然制作一個漂亮的圖表需要特殊的技能，但要想制作一個解決用戶問題的Dashboard，并能讓用戶以愉快的方式進行，則需要思考和計劃。
原文作者：Josh Johnson，VMware的操作軟件設計主管
原文標題：5 Steps to Effective Dashboard Design
原文鏈接：https://medium.com/vmwaredesign/5-steps-to-effective-dashboard-design-c1813455e159
本文由 @海外設計參考 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
