Chartistic是一款通過(guò)交互快速編輯數(shù)據(jù)可視化圖表的app。本文通過(guò)對(duì)“Chartistic”app進(jìn)行產(chǎn)品體驗(yàn)與分析后產(chǎn)出的PRD文檔。該文檔由幾個(gè)板塊組成：全局說(shuō)明、產(chǎn)品說(shuō)明、頁(yè)面詳細(xì)功能說(shuō)明等。

目錄

一、文檔綜述

1.1文檔輸出環(huán)境

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

1.3產(chǎn)品總結(jié)

二、全局說(shuō)明

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

2.2按鈕說(shuō)明

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

2.4限制設(shè)定

2.5頁(yè)面交互

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

3.1產(chǎn)品操作流程

3.2產(chǎn)品功能導(dǎo)圖

3.3頁(yè)面流程

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

4.1歡迎頁(yè)

4.2首頁(yè)

4.3圖表編輯頁(yè)

4.3.1柱狀圖/折線圖/面積圖/餅圖圖表編輯頁(yè)

4.3.2智能剪貼畫(huà)編輯頁(yè)

4.4X軸Y軸編輯頁(yè)（柱狀圖/折線圖/面積圖/餅圖）

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

4.5.1柱狀圖/折線圖/面積圖設(shè)置編輯頁(yè)

4.5.2餅圖設(shè)置編輯頁(yè)

4.5.3智能剪貼畫(huà)設(shè)置編輯頁(yè)

4.6圖表完成頁(yè)

五、總結(jié)

一、文檔綜述

1.1 文檔輸出環(huán)境

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

Chartistic，一款備受好評(píng)的小眾數(shù)據(jù)可視化app。

在這個(gè)到處都充斥著數(shù)據(jù)，以數(shù)據(jù)為導(dǎo)向的年代，日常辦公中隨時(shí)隨地都有可能需要對(duì)或多或少的數(shù)據(jù)進(jìn)行可視化處理來(lái)幫助分析與演示。

雖然有很多的功能強(qiáng)大的工具可以創(chuàng)建圖表，但是卻沒(méi)有多少工具可以使創(chuàng)建更簡(jiǎn)單、更具有交互性。

Chartistic無(wú)需登錄，打開(kāi)即用，在移動(dòng)端以交互的方式編輯數(shù)據(jù)，一分鐘內(nèi)創(chuàng)建漂亮的柱狀圖、折線圖、區(qū)域圖和餅狀圖。將圖表以圖像的形式導(dǎo)出，并將其嵌入到演示文稿、電子郵件、文檔、電子表格中!

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

1.3 產(chǎn)品總結(jié)

目標(biāo)用戶(hù)：需要對(duì)少量數(shù)據(jù)迅速進(jìn)行可視化處理的辦公人群

產(chǎn)品定義：快速、簡(jiǎn)單的移動(dòng)端數(shù)據(jù)可視化工具應(yīng)用，導(dǎo)出圖表作為PPT等演示工具的補(bǔ)充。

產(chǎn)品特征：

1. 無(wú)需登錄
2. 交互式編輯
3. 外觀選擇多樣性

二、全局說(shuō)明

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

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

2.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)前樣式按鈕為黑色，未選擇樣式為灰色

2.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軸不賦值待編輯

2.4 限制設(shè)定

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

2.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)閉。

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

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

3.2 產(chǎn)品功能導(dǎo)圖

3.3 頁(yè)面流程

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

4.1 歡迎頁(yè)

• 頁(yè)面名稱(chēng)：歡迎頁(yè)
• 入口：打開(kāi)App進(jìn)入
• 頁(yè)面說(shuō)明：打開(kāi)App自動(dòng)進(jìn)入歡迎頁(yè)，停留0.5秒后自動(dòng)進(jìn)入首頁(yè)

4.2 首頁(yè)

圖一

圖二

圖三

圖四

頁(yè)面名稱(chēng)：首頁(yè)

入口：歡迎頁(yè)后自動(dòng)跳入

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

序號(hào)1：點(diǎn)擊出現(xiàn)其他鏈接彈層，首頁(yè)頁(yè)面置于底部并虛化（如圖三）

序號(hào)2：點(diǎn)擊出現(xiàn)新建圖表類(lèi)型彈層，首頁(yè)頁(yè)面置于底部并虛化（如圖二）

序號(hào)3：

• 點(diǎn)擊進(jìn)入圖表編輯頁(yè)
• 長(zhǎng)按或者左滑出現(xiàn)復(fù)制、導(dǎo)出、刪除三個(gè)快捷處理按鈕（如圖四）

序號(hào)4，5：點(diǎn)擊關(guān)閉彈屏，首頁(yè)頁(yè)面置于頂部并解除虛化

序號(hào)6：點(diǎn)擊快捷處理按鈕消失，回到首頁(yè)，在首頁(yè)圖表列表第一個(gè)位置添加復(fù)制的圖表

