▲點(diǎn)擊 "TCC翻譯情報(bào)局" 關(guān)注，回復(fù) "社群" 加入我們

本文共 4791 字，預(yù)計(jì)閱讀 12 分鐘
TCC 情報(bào)局的第 102 篇干貨分享
2021 年的第 90 篇

TCC 推薦: 大家好，這里是 TCC 翻譯情報(bào)局，我是李澤慧。作者在這篇文章中將儀表盤(pán)的創(chuàng)建過(guò)程類(lèi)比成人體發(fā)展，來(lái)介紹在構(gòu)建儀表盤(pán)的每個(gè)階段需要注意的事項(xiàng)及技巧。讓我們從接下去的七個(gè)階段開(kāi)始一步步了解如何構(gòu)建一個(gè)有效的儀表盤(pán)。

插畫(huà)，來(lái)自O(shè)utcrowd網(wǎng)站

一個(gè)看起來(lái)很酷炫的儀表盤(pán)可能有很多功能，優(yōu)秀的 小微件 [1]（good widgets），和炫酷多樣的視覺(jué)效果。但實(shí)際上，它通常只是一個(gè)閃亮的玩具，而不是一個(gè)有用的工具。這些儀表盤(pán)類(lèi)似于多臂機(jī)器人，能隨機(jī)拖拽數(shù)據(jù)并將這些數(shù)據(jù)分門(mén)別類(lèi)地整理在一起，讓你目瞪口呆。就像魔術(shù)師玩紙牌戲法一樣，它看起來(lái)令人印象深刻，但它的大腦和巧奪天工的手法一樣好。

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

玩這個(gè)儀表盤(pán)機(jī)器人一開(kāi)始可能很有趣，但最終會(huì)讓客戶失望，因?yàn)樗鼪](méi)有達(dá)到用戶的期望值。

為什么會(huì)發(fā)生這種情況呢？設(shè)計(jì)一個(gè)工具而不是一個(gè)很快就會(huì)被丟棄的玩具的訣竅是什么呢?

插畫(huà)，來(lái)自O(shè)utcrowd網(wǎng)站

1. 構(gòu)想儀表板：核心大腦

1. Conceiving the dashboard: the brain

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

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

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

第一個(gè)階段是最重要的。如果你在這個(gè)階段遺漏了什么，那么任何奇特的設(shè)計(jì)都無(wú)法挽救。因?yàn)樵谶@一階段你正在為儀表盤(pán)的長(zhǎng)期發(fā)展奠定基礎(chǔ)。

“我為什么被設(shè)計(jì)出來(lái)？誰(shuí)需要我？”如果儀表盤(pán)會(huì)說(shuō)話的，它一定會(huì)問(wèn)這些問(wèn)題。

你能回答這些問(wèn)題嗎？

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

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

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

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

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

| 儀表盤(pán)上沒(méi)有瑣碎的細(xì)節(jié)。

儀表盤(pán)上需要展示足夠的信息使用戶來(lái)做決定。設(shè)計(jì)師的職責(zé)是幫助用戶，而不是通過(guò)一系列很酷的小微件來(lái)幫助用戶解決難題。任何不是出于這個(gè)目的設(shè)計(jì)的都會(huì)阻礙用戶使用。

| 從項(xiàng)目的初始階段到最終階段，設(shè)計(jì)師必須關(guān)注公司的目標(biāo)、儀表盤(pán)的目標(biāo)，和用戶的目標(biāo)。

否則儀表盤(pán)將永遠(yuǎn)無(wú)法運(yùn)行。

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

2. 數(shù)據(jù)及關(guān)鍵績(jī)效指標(biāo)的選擇：這屬于血液循環(huán)系統(tǒng)

2. Data & KPI selection: the circulatory system

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

理所當(dāng)然地，設(shè)計(jì)師需要了解指標(biāo)的目的，顯然，這將幫助他們選擇合適的微件，但不僅僅只有這些。舉個(gè)例子，一個(gè)客戶想在屏幕上看到許多不同的讀數(shù)。你（作為設(shè)計(jì)師）并不需要從屏幕上去除任何東西來(lái)清理儀表盤(pán)的展示空間；但你可以做的是突出最重要的東西，并在視覺(jué)上淡化次要的內(nèi)容。然而，要做到這一點(diǎn)，你必須得知道哪個(gè)指標(biāo)是最重要的且哪個(gè)是次要的。

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

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

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

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

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

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

