數(shù)據(jù)可視化APP-Chartistic產(chǎn)品需求文檔

數(shù)據(jù)可視化APP——Chartistic產(chǎn)品需求文檔

是一款通過交互快速編輯數(shù)據(jù)可視化圖表的本文通過

Chartisticappo

對"Chartistic"叩p進(jìn)行產(chǎn)品體驗(yàn)與分析后產(chǎn)出的PRD文檔。該文檔

由幾個(gè)板塊組成：全局說明、產(chǎn)品說明、頁面詳細(xì)功能說明等。

目錄

一、文檔綜述

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

1.2產(chǎn)品簡介

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

二、全局說明

2.1鍵盤說明

2.2按鈕說明

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

2.4限制設(shè)定

2.5頁面交互

三、產(chǎn)品說明

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

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

3.3頁面流程

四、頁面詳細(xì)功能說明

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)境

文檔名稱倒推Char1：istic需求文檔

版本2.0.3

體驗(yàn)環(huán)境iPhone7

撰寫人徐晨

撰寫時(shí)間2019.11.06

目的鍛煉產(chǎn)品需求文檔撰寫能力

1.2產(chǎn)品簡介

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

在這個(gè)到處都充斥著數(shù)據(jù)，以數(shù)據(jù)為導(dǎo)向的年代，日常辦公中隨時(shí)隨地

都有可能需要對或多或少的數(shù)據(jù)進(jìn)行可視化處理來幫助分析與演示。

雖然有很多的功能強(qiáng)大的工具可以創(chuàng)建圖表,但是卻沒有多少工具可以

使創(chuàng)建更簡單、更具有交互性。

Chartistic無需登錄，打開即用，在移動(dòng)端以交互的方式編輯數(shù)據(jù)，一

分鐘內(nèi)創(chuàng)建漂亮的柱狀圖、折線圖、區(qū)域圖和餅狀圖。將圖表以圖像的

形式導(dǎo)出，并將其嵌入到演示文稿、電子郵件、文檔、電子表格中！

交互便捷，操作簡單的它已在43個(gè)國家/地區(qū)投入使用。在新加坡、泰

國、菲律賓和越南，名列AppStore的年度十佳應(yīng)用榜單。上線起至

今共入選AppStore精品推薦9次,下載量累計(jì)24萬次。

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

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

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

PPT等演示工具的補(bǔ)充。

產(chǎn)品特征：

1"T-r=f=i5t^=]

2.交互式編輯

3.外觀選擇多樣性

二、全局說明

2.1鍵盤說明

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

入正數(shù)

首頁圖表軸負(fù)曲頁面

數(shù)字鍵盤

丫軸的值

有小數(shù)點(diǎn)

賄赧

最大值/最小值/行

無小數(shù)點(diǎn)i

字母鍵盤發(fā)送反饋的電子郵件編輯濕的值/X軸名稱/Y軸名稱郵圖e

2.2按鈕說明

圖表編輯頁面：

?圖表上默認(rèn)的隨機(jī)數(shù)值除外，標(biāo)題編輯按鈕、X軸編輯按鈕、Y

軸編輯按鈕在未輸入值前呈現(xiàn)灰色

?圖表類型按鈕：當(dāng)前類型按鈕為黑色，未選擇類型為灰色

X軸Y軸編輯頁面：

?Y軸默認(rèn)的隨機(jī)數(shù)值除外，X軸名稱編輯框、Y軸名稱編輯框、X

軸的值編輯框在未輸入有效值前預(yù)填文字呈現(xiàn)灰色

設(shè)置編輯頁面：

?圖表樣式選擇按鈕：當(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)可見、居中對齊

3.Y軸默認(rèn)最大值為1000,最小值為0,不顯示小數(shù)

4.網(wǎng)格可見，彳亍計(jì)數(shù)10,每一間隔的值100,對齊線不顯示、簡單

圖表不開啟

5.邊框默認(rèn)選擇無邊框

6.X軸標(biāo)題/Y軸標(biāo)題/X軸圖例"軸圖例默認(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］o因此每一間隔的值需要在［0.07*（最