序號(hào)7：點(diǎn)擊彈屏關(guān)閉，快捷按鈕消失，回到首頁(yè)，該圖表刪除，列表中該圖表后面的圖表前移填充空缺位置

4.3 圖表編輯頁(yè)

4.3.1 柱狀圖/折線圖/面積圖/餅圖圖表編輯頁(yè)

圖5

圖6

圖7

圖8

圖9

頁(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è)面

序號(hào)1：點(diǎn)擊返回首頁(yè)

序號(hào)2：點(diǎn)擊進(jìn)入圖表完成頁(yè)面

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

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

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

序號(hào)6：?jiǎn)螕舁C切換圖表顏色風(fēng)格

序號(hào)7，17，18：按住上滑/下滑–修改圓點(diǎn)高度，上方或者下方的對(duì)應(yīng)數(shù)值一起修改，左側(cè)提示目前高度對(duì)應(yīng)的數(shù)值，修改值在設(shè)定的Y軸最大值與最小值之間

序號(hào)8，9，10，12：輸入值之前按鈕為灰色，輸入后字體顏色由背景設(shè)置決定；點(diǎn)擊展開(kāi)X軸Y軸編輯頁(yè)面

序號(hào)11：

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

序號(hào)13：點(diǎn)擊后小圈即序號(hào)7變成刪除符號(hào)如圖9，單擊刪除符號(hào)刪除該組數(shù)據(jù)，當(dāng)刪除至只剩一組數(shù)據(jù)時(shí)刪除符號(hào)變回小圈，不可再刪除

序號(hào)14：點(diǎn)擊隱藏上面的下拉按鈕、添加按鈕、刪除按鈕、設(shè)置按鈕，隱藏后圖表變?yōu)樽笙?，單擊后以上按鈕出現(xiàn)

序號(hào)15：點(diǎn)擊展開(kāi)設(shè)置編輯頁(yè)面

序號(hào)16：輸入值之前按鈕為灰色，輸入后字體顏色由背景設(shè)置決定；點(diǎn)擊輸入標(biāo)題

序號(hào)19：點(diǎn)擊餅圖需要修改占比的目標(biāo)扇形后出現(xiàn)兩個(gè)半圓形按鈕，按住按鈕滑動(dòng)分隔線調(diào)整目標(biāo)扇形角度，按鈕相鄰一邊的扇形同時(shí)被增大/減小角度，餅圖中間提示目前目標(biāo)扇形角度對(duì)應(yīng)的占比

4.3.2 智能剪貼畫(huà)編輯頁(yè)

頁(yè)面名稱(chēng)：智能剪貼畫(huà)編輯頁(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è)面

序號(hào)1：按住上下滑動(dòng)更改有色部分的高度，左側(cè)占比數(shù)值一起更改，更改范圍為0%-100%

4.4 X軸Y軸編輯頁(yè)（柱狀圖/折線圖/面積圖/餅圖）

頁(yè)面名稱(chēng)：X軸Y軸編輯頁(yè)面

入口：

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

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

餅圖沒(méi)有編輯X軸名稱(chēng)按鈕與編輯Y軸名稱(chēng)按鈕

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

序號(hào)2：點(diǎn)擊屏幕下半部分或者從下半部分上滑，收起X軸Y軸編輯頁(yè)面，回到圖表編輯頁(yè)

序號(hào)3：

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

序號(hào)4：

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

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

異常提示：

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

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

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

入口：

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

4.5.1 柱狀圖/折線圖/面積圖設(shè)置編輯頁(yè)

標(biāo)題設(shè)置功能

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

序號(hào)1：屏幕左側(cè)頁(yè)面點(diǎn)擊或者右滑返回圖表編輯頁(yè)

值設(shè)置功能

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

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

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

異常提示：

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

網(wǎng)格設(shè)置功能

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

序號(hào)4：可見(jiàn)性為關(guān)閉狀態(tài)時(shí)，行數(shù)與每一間隔的值無(wú)法選擇與編輯

序號(hào)5：初始默認(rèn)值為10，可編輯范圍為【0~15】，僅可編輯為整數(shù)

序號(hào)6：對(duì)齊條開(kāi)啟狀態(tài)見(jiàn)圖，在圖表編輯頁(yè)面滑動(dòng)所編輯的數(shù)據(jù)對(duì)應(yīng)到Y(jié)軸上的數(shù)值（圖中的0、100、200、300等數(shù)值）時(shí)停頓一下，左側(cè)提示所對(duì)應(yīng)的數(shù)值；滑動(dòng)編輯的數(shù)值（如323、546等）不在Y軸上時(shí)，不顯示左側(cè)的數(shù)值提示

序號(hào)7：簡(jiǎn)單圖表僅保留圖表主體形狀，如上圖

序號(hào)8：初始默認(rèn)值為100，僅可編輯為整數(shù)，每一間隔的值需要在 【0.07*（最大值-最小值）~ （最大值-最小值）】這個(gè)范圍內(nèi)，考慮到（最大值-最小值）/輸入的間隔值  得到的行數(shù)有可能不是整數(shù)的問(wèn)題，實(shí)際顯示的行數(shù)為（最大值-最小值）/輸入的間隔值四舍五入取整后的行數(shù)

