文章中給出了設(shè)計(jì)優(yōu)秀Dashboard的5個(gè)步驟以及詳細(xì)的示例。希望對(duì)你有所幫助。

數(shù)據(jù)可視化一直是設(shè)計(jì)師的一項(xiàng)關(guān)鍵技能。我們將一些簡(jiǎn)單的事情可視化，比如本周我們?cè)诳Х壬匣硕嗌馘X，或者這個(gè)月我們離減肥目標(biāo)有多近。像這樣的簡(jiǎn)單可視化可以作為圖表插入到其他屏幕中，但是當(dāng)數(shù)據(jù)更加復(fù)雜時(shí)，顯示內(nèi)容通常會(huì)變成Dashboard。(但也許更重要的是)究竟什么是Dashboard？

我聽過一些有趣的答案……從“任何帶有圖表的頁(yè)面”到“用戶構(gòu)建自己的UI的方法”的所有內(nèi)容。這些都有些極端，但是互聯(lián)網(wǎng)上有一些好的定義(以及一些糟糕的定義)。

我個(gè)人最喜歡的是斯蒂芬·福（Stephen Few）的說法：

“Dashboard是實(shí)現(xiàn)一個(gè)或多個(gè)目標(biāo)所需的最重要信息的可視化顯示；整合并排列在同一屏幕上，這樣信息就可以一目了然?！?/p>

為什么要這么定義？因?yàn)?，它不僅抓住了Dashboard具有數(shù)據(jù)的可視化顯示的特點(diǎn)，而且該視覺顯示還具有明確的目標(biāo)或價(jià)值。

我看到的最常見的錯(cuò)誤是，設(shè)計(jì)者們建立Dashboard的愿望是從做一個(gè)看起來不錯(cuò)并鋪滿頁(yè)面的東西開始，然后再嘗試將功能放上去。從Dribbble上漂亮的Dashboard開始，希望你能獲得一個(gè)有效的界面，這是災(zāi)難的秘訣(一個(gè)美麗的災(zāi)難，但仍然是一個(gè)災(zāi)難)。

為什么Dashboard很重要？

我們使用Dashboard幫助用戶快速評(píng)估狀態(tài)，并確定在響應(yīng)時(shí)需要做什么。Dashboard的可用性實(shí)際上可以說是服務(wù)可用性的小幅度下降和影響業(yè)務(wù)底線的全面中斷之間的區(qū)別。

在過去的四年中，我一直是VMware操作軟件的設(shè)計(jì)負(fù)責(zé)人，在那里我為多個(gè)產(chǎn)品設(shè)定了設(shè)計(jì)方向，包括vRealize操作管理器, vRealize Log Insight和Wavefront by VMware 。每一個(gè)都包含某種自定義Dashboard功能。我團(tuán)隊(duì)中的設(shè)計(jì)人員創(chuàng)建了Dashboard，幫助用戶克服大規(guī)模且經(jīng)常是無序的數(shù)據(jù)的復(fù)雜性。

這些產(chǎn)品被軟件開發(fā)人員和IT專業(yè)人員用來管理和操作世界上一些最重要的應(yīng)用程序，對(duì)這些用戶來說，分析數(shù)據(jù)所需的時(shí)間不僅重要，而且至關(guān)重要。

優(yōu)秀Dashboard設(shè)計(jì)的5個(gè)步驟

雖然我確信有許多不同的方法，但以下步驟反映了我通常如何處理已確定需要Dashboard的項(xiàng)目。當(dāng)我在VMware設(shè)計(jì)Dashboard時(shí)，我發(fā)現(xiàn)這些步驟很有幫助，我希望其他人也覺得它們有用。

1. 明確用戶及其目標(biāo)

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

打個(gè)比方，汽車的儀表盤是圍繞駕駛員所需的東西構(gòu)建的。如果你是為乘客而構(gòu)建的話，則發(fā)動(dòng)機(jī)RPM之類的東西可能并不重要，但是無線廣播在放哪個(gè)電臺(tái)就變得至關(guān)重要。這是對(duì)特定用戶來說重要的事情。

