後臺界面設計的 7 條原則

B 端界面設計越來越受到重視，但設計師單從界面設計總感覺沒有太多值得發揮的地方，其實對於 B 端界面設計來說，視覺在其中的作用真的很有限，需要設計師有更多的深度思考。今天這篇文章就從更加深入的角度去反思 B 端界面的底層邏輯，一起來學習吧！

一個看起來很酷的儀表盤可能有很多功能、小工具和好的視覺效果。但實際上，它往往被設計成只是一個好看的玩具，而不是一個有用的工具。類似於一個多臂機器人，它能把數據整理成整齊的一堆，然後用明亮的數據讓人眼花繚亂。

擺弄這個機器人可能很有趣，但最終會讓用它的人感到失望。

爲什麼會發生這種情況？創造一種工具而不是一種可以很快被丟棄的玩具的訣竅是什麼？

Illustration: Outcrowd

** 01 **

構思儀表盤界面的大腦

▼

讓我們深入研究設計解剖學。儀表盤的 “父母” 是客戶端、設計人員和開發人員，每個組件設計都需要他們的合作產出，所有關鍵點在一開始要做出說明。

智人是由胚胎髮展而來的。首先形成的是腦細胞和神經細胞，然後是身體的其他細胞。這正是任何可行的項目應該遵循的方式。第一個階段是最重要的。如果你忽視這個階段，再花哨的設計也不能挽救局面。這正是爲儀表盤的長期發展奠定基礎。

儀表盤如果會說話的話，它會問 “我爲什麼出生？誰需要我?“。

試問你能回答嗎？因此你需要明確:

這些問題的答案將構成你的設計理念基礎。

Perls

儀表盤中沒有瑣碎的細節。

儀表盤顯示的信息應該使用戶能夠做出決策。設計師的工作是幫助用戶解決問題，而不是讓他們使用一堆很酷的小工具。任何對目標不起作用的事情都會與目標背道而馳。

從項目的最初階段到最後階段，設計師必須關注公司的目標、儀表盤的目標和用戶的目標。

否則，儀表盤將永遠不會做的更好。

Clover

** 02 **

數據及關鍵指標選擇：循環系統

▼

儀表盤數據就像循環的血液。我們必須理解它們來自哪裏，當用戶需要它們時如何處理，以及應該如何可視化。

設計師需要理解數據的目的。顯然，這將幫助他們選擇合適的組件，但還有更多的工作要做。例如，用戶希望在屏幕上看到大量不同的讀數。你不需要移除任何東西來清除一些空間，但你可以做的是突出最重要的元素，並在視覺上 “弱化” 次要的東西。然而，要做到這一點，你必須知道數據的優先級。

Bidding Car

最重要的指標是哪些數據能幫助達成目標。例如:

參數的選擇也需要了解用戶。用戶應該看到哪個關鍵指標，他們認爲什麼樣的可視化表現最容易理解？

人們喜歡看到與他們的目標相符的數字。

Panch

** 03 **

儀表盤結構：骨架

▼

想象進入一個酒店房間，看到一張牀，一張桌子和椅子，一面鏡子和一個壁櫥。甚至不用打開壁櫥，你就能猜到裏面有什麼。吹風機、拖鞋和毛巾都在你想要的地方——有人確保了這些。一個好的儀表盤就像那個房間。它是乾淨的，整潔的，可預測的。你馬上就能看到所有的要點，憑直覺知道在哪裏可以找到其餘的內容。

設計師有自己的工具來確保整潔。

層次結構

首先，你得整理思緒。在開始設計之前，一定要對所有數據進行排序，將其分類，瞭解什麼是最先發生的，什麼是最後發生的，接下來是什麼等等。確定用戶必須馬上看到的關鍵內容。

視覺層次結構必須反映信息層次結構。

數據層次結構通過小組件的大小和位置表示。如果你的讀者從左到右閱讀，關鍵信息必須放在左上角，最不相關的信息將在右下角。

對數據排序的方法將取決於儀表盤的用途。重要的是根據信息的優先級組織信息，並創建邏輯場景。

把信息面板看作是一個故事，而不是一系列數據點。

網格

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

信息模塊

模塊系統類似於公寓的分區。臥室是用來睡覺的，餐廳是用來喫飯的——每個區域都有自己的功能。你的舒適度取決於他們所處位置的便利程度。糟糕的佈局不能通過裝修或傢俱來修復。相應地，必須提前考慮模塊劃分。

模塊幫助顯示內容層次結構，根據數據的重要性、相關性和邏輯連接對數據進行分組。每個模塊都應該在給定的流程中服務於特定的目的。

連續性和接近性

