起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識以諸葛io手機端為例：數據分析產品的設計如何優(yōu)化？
在上一篇文章里，筆者主要介紹了如何確認一款數據分析產品的定位，并得到設計方案所需的關鍵信息。在本文中，筆者將著重分析“小屏幕（手機端）”背景下，數據分析產品的設計將遇到哪些難點、如何解決。同時以諸葛io的手機端為例，展現一次設計優(yōu)化的實戰(zhàn)過程。
由于本次的分析案例來源于競賽題目，我們先看看主辦方提出的要求：
其實，這三個方向也基本涵蓋了小屏幕下數據可視化最常遇到的“痛點”。下面我們就對這幾個問題一一進行分析吧。
1、優(yōu)化較長加載時間中的用戶體驗
問題闡述
用戶在進行圖表定制和數據查詢時，根據實際情況可能會設置非常復雜的查詢條件。而讀取的數據量越大、設置的查詢條件越復雜，所需要的時間越長。
數據查詢與圖表生成需要一定的時間
“等待”對任何用戶來說都是相當負面的體驗，更糟糕的是，在手機上，用戶的耐心甚至會進一步下降。
試想一下：當用戶用電腦瀏覽報表時，可以一邊讀當日新聞，一邊等待數據處理完畢，只要打開兩個瀏覽器頁簽就可以了，而手機的小小屏幕卻不允許用戶同時做兩件事。在這樣的背景下，我們要求手機端用戶進行分鐘級的等待，這簡直是不可能完成的任務?。?！
目前的諸葛io app提供了較為中規(guī)中矩的解決方案，如圖所示：這套方案比較容易出問題的是“第二步”，也就是面板已經加載完成，而數據遲遲沒有進來。
諸葛io app目前的數據加載過程
頭腦風暴
“等待”是交互設計中老生常談的一個話題，在處理等待時間這個問題上，通常有兩種思路：
（1）告知用戶狀態(tài)
這種方案是最基本的，幾秒之內的等待可以用活動指示器（Activity Indicator，我們常見的“轉圈圈gif”）給出反饋，更長時間的等待則建議給出進度條（Progress Bar），告知用戶需要等候的時間與當前進度。
活動指示器與進度條
（2）縮短用戶的心理等候時間
很多時候，由于客觀條件我們無法縮減實際的等候時間，但仍然可以通過一些小技巧縮減用戶心理上對時間的感受，縮減心理等候時間的方法又有三種：
a. 提供內容，而不是一片空白
例如：app的啟動需要時間，而圖文豐富的啟動頁可以吸引用戶的注意力，自然就不太察覺得到等待時間了。
內容豐富的啟動頁
b、引入情感化設計，讓加載小動畫更具趣味性
比起默認的“轉圈圈gif”，目前越來越多的產品選擇制作獨特的、加載小動畫，博得用戶的好感，從而在一定程度上沖淡等候產生的焦慮。
美團外賣app的加載小動畫
c、暗示內容立即呈現，加強用戶的期待
最經典的方案是加載占位圖（Skeleton Screen），在實際的內容加載進來之前，先呈現版式結構。
占位圖
由于最長可能出現“分鐘級”的等候時間，以上所有設計模式都很難達到理想的效果。（進度條最適合較長時間的等待狀態(tài)，但與技術人員溝通后，發(fā)現我們并不能準確獲取數據查詢的所需時間與進度。）不過，我們確實可以從頭腦風暴中歸納出一點共識——“留白”是等待中的大忌，“提供內容”哪怕是“偽內容”才是王道。
解決方案
在“提供內容”方面，我的建議是“暫時提供歷史緩存數據”。如圖所示，用戶打開諸葛io app后，想要查看今天（如9月29日）的最新的數據，但數據加載需要一定的時間，這期間，我們可以允許用戶先查看上一次（如9月27日）的緩存數據，這些緩存數據是用戶上次打開app時保存在本地的。
和當前的情況進行對比，新方案不再存在“停留在空頁面長達幾分鐘”的情形。
優(yōu)化方案：數據加載過程
本方案在技術層面是具備基礎的可行性的。首先，app上的看板通常是穩(wěn)定的，長期展示最重要的數據指標，供相關人員查看監(jiān)測，即使展示“稍稍過時的”數據，對用戶仍然具有意義。其次，調取本地緩存數據不需要重新計算復雜的查詢條件，也不需要從服務器調取海量數據，回避了加載時間長的根本原因，可以保證數據呈現速度夠快。
因此，我認為這個方案有繼續(xù)探討的價值。
2、優(yōu)化小屏中的數據可視化圖表
問題闡述
手機端受屏幕空間限制，數據可視化的圖表傳遞信息的能力比PC端弱很多，這是所有數據分析工具共同面臨的問題。而針對諸葛io來說，由于app端主要提供數據實時看板，設計的核心不在于圖表的樣式花哨，而在于具備對極端情況的兼容性。
舉個例子來說，這個圖表在手機上的顯示狀態(tài)是不是還比較清晰呢？
時間維度為7天的數據
然而，一旦用戶在自定義圖表時，設置了比較長的時間維度，空間限制的劣勢就立刻凸顯出來了。
時間維度為60天的數據
頭腦風暴
應對這種橫軸維度復雜（如時間跨度長）的情況，其實是有成熟的設計模式的。
支付寶app對于股市行情的可視化展示
這種設計模式移植到諸葛io上，基本上也是行得通的。但還有一個問題需要考慮，也就是交互手勢的問題。在支付寶的例子里，用戶只需點擊圖表，即可進入放大模式。而在諸葛io app中，“點擊”的手勢已經被占用了。
點擊圖標，顯示對應維度的數據詳情
那么，“長按放大”的手勢行得通嗎？
考慮再三，我也放棄了這種方式。因為用戶很可能長按圖表，同時進行左右拖動，來微調至自己想要查看的日期（時間跨度較大時，不容易通過點擊一次選中正確的日期）?！伴L按放大”的交互手勢，可能會頻繁被觸發(fā)誤操作。
解決方案
最終的解決方案如圖，用戶可以點擊圖表面板右上角的“放大”icon，來橫屏查看更詳細的圖表。同時，用戶可以通過手勢或界面底部的拖動條，進一步縮放圖表的展示范圍。
解決方案：放大查看圖表
3、對圖表進行標注和分享的需求
問題闡述
最后這個命題比較具有開放性，諸葛io官方給出的描述是這樣的：
團隊中會有很多基于數據進行協作的需求，比如：市場總監(jiān)發(fā)現新增用戶量異常下降，可以標注出來并分享給團隊同事，以便進行后續(xù)處理。
先說我的結論
我更傾向于認為，“在手機端對圖表進行標注與分享”是一個偽需求。或者至少是，在現階段的優(yōu)先級相對較低。
我的結論是基于以下現實得出的：
（1）權限管理是數據分析產品中非常重要的一個系統(tǒng)，什么角色有權訪問哪一部分數據，是需要嚴加管控的。
（2）諸葛io在手機端主要展示數據看板，這部分數據會隨時間不斷更新，而最新的數據是最敏感的。
（3）手機端的分享功能與web端相比，最大的優(yōu)勢就在于傳播效率高、影響力大，且有一定的推廣營銷作用。
結合以上三點，我認為優(yōu)先在手機端提供“分享”功能是非常不符合邏輯，且成本高、益處少的。如為“分享”設置身份驗證或加密功能，則手機端帶來的便利度與推廣效應蕩然無存。若不設置權限限制，則存在敏感信息泄露的風險。
（4）在模擬的用戶場景中，用戶發(fā)現數據異常并需要與其他同事協商（如：市場總監(jiān)發(fā)現新增用戶量異常下降），這個“異?！北厝话l(fā)生在最近，且持續(xù)至現在，如“兩個小時前”突發(fā)。若不是如此，用戶就更有可能是在會議室里，以經驗總結的形式討論過去某時間段的異常數據波動。
（5）“說一聲”與“標注一下“之間存在一個性價比的拐點。越是復雜、語言描述不清的問題，越需要用可視化手段進行標注（如從很長一段時間中提取出一個時間段進行分析）；而對于容易講清楚的問題，“標注”就不太劃算了（如僅需要指出一個時間點）。
結合以上兩點，我認為在手機端提供圖表“標注”功能，并不能達到預期的效果。市場總監(jiān)更有可能會直接發(fā)一條語音到工作群里，說“小王，近兩個小時的新增用戶量不對呀，趕快跟一下！”
拓展思考
其實，“在手機端對圖表進行標注與分享”并不是真實的業(yè)務需求，實質的需求在于“提升團隊成員之間的協作效率”。
在這一點上，我建議諸葛io優(yōu)先研究web端的協作方式。web端承載著更多樣、更專業(yè)化的使用場景，在其中一些場合下，“標注”與“分享”也是非常具有價值的。
小結
在本文中，我主要分析了小屏幕上的一些數據可視化問題，同時以諸葛io app為例，進行了產品優(yōu)化的實戰(zhàn)演練。
相關閱讀
本文由 @?leadwhite 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
我覺得第三個需求 “對圖表進行標注和分享的需求]”，直接用截屏+少量語言/語音描述就能滿足…
讀了有收獲，感謝～