用Axure寫PRD:寵物APP-V0.2.0

PE1
31 評論 40321 瀏覽 285 收藏 22 分鐘

通過撰寫產品需求文檔(PRD),能夠鍛煉到基本的產品能力,同時也是提高Axure操作能力的重要途徑。文章為作者利用Axure撰寫的Petpet的PRD,希望能夠給你帶來一些幫助。

此為Petpet項目PRD原型截圖:

一、大綱

二、項目介紹

1.?項目背景

  • 筆者產品小白,望以此熟悉產品開發過程,鍛煉文檔撰寫能力,嘗試輸出產品從0到1。
  • 熱愛萌寵,秉著興趣對互聯網寵物行業及市場進行調研,輸出針對Yourpet有寵APP的競品分析。
    因此充分了解愛寵人士的本質需求:精神慰藉、寵物的基本特質:壽命短,得出“引導及記錄寵物健康成長”的重要性。
  • 而目前寵物APP的切入點主要有:購物(電商)寵物用品、工具(養寵寶典)、社交(社區)、生活(O2O)、寵物活體交易/寄養/護理平臺,在此之間進行互相的延伸。也致使同質化較嚴重,同類產品間沒有太大的區別及亮點。
  • ?Petpet便是基于此出發點以工具+社交定位為切點,后期再延伸電商、生活O2OPetpet品牌實體店。

2.?項目目的

Petpet — “記錄生命的存在”

  • 記錄:多樣個性化記錄寵物一生。
  • 指導:問答科普社區,養寵百科。
  • 游戲化:Petpet星球入住著無數寵物。它們每個都有唯一的居民身份ID及個性化角色設定,通過愛心值等級制升級體驗更多功能。
  • 永恒:無可替代的寵物不會隨著時間消逝,而是永遠存在于Petpet寵物星球,上傳至我們的寵物云,數據云端中。
  • 延伸:ID — 實體Petpet寵物星球店會員ID號,給予相應的折扣、禮包、服務。
    AI — 可利用用戶上傳的寵物影像數據實現AI虛擬現實投影,讓逝去的寵物另一方式重生。

3.?核心功能規劃

三、迭代版本修訂記錄

V0.2.0修訂記錄

(1)需求清單:

(2)修訂記錄:

(3)新增需求點:

搜索icon頁:

四、版本記錄

V0.2.0版本記錄

新版描述:

  • 星球問答科普社區。
  • 成長日記-日常管理。
  • 正品優惠商城。

需求清單:

V0.1.0版本記錄

新版描述:

  • 開機向導。
  • 用戶手機號注冊、登錄、找回密碼。
  • 第三方快捷登錄。

需求清單:

五、業務邏輯

1.?產品結構圖

2.?信息結構圖

3.?用戶注冊登錄流程圖

4.?用戶購買流程圖

5.?用戶退款售后流程圖

六、全局說明

1.?功能權限

分為未登陸狀態與登陸狀態;登陸狀態下可進行所有操作,未登錄狀態下不可進行任何操作,停留在注冊登錄頁直至注冊/登錄成功。

2.?鍵盤說明

點擊(手機號、驗證碼)輸入框時彈出數字鍵盤;點擊其他輸入框彈出字母鍵盤。

3.?頁面內交互

4.?頁面內交互切換方式

標簽跳轉適用于所有頁面之間的切換,而滑動只適用于一個標簽下子標簽之間的跳轉。

5.?頁面異常

6.?數據字典

7.?更多操作

七、原型-功能

1. 啟動

歡迎頁:

  • 用戶場景:用戶每次啟動APP。
  • 優先級:高。
  • 輸入/前置條件:每次啟動APP時,都先顯示歡迎頁。

頁面邏輯&交互說明:

  • 任何時候開啟app時,都先顯示歡迎頁。
  • 首次開啟時進入歡迎頁, 等待3s后跳轉至引導頁。
  • 非首次開啟且已登錄時,3s后自動進入app首頁。
  • 非首次開啟且未登錄時,3s后進入登錄頁。

引導頁:

  • 用戶場景:用戶首次啟動app。
  • 功能描述:介紹Petpet輪播圖、進入登錄注冊界面。
  • 優先級:高。
  • 輸入/前置條件:首次啟動app、進入歡迎頁后跳轉到引導頁。

頁面邏輯&交互說明:

  • 輪播banner向右滑動0.5s循環播放
  • 點擊“進入Petpet”按鈕,跳轉到登錄頁

