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