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