Chartistic是一款通過(guò)交互快速編輯數(shù)據(jù)可視化圖表的app，本文是通過(guò)對(duì)“Chartistic”app進(jìn)行產(chǎn)品需求調(diào)研與分析后產(chǎn)出的一次迭代PRD文檔。該文檔由幾個(gè)板塊組成：產(chǎn)品概述、需求調(diào)研與分析、迭代版本功能說(shuō)明、頁(yè)面說(shuō)明、功能原型、數(shù)據(jù)埋點(diǎn)等。

目錄

一、文檔綜述

二、產(chǎn)品概述

2.1產(chǎn)品簡(jiǎn)介

2.2產(chǎn)品定位

2.3版本歷史

2.4迭代原因說(shuō)明

2.5名詞說(shuō)明

三、需求調(diào)研與分析

3.1需求整理

3.2需求分析與優(yōu)先級(jí)排序

四、新版說(shuō)明

4.1新版描述

4.2功能列表

五、全局說(shuō)明

5.1 鍵盤(pán)說(shuō)明

5.2 按鈕說(shuō)明

5.3 默認(rèn)設(shè)置

5.4 限制設(shè)定

5.5 頁(yè)面交互

六、產(chǎn)品說(shuō)明

6.1 產(chǎn)品操作流程圖

6.2功能導(dǎo)圖

6.3頁(yè)面流程

6.4編輯功能頁(yè)面流程圖

七、頁(yè)面詳細(xì)功能說(shuō)明

7.1圖表編輯頁(yè)

7.2X軸Y軸編輯頁(yè)

7.3設(shè)置編輯頁(yè)

7.4功能演示

八、數(shù)據(jù)埋點(diǎn)與監(jiān)控指標(biāo)

8.1數(shù)據(jù)埋點(diǎn)位置

8.2當(dāng)前版本優(yōu)化功能點(diǎn)數(shù)據(jù)監(jiān)控指標(biāo)

九、總結(jié)

01 文檔綜述

02 產(chǎn)品概述

2.1 產(chǎn)品簡(jiǎn)介

Chartistic是一款備受好評(píng)的小眾數(shù)據(jù)可視化app，它帶有各種交互式柱狀圖、折線圖、面積圖、餅圖，可以通過(guò)簡(jiǎn)單的參數(shù)調(diào)整，一鍵更換色彩風(fēng)格，無(wú)需登錄便可幫助你迅速建立出強(qiáng)大圖表。

交互便捷，操作簡(jiǎn)單的它已在43個(gè)國(guó)家/地區(qū)投入使用。在新加坡、泰國(guó)、菲律賓和越南，名列App Store的年度十佳應(yīng)用榜單。上線起至今共入選 App Store 精品推薦 9 次，下載量累計(jì)24萬(wàn)次 。

2.2 產(chǎn)品定位

• 用戶(hù)：需要對(duì)少量數(shù)據(jù)迅速進(jìn)行可視化處理的辦公人群
• 產(chǎn)品定義：快速、簡(jiǎn)單的移動(dòng)端數(shù)據(jù)可視化工具應(yīng)用，導(dǎo)出圖表作為PPT等演示工具的補(bǔ)充。
• 產(chǎn)品特征：無(wú)需登錄、交互式編輯、外觀選擇多樣性。

2.3 版本歷史

2.4 迭代原因說(shuō)明

?（數(shù)據(jù)來(lái)源：七麥數(shù)據(jù)）

可以看到Chartistic最后一次版本更新在一年前，而此后下載量逐漸減少，盡管它在多個(gè)平臺(tái)曾多次被推薦為實(shí)用高效手機(jī)應(yīng)用。

在實(shí)際體驗(yàn)中，Chartistic的確有著操作簡(jiǎn)單方便，交互體驗(yàn)良好，成品效果佳的特征，例如：可以手動(dòng)移動(dòng)柱狀圖的柱體高度、餅圖的圖形角度來(lái)更改對(duì)應(yīng)的數(shù)據(jù)；頁(yè)面風(fēng)格可以一鍵更換、多種選擇；可以對(duì)標(biāo)題位置、邊框類(lèi)型、背景等進(jìn)行編輯以確保外觀的多樣性。

