Illustration: Outcrowd
1、構(gòu)思儀表盤界面的大腦
讓我們深入研究設(shè)計解剖學(xué)。儀表盤的“父母”是客戶端、設(shè)計人員和開發(fā)人員，每個組件設(shè)計都需要他們的合作產(chǎn)出，所有關(guān)鍵點在一開始要做出說明。
智人是由胚胎發(fā)展而來的。首先形成的是腦細胞和神經(jīng)細胞，然后是身體的其他細胞。這正是任何可行的項目應(yīng)該遵循的方式。第一個階段是最重要的。如果你忽視這個階段，再花哨的設(shè)計也不能挽救局面。這正是為儀表盤的長期發(fā)展奠定基礎(chǔ)。
儀表盤如果會說話的話，它會問“我為什么出生？誰需要我?“。
試問你能回答嗎？因此你需要明確:
-
儀表盤將如何助力公司目標(biāo)? -
什么結(jié)構(gòu)，功能和視覺效果將幫助儀表盤服務(wù)好用戶? -
哪種設(shè)計最適合目標(biāo)受眾?
這些問題的答案將構(gòu)成你的設(shè)計理念基礎(chǔ)。
Perls
儀表盤中沒有瑣碎的細節(jié)。
儀表盤顯示的信息應(yīng)該使用戶能夠做出決策。設(shè)計師的工作是幫助用戶解決問題，而不是讓他們使用一堆很酷的小工具。任何對目標(biāo)不起作用的事情都會與目標(biāo)背道而馳。
從項目的最初階段到最后階段，設(shè)計師必須關(guān)注公司的目標(biāo)、儀表盤的目標(biāo)和用戶的目標(biāo)。
否則，儀表盤將永遠不會做的更好。
Clover
2. 數(shù)據(jù)及關(guān)鍵指標(biāo)選擇:循環(huán)系統(tǒng)
儀表盤數(shù)據(jù)就像循環(huán)的血液。我們必須理解它們來自哪里，當(dāng)用戶需要它們時如何處理，以及應(yīng)該如何可視化。
設(shè)計師需要理解數(shù)據(jù)的目的。顯然，這將幫助他們選擇合適的組件，但還有更多的工作要做。例如，用戶希望在屏幕上看到大量不同的讀數(shù)。你不需要移除任何東西來清除一些空間，但你可以做的是突出最重要的元素，并在視覺上“弱化”次要的東西。然而，要做到這一點，你必須知道數(shù)據(jù)的優(yōu)先級。
Bidding Car
最重要的指標(biāo)是哪些數(shù)據(jù)能幫助達成目標(biāo)。例如:
-
顯示實際成功率; -
影響產(chǎn)品的感知方式; -
激勵創(chuàng)造產(chǎn)品的團隊。
參數(shù)的選擇也需要了解用戶。用戶應(yīng)該看到哪個關(guān)鍵指標(biāo)，他們認為什么樣的可視化表現(xiàn)最容易理解？
人們喜歡看到與他們的目標(biāo)相符的數(shù)字。
Panch
3. 儀表盤結(jié)構(gòu):骨架
想象進入一個酒店房間，看到一張床，一張桌子和椅子，一面鏡子和一個壁櫥。甚至不用打開壁櫥，你就能猜到里面有什么。吹風(fēng)機、拖鞋和毛巾都在你想要的地方——有人確保了這些。一個好的儀表盤就像那個房間。它是干凈的，整潔的，可預(yù)測的。你馬上就能看到所有的要點，憑直覺知道在哪里可以找到其余的內(nèi)容。
設(shè)計師有自己的工具來確保整潔。
1) 層次結(jié)構(gòu)
首先，你得整理思緒。在開始設(shè)計之前，一定要對所有數(shù)據(jù)進行排序，將其分類，了解什么是最先發(fā)生的，什么是最后發(fā)生的，接下來是什么等等。確定用戶必須馬上看到的關(guān)鍵內(nèi)容。
視覺層次結(jié)構(gòu)必須反映信息層次結(jié)構(gòu)。
數(shù)據(jù)層次結(jié)構(gòu)通過小組件的大小和位置表示。如果你的讀者從左到右閱讀，關(guān)鍵信息必須放在左上角，最不相關(guān)的信息將在右下角。
對數(shù)據(jù)排序的方法將取決于儀表盤的用途。重要的是根據(jù)信息的優(yōu)先級組織信息，并創(chuàng)建邏輯場景。
把信息面板看作是一個故事，而不是一系列數(shù)據(jù)點。
2) 網(wǎng)格
網(wǎng)格對于創(chuàng)建頁面的總體布局、排序、平衡和對齊元素非常有用。
3) 信息模塊
模塊系統(tǒng)類似于公寓的分區(qū)。臥室是用來睡覺的，餐廳是用來吃飯的——每個區(qū)域都有自己的功能。你的舒適度取決于他們所處位置的便利程度。糟糕的布局不能通過裝修或家具來修復(fù)。相應(yīng)地，必須提前考慮模塊劃分。
模塊幫助顯示內(nèi)容層次結(jié)構(gòu)，根據(jù)數(shù)據(jù)的重要性、相關(guān)性和邏輯連接對數(shù)據(jù)進行分組。每個模塊都應(yīng)該在給定的流程中服務(wù)于特定的目的。
4) 連續(xù)性和接近性
如果你去廚房需要經(jīng)過有兩扇門的走廊，這是一個糟糕的布局。互連的流程假定邏輯接近。如果一個模塊中的流程需要來自另一個模塊的信息，那么布局上應(yīng)該保證數(shù)據(jù)的連續(xù)性。這一點必須提前考慮，這樣用戶就不必在晦澀的存儲空間中尋找他們需要的信息。
Illustration: Outcrowd
所有相關(guān)信息都應(yīng)按重要到不重要的順序進行分組，并就近放置。
5) 分離模塊
沒有人需要一個延伸到臥室的廚房。為了將一個模塊與另一個模塊分開，你需要負空間。確保從一開始就考慮到這一點:將負空間視為需要視覺平衡的設(shè)計元素的組合。
Wingle
4. 功能:肌肉
功能和工具的數(shù)量由儀表盤的用途及其用戶的關(guān)鍵目標(biāo)決定。
要想自由活動，人類只需要兩條腿，狗需要四條腿，蜘蛛需要八條腿。一個功能太多的儀表盤就像一條六條腿的狗一樣，這有點令人毛骨悚然。
不要在控制面板上放置過多的工具。用戶只需要手邊有必要的東西。過多的可用工具會讓人們感到困惑，并嚇走他們，因為它看起來太復(fù)雜了。個性化總是比標(biāo)準(zhǔn)化好。
Band
5.小組件:重要的器官
如果屏幕上有超過5到7個小組件，人們就很難理解內(nèi)容。因此，我們的工作是讓相關(guān)數(shù)據(jù)易讀，但不過量。用戶應(yīng)該在幾秒鐘內(nèi)理解他們所看到的內(nèi)容。
數(shù)據(jù)可視化工具包括:
-
表格 -
圖表 -
示意圖 -
卡片 -
指標(biāo) -
地圖 -
圖片 -
分組 -
篩選器 -
列表 -
選擇樹
Activity
小組件的選擇取決于儀表盤的用途和用戶。想想以下幾點:
-
哪個組件能最好地顯示一個特定的KPI? -
用戶可以立即看到什么? -
哪個組件是用戶最容易理解的? -
什么可以幫助用戶更快地找到他們需要的東西?
選擇易于理解和閱讀的小組件。
這里是一個令人困惑的小組件的例子:
想想主要的“目標(biāo)”來吸引用戶的注意力。例如，如果你的優(yōu)先級是績效目標(biāo)，你應(yīng)該使用數(shù)字;如果你需要比較值，用直線或柱狀圖會很好;為了激勵團隊，可以使用帶有相關(guān)亮點的排行榜。
不正確選擇的小組件或默認小組件模板可能會使用戶混淆或?qū)е滤麄冋`解數(shù)據(jù)。
最好的解決方案是分析和測試的結(jié)果。
最好的小組件設(shè)計是極簡和易于閱讀的。例如，一個3D圖表可能看起來令人印象深刻，但它占用了用戶太多的注意力，最終證明會分散用戶的注意力。這也適用于漸變、過度使用顏色和過多的細節(jié)。
6. 視覺設(shè)計:一般技巧
我們已經(jīng)創(chuàng)建了儀表盤的思想和身體。唯一要做的就是皮膚——最外層。這可以根據(jù)優(yōu)秀設(shè)計的基本原則來實現(xiàn)，但仍有一些新的需要注意的細節(jié)。
1) 簡單
儀表盤應(yīng)該像你喜歡工作的桌子一樣干凈:它必須只有必要的文件和工具，沒有干擾。
MEMO
2) 顏色
儀表盤顏色的選擇必須有一個目的:盡可能清晰地顯示信息。顏色跨度越大，就越難把數(shù)據(jù)展示清晰。所以不要讓儀表盤的顏色過多。使用同一顏色的深淺是一個好的辦法。
首先要選擇底色，然后是補色。每種顏色都必須有特定的用途。一種顏色可以用來組合元素，另一種顏色可以用來高亮。顏色還能體現(xiàn)一個元素是積極的還是消極的。
避免使用可能有負面含義的顏色。例如，在這個例子中，紅色看起來像是代表壞的和不受歡迎的東西:
如果儀表盤提供了可定制的顏色，確保所有可用的選擇看起來都比較舒服。
選擇顏色組合的一個好工具是Adobe color CC。
3) 突出
語義高亮應(yīng)該與視覺高亮相對應(yīng)。為了突出一個元素，你可以使用顏色(對比度，亮度)，形狀，大小，負空間等。
4) 可讀性和數(shù)字格式化
這是確保視覺清晰度的重要因素:干凈的布局，視覺層次，重點突出，對比元素，適當(dāng)?shù)淖煮w，這些字體也必須具有對比性和易讀性。
高精度的數(shù)字格式很難理解。最好把所有的數(shù)字都四舍五入，然后把較長的數(shù)字尾巴去掉。
7. 適應(yīng)性
在實踐中，當(dāng)用戶優(yōu)先考慮桌面版本時，在移動版本之前創(chuàng)建網(wǎng)頁版本是合理的。如果你的目標(biāo)用戶主要使用的是手機版本，那么你可以先從移動設(shè)備著手構(gòu)建儀表盤，然后再開發(fā)桌面版本。
Snap
總結(jié)
設(shè)計一個好的儀表盤不是一件容易的事情。我們把它比作人類的發(fā)展，因為它是一個很好的方式來呈現(xiàn)重要的東西。當(dāng)你在設(shè)計儀表盤時，請不斷地問自己:是否一切都已就緒？有多余的肢體嗎?身體的各個部位協(xié)同工作嗎?用戶會喜歡這個結(jié)果嗎？它有用嗎？
正如你所看到的，視覺設(shè)計實際上是設(shè)計師最不應(yīng)該擔(dān)心的事情。
最后，彩云再分享一組常用的后臺圖表界面組件庫，相信會對大家的日常設(shè)計工作有幫助，
本文翻譯已獲得作者的正式授權(quán)。
原文地址：medium
作者：Erik Messaki
譯文地址：彩云譯設(shè)計（公眾號）
譯者：彩云Sky
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》后臺界面設(shè)計的7條原則
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.gyxygd.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司