中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

以下是譯文部分：

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

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

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

下圖是我花了幾分鐘，設(shè)計了一張同樣糟糕的圖表來做證明：

糟糕的圖表設(shè)計

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

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

Part I：繪制草圖

第一張草圖復(fù)用了工作中設(shè)計的舊圖表，做了簡單的迭代。

• 優(yōu)點：圖表參數(shù)不多，沒有設(shè)計X軸和Y軸的說明文字，非常簡潔清晰。
• 缺點：基于高級數(shù)據(jù)分析工具的產(chǎn)品特性，我們來分析其缺點。

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

學(xué)習點：

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

Part II：增加功能和數(shù)據(jù)

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

優(yōu)化點：

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

優(yōu)點：

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

缺點：

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

學(xué)習點：

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

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

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

Graph：Part III

優(yōu)化點：

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

優(yōu)點：

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

缺點：

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

學(xué)習點：

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

Part IV：重新設(shè)計圖表

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

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

Graphs：Part IV

學(xué)習點：考慮數(shù)據(jù)類型，使用場景和用戶需求，選擇合適的圖表類型并統(tǒng)計需要的數(shù)據(jù)，才能正確展現(xiàn)結(jié)果。（比如上圖中無法統(tǒng)計每秒減少的參加晚會人數(shù)）

Part V：新的圖表設(shè)計

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

Graph：Part V

優(yōu)化點：在圖表中使用條形替代折線來展示數(shù)據(jù)。

優(yōu)點：每個日期都有一個條形對應(yīng)，相比多個日期之間卻只有一條折線，用戶確實更加容易閱覽，X軸數(shù)字易讀性更佳。

缺點：條形之間的空白過大，需要調(diào)整單個條形和整個圖表左右端之間的絕對距離。

Part VI：圖表設(shè)計總結(jié)

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

1. 越簡單越好

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

2. 突出重點

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

3. 表格字體與比例字體

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

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

作者：William Bengtsson

譯者： luserry，中文名稱小短毛，簡稱短毛。正在上下求索的過程中，主要關(guān)注產(chǎn)品和交互設(shè)計，目標是世界更美好，你我更自在。

本文由 @彩云Sky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議