玩轉數據產品設計-小屏幕下的大數據

本文由  網易雲 發佈。

 

做者：魏辛逸（本篇文章僅限知乎內部分享，如需轉載，請取得做者贊成受權。）

大數據的概念現在對於不少人來講並不陌生，成功的數據分析，不但能夠反映企業的經營情況，更能夠幫助企業優化經營方式。但數據分析類產品使用起來會花費必定學習成本，面向的客戶羣體也不像to c用戶那麼廣，因此其中的設計方法和設計觀點普適性有限。本文主要整理了數據類產品從web端遷移到移動端的一些方法和淺薄感想，但願能爲同性質類產品的設計師提供一些借鑑思路。

 

 

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

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

其實，那是由於老闆把「信息可視化」和「數據可視化」的概念給搞混了，這二者在現實應用中很是接近，而且有時可以互相替換使用。

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

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

 

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

E-chart 柱狀圖

 

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

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

首先應該認識到：

• to b工具類產品自己就有操做難度高，邏輯複雜的特色，光是web端的操做對於不少人來講就很差上手，但web端的屏幕空間較大，展現內容多。相對於web端，移動端在展現內容上更要挑關鍵的、重要的進行展現。
• 手機的使用時間較碎片，並不會佔據人們平常生活中很大一塊時間，因此並不適合處理複雜的問題，將複雜的操做簡化也是設計重點之一。
• 在數據的緩存上手機的性能比瀏覽器強大些，因此應該儘可能減小須要從網絡加載的內容，可以提煉到native的控件儘可能不要從web端加載。

 

總結而言：如下幾點是本次設計過程當中須要着重解決的問題：

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

 

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

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

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

 

2、關鍵模塊提取

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

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

 

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

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

web端儀表盤

 

明確了須要遷移的模塊後，須要對該模塊作一個佈局整理

 

如圖所示：圖表區主要用以展現報表，佔用了面積最大的一塊區域，用戶經過這一界面來了解本身的業務狀況。文件列表區用以概括和整理各個文件層級，起到規劃和導航的做用。過濾器更通俗一點的說法是篩選器，屬於使用頻率最高的操做之一，方便用戶根據不一樣維度篩選出本身最須要的信息。探索功能使用頻率也比較高，但對於用戶來講有必定的學習成本，優先級相對低一些。還有一些經常使用功能輔助用戶在瀏覽報表的過程當中提升效率；好比瀏覽數據、刷新等等。根據web端的模塊佈局，咱們能夠嘗試着結合用戶的操做習慣，在移動端排列大致框架，而後在框架的基礎上不斷細化和完善設計。

 

3、操做手勢定義

• 整理web端和移動端全部手勢

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

• 整理出web端全部的操做手勢以及對應的功能
• 判斷哪部分操做能夠直接延用
• 對不能延用的交互從新定義

 

如表：有一些web端的操做手勢能夠直接在移動端延用，好比單擊、雙擊、拖動，可是有一些web端操做手勢在移動端是沒法延用的，須要從新設計相對應的手勢。具體的操做根據具體的業務來最終肯定。

圖表分類站在數據分析師的角度，通常會把圖表按照其表達意義來分類，好比說適合分析趨勢的圖、適合分析佔比的圖等等；但從交互設計師的角度來看，咱們還會按照交互操做方式和操做區域來分類，這能夠幫助咱們根據不一樣的類別來設計不一樣的交互手勢。

 

帶軸的圖表：

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

不帶軸的圖表：

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

表格圖：

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

 

• 按圖表分類定義操做手勢

帶軸圖表展現在移動端時，常常會遇到的一個問題：數據項很是難選中，由於web端的空間夠大，咱們能夠方便的選擇和查看具體數據，而移動端的屏幕很小，不少時候光靠手指是沒法選中密密麻麻的數據的，在這裏就沒法延用web端的操做。爲了解決這個問題，能夠引入選擇器的概念。

滑塊選擇器

 

滑塊選擇器適用於經過一個方向的座標系就可以定位數據項的圖表

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

十字選擇器

 

十字選擇器適用於沒法經過一個方向的座標系就可以定位數據項的圖表

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

三角選擇器

 

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

指針選擇器

 

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

圖例

 

 

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

探索麪板

 

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

tooltip

 

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

表格圖

 

表格圖的呈如今兩個端十分類似，操做並很少。在移動端的展現須要注意寬高比和web端並不一樣，可制定一些規則保證操做方便的同時能完整瀏覽所有數據。

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

 

 

結語：

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

 

網易有數：企業級大數據可視化分析平臺。面向業務人員的自助式敏捷分析平臺，採用PPT模式的報告製做，更加易學易用，具有強大的探索分析功能，真正幫助用戶洞察數據發現價值。可點擊這裏免費試用。

 

瞭解 網易雲 ：
網易雲官網：https://www.163yun.com/
新用戶大禮包：https://www.163yun.com/gift
網易雲社區：https://sq.163yun.com/