数据可视化APP-Chartistic产品需求文档

数据可视化APP——Chartistic产品需求文档

是一款通过交互快速编辑数据可视化图表的本文通过

Chartisticappo

对"Chartistic"叩p进行产品体验与分析后产出的PRD文档。该文档

由几个板块组成：全局说明、产品说明、页面详细功能说明等。

目录

一、文档综述

1.1文档输出环境

1.2产品简介

13产品总结

二、全局说明

2.1键盘说明

2.2按钮说明

2.3默认设置

2.4限制设定

2.5页面交互

三、产品说明

3.1产品操作流程

3.2产品功能导图

3.3页面流程

四、页面详细功能说明

4.1欢迎页

4.2首页

4.3图表编辑页

4.3.1柱状图/折线图/面积图/饼图图表编辑页

4.3.2智能剪贴画编辑页

4.4X轴Y轴编辑页（柱状图/折线图积图/饼图）

4.5设置编辑页

4.5.1柱状图/折线图/面积图设置编辑页

4.5.2饼图设置编辑页

4.5.3智能剪贴画设置编辑页

4.6图表完成页

五、总结

一、文档综述

1.1文档输出环境

文档名称倒推Char1：istic需求文档

版本2.0.3

体验环境iPhone7

撰写人徐晨

撰写时间2019.11.06

目的锻炼产品需求文档撰写能力

1.2产品简介

Chartistic,一款备受好评的小众数据可视化叩p。

在这个到处都充斥着数据，以数据为导向的年代，日常办公中随时随地

都有可能需要对或多或少的数据进行可视化处理来帮助分析与演示。

虽然有很多的功能强大的工具可以创建图表,但是却没有多少工具可以

使创建更简单、更具有交互性。

Chartistic无需登录，打开即用，在移动端以交互的方式编辑数据，一

分钟内创建漂亮的柱状图、折线图、区域图和饼状图。将图表以图像的

形式导出，并将其嵌入到演示文稿、电子邮件、文档、电子表格中！

交互便捷，操作简单的它已在43个国家/地区投入使用。在新加坡、泰

国、菲律宾和越南，名列AppStore的年度十佳应用榜单。上线起至

今共入选AppStore精品推荐9次,下载量累计24万次。

1.3产品总结

目标用户：需要对少量数据迅速进行可视化处理的办公人群

产品定义：快速、简单的移动端数据可视化工具应用，导出图表作为

PPT等演示工具的补充。

产品特征：

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

2.交互式编辑

3.外观选择多样性

二、全局说明

2.1键盘说明

在不同页面需要输入编辑时，对应的弹出键盘的类型，数字键盘只能输

入正数

首页图表轴负曲页面

数字键盘

丫轴的值

有小数点

贿赧

最大值/最小值/行

无小数点i

字母键盘发送反馈的电子邮件编辑湿的值/X轴名称/Y轴名称邮图e

2.2按钮说明

图表编辑页面：

・图表上默认的随机数值除外，标题编辑按钮、X轴编辑按钮、Y

轴编辑按钮在未输入值前呈现灰色

・图表类型按钮：当前类型按钮为黑色，未选择类型为灰色

X轴Y轴编辑页面：

・Y轴默认的随机数值除外，X轴名称编辑框、Y轴名称编辑框、X

轴的值编辑框在未输入有效值前预填文字呈现灰色

设置编辑页面：

・图表样式选择按钮：当前样式按钮为黑色，未选择样式为灰色

2.3默认设置

新建图表时

1.默认已有8组数据，Y轴数值在［0-1000］范围内随机，X轴不

赋值待编辑

2.标题默认可见、居中对齐

3.Y轴默认最大值为1000,最小值为0,不显示小数

4.网格可见，彳亍计数10,每一间隔的值100,对齐线不显示、简单

图表不开启

5.边框默认选择无边框

6.X轴标题/Y轴标题/X轴图例"轴图例默认显示

7.背景/风格/样式随机

8.单击增加一组数据按钮，增加的数据Y轴数值在【最大值~最小

值】范围内随机，X轴不赋值待编辑

2.4限制设定

1.最多可输入12组数据

2.Y轴最大值可编辑范围为1-10000,最小值编辑范围为0-9999,

最大值需要大于最小值

3.Y轴数值的编辑需在【最大值~最小值】范围内

4.首先确定的是（最大值-最小值）/行计数=每一间隔的值，行计

数的数量需要在［0~15］o因此每一间隔的值需要在［0.07*（最

大值-最小值）~（最大值-最小值）】这个范围内，确保最多只

能有14行，考虑到（最大值-最小值）/输入的间隔值得到的行数

有可能不是整数的问题，实际显示的行数为（最大值-最小值）/

输入的间隔值四舍五入取整后的行数

5.最大值、最小值、行计数、每一间隔的值仅可编辑为整数

2.5页面交互

L弹屏时底部页面虚化，单击弹屏以外的虚化界面，弹层关闭，返

回上一页面；

