UI界面設計

一張合格圖表的設計方法和技巧

2321

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

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

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

糟糕的圖表設計

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

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

Part I

繪制草圖

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

?優(yōu)點

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

缺點

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

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

學習點

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

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

Part II

增加功能和數據

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

優(yōu)化點

1.增加時間過濾器

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

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

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

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

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

優(yōu)點

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

缺點

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

學習點

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

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

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

Part III

優(yōu)化組件樣式和增加細節(jié)

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