PRD:寵趣,寵物用品購物社交平臺

35 評論 55753 瀏覽 227 收藏 15 分鐘

寵趣app是一款讓用戶放心購買寵物用品的同時,還可以分享寵物相關心得經驗的平臺。本文是關于寵趣app的需求文檔,一起來看看~

1、文檔綜述

1.1 版本修訂記錄

1.2 編輯歷史

1.3 產品介紹

寵趣app是一款讓用戶放心購買寵物用品的同時,還可以分享寵物相關心得經驗的平臺。用戶可以在app中選擇寵物用品購買,在圈子中分享自己的點滴故事,在社交中結識更多類似相同趣味的好友,通過圈子——讓你了解關于寵物相關的一切。

1.4 需求整理

1.4.1 用戶需求分析

隨著越來越多人開始養寵物,對寵物用品的需求越來越大,但是對于國內寵物用品缺乏信心,對待國外用品又缺乏購物渠道,同時對于新手缺乏經驗,迫切需求一個可以學習分享的地方。

  1. 寵物用品缺少受信任的專屬平臺;
  2. 購買渠道受限;
  3. 不了解商品真實的用戶體驗心得;
  4. 需求寵物養育心得經驗;
  5. 欣賞其它寵物情況。

1.4.2 用戶定位

  1. 缺少時間和能力進行篩選寵物用品購物的消費者;
  2. 缺少養育經驗的新晉寵物主人;
  3. 愿意在網絡平臺上展示與分享的互聯網用戶;
  4. 追求貨真價實的消費者;
  5. 云養貓群體。

1.4.3 需求匯總

2、產品整體框架和流程

2.1 產品功能架構圖

2.2 產品信息架構圖

2.2 產品使用流程圖

2.3.1 注冊登錄流程

2.3.2 購買和支付流程

2.3.3 發布流程

3、全局說明

3.1 功能權限

(1)分為登錄未狀態和登錄狀態

(2)未登錄狀態下能瀏覽界面和商品詳情

  • 手機號登錄
  • 第三方登錄:微信、QQ、微博、Facebook登錄

(3)登錄狀態下可以進行APP內所有操作

3.2 鍵盤說明

  1. 點擊手機號輸入框時?面底部彈出數字鍵盤;
  2. 點擊搜索框、編輯筆記框或評論框時?面底部彈出字母全鍵盤。

4、主要功能說明

4.1 啟動頁

頁面邏輯&交互說明:

  1. 用戶首次打開App,進入歡迎頁面;
  2. 非首次打開App進入啟動頁,一般設置為廣告頁面,對廣告頁不進行任何點擊,2s后自動進入App首頁;點擊跳過,直接進入App首頁;點擊廣告頁圖片沒有熱區的地方,進入廣告頁;點擊詳情,進入產品宣傳文章頁面。

4.2 登錄注冊

邏輯說明:

(1)注冊頁面說明

  1. 點擊“注冊”,用戶在注冊頁面輸入手機號碼,點擊“獲取驗證碼”按鈕;
  2. 若用戶在60秒內未收到手機驗證碼,點擊“獲取驗證碼”按鈕重新獲取驗證碼;
  3. 完成驗證登錄后完善個人信息,填寫昵稱,設置密碼,選擇性別,點擊下一步;
  4. 選擇自己喜歡的標簽內容,標簽至多選擇5個,完成后進入個人中心頁面;
  5. 除了手機號碼注冊,還能點擊“手機號注冊”頁面中“注冊”按鈕下方的“第三方注冊”,點擊后進入授權頁面,完成授權后、輸入綁定手機號,輸入發到驗證手機的驗證碼,點擊“綁定”按鈕;繼續完善個人信息,選擇個性標簽后進入個人中心頁面。

(2)登錄頁面說明

  1. 點擊“登錄”,用戶輸入手機號碼和密碼后進行登錄;
  2. 除了密碼登錄,第三方注冊用戶也可選擇第三方授權進行登錄;
  3. 如果在手機賬號密碼登錄時忘記密碼,可點擊頁面底部的“忘記密碼”,跳轉到“找回密碼”頁面,經過輸入手機賬號,獲取驗證碼,填寫新密碼即可重置密碼。

交互說明:

(1)注冊頁面說明

  1. 點擊輸入手機號、驗證碼文本框,數字鍵盤從底部彈出;
  2. 點擊“獲取驗證碼”按鈕,按鈕顏色降低灰度,按鈕內容變為“60s”并開始60秒倒數,60秒后按鈕內容重新變為“獲取驗證碼”,恢復原來的灰度。
  3. 點擊注冊按鈕出現“完善信息”頁面,點擊上傳頭像彈出手機相冊選擇照片;點擊昵稱和密碼,數字鍵盤從底部彈出;性別默認為空,選擇對應性別出現焦點圈;點擊下一步后進入標簽選擇頁,默認標簽頁為灰色,選擇標簽后為黃色,最多選擇5個,按“完成”跳轉到個人中心頁面。

