在上一篇文章里，筆者主要介紹了如何確認(rèn)一款數(shù)據(jù)分析產(chǎn)品的定位，并得到設(shè)計方案所需的關(guān)鍵信息。在本文中，筆者將著重分析“小屏幕（手機(jī)端）”背景下，數(shù)據(jù)分析產(chǎn)品的設(shè)計將遇到哪些難點(diǎn)、如何解決。同時以諸葛io的手機(jī)端為例，展現(xiàn)一次設(shè)計優(yōu)化的實(shí)戰(zhàn)過程。

由于本次的分析案例來源于競賽題目，我們先看看主辦方提出的要求：

其實(shí)，這三個方向也基本涵蓋了小屏幕下數(shù)據(jù)可視化最常遇到的“痛點(diǎn)”。下面我們就對這幾個問題一一進(jìn)行分析吧。

1、優(yōu)化較長加載時間中的用戶體驗(yàn)

問題闡述

用戶在進(jìn)行圖表定制和數(shù)據(jù)查詢時，根據(jù)實(shí)際情況可能會設(shè)置非常復(fù)雜的查詢條件。而讀取的數(shù)據(jù)量越大、設(shè)置的查詢條件越復(fù)雜，所需要的時間越長。

數(shù)據(jù)查詢與圖表生成需要一定的時間

“等待”對任何用戶來說都是相當(dāng)負(fù)面的體驗(yàn)，更糟糕的是，在手機(jī)上，用戶的耐心甚至?xí)M(jìn)一步下降。

試想一下：當(dāng)用戶用電腦瀏覽報表時，可以一邊讀當(dāng)日新聞，一邊等待數(shù)據(jù)處理完畢，只要打開兩個瀏覽器頁簽就可以了，而手機(jī)的小小屏幕卻不允許用戶同時做兩件事。在這樣的背景下，我們要求手機(jī)端用戶進(jìn)行分鐘級的等待，這簡直是不可能完成的任務(wù)?。?！

目前的諸葛io app提供了較為中規(guī)中矩的解決方案，如圖所示：這套方案比較容易出問題的是“第二步”，也就是面板已經(jīng)加載完成，而數(shù)據(jù)遲遲沒有進(jìn)來。

諸葛io app目前的數(shù)據(jù)加載過程

頭腦風(fēng)暴

“等待”是交互設(shè)計中老生常談的一個話題，在處理等待時間這個問題上，通常有兩種思路：

（1）告知用戶狀態(tài)

這種方案是最基本的，幾秒之內(nèi)的等待可以用活動指示器（Activity Indicator，我們常見的“轉(zhuǎn)圈圈gif”）給出反饋，更長時間的等待則建議給出進(jìn)度條（Progress Bar），告知用戶需要等候的時間與當(dāng)前進(jìn)度。

活動指示器與進(jìn)度條

（2）縮短用戶的心理等候時間

很多時候，由于客觀條件我們無法縮減實(shí)際的等候時間，但仍然可以通過一些小技巧縮減用戶心理上對時間的感受，縮減心理等候時間的方法又有三種：

a. 提供內(nèi)容，而不是一片空白

例如：app的啟動需要時間，而圖文豐富的啟動頁可以吸引用戶的注意力，自然就不太察覺得到等待時間了。

內(nèi)容豐富的啟動頁

b、引入情感化設(shè)計，讓加載小動畫更具趣味性

比起默認(rèn)的“轉(zhuǎn)圈圈gif”，目前越來越多的產(chǎn)品選擇制作獨(dú)特的、加載小動畫，博得用戶的好感，從而在一定程度上沖淡等候產(chǎn)生的焦慮。

美團(tuán)外賣app的加載小動畫

c、暗示內(nèi)容立即呈現(xiàn)，加強(qiáng)用戶的期待

最經(jīng)典的方案是加載占位圖（Skeleton Screen），在實(shí)際的內(nèi)容加載進(jìn)來之前，先呈現(xiàn)版式結(jié)構(gòu)。

占位圖

