作者 / Manuel Lima, Design Lead, Google

如今的應用，似乎多少都有涉及數據可視化的部分，從健身應用的每日彙總界面，到購物應用的每月開銷分析，美觀、整潔且易於閱讀和交互的數據可視化設計能讓用戶對大量的數據一目瞭然，從而幫助他們收穫更輕鬆、更自信、更美好的生活。本文是繼《 剝繭抽絲做 UI 動效，其實很簡單 》之後，又一篇官方設計規範介紹。

2017 年 8 月，一羣熱情的 Google 設計師、研究人員和工程師聚集在一起，創建了一套全面的數據可視化指南，它涵蓋了顏色、形狀、排版、圖像、交互和動效等所有內容。 這次成功的合作促成了 Google 首個專門的數據可視化團隊誕生 (2018 年 5 月成立)。

在過去的一年中，我們一直致力於瞭解人們對信息的可視化和互動方式的需求和願景。 現在，我們希望與世界各地的創作者們分享我們的成果:  我們已經制定了詳細的設計指南，用於幫助您創建自己的數據可視化項目，並提煉出我們的主要設計原則和注意事項。

△ Material Design 數據可視化設計規範包含了常見的絕大多數圖表範式

下面是 適用於任何圖表設計的 6 項基本準則 。

要誠實

數據的 準確性和完整性是第一位的。 不要出於修飾或偏袒等目的而對信息進行歪曲或混淆。 請務必強調清晰度和透明度。

爲用戶提供理解特定可視化項目所需的上下文元素。 通過使用清晰的文本標籤、準確的數據座標軸以及基線、細緻的交互提示和圖例，最大限度地提高圖表的完整性。 動效有助於強化表達數據間的關係，但它不能被用來扭曲數據。 您需要確保所使用的數據集的透明性:  說明數據來自何處，以及您是如何收集和處理它們的。

體貼用戶

提供清晰的上下文幫助用戶瀏覽數據。 構建功能時，應該優先考慮數據的檢索和比較功能。

在進行設計時，您需要考慮到用戶現有的心理模型——它可能是被那些使用範圍很廣的既有工具所塑造的。 創建體貼的上手體驗，讓用戶能夠輕鬆學會如何閱讀圖表及其內部包含的信息。 在視覺和交互上，提供足夠明晰的引導來幫助用戶探索數據本身和使用圖表功能，例如選擇、縮放、平移和過濾。 動效和交互應符合數據閱讀和分析時的邏輯，來強化數據上下文、洞察以及因果關係等要素。 即便是空的界面，也應包含紮實的理由。

△ 即便在選中的查看範圍內數據爲空，也能使用精心製作的動畫來傳達出圖表本身的設計意圖

提供令人愉悅的體驗

總是爲用戶提供超出預期的體驗。 您需要考慮性能、細節、驚喜和創新，並積極採用充滿活力的、響應迅速的和智能化的體驗。

創建出色的可視化體驗，然後用令人意想不到的方式改進它們。 在適當的時候，您應該使用個性化的功能設計和小小的交互驚喜，來引導用戶完成其需求。 界面的流暢響應與優美的圖形設計一樣極具價值， 您需要考慮狀態轉換中使用的動效和節奏，以幫助用戶建立起 “快速響應” 的認知。

△ 簡潔流暢的動效可以讓用戶知道圖表正在快速響應其操作

重點明晰

減少認知負擔，專注於真正重要的東西。 每個動效、顏色和視覺元素都應該支持數據洞察和理解。

專注於用戶的任務，其他一切都應該爲這個目的服務。 儘快引導用戶的注意力到最重要的信息上。 儘可能做到言簡意賅，且避免使用無關的圖形元素。 您還需要以有意義的方式應用顏色、文字標籤、組別、高亮顯示樣式或度量單位等元素，以助力用戶理解圖表信息。 在過場和提示上使用比較含蓄的動效，儘可能 “低調地” 幫助用戶瞭解層次結構、數據集指向以及數據間的各種關係。

提供擴展性

讓圖表系統可以擴展，從而確保其可訪問性。 滿足不同用戶對數據深度、複雜性和模式的需求。

每張圖表都應該儘可能地提升可訪問性。 您需要考慮圖表元素 (配色、過濾器配置、座標軸、控件面板、交互機制等) 應該如何擴展，以適應各種用戶需求、屏幕尺寸和數據類型 (從單個數據點到大型多變量數據集)。 您還需要考慮一系列可能性，而不僅僅考慮單一的使用場合。 通過交互設計來最大限度降低複雜性，例如通過交互操作來逐步提供詳細信息，或者讓用戶可以自由更改數據視角，甚至支持鏈接其他的視圖，從而幫助用戶獲得更深入的數據洞察。

△ 比如，爲手機上的圖表提供符合直覺的拖拽操作

提供結構化設計

使用視覺設計來傳達層次結構，並提高一致性，從而達成直觀易用的用戶體驗。

一致性有利於用戶快速熟悉您的產品。您應該積極提升圖形元素 (形狀、顏色、圖標、排版) 和交互模式 (選擇、過濾、選中高亮、多選等操作) 的一致性。動效應該給用戶一種可控感，在保持靈敏響應的同時，爲用戶提供穩定性和連續性。您不妨考慮 使用進場和退場動效，幫助用戶瞭解各元素的視覺層次、界面排布的方向和顯示出來的數據關係 。在任何界面上，都提供統一的導航機制，這樣用戶無論瀏覽到了哪裏，都知道自己該如何返回。

致謝

大量的 Google 設計師、工程師以及研究人員參與了這套設計規範的制定工作。 沒有大家的奉獻，這項工作就無法完成。 謝謝你們:  Shuo Yang, Kent Eisenhuth, Sharona Oshana, Katherine Meizner, Hael Fisher, Ross Popoff-Walker, Ian Johnson, Joe Nagle, Ryan Vernon, Nick Bearman, Luca Paulina, Gerard Rocha, JT DiMartile, Lorena Zalles, Tom Gebauer, Hilal Koyuncu, Bethany Fong, Ann Chou, Barbara Eldredge, 以及 Anja Laubscher。

您的應用中有涉及到數據可視化的部分嗎？ 您在數據可視化設計的過程中有什麼疑問或者想法？ 歡迎在評論區和我們分享。

點擊屏末   |  閱 讀 原 文  |   查看完整 Material Design 數據可視化設計規範

推薦閱讀