編輯導(dǎo)語：你知道儀表盤應(yīng)該如何被設(shè)計(jì)，才能更符合用戶需求、滿足用戶的使用期待嗎？過于復(fù)雜的儀表盤設(shè)計(jì)可能是不可取的，在進(jìn)行儀表盤設(shè)計(jì)前，你需要做好相應(yīng)的規(guī)劃和設(shè)計(jì)策略。本篇文章里，作者總結(jié)了儀表盤設(shè)計(jì)的七個(gè)階段，一起來看一下。

一個(gè)看起來很酷炫的儀表盤可能有很多功能，優(yōu)秀的小微件[1]（good widgets），和炫酷多樣的視覺效果。

但實(shí)際上，它通常只是一個(gè)閃亮的玩具，而不是一個(gè)有用的工具。這些儀表盤類似于多臂機(jī)器人，能隨機(jī)拖拽數(shù)據(jù)并將這些數(shù)據(jù)分門別類地整理在一起，讓你目瞪口呆。

就像魔術(shù)師玩紙牌戲法一樣，它看起來令人印象深刻，但它的大腦和巧奪天工的手法一樣好。

（[1] Widget：全稱Web widget是一種Web2.0 的衍生物，它好像是一個(gè)小型的應(yīng)用程式，是一小塊可以在任意一個(gè)基于HTML的網(wǎng)頁(yè)上執(zhí)行代碼構(gòu)成的小部件。）

玩這個(gè)儀表盤機(jī)器人一開始可能很有趣，但最終會(huì)讓客戶失望，因?yàn)樗鼪]有達(dá)到用戶的期望值。為什么會(huì)發(fā)生這種情況呢？設(shè)計(jì)一個(gè)工具而不是一個(gè)很快就會(huì)被丟棄的玩具的訣竅是什么呢?

一、構(gòu)想儀表板：核心大腦?Conceiving the dashboard: the brain

讓我們深入剖析儀表盤設(shè)計(jì)。

儀表盤是由客戶、設(shè)計(jì)師和開發(fā)人員共同設(shè)計(jì)的，他們每個(gè)人通過合作做出一定的貢獻(xiàn)，并且所有的基礎(chǔ)功能在一開始就確定了（或者他們沒標(biāo)明）。

一個(gè)有思考能力的人是從胚胎發(fā)育而來的。腦細(xì)胞和神經(jīng)細(xì)胞是最先形成的，隨后是身體的其他細(xì)胞，而這正是任何可行項(xiàng)目被創(chuàng)建的方式。

第一個(gè)階段是最重要的。如果你在這個(gè)階段遺漏了什么，那么任何奇特的設(shè)計(jì)都無法挽救。因?yàn)樵谶@一階段你正在為儀表盤的長(zhǎng)期發(fā)展奠定基礎(chǔ)。“我為什么被設(shè)計(jì)出來？誰需要我？”如果儀表盤會(huì)說話的，它一定會(huì)問這些問題。你能回答這些問題嗎？

• 儀表盤將如何促進(jìn)公司目標(biāo)的達(dá)成？
• 什么樣的結(jié)構(gòu)、功能和視覺效果能讓儀表盤執(zhí)行它的任務(wù)？
• 哪種設(shè)計(jì)最適合你的目標(biāo)受眾？

這些問題的答案將構(gòu)成你設(shè)計(jì)理念的基礎(chǔ)（現(xiàn)在你可以告訴你的儀表盤存在的意義了）。

網(wǎng)頁(yè)P(yáng)erls儀表盤設(shè)計(jì)

1）儀表盤的“智能”是其實(shí)現(xiàn)目標(biāo)的能力。

有些人認(rèn)為只有分析類儀表盤才需要智能性能，而可操作的儀表板只需要可讀性，實(shí)際上這個(gè)想法是錯(cuò)的。比方說，你有一個(gè)用于激勵(lì)員工的操作類儀表盤，用戶的注意力應(yīng)該放在比較結(jié)果，然而設(shè)計(jì)師會(huì)讓其在視覺效果上更加突出。

2）儀表盤上沒有瑣碎的細(xì)節(jié)。儀表盤上需要展示足夠的信息使用戶來做決定。設(shè)計(jì)師的職責(zé)是幫助用戶，而不是通過一系列很酷的小微件來幫助用戶解決難題。任何不是出于這個(gè)目的設(shè)計(jì)的都會(huì)阻礙用戶使用。

