儀表盤設計的 7 個階段

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

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

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

（[1] Widget：全稱Web widget是一種Web2.0 的衍生物，它好像是一個小型的應用程式，是一小塊可以在任意一個基於HTML的網頁上執行代碼構成的小部件。）

玩這個儀表盤機器人一開始可能很有趣，但最終會讓客戶失望，因爲它沒有達到用戶的期望值。爲什麼會發生這種情況呢？設計一個工具而不是一個很快就會被丟棄的玩具的訣竅是什麼呢?

一、構想儀表板：核心大腦 Conceiving the dashboard: the brain

讓我們深入剖析儀表盤設計。

儀表盤是由客戶、設計師和開發人員共同設計的，他們每個人通過合作做出一定的貢獻，並且所有的基礎功能在一開始就確定了（或者他們沒標明）。

一個有思考能力的人是從胚胎髮育而來的。腦細胞和神經細胞是最先形成的，隨後是身體的其他細胞，而這正是任何可行項目被創建的方式。

第一個階段是最重要的。如果你在這個階段遺漏了什麼，那麼任何奇特的設計都無法挽救。因爲在這一階段你正在爲儀表盤的長期發展奠定基礎。“我爲什麼被設計出來？誰需要我？”如果儀表盤會說話的，它一定會問這些問題。你能回答這些問題嗎？

這些問題的答案將構成你設計理念的基礎（現在你可以告訴你的儀表盤存在的意義了）。

網頁Perls儀表盤設計

1）儀表盤的“智能”是其實現目標的能力。

有些人認爲只有分析類儀表盤才需要智能性能，而可操作的儀表板只需要可讀性，實際上這個想法是錯的。比方說，你有一個用於激勵員工的操作類儀表盤，用戶的注意力應該放在比較結果，然而設計師會讓其在視覺效果上更加突出。

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

3）從項目的初始階段到最終階段，設計師必須關注公司的目標、儀表盤的目標，和用戶的目標。否則儀表盤將永遠無法運行。

儀表盤設計：Clover

二、數據及關鍵績效指標的選擇：這屬於血液循環系統 Data & KPI selection: the circulatory system

儀表盤的數據就像是身體內的循環血液。我們必須瞭解它們來自哪裡，它們在被用戶需要時是如何被處理的，以及它們該如何被可視化。

理所當然地，設計師需要了解指標的目的，顯然，這將幫助他們選擇合適的微件，但不僅僅只有這些。

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

然而，要做到這一點，你必須得知道哪個指標是最重要的且哪個是次要的。

儀表盤設計：Bidding Car

最重要的一系列指標有助於實現目標，且能幫助控制流程（或者產品），例如：

指標的選擇還需要了解受衆。用戶應該看到哪個 KPI以及他們認爲最容易理解的視覺表現形式？

人們喜歡對應他們目標的一系列數字。

儀表盤設計：Panch

三、儀表盤的結構：這類似於骨頭 Dashboard structure: the skeleton

想象一下，你進入一家酒店房間，看到一張牀、一面桌椅、一個鏡子和一個衣櫃，就算不打開壁櫥，你也能猜到裡面有什麼，吹風機、拖鞋、浴巾就放在你所認爲的地方——有人已經保證了這些。

一個好的儀表盤設計就如同那個房間：它是乾淨、整潔且可被預知的。你可以立即看到所有必需品，並且直觀地知道剩下的東西會在哪裡。設計師們有他們自己的工具來確保儀表盤設計的整潔性。

1. 層級

首先，你需要理清思路，在發揮創意之前，要對所有數據進行排序，將其分類，並充分理解優先級等等，確定用戶可以立即看見的關鍵指標數據。

1）視覺層級必須反應信息層級。

設計師可以通過微件的大小及位置來表現數據的層級權重。如果你的用戶是從左往右閱讀的，那麼關鍵信息必須放在左上角，而相關性最弱的信息放在底部右下角。

對數據重要性的排序方法取決於儀表盤的設計用途。重要的是根據信息的優先級構造信息並搭建邏輯鏈路。

2）將信息面板視爲一個故事，而不是一系列的數據點。

2. 網格

網格對於創建頁面的總體佈局、排序、協調和對齊元素非常有用。

3. 信息模塊

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

一個糟糕的佈局不能靠翻新和佈置傢俱來挽救，因此與之相類似的，信息模塊的佈局需要被提前考慮。信息模塊幫助你展示內容的層次結構，且幫助你根據數據內容的重要性、相關性和邏輯連接對內容進行分組。每個模塊應該在給定過程中執行特定的目的。

