PRD:倒推“網(wǎng)易嚴(yán)選”app產(chǎn)品需求文檔
通過(guò)撰寫(xiě)產(chǎn)品需求文檔(PRD),能夠鍛煉到基本的產(chǎn)品能力,同時(shí)也是提高axure操作能力的重要途徑。筆者將以網(wǎng)易嚴(yán)選app為例倒推其產(chǎn)品需求文檔,作為小白還希望大家能夠指點(diǎn)迷津,在之后的學(xué)習(xí)中不斷完善自身能力。
目錄:
一、文檔綜述
1.1 版本修訂記錄
1.2 PRD輸出環(huán)境
1.3 用戶需求分析
二、產(chǎn)品結(jié)構(gòu)圖
2.1 產(chǎn)品功能結(jié)構(gòu)圖
2.2 產(chǎn)品信息結(jié)構(gòu)圖
三、全局說(shuō)明
3.1 功能權(quán)限
3.2 鍵盤(pán)說(shuō)明
3.3 頁(yè)面內(nèi)交互
3.4 頁(yè)面異常
3.5 頁(yè)面間交互
3.6 更多操作
四、主要業(yè)務(wù)邏輯流程
4.1 登錄注冊(cè)
4.2 訂單業(yè)務(wù)
五、頁(yè)面詳細(xì)功能說(shuō)明
5.1 啟動(dòng)頁(yè)
5.2 登錄注冊(cè)
5.3 首頁(yè)
5.4 識(shí)物
5.5 分類
5.6 購(gòu)物車
六、總結(jié)
一、文檔綜述
1.1 版本修訂記錄
1.2 PRD輸出環(huán)境
1.3 用戶需求分析
1.3.1 主要用戶痛點(diǎn)
“嚴(yán)選”以及slogan“好的生活,沒(méi)那么貴?!钡莱隽擞脩舻闹饕袋c(diǎn):
- 在海量產(chǎn)品中苦于挑選性價(jià)比高的生活類商品
- 注重高品質(zhì)生活但收入有限
1.3.2 需求匯總
二、產(chǎn)品結(jié)構(gòu)圖
2.1 產(chǎn)品功能結(jié)構(gòu)圖
(由于信息量較大,可右鍵點(diǎn)擊“在新標(biāo)簽頁(yè)中打開(kāi)圖片”查看大圖)
2.2 產(chǎn)品信息結(jié)構(gòu)圖
三、全局說(shuō)明
3.1 功能權(quán)限
功能權(quán)限分為登錄/未登錄兩個(gè)狀態(tài)。
(1)登錄:登錄狀態(tài)下可進(jìn)行app內(nèi)所有操作
(2)未登錄:
- 未登錄狀態(tài)可以搜索商品、查看商品詳情、加入購(gòu)物車、換購(gòu)商品、商品分享、查找供應(yīng)商以及供應(yīng)商提供的商品、查看眾籌詳情頁(yè)、眾籌詳情頁(yè)分享、看各類推薦;
- 但是無(wú)法查看消息、簽到、邀請(qǐng)返利、打開(kāi)會(huì)員俱樂(lè)部、支持眾籌項(xiàng)目、查看我的福利、參與評(píng)論、領(lǐng)取優(yōu)惠券、下單、打開(kāi)個(gè)人tab這些需要個(gè)人賬號(hào)信息的功能。
3.2 鍵盤(pán)說(shuō)明
(1)點(diǎn)擊輸入手機(jī)號(hào)碼、手機(jī)驗(yàn)證碼時(shí)從頁(yè)面底部彈出數(shù)字鍵盤(pán);
(2) 點(diǎn)擊輸入其他內(nèi)容時(shí)從頁(yè)面底部彈出字母鍵盤(pán)。
3.3 頁(yè)面內(nèi)交互
(1)頂部彈窗與底部彈窗
(2)toast彈窗與snackbar彈窗
(3)dialog彈窗
3.4 頁(yè)面異常
3.5 頁(yè)面間交互
3.6 更多操作
四、主要業(yè)務(wù)邏輯流程
4.1 登錄注冊(cè)
4.2 訂單業(yè)務(wù)
五、頁(yè)面詳細(xì)功能說(shuō)明
5.1 啟動(dòng)頁(yè)
頁(yè)面邏輯&交互說(shuō)明:
- 啟動(dòng)網(wǎng)易嚴(yán)選app后,進(jìn)入歡迎頁(yè)(頁(yè)面①),歡迎頁(yè)等待2秒后進(jìn)入廣告頁(yè)(頁(yè)面②);
- 廣告頁(yè)不做任何操作等待3秒,進(jìn)入app首頁(yè);
- 點(diǎn)擊廣告頁(yè)圖片立即進(jìn)入廣告詳情頁(yè),廣告詳情頁(yè)可在右上角點(diǎn)擊收藏和分享,在廣告詳情頁(yè)點(diǎn)擊返回進(jìn)入app首頁(yè)。
5.2 登錄注冊(cè)
觸發(fā)條件:
- 用戶第一次使用網(wǎng)易嚴(yán)選;
- 游客用戶執(zhí)行如購(gòu)買、評(píng)論、收藏、與客服溝通、點(diǎn)擊個(gè)人賬號(hào)模塊、個(gè)人消息、簽到、領(lǐng)取禮品等需要用戶賬號(hào)信息的操作;
- 退出賬號(hào)/登錄新賬號(hào)。
5.2.1 登錄
(1)頁(yè)面邏輯內(nèi)容
- 點(diǎn)擊“手機(jī)號(hào)登錄”,用戶輸入手機(jī)號(hào)碼,點(diǎn)擊“獲取驗(yàn)證碼”按鈕;
- 若用戶在60秒內(nèi)未收到手機(jī)驗(yàn)證碼,點(diǎn)擊“獲取驗(yàn)證碼”按鈕重新獲取驗(yàn)證碼;
- 除了驗(yàn)證碼登錄,老用戶也可選擇手機(jī)號(hào)碼&密碼或者郵箱賬號(hào)&密碼兩種方式登錄;
- 如果在郵箱賬號(hào)密碼登錄時(shí)忘記密碼,可點(diǎn)擊頁(yè)面底部的“忘記密碼”,跳轉(zhuǎn)到“找回密碼”頁(yè)面,經(jīng)過(guò)輸入郵箱賬號(hào),拖動(dòng)滑塊驗(yàn)證,以及安全驗(yàn)證之后即可重置密碼;
- 用戶也可以點(diǎn)擊總登錄注冊(cè)頁(yè)面底部第三方登錄的四個(gè)按鈕進(jìn)行授權(quán)登錄。
(2)頁(yè)面交互說(shuō)明
- 點(diǎn)擊輸入手機(jī)號(hào)、驗(yàn)證碼文本框,數(shù)字鍵盤(pán)從底部彈出;點(diǎn)擊輸入郵箱賬號(hào)、輸入密碼文本框,字母鍵盤(pán)從底部彈出,輸入密碼時(shí)可點(diǎn)擊右側(cè)圖標(biāo)設(shè)置是否顯示密碼。
- 點(diǎn)擊“獲取驗(yàn)證碼”按鈕,按鈕顏色降低灰度,按鈕內(nèi)容變?yōu)椤?0s”并開(kāi)始60秒倒數(shù),60秒后按鈕內(nèi)容重新變?yōu)椤矮@取驗(yàn)證碼”,恢復(fù)原來(lái)的灰度。
- 若郵箱登錄忘記密碼,可點(diǎn)擊頁(yè)面底部的“忘記密碼”,進(jìn)入“找回密碼”頁(yè)面,點(diǎn)擊輸入郵箱賬號(hào),輸入框下方有列表顯示各個(gè)網(wǎng)易系后綴郵箱供選擇,點(diǎn)擊“下一步”,再次輸入郵箱賬號(hào),拖動(dòng)灰色滑塊,拖動(dòng)完成拼圖后,滑塊改變狀態(tài)呈現(xiàn)反饋,點(diǎn)擊“下一步”,進(jìn)入“安全驗(yàn)證”頁(yè)面,輸入綁定郵箱的手機(jī)號(hào)碼,點(diǎn)擊“獲取驗(yàn)證碼”,顯示“30s后重發(fā)”進(jìn)入30s倒計(jì)時(shí),輸入驗(yàn)證碼后,點(diǎn)擊“下一步”重置密碼。
- 點(diǎn)擊總登錄注冊(cè)頁(yè)面底部第三方登錄的四個(gè)按鈕,從頁(yè)面中間彈出dialog,從“取消”和“打開(kāi)”中選擇,按“取消”彈窗消失,按“打開(kāi)”跳轉(zhuǎn)到授權(quán)界面登錄,按網(wǎng)易的“企業(yè)郵”則直接從右側(cè)彈出“企業(yè)郵登錄”頁(yè)面,無(wú)需彈出dialog選擇,同時(shí)從底部彈出字母鍵盤(pán)。
5.2.2 注冊(cè)
(1)頁(yè)面邏輯內(nèi)容
- 點(diǎn)擊“手機(jī)號(hào)快捷注冊(cè)”,用戶在注冊(cè)頁(yè)面輸入手機(jī)號(hào)碼,此后是驗(yàn)證碼的獲取問(wèn)題,與登錄一樣就不贅述了;
- 填寫(xiě)好手機(jī)號(hào)并輸入驗(yàn)證碼,繼設(shè)置密碼之后,點(diǎn)擊“注冊(cè)”按鈕即可完成注冊(cè);
- 除了手機(jī)號(hào)碼注冊(cè),還能點(diǎn)擊“手機(jī)號(hào)注冊(cè)”頁(yè)面中“注冊(cè)”按鈕下方的“郵箱賬號(hào)注冊(cè)”,點(diǎn)擊后進(jìn)入郵箱注冊(cè)頁(yè)面,輸入郵箱賬號(hào)、輸入驗(yàn)證手機(jī)號(hào),再點(diǎn)擊下方的“請(qǐng)依次點(diǎn)擊a、b、c”(a、b、c 分別為不同的三個(gè)漢字)按鈕,彈出圖片驗(yàn)證,依次正確點(diǎn)擊漢字即可完成驗(yàn)證;完成驗(yàn)證后點(diǎn)擊“下一步”按鈕,輸入發(fā)到驗(yàn)證手機(jī)的驗(yàn)證碼,繼設(shè)置密碼之后,點(diǎn)擊“注冊(cè)”按鈕即可完成注冊(cè);
- 所有登錄頁(yè)面的右上角均有“注冊(cè)”按鈕,點(diǎn)擊即可進(jìn)入“手機(jī)號(hào)注冊(cè)“頁(yè)面。
(2)頁(yè)面交互說(shuō)明
- 用戶點(diǎn)擊輸入手機(jī)號(hào)、驗(yàn)證碼文本框,數(shù)字鍵盤(pán)從底部彈出;點(diǎn)擊輸入郵箱賬號(hào)設(shè)置密碼文本框,字母鍵盤(pán)從底部彈出;
- 驗(yàn)證碼交互效果與登錄一致;
- 郵箱注冊(cè)頁(yè)面輸入郵箱號(hào)、驗(yàn)證手機(jī)號(hào)并依次點(diǎn)擊文字驗(yàn)證之后,文字驗(yàn)證按鈕的文本變?yōu)椤膀?yàn)證成功”,跳轉(zhuǎn)到另一頁(yè)面,輸入短信驗(yàn),驗(yàn)證碼倒數(shù)30秒,填入驗(yàn)證碼設(shè)置完密碼之后,點(diǎn)擊“注冊(cè)”按鈕即可完成注冊(cè)。
5.3 首頁(yè)
首頁(yè)主要包含搜索、頂部tab對(duì)應(yīng)的各個(gè)界面、消息中心、簽到積分中心、會(huì)員俱樂(lè)部。其中,頂部tab包括推薦、新品、眾籌、福利社、限時(shí)購(gòu)、居家、鞋包配飾、服裝、電器、洗護(hù)、飲食、餐廚、嬰童、文體和特色區(qū),除了這些,還包括了下面就對(duì)主要的頁(yè)面進(jìn)行說(shuō)明。
首頁(yè)交互說(shuō)明:
- 消息:點(diǎn)擊屏幕右上角的“消息”,【消息中心】頁(yè)面從右側(cè)向左側(cè)滑入,點(diǎn)擊返回按鈕,【消息中心】頁(yè)面向右滑出屏幕;
- 頂部標(biāo)簽:頂部標(biāo)簽點(diǎn)擊切換時(shí),標(biāo)簽文字設(shè)置為紅色,文字下面有一條紅線隨著標(biāo)簽的切換而移動(dòng)到對(duì)應(yīng)的位置,作為當(dāng)前頁(yè)面的標(biāo)記,同時(shí),頁(yè)面也跟著切換;另外,頂部標(biāo)簽支持水平滾動(dòng)查看后面被遮擋的標(biāo)簽,方便快速切換;
- 全部頻道的展開(kāi)與收起:在頂部標(biāo)簽的最右側(cè)有個(gè)“展開(kāi)圖標(biāo)“,點(diǎn)擊之后“全部頻道”從頂部向下滑入,同時(shí)頁(yè)面顯示遮罩;“全部頻道”上的圓角矩形標(biāo)簽會(huì)以當(dāng)前頁(yè)面為根據(jù),此時(shí)處于哪個(gè)頁(yè)面,對(duì)應(yīng)的圓角矩形標(biāo)簽文字和邊框都設(shè)置為紅色,點(diǎn)擊圓角矩形標(biāo)簽也可切換到相應(yīng)的頁(yè)面;點(diǎn)擊“收起圖標(biāo)”,“全部頻道”向上滑動(dòng)消失,同時(shí)遮罩消失。
5.3.1 搜索
(1)頁(yè)面邏輯內(nèi)容
- 搜索頁(yè)面包含文本框搜索,歷史記錄和熱門(mén)搜索;
- 在搜索文本框輸入信息進(jìn)行搜索,在搜索的過(guò)程中搜索列表會(huì)有相關(guān)搜索詞供選擇,搜索成功之后進(jìn)入對(duì)應(yīng)的的商品呈現(xiàn)界面;
- 歷史搜索記錄會(huì)被記錄在搜索界面搜索框下面,記錄會(huì)按照時(shí)間先后排序,后搜索的排在前面;
- 歷史記錄下面還有熱門(mén)搜索,包含了活動(dòng)、還有某類熱搜商品提供給用戶選擇參考。
(2)頁(yè)面交互說(shuō)明
- 點(diǎn)擊搜索文本框,“掃一掃”和“消息”從兩側(cè)滑出,搜索文本框和搜索框后面的背景長(zhǎng)度以后側(cè)為錨點(diǎn)向左側(cè)變長(zhǎng),搜索icon移動(dòng)至對(duì)應(yīng)的位置;
- 進(jìn)入搜索頁(yè)面,文本“取消”從右側(cè)滑入屏幕,搜索文本框提示文字消失(app內(nèi)為隨機(jī)提示內(nèi)容),歷史記錄與熱門(mén)搜索界面和鍵盤(pán)從底部向上滑出;
- 點(diǎn)擊“取消”,以上步驟倒退;
- 歷史記錄可點(diǎn)擊垃圾桶icon刪除記錄;
- 在搜索文本框輸入文字,會(huì)顯示列表承載相關(guān)的關(guān)鍵詞,點(diǎn)擊關(guān)鍵詞進(jìn)入到商品成列界面,文本框以及文本框背景以左側(cè)為錨點(diǎn)向右側(cè)變長(zhǎng),“取消”向右滑出;
- 點(diǎn)擊熱門(mén)搜索各個(gè)板塊,對(duì)應(yīng)的活動(dòng)界面從右側(cè)向左側(cè)滑入,普通的商品熱搜界面則直接顯示。
5.3.2 推薦
(1)頁(yè)面邏輯內(nèi)容
- 推薦主要由banner、私人訂制、人氣推薦、品牌制造商直供、嚴(yán)選一起拼、猜你喜歡、積分中心、會(huì)員俱樂(lè)部組成,除了這些之外,還有“新品”、 “眾籌”、 “福利社” 、“限時(shí)購(gòu)” 以及“識(shí)物”這幾個(gè)標(biāo)簽的入口;
- 【私人訂制】和【猜你喜歡】都是根據(jù)用戶的搜索數(shù)據(jù)、瀏覽記錄以及加入購(gòu)物車等用戶行為,系統(tǒng)綜合分析為用戶推薦商品,而“私人訂制”相對(duì)于“猜你喜歡”來(lái)說(shuō),最主要的區(qū)別在于私人訂制會(huì)根據(jù)你的操作記錄,進(jìn)行實(shí)時(shí)的篩選,如果有記錄的更新,刷新頁(yè)面時(shí),“私人訂制”則會(huì)更換商品,更具有“實(shí)時(shí)性”,而“猜你喜歡”所推薦的商品較多,更新的周期更長(zhǎng);
- “人氣推薦”包括編輯選薦、24小時(shí)熱銷、人氣周榜、熱銷總榜,其中,編輯選薦在一定程度上依托用戶的操作記錄加上“人氣”的篩選來(lái)進(jìn)行選薦;
- “品牌制造商直供”會(huì)推薦四個(gè)制造商,點(diǎn)擊進(jìn)入制造商詳情頁(yè),內(nèi)容包括制造商名稱、制造商描述、制造商所制造的商品以及可以設(shè)置上新提醒,制造商的所有商品提供算法的篩選,包括上新的時(shí)間、價(jià)格、以及分類;
- “嚴(yán)選一起拼”,點(diǎn)擊進(jìn)入拼團(tuán)頁(yè)面,頁(yè)面包括拼團(tuán)商品以及我的拼團(tuán)兩個(gè)tab,點(diǎn)擊拼團(tuán)商品進(jìn)入商品的拼團(tuán)詳情頁(yè),拼團(tuán)詳情頁(yè)包括商品圖片、商品名稱、拼團(tuán)價(jià)、原價(jià)、商品規(guī)格、成團(tuán)剩余人數(shù)、商品詳情;
- 點(diǎn)擊推薦頁(yè)右側(cè)靠上的“簽到”可進(jìn)入【積分中心】,積分中心主要包含當(dāng)前可用積分、一周簽到情況、賺積分、積分商品,一周簽到滿7天有好禮贈(zèng)送,查看全部積分商品頁(yè)面可按積分區(qū)間進(jìn)行篩選兌換,分為0-999、1000-2999、3000-5999、6000-9999、10000以上幾個(gè)區(qū)間;
- 點(diǎn)擊“會(huì)員俱樂(lè)部”進(jìn)入相應(yīng)頁(yè)面,其主要包含用戶賬號(hào)頭像、會(huì)員等級(jí)、我的積分、會(huì)員專享特權(quán)、升級(jí)會(huì)員、開(kāi)通超級(jí)會(huì)員、會(huì)員頭條、每月禮券(每月3日更新)、會(huì)員年購(gòu)服務(wù)、會(huì)員日(每個(gè)月注冊(cè)會(huì)員的日期有會(huì)員專享福利)以及更多優(yōu)惠。
(2)頁(yè)面交互說(shuō)明
- banner自動(dòng)循環(huán)輪播,設(shè)置播放點(diǎn)同步banner對(duì)應(yīng)狀態(tài);
- 滾動(dòng)推薦頁(yè),當(dāng)所滾動(dòng)到的區(qū)域大于等于一個(gè)屏幕的長(zhǎng)度時(shí),“簽到”圖標(biāo),向右滑出消失;若在已超出一個(gè)屏幕的長(zhǎng)度的情況下滾動(dòng)回頂部,當(dāng)滾動(dòng)回小于一個(gè)屏幕長(zhǎng)度的區(qū)域時(shí),“簽到”圖標(biāo)向左滑進(jìn);
- 點(diǎn)擊推薦頁(yè)右側(cè)偏上的“簽到”圖標(biāo),【積分中心】頁(yè)面從屏幕右側(cè)滑入,“積分中心”中的簽到情況可以收起也可展開(kāi),點(diǎn)擊“收起”,簽到情況以下的內(nèi)容(以下叫遮蓋)向上滑動(dòng)遮住簽到情況,同時(shí)顯示“今日簽到得1積分”(即點(diǎn)擊展開(kāi)區(qū)域),點(diǎn)擊它,遮蓋向下滑動(dòng),呈現(xiàn)簽到情況,同時(shí),點(diǎn)擊展開(kāi)區(qū)域隱藏消失;
- 在推薦頁(yè)點(diǎn)擊其他標(biāo)簽的入口,可進(jìn)入首頁(yè)中其他部分頁(yè)面,如點(diǎn)擊“新品首發(fā)”跳轉(zhuǎn)到【新品】頁(yè)面,點(diǎn)擊“限時(shí)購(gòu)”跳轉(zhuǎn)到【限時(shí)購(gòu)】頁(yè)面,點(diǎn)擊“福利社”、“最新眾籌”分別跳轉(zhuǎn)到【福利社】、【眾籌】頁(yè)面,另外,點(diǎn)擊“嚴(yán)選一起拼”跳轉(zhuǎn)到【嚴(yán)選拼團(tuán)】頁(yè)面。
5.3.3 新品
(1)頁(yè)面邏輯結(jié)構(gòu)
- “新品”tab包含了限時(shí)嘗鮮、推薦關(guān)注、本期新品、新品放映室、新品預(yù)告;
- 限時(shí)嘗鮮除了有基本的商品信息,還需標(biāo)注今日價(jià)、明日價(jià)、原價(jià),并且依次遞增,點(diǎn)擊立即搶購(gòu)進(jìn)入商品詳情頁(yè);
- 本期新品較多,點(diǎn)擊“篩選”可以根據(jù)價(jià)格區(qū)間、分類、制造商等進(jìn)行篩選;
- 新品放映室通過(guò)期刊的方式呈現(xiàn),點(diǎn)擊期刊進(jìn)入可查看這一期期刊的新品推薦介紹;
- 點(diǎn)擊推薦關(guān)注和新品預(yù)告下的商品直接進(jìn)入商品詳情頁(yè),在新品預(yù)告商品的詳情頁(yè)底部點(diǎn)擊“上架”提醒,輸入信息之后,會(huì)在上架的時(shí)候提醒用戶。
(2)頁(yè)面交互說(shuō)明
- banner自動(dòng)循環(huán)輪播;
- 點(diǎn)擊“本期新品”中的“價(jià)格”,可以點(diǎn)擊設(shè)置價(jià)格高到低排序,也可以設(shè)置從價(jià)格低到高排序,點(diǎn)擊“篩選”會(huì)從屏幕右側(cè)彈出彈出一個(gè)比屏幕小的篩選框,同時(shí)設(shè)置顯示遮罩;點(diǎn)擊設(shè)置“價(jià)格區(qū)間”時(shí)從底部彈出數(shù)字鍵盤(pán),點(diǎn)擊“分類”和“制造商”等圓角矩形標(biāo)簽時(shí),圓角矩形外框和文字都設(shè)置為紅色,并在文字前顯示一個(gè)紅色的對(duì)勾,再次點(diǎn)擊已選中的圓角矩形則恢復(fù)原來(lái)的樣式;最多能選擇5個(gè)分類和5個(gè)制造商,超過(guò)5個(gè)會(huì)以toast的方式提醒用戶;點(diǎn)擊遮罩,篩選框向右滑出消失;
- 新品放映室的期刊以圖片的方式橫向排列,最新一期最靠近屏幕左端,向右滾動(dòng)可查看往期,點(diǎn)擊圖片,期刊頁(yè)面從右側(cè)滑入。
5.3.4 眾籌
(1)頁(yè)面邏輯內(nèi)容
- 眾籌頁(yè)面包含正在眾籌的項(xiàng)目、眾籌結(jié)束的項(xiàng)目?jī)纱蟛糠郑?/li>
- “正在眾籌”中,有項(xiàng)目的基本信息,點(diǎn)擊“支持項(xiàng)目”進(jìn)入眾籌詳情頁(yè);點(diǎn)擊“眾籌結(jié)束”項(xiàng)目中的“了解項(xiàng)目”也可進(jìn)入結(jié)束項(xiàng)目的眾籌詳情頁(yè);
- 眾籌詳情頁(yè)包含商品圖片名稱、商品描述、已籌金額、項(xiàng)目進(jìn)度、目標(biāo)金額、支持人數(shù)、剩余時(shí)間、眾籌檔位的選擇和商品詳情;點(diǎn)擊底部“我要支持”參與項(xiàng)目眾籌,點(diǎn)擊“關(guān)注”關(guān)注項(xiàng)目,所關(guān)注的項(xiàng)目可在【個(gè)人】tab里的“眾籌訂單”進(jìn)行查看。
(2)頁(yè)面交互說(shuō)明
- banner自動(dòng)循環(huán)輪播;
- 點(diǎn)擊“支持項(xiàng)目”,從頁(yè)面右側(cè)彈出眾籌詳情頁(yè),眾籌詳情頁(yè)中的商品圖片自動(dòng)循環(huán)播放;
- 在眾籌詳情頁(yè)底部點(diǎn)擊“我要支持”,跳轉(zhuǎn)到檔位選擇和項(xiàng)目的基本信息頁(yè),再點(diǎn)擊“支持”,從底部彈出商品規(guī)格選擇彈窗,點(diǎn)擊右上角的關(guān)閉按鈕或點(diǎn)擊遮罩,規(guī)格選擇彈窗向下滑動(dòng)消失,遮罩消失。
5.3.5 福利社
(1)頁(yè)面邏輯內(nèi)容
- 福利社包含領(lǐng)券中心、今日折扣、量販組合、我的福利四大塊;
- 領(lǐng)券中心中,券的信息包括券名、適用條件、有效期,如果是“編輯精選券”中的券則顯示搶券的進(jìn)度;點(diǎn)擊立即領(lǐng)取,添加到【個(gè)人】的“優(yōu)惠券”中;
- 點(diǎn)擊頂部櫥窗式廣告圖進(jìn)入廣告專題頁(yè)面。
(2)頁(yè)面交互說(shuō)明
- 點(diǎn)擊“編輯精選券”中優(yōu)惠券的“立即領(lǐng)取”,彈出toast“領(lǐng)取成功”、“立即領(lǐng)取”矩形中的文字變?yōu)椤傲⒓词褂谩鼻覟榘椎准t邊紅字的樣式,toast停留2000毫秒后逐漸消失;
- 當(dāng)頁(yè)面滾動(dòng)超過(guò)屏幕一定長(zhǎng)度(半屏以內(nèi))時(shí),會(huì)顯示便捷標(biāo)簽切換欄并固定于福利社頁(yè)面頂部;繼續(xù)往下滾動(dòng),當(dāng)滾動(dòng)到不同的內(nèi)容區(qū)域時(shí),便捷標(biāo)簽切換欄會(huì)自行切換到對(duì)應(yīng)到狀態(tài);點(diǎn)擊便捷標(biāo)簽切換欄也會(huì)滾動(dòng)的相應(yīng)的位置;
- 點(diǎn)擊“量販囤貨”中的購(gòu)物車圖標(biāo),逐漸顯現(xiàn)規(guī)格選擇彈窗,同時(shí)遮罩遮住底下頁(yè)面,點(diǎn)擊規(guī)格選擇彈窗右上角的關(guān)閉按鈕,彈窗和遮罩逐漸消失。
5.3.6 限時(shí)購(gòu)
(1)頁(yè)面邏輯結(jié)構(gòu)
- 廣告圖下有一個(gè)橫條,橫條中的每個(gè)格子標(biāo)注著時(shí)間以及搶購(gòu)狀態(tài),從左到右搶購(gòu)的時(shí)段依次推后,點(diǎn)擊不同時(shí)段可以查看不同時(shí)段場(chǎng)次的搶購(gòu)商品,若商品還有剩余則可繼續(xù)搶,若已搶完會(huì)在商品圖片上顯示“已搶完”,還可查看該商品的詳情;
- 橫條中的時(shí)段分為“已開(kāi)搶”“搶購(gòu)中”和“即將開(kāi)始”三個(gè)大時(shí)段,點(diǎn)擊“即將開(kāi)始”的時(shí)段,在頁(yè)面中,點(diǎn)擊“開(kāi)搶提醒”后輸入手機(jī)號(hào)碼,系統(tǒng)會(huì)在該時(shí)間段開(kāi)始前一段時(shí)間通知用戶;
- 點(diǎn)擊頁(yè)面底部的“查看全部限時(shí)特價(jià)”,跳轉(zhuǎn)到“今日特價(jià)”頁(yè)面,查看當(dāng)日的限時(shí)特價(jià)商品。
(2)頁(yè)面交互說(shuō)明
- 點(diǎn)擊橫條中的不同時(shí)段,時(shí)段標(biāo)簽的樣式變?yōu)槌鹊装鬃?,移?dòng)橫條,使所點(diǎn)擊的標(biāo)簽在屏幕居中,并且切換到相應(yīng)的搶購(gòu)商品頁(yè)面;
- 點(diǎn)擊“即將開(kāi)始”時(shí)段中的“開(kāi)搶提醒”,顯示出一個(gè)dialog,伴隨著遮罩,dialog中默認(rèn)填寫(xiě)了注冊(cè)賬號(hào)所用的手機(jī)號(hào)碼,中間四位以*顯示;輸入好手機(jī)號(hào)碼后點(diǎn)擊“確定”即可設(shè)定開(kāi)搶前提醒,點(diǎn)擊“取消”或遮罩,dialog和遮罩消失。
5.4 識(shí)物
(1)頁(yè)面邏輯內(nèi)容
- 【識(shí)物】頁(yè)面包含了幾大推薦,分別是嚴(yán)選推薦、丁磊的好貨推薦、挑款師推薦、嚴(yán)選HOME、嚴(yán)選LOOK、新品放映室、口碑商品、特色系列以及十點(diǎn)一刻,這些推薦都是以文章的形式呈現(xiàn),點(diǎn)擊進(jìn)去會(huì)有一些專題或者單品的推薦文章;
- 推薦商品的文章可轉(zhuǎn)發(fā)、收藏以及評(píng)論,在“十點(diǎn)一刻”的話題中,評(píng)論可按照熱度以及時(shí)間向后來(lái)排序呈現(xiàn),另外還可點(diǎn)擊“關(guān)注”關(guān)注該話題。
(2)頁(yè)面交互說(shuō)明
- 頂部櫥窗展示,設(shè)置自動(dòng)循環(huán)播放以及拖動(dòng)效果;
- 推薦欄設(shè)置拖動(dòng),向右拖動(dòng)結(jié)束時(shí),若推薦欄的最左側(cè)離開(kāi)了屏幕左側(cè),則移動(dòng)回屏幕的左側(cè)。同理,向左拖動(dòng)結(jié)束時(shí),若推薦欄的最右側(cè)離開(kāi)了屏幕的右側(cè),則移動(dòng)回屏幕的右側(cè);
- “十點(diǎn)一刻”中的話題欄跟推薦欄的交互動(dòng)作一樣;
- 點(diǎn)擊推薦文章或者話題,文章頁(yè)面以及話題頁(yè)面從右側(cè)滑入。
5.5 分類
(1)頁(yè)面邏輯內(nèi)容
- 分類包含了推薦專區(qū)、爆品區(qū)、夏季專區(qū)、特色區(qū)以及多個(gè)生活用品細(xì)分種類,其中,推薦專區(qū)、爆品區(qū)、夏季專區(qū)頁(yè)面的頂部是廣告圖片,而生活用品細(xì)分種類頁(yè)面的頂部則是該類別的24小時(shí)熱銷榜;
- 每個(gè)細(xì)分類別的詳細(xì)頁(yè)面,還有更細(xì)分的模塊,如居家里的“夏涼”“床品件套”等再細(xì)分類別;
- 分類頁(yè)面提供搜索入口。
(2)頁(yè)面交互說(shuō)明
- 搜索的交互與主頁(yè)幾乎一樣,少了“掃一掃”與“消息”的顯示和隱藏,大致就是點(diǎn)擊搜索文本框,移動(dòng)搜索icon到一定位置,改變搜索背景和搜索文本框的尺寸,“取消”從右側(cè)滑入,搜索頁(yè)面以及鍵盤(pán)向上滑動(dòng)顯示;點(diǎn)擊“取消”,搜索icon回到原來(lái)的位置,搜索背景以及搜索文本框的尺寸也恢復(fù)原樣,搜索頁(yè)面和鍵盤(pán)向下滑動(dòng)消失;
- 點(diǎn)擊左邊的分類標(biāo)簽,文字變?yōu)榧t色,小紅條移動(dòng)到對(duì)應(yīng)位置,同時(shí)右邊呈現(xiàn)對(duì)應(yīng)頁(yè)面;由于側(cè)邊標(biāo)簽的內(nèi)容顯示區(qū)域有限,點(diǎn)擊“爆品區(qū)”時(shí),移動(dòng)側(cè)邊標(biāo)簽到能看到“推薦專區(qū)”的位置(側(cè)邊欄原來(lái)的位置),點(diǎn)擊“文體”時(shí),移動(dòng)側(cè)邊標(biāo)簽到能看到“特色區(qū)”的位置(相對(duì)于原來(lái)的位置上移一定距離)。
5.6 購(gòu)物車
(1)頁(yè)面邏輯內(nèi)容
- 點(diǎn)擊商品,進(jìn)入商品詳情頁(yè),可收藏、咨詢客服、看評(píng)論以及查看商品詳情,還要選擇規(guī)格;
- 在購(gòu)物車頁(yè)面選中商品,判斷是否滿足“免郵”條件以及“全場(chǎng)加價(jià)購(gòu)”條件,若滿足則在對(duì)應(yīng)的地方顯示反饋,如果滿足“全場(chǎng)加價(jià)購(gòu)”,會(huì)提供一個(gè)換購(gòu)的入口;
- 購(gòu)物車頁(yè)面可領(lǐng)優(yōu)惠券、編輯購(gòu)物車中的商品、添加刪減商品數(shù)量;
- 點(diǎn)擊下單跳轉(zhuǎn)到“填寫(xiě)訂單”頁(yè)面,用戶可以編輯地址、手機(jī)號(hào)碼以及查看有無(wú)可用優(yōu)惠券、具體用哪張優(yōu)惠券;“填寫(xiě)訂單”有商品合計(jì)價(jià)格、活動(dòng)優(yōu)惠以及運(yùn)費(fèi)的信息;另外,可以勾選是否要開(kāi)發(fā)票;必須同意協(xié)議才能付款。
(2)頁(yè)面交互說(shuō)明(部分交互)
- 點(diǎn)擊勾選商品的“白色圓圈”,圓圈上會(huì)顯示紅色的勾選圈,下面全選旁邊的白色圓圈同樣也會(huì)顯示紅色的勾選圈;“全選”字眼變?yōu)椤耙堰x(n)” n代表購(gòu)買數(shù)量,總價(jià)格通過(guò)單價(jià)*數(shù)量的算法算出并顯示在“下單”左邊,“下單”矩形填充紅色;
- 點(diǎn)擊“白色圓圈”時(shí),需判斷是否滿足“免郵”條件以及“全場(chǎng)加價(jià)購(gòu)”條件,若滿足則在對(duì)應(yīng)的位置顯示滿足的反饋;
- 點(diǎn)擊“紅色勾選圈”,紅色勾選圈消失,設(shè)置文字,“已選(n)”變回原來(lái)的“全選”,總價(jià)格設(shè)置文字為0,“下單”恢復(fù)回原來(lái)的樣式(灰色底);
- 點(diǎn)擊商品右邊的加減號(hào),設(shè)置算法,文本框中的數(shù)字會(huì)根據(jù)加減而改動(dòng),同時(shí),總價(jià)格也會(huì)以單價(jià)*數(shù)量=總價(jià)格的算法同步數(shù)據(jù),按減號(hào)時(shí),文本框中的數(shù)字不能小于1;
- 點(diǎn)擊右上角“領(lǐng)券”,“優(yōu)惠券”彈窗向上滑動(dòng)顯示,點(diǎn)擊領(lǐng)取,以toast顯示“領(lǐng)取成功”,停留一段時(shí)間后消失,點(diǎn)擊下拉按鈕可查看購(gòu)物車中適用該優(yōu)惠券的商品;點(diǎn)擊彈窗右上角的X或遮罩,“優(yōu)惠券”彈窗向下滑出,同時(shí)遮罩消失。
六、總結(jié)
嚴(yán)選作為一個(gè)購(gòu)物商城,它的信息以及功能框架都非常龐大,用戶操作界面眾多,交互動(dòng)作繁瑣復(fù)雜,我在這里也只是根據(jù)現(xiàn)有的網(wǎng)易嚴(yán)選app進(jìn)行文檔倒推,對(duì)主要業(yè)務(wù)流程、主要窗口的頁(yè)面邏輯以及交互進(jìn)行簡(jiǎn)要分析和說(shuō)明。
目前筆者也只是在很新手的階段,在撰寫(xiě)文檔的過(guò)程中難免會(huì)有一些不足之處,希望大家能指出錯(cuò)誤或者改進(jìn)的建議,在以后的學(xué)習(xí)中會(huì)加以注意和改善。
本文由 @?方大仁 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖作者提供
請(qǐng)問(wèn)文檔中的交互動(dòng)畫(huà)怎么實(shí)現(xiàn)的?
文檔比較注重交互說(shuō)明,但是產(chǎn)品經(jīng)理更重要的是邏輯,有部分邏輯沒(méi)有完全說(shuō)清楚,交互也太細(xì)了,如果設(shè)計(jì)師到時(shí)候改你的交互呢?
說(shuō)的對(duì)。我是建議產(chǎn)品剛策劃的時(shí)候不要做動(dòng)態(tài)的交互,變方案的時(shí)候改來(lái)改去真的很麻煩。產(chǎn)品經(jīng)理前期要注重產(chǎn)品的策略和邏輯,交互上需要快速表達(dá),用文字足矣。
這樣復(fù)雜的prd真的可以指導(dǎo)開(kāi)發(fā)進(jìn)行工作么?看得出很用心,但是與其大而全,不如仔細(xì)分析一下其中幾點(diǎn)進(jìn)行抒寫(xiě)
門(mén)外漢看里子,只能看的到是表面。
作者很用心,做這個(gè)很花時(shí)間,記錄界面的交互,遺憾的是僅是表面的交互,數(shù)據(jù)的流轉(zhuǎn),規(guī)則的梳理,邏輯的處理,可能更有參考意義
按第二個(gè)流程圖,是付款成功減庫(kù)存嗎?這樣體驗(yàn)不是很好,有可能存在付款成功卻提示沒(méi)有貨的情況,網(wǎng)易應(yīng)該不是這樣的吧,一般都是下單成功扣減庫(kù)存
我也想說(shuō)這點(diǎn) 作者應(yīng)該對(duì)電商wms不太了解
注冊(cè)為什么不一開(kāi)始就識(shí)別是否存在賬號(hào),做一大堆之后才告訴用戶;還有登錄也沒(méi)有不存在用戶的情況
挺贊的,愿意花時(shí)間做這個(gè)梳理就不錯(cuò)
不過(guò)方向上,還是先從細(xì)節(jié)功能來(lái),功能鋪開(kāi)太大了寫(xiě)不詳細(xì)。剛?cè)腴T(mén)產(chǎn)品經(jīng)理,是要做執(zhí)行的,需要把PRD寫(xiě)到能落地的地步,那就要求各方面都考慮得更細(xì)致一些
這原型用什么做的?axure?
交互,頁(yè)面的元素及效果描述的比較清楚,作為新手值得鼓勵(lì);
像電商平臺(tái)這種業(yè)務(wù)場(chǎng)景和邏輯比較復(fù)雜的產(chǎn)品,不是就這么幾p的文檔可以描述清楚的,建議先從某些功能點(diǎn)開(kāi)始,例如登錄注冊(cè)流程,購(gòu)物車交易流程等先著手思考,深入思考業(yè)務(wù)邏輯和細(xì)節(jié),再輸出相對(duì)完善的prd。
好的
交互很棒,頁(yè)面的元素及效果描述的很清楚,讓人看一眼就明白,但是對(duì)于細(xì)節(jié)方面的業(yè)務(wù)邏輯沒(méi)有具體說(shuō)明,測(cè)試和開(kāi)發(fā)如果按照這個(gè)來(lái)做,著重點(diǎn)全在交互,一方面抓不到重點(diǎn),一方面后期在和測(cè)試、開(kāi)發(fā)溝通過(guò)程中遺留給自己的問(wèn)題也是蠻多的,不過(guò)總體來(lái)說(shuō),學(xué)到了不少,感謝作者 ??
請(qǐng)問(wèn)文檔中的交互動(dòng)畫(huà)怎么實(shí)現(xiàn)的?(不是Axure自身的動(dòng)畫(huà))
加油。。距離真正的prd還是很大距離
路還長(zhǎng),開(kāi)發(fā)看到這樣的文檔,是沒(méi)辦法進(jìn)行開(kāi)發(fā)的~~不過(guò),已經(jīng)可以當(dāng)一個(gè)產(chǎn)品助理了。
交互畫(huà)的很認(rèn)真,初級(jí)產(chǎn)品憑這份文檔,可以獲得崗位了。距離真正的產(chǎn)品還有很多路要走。加油
?
像是培訓(xùn)班的作業(yè),過(guò)多停留在表現(xiàn)層,還沒(méi)有把prd文檔到底是干嘛用的想明白
這明明是一份DRD
看著也像交互文檔 后臺(tái)啥都沒(méi)寫(xiě)
交互還很炫酷,然后PRD的重點(diǎn)是邏輯細(xì)節(jié)
您好,老師,我是產(chǎn)品小白,正在努力學(xué)習(xí)產(chǎn)品知識(shí),您的文檔對(duì)我?guī)椭艽?,可以加您微信進(jìn)一步請(qǐng)教么?我的微信號(hào)genbye
想請(qǐng)教作者一個(gè)問(wèn)題,圖中的動(dòng)態(tài)圖片是如何制作的?
你好,作者可以加微信嗎?看了你的文章,有些東西想請(qǐng)教。微信號(hào):hnndyh
您好,筆者,本人是產(chǎn)品小白,正在苦逼的學(xué)習(xí)中,看到您的文檔,感覺(jué)對(duì)我?guī)椭艽螅?qǐng)求發(fā)我一份吧,183244979@qq.com,感謝!
你好,我也是在校生,3個(gè)月前畫(huà)了網(wǎng)易嚴(yán)選的原型圖,加交互效果。昨天突然在這上面看見(jiàn)你的,很想和你交流交流。我微信zls15235791909
把文字描述減少90%,一圖勝千言。
未登錄狀態(tài)下可以加入到購(gòu)物車?
可以的。登錄前將商品加入購(gòu)物車,登錄后該商品會(huì)自動(dòng)加入購(gòu)物車。
訂單業(yè)務(wù)泳道圖有幾個(gè)地方邏輯上說(shuō)不過(guò)去,細(xì)節(jié)缺失。但是整體寫(xiě)得很仔細(xì),圖很不錯(cuò),值得學(xué)習(xí)。
嗯嗯是的,購(gòu)買有多個(gè)途徑、地址的添加處、付款的不同結(jié)果都需要詳細(xì)說(shuō)明。
感謝大家的評(píng)論,我對(duì)文檔中的不足總結(jié)了以下幾點(diǎn):梳理功能邏輯的時(shí)候,能盡量少點(diǎn)文字就少點(diǎn)文字,最好能用簡(jiǎn)潔的線框圖標(biāo)注好頁(yè)面的流轉(zhuǎn)以及頁(yè)面的內(nèi)容排序,對(duì)于涉及到判斷邏輯時(shí),畫(huà)功能流程圖簡(jiǎn)潔明了,另外容易忽略的細(xì)節(jié)可以加上文字備注說(shuō)明;異常情況需要再細(xì)致地考慮多種可能性等等;還有就是前后端的數(shù)據(jù)反饋之前寫(xiě)的時(shí)候還缺乏這個(gè)意識(shí)。需求文檔需要細(xì)致且直入主題地說(shuō)明,一切旨在高效。繼續(xù)學(xué)習(xí)吧~ 感謝大佬們的指點(diǎn)!
小兄弟,別聽(tīng)那些說(shuō)文檔字多要簡(jiǎn)潔的那些觀點(diǎn),要知道一個(gè)企業(yè),除了那些企業(yè)文化規(guī)章制度等等形而上的內(nèi)容,可以傳承下來(lái)的就是這些東西,設(shè)計(jì)圖紙,源代碼,原理圖等等,怎么可能越簡(jiǎn)潔越好?你有聽(tīng)過(guò)哪位研發(fā)大牛告訴你寫(xiě)代碼的時(shí)候越短越簡(jiǎn)單就越好?告訴你最好不用寫(xiě)注釋?所以文檔一定要寫(xiě)的細(xì)致,這樣從宏觀上來(lái)講,不會(huì)因?yàn)楫a(chǎn)品或者研發(fā)離職而導(dǎo)致斷層,從微觀上來(lái)講也是對(duì)自己能力的鍛煉。不要學(xué)那些小作坊還不自知的套路。文檔不細(xì)致那靠什么傳遞信息?靠嘴嗎?像華為這種到處有研究所的,合作起來(lái)天天靠打電話嗎?像阿里這樣的幾萬(wàn)人的公司,天天滿園區(qū)跑著找人解釋嗎?文檔內(nèi)容有問(wèn)題可以調(diào)整可以改,要是理念出問(wèn)題那對(duì)公司就是災(zāi)難。
這需求文檔特別粗糙,細(xì)節(jié)都沒(méi)有說(shuō)明,數(shù)據(jù)來(lái)源怎么取,后臺(tái)在哪里傳?感覺(jué)你寫(xiě)的是交互文檔,而以交互設(shè)計(jì)師的角度來(lái)看也達(dá)不到要求。
數(shù)據(jù)來(lái)源、前后端傳值是開(kāi)發(fā)具體考慮的問(wèn)題吧
初級(jí)階段確實(shí)只需要關(guān)注前端頁(yè)面,慢慢的基本上80%的精力都在后端。
請(qǐng)問(wèn)GIF圖如何做出來(lái)的,謝謝
該寫(xiě)的沒(méi)寫(xiě),不該寫(xiě)的扯一堆,例如:推薦頁(yè)面放什么內(nèi)容,怎么排序?完全沒(méi)說(shuō),全文扯一堆交互,你是交互設(shè)計(jì)師吧?
看了評(píng)論,作者是在校生,當(dāng)我沒(méi)說(shuō)
O(∩_∩)O哈哈~剛學(xué)習(xí)的第三天,看到你的評(píng)論對(duì)我有幫助,謝謝~
你好,我正在籌劃一個(gè)項(xiàng)目,尋找app開(kāi)發(fā)人員,外包或聯(lián)合創(chuàng)始人都可以考慮,你有意向合作嗎?
我的微信號(hào)oldfriend2013.