設計了100張圖表后，我學到了哪些經驗？

Sponsor

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

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

7年前設計的圖表，如今看起來慘不忍睹。圖表有限的空間內堆積了大量的信息，讓人短時間內無法從圖表中獲取有效的信息。下圖是我花了幾分鐘，設計了一張同樣糟糕的圖表來做證明。

糟糕的圖表設計

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

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

一、繪制草圖

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

優點

圖表參數不多，沒有設計X軸和Y軸的說明文字，非常簡潔清晰

缺點

基于高級數據分析工具的產品特性，我們來分析其缺點。

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

學習點

保持圖表簡潔和易讀性。判斷的標準是用戶一看即懂，不需要花費時間去學習。

保證上一條，同時思考如果圖表增加更多的數據和功能，應該如何設計（高級分析工具肯定需要支持大量數據展現和分析）。

二、增加功能和數據

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

優化點

增加時間過濾器

鼠標懸停在折線圖的數據點時，使用氣泡浮層來展示詳細的數據

在鼠標懸停的時候，需要一根垂直的直線來指示并確定數據點

折線不能為圓潤的曲線。因為圓角不能準確地向用戶指明，當前鼠標懸停的數據點

對比移動端的設計，web端有更多的空間可以利用，可以使用更大的字體

需要有水平直線來對應X軸上的數字

優點

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

缺點

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

學習點

高級圖表同樣可以不展示過多的信息，在界面上保持簡潔。但需要引導用戶通過操作去達到自己的行為目標（比如時間過濾器，鼠標懸停時氣泡彈框展示數據）。

把Y軸的數字移到圖表左邊

評估圖表中各組件的顏色，判斷是否會引起用戶對當前界面的誤解

三、優化組件樣式和增加細節

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

Graph: Part 3

優化點

將圖表內折線的顏色改成深綠的輔助色

將Y軸數字移到圖表左側。

在X軸和日期之間增加垂直指示線，使得日期的易讀性更強

在指示Y軸數字的水平線之間居中增加一條輔助線，這樣不用氣泡彈框顯示，也可以很容易查看數據點的值。

折疊時間過濾器來為高級用戶提供數據過濾功能，也可以避免影響到大多數不需要此功能的普通用戶。

優點

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

缺點

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

學習點

優化圖表中組件的樣式，添加一些細節，增強圖表的易讀性

只做必要的優化和細節添加，同時必需保持圖表的簡潔清晰

同事看過折線圖后，提出對于圖中的數據類型，條形圖是否更合適

雖然有好有壞，但我們需要重新思考整個設計。好處：圖表設計還有改進的空間。壞處：目前的圖表已經花費了大量時間。

四、重新設計圖表

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

左側的圖表，以消費金額為例，統計個人信用卡的每日消費情況。使用折線圖可以統計a點和b點間具體的金額差值，即15號和16號個人消費的日差額。

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

Graphs: Part 4

學習點

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

五、新的圖表設計

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

Graph: Part 5

優化點

在圖表中使用條形替代折線來展示數據

優點

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

缺點

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

六、圖表設計總結

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

1.越簡單越好

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

2. 突出重點

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

3. 表格字體與比例字體

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

原文：https://medium.com/@william.bengtsson/learnings-from-designing-graphs-9033e9034ca0
作者：William Bengtsson
譯者： luserry（微信ID：caiyunyisheji）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。