如何做好數據可視化設計，國外大神給出了十條實用建議

本期由Bravert（一個正在養成、修煉中的設計師，對世界滿滿地好奇心和熱忱）為大家帶來一篇精選譯文(文章由Taras Bakusevych原創，Bravert原創翻譯，彩云協助優化及版式編輯)。

第一次嘗試這種新的模式（詳細內容請見上一周推文彩云譯設計招募合作譯者），有很多朋友加我希望能與我合作翻譯（這其中有在校英語專業學生，有翻譯過視頻的字幕組成員，甚至還包括好幾位在國外的留學生，真沒想到公眾號的影響力居然能遠銷海外，有點小開心），也希望這種形式能讓大家看到一些更優質的內容！

以下是譯文部分

前言

現如今，后臺界面的設計需求很常見。商業活動中，人們希望通過一個數據可視化界面來展示所有的信息、趨勢和風險，并實時更新，助力于財務分析預測。

當用戶在瀏覽數據界面時，最好一眼就能對關鍵信息有一個大概的了解，也就是說，后臺界面應該是一種引人注目、簡單直接的導航方式。（后臺界面）Dashboard這個術語來自汽車儀表盤的比喻，也叫cockpit-area，通常是指飛機或航天器的駕駛艙，也就是控制飛行器的儀表盤。

我做了很多年To B（針對企業）的項目，設計了不計其數的后臺管理界面。每一次的設計任務，對我來說都是新的挑戰，為了設計出優秀的后臺界面，我常感到壓力山大。為了幫助大家設計出更好的后臺界面，我根據自己的經驗，提出了以下幾點建議，不管是對初學者還是經驗豐富的設計師，應該都會有所收獲。

1、定義目標

后臺界面首先是要有明確的目標以滿足用戶需求，就像產品中其他界面一樣。如果把目標搞錯了，那么接下來的努力就毫無意義！不同的使用場景，界面的設計方法也會不一樣。為了簡化分析，這里主要介紹2種最常見的形式：

1）運營型后臺界面

運營型后臺界面通常出現在時效性很強的任務場景中，旨在高效地為用戶提供關鍵信息。運營型后臺界面主要為用戶快速清晰地呈現異常數據、當前資源情況和所處狀態。運營型后臺界面的數據控制中心可以幫助用戶高效敏捷地盡管運營管理。

2）分析型后臺界面

與運營型后臺界面相比，分析型后臺界面通過提供更為全面的信息，主要用于分析和決策，對時效性要求不高。分析型后臺界面主要是為幫助用戶更好地了解數據，分析趨勢和助力決策。

用戶需求決定了要設計哪一種后臺界面。產品可能具有很多功能，不同的管理者也有不同的訴求，設計需要因地制宜。設計師經常容易混淆這兩種類型，為期望得到快速響應和采取行動的用戶卻提供一大堆的分析數據。反之亦然。

2.正確地展示數據

后臺界面中的數據展示是一項復雜的設計，尤其在后臺界面上展示多種類型數據時，不管是靜態還是實時變化的信息，都具有很強的挑戰性。如果選錯了圖表類型或者直接默認為通用的數據可視化模版，可能會使用戶感到困惑或誤讀數據。根據用戶需要查看的內容，我提供了一些可視化建議：

散點圖主要用于相關性和分布性的分析；氣泡圖將第三維度引入圖表；網絡圖也很方便，數據間的節點越大越重要。

在比較一組或多組數據時，使用可視化的圖表要比看網格中的數字簡單多了。柱形圖和折線圖是最常用的類型。我的建議是：

- 時間維度應始終用X軸展示，時間從左向右

- 當使用水平或垂直條形圖時，嘗試按最大值比例設計條形而不是隨意設計  

- 使用折線圖時，不要顯示超過5個值；使用條形圖時，不要顯示超過7個值

在數據可視化方面，餅圖和環形圖不容易使用。這類圖表最常用到，但同時也最容易被誤用。因為餅圖和環形圖的組件太多，相似值很多，所以閱讀體驗很差。人們在瀏覽餅圖和環形圖的角度和區域時，并不能輕易看出差值。

分布圖可以幫助你了解數據中的異常值，正態分布和信息范圍。

要避免使用某些圖表類型。過去，圖表數據展示對于后臺界面設計很重要，但現在擬物化設計已經過時了。3D圖表和過度設計的圖表可讀性很差，分散了人們對數據的注意力，并且很難開發，所以沒必要這樣設計。

選擇圖表時，可以考慮幾個問題：

- 在一個圖表中，要顯示幾個變量？

- 要顯示不同時間的值，還是不同項目或者不同組的值？

- 每個變量要顯示幾個數據點？

3.命名規范、日期格式和數值劃分要統一清晰

后臺界面主要為了快速獲得信息，所以每個細節都很重要。使用清晰框架的最大好處是數據一致性。如果數據在每個工具中以相同的方式命名，則可以更輕松地使用這些工具。一個框架，就可以解決所有問題。

4.定義布局、順序和優先級

