PRD:寵趣,寵物用品購物社交平臺
寵趣app是一款讓用戶放心購買寵物用品的同時,還可以分享寵物相關心得經驗的平臺。本文是關于寵趣app的需求文檔,一起來看看~
1、文檔綜述
1.1 版本修訂記錄
1.2 編輯歷史
1.3 產品介紹
寵趣app是一款讓用戶放心購買寵物用品的同時,還可以分享寵物相關心得經驗的平臺。用戶可以在app中選擇寵物用品購買,在圈子中分享自己的點滴故事,在社交中結識更多類似相同趣味的好友,通過圈子——讓你了解關于寵物相關的一切。
1.4 需求整理
1.4.1 用戶需求分析
隨著越來越多人開始養寵物,對寵物用品的需求越來越大,但是對于國內寵物用品缺乏信心,對待國外用品又缺乏購物渠道,同時對于新手缺乏經驗,迫切需求一個可以學習分享的地方。
- 寵物用品缺少受信任的專屬平臺;
- 購買渠道受限;
- 不了解商品真實的用戶體驗心得;
- 需求寵物養育心得經驗;
- 欣賞其它寵物情況。
1.4.2 用戶定位
- 缺少時間和能力進行篩選寵物用品購物的消費者;
- 缺少養育經驗的新晉寵物主人;
- 愿意在網絡平臺上展示與分享的互聯網用戶;
- 追求貨真價實的消費者;
- 云養貓群體。
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 鍵盤說明
- 點擊手機號輸入框時?面底部彈出數字鍵盤;
- 點擊搜索框、編輯筆記框或評論框時?面底部彈出字母全鍵盤。
4、主要功能說明
4.1 啟動頁
頁面邏輯&交互說明:
- 用戶首次打開App,進入歡迎頁面;
- 非首次打開App進入啟動頁,一般設置為廣告頁面,對廣告頁不進行任何點擊,2s后自動進入App首頁;點擊跳過,直接進入App首頁;點擊廣告頁圖片沒有熱區的地方,進入廣告頁;點擊詳情,進入產品宣傳文章頁面。
4.2 登錄注冊
邏輯說明:
(1)注冊頁面說明
- 點擊“注冊”,用戶在注冊頁面輸入手機號碼,點擊“獲取驗證碼”按鈕;
- 若用戶在60秒內未收到手機驗證碼,點擊“獲取驗證碼”按鈕重新獲取驗證碼;
- 完成驗證登錄后完善個人信息,填寫昵稱,設置密碼,選擇性別,點擊下一步;
- 選擇自己喜歡的標簽內容,標簽至多選擇5個,完成后進入個人中心頁面;
- 除了手機號碼注冊,還能點擊“手機號注冊”頁面中“注冊”按鈕下方的“第三方注冊”,點擊后進入授權頁面,完成授權后、輸入綁定手機號,輸入發到驗證手機的驗證碼,點擊“綁定”按鈕;繼續完善個人信息,選擇個性標簽后進入個人中心頁面。
(2)登錄頁面說明
- 點擊“登錄”,用戶輸入手機號碼和密碼后進行登錄;
- 除了密碼登錄,第三方注冊用戶也可選擇第三方授權進行登錄;
- 如果在手機賬號密碼登錄時忘記密碼,可點擊頁面底部的“忘記密碼”,跳轉到“找回密碼”頁面,經過輸入手機賬號,獲取驗證碼,填寫新密碼即可重置密碼。
交互說明:
(1)注冊頁面說明
- 點擊輸入手機號、驗證碼文本框,數字鍵盤從底部彈出;
- 點擊“獲取驗證碼”按鈕,按鈕顏色降低灰度,按鈕內容變為“60s”并開始60秒倒數,60秒后按鈕內容重新變為“獲取驗證碼”,恢復原來的灰度。
- 點擊注冊按鈕出現“完善信息”頁面,點擊上傳頭像彈出手機相冊選擇照片;點擊昵稱和密碼,數字鍵盤從底部彈出;性別默認為空,選擇對應性別出現焦點圈;點擊下一步后進入標簽選擇頁,默認標簽頁為灰色,選擇標簽后為黃色,最多選擇5個,按“完成”跳轉到個人中心頁面。
(2)登錄頁面說明
- 點擊輸入手機號、密碼文本框,數字鍵盤從底部彈出;輸入密碼時可點擊右側圖標設置是否顯示密碼。
- 若手機號登錄忘記密碼,可點擊頁面底部的“忘記密碼”,進入“找回密碼”頁面,點擊輸入綁定的手機號碼,點擊“獲取驗證碼”,顯示“30s后重發”進入30s倒計時;輸入驗證碼后,點擊“下一步”重置密碼。
- 點擊登錄注冊頁面底部第三方登錄的四個按鈕,從頁面中間彈出dialog,從“取消”和“打開”中選擇,按“取消”彈窗消失,按“打開”跳轉到授權界面登錄。
4.4 商城首頁
商城主要由banner、熱賣推薦、汪食專區、喵食專區、夠用玩具、貓用玩具、免費試用、限時搶購組成,除了這些之外,還有“TOP熱賣”、 “每周上新”、 “進口寵物” 、“進口寵物”這幾個標簽的入口;
頁面交互說明:
- banner自動循環輪播,設置播放點同步banner對應狀態;
- 滑動限時搶購頁,可以向左和向右滑動,當所滑動到的區域左邊界位于起始位置時則只能向右滑動,當所滑動區域右邊界位于終點位置則只可向左滑動。
4.5 熱賣推薦與產品支付
熱賣推薦主要由編輯在一定程度上依托用戶的操作記錄加上“人氣”的篩選來進行選薦,可以根據商品人氣、價格篩選進行排序,可切換櫥窗展示。
產品支付查看產品的圖片,各種參數,以及其他說明和詳情,與客服進行聊天溝通,收藏加入購物車和支付進行購買。
頁面交互說明:
- 點擊“熱賣推薦”中的“人氣”,可以點擊設置人氣高到低排序,點擊“熱賣推薦”中的“價格”,可以點擊設置價格高到低排序,也可以設置從價格低到高排序,點擊“篩選”會從屏幕右側彈出彈出一個比屏幕小的篩選框,同時設置顯示遮罩;點擊設置“價格區間”時從底部彈出數字鍵盤,點擊“分類”等圓角矩形標簽時,圓角矩形外框和文字都設置為紅色,并在文字前顯示一個紅色的對勾,再次點擊已選中的圓角矩形則恢復原來的樣式。
- 點擊“商品詳情”,從頁面右側彈出詳情頁,商品詳情頁中的商品圖片自動循環播放。
- 點擊“客服”,從頁面左側彈出客服頁;點擊收藏后,收藏圖標閃現黃色。
- 點擊加入購物車從頁面右側彈出購物車頁。
- 點擊購買從底部往上彈出一個半屏幕大小的顯示遮罩,選中選項后邊框描黑,商品數量可以進行增減。
4.6 社區頁面
社區頁面主要包含搜索、頂部tab對應的各個界面、消息中心、發布選項。其中,頂部tab包括推薦、圈子、附近、關注除了這些,還包括了下面就對主要的頁面進行說明。
頁面交互說明:
- 消息:點擊屏幕右上角的“消息”,【消息中心】頁面從右側向左側滑入,點擊返回按鈕,【消息中心】頁面向右滑出屏幕。
- 發布:點擊發布后下拉 ,點擊對應發布選項進入對應頁面,點擊返回按鈕后發布頁面消失。
- 頂部標簽:頂部標簽點擊切換時,標簽文字設置為黑色,文字下面有一條紅線隨著標簽的切換而移動到對應的位置,作為當前頁面的標記,同時,頁面也跟著切換。
- 熱門圈子和我的圈子:可以向左和向右滑動,當所滑動到的區域左邊界位于起始位置時則只能向右滑動,當所滑動區域右邊界位于終點位置則只可向左滑動。
圈子查看與發帖
頁面交互說明:
- 點擊圖片或名稱進入圈子頁面。
- 左右滑動切換圖片。
- 圈子界面顯示發帖人、時間、評論數、點贊數。
- 帖子詳情界面顯示發帖人、內容、回帖內容。
- 點擊關注,該發言人進入關注頁面。
- 點擊收藏,該帖子收藏至“我的收藏”,在個人中心的“我的收藏”中可以查看。
- 點擊評論出行內容框評論書寫。
- 點擊發布進入帖子發布頁面填寫內容,上傳視頻圖片,點擊發布后進入圈子頁面。
4.7 購物車
頁面邏輯內容:
- 點擊商品,進入商品詳情頁,可收藏、咨詢客服、看評論以及查看商品詳情,還要選擇規格;
- 購物車頁面可編輯購物車中的商品、添加刪減商品數量;
- 點擊下單跳轉到“填寫訂單”頁面,用戶可以編輯地址、手機號碼以及查看有無可用優惠券,具體用哪張優惠券;“填寫訂單”有商品合計價格、活動優惠以及運費的信息;另外,可以勾選是否要開發票;必須同意協議才能付款。
4.7 個人中心
頁面邏輯內容:點擊點擊個人主頁,可更換頭像、昵稱和相關前面,可查看個人動態。
總結
第一次寫PRD文檔,投稿就被斃了,這次是二改了,也不知道這次能不能發出去。內容其實也很多了,邏輯順序應該沒那么差吧。
原型圖地址: ?https://2jyvat.axshare.com/#c=2 (PS:因為mac做的 分頻率不兼容的話 見諒)
本文由 @產品小白 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
感覺寫的很不錯?。∠M涣飨拢瑆x :zhiwei480766,不過我是程序猿,想開發類似功能的,不是產品經理。
你好!請問你的原型圖怎么顯示在手機框框里的呀?
做原型的時候直接在面板上價格手機框圖就好了呀
能一起交流一下嗎 vx zcc123456cc
請問是用什么錄屏軟件做的呢
點贊
請問里面的原型動圖是如何生成的呢? ??
額 我用的是錄屏 生成GIF圖的 軟件。。
好的,謝謝 ??
第一次寫就這么厲害。。。我也是產品小白,實在是佩服佩服。
額 現在在寫這個相關的MRD文檔PPT形式,也是一臉懵逼的寫。
可以加下我微信嗎,一起探討下,我是萌新,uc384807514
額額,我也是萌新 就是寫寫做做,畢竟還有本職工作呢。。
PRD不需要做成高保真的,主要思考功能邏輯,各個情況標注都還缺少的;基本只考慮操作正常情況,異常情況這些場景需要考慮周全
恩恩 因為沒有經驗 確實在異常這塊上考慮沒那么詳細。
跟我想做的一個項目很像
想問一下原型中的icons都是找的模板圖片嗎?還是有的是自己PS做的?
iocn都是在阿里巴巴上的。
注冊登錄的流程圖有不少問題
恩恩 確實欠缺考慮,如果有空的話會重新修改這個文檔
前端展示和交互固然非常重要,但是在做原型之前先梳理好后臺邏輯,才能真正實現產品落地;還有如果這是app的v1.0,建議先關注關鍵流程的實現,其他功能可以慢慢加
他趣????
只要涉及到購買就有商城,商城是一個巨大的體系,從購買到完成訂單這個過程所有細節我沒有看到
4.5 有購買到選擇支付的原型圖,只是訂單這塊沒有進行邏輯關聯。
看了你的PRD,對于用戶大致了解你的東西是干什么的,對于開發只能知道各個功能但不知道個功能的具體異常的把控,所以其實可以再精簡一點,你到底要給誰看為目的
額,您說的其實很有道理,關于功能具體異常一開始我也想寫,但是沒有參考,越寫越沒底氣,可能看的文檔比較少吧。
第一次就能寫這么好???之前有產品經驗嗎
額。93年,目前在職外包公司的售前支持,沒有產品的經驗。
Axure自學中文網,Xmind比較常用,文檔編寫看了幾個PRD的倒推就大致理解。
我也是外包公司售前支持,兼職管理項目,你懂技術嗎
作為一個跪求產品崗位的小白(杭州,上海均可,快來私聊我?。谝淮螌懙暮艽植?,一定會有很多疏漏之處,請各位大佬盡量。
你好,我還有些想法跟你聊聊能加微信么,15308646569
加我備注下啊
已加
作者找到工作了嗎
你好呀,這個原型圖能給我發一份嘛 有償 wx:zcc123456cc