(2)登錄頁面說明

  1. 點擊輸入手機號、密碼文本框,數字鍵盤從底部彈出;輸入密碼時可點擊右側圖標設置是否顯示密碼。
  2. 若手機號登錄忘記密碼,可點擊頁面底部的“忘記密碼”,進入“找回密碼”頁面,點擊輸入綁定的手機號碼,點擊“獲取驗證碼”,顯示“30s后重發”進入30s倒計時;輸入驗證碼后,點擊“下一步”重置密碼。
  3. 點擊登錄注冊頁面底部第三方登錄的四個按鈕,從頁面中間彈出dialog,從“取消”和“打開”中選擇,按“取消”彈窗消失,按“打開”跳轉到授權界面登錄。

4.4 商城首頁

商城主要由banner、熱賣推薦、汪食專區、喵食專區、夠用玩具、貓用玩具、免費試用、限時搶購組成,除了這些之外,還有“TOP熱賣”、 “每周上新”、 “進口寵物” 、“進口寵物”這幾個標簽的入口;

頁面交互說明:

  1. banner自動循環輪播,設置播放點同步banner對應狀態;
  2. 滑動限時搶購頁,可以向左和向右滑動,當所滑動到的區域左邊界位于起始位置時則只能向右滑動,當所滑動區域右邊界位于終點位置則只可向左滑動。

4.5 熱賣推薦與產品支付

熱賣推薦主要由編輯在一定程度上依托用戶的操作記錄加上“人氣”的篩選來進行選薦,可以根據商品人氣、價格篩選進行排序,可切換櫥窗展示。

產品支付查看產品的圖片,各種參數,以及其他說明和詳情,與客服進行聊天溝通,收藏加入購物車和支付進行購買。

頁面交互說明:

  1. 點擊“熱賣推薦”中的“人氣”,可以點擊設置人氣高到低排序,點擊“熱賣推薦”中的“價格”,可以點擊設置價格高到低排序,也可以設置從價格低到高排序,點擊“篩選”會從屏幕右側彈出彈出一個比屏幕小的篩選框,同時設置顯示遮罩;點擊設置“價格區間”時從底部彈出數字鍵盤,點擊“分類”等圓角矩形標簽時,圓角矩形外框和文字都設置為紅色,并在文字前顯示一個紅色的對勾,再次點擊已選中的圓角矩形則恢復原來的樣式。
  2. 點擊“商品詳情”,從頁面右側彈出詳情頁,商品詳情頁中的商品圖片自動循環播放。
  3. 點擊“客服”,從頁面左側彈出客服頁;點擊收藏后,收藏圖標閃現黃色。
  4. 點擊加入購物車從頁面右側彈出購物車頁。
  5. 點擊購買從底部往上彈出一個半屏幕大小的顯示遮罩,選中選項后邊框描黑,商品數量可以進行增減。

4.6 社區頁面

社區頁面主要包含搜索、頂部tab對應的各個界面、消息中心、發布選項。其中,頂部tab包括推薦、圈子、附近、關注除了這些,還包括了下面就對主要的頁面進行說明。

頁面交互說明:

  1. 消息:點擊屏幕右上角的“消息”,【消息中心】頁面從右側向左側滑入,點擊返回按鈕,【消息中心】頁面向右滑出屏幕。
  2. 發布:點擊發布后下拉 ,點擊對應發布選項進入對應頁面,點擊返回按鈕后發布頁面消失。
  3. 頂部標簽:頂部標簽點擊切換時,標簽文字設置為黑色,文字下面有一條紅線隨著標簽的切換而移動到對應的位置,作為當前頁面的標記,同時,頁面也跟著切換。
  4. 熱門圈子和我的圈子:可以向左和向右滑動,當所滑動到的區域左邊界位于起始位置時則只能向右滑動,當所滑動區域右邊界位于終點位置則只可向左滑動。

圈子查看與發帖

頁面交互說明:

  1. 點擊圖片或名稱進入圈子頁面。
  2. 左右滑動切換圖片。
  3. 圈子界面顯示發帖人、時間、評論數、點贊數。
  4. 帖子詳情界面顯示發帖人、內容、回帖內容。
  5. 點擊關注,該發言人進入關注頁面。
  6. 點擊收藏,該帖子收藏至“我的收藏”,在個人中心的“我的收藏”中可以查看。
  7. 點擊評論出行內容框評論書寫。
  8. 點擊發布進入帖子發布頁面填寫內容,上傳視頻圖片,點擊發布后進入圈子頁面。

4.7 購物車