大值-最小值）~（最大值-最小值）】這個(gè)范圍內(nèi)，確保最多只

能有14行，考慮到（最大值-最小值）/輸入的間隔值得到的行數(shù)

有可能不是整數(shù)的問題，實(shí)際顯示的行數(shù)為（最大值-最小值）/

輸入的間隔值四舍五入取整后的行數(shù)

5.最大值、最小值、行計(jì)數(shù)、每一間隔的值僅可編輯為整數(shù)

2.5頁面交互

L彈屏?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)圖

標(biāo)題內(nèi)容標(biāo)題

維度值

維度內(nèi)容

維圜量量

指^值指標(biāo)

左對齊

居中擠方式可見

------是見標(biāo)題

右對不-X

不可見!

百分比

是否鎏

居中位置橫向表餅

方向可見

位置豎向表是見表格*

右側(cè)〈外觀

不可見

水位標(biāo)志是否顯示、

透明背景白色字體；'

透明背景黑色字體，-'背景/

黑色背景白色字體?-------

白色背景黑色字體

拼圖.一

――樣式

環(huán)圖

然,搭配模版顏色

信息

郵件

共享的相簿分享

徵信等社交平臺

指定聯(lián)系人

存儲為圖像

；勃［］到錄

拷貝保存到本地

存儲到文件

打印

app1ewatc共享到其他蘋果設(shè)備

教程廉手指引功能導(dǎo)航

3.3頁面流程

四'頁面詳細(xì)功能說明

4.1歡迎頁

?頁面名稱：歡迎頁

.入口：打開App進(jìn)入

.頁面說明：打開App自動(dòng)進(jìn)入歡迎頁，停留0.5秒后自動(dòng)進(jìn)入首

頁

4.2首頁

圖

hillI"Id★

圖二

圖三

圖四

頁面名稱：首頁

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

頁面說明：

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

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

-）

序號3:

?點(diǎn)擊進(jìn)入圖表編輯頁

?長按或者左滑出現(xiàn)復(fù)制、導(dǎo)出、刪除三個(gè)快捷處理按鈕（如圖四）

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

序號6:點(diǎn)擊快捷處理按鈕消失，回到首頁，在首頁圖表列表第一個(gè)位

置添加復(fù)制的圖表

序號7:點(diǎn)擊彈屏關(guān)閉，快捷按鈕消失，回到首頁，該圖表刪除，列表

中該圖表后面的圖表前移填充空缺位置

4.3圖表編輯頁

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

1000

900

800

J700

編

600

輯0

50

丫

觸430

2一0-

00

20

0

10

0

圖5

0oo

9oo

8oo

7oo

編6oo

輯5OO

Y

軸

3ooG>217

2oo

1Oo

O

編

輯呻‘編審‘編輯'__

［編rnx軸）

圖6

圖7

碗標(biāo)題

?領(lǐng)

lllll

?顆

?

?領(lǐng)

?領(lǐng)

?輻

點(diǎn)擊需要編輯的

圖8

1000

1000

900900

800

800

700

700

600600

500500

400400285

300300J

200200

100100

00~~

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

入口：

?點(diǎn)擊圖表完成頁編輯按鈕期踽

?新建圖表類型彈屏中點(diǎn)擊圖表類型對應(yīng)按鈕進(jìn)入

頁面說明：

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

序號1：點(diǎn)擊返回首頁

序號2:點(diǎn)擊進(jìn)入圖表完成頁面

序號3:點(diǎn)擊圖表類型切換為折線圖，數(shù)值背景等設(shè)置不變，折線顏色

為柱狀圖同一風(fēng)格的單個(gè)顏色（如圖6）

序號4:點(diǎn)擊圖表類型切換為面積圖，數(shù)值背景等設(shè)置不變，折線與面

積顏色為柱狀圖同一風(fēng)格的單個(gè)顏色，折線的顏色比面積顏色深一個(gè)色

號（如圖7）

序號5:點(diǎn)擊圖表類型切換為餅圖，數(shù)值背景等設(shè)置不變，配色也不變

（如圖8）

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

序號7,17,18:按住上滑/T滑T修改圓點(diǎn)高度，上方或者下方的對應(yīng)