如果你去廚房需要經過有兩扇門的走廊，這是一個糟糕的佈局。互連的流程假定邏輯接近。如果一個模塊中的流程需要來自另一個模塊的信息，那麼佈局上應該保證數據的連續性。這一點必須提前考慮，這樣用戶就不必在晦澀的存儲空間中尋找他們需要的信息。

Illustration: Outcrowd

所有相關信息都應按重要到不重要的順序進行分組，並就近放置。

分離模塊

沒有人需要一個延伸到臥室的廚房。爲了將一個模塊與另一個模塊分開，你需要負空間。確保從一開始就考慮到這一點: 將負空間視爲需要視覺平衡的設計元素的組合。

Wingle

** 04 **

功能：肌肉

▼

功能和工具的數量由儀表盤的用途及其用戶的關鍵目標決定。

要想自由活動，人類只需要兩條腿，狗需要四條腿，蜘蛛需要八條腿。一個功能太多的儀表盤就像一條六條腿的狗一樣，這有點令人毛骨悚然。

不要在控制面板上放置過多的工具。用戶只需要手邊有必要的東西。過多的可用工具會讓人們感到困惑，並嚇走他們，因爲它看起來太複雜了。個性化總是比標準化好。

Band

** 05 **

小組件：重要的器官

▼

如果屏幕上有超過 5 到 7 個小組件，人們就很難理解內容。因此，我們的工作是讓相關數據易讀，但不過量。用戶應該在幾秒鐘內理解他們所看到的內容。

數據可視化工具包括:

Activity

小組件的選擇取決於儀表盤的用途和用戶。想想以下幾點:

選擇易於理解和閱讀的小組件。

這裏是一個令人困惑的小組件的例子:

想想主要的 “目標” 來吸引用戶的注意力。例如，如果你的優先級是績效目標，你應該使用數字; 如果你需要比較值，用直線或柱狀圖會很好; 爲了激勵團隊，可以使用帶有相關亮點的排行榜。

不正確選擇的小組件或默認小組件模板可能會使用戶混淆或導致他們誤解數據。

最好的解決方案是分析和測試的結果。

最好的小組件設計是極簡和易於閱讀的。例如，一個 3D 圖表可能看起來令人印象深刻，但它佔用了用戶太多的注意力，最終證明會分散用戶的注意力。這也適用於漸變、過度使用顏色和過多的細節。

** 06 **

視覺設計：一般技巧

▼

我們已經創建了儀表盤的思想和身體。唯一要做的就是皮膚——最外層。這可以根據優秀設計的基本原則來實現，但仍有一些新的需要注意的細節。

簡單

儀表盤應該像你喜歡工作的桌子一樣乾淨: 它必須只有必要的文件和工具，沒有干擾。

MEMO

顏色

儀表盤顏色的選擇必須有一個目的: 儘可能清晰地顯示信息。顏色跨度越大，就越難把數據展示清晰。所以不要讓儀表盤的顏色過多。使用同一顏色的深淺是一個好的辦法。

首先要選擇底色，然後是補色。每種顏色都必須有特定的用途。一種顏色可以用來組合元素，另一種顏色可以用來高亮。顏色還能體現一個元素是積極的還是消極的。

避免使用可能有負面含義的顏色。例如，在這個例子中，紅色看起來像是代表壞的和不受歡迎的東西:

如果儀表盤提供了可定製的顏色，確保所有可用的選擇看起來都比較舒服。

選擇顏色組合的一個好工具是 Adobe color CC。

突出

語義高亮應該與視覺高亮相對應。爲了突出一個元素，你可以使用顏色 (對比度，亮度)，形狀，大小，負空間等。

可讀性和數字格式化

這是確保視覺清晰度的重要因素: 乾淨的佈局，視覺層次，重點突出，對比元素，適當的字體，這些字體也必須具有對比性和易讀性。

高精度的數字格式很難理解。最好把所有的數字都四捨五入，然後把較長的數字尾巴去掉。

** 07 **

適應性

▼

在實踐中，當用戶優先考慮桌面版本時，在移動版本之前創建網頁版本是合理的。如果你的目標用戶主要使用的是手機版本，那麼你可以先從移動設備着手構建儀表盤，然後再開發桌面版本。

Snap

** 08 **

總結

▼

設計一個好的儀表盤不是一件容易的事情。我們把它比作人類的發展，因爲它是一個很好的方式來呈現重要的東西。當你在設計儀表盤時，請不斷地問自己: 是否一切都已就緒？有多餘的肢體嗎? 身體的各個部位協同工作嗎? 用戶會喜歡這個結果嗎？它有用嗎？

正如你所看到的，視覺設計實際上是設計師最不應該擔心的事情。

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

作者：Erik Messaki

譯者：彩雲 Sky

本文翻譯已獲得作者的正式授權

加老 D 私人微信，朋友圈更多精彩

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/9senHWZ0BvDcttFPctmDHA

猜你喜歡