數據產品設計實戰：小屏幕下的大數據

大數據的概念如今對於很多人來說並不陌生，成功的數據分析，不但可以反映企業的經營狀況，更可以幫助企業優化經營方式。但數據分析類產品使用起來會花費一定學習成本，面向的客戶群體也不像to c用戶那麼廣，所以其中的設計方法和設計觀點普適性有限。本文主要整理了數據類產品從web端遷移到移動端的一些方法和淺薄感想，希望能為同性質類產品的設計師提供一些借鑒思路。

在一些工作場合中，可能會發現這樣一個場景：

老闆甩了一份報表給視覺設計師，讓他轉換成一張美觀的數據展示圖方便做報告，看著這一堆數字，設計師犯了難，你讓我對三五個數據進行藝術加工和表達沒有問題，如何處理這一堆數據呢？

其實，那是因為老闆把「信息可視化」和「數據可視化」的概念給搞混了，這兩者在現實應用中非常接近，並且有時能夠互相替換使用。

信息可視化【Infographic（Information Graphic）】更注重藝術效果，它是具體化的、獨立的、需要手工定製的。並沒有任何一個可視化程序能夠基於任一數據生成具體的圖片並在上面標註解釋性文字。

2013The Information is Beautiful Awards Interactive 交互類 銅獎 U.S. Gun Deaths Periscopic

數據可視化【data visualization】的概念則不同，它具有更廣的普適性，同一類圖表並不會因為數據不同而改變自己的展現形式，用戶通過對數據進行可視化的應用來搭建報表。製作人員大多隸屬於戰略規劃部門或者業務部門，例如數據分析師、運營人員等等。

E-chart 柱狀圖

「網易有數」是網易推出的自助式商業智能分析產品，為用戶提供了靈活的數據可視化報表製作功能，其設計原理是希望用戶按照自己的分析思路製作報表，從數據探索過程中發現業務問題，並最終解決問題。為了滿足用戶隨時隨地靈活閱覽的使用場景，產品將web端遷移到了移動端。

對於交互設計師來說，剛拿到需求的時候絕對不能按照以往的設計流程立馬就開始梳理功能模塊和嘗試著將大屏內容布局到小屏上。

首先應該認識到：

• to b工具類產品本身就有操作難度高，邏輯複雜的特點，光是web端的操作對於很多人來說就不好上手，但web端的屏幕空間較大，展示內容多。相對於web端，移動端在展示內容上更要挑關鍵的、重要的進行展示。
• 手機的使用時間較碎片，並不會佔據人們日常生活中很大一塊時間，所以並不適合處理複雜的問題，將複雜的操作簡化也是設計重點之一。
• 在數據的緩存上手機的性能比瀏覽器強大些，所以應該盡量減少需要從網路載入的內容，能夠提煉到native的控制項盡量不要從web端載入。

總結而言：以下幾點是本次設計過程中需要著重解決的問題：

• 如何在有限的空間內匯總圖表信息
• 如何把web端關鍵功能模塊在移動端重構
• 如何重新定義符合移動端的交互方式

一、明確目標用戶和使用場景

曾聽到過一位BI產品銷售說過一句話：to c類產品需要說服的是用戶，而to b類產品需要說服的是用戶的老闆。相對於to c產品的用戶至上， to b產品更重視商業利益。如果說產品的「好用」直接受益者是數據分析師，那麼「好看」才是公司老闆買單的理由，這裡的「好看」不僅僅指界面的美觀，更多指圖表內容能否清晰地反饋有價值的信息，能否發覺內部隱藏的問題，能否為公司後期發展提供參考。

web端能夠承載更多的功能，提供更專業的分析操作性，而移動端的特性是輕量級，靈活方便，不受時間空間等限制。對於決策層來說，為了製作一張圖表在電腦前待很久的場景非常少見，大部分決策人員應該是在會議室內圍著一張已經完成的報表進行討論和分析，或者在公司以外的地方隨時隨地監視關鍵指標的變化，並作出相應的指揮與應對措施。所以，web端的重點是「編輯」，而移動端的重心應該放在「閱覽」上。

二、關鍵模塊提取

明確了移動端的核心需求「閱覽」，設計師就可以對web端需要遷移的功能作出取捨。首先，我們來看下web端的使用流程和主要功能模塊：

一款數據分析產品一般由以下幾個模塊組成：數據源、數據模型、報表、儀錶盤

數據源是用來建立數據模型的，把導入的數據進行配置，形成了數據模型，然後通過數據模型中的數據欄位繪製報表，把繪製完畢的各個報表拼合成儀錶盤，整個流程就結束了。看上去好像很複雜，其實這和做菜的過程非常相似，數據源就是食材，數據模型對應經過處理的食材，編輯報表等同於烹飪食材，最終形成的儀錶盤就和烹飪完成端上桌的食物相似。

由上文可知，移動端的主要需求是閱覽，那麼我們著重應該關注的遷移模塊是web端的儀錶盤。

web端儀錶盤

明確了需要遷移的模塊后，需要對該模塊做一個布局整理

如圖所示：圖表區主要用以展示報表，佔用了面積最大的一塊區域，用戶通過這一界面來了解自己的業務情況。文件列表區用以歸納和整理各個文件層級，起到規劃和導航的作用。過濾器更通俗一點的說法是篩選器，屬於使用頻率最高的操作之一，方便用戶根據不同維度篩選出自己最需要的信息。探索功能使用頻率也比較高，但對於用戶來說有一定的學習成本，優先順序相對低一些。還有一些常用功能輔助用戶在瀏覽報表的過程中提高效率；比如瀏覽數據、刷新等等。根據web端的模塊布局，我們可以嘗試著結合用戶的操作習慣，在移動端排列大體框架，然後在框架的基礎上不斷細化和完善設計。

三、操作手勢定義

整理web端和移動端所有手勢

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

• 整理出web端所有的操作手勢以及對應的功能
• 判斷哪部分操作可以直接延用
• 對不能延用的交互重新定義

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

圖表分類

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

帶軸的圖表：

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

不帶軸的圖表：

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

表格圖：

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

按圖表分類定義操作手勢

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

滑塊選擇器

滑塊選擇器適用於通過一個方向的坐標系就能夠定位數據項的圖表

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

十字選擇器

十字選擇器適用於無法通過一個方向的坐標系就能夠定位數據項的圖表。

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

三角選擇器

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

指針選擇器

指針選擇器適用於環形圖、南丁格爾環形圖等

圖例

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

探索麵板

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

tooltip

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

表格圖

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

最後送上一張遷移完成的對比圖，如果想看更多的圖表內容，歡迎搜索「網易有數」體驗我們的產品。

結語：

以上內容是我在在工作過程中的一些摸索，對數據圖表在移動端應用的一些整理和提煉，數據並不枯燥，每個基礎圖表都有其特點，掌握這些特質、作出適用於不同行業不同業務的圖表，幫助人們讀懂數據並作出決策，就是數據可視化的價值所在。to b產品的受眾面本身就窄，內容的側重點也和to c產品有很大差別，但其中的一些設計方法和設計流程是通用的，希望能為大家帶來一些借鑒，以上案例、觀點難免片面，期待更多的指點和交流。

參考資料：

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

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

作者：魏辛逸，高級交互設計師。曾負責網易七魚交互，現於網易有數，一直在做to b產品。

本文來源於人人都是產品經理合作媒體@網易UEDC，作者@魏辛逸