2022-1-3 資深UI設計者
你知道儀表盤應該如何被設計，才能更符合用戶需求、滿足用戶的使用期待嗎？過于復雜的儀表盤設計可能是不可取的，在進行儀表盤設計前，你需要做好相應的規劃和設計策略。本篇文章里，作者總結了儀表盤設計的七個階段，一起來看一下。
一個看起來很酷炫的儀表盤可能有很多功能但實際上，它通常只是一個閃亮的玩具，而不是一個有用的工具。這些儀表盤類似于多臂機器人，能隨機拖拽數據并將這些數據分門別類地整理在一起，讓你目瞪口呆。
就像魔術師玩紙牌戲法一樣，它看起來令人印象深刻，但它的大腦和巧奪天工的手法一樣好。
（[1] Widget：全稱Web widget是一種Web2.0 的衍生物，它好像是一個小型的應用程式，是一小塊可以在任意一個基于HTML的網頁上執行代碼構成的小部件。）
玩這個儀表盤機器人一開始可能很有趣，但最終會讓客戶失望，因為它沒有達到用戶的期望值。為什么會發生這種情況呢？設計一個工具而不是一個很快就會被丟棄的玩具的訣竅是什么呢?
讓我們深入剖析儀表盤設計。
儀表盤是由客戶、設計師和開發人員共同設計的，他們每個人通過合作做出一定的貢獻，并且所有的基礎功能在一開始就確定了（或者他們沒標明）。
一個有思考能力的人是從胚胎發育而來的。腦細胞和神經細胞是最先形成的，隨后是身體的其他細胞，而這正是任何可行項目被創建的方式。
第一個階段是最重要的。如果你在這個階段遺漏了什么，那么任何奇特的設計都無法挽救。因為在這一階段你正在為儀表盤的長期發展奠定基礎。“我為什么被設計出來？誰需要我？”如果儀表盤會說話的，它一定會問這些問題。你能回答這些問題嗎？
這些問題的答案將構成你設計理念的基礎（現在你可以告訴你的儀表盤存在的意義了）。
網頁Perls儀表盤設計
1）儀表盤的“智能”是其實現目標的能力。
有些人認為只有分析類儀表盤才需要智能性能，而可操作的儀表板只需要可讀性，實際上這個想法是錯的。比方說，你有一個用于激勵員工的操作類儀表盤，用戶的注意力應該放在比較結果，然而設計師會讓其在視覺效果上更加突出。
2）儀表盤上沒有瑣碎的細節。儀表盤上需要展示足夠的信息使用戶來做決定。設計師的職責是幫助用戶，而不是通過一系列很酷的小微件來幫助用戶解決難題。任何不是出于這個目的設計的都會阻礙用戶使用。
3）從項目的初始階段到最終階段，設計師必須關注公司的目標、儀表盤的目標，和用戶的目標。否則儀表盤將永遠無法運行。
儀表盤設計：Clover
儀表盤的數據就像是身體內的循環血液。我們必須了解它們來自哪里，它們在被用戶需要時是如何被處理的，以及它們該如何被可視化。
理所當然地，設計師需要了解指標的目的，顯然，這將幫助他們選擇合適的微件，但不僅僅只有這些。
舉個例子，一個客戶想在屏幕上看到許多不同的讀數。你（作為設計師）并不需要從屏幕上去除任何東西來清理儀表盤的展示空間；但你可以做的是突出最重要的東西，并在視覺上淡化次要的內容。
然而，要做到這一點，你必須得知道哪個指標是最重要的且哪個是次要的。
儀表盤設計：Bidding Car
最重要的一系列指標有助于實現目標，且能幫助控制流程（或者產品），例如：
指標的選擇還需要了解受眾。用戶應該看到哪個 KPI以及他們認為最容易理解的視覺表現形式？
人們喜歡對應他們目標的一系列數字。
儀表盤設計：Panch
想象一下，你進入一家酒店房間，看到一張床、一面桌椅、一個鏡子和一個衣柜，就算不打開壁櫥，你也能猜到里面有什么，吹風機、拖鞋、浴巾就放在你所認為的地方——有人已經保證了這些。
一個好的儀表盤設計就如同那個房間：它是干凈、整潔且可被預知的。你可以立即看到所有必需品，并且直觀地知道剩下的東西會在哪里。設計師們有他們自己的工具來確保儀表盤設計的整潔性。
首先，你需要理清思路，在發揮創意之前，要對所有數據進行排序，將其分類，并充分理解優先級等等，確定用戶可以立即看見的關鍵指標數據。
1）視覺層級必須反應信息層級。
設計師可以通過微件的大小及位置來表現數據的層級權重。如果你的用戶是從左往右閱讀的，那么關鍵信息必須放在左上角，而相關性最弱的信息放在底部右下角。
對數據重要性的排序方法取決于儀表盤的設計用途。重要的是根據信息的優先級構造信息并搭建邏輯鏈路。
2）將信息面板視為一個故事，而不是一系列的數據點。
網格對于創建頁面的總體布局、排序、協調和對齊元素非常有用。
系統的模塊類似于一個住宅中的功能分區：臥室用來睡眠，餐廳用來吃飯之類，每個區域有其功能。你的舒適性取決于它們放置的位置有多方便。
一個糟糕的布局不能靠翻新和布置家具來挽救，因此與之相類似的，信息模塊的布局需要被提前考慮。信息模塊幫助你展示內容的層次結構，且幫助你根據數據內容的重要性、相關性和邏輯連接對內容進行分組。每個模塊應該在給定過程中執行特定的目的。
如果你在去往廚房的路上需要穿過一個有兩扇門的走廊，那么這是一個糟糕的室內布局。相互關聯的進程則會假定在邏輯上也具有相似性。如果一個模塊的進程需要來自另一個模塊的數據，那么數據的布局就需要有近似性。
這一點必須事先考慮，這樣用戶就不需要在晦澀難懂的信息海里挖掘他們需要的信息。所有相關的信息應依據相似性，從最重要到最不重要性來進行分組和定位。
沒有人需要一個與臥室相連的廚房。為了將兩個區塊分開，你需要留白或者負空間。你一定要在一開始就考慮到：將負空間視為視覺平衡所需要的設計元素組合。
儀表盤設計：Wingle
功能和工具的數量取決于儀表盤的用途和其用戶的主要目標。為了自由地移動，人類需要兩條腿，狗需要四條腿，而蜘蛛需要八條腿。一個擁有太多功能的儀表盤就像一條有著六條腿的狗一樣優秀，但這有點讓人毛骨悚然。
不要在控制面板上放太多工具，只需要在最表層放置用戶必需品就好。太多的可用工具會讓用戶困惑且被嚇退，因為這會讓儀表盤看起來很復雜。個性化總是比定制要好。
儀表盤設計：Band
如果屏幕上有超過 5～7 個的小微件，人們則會難以理解其內容。所以我們（設計師）的工作是讓相關數據可以被訪問但數量保持一定，不過多，這樣就能使用戶能在數秒中理解他們看到的內容。視覺可視化的工具包括：
儀表盤數據微件的選擇取決于你儀表盤的目的和你的受眾。請思考以下問題：
請選擇容易理解和可讀的微件。這里有一個讓人困惑的與最易理解的微件對比示例：?????????
請考慮什么是主要的目標來吸引用戶的注意力。
例如，如果你的首要任務是業績目標，則應使用數字；如果你需要比較數值，則應使用折線圖或者柱狀圖；如果是為了激勵團隊，則應使用具有亮點突出的排行榜。
選擇一個不合適的部件或默認的小部件模板可能會混淆用戶或導致他們誤解數據。最好的解決方案總是分析和測試的結果。
最好的小部件設計是簡約的，并且易于閱讀的。
例如，一個 3D 圖可能看起來令人印象深刻，但它占用了用戶太多的注意力，最終證明它會分散用戶的注意力。漸變、過度使用顏色和太多細節也同樣會造成困擾。
我們已經構建了儀表盤的大腦和身體。最后需要構建的是儀表盤的皮膚——最表面的一層。這可以根據好的經典設計的基本原則來完成，但這里仍然有些細節需要具體說明。
一個儀表盤應該跟你喜歡的工作桌面一樣干凈：它只有必需的文件和工具，沒有任何干擾項。
儀表盤設計：MEMO
儀表盤的顏色選擇必須服務于一個目的：盡可能清晰地呈現信息。你的配色板越大，就越難清晰地展示信息。所以不要在儀表盤上使用過多顏色。盡可能用相同顏色的深淺色或者不同的色相。
首選，你需要選擇一個基礎色，然后選擇一個輔助色。每個顏色都必須有特定的用途。一個顏色可以用來結合/組合元素，另一種顏色可以用來強調元素。顏色還經常用來展示一個元素是主動的還是被動的。避免使用可能具有負面含義的顏色。
例如在下面的例子中，紅色看上去像展示一些不好且不受歡迎的數據：
如果儀表盤提供可定制的顏色，請確保所有的可選顏色看上去都不錯。Aodbe Color CC 是一個用來選擇配色的優秀工具。
語義的強調之處應和視覺的強調之處一一對應。你可以使用顏色（對比、亮度）、形狀、大小、負空間等等來強調元素。
這是確保視覺上清晰清楚的一切：干凈的布局，視覺層級，突出重點，對比鮮明的元素，適當的字體，且這些字體也必須具有對比性和易讀性。
高精度的數字格式是難以讓人理解的。最好的辦法是將任何數字四舍五入，并減少較長的數字。
在實踐過程中，當桌面版本是用戶的優先選擇時，則應該優先構建網頁版，然后創建移動端的。如果你的目標受眾主要使用移動端版本，則應首先著眼于構建移動端的儀表盤。然后再創建桌面端的。
儀表盤設計：Snap
設計一個優先的儀表盤并不容易。我們將其創建過程類比作人類發展，因為它是記住重要東西和展示工作的連續階段的好方法。當你在開發你的儀表盤，請不斷地自我提問：是否一切各就其位、各司其職？是否有多余的部分嗎（需要去掉）？各部位協作時工作正常嗎？用戶會喜歡這樣的結果嗎？這（功能）會有用嗎？
如你所見，視覺設計實際上是設計師最后需要擔心的事。如果你什么都沒有漏過，你的儀表盤將對你的用戶產生有價值的幫助，而不只是一個玩具。
本文翻譯已獲得作者的正式授權（授權截圖如下）
文章來源：人人都是產品經理 作者：TCC翻譯情報局
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務