然而，為了追求操作的簡(jiǎn)便迅速，它的功能受到了很大的局限，例如：只可以手動(dòng)輸入數(shù)據(jù)，不能從外部導(dǎo)入；最多只支持12組數(shù)據(jù)；不支持負(fù)值等。

這些局限導(dǎo)致它無(wú)法應(yīng)對(duì)更多的數(shù)據(jù)處理要求，作為一個(gè)單獨(dú)的工具型App比較雞肋，導(dǎo)致用戶(hù)的留存存在比較大的挑戰(zhàn)。Chartistic的開(kāi)發(fā)痛點(diǎn)在于如何在多樣的用戶(hù)需求與操作便捷迅速的移動(dòng)端應(yīng)用的產(chǎn)品定位之間尋求一個(gè)平衡。

出于對(duì)這款產(chǎn)品的喜歡，作者對(duì)該產(chǎn)品進(jìn)行了部分需求的收集與整理，并模擬撰寫(xiě)了本篇迭代PRD文檔，對(duì)于該產(chǎn)品的現(xiàn)有版本進(jìn)行倒推的PRD文檔可以見(jiàn)作者的另一篇文章PRD：倒推數(shù)據(jù)可視化APP——Chartistic產(chǎn)品需求文檔，里面有詳細(xì)說(shuō)明現(xiàn)有版本的功能細(xì)節(jié)與交互方式，在本篇文檔中與本次迭代功能無(wú)關(guān)的頁(yè)面與功能不再進(jìn)行贅述。

2.5 名詞說(shuō)明

• 維度：X軸數(shù)據(jù)，例如：月份、地點(diǎn)、周期等
• 指標(biāo)：Y軸數(shù)據(jù)，例如：溫度、銷(xiāo)售額、毛利潤(rùn)等

03 需求調(diào)研與分析

3.1 需求整理

用戶(hù)需求（收集于APP STORE 評(píng)價(jià)）:

3.2 需求分析與優(yōu)先級(jí)排序

首先進(jìn)行需求的核實(shí)與判定，由實(shí)踐可得出這十一個(gè)需求都是屬于目前不支持的功能或者存在的局限，但是其中需求5.提高Y軸最大值可以通過(guò)更改Y軸單位并標(biāo)注于Y軸名稱(chēng)處解決，例如：將下表數(shù)據(jù)編輯為如下柱狀圖。

因此，判斷此需求為偽需求。

接下來(lái)對(duì)余下十個(gè)需求進(jìn)行優(yōu)先級(jí)排序，以下是將需求根據(jù)用戶(hù)量、頻次、開(kāi)發(fā)難度、實(shí)現(xiàn)效果以及需求強(qiáng)度進(jìn)行分析。

經(jīng)過(guò)以上分析對(duì)比，并且考慮到7.支持編輯同一個(gè)維度同一個(gè)單位的兩組數(shù)據(jù)為8.支持雙Y軸的前置條件，因此最后需求優(yōu)先級(jí)排序確定為4>6>3>7>2>1>8>9>11>10。

此app目前屬于免費(fèi)產(chǎn)品，功能有所局限而操作便利、交互友好，在用戶(hù)反饋中有相當(dāng)一定數(shù)量的用戶(hù)表示愿意為更高級(jí)的功能付費(fèi)。

因此在實(shí)際業(yè)務(wù)操作中還需要進(jìn)行用戶(hù)調(diào)研來(lái)衡量需求的商業(yè)價(jià)值來(lái)為需求進(jìn)行優(yōu)先級(jí)排序，可以考慮將部分開(kāi)發(fā)難度較高但是效果好的功能作為付費(fèi)專(zhuān)業(yè)版功能。此次迭代優(yōu)先實(shí)現(xiàn)4、6、3、7這四個(gè)功能。

四、新版說(shuō)明

4.1 新版描述

1. 我們從最多支持12組數(shù)據(jù)升級(jí)到可以支持50組數(shù)據(jù)了；
2. 柱狀圖和折線圖的數(shù)據(jù)可以編輯為負(fù)值了哦；
3. 圖表風(fēng)格列表呈現(xiàn)，想選哪個(gè)選哪個(gè)；
4. 柱狀圖和折線圖支持兩組指標(biāo)數(shù)據(jù)，可以用來(lái)進(jìn)行數(shù)據(jù)對(duì)比啦。

