小屏幕的大數(shù)據(jù)可視化探索

數(shù)據(jù)并不枯燥，每個基礎(chǔ)圖表都有其特點，掌握這些特質(zhì)、作出適用于不同行業(yè)不同業(yè)務(wù)的圖表，幫助人們讀懂?dāng)?shù)據(jù)并作出決策，就是數(shù)據(jù)可視化的價值所在。

web和手機(jī)兩者的屏幕大小差異很大，這引出一個思考，就是如何在更小的手機(jī)屏幕上更加美觀和易用的呈現(xiàn)大數(shù)據(jù)分析圖表？

我們先整理出web端和移動端所有手勢

工具類產(chǎn)品的特點之一是操作頻繁，在遷移的過程中應(yīng)著重考慮符合移動端的交互方式，建議遵循以下流程：

整理出web端所有的操作手勢以及對應(yīng)的功能

判斷哪部分操作可以直接延用

對不能延用的交互重新定義

如表：有一些web端的操作手勢可以直接在移動端延用，比如單擊、雙擊、拖動，但是有一些web端操作手勢在移動端是無法延用的，需要重新設(shè)計相對應(yīng)的手勢。具體的操作根據(jù)具體的業(yè)務(wù)來最終確定。

圖表分類

站在數(shù)據(jù)分析師的角度，一般會把圖表按照其表達(dá)意義來分類，比如說適合分析趨勢的圖、適合分析占比的圖等等；但從交互設(shè)計師的角度來看，我們還會按照交互操作方式和操作區(qū)域來分類，這可以幫助我們根據(jù)不同的類別來設(shè)計不同的交互手勢。

帶軸的圖表：

包含最主流的圖表類型如柱狀圖、折線圖等；覆蓋圖表類型最多，可操作內(nèi)容也最多，交互普適性最廣

不帶軸的圖表： 

每個圖表都有其個性化操作方式，普適性相對較窄

表格圖：

操作少，和web端操作相似度最高，大部分手勢可延用

按圖表分類定義操作手勢

帶軸圖表展示在移動端時，經(jīng)常會遇到的一個問題：數(shù)據(jù)項非常難選中，因為web端的空間夠大，我們可以方便的選擇和查看具體數(shù)據(jù)，而移動端的屏幕很小，很多時候光靠手指是無法選中密密麻麻的數(shù)據(jù)的，在這里就無法延用web端的操作。為了解決這個問題，可以引入選擇器的概念。

滑塊選擇器

滑塊選擇器適用于通過一個方向的坐標(biāo)系就能夠定位數(shù)據(jù)項的圖表

例如：普通柱狀圖、普通折線圖、普通區(qū)域圖等等；整個操作空間都集中在了屏幕底部，也保證了不管多小多細(xì)的數(shù)據(jù)項都能被選中。

十字選擇器

十字選擇器適用于無法通過一個方向的坐標(biāo)系就能夠定位數(shù)據(jù)項的圖表。

例如：散點圖、堆疊柱狀圖、多折線圖、多區(qū)域圖等等，手指拖動十字中心選擇數(shù)據(jù)項，操作區(qū)域覆蓋整個屏幕。

三角選擇器

不帶軸圖表一般都較為特殊，普適性沒有帶軸圖表這么廣，但也有一定的規(guī)律可循；三角選擇器適用于餅圖、南丁格爾圖等。

指針選擇器

指針選擇器適用于環(huán)形圖、南丁格爾環(huán)形圖等

圖例

除了圖表內(nèi)的操作，用戶還常常還需要通過圖例查看不同顏色的數(shù)據(jù)項各自的名稱，一般顯示在圖表上方，web端屏幕夠大，一眼就能夠看完，幾乎不需要額外操作；但在移動端，即使忽略每個名稱的字?jǐn)?shù)長度，看全所有的圖例也很難，在這種情況下，我們得允許用戶在這個區(qū)域橫向拖動操作，必要的時候還可以做些操作引導(dǎo)。

探索面板

探索功能面板包括一些常用的操作，比如說排序、隱藏數(shù)據(jù)項等等，在web端是通過右鍵激活的；但在移動端并沒有右鍵這個操作，這個時候可以把右鍵替換成長按，同樣能夠觸發(fā)面板。

tooltip

tooltip在web端圖表操作中也很常見，當(dāng)用戶hover在某個數(shù)據(jù)項上時，tooltip中會列出關(guān)于這個數(shù)據(jù)項的詳細(xì)信息；但在移動端有一些問題，首先，移動端沒有hover的操作；其次，一些數(shù)據(jù)項的詳細(xì)信息內(nèi)容很多，很有可能出現(xiàn)一個很大的浮層遮蓋住大部分圖表，當(dāng)你在拖動滑塊瀏覽數(shù)據(jù)信息的時候，這個浮層會隨著你的滑動一直存在，影響美觀。所以，我們把tooltip內(nèi)的信息放到屏幕最上方展示，保證浮層不會擋住圖表，如果最上方展示不下，允許橫向拖動瀏覽完整詳情。

表格圖

表格圖的呈現(xiàn)在兩個端十分相似，操作并不多。在移動端的展示需要注意寬高比和web端并不同，可制定一些規(guī)則保證操作方便的同時能完整瀏覽全部數(shù)據(jù)。

最后送上一張遷移完成的對比圖。