3. 儀表盤(pán)的結(jié)構(gòu)：這類(lèi)似于骨頭

3. Dashboard structure: the skeleton

想象一下，你進(jìn)入一家酒店房間，看到一張床、一面桌椅、一個(gè)鏡子和一個(gè)衣柜，就算不打開(kāi)壁櫥，你也能猜到里面有什么，吹風(fēng)機(jī)、拖鞋、浴巾就放在你所認(rèn)為的地方 —— 有人已經(jīng)保證了這些。一個(gè)好的儀表盤(pán)設(shè)計(jì)就如同那個(gè)房間：它是干凈、整潔且可被預(yù)知的。你可以立即看到所有必需品，并且直觀地知道剩下的東西會(huì)在哪里。

設(shè)計(jì)師們有他們自己的工具來(lái)確保儀表盤(pán)設(shè)計(jì)的整潔性。

1）層級(jí)

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

| 視覺(jué)層級(jí)必須反應(yīng)信息層級(jí)。

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

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

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

2）網(wǎng)格

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

3）信息模塊

系統(tǒng)的模塊類(lèi)似于一個(gè)住宅中的功能分區(qū)：臥室用來(lái)睡眠，餐廳用來(lái)吃飯之類(lèi)，每個(gè)區(qū)域有其功能。你的舒適性取決于它們放置的位置有多方便。一個(gè)糟糕的布局不能靠翻新和布置家具來(lái)挽救，因此與之相類(lèi)似的，信息模塊的布局需要被提前考慮。

信息模塊幫助你展示內(nèi)容的層次結(jié)構(gòu)，且?guī)椭愀鶕?jù)數(shù)據(jù)內(nèi)容的重要性、相關(guān)性和邏輯連接對(duì)內(nèi)容進(jìn)行分組。每個(gè)模塊應(yīng)該在給定過(guò)程中執(zhí)行特定的目的。

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

如果你在去往廚房的路上需要穿過(guò)一個(gè)有兩扇門(mén)的走廊，那么這是一個(gè)糟糕的室內(nèi)布局。相互關(guān)聯(lián)的進(jìn)程則會(huì)假定在邏輯上也具有相似性。如果一個(gè)模塊的進(jìn)程需要來(lái)自另一個(gè)模塊的數(shù)據(jù)，那么數(shù)據(jù)的布局就需要有近似性。這一點(diǎn)必須事先考慮，這樣用戶就不需要在晦澀難懂的信息海里挖掘他們需要的信息。

插畫(huà)，來(lái)自O(shè)utcrowd網(wǎng)站

所有相關(guān)的信息應(yīng)依據(jù)相似性，從最重要到最不重要性來(lái)進(jìn)行分組和定位。

5）分離模塊

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

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

4. 功能：這就類(lèi)似于身體的肌肉部分

4. Functions: the muscles

功能和工具的數(shù)量取決于儀表盤(pán)的用途和其用戶的主要目標(biāo)。

為了自由地移動(dòng)，人類(lèi)需要兩條腿，狗需要四條腿，而蜘蛛需要八條腿。一個(gè)擁有太多功能的儀表盤(pán)就像一條有著六條腿的狗一樣優(yōu)秀，但這有點(diǎn)讓人毛骨悚然。

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

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

5. 微件：重要的器官

5. Widgets: the vital organs

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

視覺(jué)可視化的工具包括：

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

儀表盤(pán)數(shù)據(jù)

微件的選擇取決于你儀表盤(pán)的目的和你的受眾。

請(qǐng)思考以下問(wèn)題：

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

請(qǐng)選擇容易理解和可讀的微件。

這里有一個(gè)讓人困惑的與最易理解的微件對(duì)比示例：

