如何做好移動(dòng)端圖表設(shè)計(jì)

　　大家應(yīng)該都知道，移動(dòng)端的圖表設(shè)計(jì)因?yàn)槭艿疆嫴即笮『褪謩?shì)操作的影響，UI / UE都會(huì)有一些不同于Web端的展現(xiàn)和交互，今天AAA教育郭老師就針對(duì)如何做好移動(dòng)端圖表設(shè)計(jì)進(jìn)行簡單的說明，本著圖表設(shè)計(jì)的四大原則(Antv)：
 

　　準(zhǔn)確：
 

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

　　有效：
 

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

　　清晰：
 

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

　　美觀：
 

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

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

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

 

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

　　柱狀圖+折線圖
 

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

　　餅圖+環(huán)圖
 

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

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

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

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

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

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

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

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

　　c. 硬件界面多樣性;
 

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

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

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

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

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

 

　　總結(jié)一下：
 

　　問題：分類信息過載?
 

　　解決：
 

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

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

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

　　問題：字段長度過載?
 

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

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

　　解決：
 

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

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

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