頁面邏輯內容:

  1. 點擊商品,進入商品詳情頁,可收藏、咨詢客服、看評論以及查看商品詳情,還要選擇規格;
  2. 購物車頁面可編輯購物車中的商品、添加刪減商品數量;
  3. 點擊下單跳轉到“填寫訂單”頁面,用戶可以編輯地址、手機號碼以及查看有無可用優惠券,具體用哪張優惠券;“填寫訂單”有商品合計價格、活動優惠以及運費的信息;另外,可以勾選是否要開發票;必須同意協議才能付款。

4.7 個人中心

頁面邏輯內容:點擊點擊個人主頁,可更換頭像、昵稱和相關前面,可查看個人動態。

總結

第一次寫PRD文檔,投稿就被斃了,這次是二改了,也不知道這次能不能發出去。內容其實也很多了,邏輯順序應該沒那么差吧。

原型圖地址: ?https://2jyvat.axshare.com/#c=2 (PS:因為mac做的 分頻率不兼容的話 見諒)

 

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

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 感覺寫的很不錯?。∠M涣飨拢瑆x :zhiwei480766,不過我是程序猿,想開發類似功能的,不是產品經理。

    回復
  2. 你好!請問你的原型圖怎么顯示在手機框框里的呀?

    來自北京 回復
    1. 做原型的時候直接在面板上價格手機框圖就好了呀

      來自湖南 回復
  3. 能一起交流一下嗎 vx zcc123456cc

    回復
  4. 請問是用什么錄屏軟件做的呢

    來自浙江 回復
  5. 點贊

    來自廣東 回復
  6. 請問里面的原型動圖是如何生成的呢? ??

    來自廣東 回復
    1. 額 我用的是錄屏 生成GIF圖的 軟件。。

      來自上海 回復
    2. 好的,謝謝 ??

      來自廣東 回復
  7. 第一次寫就這么厲害。。。我也是產品小白,實在是佩服佩服。

    來自陜西 回復
    1. 額 現在在寫這個相關的MRD文檔PPT形式,也是一臉懵逼的寫。

      來自上海 回復
  8. 可以加下我微信嗎,一起探討下,我是萌新,uc384807514

    回復
    1. 額額,我也是萌新 就是寫寫做做,畢竟還有本職工作呢。。

      來自上海 回復
  9. PRD不需要做成高保真的,主要思考功能邏輯,各個情況標注都還缺少的;基本只考慮操作正常情況,異常情況這些場景需要考慮周全

    來自浙江 回復
    1. 恩恩 因為沒有經驗 確實在異常這塊上考慮沒那么詳細。

      來自上海 回復
  10. 跟我想做的一個項目很像

    來自廣東 回復
  11. 想問一下原型中的icons都是找的模板圖片嗎?還是有的是自己PS做的?

    來自河北 回復
    1. iocn都是在阿里巴巴上的。

      來自上海 回復
  12. 注冊登錄的流程圖有不少問題

    來自廣東 回復
    1. 恩恩 確實欠缺考慮,如果有空的話會重新修改這個文檔

      來自上海 回復
  13. 前端展示和交互固然非常重要,但是在做原型之前先梳理好后臺邏輯,才能真正實現產品落地;還有如果這是app的v1.0,建議先關注關鍵流程的實現,其他功能可以慢慢加

    來自上海 回復
  14. 他趣????

    來自黑龍江 回復
  15. 只要涉及到購買就有商城,商城是一個巨大的體系,從購買到完成訂單這個過程所有細節我沒有看到

    來自廣東 回復
    1. 4.5 有購買到選擇支付的原型圖,只是訂單這塊沒有進行邏輯關聯。

      來自上海 回復
  16. 看了你的PRD,對于用戶大致了解你的東西是干什么的,對于開發只能知道各個功能但不知道個功能的具體異常的把控,所以其實可以再精簡一點,你到底要給誰看為目的

    來自浙江 回復
    1. 額,您說的其實很有道理,關于功能具體異常一開始我也想寫,但是沒有參考,越寫越沒底氣,可能看的文檔比較少吧。

      來自上海 回復
  17. 第一次就能寫這么好???之前有產品經驗嗎

    來自北京 回復
    1. 額。93年,目前在職外包公司的售前支持,沒有產品的經驗。
      Axure自學中文網,Xmind比較常用,文檔編寫看了幾個PRD的倒推就大致理解。

      來自上海 回復
    2. 我也是外包公司售前支持,兼職管理項目,你懂技術嗎

      來自湖北 回復
  18. 作為一個跪求產品崗位的小白(杭州,上海均可,快來私聊我?。谝淮螌懙暮艽植?,一定會有很多疏漏之處,請各位大佬盡量。

    來自上海 回復
    1. 你好,我還有些想法跟你聊聊能加微信么,15308646569

      來自遼寧 回復
    2. 加我備注下啊

      來自遼寧 回復
    3. 已加

      來自上海 回復
    4. 作者找到工作了嗎

      來自香港 回復
    5. 你好呀,這個原型圖能給我發一份嘛 有償 wx:zcc123456cc

      回復