大數(shù)據(jù)的概念如今對(duì)于很多人來(lái)說(shuō)并不陌生，成功的數(shù)據(jù)分析，不但可以反映企業(yè)的經(jīng)營(yíng)狀況，更可以幫助企業(yè)優(yōu)化經(jīng)營(yíng)方式。但數(shù)據(jù)分析類產(chǎn)品使用起來(lái)會(huì)花費(fèi)一定學(xué)習(xí)成本，面向的客戶群體也不像to c用戶那么廣，所以其中的設(shè)計(jì)方法和設(shè)計(jì)觀點(diǎn)普適性有限。本文主要整理了數(shù)據(jù)類產(chǎn)品從web端遷移到移動(dòng)端的一些方法和淺薄感想，希望能為同性質(zhì)類產(chǎn)品的設(shè)計(jì)師提供一些借鑒思路。

在一些工作場(chǎng)合中，可能會(huì)發(fā)現(xiàn)這樣一個(gè)場(chǎng)景：

老板甩了一份報(bào)表給視覺(jué)設(shè)計(jì)師，讓他轉(zhuǎn)換成一張美觀的數(shù)據(jù)展示圖方便做報(bào)告，看著這一堆數(shù)字，設(shè)計(jì)師犯了難，你讓我對(duì)三五個(gè)數(shù)據(jù)進(jìn)行藝術(shù)加工和表達(dá)沒(méi)有問(wèn)題，如何處理這一堆數(shù)據(jù)呢？

其實(shí)，那是因?yàn)槔习灏选靶畔⒖梢暬焙汀皵?shù)據(jù)可視化”的概念給搞混了，這兩者在現(xiàn)實(shí)應(yīng)用中非常接近，并且有時(shí)能夠互相替換使用。

信息可視化【Infographic（Information Graphic）】更注重藝術(shù)效果，它是具體化的、獨(dú)立的、需要手工定制的。并沒(méi)有任何一個(gè)可視化程序能夠基于任一數(shù)據(jù)生成具體的圖片并在上面標(biāo)注解釋性文字。

2013The Information is Beautiful Awards ? ?Interactive 交互類 銅獎(jiǎng) ? ??U.S. Gun Deaths ? ?Periscopic

數(shù)據(jù)可視化【data visualization】的概念則不同，它具有更廣的普適性，同一類圖表并不會(huì)因?yàn)閿?shù)據(jù)不同而改變自己的展現(xiàn)形式，用戶通過(guò)對(duì)數(shù)據(jù)進(jìn)行可視化的應(yīng)用來(lái)搭建報(bào)表。制作人員大多隸屬于戰(zhàn)略規(guī)劃部門或者業(yè)務(wù)部門，例如數(shù)據(jù)分析師、運(yùn)營(yíng)人員等等。

E-chart ? 柱狀圖

“網(wǎng)易有數(shù)”是網(wǎng)易推出的自助式商業(yè)智能分析產(chǎn)品，為用戶提供了靈活的數(shù)據(jù)可視化報(bào)表制作功能，其設(shè)計(jì)原理是希望用戶按照自己的分析思路制作報(bào)表，從數(shù)據(jù)探索過(guò)程中發(fā)現(xiàn)業(yè)務(wù)問(wèn)題，并最終解決問(wèn)題。為了滿足用戶隨時(shí)隨地靈活閱覽的使用場(chǎng)景，產(chǎn)品將web端遷移到了移動(dòng)端。

對(duì)于交互設(shè)計(jì)師來(lái)說(shuō)，剛拿到需求的時(shí)候絕對(duì)不能按照以往的設(shè)計(jì)流程立馬就開(kāi)始梳理功能模塊和嘗試著將大屏內(nèi)容布局到小屏上。

首先應(yīng)該認(rèn)識(shí)到：