4.2 功能列表

05 全局說(shuō)明

5.1 鍵盤(pán)說(shuō)明

在不同頁(yè)面需要輸入編輯時(shí)，對(duì)應(yīng)的彈出鍵盤(pán)的類(lèi)型

5.2 按鈕說(shuō)明

圖表編輯頁(yè)面：

• 圖表上默認(rèn)的隨機(jī)數(shù)值除外，標(biāo)題編輯按鈕、X軸編輯按鈕、Y軸編輯按鈕在未輸入值前呈現(xiàn)灰色；
• 圖表類(lèi)型按鈕：當(dāng)前類(lèi)型按鈕為黑色，未選擇類(lèi)型為灰色

X軸Y軸編輯頁(yè)面：

• Y軸默認(rèn)的隨機(jī)數(shù)值除外，X軸名稱(chēng)編輯框、Y軸名稱(chēng)編輯框、X軸的值編輯框在未輸入有效值前預(yù)填文字呈現(xiàn)灰色

設(shè)置編輯頁(yè)面：

• 圖表樣式選擇按鈕：當(dāng)前樣式按鈕為黑色，未選擇樣式為灰色

5.3 默認(rèn)設(shè)置

新建圖表時(shí)：

1. 默認(rèn)已有8組數(shù)據(jù)，Y軸數(shù)值在【0~1000】范圍內(nèi)隨機(jī)，X軸不賦值待編輯
2. 標(biāo)題默認(rèn)可見(jiàn)、居中對(duì)齊
3. Y軸默認(rèn)最大值為1000，最小值為0，不顯示小數(shù)
4. 網(wǎng)格可見(jiàn)，行計(jì)數(shù)10，每一間隔的值100，對(duì)齊線不顯示、簡(jiǎn)單圖表不開(kāi)啟
5. 邊框默認(rèn)選擇無(wú)邊框
6. X軸標(biāo)題/Y軸標(biāo)題/X軸圖例/Y軸圖例默認(rèn)顯示
7. 背景/風(fēng)格/樣式隨機(jī)
8. 單擊增加一組數(shù)據(jù)按鈕，增加的數(shù)據(jù)Y軸數(shù)值在【最大值~最小值】范圍內(nèi)隨機(jī)，X軸不賦值待編輯

增加一組指標(biāo)時(shí)：

1. 僅有柱狀圖和折線圖可以增加一組指標(biāo)，因此圖表僅可在柱狀圖/折線圖之間切換
2. 新增指標(biāo)數(shù)據(jù)組數(shù)與已有指標(biāo)組數(shù)相同，新增指標(biāo)數(shù)值在【最小值~最大值】范圍內(nèi)隨機(jī)，例如：已編輯1-8月每月的銷(xiāo)售額，新增指標(biāo)毛利額，則隨機(jī)產(chǎn)生8組毛利額數(shù)據(jù)對(duì)應(yīng)X軸的1-8月
3. 柱狀圖的顏色從每個(gè)柱子不同顏色變?yōu)橥粋€(gè)指標(biāo)的柱體為一個(gè)顏色，一共兩個(gè)顏色
4. 單擊增加一組數(shù)據(jù)按鈕，增加的兩個(gè)指標(biāo)對(duì)應(yīng)的數(shù)值在【最大值~最小值】范圍內(nèi)隨機(jī)，X軸不賦值待編輯
5. 指標(biāo)圖例默認(rèn)顯示，位置為頂部，顯示方式為色塊+對(duì)應(yīng)的指標(biāo)名稱(chēng)

最小值編輯為負(fù)值時(shí)：

僅有柱狀圖和折線圖可以將最小值編輯為負(fù)值，因此圖表僅可在柱狀圖/折線圖之間切換。

切換顏色時(shí)：

1. 圖表只有一個(gè)顏色時(shí)，點(diǎn)擊切換顏色按鈕出現(xiàn)顏色自定義選擇界面
2. 圖表有一個(gè)以上顏色時(shí)，點(diǎn)擊切換顏色按鈕出現(xiàn)風(fēng)格列表，點(diǎn)擊選擇所需風(fēng)格

5.4 限制設(shè)定