2.?注冊/登錄

登錄頁:

  • 用戶場景:用戶首次啟動app,或者用戶登錄新的賬號。
  • 功能描述:手機號碼登錄、第三方微博微信快捷登錄、手機號碼注冊、忘記密碼。
  • 優先級:高。
  • 輸入/前置條件:未登錄狀態下則跳轉到登錄頁。

頁面邏輯&交互說明:

  • 選擇“+86”可切換其他國家地區的手機號碼。
  • 點擊手機號輸入框和密碼輸入框,底部分別彈出數字鍵盤和字母鍵盤。
  • 點擊“登錄”按鈕,若輸入賬號和密碼匹配正確,登錄成功,跳轉至主界面;若匹配不正確,彈出toast:提示內容:你輸入的密碼與賬號不匹配,請重新輸入。
  • 點擊“注冊”,進入注冊頁。
  • 點擊“忘記密碼?”,進入找回密碼頁。
  • 可選擇微博微信快捷登錄,調出其他第三方授權接口,登錄成功后還是進入注冊界面,但用戶頭像信息已從第三方賬號中提取,且用戶依然需要通過手機號注冊與登錄。

注冊頁:

  • 用戶場景:用戶首次啟動app,或者用戶注冊新的賬號。
  • 功能描述:手機號碼驗證碼注冊。
  • 優先級:高。
  • 輸入/前置條件:在登錄頁點擊“注冊”進入注冊頁。

頁面邏輯&交互說明:

  • 點擊“<”按鈕??煞祷厣弦豁?。
  • 選擇“+86”可切換其他國家地區的手機號碼。
  • 點擊手機號輸入框,底部彈出數字鍵盤。
  • 輸入合法的手機號碼后才能點擊“獲取驗證碼”。
  • 點擊“獲取驗證碼”按鈕,服務器發送驗證碼信息且跳轉至設置密碼頁。
  • 可選擇微博微信快捷登錄,調出其他第三方授權接口,登錄成功后還是進入注冊界面,但用戶頭像信息已從第三方賬號中提取,且用戶依然需要通過手機號注冊與登錄。

找回密碼頁:

  • 用戶場景:用戶忘記密碼
  • 功能描述:驗證手機號、獲取碼驗證碼
  • 優先級:高
  • 輸入/前置條件:在登錄頁點擊“忘記密碼”進入找回密碼頁

頁面邏輯&交互說明:

  • 點擊“<”按鈕。可返回上一頁。
  • 選擇“+86”可切換其他國家地區的手機號碼。
  • 點擊手機號輸入框,底部彈出數字鍵盤。
  • 輸入合法的手機號碼后才能點擊“獲取驗證碼”。
  • 點擊“獲取驗證碼”按鈕,服務器發送驗證碼信息且跳轉至設置密碼頁。
  • 可選擇微博微信快捷登錄,調出其他第三方授權接口,登錄成功后還是進入注冊界面,但用戶頭像信息已從第三方賬號中提取,且用戶依然需要通過手機號注冊與登錄。

設置密碼頁:

  • 用戶場景:用戶設置密碼。
  • 功能描述:驗證驗證碼、再次獲取驗證碼、設置新密碼。
  • 優先級:高。
  • 輸入/前置條件:點擊“獲取驗證碼”進入設置密碼頁。

頁面邏輯&交互說明:

  • 點擊“<”按鈕??煞祷厣弦豁?。
  • 選擇“+86”可切換其他國家地區的手機號碼。
  • 點擊手機號輸入框和密碼輸入框,底部分別彈出數字鍵盤和字母鍵盤。
  • 輸入合法的手機號碼后才能點擊“獲取驗證碼”。
  • 點擊“獲取驗證碼”按鈕,按鈕顏色降低灰度,按鈕內容變為“60s”并開始60秒倒數,60秒后按鈕內容重新變為“獲取驗證碼”,恢復原來的灰度。
  • 點擊“提交”按鈕,若密碼格式正確,登錄成功,跳轉至主界面;若匹配不正確,彈出toast:提示內容:你輸入的密碼格式不正確,請重新輸入。

3.?星球

主界面:

  • 用戶場景:用戶打開App查看被推薦的內容。
  • 功能描述:查看推薦的內容;可關注、點贊、評論、分享。
  • 優先級:高。
  • 輸入/前置條件:打開App或點擊“星球”tab后首要顯示的內容。

