編輯導(dǎo)讀：對于一個沒有UI/UE的數(shù)據(jù)產(chǎn)品來講，產(chǎn)品PRD的質(zhì)量就是產(chǎn)品最終的上限了。如果產(chǎn)品方案就很粗糙，實(shí)現(xiàn)效果就不要有太多期待了。那如何快速設(shè)計一個高保真的數(shù)據(jù)可視化產(chǎn)品原型呢？本文作者對此發(fā)表了自己的看法，與你分享。

除商業(yè)化的數(shù)據(jù)產(chǎn)品外，多數(shù)互聯(lián)網(wǎng)公司內(nèi)部使用的數(shù)據(jù)產(chǎn)品UI資源是非常匱乏的。因為沒有更好的替代品，所以內(nèi)部用戶對數(shù)據(jù)產(chǎn)品的容忍度通常較高，“能用”是用戶基本的期待了。

很早之前流傳過一個產(chǎn)品需求和開發(fā)實(shí)現(xiàn)的段子（詳見下圖），表達(dá)的核心思想是真正開發(fā)實(shí)現(xiàn)的過程會遇到時間成本、資源成本、開發(fā)質(zhì)量等各種限制，最終上線的產(chǎn)品會和產(chǎn)品需求有一定的Gap，總結(jié)下來，“產(chǎn)品的美感不會超過產(chǎn)品經(jīng)理的美感”，對于沒有UI/UE的數(shù)據(jù)產(chǎn)品來講，產(chǎn)品PRD的質(zhì)量就是產(chǎn)品最終的上限了。如果產(chǎn)品方案就很粗糙，實(shí)現(xiàn)效果就不要有太多期待了。那如何快速設(shè)計一個高保真的數(shù)據(jù)可視化產(chǎn)品原型呢？

第一步：明確需求

業(yè)務(wù)基礎(chǔ)的需求是能夠快速獲取到業(yè)務(wù)KPI數(shù)據(jù)，進(jìn)行數(shù)據(jù)分析，數(shù)據(jù)可視化是在數(shù)據(jù)可讀性、可視化、交互式分析提供更高效的解決方案。

對于產(chǎn)品經(jīng)理或運(yùn)營，他們的KPI是什么，日常工作有哪些動作來達(dá)成，過程需要什么樣的數(shù)據(jù)支撐決策/復(fù)盤，指標(biāo)拆分的常用維度有哪些？以產(chǎn)品經(jīng)理為例，日常要關(guān)注不同平臺、不同流量入口流量及轉(zhuǎn)化率，關(guān)鍵路徑的轉(zhuǎn)化漏斗，基于數(shù)據(jù)做產(chǎn)品功能迭代的決策支撐。

第二步：確定分析思路

沒有分析思路的可視化產(chǎn)品是沒有靈魂的，只是圖標(biāo)的堆疊，產(chǎn)品的價值就無法體現(xiàn)。好的可視化產(chǎn)品一定是有明確的分析思路包含在產(chǎn)品交互設(shè)計流程內(nèi)。結(jié)合流量分析的例子，梳理產(chǎn)品分析場景如下：

• 每天上班后打開電腦，產(chǎn)品經(jīng)理可以最直觀的看到大盤KPI(訪問轉(zhuǎn)化率)最新數(shù)據(jù)，以及變化趨勢
• 拆分到App、微信小程序、H5等不同平臺，看指標(biāo)是否正常，昨天微信小程序發(fā)版有沒有出問題
• 發(fā)現(xiàn)微信小程序轉(zhuǎn)化率環(huán)比上周下降20%，要進(jìn)一步分析是哪個流量入口轉(zhuǎn)化率降低了
• 經(jīng)過分析發(fā)現(xiàn)，是首頁底部新改版的信息流模式轉(zhuǎn)化率降低40%，再進(jìn)一步拆分從訪問到下單全流程轉(zhuǎn)化漏斗，看看是哪個步驟的用戶流失最大

總結(jié)下來，產(chǎn)品設(shè)計時，要把用戶看數(shù)據(jù)、分析數(shù)據(jù)思路，形成產(chǎn)品交互路徑，能夠指指引用戶逐步進(jìn)行操作，最終定位到問題，而不是把數(shù)據(jù)下載下來，excel在做篩選、分析。

