設計了100張圖表后,我學到了哪些經驗?

產品老司機手把手教寫文檔,10天線上課程,零基礎掌握產品經理必備7大文檔撰寫法。了解一下>

圖表中的組成元素能夠完美的平衡數據與視覺效果,比如曲線,折線,點陣等等形式。那么,在圖表的設計時,可以有哪些方法呢~

以下是譯文部分:

我是一名圖表設計狂熱分子,在寫本科畢業論文的時候,由于執著于畫出完美圖表,導致花在做圖表的時間比寫文字內容還要多。當時的想法是,期望用圖表來展示收集到的大量數據,為我的論文課題做定量研究分析。在我看來,圖表中的組成元素能夠完美的平衡數據與視覺效果,比如曲線,折線,點陣等等形式。

上個月,團隊開展了新項目,打算做一款高級數據分析工具,由我負責設計其中的圖表。我首先想到的是,從舊論文圖表中獲取靈感,然而等看到曾經設計的圖表時,我就堅決地放棄了這個想法。

7年前設計的圖表,如今看起來慘不忍睹。圖表有限的空間內堆積了大量的信息,讓人短時間內無法從圖表中獲取有效的信息。

下圖是我花了幾分鐘,設計了一張同樣糟糕的圖表來做證明:

設計了100張圖表后,我學到了哪些經驗?

糟糕的圖表設計

自從看了自己設計的舊圖表,我自信心受挫。不過最后決心借著這次的工作機會,在圖表設計上大干一場。

我在幾周時間內設計了上百張圖表,期間根據用戶的反饋,不斷地迭代和更新。在這個過程中,我逐漸掌握了設計一張合格圖表的方法和技巧。在下面的6個部分中,將會逐步的分析我的設計過程:如何設計圖表,如何迭代以及為什么選用這種形式的圖表?

Part I:繪制草圖

第一張草圖復用了工作中設計的舊圖表,做了簡單的迭代。

設計了100張圖表后,我學到了哪些經驗?

  • 優點:圖表參數不多,沒有設計X軸和Y軸的說明文字,非常簡潔清晰。
  • 缺點:基于高級數據分析工具的產品特性,我們來分析其缺點。

首先,圖表內的數據量少,很難看出潛在的設計缺陷;其次,控件太少,能操作的功能不多,無法達到高級分析工具該有的多功能屬性;最后,面對實際情況中的大量潛在數據,需要多種數據處理的方式,而圖表中暫未出現,因此可擴展性不高。

學習點:

  • 保持圖表簡潔和易讀性。判斷的標準是用戶一看即懂,不需要花費時間去學習。
  • 保證上一條,同時思考如果圖表增加更多的數據和功能,應該如何設計(高級分析工具肯定需要支持大量數據展現和分析)。

Part II:增加功能和數據

優化了第一部分的草圖,能展示更多的基礎數據和高級數據,此外還增加了過濾數據的功能。

設計了100張圖表后,我學到了哪些經驗?

優化點:

  • 增加時間過濾器;
  • 鼠標懸停在折線圖的數據點時,使用氣泡浮層來展示詳細的數據;
  • 在鼠標懸停的時候,需要一根垂直的直線來指示并確定數據點;
  • 折線不能為圓潤的曲線。因為圓角不能準確地向用戶指明,當前鼠標懸停的數據點;
  • 對比移動端的設計,web端有更多的空間可以利用,可以使用更大的字體;
  • 需要有水平直線來對應X軸上的數字。

優點:

圖表更加清晰,展現了更詳細的日活數據,可以讓用戶了解自己APP的運營情況。折線變得不再圓潤,銳角可以更加準確地指示數據點,這樣鼠標懸停時可以輕松查看數據點的詳細數據。同時X軸的日期在圖表的最下方單獨成列顯示,易讀性很強。

缺點:

由于時間過濾器和Y軸的數字全部擠在了折線圖的右上角,界面布局略顯雜亂;圖表中500點以下幾乎沒有數據,因此Y軸的數字劃分并不合理,需要做調整;折線采用了紅色,讓開發同事誤以為是錯誤狀態(產品設計中紅色一般代表著錯誤)。

學習點:

  • 高級圖表同樣可以不展示過多的信息,在界面上保持簡潔。但需要引導用戶通過操作去達到自己的行為目標(比如時間過濾器,鼠標懸停時氣泡彈框展示數據)。
  • 把Y軸的數字移到圖表左邊。
  • 評估圖表中各組件的顏色,判斷是否會引起用戶對當前界面的誤解。

Part III:優化組件樣式和增加細節

每個組件的樣式都嘗試做下優化,比如突出折線的顏色或增加X軸的一些細節,這樣會使圖表看起來更清晰。在圖表的設計迭代過程中,不需要像我現在這樣,又從頭開始設計圖表??梢哉攵雜形侍獾淖榧?,比如坐標軸,一個一個去進行優化。所有組件優化好,圖表自然而然也就相對完美了。

設計了100張圖表后,我學到了哪些經驗?

Graph:Part III