1. 最多可輸入50組數(shù)據(jù)；
2. 柱狀圖/折線圖Y軸最大值可編輯范圍為-9999-10000，最小值編輯范圍為-10000-9999，最大值需要大于最小值；
3. 面積圖/餅圖Y軸最大值可編輯范圍為1-10000，最小值編輯范圍為0-9999，最大值需要大于最小值；
4. Y軸數(shù)值的編輯需在【最大值~最小值】范圍內(nèi)；
5. 首先確定的是（最大值-最小值）/行計(jì)數(shù)=每一間隔的值?，行計(jì)數(shù)的數(shù)量需要在【0~15】。因此每一間隔的值需要在【0.07*（最大值-最小值）~ （最大值-最小值）】這個(gè)范圍內(nèi)，確保最多只能有14行，考慮到（最大值-最小值）/輸入的間隔值得到的行數(shù)有可能不是整數(shù)的問(wèn)題，實(shí)際顯示的行數(shù)為（最大值-最小值）/輸入的間隔值四舍五入取整后的行數(shù)。

5.5 頁(yè)面交互

1. 彈屏?xí)r底部頁(yè)面虛化，單擊彈屏以外的虛化界面，彈層關(guān)閉，返回上一頁(yè)面；
2. 圖表編輯頁(yè)面下滑展開(kāi)X軸Y軸編輯頁(yè)面，從屏幕下方上滑關(guān)閉；
3. 圖表編輯頁(yè)面左滑展開(kāi)設(shè)置編輯頁(yè)面，從屏幕左側(cè)右滑關(guān)閉。

06 產(chǎn)品說(shuō)明

6.1 產(chǎn)品操作流程圖

6.2 功能導(dǎo)圖

標(biāo)紅部分為本次需要優(yōu)化或者新增的功能模塊：

6.3 頁(yè)面流程

本次迭代僅涉及圖表編輯頁(yè)、X軸Y軸編輯頁(yè)、設(shè)置編輯頁(yè)：

6.4 編輯功能頁(yè)面流程圖

標(biāo)紅部分為本次迭代頁(yè)面需要新增的部分，黃色表格內(nèi)容為不同情況下的按鈕操作結(jié)果說(shuō)明。

07 頁(yè)面詳細(xì)功能說(shuō)明

7.1 圖表編輯頁(yè)

圖1 單指標(biāo)無(wú)負(fù)值

圖2 單指標(biāo)有負(fù)值

圖3 雙指標(biāo)有負(fù)值

圖4 刪除效果示意

頁(yè)面名稱(chēng)：圖表編輯頁(yè)

入口：

• 點(diǎn)擊圖表完成頁(yè)編輯按鈕跳轉(zhuǎn)
• 新建圖表類(lèi)型彈屏中點(diǎn)擊圖表類(lèi)型對(duì)應(yīng)按鈕進(jìn)入

頁(yè)面說(shuō)明：

主頁(yè)面：

• 左滑展開(kāi)展開(kāi)設(shè)置編輯頁(yè)面，下滑展開(kāi)X軸Y軸編輯頁(yè)面
• 當(dāng)存在負(fù)值或者雙指標(biāo)時(shí)，圖表僅可在折線圖/柱狀圖之間切換

序號(hào)1，7，9：點(diǎn)擊圖表類(lèi)型切換為折線圖，數(shù)值背景等設(shè)置不變，折線顏色為柱狀圖同一風(fēng)格的單個(gè)顏色（如圖右）

序號(hào)2：點(diǎn)擊圖表類(lèi)型切換為面積圖，數(shù)值背景等設(shè)置不變，折線與面積顏色為柱狀圖同一風(fēng)格的單個(gè)顏色，折線的顏色比面積顏色深一個(gè)色號(hào)

序號(hào)3：點(diǎn)擊圖表類(lèi)型切換為餅圖，數(shù)值背景等設(shè)置不變，配色也不變

序號(hào)4：（如下方圖5）

• 圖表只有一個(gè)顏色時(shí)，點(diǎn)擊切換顏色按鈕出現(xiàn)顏色自定義選擇界面
• 圖表有一個(gè)以上顏色時(shí)，點(diǎn)擊切換顏色按鈕出現(xiàn)風(fēng)格列表，點(diǎn)擊選擇所需風(fēng)格