異常提示：

• 輸入的每一間隔的值不在【0.07*（最大值-最小值）~ （最大值-最小值）】這個(gè)范圍內(nèi)時(shí)，彈屏【警報(bào) 請(qǐng)輸入0.07*（最大值-最小值）到（最大值-最小值）之間的值】，輸入框內(nèi)容回到修改前的值;
• 輸入的行計(jì)數(shù)不在【0~15】范圍內(nèi)時(shí)，彈屏【警報(bào) 請(qǐng)輸入小于15的值】，輸入框內(nèi)容回到修改前的值;

邊框設(shè)置功能

圖例設(shè)置功能

背景設(shè)置功能

頁(yè)面說(shuō)明：
序號(hào)10：主題文字注釋

序號(hào)11：四種主題單選，設(shè)計(jì)出圖標(biāo)作為按鈕外觀，下方會(huì)出現(xiàn)對(duì)應(yīng)文字注釋?zhuān)x擇的背景按鈕外層加一圈黑色示意

圖表樣式設(shè)置功能

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

序號(hào)9：柱狀圖/折線圖/面積圖樣式說(shuō)明如圖

4.5.2 餅圖設(shè)置編輯頁(yè)

標(biāo)題設(shè)置功能

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

序號(hào)1：屏幕左側(cè)頁(yè)面點(diǎn)擊或者右滑返回圖表編輯頁(yè)

表格設(shè)置功能

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

豎向表僅可選擇左對(duì)齊或者右對(duì)齊，橫向表可選擇左對(duì)齊/右對(duì)齊/居中。

值設(shè)置功能

背景設(shè)置功能（同4.5.1柱狀圖/折線圖/面積圖）

圖表樣式設(shè)置功能

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

餅圖樣式說(shuō)明如圖

4.5.3 智能剪貼畫(huà)設(shè)置編輯頁(yè)

圖像搜索功能

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

序號(hào)1：僅可輸入英文名稱(chēng)搜索，無(wú)編輯內(nèi)容時(shí)文本框內(nèi)容為Search，字體淺灰色，輸入內(nèi)容后字體變?yōu)楹谏?

異常提示：

當(dāng)移動(dòng)端無(wú)網(wǎng)絡(luò)時(shí)，搜索框下方“在線搜索圖像”更改為“連接中斷”，搜索框點(diǎn)擊無(wú)反應(yīng)

標(biāo)題設(shè)置功能

值設(shè)置功能

背景設(shè)置功能（同4.5.1柱狀圖/折線圖/面積圖）

圖表樣式設(shè)置功能

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

智能剪貼畫(huà)樣式說(shuō)明如圖

4.6 圖表完成頁(yè)

頁(yè)面名稱(chēng)：圖表完成頁(yè)

入口：

• 點(diǎn)擊首頁(yè)圖表縮略圖跳轉(zhuǎn)
• 圖表編輯頁(yè)點(diǎn)擊完成按鈕跳轉(zhuǎn)

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

序號(hào)1：點(diǎn)擊返回首頁(yè)

序號(hào)2：點(diǎn)擊進(jìn)入圖表編輯頁(yè)面

序號(hào)3：點(diǎn)擊導(dǎo)出保存到本地或者分享

五、總結(jié)

以上便是我本次倒推撰寫(xiě)的Chartistic的產(chǎn)品需求文檔，格式參考倒推“潮汐”APP的產(chǎn)品需求文檔。

這款A(yù)pp是一款很實(shí)用的手機(jī)應(yīng)用，交互很有特色，因?yàn)檫^(guò)于追求操作的簡(jiǎn)便，導(dǎo)致功能局限比較大，對(duì)于App的未來(lái)優(yōu)化方向，筆者認(rèn)為可以在以下幾個(gè)方向嘗試：

1. 增加“編輯兩組不同指標(biāo)數(shù)據(jù)”的功能，因?yàn)樵诤芏鄨?chǎng)景下是需要將兩組數(shù)據(jù)進(jìn)行對(duì)比的，比如銷(xiāo)售額與成本額的走向?qū)Ρ龋?
2. 在折線圖與柱狀圖的編輯中可以將數(shù)值編輯為負(fù)值，例如毛利率這種類(lèi)型的數(shù)據(jù)可能會(huì)有負(fù)值出現(xiàn)，而且負(fù)值是需要在數(shù)據(jù)可視化圖表中突出表現(xiàn)的數(shù)據(jù)。

這是本人第一次撰寫(xiě)的產(chǎn)品需求文檔，一定有諸多不足，希望各位前輩不吝賜教，感激不盡！希望可以成為一名產(chǎn)品經(jīng)理，創(chuàng)造出對(duì)用戶(hù)有價(jià)值的產(chǎn)品，不求做改變世界的產(chǎn)品，只求改變自己，改變眼前。

 文章來(lái)源：人人都是產(chǎn)品經(jīng)理