▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們歡迎來(lái)到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)
三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)共 3519 字，預(yù)計(jì)閱讀 9 分鐘一個(gè)看起來(lái)很酷的儀表盤可能有很多功能、小工具和好的視覺(jué)效果。但實(shí)際上，它往往被設(shè)計(jì)成只是一個(gè)好看的玩具，而不是一個(gè)有用的工具。類似于一個(gè)多臂機(jī)器人，它能把數(shù)據(jù)整理成整齊的一堆，然后用明亮的數(shù)據(jù)讓人眼花繚亂。
擺弄這個(gè)機(jī)器人可能很有趣，但最終會(huì)讓用它的人感到失望。
為什么會(huì)發(fā)生這種情況？創(chuàng)造一種工具而不是一種可以很快被丟棄的玩具的訣竅是什么？
一. 構(gòu)思儀表盤界面的大腦
讓我們深入研究設(shè)計(jì)解剖學(xué)。儀表盤的 “父母” 是客戶端、設(shè)計(jì)人員和開(kāi)發(fā)人員，每個(gè)組件設(shè)計(jì)都需要他們的合作產(chǎn)出，所有關(guān)鍵點(diǎn)在一開(kāi)始要做出說(shuō)明。智人是由胚胎發(fā)展而來(lái)的。首先形成的是腦細(xì)胞和神經(jīng)細(xì)胞，然后是身體的其他細(xì)胞。這正是任何可行的項(xiàng)目應(yīng)該遵循的方式。第一個(gè)階段是最重要的。如果你忽視這個(gè)階段，再花哨的設(shè)計(jì)也不能挽救局面。這正是為儀表盤的長(zhǎng)期發(fā)展奠定基礎(chǔ)。儀表盤如果會(huì)說(shuō)話的話，它會(huì)問(wèn) “我為什么出生？誰(shuí)需要我?“。- 什么結(jié)構(gòu)，功能和視覺(jué)效果將幫助儀表盤服務(wù)好用戶?
- 哪種設(shè)計(jì)最適合目標(biāo)受眾?
這些問(wèn)題的答案將構(gòu)成你的設(shè)計(jì)理念基礎(chǔ)。儀表盤中沒(méi)有瑣碎的細(xì)節(jié)。儀表盤顯示的信息應(yīng)該使用戶能夠做出決策。設(shè)計(jì)師的工作是幫助用戶解決問(wèn)題，而不是讓他們使用一堆很酷的小工具。任何對(duì)目標(biāo)不起作用的事情都會(huì)與目標(biāo)背道而馳。從項(xiàng)目的最初階段到最后階段，設(shè)計(jì)師必須關(guān)注公司的目標(biāo)、儀表盤的目標(biāo)和用戶的目標(biāo)。否則，儀表盤將永遠(yuǎn)不會(huì)做的更好。二. 數(shù)據(jù)及關(guān)鍵指標(biāo)選擇:循環(huán)系統(tǒng)
儀表盤數(shù)據(jù)就像循環(huán)的血液。我們必須理解它們來(lái)自哪里，當(dāng)用戶需要它們時(shí)如何處理，以及應(yīng)該如何可視化。設(shè)計(jì)師需要理解數(shù)據(jù)的目的。顯然，這將幫助他們選擇合適的組件，但還有更多的工作要做。例如，用戶希望在屏幕上看到大量不同的讀數(shù)。你不需要移除任何東西來(lái)清除一些空間，但你可以做的是突出最重要的元素，并在視覺(jué)上 “弱化” 次要的東西。然而，要做到這一點(diǎn)，你必須知道數(shù)據(jù)的優(yōu)先級(jí)。
最重要的指標(biāo)是哪些數(shù)據(jù)能幫助達(dá)成目標(biāo)。例如:
- 激勵(lì)創(chuàng)造產(chǎn)品的團(tuán)隊(duì)。
參數(shù)的選擇也需要了解用戶。用戶應(yīng)該看到哪個(gè)關(guān)鍵指標(biāo)，他們認(rèn)為什么樣的可視化表現(xiàn)最容易理解？人們喜歡看到與他們的目標(biāo)相符的數(shù)字。想象進(jìn)入一個(gè)酒店房間，看到一張床，一張桌子和椅子，一面鏡子和一個(gè)壁櫥。甚至不用打開(kāi)壁櫥，你就能猜到里面有什么。吹風(fēng)機(jī)、拖鞋和毛巾都在你想要的地方——有人確保了這些。一個(gè)好的儀表盤就像那個(gè)房間。它是干凈的，整潔的，可預(yù)測(cè)的。你馬上就能看到所有的要點(diǎn)，憑直覺(jué)知道在哪里可以找到其余的內(nèi)容。設(shè)計(jì)師有自己的工具來(lái)確保整潔。
層次結(jié)構(gòu)
首先，你得整理思緒。在開(kāi)始設(shè)計(jì)之前，一定要對(duì)所有數(shù)據(jù)進(jìn)行排序，將其分類，了解什么是最先發(fā)生的，什么是最后發(fā)生的，接下來(lái)是什么等等。確定用戶必須馬上看到的關(guān)鍵內(nèi)容。視覺(jué)層次結(jié)構(gòu)必須反映信息層次結(jié)構(gòu)。數(shù)據(jù)層次結(jié)構(gòu)通過(guò)小組件的大小和位置表示。如果你的讀者從左到右閱讀，關(guān)鍵信息必須放在左上角，最不相關(guān)的信息將在右下角。對(duì)數(shù)據(jù)排序的方法將取決于儀表盤的用途。重要的是根據(jù)信息的優(yōu)先級(jí)組織信息，并創(chuàng)建邏輯場(chǎng)景。把信息面板看作是一個(gè)故事，而不是一系列數(shù)據(jù)點(diǎn)。
網(wǎng)格
網(wǎng)格對(duì)于創(chuàng)建頁(yè)面的總體布局、排序、平衡和對(duì)齊元素非常有用。
信息模塊
模塊系統(tǒng)類似于公寓的分區(qū)。臥室是用來(lái)睡覺(jué)的，餐廳是用來(lái)吃飯的——每個(gè)區(qū)域都有自己的功能。你的舒適度取決于他們所處位置的便利程度。糟糕的布局不能通過(guò)裝修或家具來(lái)修復(fù)。相應(yīng)地，必須提前考慮模塊劃分。模塊幫助顯示內(nèi)容層次結(jié)構(gòu)，根據(jù)數(shù)據(jù)的重要性、相關(guān)性和邏輯連接對(duì)數(shù)據(jù)進(jìn)行分組。每個(gè)模塊都應(yīng)該在給定的流程中服務(wù)于特定的目的。
連續(xù)性和接近性
如果你去廚房需要經(jīng)過(guò)有兩扇門的走廊，這是一個(gè)糟糕的布局。互連的流程假定邏輯接近。如果一個(gè)模塊中的流程需要來(lái)自另一個(gè)模塊的信息，那么布局上應(yīng)該保證數(shù)據(jù)的連續(xù)性。這一點(diǎn)必須提前考慮，這樣用戶就不必在晦澀的存儲(chǔ)空間中尋找他們需要的信息。所有相關(guān)信息都應(yīng)按重要到不重要的順序進(jìn)行分組，并就近放置。
分離模塊
沒(méi)有人需要一個(gè)延伸到臥室的廚房。為了將一個(gè)模塊與另一個(gè)模塊分開(kāi)，你需要負(fù)空間。確保從一開(kāi)始就考慮到這一點(diǎn):將負(fù)空間視為需要視覺(jué)平衡的設(shè)計(jì)元素的組合。四. 功能:肌肉
功能和工具的數(shù)量由儀表盤的用途及其用戶的關(guān)鍵目標(biāo)決定。要想自由活動(dòng)，人類只需要兩條腿，狗需要四條腿，蜘蛛需要八條腿。一個(gè)功能太多的儀表盤就像一條六條腿的狗一樣，這有點(diǎn)令人毛骨悚然。
不要在控制面板上放置過(guò)多的工具。用戶只需要手邊有必要的東西。過(guò)多的可用工具會(huì)讓人們感到困惑，并嚇走他們，因?yàn)樗雌饋?lái)太復(fù)雜了。個(gè)性化總是比標(biāo)準(zhǔn)化好。
五.小組件:重要的器官
如果屏幕上有超過(guò) 5 到 7 個(gè)小組件，人們就很難理解內(nèi)容。因此，我們的工作是讓相關(guān)數(shù)據(jù)易讀，但不過(guò)量。用戶應(yīng)該在幾秒鐘內(nèi)理解他們所看到的內(nèi)容。
小組件的選擇取決于儀表盤的用途和用戶。想想以下幾點(diǎn):- 哪個(gè)組件能最好地顯示一個(gè)特定的 KPI ?
想想主要的 “目標(biāo)” 來(lái)吸引用戶的注意力。例如，如果你的優(yōu)先級(jí)是績(jī)效目標(biāo)，你應(yīng)該使用數(shù)字;如果你需要比較值，用直線或柱狀圖會(huì)很好;為了激勵(lì)團(tuán)隊(duì)，可以使用帶有相關(guān)亮點(diǎn)的排行榜。不正確選擇的小組件或默認(rèn)小組件模板可能會(huì)使用戶混淆或?qū)е滤麄冋`解數(shù)據(jù)。最好的解決方案是分析和測(cè)試的結(jié)果。最好的小組件設(shè)計(jì)是極簡(jiǎn)和易于閱讀的。例如，一個(gè) 3D 圖表可能看起來(lái)令人印象深刻，但它占用了用戶太多的注意力，最終證明會(huì)分散用戶的注意力。這也適用于漸變、過(guò)度使用顏色和過(guò)多的細(xì)節(jié)。六. 視覺(jué)設(shè)計(jì):一般技巧
我們已經(jīng)創(chuàng)建了儀表盤的思想和身體。唯一要做的就是皮膚——最外層。這可以根據(jù)優(yōu)秀設(shè)計(jì)的基本原則來(lái)實(shí)現(xiàn)，但仍有一些新的需要注意的細(xì)節(jié)。
簡(jiǎn)單
儀表盤應(yīng)該像你喜歡工作的桌子一樣干凈:它必須只有必要的文件和工具，沒(méi)有干擾。儀表盤顏色的選擇必須有一個(gè)目的:盡可能清晰地顯示信息。顏色跨度越大，就越難把數(shù)據(jù)展示清晰。所以不要讓儀表盤的顏色過(guò)多。使用同一顏色的深淺是一個(gè)好的辦法。首先要選擇底色，然后是補(bǔ)色。每種顏色都必須有特定的用途。一種顏色可以用來(lái)組合元素，另一種顏色可以用來(lái)高亮。顏色還能體現(xiàn)一個(gè)元素是積極的還是消極的。避免使用可能有負(fù)面含義的顏色。例如，在這個(gè)例子中，紅色看起來(lái)像是代表壞的和不受歡迎的東西:如果儀表盤提供了可定制的顏色，確保所有可用的選擇看起來(lái)都比較舒服。選擇顏色組合的一個(gè)好工具是 Adobe color CC 。
突出
語(yǔ)義高亮應(yīng)該與視覺(jué)高亮相對(duì)應(yīng)。為了突出一個(gè)元素，你可以使用顏色 (對(duì)比度，亮度)，形狀，大小，負(fù)空間等。可讀性和數(shù)字格式化
這是確保視覺(jué)清晰度的重要因素:干凈的布局，視覺(jué)層次，重點(diǎn)突出，對(duì)比元素，適當(dāng)?shù)淖煮w，這些字體也必須具有對(duì)比性和易讀性。高精度的數(shù)字格式很難理解。最好把所有的數(shù)字都四舍五入，然后把較長(zhǎng)的數(shù)字尾巴去掉。七. 適應(yīng)性
在實(shí)踐中，當(dāng)用戶優(yōu)先考慮桌面版本時(shí)，在移動(dòng)版本之前創(chuàng)建網(wǎng)頁(yè)版本是合理的。如果你的目標(biāo)用戶主要使用的是手機(jī)版本，那么你可以先從移動(dòng)設(shè)備著手構(gòu)建儀表盤，然后再開(kāi)發(fā)桌面版本。設(shè)計(jì)一個(gè)好的儀表盤不是一件容易的事情。我們把它比作人類的發(fā)展，因?yàn)樗且粋€(gè)很好的方式來(lái)呈現(xiàn)重要的東西。當(dāng)你在設(shè)計(jì)儀表盤時(shí)，請(qǐng)不斷地問(wèn)自己:是否一切都已就緒？有多余的肢體嗎?身體的各個(gè)部位協(xié)同工作嗎?用戶會(huì)喜歡這個(gè)結(jié)果嗎？它有用嗎？
正如你所看到的，視覺(jué)設(shè)計(jì)實(shí)際上是設(shè)計(jì)師最不應(yīng)該擔(dān)心的事情。
更多好文推薦：
原創(chuàng)精選｜從行為設(shè)計(jì)探索抖音上癮的秘密
原創(chuàng)精選｜多語(yǔ)言用戶界面到底應(yīng)該如何設(shè)計(jì)！
原創(chuàng)精選 | 了解這些心理學(xué)原則，你才能成為產(chǎn)品設(shè)計(jì)師！
原創(chuàng)精選｜如何制定產(chǎn)品的設(shè)計(jì)原則？設(shè)計(jì)總監(jiān)帶你一起從經(jīng)典案例中總結(jié)經(jīng)驗(yàn)
原創(chuàng)精選｜如何幫助兒童學(xué)習(xí)金融知識(shí)？這款銀行游戲設(shè)計(jì)一定可以給你啟發(fā) （中）
原創(chuàng)精選｜如何利用 HSLuv 色彩模型創(chuàng)建人眼感知均勻的色彩系統(tǒng)！
原創(chuàng)精選 | 設(shè)計(jì)總監(jiān)教你如何使用機(jī)會(huì)畫(huà)布，掌握設(shè)計(jì)思維方法！
?? 我們一起聊設(shè)計(jì) ???♂?期待與更多優(yōu)秀設(shè)計(jì)師一起成長(zhǎng)PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時(shí)充電。分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí)，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲(chóng)微信號(hào)【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號(hào)三分設(shè)的粉絲）
點(diǎn)開(kāi)下方公眾號(hào) ?? 點(diǎn)擊右上角【...】 ?? 設(shè)為星標(biāo)
