多年可視化設計老司機，給你梳理了這10條避坑提速指南

編者按：這篇文章來自 Taras Bakusevych 的文章《10 rules for better dashboard design》

控制面板，或者我們也經常稱之為儀表盤，它是經常需要設計的。企業總期望能夠設計出足夠一目了然的控制面板，能夠一眼看清總體上的信息，趨勢如何，風險何在，最近更新了什么——這樣的控制面板能夠帶來更好的收益和更加出色的財務狀況，這意味著光明的未來。

控制面板——Dashboard ，它本身就是基于汽車和飛機儀表盤這一隱喻，它是一個綜合性的中控臺，讓用戶以最便捷的方式來掌控信息并進行操縱。

在企業中工作多年，我設計來無數的控制面板，每一次新的設計對我而言都是難得的挑戰。每一個優秀的控制面板的設計，其實都來之不易。根據我的經驗，我整理來10條非常有用的建議，它將會為你提供幫助。無論你是經驗豐富的設計師還是新手，應該都可以從中找到一些有用有趣的東西。

1、定義控制面板的用途

控制面板從來都是有著特定功用的，搞錯來，你的所有努力都會付諸東流。有很多流行的方法可以用來界定控制面板的功能：戰略分析、運營、戰術操作，等等。為了簡化這個概念，我將它劃分為2大類：

操作面板

操作面板的目的，是在用戶處理時間緊迫的任務的時候，將關鍵的信息快速傳遞給他們。操作面板的主要目的是為用戶快速清晰地呈現數據的變化和偏差，顯示當前的狀況。它旨在幫助用戶主動、快速和高效地掌控情況。

分析面板

和操作面板不同，分析面板主要功能是為用戶提供用來分析和決策的快速信息，它對時間的敏感度低，并不專注于立刻操作。這種面板主要是幫助用戶更快地了解數據，分析趨勢，并且推動決策。

你需要設計哪種控制面板，主要是由你用戶的類型來決定。當然，你的產品可能會面對多種不同類型的用戶角色，每個用戶都有著獨立的唯一控制面板。負責一線操作的經理可能需要操作面板，而公司高層的管理可能需要的是分析面板，而設計師在設計的時候，有可能會將兩者混為一談。而在普通用戶層面，可能會提供混合型的控制面板，這就要看具體需求了。

2、選擇正確的數據表現形式

當我們討論控制面板的時候，我們討論的問題本質上是圖表的呈現形式。數據呈現是一個非常復雜的任務，尤其是當你希望在面板中呈現多種類型的信息的時候，它們有的是靜態的，有的則會隨著時間動態變化。這是非常有挑戰性的。選擇錯誤的圖表類型可能會讓用戶迷惑，甚至導致錯誤的理解。

在開始之前，請務必多看內部的說明和文檔，從中獲得啟發。如果你要從頭開始，那么這里有一些可視化設計的建議：

可以幫你查看數據關系的圖表類型

散點圖主要用來闡述相關性和分布情況的圖表，氣泡圖有助于將第三個維度引入到二維的圖表，而散點網絡圖則可以更好地呈現元素之間的關系。

可以幫你進行比較的圖表類型

使用視覺化的圖表來呈現一個或者多個數值之間的差異，要比看數字來的直觀得多。柱狀圖、折線圖是最常見的，下面是建議：

• 當時間作為主要的維度之一的時候，請讓它在 X 軸上，因為圖表中的時間應該從左向右自由流動，更容易被理解；
• 使用水平或者垂直的條形圖的時候，請嘗試從大到小自然順序排列，而不是隨機排序；
• 使用折線圖的時候，圖表中應該顯示不超過 5 個值，而條形圖當中，顯示數值不要超過7個；

這些圖表能夠幫你查看組成情況

而對于餅狀圖和環形圖而言，在可視化領域并不算太受歡迎，但是它們是最常用的圖表，并且是最容易被濫用的圖表。當參數中包含太多近似的數值的時候，它們的可讀性就非常差了，而設計到角度和面積的時候，人眼其實是很難分辨的。

這些圖表可以幫你查看分布狀況

分布圖可以幫你查看異常狀況、正態分布以及中值分布情況。

需要規避的圖表類型

有一些圖表類型必須完全規避開。在此之前，信息化設計大規模流行的時候，什么類型的數據都圖表化，其中有不少 3D 的圖表，或者是模擬一些現實物品的圖表，可讀性極差，因此不要使用它們。

不同圖表的使用場景

為了幫你選擇正確的圖表類型，請先問自己下面幾個問題：

·你想在圖表中現實多少個變量？
·數據是隨著時間變化，還是用來做對比參考的？
·每個變量需要顯示多少個數據點？

3、遵循清晰一致的時間格式和命名方式

雖然控制面板主要的目標是一目了然地呈現信息，但是基礎的信息同樣非常重要。使用清晰一致的框架，最大的好處是讓整體保持良好的一致性。如果你使用一致的命名方式，那么可以讓信息傳達更加輕松。

4、按照優先級定義布局和流程

網格可以幫你更加輕松地確保對齊和一致性，并且為你的設計創造基本的框架。網格系統能夠讓你的整個設計都在一個系統中運行，并且合理地優化你的構圖，這對于控制面板的設計至關重要，因為你需要無縫地組織大量的信息。