其次，我們需要了解他們?cè)谶@種情況下的目的是什么。他們是駕駛員試圖把車從A點(diǎn)開到B點(diǎn)，還是乘客試圖為公路旅行選擇合適的歌曲？每個(gè)設(shè)計(jì)決策都是一個(gè)選擇，因此了解主要目標(biāo)用戶的意圖將有助于你做出選擇。

2. 選擇正確的Dashboard類型

到目前為止，我一直在泛泛地提到Dashboard，但實(shí)際上Dashboard有許多形狀和大小。根據(jù)我的經(jīng)驗(yàn)，我發(fā)現(xiàn)將它們分為三種主要類型是有用的：

1. 監(jiān)控儀表板
2. 交互式分析儀表板
3. 導(dǎo)航儀表板

（1）監(jiān)控儀表板

監(jiān)控儀表板是最傳統(tǒng)的Dashboard風(fēng)格。當(dāng)?shù)谝淮伪灰蠖x一輛汽車的儀表盤時(shí)，它們很可能是大多數(shù)人所想的。這是監(jiān)視儀表板的一個(gè)很好的例子，因?yàn)樗@示了用戶應(yīng)該經(jīng)?？吹降男畔?，并且一目了然。

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

我們?cè)赩Mware軟件中看到的一個(gè)常見示例是在操作中心的大型共享監(jiān)視器上顯示的Dashboard。許多人可能會(huì)看到Dashboard，但沒有人直接與之交互。它顯示的是在其他地方執(zhí)行的操作。

VMware的Wavefront——單值統(tǒng)計(jì)儀表板

（2）交互式分析儀表板

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

VReficationOperationManager——對(duì)VM分析儀表板進(jìn)行故障排除

（3）導(dǎo)航儀表板

中心輻射型導(dǎo)航模型中，導(dǎo)航儀表板充當(dāng)一種“目錄”，其中，中心頁(yè)面指向詳細(xì)信息頁(yè)面。不同之處在于，每個(gè)統(tǒng)計(jì)數(shù)據(jù)都代表了一個(gè)更廣泛的元素。該值區(qū)分了項(xiàng)目，這使用戶清楚地了解與哪些交互可獲得更多信息。

VMware的Wavefront——儀表板到儀表板導(dǎo)航

這些定義不是固定的或孤立的Dashboard類型。通常，Dashboard具有多個(gè)特征。我看到的一種常見模式是，在監(jiān)視器上和團(tuán)隊(duì)之間共享一個(gè)監(jiān)視儀表板。

監(jiān)視的項(xiàng)目具有導(dǎo)航性，并允許團(tuán)隊(duì)成員向下鉆取到單獨(dú)的Dashboard，其中包含有關(guān)該項(xiàng)目的更多詳細(xì)信息。在這種情況下，它既是監(jiān)視儀表板又是導(dǎo)航儀表板。

3. 以正確的方式顯示正確的數(shù)據(jù)

（1）數(shù)據(jù)粒度

一旦你了解了用戶、他們的目的和Dashboard類型，就可以將該信息轉(zhuǎn)換為一個(gè)或多個(gè)簡(jiǎn)單問題。用戶可以在其中找到Dashboard的真實(shí)價(jià)值。如果這個(gè)問題太寬泛，你可能無法回答，或者你需要大量的數(shù)據(jù)來準(zhǔn)確地回答它。

另一方面，如果問題太窄，不太可能解決用戶較大的目標(biāo)。找到正確的問題來回答是Dashboard設(shè)計(jì)的藝術(shù)，和大多數(shù)設(shè)計(jì)工作一樣，它實(shí)際上是從研究開始的。

找到正確的問題可能就像調(diào)查一些有代表性的用戶一樣簡(jiǎn)單，或者可能需要一些更深入的對(duì)話和語(yǔ)境詢問。只有當(dāng)你知道用戶頭腦中的問題時(shí)，你才會(huì)知道你是否確實(shí)有數(shù)據(jù)可以正確回答它。