1. to b工具類產(chǎn)品本身就有操作難度高，邏輯復(fù)雜的特點(diǎn)，光是web端的操作對(duì)于很多人來(lái)說(shuō)就不好上手，但web端的屏幕空間較大，展示內(nèi)容多。相對(duì)于web端，移動(dòng)端在展示內(nèi)容上更要挑關(guān)鍵的、重要的進(jìn)行展示。
2. 手機(jī)的使用時(shí)間較碎片，并不會(huì)占據(jù)人們?nèi)粘Ｉ钪泻艽笠粔K時(shí)間，所以并不適合處理復(fù)雜的問(wèn)題，將復(fù)雜的操作簡(jiǎn)化也是設(shè)計(jì)重點(diǎn)之一。
3. 在數(shù)據(jù)的緩存上手機(jī)的性能比瀏覽器強(qiáng)大些，所以應(yīng)該盡量減少需要從網(wǎng)絡(luò)加載的內(nèi)容，能夠提煉到native的控件盡量不要從web端加載。

總結(jié)而言：以下幾點(diǎn)是本次設(shè)計(jì)過(guò)程中需要著重解決的問(wèn)題：

• 如何在有限的空間內(nèi)匯總圖表信息
• 如何把web端關(guān)鍵功能模塊在移動(dòng)端重構(gòu)
• 如何重新定義符合移動(dòng)端的交互方式

一、明確目標(biāo)用戶和使用場(chǎng)景

曾聽(tīng)到過(guò)一位BI產(chǎn)品銷售說(shuō)過(guò)一句話：to c類產(chǎn)品需要說(shuō)服的是用戶，而to b類產(chǎn)品需要說(shuō)服的是用戶的老板。相對(duì)于to c產(chǎn)品的用戶至上， to? b產(chǎn)品更重視商業(yè)利益。如果說(shuō)產(chǎn)品的“好用”直接受益者是數(shù)據(jù)分析師，那么“好看”才是公司老板買單的理由，這里的“好看”不僅僅指界面的美觀，更多指圖表內(nèi)容能否清晰地反饋有價(jià)值的信息，能否發(fā)覺(jué)內(nèi)部隱藏的問(wèn)題，能否為公司后期發(fā)展提供參考。

web端能夠承載更多的功能，提供更專業(yè)的分析操作性，而移動(dòng)端的特性是輕量級(jí)，靈活方便，不受時(shí)間空間等限制。對(duì)于決策層來(lái)說(shuō)，為了制作一張圖表在電腦前待很久的場(chǎng)景非常少見(jiàn)，大部分決策人員應(yīng)該是在會(huì)議室內(nèi)圍著一張已經(jīng)完成的報(bào)表進(jìn)行討論和分析，或者在公司以外的地方隨時(shí)隨地監(jiān)視關(guān)鍵指標(biāo)的變化，并作出相應(yīng)的指揮與應(yīng)對(duì)措施。所以，web端的重點(diǎn)是“編輯”，而移動(dòng)端的重心應(yīng)該放在“閱覽”上。

二、關(guān)鍵模塊提取

明確了移動(dòng)端的核心需求“閱覽”，設(shè)計(jì)師就可以對(duì)web端需要遷移的功能作出取舍。首先，我們來(lái)看下web端的使用流程和主要功能模塊：

一款數(shù)據(jù)分析產(chǎn)品一般由以下幾個(gè)模塊組成：數(shù)據(jù)源、數(shù)據(jù)模型、報(bào)表、儀表盤

數(shù)據(jù)源是用來(lái)建立數(shù)據(jù)模型的，把導(dǎo)入的數(shù)據(jù)進(jìn)行配置，形成了數(shù)據(jù)模型，然后通過(guò)數(shù)據(jù)模型中的數(shù)據(jù)字段繪制報(bào)表，把繪制完畢的各個(gè)報(bào)表拼合成儀表盤，整個(gè)流程就結(jié)束了?？瓷先ズ孟窈軓?fù)雜，其實(shí)這和做菜的過(guò)程非常相似，數(shù)據(jù)源就是食材，數(shù)據(jù)模型對(duì)應(yīng)經(jīng)過(guò)處理的食材，編輯報(bào)表等同于烹飪食材，最終形成的儀表盤就和烹飪完成端上桌的食物相似。