數(shù)值一起修改，左側(cè)提示目前高度對應(yīng)的數(shù)值，修改值在設(shè)定的Y軸最

大值與最小值之間

序號8,9,10,12:輸入值之前按鈕為灰色，輸入后字體顏色由背景

設(shè)置決定；點(diǎn)擊展開X軸Y軸編輯頁面

序號11：

?點(diǎn)擊一次增加一組數(shù)據(jù)按鈕，增加的■Y軸數(shù)值在【最大值~

最小值】范圍內(nèi)隨機(jī)，X軸不賦值待編輯

?最多可增加至12組數(shù)據(jù)，增加至12組數(shù)據(jù)后按鈕變灰，點(diǎn)擊無

反應(yīng)

序號13:點(diǎn)擊后小圈即序號7變成刪除符號如圖9,單擊刪除符號刪

除該組數(shù)據(jù)，當(dāng)刪除至只剩一組數(shù)據(jù)時(shí)刪除符號變回小圈，不可再刪除

序號14:點(diǎn)擊隱藏上面的下拉按鈕、添加按鈕、刪除按鈕、設(shè)置按鈕,

隱藏后圖表變?yōu)樽笙颍瑔螕艉笠陨习粹o出現(xiàn)

序號15:點(diǎn)擊展開設(shè)置編輯頁面

序號16:輸入值之前按鈕為灰色，輸入后字體顏色由背景設(shè)置決定；

點(diǎn)擊輸入標(biāo)題

序號19:點(diǎn)擊餅圖需要修改占比的目標(biāo)扇形后出現(xiàn)兩個(gè)半圓形按鈕，

按住按鈕滑動(dòng)分隔線調(diào)整目標(biāo)扇形角度，按鈕相鄰一邊的扇形同時(shí)被增

大/減小角度，餅圖中間提示目前目標(biāo)扇形角度對應(yīng)的占比

4.3.2智能剪貼畫編輯頁

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

入口：

?點(diǎn)擊首頁圖表縮略圖成踽

?新建圖表類型彈屏中點(diǎn)擊圖表類型對應(yīng)按鈕進(jìn)入

頁面說明：

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

序號1:按住上下滑動(dòng)更改有色部分的高度，左側(cè)占比數(shù)值一起更改,

更改范圍為0%-100%

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

女+

X

9

今

lihl

國

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

入口：

?圖表編輯頁面下滑展開

?編輯X軸名稱按鈕，編輯Y軸名稱按鈕，編輯X軸按鈕，下拉按

鈕點(diǎn)擊展開

頁面說明：

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

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

序號2:點(diǎn)擊屏幕下半部分或者從下半部分上滑，收起X軸Y軸編輯頁

面，回到圖表編輯頁

序號3:

?點(diǎn)擊一次增加一組數(shù)據(jù)按鈕，增加的翔居Y軸數(shù)值在【最大值~

最小值】范圍內(nèi)隨機(jī)，X軸不賦值待編輯

.最多可增加至12組數(shù)據(jù)，增加至12組數(shù)據(jù)后按鈕變灰，點(diǎn)擊無

反應(yīng)

序號4:

?初始狀態(tài)為隱藏，單擊刪除按鈕即序號5后出現(xiàn)，點(diǎn)擊刪除對應(yīng)

的該組數(shù)據(jù)，點(diǎn)擊屏幕其他任意位置再次隱藏

?當(dāng)刪除至只剩一組數(shù)據(jù)時(shí)自動(dòng)隱藏，不可再刪除

序號5:點(diǎn)擊編輯文本框與數(shù)值框之間出現(xiàn)小刪除按鈕即序號4,點(diǎn)擊

刪除對應(yīng)的該組數(shù)據(jù)

異常提示：

?Y軸編輯的數(shù)值＞最大值時(shí)，彈屏【警告所輸入的值大于最大值】，

輸入框內(nèi)容回到修改前的值；

.Y軸編輯的數(shù)值〈最小值時(shí)，彈屏【警告所輸入的值小于最小值】，

輸入框內(nèi)容回到修改前的值；

4.5設(shè)置編輯頁

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

