PRD:模擬記錄數據可視化APP——Chartistic的一次迭代過程
Chartistic是一款通過交互快速編輯數據可視化圖表的app,本文是通過對“Chartistic”app進行產品需求調研與分析后產出的一次迭代PRD文檔。該文檔由幾個板塊組成:產品概述、需求調研與分析、迭代版本功能說明、頁面說明、功能原型、數據埋點等。
目錄
一、文檔綜述
二、產品概述
2.1產品簡介
2.2產品定位
2.3版本歷史
2.4迭代原因說明
2.5名詞說明
三、需求調研與分析
3.1需求整理
3.2需求分析與優先級排序
四、新版說明
4.1新版描述
4.2功能列表
五、全局說明
5.1 鍵盤說明
5.2 按鈕說明
5.3 默認設置
5.4 限制設定
5.5 頁面交互
六、產品說明
6.1 產品操作流程圖
6.2功能導圖
6.3頁面流程
6.4編輯功能頁面流程圖
七、頁面詳細功能說明
7.1圖表編輯頁
7.2X軸Y軸編輯頁
7.3設置編輯頁
7.4功能演示
八、數據埋點與監控指標
8.1數據埋點位置
8.2當前版本優化功能點數據監控指標
九、總結
01 文檔綜述
02 產品概述
2.1 產品簡介
Chartistic是一款備受好評的小眾數據可視化app,它帶有各種交互式柱狀圖、折線圖、面積圖、餅圖,可以通過簡單的參數調整,一鍵更換色彩風格,無需登錄便可幫助你迅速建立出強大圖表。
交互便捷,操作簡單的它已在43個國家/地區投入使用。在新加坡、泰國、菲律賓和越南,名列App Store的年度十佳應用榜單。上線起至今共入選 App Store 精品推薦 9 次,下載量累計24萬次 。
2.2 產品定位
- 用戶:需要對少量數據迅速進行可視化處理的辦公人群
- 產品定義:快速、簡單的移動端數據可視化工具應用,導出圖表作為PPT等演示工具的補充。
- 產品特征:無需登錄、交互式編輯、外觀選擇多樣性。
2.3 版本歷史
2.4 迭代原因說明
?(數據來源:七麥數據)
可以看到Chartistic最后一次版本更新在一年前,而此后下載量逐漸減少,盡管它在多個平臺曾多次被推薦為實用高效手機應用。
在實際體驗中,Chartistic的確有著操作簡單方便,交互體驗良好,成品效果佳的特征,例如:可以手動移動柱狀圖的柱體高度、餅圖的圖形角度來更改對應的數據;頁面風格可以一鍵更換、多種選擇;可以對標題位置、邊框類型、背景等進行編輯以確保外觀的多樣性。
然而,為了追求操作的簡便迅速,它的功能受到了很大的局限,例如:只可以手動輸入數據,不能從外部導入;最多只支持12組數據;不支持負值等。
這些局限導致它無法應對更多的數據處理要求,作為一個單獨的工具型App比較雞肋,導致用戶的留存存在比較大的挑戰。Chartistic的開發痛點在于如何在多樣的用戶需求與操作便捷迅速的移動端應用的產品定位之間尋求一個平衡。
出于對這款產品的喜歡,作者對該產品進行了部分需求的收集與整理,并模擬撰寫了本篇迭代PRD文檔,對于該產品的現有版本進行倒推的PRD文檔可以見作者的另一篇文章PRD:倒推數據可視化APP——Chartistic產品需求文檔,里面有詳細說明現有版本的功能細節與交互方式,在本篇文檔中與本次迭代功能無關的頁面與功能不再進行贅述。
2.5 名詞說明
- 維度:X軸數據,例如:月份、地點、周期等
- 指標:Y軸數據,例如:溫度、銷售額、毛利潤等
03 需求調研與分析
3.1 需求整理
用戶需求(收集于APP STORE 評價):
3.2 需求分析與優先級排序
首先進行需求的核實與判定,由實踐可得出這十一個需求都是屬于目前不支持的功能或者存在的局限,但是其中需求5.提高Y軸最大值可以通過更改Y軸單位并標注于Y軸名稱處解決,例如:將下表數據編輯為如下柱狀圖。
因此,判斷此需求為偽需求。
接下來對余下十個需求進行優先級排序,以下是將需求根據用戶量、頻次、開發難度、實現效果以及需求強度進行分析。
經過以上分析對比,并且考慮到7.支持編輯同一個維度同一個單位的兩組數據為8.支持雙Y軸的前置條件,因此最后需求優先級排序確定為4>6>3>7>2>1>8>9>11>10。
此app目前屬于免費產品,功能有所局限而操作便利、交互友好,在用戶反饋中有相當一定數量的用戶表示愿意為更高級的功能付費。
因此在實際業務操作中還需要進行用戶調研來衡量需求的商業價值來為需求進行優先級排序,可以考慮將部分開發難度較高但是效果好的功能作為付費專業版功能。此次迭代優先實現4、6、3、7這四個功能。
四、新版說明
4.1 新版描述
- 我們從最多支持12組數據升級到可以支持50組數據了;
- 柱狀圖和折線圖的數據可以編輯為負值了哦;
- 圖表風格列表呈現,想選哪個選哪個;
- 柱狀圖和折線圖支持兩組指標數據,可以用來進行數據對比啦。
4.2 功能列表
05 全局說明
5.1 鍵盤說明
在不同頁面需要輸入編輯時,對應的彈出鍵盤的類型
5.2 按鈕說明
圖表編輯頁面:
- 圖表上默認的隨機數值除外,標題編輯按鈕、X軸編輯按鈕、Y軸編輯按鈕在未輸入值前呈現灰色;
- 圖表類型按鈕:當前類型按鈕為黑色,未選擇類型為灰色
X軸Y軸編輯頁面:
- Y軸默認的隨機數值除外,X軸名稱編輯框、Y軸名稱編輯框、X軸的值編輯框在未輸入有效值前預填文字呈現灰色
設置編輯頁面:
- 圖表樣式選擇按鈕:當前樣式按鈕為黑色,未選擇樣式為灰色
5.3 默認設置
新建圖表時:
- 默認已有8組數據,Y軸數值在【0~1000】范圍內隨機,X軸不賦值待編輯
- 標題默認可見、居中對齊
- Y軸默認最大值為1000,最小值為0,不顯示小數
- 網格可見,行計數10,每一間隔的值100,對齊線不顯示、簡單圖表不開啟
- 邊框默認選擇無邊框
- X軸標題/Y軸標題/X軸圖例/Y軸圖例默認顯示
- 背景/風格/樣式隨機
- 單擊增加一組數據按鈕,增加的數據Y軸數值在【最大值~最小值】范圍內隨機,X軸不賦值待編輯
增加一組指標時:
- 僅有柱狀圖和折線圖可以增加一組指標,因此圖表僅可在柱狀圖/折線圖之間切換
- 新增指標數據組數與已有指標組數相同,新增指標數值在【最小值~最大值】范圍內隨機,例如:已編輯1-8月每月的銷售額,新增指標毛利額,則隨機產生8組毛利額數據對應X軸的1-8月
- 柱狀圖的顏色從每個柱子不同顏色變為同一個指標的柱體為一個顏色,一共兩個顏色
- 單擊增加一組數據按鈕,增加的兩個指標對應的數值在【最大值~最小值】范圍內隨機,X軸不賦值待編輯
- 指標圖例默認顯示,位置為頂部,顯示方式為色塊+對應的指標名稱
最小值編輯為負值時:
僅有柱狀圖和折線圖可以將最小值編輯為負值,因此圖表僅可在柱狀圖/折線圖之間切換。
切換顏色時:
- 圖表只有一個顏色時,點擊切換顏色按鈕出現顏色自定義選擇界面
- 圖表有一個以上顏色時,點擊切換顏色按鈕出現風格列表,點擊選擇所需風格
5.4 限制設定
- 最多可輸入50組數據;
- 柱狀圖/折線圖Y軸最大值可編輯范圍為-9999-10000,最小值編輯范圍為-10000-9999,最大值需要大于最小值;
- 面積圖/餅圖Y軸最大值可編輯范圍為1-10000,最小值編輯范圍為0-9999,最大值需要大于最小值;
- Y軸數值的編輯需在【最大值~最小值】范圍內;
- 首先確定的是(最大值-最小值)/行計數=每一間隔的值?,行計數的數量需要在【0~15】。因此每一間隔的值需要在【0.07*(最大值-最小值)~ (最大值-最小值)】這個范圍內,確保最多只能有14行,考慮到(最大值-最小值)/輸入的間隔值得到的行數有可能不是整數的問題,實際顯示的行數為(最大值-最小值)/輸入的間隔值四舍五入取整后的行數。
5.5 頁面交互
- 彈屏時底部頁面虛化,單擊彈屏以外的虛化界面,彈層關閉,返回上一頁面;
- 圖表編輯頁面下滑展開X軸Y軸編輯頁面,從屏幕下方上滑關閉;
- 圖表編輯頁面左滑展開設置編輯頁面,從屏幕左側右滑關閉。
06 產品說明
6.1 產品操作流程圖
6.2 功能導圖
標紅部分為本次需要優化或者新增的功能模塊:
6.3 頁面流程
本次迭代僅涉及圖表編輯頁、X軸Y軸編輯頁、設置編輯頁:
6.4 編輯功能頁面流程圖
標紅部分為本次迭代頁面需要新增的部分,黃色表格內容為不同情況下的按鈕操作結果說明。
07 頁面詳細功能說明
7.1 圖表編輯頁
圖1 單指標無負值
圖2 單指標有負值
圖3 雙指標有負值
圖4 刪除效果示意
頁面名稱:圖表編輯頁
入口:
- 點擊圖表完成頁編輯按鈕跳轉
- 新建圖表類型彈屏中點擊圖表類型對應按鈕進入
頁面說明:
主頁面:
- 左滑展開展開設置編輯頁面,下滑展開X軸Y軸編輯頁面
- 當存在負值或者雙指標時,圖表僅可在折線圖/柱狀圖之間切換
序號1,7,9:點擊圖表類型切換為折線圖,數值背景等設置不變,折線顏色為柱狀圖同一風格的單個顏色(如圖右)
序號2:點擊圖表類型切換為面積圖,數值背景等設置不變,折線與面積顏色為柱狀圖同一風格的單個顏色,折線的顏色比面積顏色深一個色號
序號3:點擊圖表類型切換為餅圖,數值背景等設置不變,配色也不變
序號4:(如下方圖5)
- 圖表只有一個顏色時,點擊切換顏色按鈕出現顏色自定義選擇界面
- 圖表有一個以上顏色時,點擊切換顏色按鈕出現風格列表,點擊選擇所需風格
序號5,6:
- 點擊一次增加一組數據,增加的數據Y軸數值在【最大值~最小值】范圍內隨機,X軸不賦值待編輯
- 最多可增加至50組數據,增加至50組數據后按鈕變灰,點擊無反應
序號8:
- 點擊一次增加一組兩個指標數據,增加的數據Y軸數值在【最大值~最小值】范圍內隨機,X軸不賦值待編輯
- 最多可增加至50組數據,增加至50組數據后按鈕變灰,點擊無反應
序號10:點擊后出現刪除按鈕(如圖4),單擊刪除按鈕刪除該組數據,當刪除至只剩一組數據時刪除按鈕隱藏,不可再刪除
序號11:
- 按住上滑/下滑–修改圓點高度,上方或者下方的對應數值一起修改,左側提示目前高度對應的數值,修改值在設定的Y軸最大值與最小值之間
- 當兩個指標的數據差值過小導致圓圈距離過近時,將較小的數字標識放置于圓圈下方
- 當兩個指標的數據相同時,圓圈重合,數字標識放置于圓圈上方,按鈕圓圈修改數據時優先修改上一次編輯的指標
圖5 顏色切換功能示意
7.2 X軸Y軸編輯頁
圖6
圖7
頁面名稱:柱狀圖/折線圖X軸Y軸編輯頁面
入口:
- 柱狀圖/折線圖圖表編輯頁面下滑展開
- 柱狀圖/折線圖圖表編輯頁面編輯X軸名稱按鈕,編輯Y軸名稱按鈕,編輯X軸按鈕,下拉按鈕點擊展開
頁面說明:
序號1:點擊增加一個指標,到雙指標頁面(如圖7),切換為減少一個指標按鈕即序號6
序號2:默認指標1為已有指標,指標2為新增指標
序號3:點擊編輯文本框與數值框之間出現小刪除按鈕即序號4,點擊刪除對應的該組數據
序號4:
- 初始狀態為隱藏,單擊刪除按鈕即序號3后出現,點擊刪除對應的該組數據,點擊屏幕其他任意位置再次隱藏
- 當刪除至只剩一組數據時自動隱藏,不可再刪除
序號5:
- 點擊一次增加一組雙指標數據,增加的數據Y軸數值在【最大值~最小值】范圍內隨機,X軸不賦值待編輯
- 最多可增加至50組數據,增加至50組數據后按鈕變灰,點擊無反應
序號6:點擊減少一個指標,到單指標頁面(如圖6),切換為增加一個指標按鈕即序號1
序號7:點擊保留編輯結果,收起X軸Y軸編輯頁面,回到圖表編輯頁
序號8:
- 下方圖表隨著X軸Y軸數據的編輯即時更改
- 點擊屏幕下半部分或者從下半部分上滑,收起X軸Y軸編輯頁面,回到圖表編輯頁
異常提示:
- Y軸編輯的數值>最大值時,彈屏【警告 所輸入的值大于最大值】,輸入框內容回到修改前的值;
- Y軸編輯的數值<最小值時,彈屏【警告 所輸入的值小于最小值】,輸入框內容回到修改前的值;
7.3 設置編輯頁
圖8
圖9
圖10
頁面名稱:設置編輯頁面
入口:
- 圖表編輯頁面左滑展開
- 圖表編輯頁面設置按鈕點擊展開
頁面說明:
序號1:
- 屏幕左側預覽圖隨著設置編輯即時更改
- 屏幕左側頁面點擊或者右滑返回圖表編輯頁
序號2:最大值最高可設置為10000,最大值設置的值需要大于最小值,僅可編輯為整數
序號3:最小值最小可設置為-10000,最小值設置的值需要小于最大值,僅可編輯為整數
異常提示:
- 最大值>10000時,彈屏【無效值 請輸入小于10000的值】,輸入框內容回到修改前的值;
- 最大值<=最小值時,彈屏【無效值 請輸入大于最小值的值】,輸入框內容回到修改前的值;
- 最小值<-10000時,彈屏【無效值 請輸入大于-10000的值】,輸入框內容回到修改前的值;
- 最小值>=最大值時,彈屏【無效值 請輸入小于最大值的值】,輸入框內容回到修改前的值;
序號4:雙指標時,出現指標圖例是否顯示按鈕,指標圖例默認顯示在頂部,位置可選為頂部、底部、左側、右側(如圖10)
7.4 功能演示
08 數據埋點與監控指標
8.1 數據埋點位置
8.2 當前版本優化功能點數據監控指標
09 總結
以上便是我本次撰寫的Chartistic的迭代產品需求文檔,因為是記錄的一次迭代內容,所以很多本次迭代非關鍵的交互與功能沒有在文內體現,默認與目前版本一致。
這款App是一款很實用的手機應用,交互很有特色,在收集用戶需求時看到很多用戶都表示希望有更多功能,并且愿意為此付費,雖然已經一年多沒有更新迭代了,還是希望開發公司能夠重新重視起來這支潛力股,幫助用戶在移動端更便捷的實現多樣的數據可視化圖表。
產品新人,文檔有諸多不足,歡迎各位前輩在評論區指教~
作者:啊晨,產品新人,積極尋找產品助理崗位中~郵箱:Cheryl_xu123@163.com
本文由 @啊晨 原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
又看了一遍,明白如何優先級排序了
@老師,如何根據幾個圖就判斷優先級排序呢?
懂了
厲害的很