序號(hào)5，6：

• 點(diǎn)擊一次增加一組數(shù)據(jù)，增加的數(shù)據(jù)Y軸數(shù)值在【最大值~最小值】范圍內(nèi)隨機(jī)，X軸不賦值待編輯
• 最多可增加至50組數(shù)據(jù)，增加至50組數(shù)據(jù)后按鈕變灰，點(diǎn)擊無(wú)反應(yīng)

序號(hào)8：

• 點(diǎn)擊一次增加一組兩個(gè)指標(biāo)數(shù)據(jù)，增加的數(shù)據(jù)Y軸數(shù)值在【最大值~最小值】范圍內(nèi)隨機(jī)，X軸不賦值待編輯
• 最多可增加至50組數(shù)據(jù)，增加至50組數(shù)據(jù)后按鈕變灰，點(diǎn)擊無(wú)反應(yīng)

序號(hào)10：點(diǎn)擊后出現(xiàn)刪除按鈕（如圖4），單擊刪除按鈕刪除該組數(shù)據(jù)，當(dāng)刪除至只剩一組數(shù)據(jù)時(shí)刪除按鈕隱藏，不可再刪除

序號(hào)11：

• 按住上滑/下滑–修改圓點(diǎn)高度，上方或者下方的對(duì)應(yīng)數(shù)值一起修改，左側(cè)提示目前高度對(duì)應(yīng)的數(shù)值，修改值在設(shè)定的Y軸最大值與最小值之間
• 當(dāng)兩個(gè)指標(biāo)的數(shù)據(jù)差值過(guò)小導(dǎo)致圓圈距離過(guò)近時(shí)，將較小的數(shù)字標(biāo)識(shí)放置于圓圈下方
• 當(dāng)兩個(gè)指標(biāo)的數(shù)據(jù)相同時(shí)，圓圈重合，數(shù)字標(biāo)識(shí)放置于圓圈上方，按鈕圓圈修改數(shù)據(jù)時(shí)優(yōu)先修改上一次編輯的指標(biāo)

圖5 顏色切換功能示意

7.2 X軸Y軸編輯頁(yè)

圖6

圖7

頁(yè)面名稱(chēng)：柱狀圖/折線圖X軸Y軸編輯頁(yè)面

入口：

• 柱狀圖/折線圖圖表編輯頁(yè)面下滑展開(kāi)
• 柱狀圖/折線圖圖表編輯頁(yè)面編輯X軸名稱(chēng)按鈕，編輯Y軸名稱(chēng)按鈕，編輯X軸按鈕，下拉按鈕點(diǎn)擊展開(kāi)

頁(yè)面說(shuō)明：

序號(hào)1：點(diǎn)擊增加一個(gè)指標(biāo)，到雙指標(biāo)頁(yè)面（如圖7），切換為減少一個(gè)指標(biāo)按鈕即序號(hào)6

序號(hào)2：默認(rèn)指標(biāo)1為已有指標(biāo)，指標(biāo)2為新增指標(biāo)

序號(hào)3：點(diǎn)擊編輯文本框與數(shù)值框之間出現(xiàn)小刪除按鈕即序號(hào)4，點(diǎn)擊刪除對(duì)應(yīng)的該組數(shù)據(jù)

序號(hào)4：

• 初始狀態(tài)為隱藏，單擊刪除按鈕即序號(hào)3后出現(xiàn)，點(diǎn)擊刪除對(duì)應(yīng)的該組數(shù)據(jù)，點(diǎn)擊屏幕其他任意位置再次隱藏
• 當(dāng)刪除至只剩一組數(shù)據(jù)時(shí)自動(dòng)隱藏，不可再刪除

序號(hào)5：

• 點(diǎn)擊一次增加一組雙指標(biāo)數(shù)據(jù)，增加的數(shù)據(jù)Y軸數(shù)值在【最大值~最小值】范圍內(nèi)隨機(jī)，X軸不賦值待編輯
• 最多可增加至50組數(shù)據(jù)，增加至50組數(shù)據(jù)后按鈕變灰，點(diǎn)擊無(wú)反應(yīng)

序號(hào)6：點(diǎn)擊減少一個(gè)指標(biāo)，到單指標(biāo)頁(yè)面（如圖6），切換為增加一個(gè)指標(biāo)按鈕即序號(hào)1