頁面邏輯&交互說明:

  • 分類標簽導航,點擊某一標簽,標簽呈現為選中狀態(如圖所示推薦標簽),頁面顯示為當前標簽相對應的頁面。
  • 點擊搜索icon,跳轉到搜索頁面。
  • 點擊“關注”按鈕,彈出toast:提示內容:關注成功且按鈕變成“已關注”。
  • 點擊“已關注”按鈕,彈出dialog:內容:是否取消關注。點擊“確定”按鈕后變成“關注”,點擊“取消”按鈕后不變。
  • 此為點贊、評論、分享icon;點擊點贊icon。
  • 下拉刷新,上拉內容加載。
  • 在WiFi下,自動播放gif動畫和視頻。
  • 點擊頁面上的功能,跳轉到相應的功能界面。
  • 點擊框內(如下圖)跳轉至寵物主頁。
  • 點擊動態或評論icon跳轉至動態詳情頁。
  • 登錄進入時候出現的界面;在其他tab時候通過點擊底部tab的星球,進入該頁面。

關注:

  • 用戶場景:用戶查看關注的寵物最新動態
  • 功能描述:查看關注的寵物最新動態;可取消關注、點贊、評論、分享
  • 優先級:高
  • 輸入/前置條件:在星球tab頁點擊“關注”進入此頁

頁面邏輯&交互說明:

  • 分類標簽導航,點擊某一標簽,標簽呈現為選中狀態(如圖所示關注標簽),頁面顯示為當前標簽相對應的頁面。
  • 點擊搜索icon,跳轉到搜索頁面。
  • 點擊框內跳轉至寵物主頁。
  • 點擊動態或評論icon跳轉至動態詳情頁。
  • 點擊“關注”按鈕,彈出toast:提示內容:關注成功且按鈕變成“已關注”。
  • 點擊“已關注”按鈕,彈出dialog:內容:是否取消關注。點擊“確定”按鈕后變成“關注”,點擊“取消”按鈕后不變。
  • 此為點贊、評論、分享icon;點擊點贊icon。
  • 下拉刷新,上拉內容加載。
  • 在WiFi下,自動播放gif動畫和視頻。
  • 點擊頁面上的功能,跳轉到相應的功能界面。

百科:

  • 用戶場景:用戶搜索疑問或查看被推薦養寵答疑。
  • 功能描述:搜索輸入;查看被推薦養寵答疑。
  • 優先級:高。
  • 輸入/前置條件:在星球tab頁點擊“百科”進入此頁。

頁面邏輯&交互說明:

  • 分類標簽導航,點擊某一標簽,標簽呈現為選中狀態(如圖所示百科標簽),頁面顯示為當前? ? ?? ? ?? ? ?標簽相對應的頁面
  • 點擊搜索icon,跳轉到搜索頁面。
  • 點擊搜索框進行搜索
  • 點擊框內跳轉至疑問詳情頁
  • 下拉刷新,上拉內容加載
  • 在WiFi下,自動播放gif動畫和視頻
  • 點擊頁面上的功能,跳轉到相應的功能界面

搜索icon:

  • 用戶場景:用戶快捷搜索養寵疑問
  • 功能描述:搜索輸入、推薦詞、輸入鍵盤、搜索歷史、清除。
  • 優先級:高

頁面邏輯&交互說明:

  • 分類標簽導航,點擊某一標簽,標簽呈現為選中狀態(如圖所示百科標簽),頁面顯示為當前標簽相對應的頁面。
  • 點擊搜索icon,跳轉到搜索頁面。
  • 點擊搜索框,底部自動彈出鍵盤。
  • 在搜索文本框輸入信息進行搜索,在搜索的過程中搜索列表會有相關搜索詞供選擇,搜索成功之后進入對應的的界面。
  • 為用戶在綜合界面推薦熱搜詞。
  • 用戶在輸入關鍵字和點擊熱搜詞后,會相應變為搜索歷史。
  • 點擊清除搜索記錄icon可以清除搜索歷史。

4.?成長

成長中心:

  • 用戶場景:用戶查看或管理寵物信息。
  • 功能描述:查看或管理發布寵物信息;對寵物投食。
  • 優先級:高。
  • 輸入/前置條件:打開App后點擊“成長”tab后首要顯示的內容。

頁面邏輯&交互說明:

  • 點擊更多icon,彈出菜單。
  • 點擊“投食”按鈕,頭像旁彈出對話框且能量值進度條增加。
  • 點擊記錄icon,彈出發布界面。
  • 下拉刷新,上拉內容加載。
  • 在WiFi下,自動播放gif動畫和視頻。
  • 點擊頁面上的功能,跳轉到相應的功能界面。