3）從項(xiàng)目的初始階段到最終階段，設(shè)計(jì)師必須關(guān)注公司的目標(biāo)、儀表盤的目標(biāo)，和用戶的目標(biāo)。否則儀表盤將永遠(yuǎn)無法運(yùn)行。

儀表盤設(shè)計(jì)：Clover

二、數(shù)據(jù)及關(guān)鍵績(jī)效指標(biāo)的選擇：這屬于血液循環(huán)系統(tǒng)?Data & KPI selection: the circulatory system

儀表盤的數(shù)據(jù)就像是身體內(nèi)的循環(huán)血液。我們必須了解它們來自哪里，它們?cè)诒挥脩粜枰獣r(shí)是如何被處理的，以及它們?cè)撊绾伪豢梢暬?/p>

理所當(dāng)然地，設(shè)計(jì)師需要了解指標(biāo)的目的，顯然，這將幫助他們選擇合適的微件，但不僅僅只有這些。

舉個(gè)例子，一個(gè)客戶想在屏幕上看到許多不同的讀數(shù)。你（作為設(shè)計(jì)師）并不需要從屏幕上去除任何東西來清理儀表盤的展示空間；但你可以做的是突出最重要的東西，并在視覺上淡化次要的內(nèi)容。

然而，要做到這一點(diǎn)，你必須得知道哪個(gè)指標(biāo)是最重要的且哪個(gè)是次要的。

儀表盤設(shè)計(jì)：Bidding Car

最重要的一系列指標(biāo)有助于實(shí)現(xiàn)目標(biāo)，且能幫助控制流程（或者產(chǎn)品），例如：

• 它們展示實(shí)際的成功率；
• 它們影響產(chǎn)品被感知的方式；
• 它們激勵(lì)創(chuàng)建該儀表盤的團(tuán)隊(duì)。

指標(biāo)的選擇還需要了解受眾。用戶應(yīng)該看到哪個(gè) KPI以及他們認(rèn)為最容易理解的視覺表現(xiàn)形式？

人們喜歡對(duì)應(yīng)他們目標(biāo)的一系列數(shù)字。

儀表盤設(shè)計(jì)：Panch

三、儀表盤的結(jié)構(gòu)：這類似于骨頭?Dashboard structure: the skeleton

想象一下，你進(jìn)入一家酒店房間，看到一張床、一面桌椅、一個(gè)鏡子和一個(gè)衣柜，就算不打開壁櫥，你也能猜到里面有什么，吹風(fēng)機(jī)、拖鞋、浴巾就放在你所認(rèn)為的地方——有人已經(jīng)保證了這些。

一個(gè)好的儀表盤設(shè)計(jì)就如同那個(gè)房間：它是干凈、整潔且可被預(yù)知的。你可以立即看到所有必需品，并且直觀地知道剩下的東西會(huì)在哪里。設(shè)計(jì)師們有他們自己的工具來確保儀表盤設(shè)計(jì)的整潔性。

1. 層級(jí)

首先，你需要理清思路，在發(fā)揮創(chuàng)意之前，要對(duì)所有數(shù)據(jù)進(jìn)行排序，將其分類，并充分理解優(yōu)先級(jí)等等，確定用戶可以立即看見的關(guān)鍵指標(biāo)數(shù)據(jù)。

1）視覺層級(jí)必須反應(yīng)信息層級(jí)。

設(shè)計(jì)師可以通過微件的大小及位置來表現(xiàn)數(shù)據(jù)的層級(jí)權(quán)重。如果你的用戶是從左往右閱讀的，那么關(guān)鍵信息必須放在左上角，而相關(guān)性最弱的信息放在底部右下角。

對(duì)數(shù)據(jù)重要性的排序方法取決于儀表盤的設(shè)計(jì)用途。重要的是根據(jù)信息的優(yōu)先級(jí)構(gòu)造信息并搭建邏輯鏈路。

2）將信息面板視為一個(gè)故事，而不是一系列的數(shù)據(jù)點(diǎn)。

2. 網(wǎng)格

網(wǎng)格對(duì)于創(chuàng)建頁(yè)面的總體布局、排序、協(xié)調(diào)和對(duì)齊元素非常有用。

3. 信息模塊

系統(tǒng)的模塊類似于一個(gè)住宅中的功能分區(qū)：臥室用來睡眠，餐廳用來吃飯之類，每個(gè)區(qū)域有其功能。你的舒適性取決于它們放置的位置有多方便。

