6 個設計準則讓圖表煥然一新,數據可視化並不難!

2021-02-15 谷歌開發者

作者 / 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 數據可視化設計規範

  想了解更多 Material Design 內容？

相關焦點

  • B端互動設計——數據可視化圖表
    編輯導語：設計師如今在日常工作中也會遇到很多數據，對於設計師來說，好看並不是判斷的標準，實際價值和作用才是真正需要的；本文作者分享了關於數據可視化的框架，以及關於可視化設計的基本準則和規範，我們一起來學習一下。
  • 50 個數據可視化圖表
    本文總結了在數據分析和可視化中最有用的 50 個 Matplotlib 圖表。
  • 為選擇數據可視化圖表而發愁？學會這14個可視化圖表即可
    2.條形圖當一個數據標籤較長或要比較的項目超過10個時，應使用條形圖（基本上是水平的柱形圖）來避免混亂。這種類型的可視化也可以用於顯示負數。4.雙軸圖雙軸圖表允許您使用兩個y軸和一個共享的x軸來繪製數據。它與三個數據集一起使用，其中一個基於連續數據集，另一個更適合按類別分組。這應該用於可視化這三個數據集之間的相關性或缺乏相關性。
  • 6個要點搞定高效且引人入勝的數據可視化
    當前期調研準備好後，就可以對可視化製作進行探索和創建，接下來我將總結6個製作要點來使你的可視化變得直觀而有趣，從而可以更快，更輕鬆地進行消化，並清晰地傳達預期的信息，從而為觀眾提供特定且有用的數據分析建議。
  • Excel商務圖表設計,從數據到圖表,變身可視化達人
    前言圖表是語言表達的一種重要形式，它藉助於各種可視化的組件，通過展示數據間的對比，達到傳遞信息、表達觀點或發現數據背後的趨勢等目的。本期將通過可視化組件、從數據到圖表2個部分簡單說明下商務圖表的設計可視化組件可視化組件分為四種：視覺暗示、坐標系、標尺、背景信息 不同組件組合在一起，有時它們直接顯示在可視化圖形中，有時候它們則形成背景圖，這都取決於數據本身。
  • 搞定這12個設計圖表，就知道該如何製作數據可視化
    但是，儘管這樣做很容易，但是一個好的可視化仍然需要一定數量的戰略規劃和設計思想。知道誰是受眾能夠幫助你確定所需的數據。知道要講的故事（分析數據）會告訴你要使用哪種數據可視化類型。假設你擁有正確的數據和正確的數據可視化軟體。還需要選擇正確的圖表。希望這篇文章可以幫助您創建更好的數據可視化和儀錶板，以便於理解。
  • 數據可視化必修課 - 圖表篇
    ，而圖表是數據可視化中最常用的一種表現形式。無論是工作匯報還是後臺設計，都離不開圖表的使用。然而關於圖表類相關的資料太零碎了，不成體系，對於初學者非常不友好，本篇文章我從圖表的祖輩開始，把它都給挖了出來，希望對你有幫助。
  • 數據可視化圖表工具有哪些圖表類型?
    每到月度、季度、年度總結的時候，用到最多的、最有說服力的就是數據了。讓數據說話，擺事實、講道理才能贏得上級的肯定。 大家都聽過「數據可視化」，也知道要用直觀的圖表讓受眾理解複雜多變的數據。
  • 信息可視化圖表設計指南!
    數據可視化教學班3999元勁爆2.5折，現價998元！！！課程連結見文末閱讀原文作者：cherries 出處：ued.baidu信息可視化包括了信息圖形、知識、科學、數據等的可視化表現形式，以及視覺可視化設計方面的進步與發展。
  • 最受歡迎的 50 個數據可視化圖表
    本文總結了在數據分析和可視化中最有用的 50 個 Matplotlib 圖表。
  • 簡單明了的數據可視化圖表
    這句話充分地表達出從認知的角度來說我們更習慣於直接的視覺表達形式—圖表。可視化圖表有哪些基本類型，我們在選擇圖表時又需要遵守哪些原則呢？基礎圖表及特點1.柱形圖柱形圖利用柱子的高度，能夠比較清晰的反映數據的差異，一般情況下用來反映分類項目之間的比較，也可以用來反映時間趨勢。
  • 數據可視化:常用圖表使用總結
    文章對常見的數據可視化圖表進行了簡單的匯總分析，希望對你有益。什麼是數據可視化？數據可視化，簡簡單單就是把數據展示出來嗎？非也非也，其終極是為了滿足用戶對數據的價值期望，利用數據，藉助可視化工具，還原和探索數據隱藏價值，描述數據世界。(⊙o⊙)…還是說人話吧，就是以下兩步。分析需求，熟悉數據，制定目標。
  • 數據可視化中的經典圖表
    城市大數據中心大屏展示隨著數字經濟的崛起，作為數據應用的一個分支，可視化應用已經非常普遍了。可視化設計原則中最基本和最經典的原則來自於設計師愛德華·R·塔夫特，他在《量化信息的視覺表現》中概述了數據墨水比例原則。該原則要表達的核心思想就是簡潔，最好的大屏可視化不是數據的平鋪，不是設計的天馬星空，我們的圖表要簡潔，我們的數據要簡潔。今天，可視化的設計過程我們暫且略過，先來看一看這些經典的大屏可視化圖表。
  • ​數據可視化 | 6個基本可視化Python庫
    數據可視化是使用可視元素（例如圖表，圖形等）表示數據的過程，有助於從數據中獲取有意義的見解。它旨在揭示數據背後的信息，並進一步幫助查看者查看數據中的結構。數據可視化將使任何人只要對數據科學的了解最少，即可獲得科學發現，並幫助人們輕鬆地交流信息。畢竟，一張圖片勝過千言萬語。在本文中我們將介紹一些Python支持的最出色的可視化庫。
  • 50個最有價值的數據可視化圖表
    本文總結了在數據分析和可視化中最有用的 50 個 Matplotlib 圖表。
  • 大數據可視化常用分析圖表的優缺點
    可視化圖表次整理了一些平常不太使用，但在合適的場景的使用它們，往往能為你的分析報告加分不少的圖表。
  • 6大數據可視化應用設計規範
    本文講述了六個數據可視化應用規範：包括圖表分類、畫面布局、硬體設施、字體字號、畫面配色、畫面飽滿和畫面動效。今天為大家帶來的是數據可視化應用設計規範，談談我在設計過程中的一些經驗以及分享。
  • 數據可視化設計過程:面向初學者的循序漸進指南
    原標題：數據可視化設計過程：面向初學者的循序漸進指南導讀：可視化圖表，圖形和儀表中的數據是使數字能夠實際對話的最強大的方式之一。但是，很多剛開始使用的人往往會不知所措，無法下手。我們製作的圖表將如何為他們增加價值？如果無法考慮圖表如何為讀者增加價值，請不要創造一個，因為每個圖表都需要一個可以達成決策的目的。6.需要多少精度？作為數據可視化設計師，可以自由選擇需要多少精度。請記住，我們的選擇應該經過深思熟慮後有意為之。
  • 數據可視化必須注意的30個小技巧
    優秀的數據可視化圖表只是羅列、總結數據嗎？當然不是！數據可視化其真正的價值是設計出可以被讀者輕鬆理解的數據展示，因此在設計過程中，每一個選擇，最終都應落腳於讀者的體驗，而非圖表製作者個人。這裡給大家總結了數據可視化的製作的30個小技巧，通過列舉一些容易被忽略的常見錯誤，最終能夠快速提升和鞏固你的可視化製作水平。
  • 數據可視化大屏設計實戰分享
    重點概覽：了解數據可視化圖表設計指南；具體設計思路；大屏優化設計總結一、了解數據可視化可視化是為了幫助用戶更好的分析數據，信息的質量很大程度上依賴於其表達方式。數據本身是冰冷的數字，通過選擇合適的圖形或者圖表來進行展示表達，使得傳遞給使用者的感受更加直觀、更容易獲得其中的價值。數據可視化將技術與藝術完美結合，藉助圖形化的手段，清晰有效地傳達與溝通信息。一方面，數據賦予可視化以價值;另一方面，可視化增加數據的靈性，兩者相輔相成，幫助企業從信息中提取有價值的信息。