PRD:倒推數據可視化APP——Chartistic產品需求文檔

2 評論 12785 瀏覽 73 收藏 24 分鐘

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

目錄

一、文檔綜述

1.1文檔輸出環境

1.2產品簡介

1.3產品總結

二、全局說明

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 文檔輸出環境

1.2 產品簡介

Chartistic,一款備受好評的小眾數據可視化app。

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

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

Chartistic無需登錄,打開即用,在移動端以交互的方式編輯數據,一分鐘內創建漂亮的柱狀圖、折線圖、區域圖和餅狀圖。將圖表以圖像的形式導出,并將其嵌入到演示文稿、電子郵件、文檔、電子表格中!

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

1.3 產品總結

目標用戶:需要對少量數據迅速進行可視化處理的辦公人群

產品定義:快速、簡單的移動端數據可視化工具應用,導出圖表作為PPT等演示工具的補充。

產品特征:

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

二、全局說明

2.1 鍵盤說明

在不同頁面需要輸入編輯時,對應的彈出鍵盤的類型,數字鍵盤只能輸入正數

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軸圖例/Y軸圖例默認顯示
  7. 背景/風格/樣式隨機
  8. 單擊增加一組數據按鈕,增加的數據Y軸數值在【最大值~最小值】范圍內隨機,X軸不賦值待編輯

2.4 限制設定

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

2.5 頁面交互

  1. 彈屏時底部頁面虛化,單擊彈屏以外的虛化界面,彈層關閉,返回上一頁面;
  2. 圖表編輯頁面下滑展開X軸Y軸編輯頁面,從屏幕下方上滑關閉;
  3. 圖表編輯頁面左滑展開設置編輯頁面,從屏幕左側右滑關閉。

三、產品說明

3.1 產品操作流程圖

3.2 產品功能導圖

3.3 頁面流程

四、頁面詳細功能說明

4.1 歡迎頁

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

4.2 首頁

圖一

圖二

圖三

圖四

頁面名稱:首頁

入口:歡迎頁后自動跳入

頁面說明:

序號1:點擊出現其他鏈接彈層,首頁頁面置于底部并虛化(如圖三)

序號2:點擊出現新建圖表類型彈層,首頁頁面置于底部并虛化(如圖二)

序號3:

  • 點擊進入圖表編輯頁
  • 長按或者左滑出現復制、導出、刪除三個快捷處理按鈕(如圖四)

序號4,5:點擊關閉彈屏,首頁頁面置于頂部并解除虛化

序號6:點擊快捷處理按鈕消失,回到首頁,在首頁圖表列表第一個位置添加復制的圖表

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

4.3 圖表編輯頁

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

圖5

圖6

圖7

圖8

圖9

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

入口:

  • 點擊圖表完成頁編輯按鈕跳轉
  • 新建圖表類型彈屏中點擊圖表類型對應按鈕進入

頁面說明:

主頁面:左滑展開展開設置編輯頁面,下滑展開X軸Y軸編輯頁面

序號1:點擊返回首頁

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

序號3:點擊圖表類型切換為折線圖,數值背景等設置不變,折線顏色為柱狀圖同一風格的單個顏色(如圖6)

序號4:點擊圖表類型切換為面積圖,數值背景等設置不變,折線與面積顏色為柱狀圖同一風格的單個顏色,折線的顏色比面積顏色深一個色號(如圖7)

序號5:點擊圖表類型切換為餅圖,數值背景等設置不變,配色也不變(如圖8)

序號6:單擊–切換圖表顏色風格

序號7,17,18:按住上滑/下滑–修改圓點高度,上方或者下方的對應數值一起修改,左側提示目前高度對應的數值,修改值在設定的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.4 X軸Y軸編輯頁(柱狀圖/折線圖/面積圖/餅圖)

頁面名稱: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的值】,輸入框內容回到修改前的值;

邊框設置功能

圖例設置功能

背景設置功能

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

序號11:四種主題單選,設計出圖標作為按鈕外觀,下方會出現對應文字注釋,所選擇的背景按鈕外層加一圈黑色示意

圖表樣式設置功能

頁面說明:

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

4.5.2 餅圖設置編輯頁

標題設置功能

頁面說明:

序號1:屏幕左側頁面點擊或者右滑返回圖表編輯頁

表格設置功能

頁面說明:

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

值設置功能

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

圖表樣式設置功能

頁面說明:

餅圖樣式說明如圖

4.5.3 智能剪貼畫設置編輯頁

圖像搜索功能

頁面說明:

序號1:僅可輸入英文名稱搜索,無編輯內容時文本框內容為Search,字體淺灰色,輸入內容后字體變為黑色

異常提示:

當移動端無網絡時,搜索框下方“在線搜索圖像”更改為“連接中斷”,搜索框點擊無反應

標題設置功能

值設置功能

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

圖表樣式設置功能

頁面說明:

智能剪貼畫樣式說明如圖

4.6 圖表完成頁

頁面名稱:圖表完成頁

入口:

  • 點擊首頁圖表縮略圖跳轉
  • 圖表編輯頁點擊完成按鈕跳轉

頁面說明:

序號1:點擊返回首頁

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

序號3:點擊導出保存到本地或者分享

五、總結

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

這款App是一款很實用的手機應用,交互很有特色,因為過于追求操作的簡便,導致功能局限比較大,對于App的未來優化方向,筆者認為可以在以下幾個方向嘗試:

  1. 增加“編輯兩組不同指標數據”的功能,因為在很多場景下是需要將兩組數據進行對比的,比如銷售額與成本額的走向對比;
  2. 在折線圖與柱狀圖的編輯中可以將數值編輯為負值,例如毛利率這種類型的數據可能會有負值出現,而且負值是需要在數據可視化圖表中突出表現的數據。

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

 

作者:啊晨,產品新人,積極尋找產品助理崗位中~郵箱:Cheryl_xu123@163.com

本文由 @啊晨 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 挺好的,可以多考慮下文檔的展現形式,讓內容簡潔明了,讓閱讀者方便或更有興趣去閱讀 ??

    來自北京 回復
    1. 好的!謝謝您的建議!

      回復