2.图表编辑页面下滑展开X轴Y轴编辑页面从屏幕下方上滑关闭；

3.图表编辑页面左滑展开设置编辑页面，从屏幕左侧右滑关闭。

三、产品说明

3.1产品操作流程图

3.2产品功能导图

标题内容标题

维度值

维度内容

维圜量量

指^值指标

左对齐

居中挤方式可见

------是见标题

右对不-X

不可见!

百分比

是否鎏

居中位置横向表饼

方向可见

位置竖向表是见表格*

右侧〈外观

不可见

水位标志是否显示、

透明背景白色字体；'

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

黑色背景白色字体•-------

白色背景黑色字体

拼图.一

――样式

环图

然,搭配模版颜色

信息

邮件

共享的相簿分享

徵信等社交平台

指定联系人

存储为图像

；勃［］到录

拷贝保存到本地

存储到文件

打印

app1ewatc共享到其他苹果设备

教程廉手指引功能导航

3.3页面流程

四'页面详细功能说明

4.1欢迎页

・页面名称：欢迎页

.入口：打开App进入

.页面说明：打开App自动进入欢迎页，停留0.5秒后自动进入首

页

4.2首页

图

hillI"Id★

图二

图三

图四

页面名称：首页

入口：欢迎页后自动跳入

页面说明：

序号1:点击出现其他链接弹层，首页页面置于底部并虚化（如图三）

序号2:点击出现新建图表类型弹层，首页页面置于底部并虚化（如图

-）

序号3:

・点击进入图表编辑页

・长按或者左滑出现复制、导出、删除三个快捷处理按钮（如图四）

序号4,5:点击关闭弹屏，首页页面置于顶部并解除虚化

序号6:点击快捷处理按钮消失，回到首页，在首页图表列表第一个位

置添加复制的图表

序号7:点击弹屏关闭，快捷按钮消失，回到首页，该图表删除，列表

中该图表后面的图表前移填充空缺位置

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

碗标题

•领

lllll

•颗

•

•领

•领

•辐

点击需要编辑的

图8

1000

1000

900900

800

800

700

700

600600

500500

400400285

300300J

200200

100100

00~~

页面名称：柱状图/折线图湎积图/饼图图表编辑页

入口：

・点击图表完成页编辑按钮期踽

・新建图表类型弹屏中点击图表类型对应按钮进入

页面说明：

主页面：左滑展开展开设置编辑页面，下滑展开X轴Y轴编辑页面

序号1：点击返回首页

序号2:点击进入图表完成页面

序号3:点击图表类型切换为折线图，数值背景等设置不变，折线颜色

为柱状图同一风格的单个颜色（如图6）

序号4:点击图表类型切换为面积图，数值背景等设置不变，折线与面

积颜色为柱状图同一风格的单个颜色，折线的颜色比面积颜色深一个色

号（如图7）

序号5:点击图表类型切换为饼图，数值背景等设置不变，配色也不变

（如图8）

序号6:单击-切换图表颜色风格

序号7,17,18:按住上滑/T滑T修改圆点高度，上方或者下方的对应

数值一起修改，左侧提示目前高度对应的数值，修改值在设定的Y轴最

大值与最小值之间

序号8,9,10,12:输入值之前按钮为灰色，输入后字体颜色由背景

设置决定；点击展开X轴Y轴编辑页面

序号11：

・点击一次增加一组数据按钮，增加的■Y轴数值在【最大值~

最小值】范围内随机，X轴不赋值待编辑

・最多可增加至12组数据，增加至12组数据后按钮变灰，点击无

反应

序号13:点击后小圈即序号7变成删除符号如图9,单击删除符号删

除该组数据，当删除至只剩一组数据时删除符号变回小圈，不可再删除

序号14:点击隐藏上面的下拉按钮、添加按钮、删除按钮、设置按钮,

隐藏后图表变为左向，单击后以上按钮出现

序号15:点击展开设置编辑页面

序号16:输入值之前按钮为灰色，输入后字体颜色由背景设置决定；

点击输入标题

序号19:点击饼图需要修改占比的目标扇形后出现两个半圆形按钮，

按住按钮滑动分隔线调整目标扇形角度，按钮相邻一边的扇形同时被增

大/减小角度，饼图中间提示目前目标扇形角度对应的占比

4.3.2智能剪贴画编辑页

页面名称：智能剪贴画编辑页

入口：

・点击首页图表缩略图成踽

・新建图表类型弹屏中点击图表类型对应按钮进入

页面说明：

主页面：左滑展开展开设置编辑页面

序号1:按住上下滑动更改有色部分的高度，左侧占比数值一起更改,

更改范围为0%-100%

4.4X轴Y轴编辑页（柱状图/折线图/面积图/饼图）

女+

X

9

今

lihl

国

页面名称：X轴Y轴编辑页面

入口：

・图表编辑页面下滑展开

・编辑X轴名称按钮，编辑Y轴名称按钮，编辑X轴按钮，下拉按

钮点击展开

页面说明：

饼图没有编辑X轴名称按钮与编辑Y轴名称按钮