請(qǐng)考慮什么是主要的目標(biāo)來(lái)吸引用戶的注意力。例如，如果你的首要任務(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 圖可能看起來(lái)令人印象深刻，但它占用了用戶太多的注意力，最終證明它會(huì)分散用戶的注意力。漸變、過(guò)度使用顏色和太多細(xì)節(jié)也同樣會(huì)造成困擾。

6. 視覺(jué)設(shè)計(jì)：通用技巧

6. Visual design: general tips

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

1）簡(jiǎn)約性

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

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

2）配色板

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

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

避免使用可能具有負(fù)面含義的顏色。例如在下面的例子中，紅色看上去像展示一些不好且不受歡迎的數(shù)據(jù)：

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

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

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

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

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

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

7. 適應(yīng)性

7. Adaptability

在實(shí)踐過(guò)程中，當(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)端的儀表盤(pán)。然后再創(chuàng)建桌面端的。

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

結(jié)論

In conclusion

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

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

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

作者：Erik Messaki

譯者：陳羽姿

審核：蔡林燕、李澤慧、張聿彤

編輯：孫淑雅

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

往期精選文章：

添加小助手微信，備注「社群」，即可加入讀者群。

儀表盤(pán)設(shè)計(jì)的 7 個(gè)階段

本文共 4791 字，預(yù)計(jì)閱讀 12 分鐘
TCC 情報(bào)局的第 102 篇干貨分享
2021 年的第 90 篇

1. 構(gòu)想儀表板：核心大腦

1. Conceiving the dashboard: the brain

2. 數(shù)據(jù)及關(guān)鍵績(jī)效指標(biāo)的選擇：這屬于血液循環(huán)系統(tǒng)

2. Data & KPI selection: the circulatory system

3. Dashboard structure: the skeleton

1）層級(jí)

2）網(wǎng)格

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

所有相關(guān)的信息應(yīng)依據(jù)相似性，從最重要到最不重要性來(lái)進(jìn)行分組和定位。

5）分離模塊

4. 功能：這就類(lèi)似于身體的肌肉部分

4. Functions: the muscles

5. 微件：重要的器官

5. Widgets: the vital organs

6. 視覺(jué)設(shè)計(jì)：通用技巧

6. Visual design: general tips

1）簡(jiǎn)約性

2）配色板

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

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

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

7. 適應(yīng)性

7. Adaptability

結(jié)論

In conclusion

十個(gè)技巧幫助你設(shè)計(jì)一款在線學(xué)習(xí) APP

這些 色彩心理學(xué)知識(shí)教你如何傳遞信息

案例研究｜康奈爾大學(xué)副業(yè)社區(qū)網(wǎng)站設(shè)計(jì)

網(wǎng)頁(yè)設(shè)計(jì)師能從日式美學(xué)中學(xué)到什么？

案例研究｜一款為你帶來(lái)難忘體驗(yàn)的美食 APP

如何制作打動(dòng)面試官的作品集，這里有一份完整的指導(dǎo)手冊(cè)

如何做好用戶體驗(yàn)項(xiàng)目？從一個(gè)好計(jì)劃開(kāi)始

如何建立設(shè)計(jì)系統(tǒng)

如何把握不同層級(jí)用戶的需求：回歸本質(zhì)，打磨信息架構(gòu)

TCC 視野｜2021 年用戶體驗(yàn)設(shè)計(jì)趨勢(shì)分析

儀表盤(pán)設(shè)計(jì)的 7 個(gè)階段

本文共 4791 字，預(yù)計(jì)閱讀 12 分鐘TCC 情報(bào)局的 第 102 篇 干貨分享2021 年的 第 90 篇

1. 構(gòu)想儀表板：核心大腦

1. Conceiving the dashboard: the brain

2. 數(shù)據(jù)及關(guān)鍵績(jī)效指標(biāo)的選擇：這屬于血液循環(huán)系統(tǒng)

2. Data & KPI selection: the circulatory system

3. Dashboard structure: the skeleton

1）層級(jí)

2）網(wǎng)格

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

所有相關(guān)的信息應(yīng)依據(jù)相似性，從最重要到最不重要性來(lái)進(jìn)行分組和定位。

5）分離模塊

4. 功能：這就類(lèi)似于身體的肌肉部分

4. Functions: the muscles

5. 微件：重要的器官

5. Widgets: the vital organs

6. 視覺(jué)設(shè)計(jì)：通用技巧

6. Visual design: general tips

1）簡(jiǎn)約性

2）配色板

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

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

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

7. 適應(yīng)性

7. Adaptability

結(jié)論

In conclusion

本文共 4791 字，預(yù)計(jì)閱讀 12 分鐘
TCC 情報(bào)局的第 102 篇干貨分享
2021 年的第 90 篇

所有相關(guān)的信息應(yīng)依據(jù)相似性，從最重要到最不重要性來(lái)進(jìn)行分組和定位。

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