序號(hào)7：點(diǎn)擊保留編輯結(jié)果，收起X軸Y軸編輯頁(yè)面，回到圖表編輯頁(yè)

序號(hào)8：

• 下方圖表隨著X軸Y軸數(shù)據(jù)的編輯即時(shí)更改
• 點(diǎn)擊屏幕下半部分或者從下半部分上滑，收起X軸Y軸編輯頁(yè)面，回到圖表編輯頁(yè)

異常提示：

• Y軸編輯的數(shù)值>最大值時(shí)，彈屏【警告 所輸入的值大于最大值】，輸入框內(nèi)容回到修改前的值;
• Y軸編輯的數(shù)值<最小值時(shí)，彈屏【警告 所輸入的值小于最小值】，輸入框內(nèi)容回到修改前的值;

7.3 設(shè)置編輯頁(yè)

圖8

圖9

圖10

頁(yè)面名稱(chēng)：設(shè)置編輯頁(yè)面

入口：

• 圖表編輯頁(yè)面左滑展開(kāi)
• 圖表編輯頁(yè)面設(shè)置按鈕點(diǎn)擊展開(kāi)

頁(yè)面說(shuō)明：

序號(hào)1：

• 屏幕左側(cè)預(yù)覽圖隨著設(shè)置編輯即時(shí)更改
• 屏幕左側(cè)頁(yè)面點(diǎn)擊或者右滑返回圖表編輯頁(yè)

序號(hào)2：最大值最高可設(shè)置為10000，最大值設(shè)置的值需要大于最小值，僅可編輯為整數(shù)

序號(hào)3：最小值最小可設(shè)置為-10000，最小值設(shè)置的值需要小于最大值，僅可編輯為整數(shù)

異常提示：

• 最大值>10000時(shí)，彈屏【無(wú)效值 請(qǐng)輸入小于10000的值】，輸入框內(nèi)容回到修改前的值；
• 最大值<=最小值時(shí)，彈屏【無(wú)效值 請(qǐng)輸入大于最小值的值】，輸入框內(nèi)容回到修改前的值；
• 最小值<-10000時(shí)，彈屏【無(wú)效值 請(qǐng)輸入大于-10000的值】，輸入框內(nèi)容回到修改前的值;
• 最小值>=最大值時(shí)，彈屏【無(wú)效值 請(qǐng)輸入小于最大值的值】，輸入框內(nèi)容回到修改前的值；

序號(hào)4：雙指標(biāo)時(shí)，出現(xiàn)指標(biāo)圖例是否顯示按鈕，指標(biāo)圖例默認(rèn)顯示在頂部，位置可選為頂部、底部、左側(cè)、右側(cè)（如圖10）

7.4 功能演示

08 數(shù)據(jù)埋點(diǎn)與監(jiān)控指標(biāo)

8.1 數(shù)據(jù)埋點(diǎn)位置

8.2 當(dāng)前版本優(yōu)化功能點(diǎn)數(shù)據(jù)監(jiān)控指標(biāo)

09 總結(jié)

以上便是我本次撰寫(xiě)的Chartistic的迭代產(chǎn)品需求文檔，因?yàn)槭怯涗浀囊淮蔚鷥?nèi)容，所以很多本次迭代非關(guān)鍵的交互與功能沒(méi)有在文內(nèi)體現(xiàn)，默認(rèn)與目前版本一致。

這款A(yù)pp是一款很實(shí)用的手機(jī)應(yīng)用，交互很有特色，在收集用戶(hù)需求時(shí)看到很多用戶(hù)都表示希望有更多功能，并且愿意為此付費(fèi)，雖然已經(jīng)一年多沒(méi)有更新迭代了，還是希望開(kāi)發(fā)公司能夠重新重視起來(lái)這支潛力股，幫助用戶(hù)在移動(dòng)端更便捷的實(shí)現(xiàn)多樣的數(shù)據(jù)可視化圖表。

產(chǎn)品新人，文檔有諸多不足，歡迎各位前輩在評(píng)論區(qū)指教~

作者：啊晨，產(chǎn)品新人，積極尋找產(chǎn)品助理崗位中~郵箱：Cheryl_xu123@163.com

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。