2019-11-12 資深UI設計者
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圖表完成頁
五、總結
Chartistic，一款備受好評的小眾數據可視化app。
在這個到處都充斥著數據，以數據為導向的年代，日常辦公中隨時隨地都有可能需要對或多或少的數據進行可視化處理來幫助分析與演示。
雖然有很多的功能強大的工具可以創建圖表，但是卻沒有多少工具可以使創建更簡單、更具有交互性。
Chartistic無需登錄，打開即用，在移動端以交互的方式編輯數據，一分鐘內創建漂亮的柱狀圖、折線圖、區域圖和餅狀圖。將圖表以圖像的形式導出，并將其嵌入到演示文稿、電子郵件、文檔、電子表格中!
交互便捷，操作簡單的它已在43個國家/地區投入使用。在新加坡、泰國、菲律賓和越南，名列App Store的年度十佳應用榜單。上線起至今共入選 App Store 精品推薦 9 次，下載量累計24萬次 。
目標用戶：需要對少量數據迅速進行可視化處理的辦公人群
產品定義：快速、簡單的移動端數據可視化工具應用，導出圖表作為PPT等演示工具的補充。
產品特征：
在不同頁面需要輸入編輯時，對應的彈出鍵盤的類型，數字鍵盤只能輸入正數
圖表編輯頁面：
X軸Y軸編輯頁面：
設置編輯頁面：
新建圖表時
圖一
圖二
圖三
圖四
頁面名稱：首頁
入口：歡迎頁后自動跳入
頁面說明：
序號1：點擊出現其他鏈接彈層，首頁頁面置于底部并虛化（如圖三）
序號2：點擊出現新建圖表類型彈層，首頁頁面置于底部并虛化（如圖二）
序號3：
序號4，5：點擊關閉彈屏，首頁頁面置于頂部并解除虛化
序號6：點擊快捷處理按鈕消失，回到首頁，在首頁圖表列表第一個位置添加復制的圖表
序號7：點擊彈屏關閉，快捷按鈕消失，回到首頁，該圖表刪除，列表中該圖表后面的圖表前移填充空缺位置
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：
序號13：點擊后小圈即序號7變成刪除符號如圖9，單擊刪除符號刪除該組數據，當刪除至只剩一組數據時刪除符號變回小圈，不可再刪除
序號14：點擊隱藏上面的下拉按鈕、添加按鈕、刪除按鈕、設置按鈕，隱藏后圖表變為左向，單擊后以上按鈕出現
序號15：點擊展開設置編輯頁面
序號16：輸入值之前按鈕為灰色，輸入后字體顏色由背景設置決定；點擊輸入標題
序號19：點擊餅圖需要修改占比的目標扇形后出現兩個半圓形按鈕，按住按鈕滑動分隔線調整目標扇形角度，按鈕相鄰一邊的扇形同時被增大/減小角度，餅圖中間提示目前目標扇形角度對應的占比
4.3.2 智能剪貼畫編輯頁
頁面名稱：智能剪貼畫編輯頁
入口：
頁面說明：
主頁面：左滑展開展開設置編輯頁面
序號1：按住上下滑動更改有色部分的高度，左側占比數值一起更改，更改范圍為0%-100%
頁面名稱：X軸Y軸編輯頁面
入口：
頁面說明：
餅圖沒有編輯X軸名稱按鈕與編輯Y軸名稱按鈕
序號1：點擊保留編輯結果，收起X軸Y軸編輯頁面，回到圖表編輯頁
序號2：點擊屏幕下半部分或者從下半部分上滑，收起X軸Y軸編輯頁面，回到圖表編輯頁
序號3：
序號4：
序號5：點擊編輯文本框與數值框之間出現小刪除按鈕即序號4，點擊刪除對應的該組數據
異常提示：
頁面名稱：設置編輯頁面
入口：
4.5.1 柱狀圖/折線圖/面積圖設置編輯頁
標題設置功能
頁面說明：
序號1：屏幕左側頁面點擊或者右滑返回圖表編輯頁
值設置功能
頁面說明：
序號2：最大值最高可設置為10000，最大值設置的值需要大于最小值，僅可編輯為整數
序號3：最小值最小可設置為0，最小值設置的值需要小于最大值，僅可編輯為整數
異常提示：
網格設置功能
頁面說明：
序號4：可見性為關閉狀態時，行數與每一間隔的值無法選擇與編輯
序號5：初始默認值為10，可編輯范圍為【0~15】，僅可編輯為整數
序號6：對齊條開啟狀態見圖，在圖表編輯頁面滑動所編輯的數據對應到Y軸上的數值（圖中的0、100、200、300等數值）時停頓一下，左側提示所對應的數值；滑動編輯的數值（如323、546等）不在Y軸上時，不顯示左側的數值提示
序號7：簡單圖表僅保留圖表主體形狀，如上圖
序號8：初始默認值為100，僅可編輯為整數，每一間隔的值需要在 【0.07*（最大值-最小值）~ （最大值-最小值）】這個范圍內，考慮到（最大值-最小值）/輸入的間隔值 得到的行數有可能不是整數的問題，實際顯示的行數為（最大值-最小值）/輸入的間隔值四舍五入取整后的行數
異常提示：
邊框設置功能
圖例設置功能
背景設置功能
頁面說明：
序號10：主題文字注釋
序號11：四種主題單選，設計出圖標作為按鈕外觀，下方會出現對應文字注釋，所選擇的背景按鈕外層加一圈黑色示意
圖表樣式設置功能
頁面說明：
序號9：柱狀圖/折線圖/面積圖樣式說明如圖
4.5.2 餅圖設置編輯頁
標題設置功能
頁面說明：
序號1：屏幕左側頁面點擊或者右滑返回圖表編輯頁
表格設置功能
頁面說明：
豎向表僅可選擇左對齊或者右對齊，橫向表可選擇左對齊/右對齊/居中。
值設置功能
背景設置功能（同4.5.1柱狀圖/折線圖/面積圖）
圖表樣式設置功能
頁面說明：
餅圖樣式說明如圖
4.5.3 智能剪貼畫設置編輯頁
圖像搜索功能
頁面說明：
序號1：僅可輸入英文名稱搜索，無編輯內容時文本框內容為Search，字體淺灰色，輸入內容后字體變為黑色
異常提示：
當移動端無網絡時，搜索框下方“在線搜索圖像”更改為“連接中斷”，搜索框點擊無反應
標題設置功能
值設置功能
背景設置功能（同4.5.1柱狀圖/折線圖/面積圖）
圖表樣式設置功能
頁面說明：
智能剪貼畫樣式說明如圖
頁面名稱：圖表完成頁
入口：
頁面說明：
序號1：點擊返回首頁
序號2：點擊進入圖表編輯頁面
序號3：點擊導出保存到本地或者分享
以上便是我本次倒推撰寫的Chartistic的產品需求文檔，格式參考倒推“潮汐”APP的產品需求文檔。
這款App是一款很實用的手機應用，交互很有特色，因為過于追求操作的簡便，導致功能局限比較大，對于App的未來優化方向，筆者認為可以在以下幾個方向嘗試：
這是本人第一次撰寫的產品需求文檔，一定有諸多不足，希望各位前輩不吝賜教，感激不盡！希望可以成為一名產品經理，創造出對用戶有價值的產品，不求做改變世界的產品，只求改變自己，改變眼前。
文章來源：人人都是產品經理