入口：

?圖表編輯頁面左滑展開

?圖表編輯頁面設(shè)置按鈕點(diǎn)擊展開

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

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

頁面說明：

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

值設(shè)置功能

頁面說明：

序號2:最大值最高可設(shè)置為10000，最大值設(shè)置的值需要大于最小值,

僅可編輯為整數(shù)

序號3:最小值最小可設(shè)置為0,最小值設(shè)置的值需要小于最大值，僅

可編輯為整數(shù)

異常提示：

.最大值＞10000時(shí)，彈屏【無效值請輸入小于10000的值】，

輸入框內(nèi)容回到修改前的值;

.最大值＜=最小值時(shí)，彈屏【無效值請輸入大于最小值的值】，

輸入框內(nèi)容回到修改前的值；

?最小值＞=最大值時(shí)，彈屏【無效值請輸入小于最大值的值】，

輸入框內(nèi)容回到修改前的值；

示例說明示例說明

（網(wǎng)格不可見）（網(wǎng)格不可見，對齊條打開）

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

頁面說明:

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

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

序號6:對齊條開啟狀態(tài)見圖，在圖表編輯頁面滑動(dòng)所編輯的數(shù)據(jù)對應(yīng)

到Y(jié)軸上的數(shù)值（圖中的0、100、200、300等數(shù)值）時(shí)停頓一下，

左側(cè)提示所對應(yīng)的數(shù)值；滑動(dòng)編輯的數(shù)值（如323、546等）不在Y軸

上時(shí)，不顯示左側(cè)的數(shù)值提示

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

序號8:初始默認(rèn)值為100，僅可編輯為整數(shù)，每一間隔的值需要在

[0.07*（最大值-最小值）~（最大值-最小值）】這個(gè)范圍內(nèi)，考慮

到（最大值-最小值）/輸入的間隔值得到的行數(shù)有可能不是整數(shù)的問

題，實(shí)際顯示的行數(shù)為（最大值-最小值）/輸入的間隔值四舍五入取整

后的行數(shù)

異常提示：

?輸入的每一間隔的值不在[0.07*（最大值-最小值）~（最大值

-最小值）】這個(gè)范圍內(nèi)時(shí)，彈屏【警報(bào)請輸入0.07*（最大值-

最小值）到（最大值-最小值）之間的值】，輸入框內(nèi)容回到修改

前的值；

.輸入的行計(jì)數(shù)不在【0~15】范圍內(nèi)時(shí)，彈屏【警報(bào)請輸入小于

15的值】，輸入框內(nèi)容回到修改前的值;

邊框

標(biāo)題砌

值皿

網(wǎng)格

￡I無邊框

YP*O■金

liLl|圖例

背景

樣式1樣式2

示例說明

（四邊邊框）

O

90

1—800

(700

編00

輯5

丫500

軸400

一

300

200

00

1

邊框設(shè)置功能

圖例設(shè)置功能

背景設(shè)置功能

頁面說明：

序號10:主題文字注釋

序號11:四種主題單選，設(shè)計(jì)出圖標(biāo)作為按鈕外觀，下方會出現(xiàn)對應(yīng)

文字注釋，所選擇的背景按鈕外層加一圈黑色示意

圖表樣式說明

樣式1樣式2

3030

22.522.5

1515

7.57.5

00

08/0808/0908/1008/0808/09

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

頁面說明：

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

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

可見性

^寸齊三三

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

頁面說明：

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

表格

可見性g

涮目標(biāo)股橫向表O

豎向表

?I町［21憎24%

?fHlOWT；21.2%

?勵(lì)帕憎1”、

?血邵呻力83%

餅圖

示例說明示例說明

（橫向表居中）（橫向表左對齊）

百福百的的

26%24%21%19%10%

表格設(shè)置功能

頁面說明：

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

中。

值

值（百分比表示）@

愉但標(biāo)盥值（數(shù)字表示）O

?i24%

?rMlOGtT;21.2%

?SC圳陽的196%

?版郡（3$樣）03%

餅圖

值設(shè)置功能

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

圖表樣式說明

餅圖環(huán)圖

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

頁