網格可以幫助您輕松實現對齊和統一，在設計中創建基本結構和骨架。它們由“隱形”線組成，在線上可以放置設計元素。網格可以將所有元素整合在一個系統的體系中，并且使界面更有條理。這對后臺界面設計至關重要，因為網格可以將大量的信息布局地更為緊湊。

在布局信息時，要注意：

通常，人們最先關注到屏幕左上角的區域，所以可以把關鍵信息從左到右布局。當然有些地區人們的閱讀習慣可能是相反的。人們讀完一行后，會繼續下一行的閱讀。所以當一段信息基于另一段信息時，要注意它們的前后順序，方便用戶更好地前后查閱信息、快速瀏覽。

5.使用結構統一的組件

定義網格后，就可以用多種組件來承載信息、圖表和控件了。卡片是一種非常簡單好用的排版方式。卡片最大的優勢在于可以無限地修改、操作和擴展。對于響應式設計，卡片是不錯的選擇，因為卡片是一種易于擴展或縮小的內容容器。

卡片的一個重要特點是所有卡片的控件和數據的排版統一。將名稱放在左上角，將視圖控件或操作放到卡片右上角，剩下的就是內容。當所有卡片結構統一時，用戶就更容易使用界面，輕松找到想要的內容。

涉及響應式設計或者用戶定制時，使用以上推薦的排版就有不錯的靈活性。當卡片放大或縮小時，所有主要的控件仍然在特定的位置。這對開發和設計的整體可擴展性來說，十分有幫助。

6.擴大留白

白色區域，也就是負空間，指的是在設計布局中元素之間的區域。用戶可能并不了解負空間，但是設計師需要特別注意。如果負空間不平衡，這個界面的易讀性就很差。因此負空間和其他排版元素一樣重要。

7.不要隱藏信息或過分依賴交互

后臺界面主要為了快速的了解大概信息，但如果涉及滾動或過多的交互事件，就會拖慢用戶的使用效率。

設計師最常犯的錯誤，就是設計可滾動的、長后臺界面。他們想用簡潔的方式展示更多的信息，就會從上到下排版，以防太多的信息堆積到一起，讓用戶難以理解。但這會導致只有屏幕上的信息是可見的，不滾動頁面就看不到下面的信息，所以用戶很難注意到下面的信息。既然這樣，干嘛還要放這些很難注意到的信息呢？

解決辦法是對信息進行優先級排序，在進行充分的研究和訪談后，應該能夠識別關鍵內容，只用屏幕可見區域來顯示關鍵內容。不要長篇大論地講故事，要展示提煉的關鍵信息。額外的交互可以作為容納更多內容的一種方式，而不是讓用戶被過多的數據壓垮。

交互有助于界面上次要信息展示。但完全依賴交互，以此作為使用后臺界面的主要方式，就是大錯特錯的。在以上的示例中，用戶不得不在多個選項卡中痛苦地切換，來獲取完整的圖表。那些在隱藏選項卡上的信息可讀性就很差，就像屏幕下方被隱藏的信息一樣。

后臺界面上，設計的信息過多，就會適得其反。一定要知道，人類對于多個事物的記性很差。不要對用戶期望過高，不要讓用戶對太多數據應接不暇。最多用5-7個組件來創建頁面。否則，用戶很難專注獲取清晰的信息概覽。

8.個性化而不是自定義

用戶希望看到與他們個人需求相關的內容。個性化和自定義可以使用戶看到對他們自身重要內容。個性化由系統自身設定。系統ID用于識別用戶，并為用戶提供與其角色匹配的內容、體驗或功能。自定義則是由用戶自身完成。為了滿足特定需求，用戶可以在系統里配置布局、內容或系統功能來定制或改變體驗。

在界面足夠個性化的基礎上，可以給用戶更多的選擇自定義后臺界面。但通常，設計多種自定義的方式是一個借口，逃避枯燥的用戶調研過程，不去真正挖掘每一個用戶角色真正的需求。最后，就把一切都甩給用戶，讓他自己去創建頁面。

9.融合數據表或列表時，確保可交互且數據對齊

展示多項目的大量信息時，數據表是不錯的解決方案。例如客戶列表里姓名、狀態、聯系人和最近活動等等，這些用數據表展示是最好的辦法。數據表有很多優點，空間利用好、擴展性好、開發簡便。用戶也很習慣和網格打交道，因為大多數用戶使用excel很多年了，容易查找和修改數據。查閱以下文章，了解數據表的更多內容。

https://medium.com/@taras.bakusevych/data-tables-design-3c705b106a64

10.最后才是考慮視覺效果

由于數據可視化界面是視覺沖擊力最強的后臺界面，因此通常對設計師來說視覺效果成了設計的首要任務。相反，我建議最后再設計數據可視化界面總覽全局。數據可視化是其他所有內容的摘要視圖，顯示應用各個部分的關鍵信息，最后設計它更切實可行。

否則，在處理其他頁面時會不斷返回并更新數據可視化界面。此外，一旦設計完大部分界面了，再做數據可視化就可以使用大量的組件了。

原文：https://uxplanet.org/10-rules-for-better-dashboard-design-ef68189d734c

作者：Taras Bakusevych

譯者：Bravert

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