由于最長可能出現(xiàn)“分鐘級”的等候時間，以上所有設(shè)計模式都很難達(dá)到理想的效果。（進(jìn)度條最適合較長時間的等待狀態(tài)，但與技術(shù)人員溝通后，發(fā)現(xiàn)我們并不能準(zhǔn)確獲取數(shù)據(jù)查詢的所需時間與進(jìn)度。）不過，我們確實(shí)可以從頭腦風(fēng)暴中歸納出一點(diǎn)共識——“留白”是等待中的大忌，“提供內(nèi)容”哪怕是“偽內(nèi)容”才是王道。

解決方案

在“提供內(nèi)容”方面，我的建議是“暫時提供歷史緩存數(shù)據(jù)”。如圖所示，用戶打開諸葛io app后，想要查看今天（如9月29日）的最新的數(shù)據(jù)，但數(shù)據(jù)加載需要一定的時間，這期間，我們可以允許用戶先查看上一次（如9月27日）的緩存數(shù)據(jù)，這些緩存數(shù)據(jù)是用戶上次打開app時保存在本地的。

和當(dāng)前的情況進(jìn)行對比，新方案不再存在“停留在空頁面長達(dá)幾分鐘”的情形。

優(yōu)化方案：數(shù)據(jù)加載過程

本方案在技術(shù)層面是具備基礎(chǔ)的可行性的。首先，app上的看板通常是穩(wěn)定的，長期展示最重要的數(shù)據(jù)指標(biāo)，供相關(guān)人員查看監(jiān)測，即使展示“稍稍過時的”數(shù)據(jù)，對用戶仍然具有意義。其次，調(diào)取本地緩存數(shù)據(jù)不需要重新計算復(fù)雜的查詢條件，也不需要從服務(wù)器調(diào)取海量數(shù)據(jù)，回避了加載時間長的根本原因，可以保證數(shù)據(jù)呈現(xiàn)速度夠快。

因此，我認(rèn)為這個方案有繼續(xù)探討的價值。

2、優(yōu)化小屏中的數(shù)據(jù)可視化圖表

問題闡述

手機(jī)端受屏幕空間限制，數(shù)據(jù)可視化的圖表傳遞信息的能力比PC端弱很多，這是所有數(shù)據(jù)分析工具共同面臨的問題。而針對諸葛io來說，由于app端主要提供數(shù)據(jù)實(shí)時看板，設(shè)計的核心不在于圖表的樣式花哨，而在于具備對極端情況的兼容性。

舉個例子來說，這個圖表在手機(jī)上的顯示狀態(tài)是不是還比較清晰呢？

時間維度為7天的數(shù)據(jù)

然而，一旦用戶在自定義圖表時，設(shè)置了比較長的時間維度，空間限制的劣勢就立刻凸顯出來了。

時間維度為60天的數(shù)據(jù)

頭腦風(fēng)暴

應(yīng)對這種橫軸維度復(fù)雜（如時間跨度長）的情況，其實(shí)是有成熟的設(shè)計模式的。

支付寶app對于股市行情的可視化展示

這種設(shè)計模式移植到諸葛io上，基本上也是行得通的。但還有一個問題需要考慮，也就是交互手勢的問題。在支付寶的例子里，用戶只需點(diǎn)擊圖表，即可進(jìn)入放大模式。而在諸葛io app中，“點(diǎn)擊”的手勢已經(jīng)被占用了。

點(diǎn)擊圖標(biāo)，顯示對應(yīng)維度的數(shù)據(jù)詳情

那么，“長按放大”的手勢行得通嗎？

考慮再三，我也放棄了這種方式。因?yàn)橛脩艉芸赡荛L按圖表，同時進(jìn)行左右拖動，來微調(diào)至自己想要查看的日期（時間跨度較大時，不容易通過點(diǎn)擊一次選中正確的日期）?！伴L按放大”的交互手勢，可能會頻繁被觸發(fā)誤操作。

解決方案

最終的解決方案如圖，用戶可以點(diǎn)擊圖表面板右上角的“放大”icon，來橫屏查看更詳細(xì)的圖表。同時，用戶可以通過手勢或界面底部的拖動條，進(jìn)一步縮放圖表的展示范圍。