序号1:点击保留编辑结果，收起X轴Y轴编辑页面，回到图表编辑页

序号2:点击屏幕下半部分或者从下半部分上滑，收起X轴Y轴编辑页

面，回到图表编辑页

序号3:

・点击一次增加一组数据按钮，增加的翔居Y轴数值在【最大值~

最小值】范围内随机，X轴不赋值待编辑

.最多可增加至12组数据，增加至12组数据后按钮变灰，点击无

反应

序号4:

・初始状态为隐藏，单击删除按钮即序号5后出现，点击删除对应

的该组数据，点击屏幕其他任意位置再次隐藏

・当删除至只剩一组数据时自动隐藏，不可再删除

序号5:点击编辑文本框与数值框之间出现小删除按钮即序号4,点击

删除对应的该组数据

异常提示：

・Y轴编辑的数值＞最大值时，弹屏【警告所输入的值大于最大值】，

输入框内容回到修改前的值；

.Y轴编辑的数值〈最小值时，弹屏【警告所输入的值小于最小值】，

输入框内容回到修改前的值；

4.5设置编辑页

页面名称：设置编辑页面

入口：

・图表编辑页面左滑展开

•图表编辑页面设置按钮点击展开

4.5.1柱状图/折线图/面积图设置编辑页

标题设置功能

页面说明：

序号1:屏幕左侧页面点击或者右滑返回图表编辑页

值设置功能

页面说明：

序号2:最大值最高可设置为10000，最大值设置的值需要大于最小值,

仅可编辑为整数

序号3:最小值最小可设置为0,最小值设置的值需要小于最大值，仅

可编辑为整数

异常提示：

.最大值＞10000时，弹屏【无效值请输入小于10000的值】，

输入框内容回到修改前的值;

.最大值＜=最小值时，弹屏【无效值请输入大于最小值的值】，

输入框内容回到修改前的值；

・最小值＞=最大值时，弹屏【无效值请输入小于最大值的值】，

输入框内容回到修改前的值；

示例说明示例说明

（网格不可见）（网格不可见，对齐条打开）

网格设置功能

页面说明:

序号4:可见性为关闭状态时，行数与每一间隔的值无法选择与编辑

序号5:初始默认值为10,可编辑范围为【0~15】，仅可编辑为整数

序号6:对齐条开启状态见图，在图表编辑页面滑动所编辑的数据对应

到Y轴上的数值（图中的0、100、200、300等数值）时停顿一下，

左侧提示所对应的数值；滑动编辑的数值（如323、546等）不在Y轴

上时，不显示左侧的数值提示

序号7:简单图表仅保留图表主体形状，如上图

序号8:初始默认值为100，仅可编辑为整数，每一间隔的值需要在

[0.07*（最大值-最小值）~（最大值-最小值）】这个范围内，考虑

到（最大值-最小值）/输入的间隔值得到的行数有可能不是整数的问

题，实际显示的行数为（最大值-最小值）/输入的间隔值四舍五入取整

后的行数

异常提示：

•输入的每一间隔的值不在[0.07*（最大值-最小值）~（最大值

-最小值）】这个范围内时，弹屏【警报请输入0.07*（最大值-

最小值）到（最大值-最小值）之间的值】，输入框内容回到修改

前的值；

.输入的行计数不在【0~15】范围内时，弹屏【警报请输入小于

15的值】，输入框内容回到修改前的值;

边框

标题砌

值皿

网格

£I无边框

YP*O■金

liLl|图例

背景

样式1样式2

示例说明

（四边边框）

O

90

1—800

(700

编00

辑5

丫500

轴400

一

300

200

00

1

边框设置功能

图例设置功能

背景设置功能

页面说明：

序号10:主题文字注释

序号11:四种主题单选，设计出图标作为按钮外观，下方会出现对应

文字注释，所选择的背景按钮外层加一圈黑色示意

图表样式说明

样式1样式2

3030

22.522.5

1515

7.57.5

00

08/0808/0908/1008/0808/09

图表样式设置功能

页面说明：

序号9:柱状图/折线图/面积图样式说明如图

4.5.2饼图设置编辑页

可见性

^寸齐三三

标题设置功能

页面说明：

序号1:屏幕左侧页面点击或者右滑返回图表编辑页

表格

可见性g

涮目标股横向表O

竖向表

•I町［21憎24%

•fHlOWT；21.2%

•励帕憎1”、

•血邵呻力83%

饼图

示例说明示例说明

（横向表居中）（横向表左对齐）

百福百的的

26%24%21%19%10%

表格设置功能

页面说明：

竖向表仅可选择左对齐或者右对齐，横向表可选择左对齐/右对齐/居

中。

值

值（百分比表示）@

愉但标盥值（数字表示）O

♦i24%

•rMlOGtT;21.2%

•SC圳阳的196%

•版郡（3$样）03%

饼图

值设置功能

背景设置功能（同4.5.1柱状图/折线图/面积图）

图表样式说明

饼图环图

图表样式设置功能

页