第三步：設(shè)計產(chǎn)品方案

1. 頁面設(shè)計

常見的可視化頁面設(shè)計有指標(biāo)化管理的交互式分析、以及圖表瀑布流展示兩種，各有優(yōu)缺點(diǎn)。

布局方式一：指標(biāo)化管理模式

優(yōu)點(diǎn)：

• 頁面簡潔，重點(diǎn)突出，通過維度選擇和tab切換獲取更多的數(shù)據(jù)，避免一個頁面過多圖表難以聚焦
• 分析思路清晰，從匯總到維度細(xì)分，有需要時逐層拆分
• 方便權(quán)限管控，指標(biāo)化管理可以從維度、指標(biāo)控制權(quán)限

缺點(diǎn)：

• 默認(rèn)展示信息量有限，分析過程依賴交互選擇，信息隱藏的較深
• 指標(biāo)化管理適合核心KPI數(shù)量不多的情況（10個以內(nèi)），且指標(biāo)維度要統(tǒng)一，不同指標(biāo)維度不同時，交互要做一定調(diào)整，即日期作為共有維度，其他篩選條件只能隨著指標(biāo)tab切換位于指標(biāo)卡下方。

布局方式二：瀑布流模式

優(yōu)點(diǎn)：

• 信息平鋪展示，無需過多交互操作，可快速獲取需要數(shù)據(jù)信息
• 承載的信息量更多、可視化方式更豐富，每個圖表都可以是一個分析主題
• 對圖表共有維度要求不高，一般以日期為共有維度，作為全局篩選

缺點(diǎn)：

• 圖表數(shù)量平鋪過多時，重點(diǎn)不突出，難以聚焦
• 交互能力偏弱，用數(shù)據(jù)的人思路會受限于做圖表的人

2. 可視化圖表類型選擇

要避免為了炫酷的可視化效果而設(shè)計圖表，每種圖表有自己的適用場景（有很多專門的文章介紹），上述例子會用到：

• 指標(biāo)卡：展示指標(biāo)數(shù)值及對比結(jié)果，直截了當(dāng)?shù)母嬖V用戶昨天KPI是什么，怎么樣
• 折線圖(柱狀圖)：展示指標(biāo)趨勢，查看數(shù)據(jù)波動，多維度值時可作對比分析
• 漏斗圖：流量轉(zhuǎn)化漏斗，用于定位影響轉(zhuǎn)化率的關(guān)鍵步驟
• 表格：最簡單但功能最強(qiáng)大的圖表類型，可以展示多維度交叉數(shù)據(jù)，適合查看明細(xì)、對比分析

1）工具選擇

工欲善其事，必先利其器。產(chǎn)品PRD工具最常用的是Axure，MAC系統(tǒng)也有用Sketch。以Axure為例，借助外部的組件包可以大幅提升產(chǎn)品交互設(shè)計效率，且可以設(shè)計出高保真的可視化原型圖。把組件庫文件導(dǎo)入Axure后，各種可視化圖表就不需要再截圖或者手畫了，還有高保真交互。

2）頁面示例

第四步：需求確認(rèn)

產(chǎn)品PRD設(shè)計完成后，要首先和用戶（產(chǎn)品、運(yùn)營）確認(rèn)是否可以滿足日常的數(shù)據(jù)監(jiān)控和分析需求，經(jīng)過業(yè)務(wù)評審、產(chǎn)品內(nèi)部優(yōu)先級評審、開發(fā)評審等需求評審環(huán)節(jié)之后，就可以進(jìn)入排期開發(fā)了。

作者：數(shù)據(jù)干飯人，微信號公眾號：zhuangxiu1314，主要從事數(shù)據(jù)中臺產(chǎn)品體系建設(shè)，包括：開發(fā)套件、數(shù)據(jù)資產(chǎn)、BI應(yīng)用、精準(zhǔn)營銷平臺、機(jī)器學(xué)習(xí)平臺等。

本文由@數(shù)據(jù)干飯人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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