解決方案：放大查看圖表

3、對圖表進(jìn)行標(biāo)注和分享的需求

問題闡述

最后這個命題比較具有開放性，諸葛io官方給出的描述是這樣的：

團(tuán)隊中會有很多基于數(shù)據(jù)進(jìn)行協(xié)作的需求，比如：市場總監(jiān)發(fā)現(xiàn)新增用戶量異常下降，可以標(biāo)注出來并分享給團(tuán)隊同事，以便進(jìn)行后續(xù)處理。

先說我的結(jié)論

我更傾向于認(rèn)為，“在手機(jī)端對圖表進(jìn)行標(biāo)注與分享”是一個偽需求。或者至少是，在現(xiàn)階段的優(yōu)先級相對較低。

我的結(jié)論是基于以下現(xiàn)實(shí)得出的：

（1）權(quán)限管理是數(shù)據(jù)分析產(chǎn)品中非常重要的一個系統(tǒng)，什么角色有權(quán)訪問哪一部分?jǐn)?shù)據(jù)，是需要嚴(yán)加管控的。

（2）諸葛io在手機(jī)端主要展示數(shù)據(jù)看板，這部分?jǐn)?shù)據(jù)會隨時間不斷更新，而最新的數(shù)據(jù)是最敏感的。

（3）手機(jī)端的分享功能與web端相比，最大的優(yōu)勢就在于傳播效率高、影響力大，且有一定的推廣營銷作用。

結(jié)合以上三點(diǎn)，我認(rèn)為優(yōu)先在手機(jī)端提供“分享”功能是非常不符合邏輯，且成本高、益處少的。如為“分享”設(shè)置身份驗(yàn)證或加密功能，則手機(jī)端帶來的便利度與推廣效應(yīng)蕩然無存。若不設(shè)置權(quán)限限制，則存在敏感信息泄露的風(fēng)險。

（4）在模擬的用戶場景中，用戶發(fā)現(xiàn)數(shù)據(jù)異常并需要與其他同事協(xié)商（如：市場總監(jiān)發(fā)現(xiàn)新增用戶量異常下降），這個“異?！北厝话l(fā)生在最近，且持續(xù)至現(xiàn)在，如“兩個小時前”突發(fā)。若不是如此，用戶就更有可能是在會議室里，以經(jīng)驗(yàn)總結(jié)的形式討論過去某時間段的異常數(shù)據(jù)波動。

（5）“說一聲”與“標(biāo)注一下“之間存在一個性價比的拐點(diǎn)。越是復(fù)雜、語言描述不清的問題，越需要用可視化手段進(jìn)行標(biāo)注（如從很長一段時間中提取出一個時間段進(jìn)行分析）；而對于容易講清楚的問題，“標(biāo)注”就不太劃算了（如僅需要指出一個時間點(diǎn)）。

結(jié)合以上兩點(diǎn)，我認(rèn)為在手機(jī)端提供圖表“標(biāo)注”功能，并不能達(dá)到預(yù)期的效果。市場總監(jiān)更有可能會直接發(fā)一條語音到工作群里，說“小王，近兩個小時的新增用戶量不對呀，趕快跟一下！”

拓展思考

其實(shí)，“在手機(jī)端對圖表進(jìn)行標(biāo)注與分享”并不是真實(shí)的業(yè)務(wù)需求，實(shí)質(zhì)的需求在于“提升團(tuán)隊成員之間的協(xié)作效率”。

在這一點(diǎn)上，我建議諸葛io優(yōu)先研究web端的協(xié)作方式。web端承載著更多樣、更專業(yè)化的使用場景，在其中一些場合下，“標(biāo)注”與“分享”也是非常具有價值的。

小結(jié)

在本文中，我主要分析了小屏幕上的一些數(shù)據(jù)可視化問題，同時以諸葛io app為例，進(jìn)行了產(chǎn)品優(yōu)化的實(shí)戰(zhàn)演練。

相關(guān)閱讀

需求分析 | 如何快速摸清一款數(shù)據(jù)分析產(chǎn)品的定位

本文由 @?leadwhite 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議