專業設計師的 10 個圖表心得,看完就能用 #022
俊鐵導讀:
作者@Ryan Bales 是 http://Bync.com 的創始人和創意總監,擁有 15 年的設計經驗。他總結了 10 個圖表心得,你看完就能用起來。
如果你是一名設計師,所做項目對「數據可視化」要求又高,那你肯定了解設計挑戰的極度困難性。
在我從事設計工作的 15 年中,大多數時間都在設計複雜、有大量數據的網頁和 app。可以說,我每天都在和圖表打交道(看看我的 Dribbble 主頁你就明白了)。這篇文章,將和大家分享圖表設計的 10 個原則。好好運用這些原則,可以幫你設計出更具美學、更受歡迎、更加實用的圖表。
1. 使用常見圖表類型
作為設計師,使用獨具特色的不常見圖表(比如流線圖),你會覺得很有趣,而且創意十足。但是,不應該讓用戶去學習如何閱讀你「原創」的圖表。
所以,最好使用常見的圖表,比如:面積圖,條形圖/柱狀圖,折線圖,或者餅狀圖/圓環圖。
2. 餅狀圖不超過 5 個分類
一個通用的經驗法則——如果要使用餅狀圖,盡量將區塊數量控制在 5 個以內。區塊數量越多,用戶讀取數據的難度越大。遇到此類情況,建議採用其它類型圖表。
3. 歸類整理,順序排列
只要內容不涉及日期,你可以通過升序或降序歸類整理圖表內容,從而大大提高圖表的可讀性。這個原則通常適用於條形圖/柱狀圖。
4. 避免使用 3D 圖表
只要不涉及 VR, 絕對沒有必要使用 3D 圖表,而且有些 3D 圖表的「顏值」還很低。
5. 避免隨機生成顏色
有些圖表框架會隨機生成代表各組數據的顏色。其背後的演算法,很少和整體配色方案相匹配,而且不同數據組之間的視覺區別也不夠明顯。
最好還是通過人工配色——確保有足夠的顏色可用,並且不同顏色間的辨識要清晰。
6. 趨勢線會分散用戶注意力
趨勢線看起來可以使圖表界面更豐富。但實際上,它並沒有起任何作用,有用的還是線條下面的點狀數據。如果你決定使用趨勢線,至少可以讓用戶能手動隱藏它。
7. 不要依賴數據提示框
將數據提示框當作額外或補充信息來源。換句話說,數據提示框不應被視作用戶了解標繪值的唯一途徑。
8. 圖例要視情況使用
當圖表只有一種數據信息時,用圖表標題說明數據信息即可。加上圖例,純屬多此一舉。
9. 網格線要視情況使用
網格線的作用,在於幫助用戶了解軸標籤對應的數據信息。然而,在簡單圖表中,網格線並不是必要的。如果非要用網格線,要注意是否需要在 X 軸和 Y 軸上同時使用。通常,在一個軸上標註網格線就足夠了。
10. 樣圖中使用真實數據
設計師總想著設計出最完美版本的圖表,但通常並不使用真實數據。而真實數據,在實際圖表中又不能不重視。
而且,這對根據你的設計進行後端開發的開發者來講,困難重重。更重要的是,你也沒有去驗證,該圖表設計在現實生活中也是否實用。
最好的解決方案是做 2 個版本的設計。第 1 個版本中,圖表展示的是數據最完美的情況(即僅從美學角度來設計)。這種設計可用於個人作品集,並向潛在用戶推廣。第 2 個版本中,務必使用真實數據。這個版本的設計可以放心交給開發者去做後端開發。
俊鐵認為對於普通人來說,這裡的意義在於「我們要知道圖表的美觀,很多時會基於數據本身的情況」。我們在網上會看到很多好看的數據圖表模板,但那很可能不適合你的情況。
在套用模板時,不要一套了事,而是多進行對比,找出最適合自己的那一款。
當然,也有例外……
在圍繞數據而設計時,你應該充分利用你的判斷力和創造力。雖然數據有時會相當複雜,但要圍繞數據設計出有意義的故事,總不能千篇一律。
當然,也許你會發現,這 10 個原則可能都不適用於你所處理的數據。時不時地「違背原則」,也不是大問題。但不容忽視的是,一定要在現實情況下測試你的設計。
作者 | Ryan Bales,http://Bync.com 創始人兼創意總監。
譯者 | 俊鐵
題圖 | Pexels
文章譯自 Designing Charts?—?Principles Every Designer Should Know
本文首發於愛范兒。商業轉載請聯繫獲得授權,非商業轉載請註明出處。i
推薦閱讀: