2020-2-6 前端達人
數據可視化是傳達信息的最好的方法之一,它可以直觀地呈現數據,快速吸引用戶的注意力。但是如果設計師對圖表設計的理解有偏差,在界面呈現上可能會對用戶產生錯誤的引導,因此筆者結合自己的工作經驗對圖表設計進行總結,希望每位設計師都能成為優秀的數據搬運工。
下面我將從功能、交互和UI深挖圖表設計的各個知識點,敲黑板劃重點咯~
1.概念
圖表泛指在屏幕中顯示的,可直觀展示統計信息屬性(時間性、數量性等),對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構,是一種很好的將對象屬性數據直觀、形象地“可視化”的手段。
如果說表格可以承載數據的全面性,那么圖表可以完美展現數據的特點和變化,它對數據的解讀能力是表格無法做到的。
2.使用場景
(1)比較數據差異情況。基于分類的數據,可以通過比較數據來了解不同分類的差異,比如柱狀圖。基于流程的數據,可以通過比較數據了解數據的變化趨勢,比如折線圖。
(2)分析數據關聯情況。展現數據間相互關系和數據的流向。比如桑葚圖。
(3)查看數據分布情況。對于錯綜復雜的變量之間關系,可以通過圖表來找出規律。比如利用氣泡圖進行回歸分析。
(4)了解數據構成情況。發現各變量的占比情況,比如餅圖。
3.原則
(1)輕量。眾所周知表格是可以承載數據的全面性,但將相同的數據用可視化展示時,設計師總想將所有的信息堆砌在圖表上,顯得圖表非常笨重,因此增加了用戶的思考時間。在此建議明確你圖表類型的特點,將主要信息呈現在圖表上或者分層展示圖表,比如數據鉆取功能。
(2)直觀。設計師應該將數據信息清晰而直觀地表達出來,使用戶一眼就能洞察事實,更快地發掘商業價值并作出決策。
(3)美感。缺乏美感的數據可視化僅僅是數據展示。美感包括兩個部分,第一個部分是整體協調美,比如對圖表中的各個元素(標題、網格、坐標軸、縮略軸、圖例、提示信息、預警線和輔助線等)進行合理的排版和使用協調的配色。第二部分是局部細節美,比如設計師根據流行趨勢給圖表加上漸變色。
我將用一種最復雜的圖表類型-雙軸圖當作示范。
1.標題。包括左對齊、居中對齊和右對齊。在選擇某種對齊方式前,請兼顧圖例的擺放位置。
2.柵格。包含點狀、線狀和斑馬線。
(1)根據數據特點選擇橫縱向輔助線,橫向引導線增強水平方向的導視。縱向引導線增強垂直方向的導視。
(2)線狀建議用虛線,因為不是用戶確定指向值。
4.縮略軸。包括滑面和滑柱。
(1)拖動滑柱滑動,增加或較少滑面,從而改變查看密度。
(2)拖動滑面滑動,保持滑面長度,進行前后移動。不改變查看密度,只改變查看范圍。
5.圖例。離散型數據包括橫向排列和縱向排列,連續型數據包括連續圖例。
(1)所有圖表類型的排列方式要統一,所以要考慮整體的圖表空間是適合橫向排列,還是縱向排列。
(2)所有形式總長度超過內容區換行或換列。
(3)雙軸圖包含了2種圖表類型,不同類型的圖例樣式要有所區分。
(4)連續型數據通過漸變色來展示數據大小的變化。
7.預警線。數據超過閾值就會報警,幫助用戶監控數據。
(1)預警線建議用實線,并用警示的顏色引起用戶的注意,最好用郵件或短信通知用戶。
8.輔助線。用戶設置某值作為數據參考進行比較,比如設置平均分為參考數值。
(1)輔助線建議用虛線,僅起參考作用。
1.加載方式。加載動畫建議使用和圖表相關的樣式。
2.排除異常值。允許用戶剔除高度異常點,因為異常值會影響用戶對整個圖表的分析。
3.數據鉆取。單擊某個數據可以看到該數據的詳細信息,變換分析的粒度。
4.適配
(1)增減留白。圖表大小固定不變,只是增減留白空間。
(2)等比縮放。圖表的長寬都以相同比例縮放。
1.顏色
(1)顏色主題
1)深色背景。適合較少信息內容。
優點:可以通過布局建立良好的視覺層次,深層次地反映內容,而且視覺吸引力強,給人以高端的視覺感受。
缺點:可讀性低。頁面太過聚焦所以對留白的平衡要求較高。
2)淺色背景。適合較多信息內容。
優點:可讀性高,增加了頁面空間。
缺點:內容不聚焦,信息過少則頁面顯得太空。
(3)顏色生成規則。一個變量統一用一種顏色,再按配色方案依次出每個變量的顏色。 使得同一圖表的色彩搭配和諧且具有美感。
(4)視覺缺陷。世界上有一部分人群有視覺缺陷,他們無法通過顏色來得到來精準地區分圖表的維度和變量。作為設計師不能忽略這部分較為龐大的特殊群體。
設計師常用的PS和AI提供了模擬紅色盲和綠色盲的校樣設置,選擇“視圖—校樣設置—紅色盲型/綠色盲型”。
想要從根本上解決這個問題,推薦一篇騰訊設計師的文章信息圖形中的顏色探討—面向色盲人士友好的設計解決方案。
2.布局
視覺層級要符合邏輯層級,利用信息深度引導用戶閱讀。每個元素要保持一致,保證布局的整體協調。
3.插畫
符合主題和整體基調,簡單易懂,數據可視化具有一定的認知門檻,有時候需要插畫來提高用戶的理解力。
4.留白
信息過多容易造成視覺壓力,合理的留白可以增強用戶對信息的吸收能力。
5.字體
避免有個性的襯線字體,字體要保證清晰可見。字體大小適中,太小影響閱讀,太大容易占用圖表控件。普通字體大概12px,標題用14px。
1.使用大廠開放的圖表庫
圖表庫的圖表類型豐富且統一,而且大大節省了開發時間,比如百度的Echart和阿里的G2。
2.在專業數據分析網站獲取靈感
筆者剛開始學習數據可視化就是拿著數據表格不停地在競品上摸索,作為一名用戶去感受這些圖表的交互體驗。這里推薦一份數據可視化網站名單。
1.先懂數據,再談可視化
為此我們要了解圖表類型的適用場景和局限,可以看33種經典圖表類型總結,輕松玩轉數據可視化。了解這些可以幫助大家通過UI設計更好地展現圖表的特點。比如展示各地區的人口密度,可以用柱狀圖來展示,但是我們發現用地圖會更加接近用戶的期望。
2.為了數據,過度可視化
很多時候設計師在圖表上很難展現自己的設計功力,從而會給圖表增加過多的視覺效果,比如3D效果。
3.真實數據,友好可視化
數據產品不要試圖去掩蓋問題,而要反映真實數據,暴露問題,并且和用戶一同解決。比如對數據閾值進行監測,預警線就是很友好的可視化方式。
轉自:簡書
作者:idatadesign
鏈接:https://www.jianshu.com/p/816f10b7d594
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
藍藍設計( 91whvog3.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務