由上文可知，移動(dòng)端的主要需求是閱覽，那么我們著重應(yīng)該關(guān)注的遷移模塊是web端的儀表盤。

web端儀表盤

明確了需要遷移的模塊后，需要對(duì)該模塊做一個(gè)布局整理

如圖所示：圖表區(qū)主要用以展示報(bào)表，占用了面積最大的一塊區(qū)域，用戶通過(guò)這一界面來(lái)了解自己的業(yè)務(wù)情況。文件列表區(qū)用以歸納和整理各個(gè)文件層級(jí)，起到規(guī)劃和導(dǎo)航的作用。過(guò)濾器更通俗一點(diǎn)的說(shuō)法是篩選器，屬于使用頻率最高的操作之一，方便用戶根據(jù)不同維度篩選出自己最需要的信息。探索功能使用頻率也比較高，但對(duì)于用戶來(lái)說(shuō)有一定的學(xué)習(xí)成本，優(yōu)先級(jí)相對(duì)低一些。還有一些常用功能輔助用戶在瀏覽報(bào)表的過(guò)程中提高效率；比如瀏覽數(shù)據(jù)、刷新等等。根據(jù)web端的模塊布局，我們可以嘗試著結(jié)合用戶的操作習(xí)慣，在移動(dòng)端排列大體框架，然后在框架的基礎(chǔ)上不斷細(xì)化和完善設(shè)計(jì)。

三、操作手勢(shì)定義

整理web端和移動(dòng)端所有手勢(shì)

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

1. 整理出web端所有的操作手勢(shì)以及對(duì)應(yīng)的功能
2. 判斷哪部分操作可以直接延用
3. 對(duì)不能延用的交互重新定義

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

圖表分類

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

帶軸的圖表：

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

不帶軸的圖表： ? ?

每個(gè)圖表都有其個(gè)性化操作方式，普適性相對(duì)較窄

表格圖：

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

按圖表分類定義操作手勢(shì)

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

滑塊選擇器

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

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

十字選擇器

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

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

三角選擇器

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

指針選擇器

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

圖例

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

探索面板

探索功能面板包括一些常用的操作，比如說(shuō)排序、隱藏?cái)?shù)據(jù)項(xiàng)等等，在web端是通過(guò)右鍵激活的；但在移動(dòng)端并沒(méi)有右鍵這個(gè)操作，這個(gè)時(shí)候可以把右鍵替換成長(zhǎng)按，同樣能夠觸發(fā)面板。

tooltip

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

表格圖

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

最后送上一張遷移完成的對(duì)比圖，如果想看更多的圖表內(nèi)容，歡迎搜索“網(wǎng)易有數(shù)”體驗(yàn)我們的產(chǎn)品。

結(jié)語(yǔ)：

以上內(nèi)容是我在在工作過(guò)程中的一些摸索，對(duì)數(shù)據(jù)圖表在移動(dòng)端應(yīng)用的一些整理和提煉，數(shù)據(jù)并不枯燥，每個(gè)基礎(chǔ)圖表都有其特點(diǎn)，掌握這些特質(zhì)、作出適用于不同行業(yè)不同業(yè)務(wù)的圖表，幫助人們讀懂?dāng)?shù)據(jù)并作出決策，就是數(shù)據(jù)可視化的價(jià)值所在。to b產(chǎn)品的受眾面本身就窄，內(nèi)容的側(cè)重點(diǎn)也和to c產(chǎn)品有很大差別，但其中的一些設(shè)計(jì)方法和設(shè)計(jì)流程是通用的，希望能為大家?guī)?lái)一些借鑒，以上案例、觀點(diǎn)難免片面，期待更多的指點(diǎn)和交流。

參考資料：

原文：《The Difference Between Infographics and Visualization》Robert Kosara

譯文：《信息圖（Infographics）和可視化（Visualization）的區(qū)別》 未知的EQ

作者：魏辛逸，高級(jí)交互設(shè)計(jì)師。曾負(fù)責(zé)網(wǎng)易七魚(yú)交互，現(xiàn)于網(wǎng)易有數(shù)，一直在做to b產(chǎn)品。

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC，作者@魏辛逸