為了更好地理解用戶目標(biāo)，我們鼓勵(lì)設(shè)計(jì)師講述用戶的故事并想象這個(gè)故事是如何在軟件中流轉(zhuǎn)的。故事的一部分可能會(huì)看到用戶需要回答問題。如果產(chǎn)品能夠幫助回答問題，Dashboard可能是最好的機(jī)制，但是產(chǎn)品必須有正確的數(shù)據(jù)才能使答案有用。

如果你發(fā)現(xiàn)確實(shí)有數(shù)據(jù)，那就太好了！如果沒有，那么你需要查看是否可以獲取數(shù)據(jù)（有時(shí)通過合并已有數(shù)據(jù)），或者是否可以仔細(xì)地將問題更改為可用數(shù)據(jù)可以回答的問題。

這一階段的典型缺陷是，讓你所掌握的數(shù)據(jù)決定你正在創(chuàng)建的Dashboard的內(nèi)容。一個(gè)API公開20個(gè)唯一指標(biāo)，并不意味著你應(yīng)該顯示20個(gè)圖表。重在用戶，而不是數(shù)據(jù)！

（2）時(shí)間與比較

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

假設(shè)時(shí)間變化很有趣，我們需要考慮正確的顯示機(jī)制：它與時(shí)間有何關(guān)系？當(dāng)前狀態(tài)是唯一重要的嗎？那么，也許單一指標(biāo)或量表是顯示它的正確方法。

過去的趨勢(shì)重要嗎？你可以考慮將該單一統(tǒng)計(jì)信息與一條簡(jiǎn)單的火花線配對(duì)以顯示趨勢(shì)。火花線是否足夠保真，還是需要在準(zhǔn)確的時(shí)間查看準(zhǔn)確的值？如果是這樣，則最好使用帶有清晰軸標(biāo)簽的細(xì)線圖。

從單一指標(biāo)到火花線到線圖的進(jìn)展

但是時(shí)間不是唯一的比較類型。有時(shí)，將多個(gè)來源進(jìn)行相互比較同樣重要。如果是這樣，那么正確的答案可能就像兩個(gè)并排的單一統(tǒng)計(jì)數(shù)據(jù)一樣簡(jiǎn)單。

但是，如果有兩個(gè)以上的來源怎么辦？使用條形圖或柱狀圖將值彼此比較是否重要，或更重要的是使用餅圖將值與整個(gè)值進(jìn)行比較。而且，如果與其他來源進(jìn)行比較并隨時(shí)間進(jìn)行比較兩者都很重要怎么辦？

在這種情況下，你可能會(huì)發(fā)現(xiàn)自己轉(zhuǎn)向堆積面積圖。

從條形圖到餅圖到堆積面積圖的進(jìn)展

4. 按部就班地組織起來

通常，你會(huì)使用多個(gè)顯示來回答多個(gè)問題，那么如何將它們布置在Dashboard上？回到你確定的問題，它們通?？梢孕纬梢粋€(gè)層次結(jié)構(gòu)。

想象一下，你正在為私人教練設(shè)計(jì)一個(gè)Dashboard，以跟蹤其客戶的進(jìn)度。第一個(gè)問題可能是了解客戶是否達(dá)到了每月目標(biāo)。如果答案為“否”，那么培訓(xùn)師將想知道這是朝錯(cuò)誤方向的平穩(wěn)發(fā)展，還是反映客戶“作弊日”趨勢(shì)的“突飛猛進(jìn)”。

通過組織問題，你可以在邏輯上對(duì)小部件進(jìn)行分組，以最好地回答問題。

在排列圖表時(shí)，請(qǐng)考慮：

1. 目標(biāo)用戶的自然閱讀方向（從左到右還是從右到左？）
2. 顯示尺寸（4K顯示器還是微小的iPhone6SE？如果兩者兼而有之，請(qǐng)準(zhǔn)備好響應(yīng)性的答案。）
3. 時(shí)間對(duì)齊（顯示相同時(shí)間范圍的多個(gè)圖表，如果它們是垂直疊加的，則更容易關(guān)聯(lián)。）

因此，現(xiàn)在你有了一個(gè)Dashboard，其中充滿了按邏輯順序排列的圖表和小部件，它們回答了所有你預(yù)見到的用戶提出的問題，但是將他們適配在單個(gè)屏幕上很難，并且滾動(dòng)會(huì)破壞儀表板的一覽無余。該怎么辦？

