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

目錄

一、文檔綜述

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

1.2產(chǎn)品簡介

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

二、全局說明

2.1鍵盤說明

2.2按鈕說明

2.3默認設(shè)置

2.4限制設(shè)定

2.5頁面交互

三、產(chǎn)品說明

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

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

3.3頁面流程

四、頁面詳細功能說明

4.1歡迎頁

4.2首頁

4.3圖表編輯頁

4.3.1柱狀圖/折線圖/面積圖/餅圖圖表編輯頁

4.3.2智能剪貼畫編輯頁

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

4.5設(shè)置編輯頁

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

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

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

4.6圖表完成頁

五、總結(jié)

一、文檔綜述

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

1.2 產(chǎn)品簡介

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

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

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

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

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

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

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

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

產(chǎn)品特征：

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

二、全局說明

2.1 鍵盤說明

在不同頁面需要輸入編輯時，對應(yīng)的彈出鍵盤的類型，數(shù)字鍵盤只能輸入正數(shù)

2.2 按鈕說明

圖表編輯頁面：

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

X軸Y軸編輯頁面：

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

設(shè)置編輯頁面：

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

2.3 默認設(shè)置

新建圖表時

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

2.4 限制設(shè)定

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

2.5 頁面交互

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

三、產(chǎn)品說明

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

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

3.3 頁面流程

四、頁面詳細功能說明

4.1 歡迎頁

• 頁面名稱：歡迎頁
• 入口：打開App進入
• 頁面說明：打開App自動進入歡迎頁，停留0.5秒后自動進入首頁

4.2 首頁

圖一

圖二

圖三

圖四

頁面名稱：首頁

入口：歡迎頁后自動跳入

頁面說明：

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

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

序號3：

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

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

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

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

4.3 圖表編輯頁

4.3.1 柱狀圖/折線圖/面積圖/餅圖圖表編輯頁

圖5

圖6

圖7

圖8

圖9

頁面名稱：柱狀圖/折線圖/面積圖/餅圖圖表編輯頁

入口：

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

頁面說明：

主頁面：左滑展開展開設(shè)置編輯頁面，下滑展開X軸Y軸編輯頁面

序號1：點擊返回首頁

序號2：點擊進入圖表完成頁面

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

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

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

序號6：單擊–切換圖表顏色風(fēng)格

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

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

序號11：

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

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

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

序號15：點擊展開設(shè)置編輯頁面

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

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

4.3.2 智能剪貼畫編輯頁

頁面名稱：智能剪貼畫編輯頁

入口：

• 點擊首頁圖表縮略圖跳轉(zhuǎn)
• 新建圖表類型彈屏中點擊圖表類型對應(yīng)按鈕進入

頁面說明：

主頁面：左滑展開展開設(shè)置編輯頁面

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

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

頁面名稱：X軸Y軸編輯頁面

入口：

• 圖表編輯頁面下滑展開
• 編輯X軸名稱按鈕，編輯Y軸名稱按鈕，編輯X軸按鈕，下拉按鈕點擊展開

頁面說明：

餅圖沒有編輯X軸名稱按鈕與編輯Y軸名稱按鈕

序號1：點擊保留編輯結(jié)果，收起X軸Y軸編輯頁面，回到圖表編輯頁

序號2：點擊屏幕下半部分或者從下半部分上滑，收起X軸Y軸編輯頁面，回到圖表編輯頁

序號3：

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

序號4：

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

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

異常提示：

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

4.5 設(shè)置編輯頁

頁面名稱：設(shè)置編輯頁面

入口：

• 圖表編輯頁面左滑展開
• 圖表編輯頁面設(shè)置按鈕點擊展開

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

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

頁面說明：

序號1：屏幕左側(cè)頁面點擊或者右滑返回圖表編輯頁

值設(shè)置功能

頁面說明：

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

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

異常提示：

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

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

頁面說明：

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

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

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

序號7：簡單圖表僅保留圖表主體形狀，如上圖

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

異常提示：

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

邊框設(shè)置功能

圖例設(shè)置功能

背景設(shè)置功能

頁面說明：
序號10：主題文字注釋

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

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

頁面說明：

序號9：柱狀圖/折線圖/面積圖樣式說明如圖

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

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

頁面說明：

序號1：屏幕左側(cè)頁面點擊或者右滑返回圖表編輯頁

表格設(shè)置功能

頁面說明：

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

值設(shè)置功能

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

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

頁面說明：

餅圖樣式說明如圖

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

圖像搜索功能

頁面說明：

序號1：僅可輸入英文名稱搜索，無編輯內(nèi)容時文本框內(nèi)容為Search，字體淺灰色，輸入內(nèi)容后字體變?yōu)楹谏?/p>

異常提示：

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

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

值設(shè)置功能

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

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

頁面說明：

智能剪貼畫樣式說明如圖

4.6 圖表完成頁

頁面名稱：圖表完成頁

入口：

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

頁面說明：

序號1：點擊返回首頁

序號2：點擊進入圖表編輯頁面

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

五、總結(jié)

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

這款A(yù)pp是一款很實用的手機應(yīng)用，交互很有特色，因為過于追求操作的簡便，導(dǎo)致功能局限比較大，對于App的未來優(yōu)化方向，筆者認為可以在以下幾個方向嘗試：

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

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

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

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

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