一個(gè)糟糕的布局不能靠翻新和布置家具來挽救，因此與之相類似的，信息模塊的布局需要被提前考慮。信息模塊幫助你展示內(nèi)容的層次結(jié)構(gòu)，且?guī)椭愀鶕?jù)數(shù)據(jù)內(nèi)容的重要性、相關(guān)性和邏輯連接對(duì)內(nèi)容進(jìn)行分組。每個(gè)模塊應(yīng)該在給定過程中執(zhí)行特定的目的。

4. 連續(xù)性和接近性

如果你在去往廚房的路上需要穿過一個(gè)有兩扇門的走廊，那么這是一個(gè)糟糕的室內(nèi)布局。相互關(guān)聯(lián)的進(jìn)程則會(huì)假定在邏輯上也具有相似性。如果一個(gè)模塊的進(jìn)程需要來自另一個(gè)模塊的數(shù)據(jù)，那么數(shù)據(jù)的布局就需要有近似性。

這一點(diǎn)必須事先考慮，這樣用戶就不需要在晦澀難懂的信息海里挖掘他們需要的信息。所有相關(guān)的信息應(yīng)依據(jù)相似性，從最重要到最不重要性來進(jìn)行分組和定位。

5. 分離模塊

沒有人需要一個(gè)與臥室相連的廚房。為了將兩個(gè)區(qū)塊分開，你需要留白或者負(fù)空間。你一定要在一開始就考慮到：將負(fù)空間視為視覺平衡所需要的設(shè)計(jì)元素組合。

儀表盤設(shè)計(jì)：Wingle

四、功能：這就類似于身體的肌肉部分?Functions: the muscles

功能和工具的數(shù)量取決于儀表盤的用途和其用戶的主要目標(biāo)。為了自由地移動(dòng)，人類需要兩條腿，狗需要四條腿，而蜘蛛需要八條腿。一個(gè)擁有太多功能的儀表盤就像一條有著六條腿的狗一樣優(yōu)秀，但這有點(diǎn)讓人毛骨悚然。

不要在控制面板上放太多工具，只需要在最表層放置用戶必需品就好。太多的可用工具會(huì)讓用戶困惑且被嚇退，因?yàn)檫@會(huì)讓儀表盤看起來很復(fù)雜。個(gè)性化總是比定制要好。

儀表盤設(shè)計(jì)：Band

五、微件：重要的器官?Widgets: thevital organs

如果屏幕上有超過 5～7 個(gè)的小微件，人們則會(huì)難以理解其內(nèi)容。所以我們（設(shè)計(jì)師）的工作是讓相關(guān)數(shù)據(jù)可以被訪問但數(shù)量保持一定，不過多，這樣就能使用戶能在數(shù)秒中理解他們看到的內(nèi)容。視覺可視化的工具包括：

• 表格
• 圖形
• 圖表
• 卡片
• 指標(biāo)
• 地圖
• 圖片
• 分組
• 過濾器
• 列表
• 資料結(jié)構(gòu)

儀表盤數(shù)據(jù)微件的選擇取決于你儀表盤的目的和你的受眾。請(qǐng)思考以下問題：

• 哪一種微件最能展示特定的 KPI（關(guān)鍵績(jī)效指標(biāo)）？
• 用戶需要最先在儀表盤上看到什么？
• 哪一種微件將會(huì)是用戶最容易理解的？
• 什么可以幫助用戶更快地找到他們需要的東西？

請(qǐng)選擇容易理解和可讀的微件。這里有一個(gè)讓人困惑的與最易理解的微件對(duì)比示例：?????????

請(qǐng)考慮什么是主要的目標(biāo)來吸引用戶的注意力。

例如，如果你的首要任務(wù)是業(yè)績(jī)目標(biāo)，則應(yīng)使用數(shù)字；如果你需要比較數(shù)值，則應(yīng)使用折線圖或者柱狀圖；如果是為了激勵(lì)團(tuán)隊(duì)，則應(yīng)使用具有亮點(diǎn)突出的排行榜。