同樣，這也是問題結(jié)構(gòu)起作用之處。如果你已經(jīng)確定了主要問題，那么首先確定回答它所需的內(nèi)容。這就是你的Dashboard默認(rèn)顯示的內(nèi)容。前端開發(fā)人員不被要求在最初就渲染盡可能多的圖表，他們也會(huì)很樂意。

對(duì)于這些次要問題和其他問題，你可以通過默認(rèn)情況下將它們折疊在Dashboard上，或者將它們移到它們自己?jiǎn)为?dú)的可導(dǎo)航儀表板上，從而逐步公開它們。如果使用輔助Dashboard方法，請(qǐng)確保導(dǎo)航清晰并可訪問。

開發(fā)人員通常會(huì)決定這是否是一種選擇，但要認(rèn)識(shí)到每一種選擇的權(quán)衡：

• 導(dǎo)航似乎很容易，但是維持上下文往往很困難。
• 折疊看起來也很容易，但是頁(yè)面超載可能會(huì)給用戶和呈現(xiàn)Dashboard的系統(tǒng)帶來壓力。

在極少數(shù)情況下，你可能會(huì)發(fā)現(xiàn)你所倡導(dǎo)的用戶只有一個(gè)問題，而你只需要顯示該答案即可。如果是這樣，則此部分并不是真正必要的，但是我可以算一下我曾經(jīng)看到過的實(shí)例的數(shù)量。

5. 加強(qiáng)造型設(shè)計(jì)

現(xiàn)在，你有了一個(gè)或多個(gè)Dashboard，其中充滿了圖表顯示，用戶可以解釋這些圖表來回答重要的問題。

有些人可能會(huì)認(rèn)為這樣做就夠了，也是可行的，但作為設(shè)計(jì)師，我們不僅要努力讓用戶能夠解讀數(shù)據(jù)，而且他們還可以輕松甚至愉快地完成這些工作。顏色和字體的使用可以將Dashboard從功能擴(kuò)展到真正可用。

（1）顏色

以前，曾考慮過進(jìn)行比較，跨圖表進(jìn)行比較最常見的事情之一就是數(shù)據(jù)源。重要的是，多個(gè)圖表（甚至不同圖表類型）上的數(shù)據(jù)應(yīng)以相同的方式表示相同的來源，尤其是在顏色方面。

此外，請(qǐng)注意顏色是如何被解讀的。例如，許多用戶會(huì)將紅色圖表理解為錯(cuò)誤，或?qū)⒕G色圖表理解為正常和健康。紅色和綠色也提出了另一個(gè)考慮因素：可訪問性。紅綠色盲（全色盲和全色弱）影響多達(dá)7%的男性人口，因此使用模擬工具來驗(yàn)證你的圖表是否可區(qū)分非常重要。

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

（2）字體

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

此外，圖表的字體用于數(shù)字值的頻率遠(yuǎn)高于界面的其他部分，因此請(qǐng)仔細(xì)考慮如何呈現(xiàn)數(shù)字。例如，許多字體給0加上斜杠或點(diǎn)，以與字母“ O”區(qū)分開，但是如果字體較小，它們可能看起來會(huì)像數(shù)字“ 8”。

數(shù)據(jù)可視化對(duì)于設(shè)計(jì)人員來說是一個(gè)關(guān)鍵挑戰(zhàn)，設(shè)計(jì)優(yōu)秀Dashboard的能力是一個(gè)有價(jià)值的工具。與任何工藝一樣，重要的是不僅要有正確的工具，而且要知道如何有效地使用它。雖然制作一個(gè)漂亮的圖表需要特殊的技能，但要想制作一個(gè)解決用戶問題的Dashboard，并能讓用戶以愉快的方式進(jìn)行，則需要思考和計(jì)劃。

原文作者：Josh Johnson，VMware的操作軟件設(shè)計(jì)主管

原文標(biāo)題：5 Steps to Effective Dashboard Design

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

本文由 @海外設(shè)計(jì)參考 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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