優化點:

  • 將圖表內折線的顏色改成深綠的輔助色;
  • 將Y軸數字移到圖表左側;
  • 在X軸和日期之間增加垂直指示線,使得日期的易讀性更強;
  • 在指示Y軸數字的水平線之間居中增加一條輔助線,這樣不用氣泡彈框顯示,也可以很容易查看數據點的值;
  • 折疊時間過濾器來為高級用戶提供數據過濾功能,也可以避免影響到大多數不需要此功能的普通用戶。

優點:

前面總結的優點這里同樣適用。由于折疊過濾器和改變了Y軸數字的位置,折線圖的右上角空間布局變得平衡合理。雖然未折疊的過濾器可以直觀地提供多種過濾選項,但是看起來會很雜亂 。圖表增加了水平的輔助線,但是仍然保持簡潔性和易讀性。

缺點:

其實折疊過濾器并不是提供給高級用戶的最佳設計方案,但是用戶只要操作過過濾器,就會形成路徑記憶,在產品的其他功能再次使用。

學習點:

  • 優化圖表中組件的樣式,添加一些細節,增強圖表的易讀性;
  • 只做必要的優化和細節添加,同時必需保持圖表的簡潔清晰;
  • 同事看過折線圖后,提出對于圖中的數據類型,條形圖是否更合適;
  • 雖然有好有壞,但我們需要重新思考整個設計。好處:圖表設計還有改進的空間;壞處:目前的圖表已經花費了大量時間。

Part IV:重新設計圖表

目前設計的折線圖,兩個相鄰端點之間的差值有統計意義,但是折線的斜率是沒有統計意義的。我們需要考慮圖表的適用數據類型和場景,必要情況下可能要重新設計其他類型的圖表。

  • 左側的圖表,以消費金額為例,統計個人信用卡的每日消費情況。使用折線圖可以統計a點和b點間具體的金額差值,即15號和16號個人消費的日差額。
  • 右側的圖表,以參會人數為例,統計每日參會人數。在a點和b點間,即15號和16號之間,我們可以知道這兩天參會人數的差值,但無法統計某個具體時間點的參會人數,因為沒有記錄每秒的減少人數。我們只能判斷從15號到16號的參會人數在減少,從a點到b點的連線其實只是表示一個下降趨勢。

設計了100張圖表后,我學到了哪些經驗?

Graphs:Part IV

學習點:考慮數據類型,使用場景和用戶需求,選擇合適的圖表類型并統計需要的數據,才能正確展現結果。(比如上圖中無法統計每秒減少的參加晚會人數)

Part V:新的圖表設計

基于同事的反饋和自己的思考,我設計了一版條形圖,很明顯圖中X軸的數字易讀性比折線圖更好。

設計了100張圖表后,我學到了哪些經驗?

Graph:Part V

優化點:在圖表中使用條形替代折線來展示數據。

優點:每個日期都有一個條形對應,相比多個日期之間卻只有一條折線,用戶確實更加容易閱覽,X軸數字易讀性更佳。

缺點:條形之間的空白過大,需要調整單個條形和整個圖表左右端之間的絕對距離。

Part VI:圖表設計總結

在整個設計過程中,有一些前面幾個Part沒有提到的設計技巧和圖表,這里補充上來做個總結。

1. 越簡單越好

設計了100張圖表后,我學到了哪些經驗?

左側的折線圖,支出和收入的數據我用了2個圖表來分開展示,兩者之間可以通過點擊tab,快速切換查看。右側的圖表,我將2條折線放在一張圖表上,看起來效果還不錯。但是如果在右圖中增加第3條或者第4條折線,整個圖表將會雜亂無章且易讀性極差。在圖表中找數據變得像個猜圖游戲。

2. 突出重點

設計了100張圖表后,我學到了哪些經驗?

條形圖設計最好可以清楚地展示每個條形的詳細數據。像左側的圖表,選擇某一個條形后,其他條形會弱化(降低透明度)顯示,可以突出當前條形及相關數據。同時其他條形并沒有消失,用戶仍然可以進行數據的對比。而右側的圖表,沒有進行弱化處理,無法突出當前選擇的條形,易讀性相對較差。

3. 表格字體與比例字體

設計了100張圖表后,我學到了哪些經驗?

在圖表中使用比例字體并不一定不合適。但是如果是包含大量數據的表格和圖表,單獨使用表格字體才是最佳的選擇。因為表格字體的數字等寬,可以保持列對齊,易于閱讀。我們可以把它做為比例字體的輔助字體,僅在圖表中使用。

 

原文:https://medium.com/@william.bengtsson/learnings-from-designing-graphs-9033e9034ca0

作者:William Bengtsson

譯者: luserry,中文名稱小短毛,簡稱短毛。正在上下求索的過程中,主要關注產品和交互設計,目標是世界更美好,你我更自在。

本文由 @彩云Sky 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言討論~!
  1. 超贊

    回復
  2. 我覺得Part VI第一點中的Tab切換可以換成單/多選按鈕,用戶可以勾選單個進行查看(即Tab切換功能),同時也可勾選多個選項進行單點數據或整體/階段走勢比較

    回復
  3. 回復