如何做好移動端圖表設(shè)計

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

　　準(zhǔn)確：
 

　　從數(shù)據(jù)轉(zhuǎn)化到可視表達(dá)時不歪曲，不誤導(dǎo)，不遺漏，忠實反映數(shù)據(jù)里包含的信息;
 

　　有效：
 

　　信息傳達(dá)有重點(diǎn)，克制不冗余，避免信息過載;
 

　　清晰：
 

　　表現(xiàn)方式清楚易讀，具條理性，可以幫助用戶快速達(dá)成目標(biāo)，在最少的時間內(nèi)獲取更多的信息;
 

　　美觀：
 

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

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

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

 

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

　　柱狀圖+折線圖
 

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

　　餅圖+環(huán)圖
 

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

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

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

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

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

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

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

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

　　c. 硬件界面多樣性;
 

　　d. 界面相對較小，內(nèi)容信息呈現(xiàn)縱向和多線性;
 

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

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

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

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

 

　　總結(jié)一下：
 

　　問題：分類信息過載?
 

　　解決：
 

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

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

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

　　問題：字段長度過載?
 

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

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

　　解決：
 

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

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

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