如何做好移動端圖表設計

　　大家應該都知道，移動端的圖表設計因為受到畫布大小和手勢操作的影響，UI / UE都會有一些不同于Web端的展現和交互，今天AAA教育郭老師就針對如何做好移動端圖表設計進行簡單的說明，本著圖表設計的四大原則(Antv)：
 

　　準確：
 

　　從數據轉化到可視表達時不歪曲，不誤導，不遺漏，忠實反映數據里包含的信息;
 

　　有效：
 

　　信息傳達有重點，克制不冗余，避免信息過載;
 

　　清晰：
 

　　表現方式清楚易讀，具條理性，可以幫助用戶快速達成目標，在最少的時間內獲取更多的信息;
 

　　美觀：
 

　　對數據的完美表達，合理利用視覺元素進行藝術創(chuàng)作，不過度修飾，給用戶優(yōu)雅的體驗。
 

　　和自己的實戰(zhàn)經驗，這篇文章會給大家說說在移動端的圖表設計都有哪些特殊的地方，和該怎么處理這些特殊情況。
 

　　在這里還是以常用的三種圖表類型(柱狀圖/餅圖/折線圖)給大家來介紹，我們要對圖表進行設計和變化，就先了解圖表，上一期文章已經介紹了三種圖表的簡介、適用和不適用場景(沒看的同學可以去看看)，這一期我們就來了解下三大圖表的基本構成(移動端展現)：

 

　　移動端的圖表設計可以在不影響四大原則的情況下，可以做一些基礎優(yōu)化，讓界面看上去更美觀，更專注，空間利用率更高。
 

　　柱狀圖+折線圖
 

　　隱藏掉x軸標題(x軸一般是分類軸/連續(xù)軸/時間軸，所以很清晰，可以不需要標題)、y軸標題(移動端一般y軸標題都會在圖表的左上角以該區(qū)域標題出現)、y軸線;
 

　　餅圖+環(huán)圖
 

　　隱藏直接顯示在扇形或環(huán)形的連線數據標簽，讓用戶點擊面積區(qū)域或者對照圖例去查看相應數據;
 

　　視覺優(yōu)化了，另一些問題也就暴露出來了，從上面五個圖可以看出：
 

　　1.基礎柱狀圖和分組柱狀圖受X軸分類名稱字端長度的影響，也就只能顯示3-5個分類的數據;
 

　　2.產品強烈要求15個占比數據要用餅狀圖，餅圖的規(guī)范是建議分類數據小于等于8個，多余的怎么辦?
 

　　3.用戶不想看餅圖，覺得要一個一個點或者對照著看很麻煩，怎么樣讓用戶可以一眼看到全部分類的數據?
 

　　這些都是實戰(zhàn)過程中碰到的問題，我們在準備解決以上問題前，還有一個知識點需要了解下，就是移動端的特性：
 

　　a. 用戶碎片化時間、瀏覽行為多余深入交互行為;
 

　　b. 多使用于觸摸界面和手勢化的簡單交互操作(點擊，點擊并保持，平移，縮放);
 

　　c. 硬件界面多樣性;
 

　　d. 界面相對較小，內容信息呈現縱向和多線性;
 

　　e. 用戶操作時環(huán)境條件多樣;
 

　　f. 網絡電量相對不穩(wěn)定，要求具有性能高及特殊情況下的良好體驗;
 

　　以上1、2、4點對于我們解決移動端的圖標設計問題提供了思路和基礎，我們需要運用簡單的手勢操作，去創(chuàng)造一些靈活且友好的數據可視化方案，讓用戶有一個可操作性強且清晰的認知過程。
 

　　經過了產品實戰(zhàn)和競品融合，逐漸摸索出一些解決方案，分享出來，供各位同學參考：

 

　　總結一下：
 

　　問題：分類信息過載?
 

　　解決：
 

　　餅圖/環(huán)圖：最后一個分類變成【其他】，來匯總剩余分類的數據，這個解決方案是需要和產品確認的，在真實的業(yè)務場景中是否可以使用這種形式來展現，如果產品非要分類數據全部展現，建議餅圖/環(huán)圖替換成柱狀圖或者條形圖;
 

　　柱狀圖：根據X軸分類名稱字段長度，確認且固定一屏寬度最多展示分類的數量，剩余的分類數據采用可以平移滑動的操作來展示，在這里，柱狀圖只允許有平滑移動，不允許有縮放操作(因為分類字段不允許的重疊或隱藏);
 

　　折線圖/面積圖：X軸為分類數據時，方法同柱狀圖;X軸分類為連續(xù)或者時間軸時，允許平移+縮放功能(因為連續(xù)或者時間軸在縮小時，X軸數據允許離散分布，跨段顯示);
 

　　問題：字段長度過載?
 

　　解決：根據實際業(yè)務場景可選擇折行，長度+...，字段傾斜來解決問題
 

　　問題：圖表維度展示有限?
 

　　解決：
 

　　餅圖/環(huán)圖：多一個右上角列表與圖表相互切換的按鈕，給用戶另一個數據查看視角;
 

　　柱狀圖/折線圖：多一個右上角全屏按鈕(股票APP用的比較多)，用戶可以橫屏查看更多數據，方便用戶查看和截圖保存;
 

　　好了，以上就是本期的全部分享了，這里時間精力有限，也只梳理了常用的三種圖表設計，但其中的問題和解決方案都是很典型的，其他類型的圖表設計，其實都是基于這些的。因此，您現在已經了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關在該領域工作的更多相關文章。