編輯導(dǎo)語(yǔ)：Dashboard即儀表盤(pán)，它可以為用戶提供一個(gè)相對(duì)全局的概覽，可以讓數(shù)據(jù)可視化呈現(xiàn)。那么，在Dashboard設(shè)計(jì)中，應(yīng)該遵循哪些原則和步驟呢？本篇文章里，作者總結(jié)了Dashboard設(shè)計(jì)的5個(gè)有效步驟，一起來(lái)看一下。

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

我聽(tīng)過(guò)一些有趣的答案，比如“任何帶有圖表的頁(yè)面”，或者“用戶構(gòu)建自己UI的方法”，這些都有點(diǎn)極端，我個(gè)人最喜歡的是斯蒂芬·福（Stephen Few）的說(shuō)法：

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

這個(gè)定義不僅抓住了Dashboard具有數(shù)據(jù)的可視化顯示的特點(diǎn)，而且該視覺(jué)顯示還具有明確的目標(biāo)或價(jià)值。我看到的最常見(jiàn)的錯(cuò)誤是，設(shè)計(jì)者們建立Dashboard的愿望是從做一個(gè)看起來(lái)不錯(cuò)并鋪滿頁(yè)面的東西開(kāi)始，然后再嘗試將功能放上去。

一、為什么Dashboard很重要？

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

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

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

二、有效設(shè)計(jì)Dashboard的5個(gè)步驟

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

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

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

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

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

Photo courtesy of Createria via Unsplash

2. 選擇正確的Dashboard類型

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

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

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

監(jiān)控儀表板是最傳統(tǒng)的儀表板風(fēng)格。當(dāng)被要求定義一輛汽車(chē)的儀表盤(pán)時(shí)，這很可能是大多數(shù)人最開(kāi)始想到的，這是監(jiān)視儀表板的好例子，它顯示了用戶應(yīng)該經(jīng)?？吹降男畔ⅲ⑶乙荒苛巳?。

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

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

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

2）交互式分析儀表板

近年來(lái)，交互式分析儀表板變得越來(lái)越普遍，它們的作用不是立即顯示大量信息，而是以數(shù)據(jù)可視化的形式向用戶提供工具，展示具體所需的信息。這通常是通過(guò)普通過(guò)濾器和選擇器將圖表連接在一起來(lái)實(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ù)都代表著一些更廣泛的信息元素，用戶可以清楚地了解到，與哪些內(nèi)容進(jìn)行交互可獲得更多信息。

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

這些分類不是固定的或孤立的儀表板類型。通常，儀表板具有多個(gè)特征。我看到的一種常見(jiàn)模式是，在監(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)單問(wèn)題，用戶可以在其中找到Dashboard的真實(shí)價(jià)值。

注意簡(jiǎn)單問(wèn)題的范圍，如果問(wèn)題太寬泛，您可能會(huì)無(wú)法回答，或者需要大量的數(shù)據(jù)來(lái)準(zhǔn)確地回答它；如果問(wèn)題太窄，不太可能解決用戶較大的目標(biāo)。找到正確的問(wèn)題來(lái)回答是Dashboard設(shè)計(jì)的藝術(shù)。

和大多數(shù)設(shè)計(jì)工作一樣，它實(shí)際上是從研究開(kāi)始的。找到正確的問(wèn)題可能就像調(diào)查一些有代表性的用戶一樣簡(jiǎn)單，或者可能需要一些更深入的對(duì)話和語(yǔ)境詢問(wèn)。只有當(dāng)您知道用戶頭腦中的問(wèn)題時(shí)，您才會(huì)知道您是否確實(shí)有數(shù)據(jù)可以正確地回答它。

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

如果您發(fā)現(xiàn)確實(shí)有數(shù)據(jù)，那就太好了！ 如果沒(méi)有，那么您需要查看是否可以獲取數(shù)據(jù)（有時(shí)也可通過(guò)合并已有數(shù)據(jù)來(lái)得到目標(biāo)數(shù)據(jù)），或者是否可以仔細(xì)地將問(wèn)題更改為可用數(shù)據(jù)能夠回答的問(wèn)題。

這一階段的典型陷阱是，被所掌握的數(shù)據(jù)左右了正在創(chuàng)建的Dashboard內(nèi)容。一個(gè)API公開(kāi)了20個(gè)獨(dú)特指標(biāo)，并不意味著應(yīng)該顯示20個(gè)圖表。 重在用戶，而不是數(shù)據(jù)！

2）時(shí)間與比較

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

假設(shè)時(shí)間變化很有趣，我們需要考慮正確的顯示機(jī)制：

它與時(shí)間有何關(guān)系？ 當(dāng)前狀態(tài)是唯一重要的嗎？ 如果是，那也許單一指標(biāo)或量表是顯示它的正確方法。

過(guò)去的趨勢(shì)重要嗎？ 如果重要，那您可以考慮將該單一統(tǒng)計(jì)信息與一條簡(jiǎn)單的火花線配對(duì)以顯示趨勢(shì)。

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

從單一指標(biāo)到火花線到折線圖

但是時(shí)間并不是唯一的比較基準(zhǔn)。有時(shí)，將多個(gè)來(lái)源相互比較同樣很有意義，正確的答案可能就像兩個(gè)并排的單一統(tǒng)計(jì)數(shù)據(jù)一樣簡(jiǎn)單。

如果有兩個(gè)以上的來(lái)源，可使用條形圖或柱狀圖將值彼此比較，或是使用餅圖將單個(gè)值與總值進(jìn)行比較。如果時(shí)間和多來(lái)源比較這兩者都很重要，那使用堆積面積圖是不錯(cuò)的選擇。

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

4. 按部就班地組織起來(lái)

通常，我們會(huì)使用多個(gè)圖表來(lái)回答多個(gè)問(wèn)題，那么如何將它們排布在Dashboard上呢？

回到已經(jīng)確定的問(wèn)題，它們通?？梢孕纬梢粋€(gè)層次結(jié)構(gòu)。

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

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

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

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

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

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

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

5. 加強(qiáng)樣式設(shè)計(jì)

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

1）顏色

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

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

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

2）字體

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

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

數(shù)據(jù)可視化對(duì)于設(shè)計(jì)人員來(lái)說(shuō)是一個(gè)關(guān)鍵挑戰(zhàn)，有效設(shè)計(jì)Dashboard的能力是一項(xiàng)有價(jià)值的工具。與任何工藝一樣，重要的是不僅要有正確的工具，而且要知道如何有效地運(yùn)用它。

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

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

本文由 @Hitomi 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于CC0協(xié)議