5.?商城

商城中心:

  • 用戶場景:用戶了解或購買商品。
  • 功能描述:查看或搜索商品信息。
  • 優先級:高。
  • 輸入/前置條件:打開App后點擊“商城”tab后首要顯示的內容。

頁面邏輯&交互說明:

  • 點擊搜索框進行搜索。
  • 點擊購物車icon,跳轉購物車頁。
  • 下拉刷新,上拉內容加載。
  • 點擊頁面上的功能,跳轉到相應的功能界面,如拼團,優惠券等。
  • 如果點擊商品界面,則可以直接跳轉到該商品的界面。
  • 如果是無線連接狀態,頁面內的動圖將會直接播放,如果不是則以圖片的形式展示。

6.?我的

個人中心:

  • 用戶場景:用戶查看或管理個人信息
  • 功能描述:查看或管理個人信息
  • 優先級:高
  • 輸入/前置條件:打開App后點擊“我的”tab后首要顯示的內容

頁面邏輯&交互說明:

  • 點擊添加好友icon,跳轉添加好友頁面。
  • 點擊頁面上的功能,跳轉到相應的功能界面,如投食記錄,購物車、消息等。

八、總結

項目原型地址:在線查看

發布的上篇文章:針對Yourpet有寵APP的分析

 

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 求原文檔謝謝,haomrjy@163.com

    回復
  2. 學習了

    回復
  3. 求原文檔,我自己也在想落地萌寵相關領域的項目,目前在項目構思階段,想找愛貓愛狗的同學并且想自己做的伙伴一起聊聊可行性。構思的想法在這:https://www.v2ex.com/t/754632#reply3 如果感興趣的話可以聯系我的郵箱:1694798747@qq.com,微信同前綴

    來自浙江 回復
  4. 形式大于內容

    來自北京 回復
  5. 正解

    回復
  6. 求給原文檔,謝謝。280612043@qq.com

    來自廣東 回復
  7. 說實話,工作中盡量不要把原型做成這樣。原因:交互原型費時間,沒有詳細的說明文檔,很容易出問題,開發可能根本不知道某些按鈕能觸發。好的原型,應能充分考慮各種業務與異常情況,能提供測試用于測試用例撰寫,能向開發清晰的表達業務邏輯,說明各端需要處理的檢驗業務邏輯等。

    回復
    1. 很對

      回復
  8. 一看出發點就覺得這產品要黃

    回復
    1. 可以說下具體原因嗎

      回復
    2. 回復
  9. 17363325080@163.com,老哥,求一下。

    來自湖北 回復
  10. 老哥,這個源文件求一下,我想學習一下有些地方的交互,是咋寫的。 ??

    來自湖北 回復
  11. 除了優秀 沒啥可說的了

    回復
  12. 史上最完美的PRD文檔,點贊

    來自上海 回復
  13. 大神可以發源文件給我嗎,49540939@qq.com,跪謝了

    回復
  14. 導航中幾個tab點擊后跳轉至對應的頁面。是使用動態面包嗎?或者怎么實現tab底下頁面的跳轉呢?

    回復
  15. 可以發一份源文件給我嗎

    回復
  16. up主是個很好的情報收集員

    來自北京 回復
  17. 為什么會被開發批斗呢

    來自四川 回復
  18. 正解,現在很多裝大神的瞎JB給模板,害死多少小白

    來自浙江 回復
  19. 你好,源文件能方便分享下嗎?2470505282@qq.com 謝謝 ?

    來自上海 回復
  20. 打開鏈接的時候,顯示不全,能單獨發我一個生成的包么。我的QQ是:957185099

    來自北京 回復
  21. 好棒,請問寫這樣一份詳細的PRD大概要花多長時間?

    來自上海 回復
  22. 寫的真好,66666

    來自北京 回復
  23. 源文件可否分享呢??

    回復
  24. 我就想問問,是我太懶了,還是你們的prd都寫的這么霸道

    來自廣東 回復
  25. 請問動圖gif使用什么軟件做的呢?麻煩分享一下,謝謝!

    來自上海 回復
    1. licecap 或者其他錄屏軟件

      來自北京 回復
    2. AE,然后通過PS進行導出即可

      來自湖南 回復
  26. 動圖怎么發的,word也能放動圖就好嘍

    來自廣東 回復