在決定誠信啊哪些信息的時候，請記住以下幾點：

• 屏幕左上角會更加自然地吸引用戶更多的注意力。因此可以嘗試從左到右來放置關鍵信息。
• 當讀者讀完一行之后，通常會自然移動到下一行進行閱讀
• 如果信息存在前后依賴關系，那么可以使用連續的、動態的圖表來呈現，讓用戶更輕松地瀏覽并獲取信息。

５、使用統一的結構來構建區塊

在我們定義好網格之后，我們可以使用多個不同的控件來搭建整個控制面板，這些圖表空間將會呈現用戶需要的信息。卡片化的設計是最為便捷的，讓它們保持響應式也不難，這樣可以讓圖表按照需求，在卡片容器內輕松縮放。

卡片是保持控件一致性和布局一致性的重要基礎。你可以將所屬圖表的名稱放在卡片的左上角，然后讓不同卡片合理排布。當整體樣式和結構統一了之后，用戶就有可供遵循的獲取信息的模式了，在他們所期望的地方，找到想要的信息。

使用響應式的設計，讓布局更加靈活。當卡片縮放的時候，基本的信息仍在對應的位置，這對于開發、用戶乃至于未來的設計，都有著極大的好處。

６、間距翻倍

終于要說到留白的問題了。留白是保持視覺平衡和信息流暢自然的重要因素，如果留白不夠，整個控制面板會顯得極為局促，所以，為了確保整體的協調度，圖表所在的部分的留白最好要比文本和普通圖表當中的留白間距更大，最好是增加一倍。

12px 留白和 24px 留白的差別

7、不要隱藏信息，也不要過度依賴交互

控制面板的核心目標之一是一目了然，因此依賴滾動、懸停這樣的交互，會削弱功能，背離初衷。

設計長的、可滾動的控制面板是最常見的錯誤之一。試圖使用清晰的方式呈現更多信息，將所有的內容都平鋪在面板上，但是這樣可能會讓用戶不知所措。用戶可能只會注意首屏的信息，下面的內容可能會被很多用戶忽略掉，那又有什么意義呢？

解決方案是先確定優先級，通過用戶訪談和調研之后，你應該能夠確定核心的信息，然后將這部分在首屏呈現，你不用事無巨細地呈現全部信息，而是要學會總結，呈現關鍵。其他的次要信息可以借助交互來呈現，這樣避免用戶不知所措。

交互有助于呈現次要的輔助信息。完全依賴控制面板來呈現全部信息是錯誤的。從上面的范例當中，我們可以看到，用戶需要痛苦地在多個選項卡之間來回選擇，才能看到完整的圖景，這和將關鍵信息隱藏在首屏之下，存在的問題是一樣的。

而強行將所有信息都密集呈現在首屏當中，同樣是錯誤的，人類處理信息的能力是非常有限的。一屏當中，用戶最多處理 5 ~7 個控件。

8、個性化優先于定制化

用戶希望看到的信息，肯定是和他們的需求息息相關的。個性化和自定義都是能夠幫用戶進行選擇的重要手段。

個性化的樣式，通常是由系統自行提供。而系統本身，通常會為不同的用戶提供和他們角色相匹配的功能、內容和體驗，個性化是應有的功能之一。定制化則不同，定制化是用戶根據自己的需求，進一步針對功能和布局乃至于參數進行更加深入的修改，以滿足用戶本身的特定需求，它不是系統內置的直接可選項。

只要系統具備了基礎的個性化設置，在此基礎上再提供定制化，是一個好主意。不過，定制化功能過于自由，通常是控制面板的設計者搞不清楚用戶需求的一個借口——反正用戶可以自己設置。這所導致的結果就是，用戶為了達成基本的需求，而必須進行繁瑣的自定義設置。

9、數據表格請確保它是交互式的，且正確對齊

當你需要的控制面板中，涉及到大量原始數據信息的時候，數據表格始終還是最好的方案。比如說需要將涉及到許多人的 ID、狀態、聯系人、上次活動時間等具體信息列舉出來的時候，還是要用表單。表單充分利用空間，提供了輕松的體驗和足夠的伸縮性，簡化開發，并且另外一個很重要的前提是，很多人已經習慣了 Excel，因此對于這樣的內容，用戶并不會反感，這是查找信息的重要控件，只不過，需要注意它的對齊樣式，以及可交互，比如復制粘貼等等。

10、最后再設計控制面板

的確，控制面板被呈現出來的瞬間是令人激動的，但是，這應該是最后一件事。設計控制面板到底意味著什么？意味著你需要將大量的功能、內容、信息最終匯總到一個控制面板當中，而一旦中間有信息被調整和修改了，那么你的控制面板就需要進行對應的修改，這也就意味著你先設計控制面板，會需要不停返工，而這是不合理且浪費時間的。當你完成了信息的匯總，和基本的對應的小控件的設計之后，最后再進行控制面板整體布局，就會輕松很多。

結語

這10個建議是經歷過大量實戰之后，在血的教訓中總結出來的有效經驗，希望對你有幫助。

本文作者 Taras Bakusevych 的另外一篇超贊的文章：

而關于信息可視化，這些文章也相當值得看看：