選擇一個(gè)不合適的部件或默認(rèn)的小部件模板可能會(huì)混淆用戶或?qū)е滤麄冋`解數(shù)據(jù)。最好的解決方案總是分析和測(cè)試的結(jié)果。

最好的小部件設(shè)計(jì)是簡(jiǎn)約的，并且易于閱讀的。

例如，一個(gè) 3D 圖可能看起來令人印象深刻，但它占用了用戶太多的注意力，最終證明它會(huì)分散用戶的注意力。漸變、過度使用顏色和太多細(xì)節(jié)也同樣會(huì)造成困擾。

六、視覺設(shè)計(jì)：通用技巧?Visual design: general tips

我們已經(jīng)構(gòu)建了儀表盤的大腦和身體。最后需要構(gòu)建的是儀表盤的皮膚——最表面的一層。這可以根據(jù)好的經(jīng)典設(shè)計(jì)的基本原則來完成，但這里仍然有些細(xì)節(jié)需要具體說明。

1. 簡(jiǎn)約性

一個(gè)儀表盤應(yīng)該跟你喜歡的工作桌面一樣干凈：它只有必需的文件和工具，沒有任何干擾項(xiàng)。

儀表盤設(shè)計(jì)：MEMO

2. 配色板

儀表盤的顏色選擇必須服務(wù)于一個(gè)目的：盡可能清晰地呈現(xiàn)信息。你的配色板越大，就越難清晰地展示信息。所以不要在儀表盤上使用過多顏色。盡可能用相同顏色的深淺色或者不同的色相。

首選，你需要選擇一個(gè)基礎(chǔ)色，然后選擇一個(gè)輔助色。每個(gè)顏色都必須有特定的用途。一個(gè)顏色可以用來結(jié)合/組合元素，另一種顏色可以用來強(qiáng)調(diào)元素。顏色還經(jīng)常用來展示一個(gè)元素是主動(dòng)的還是被動(dòng)的。避免使用可能具有負(fù)面含義的顏色。

例如在下面的例子中，紅色看上去像展示一些不好且不受歡迎的數(shù)據(jù)：

如果儀表盤提供可定制的顏色，請(qǐng)確保所有的可選顏色看上去都不錯(cuò)。Aodbe Color CC 是一個(gè)用來選擇配色的優(yōu)秀工具。

3. 強(qiáng)調(diào)

語義的強(qiáng)調(diào)之處應(yīng)和視覺的強(qiáng)調(diào)之處一一對(duì)應(yīng)。你可以使用顏色（對(duì)比、亮度）、形狀、大小、負(fù)空間等等來強(qiáng)調(diào)元素。

4. 可讀性和數(shù)字格式

這是確保視覺上清晰清楚的一切：干凈的布局，視覺層級(jí)，突出重點(diǎn)，對(duì)比鮮明的元素，適當(dāng)?shù)淖煮w，且這些字體也必須具有對(duì)比性和易讀性。

高精度的數(shù)字格式是難以讓人理解的。最好的辦法是將任何數(shù)字四舍五入，并減少較長(zhǎng)的數(shù)字。

七、適應(yīng)性?Adaptability

在實(shí)踐過程中，當(dāng)桌面版本是用戶的優(yōu)先選擇時(shí)，則應(yīng)該優(yōu)先構(gòu)建網(wǎng)頁(yè)版，然后創(chuàng)建移動(dòng)端的。如果你的目標(biāo)受眾主要使用移動(dòng)端版本，則應(yīng)首先著眼于構(gòu)建移動(dòng)端的儀表盤。然后再創(chuàng)建桌面端的。

儀表盤設(shè)計(jì)：Snap

八、結(jié)論?In conclusion

設(shè)計(jì)一個(gè)優(yōu)先的儀表盤并不容易。我們將其創(chuàng)建過程類比作人類發(fā)展，因?yàn)樗怯涀≈匾獤|西和展示工作的連續(xù)階段的好方法。當(dāng)你在開發(fā)你的儀表盤，請(qǐng)不斷地自我提問：是否一切各就其位、各司其職？是否有多余的部分嗎（需要去掉）？各部位協(xié)作時(shí)工作正常嗎？用戶會(huì)喜歡這樣的結(jié)果嗎？這（功能）會(huì)有用嗎？

如你所見，視覺設(shè)計(jì)實(shí)際上是設(shè)計(jì)師最后需要擔(dān)心的事。如果你什么都沒有漏過，你的儀表盤將對(duì)你的用戶產(chǎn)生有價(jià)值的幫助，而不只是一個(gè)玩具。

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

原文：https://medium.com/outcrowd/dashboard-design-useful-tips-bc4abff35e29

作者：Erik Messaki

譯者：陳羽姿；審核：蔡林燕、李澤慧、張聿彤；編輯：孫淑雅

本文由@TCC翻譯情報(bào)局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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