4. 連續性和接近性

如果你在去往廚房的路上需要穿過一個有兩扇門的走廊，那麼這是一個糟糕的室內佈局。相互關聯的進程則會假定在邏輯上也具有相似性。如果一個模塊的進程需要來自另一個模塊的數據，那麼數據的佈局就需要有近似性。

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

5. 分離模塊

沒有人需要一個與臥室相連的廚房。爲了將兩個區塊分開，你需要留白或者負空間。你一定要在一開始就考慮到：將負空間視爲視覺平衡所需要的設計元素組合。

儀表盤設計：Wingle

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

功能和工具的數量取決於儀表盤的用途和其用戶的主要目標。爲了自由地移動，人類需要兩條腿，狗需要四條腿，而蜘蛛需要八條腿。一個擁有太多功能的儀表盤就像一條有着六條腿的狗一樣優秀，但這有點讓人毛骨悚然。

不要在控制面板上放太多工具，只需要在最表層放置用戶必需品就好。太多的可用工具會讓用戶困惑且被嚇退，因爲這會讓儀表盤看起來很複雜。個性化總是比定製要好。

儀表盤設計：Band

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

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

儀表盤數據微件的選擇取決於你儀表盤的目的和你的受衆。請思考以下問題：

請選擇容易理解和可讀的微件。這裡有一個讓人困惑的與最易理解的微件對比示例：‍‍‍‍‍‍‍‍‍

請考慮什麼是主要的目標來吸引用戶的注意力。

例如，如果你的首要任務是業績目標，則應使用數字；如果你需要比較數值，則應使用折線圖或者柱狀圖；如果是爲了激勵團隊，則應使用具有亮點突出的排行榜。

選擇一個不合適的部件或默認的小部件模板可能會混淆用戶或導致他們誤解數據。最好的解決方案總是分析和測試的結果。

最好的小部件設計是簡約的，並且易於閱讀的。

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

六、視覺設計：通用技巧 Visual design: general tips

我們已經構建了儀表盤的大腦和身體。最後需要構建的是儀表盤的皮膚——最表面的一層。這可以根據好的經典設計的基本原則來完成，但這裡仍然有些細節需要具體說明。

1. 簡約性

一個儀表盤應該跟你喜歡的工作桌面一樣乾淨：它只有必需的文件和工具，沒有任何干擾項。

儀表盤設計：MEMO

2. 配色板

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

首選，你需要選擇一個基礎色，然後選擇一個輔助色。每個顏色都必須有特定的用途。一個顏色可以用來結合/組合元素，另一種顏色可以用來強調元素。顏色還經常用來展示一個元素是主動的還是被動的。避免使用可能具有負面含義的顏色。

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

如果儀表盤提供可定製的顏色，請確保所有的可選顏色看上去都不錯。Aodbe Color CC 是一個用來選擇配色的優秀工具。

3. 強調

語義的強調之處應和視覺的強調之處一一對應。你可以使用顏色（對比、亮度）、形狀、大小、負空間等等來強調元素。

4. 可讀性和數字格式

這是確保視覺上清晰清楚的一切：乾淨的佈局，視覺層級，突出重點，對比鮮明的元素，適當的字體，且這些字體也必須具有對比性和易讀性。

高精度的數字格式是難以讓人理解的。最好的辦法是將任何數字四捨五入，並減少較長的數字。

七、適應性 Adaptability

在實踐過程中，當桌面版本是用戶的優先選擇時，則應該優先構建網頁版，然後創建移動端的。如果你的目標受衆主要使用移動端版本，則應首先着眼於構建移動端的儀表盤。然後再創建桌面端的。

儀表盤設計：Snap

八、結論 In conclusion

設計一個優先的儀表盤並不容易。我們將其創建過程類比作人類發展，因爲它是記住重要東西和展示工作的連續階段的好方法。當你在開發你的儀表盤，請不斷地自我提問：是否一切各就其位、各司其職？是否有多餘的部分嗎（需要去掉）？各部位協作時工作正常嗎？用戶會喜歡這樣的結果嗎？這（功能）會有用嗎？

如你所見，視覺設計實際上是設計師最後需要擔心的事。如果你什麼都沒有漏過，你的儀表盤將對你的用戶產生有價值的幫助，而不只是一個玩具。

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

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

作者：Erik Messaki

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

本文由@TCC翻譯情報局 翻譯發佈於人人都是產品經理，未經許可，禁止轉載。

題圖來自 Pexels，基於 CC0 協議