作者：Luffy ??轉(zhuǎn)載已取得作者授權(quán)

版本修訂歷史：

PRD輸出環(huán)境：

圖標(biāo)：

目錄

一、產(chǎn)品概述

1.1產(chǎn)品背景介紹

1.2產(chǎn)品概述

1.3產(chǎn)品定位

1.4目標(biāo)用戶

二、產(chǎn)品結(jié)構(gòu)及業(yè)務(wù)流程

2.1產(chǎn)品功能結(jié)構(gòu)圖

2.2產(chǎn)品信息結(jié)構(gòu)圖

2.3業(yè)務(wù)流程圖——用戶購(gòu)買功能

三、全局說明

3.1功能權(quán)限

3.2鍵盤說明

3.3頁(yè)面內(nèi)交互

四、頁(yè)面功能詳細(xì)說明

4.1登錄頁(yè)

4.2首頁(yè)

4.3商品詳情頁(yè)

4.4分類頁(yè)面

4.6我的頁(yè)面

4.7吃什么頁(yè)面

五、總結(jié)

一、產(chǎn)品概述

1.1 產(chǎn)品背景介紹

互聯(lián)網(wǎng)的發(fā)展、年輕消費(fèi)者消費(fèi)習(xí)慣的改變、冷鏈物流技術(shù)的不斷進(jìn)步，加之新零售的機(jī)遇，我國(guó)生鮮電商行業(yè)保持了較快的發(fā)展速度。

消費(fèi)者生鮮消費(fèi)習(xí)慣改變：CBNData《2017中國(guó)家庭餐桌消費(fèi)潮流報(bào)告》：線上品牌生鮮銷售額占比從2014年的6%上升至60.5%。

精選生鮮需求上升：進(jìn)口優(yōu)質(zhì)生鮮市場(chǎng)份額上升。

做B2C生鮮移動(dòng)電商有利可圖！

1.2 產(chǎn)品概述

每日優(yōu)鮮是一個(gè)圍繞著老百姓餐桌的生鮮O2O電商平臺(tái)。覆蓋了水果、蔬菜、肉蛋、水產(chǎn)、零食、乳品、輕食、糧油、酒飲、速食、輕食、日百等20個(gè)品類的布局，并在全國(guó) 20 多個(gè)主要城市建立起“城市分選中心＋社區(qū)前置倉(cāng)”的極速達(dá)冷鏈物流體系，為用戶提供自營(yíng)精選生鮮最快1小時(shí)送達(dá)服務(wù)。

1.3 產(chǎn)品定位

全品類精選商品+1小時(shí)極速達(dá)物流+社交化會(huì)員制運(yùn)營(yíng)。

1.4 目標(biāo)用戶

• 女性

• 18-35歲的年輕人：工作繁忙+剛成立家庭+喜好網(wǎng)購(gòu)+重視時(shí)間效率；

• 一二線城市+東部沿海地區(qū)：經(jīng)濟(jì)條件好+工作競(jìng)爭(zhēng)強(qiáng)烈+空閑時(shí)間較少；

• 白領(lǐng)、大學(xué)生、寶媽、特殊情況不能出門采購(gòu)的用戶。

二、產(chǎn)品結(jié)構(gòu)及業(yè)務(wù)流程

2.1 產(chǎn)品功能結(jié)構(gòu)圖

2.2 產(chǎn)品信息結(jié)構(gòu)圖

2.3 業(yè)務(wù)流程圖——用戶購(gòu)買功能

三、全局說明

3.1 功能權(quán)限

（1）是否登陸

• 登錄狀態(tài)可進(jìn)行APP內(nèi)所有操作

• 非登錄狀態(tài)下：無法訂單結(jié)算；無法進(jìn)入消息、邀請(qǐng)有禮以及好友助力提現(xiàn)等活動(dòng)頁(yè)面、“吃什么”社區(qū)頁(yè)面

（2）是否會(huì)員

• 普通用戶：沒有會(huì)員權(quán)益，其余功能均可用

• 優(yōu)享會(huì)員：商品享有會(huì)員價(jià)、可以參與超級(jí)會(huì)員日活動(dòng)、積分加倍、可以分享給好友會(huì)員體驗(yàn)卡、擁有專屬客服

3.2 鍵盤說明

（1）登陸頁(yè)面中點(diǎn)擊手機(jī)號(hào)輸入框，頁(yè)面底部彈出數(shù)字鍵盤；

（2）首頁(yè)、分類、社區(qū)頁(yè)面點(diǎn)擊搜索框是頁(yè)面底部彈出字母全鍵盤；

（3）在評(píng)價(jià)頁(yè)面點(diǎn)擊評(píng)價(jià)框時(shí)彈出字母全鍵盤。

3.3 頁(yè)面內(nèi)交互

toast、actionbar、dialog這三種形式在后文均有提到，這里就不在對(duì)這三種常見的反饋形式做過多的贅述。

頁(yè)面異常如下圖所示：

四、頁(yè)面功能詳細(xì)說明

每日優(yōu)鮮底部標(biāo)簽欄有5個(gè)標(biāo)簽，分別是：首頁(yè)、分類、吃什么、購(gòu)物車、我的。接下來我將圍繞這五個(gè)標(biāo)簽頁(yè)詳細(xì)闡述具體的頁(yè)面功能。

4.1 登錄頁(yè)

功能：輸入手機(jī)號(hào)、獲取驗(yàn)證碼、第三方登錄入口。

用戶場(chǎng)景：

• 用戶第一次使用，用戶登錄新的賬號(hào)以及使用新的設(shè)備登錄，或老用戶退出后再次登陸。

• 游客用戶執(zhí)行購(gòu)買、個(gè)人消息、參加優(yōu)惠活動(dòng)等需要登陸的操作。

優(yōu)先級(jí)：高。

前置條件：打開每日優(yōu)鮮后選擇我的標(biāo)簽頁(yè)，即可看到登錄選項(xiàng)，或點(diǎn)擊任意一個(gè)游客身份功能受限鍵則可以跳轉(zhuǎn)到該頁(yè)面。

頁(yè)面邏輯：

• 用戶輸入手機(jī)號(hào)碼，點(diǎn)擊“獲取驗(yàn)證碼”按鈕；

• 若用戶在60秒內(nèi)未收到手機(jī)驗(yàn)證碼，點(diǎn)擊“獲取驗(yàn)證碼”按鈕重新獲取驗(yàn)證碼；

• 用戶也可以點(diǎn)擊總登錄注冊(cè)頁(yè)面底部其他登錄方式的微信登陸按鈕進(jìn)行授權(quán)登錄；

• 勾選“同意用戶使用協(xié)議和隱私政策”才能點(diǎn)擊“登陸”或“微信登陸”。

后置條件：登錄成功/重新獲取驗(yàn)證碼登錄。

頁(yè)面交互：

• 手機(jī)號(hào)默認(rèn)+86，輸入限制11位，當(dāng)輸入大于11位數(shù)字時(shí)，彈出Toast提示“您輸入的手機(jī)號(hào)超過了11位”提示文本；

• 點(diǎn)擊手機(jī)號(hào)、驗(yàn)證碼輸入框時(shí)，數(shù)字鍵盤從底部向上彈出；

• 獲取驗(yàn)證碼后，按鈕內(nèi)容變?yōu)椤?0S后重發(fā)”并降低灰度開始60秒倒數(shù)，60S后按鈕內(nèi)容變回原本內(nèi)容；

• 用戶點(diǎn)擊第三方登陸下的三個(gè)按鈕，相應(yīng)的第三方授權(quán)頁(yè)面從頁(yè)面右側(cè)彈出。

異常流程：用戶輸入短信驗(yàn)證碼錯(cuò)誤，彈出Toast提示“驗(yàn)證碼錯(cuò)誤，請(qǐng)確認(rèn)后再次嘗試”提示文本，3秒后消失，用戶重新操作。

4.2 首頁(yè)

功能：展示商品和活動(dòng)信息、對(duì)商品分類、推薦商品信息。

優(yōu)先級(jí)：高

前置條件：打開每日優(yōu)鮮APP后首先顯示的內(nèi)容或點(diǎn)擊底部導(dǎo)航欄中的“首頁(yè)”功能標(biāo)簽。

頁(yè)面結(jié)構(gòu)：

用戶位置定位；

商品搜索框；

活動(dòng)/廣告banner頁(yè)，6例活動(dòng)/廣告頁(yè)輪播；

商品分類tab導(dǎo)航，共10類；

活動(dòng)標(biāo)簽區(qū)；

熱銷商品推薦區(qū)；

商品專題活動(dòng)區(qū)；

特色商品分類欄專題區(qū)，共7類。

刷新機(jī)制：

• 下拉頁(yè)面進(jìn)行刷新；

• 進(jìn)入此頁(yè)面自動(dòng)刷新。

邏輯內(nèi)容詳細(xì)說明：

1. 用戶位置定位

系統(tǒng)默認(rèn)顯示上一次用戶選擇的地址，點(diǎn)擊后頁(yè)面跳轉(zhuǎn)至選擇其他收貨地址頁(yè)面。

功能：選擇、添加、更改收貨地址。

用戶場(chǎng)景：用戶想要更改收貨地址、選擇其他已添加的收貨地址、新增收貨地址。

頁(yè)面邏輯：

• 在選擇其他收貨地址頁(yè)面，用戶點(diǎn)擊輸入框輸入新收貨地址，會(huì)自動(dòng)顯示與包含輸入地址字符的所有地址選項(xiàng)，選擇好后頁(yè)面自動(dòng)轉(zhuǎn)回至首頁(yè)，用戶收貨地址變更為已輸入的地址。

• 其他收貨地址頁(yè)面結(jié)構(gòu)分為城市選擇框、文本搜索框、當(dāng)前定位、用戶已存儲(chǔ)的收貨地址、附近地址共5部分內(nèi)容。

• 用戶選擇城市后，在文本搜索框內(nèi)輸入具體地址內(nèi)容進(jìn)行搜索（支持內(nèi)容模糊搜索），在下拉備選列表中給出相關(guān)搜索內(nèi)容的具體地址及距離公里數(shù)。

• 系統(tǒng)對(duì)已搜索過的內(nèi)容自動(dòng)標(biāo)簽化添加到歷史記錄中（歷史搜索規(guī)則描述：按搜索的時(shí)間倒序排列，排列方式從上至下排列，可點(diǎn)擊垃圾桶圖標(biāo)清除所有歷史搜索內(nèi)容）。

頁(yè)面交互：

• 在“首頁(yè)”點(diǎn)擊送貨地址，選擇收貨地址頁(yè)面從右側(cè)彈出。

• 在“選擇收貨地址”頁(yè)面下點(diǎn)擊“請(qǐng)輸入您的收貨地址”文本框，字母鍵盤從底部彈出，文本框在輸入文本后，原文本框提示內(nèi)容消失，出現(xiàn)下拉備選列表，列表里顯示與搜索內(nèi)容相關(guān)的地址，點(diǎn)擊“取消”回到“選擇收貨地址”頁(yè)面。

• 在“選擇收貨地址”頁(yè)面點(diǎn)擊“新增地址”，新增收貨地址頁(yè)面從右側(cè)彈出，點(diǎn)擊手機(jī)號(hào)輸入框，數(shù)字鍵盤從頁(yè)面底部彈出；點(diǎn)擊“+通訊錄”，頁(yè)面中間跳出dialog彈窗，請(qǐng)求訪問用戶通訊錄，用戶選擇“好”，從底部彈出通訊錄頁(yè)面，用戶選擇“取消”，回到當(dāng)前頁(yè)面；點(diǎn)擊“收貨地址”文本框，地址搜索頁(yè)面從右側(cè)彈出；點(diǎn)擊門牌號(hào)輸入框，字母全鍵盤從頁(yè)面底部彈出。

• 在選擇當(dāng)前定位、已存儲(chǔ)的收貨地址、附近地址欄目中的地址后，收貨地址頁(yè)面從右側(cè)滑出，跳轉(zhuǎn)回首頁(yè)。

思考改進(jìn)：用戶在文本搜索框內(nèi)輸入具體地址內(nèi)容進(jìn)行搜索時(shí)，在下拉備選列表中的文本與輸入框中搜索內(nèi)容相關(guān)的文本可以被加粗顯示。

2. 商品搜索框

用戶可以直接點(diǎn)擊搜索框后，頁(yè)面跳轉(zhuǎn)至搜索框hint的商品信息界面，也可自己輸入想購(gòu)買商品的關(guān)鍵字進(jìn)行特定搜索。

功能：搜索商品。

用戶場(chǎng)景：用戶需要快速獲得想要購(gòu)買的商品的信息。

頁(yè)面邏輯：

• 搜索頁(yè)面結(jié)構(gòu)分為搜索框、搜索歷史、熱門熱搜三部分。

• 用戶在搜索框內(nèi)輸入商品進(jìn)行搜索，支持內(nèi)容模糊搜索，搜索完成后頁(yè)面轉(zhuǎn)至包含搜索詞的相應(yīng)的商品搜索結(jié)果頁(yè)面，沒有庫(kù)存的商品顯示“已搶光”，不能添加購(gòu)物車，但可以尋找相似商品。

• 系統(tǒng)對(duì)已搜索過的內(nèi)容自動(dòng)標(biāo)簽化添加到歷史搜索內(nèi)容點(diǎn)擊“垃圾桶”按鈕可刪除搜索歷史。

• “搜索歷史”規(guī)則描述：按搜索的時(shí)間倒敘排列，排列方式從左至右、從上至下排列，可兩排展示10條歷史搜索內(nèi)容，字?jǐn)?shù)長(zhǎng)度限制為10字符，超出部分用“…”代替。

• 熱門搜索內(nèi)容是系統(tǒng)根據(jù)定位，為用戶推薦附近多數(shù)用戶搜索的榜單商品，按搜索熱度百分比降序排列，點(diǎn)擊相應(yīng)標(biāo)簽，進(jìn)入相應(yīng)商品推薦頁(yè)面，最多可展示15條熱門搜索內(nèi)容，并將熱門搜索前三商品加粗顯示。

頁(yè)面交互：

• 在“首頁(yè)”頁(yè)面點(diǎn)擊搜索框，搜索頁(yè)面從右側(cè)彈出，同時(shí)字母全鍵盤從頁(yè)面底部彈出。

• 搜索框內(nèi)會(huì)自動(dòng)顯示推薦商品名，輸入文本后，默認(rèn)推薦內(nèi)容消失，當(dāng)前頁(yè)面其他內(nèi)容隱藏，同時(shí)彈出下拉備選列表，系統(tǒng)會(huì)根據(jù)輸入的漢字提供相關(guān)的搜索關(guān)鍵詞，在下拉備選列表中的文本與輸入框中搜索內(nèi)容相關(guān)的文本被加粗顯示。

• 點(diǎn)擊搜索歷史右側(cè)的“垃圾桶”按鈕可清除所有歷史搜索內(nèi)容。

• 通過搜索框搜索商品、點(diǎn)擊搜索歷史標(biāo)簽、熱門搜索標(biāo)簽，商品搜索結(jié)果頁(yè)面直接彈出。

3. 活動(dòng)/廣告banner頁(yè)

頁(yè)面邏輯：6例活動(dòng)/廣告頁(yè)輪播，點(diǎn)擊可轉(zhuǎn)到相關(guān)活動(dòng)/廣告頁(yè)面。

頁(yè)面交互：點(diǎn)擊活動(dòng)/廣告Banner區(qū)域，活動(dòng)/廣告頁(yè)面從右側(cè)彈出。

4. 商品分類tab導(dǎo)航

用戶場(chǎng)景：用戶知道自己想要購(gòu)買商品的類別，想要在某一特定類別內(nèi)挑選商品。

頁(yè)面邏輯：商品分類標(biāo)簽區(qū)共十類，點(diǎn)擊相應(yīng)的標(biāo)簽可進(jìn)入“分類”頁(yè)面，同時(shí)出現(xiàn)相關(guān)商品推薦頁(yè)面。

頁(yè)面交互：點(diǎn)擊“首頁(yè)”頁(yè)面中的商品分類標(biāo)簽會(huì)迅速跳轉(zhuǎn)至“分類”頁(yè)面，同時(shí)顯示出tab對(duì)應(yīng)的商品列表。

5. 活動(dòng)標(biāo)簽區(qū)

用戶場(chǎng)景：價(jià)格敏感型用戶或者忠實(shí)用戶想要通過各種活動(dòng)優(yōu)惠來節(jié)省一筆開支。

頁(yè)面邏輯：活動(dòng)標(biāo)簽區(qū)共四類，點(diǎn)擊相應(yīng)的標(biāo)簽可進(jìn)入相應(yīng)的活動(dòng)頁(yè)面。

頁(yè)面交互：點(diǎn)擊“首頁(yè)”頁(yè)面中的活動(dòng)標(biāo)簽，相應(yīng)的活動(dòng)頁(yè)面會(huì)從右側(cè)彈出。

6. 熱銷商品推薦區(qū)

用戶場(chǎng)景：用戶不知道購(gòu)買哪種商品，從眾心理會(huì)驅(qū)使用戶瀏覽熱銷商品。

頁(yè)面邏輯：

• 熱銷商品排行榜為用戶推薦附近多數(shù)用戶購(gòu)買的商品，按銷量百分比降序排列，點(diǎn)擊相應(yīng)標(biāo)簽，可以進(jìn)入相應(yīng)商品的詳情頁(yè)面，或直接點(diǎn)擊加號(hào)，將商品加入購(gòu)物車中。

• 點(diǎn)擊查看更多直接跳轉(zhuǎn)至熱銷排行榜頁(yè)面。

頁(yè)面交互：

• 熱銷排行榜商品列表可橫向滑動(dòng)顯示12個(gè)商品，滑到最右邊出現(xiàn)“查看更多”，繼續(xù)向左滑動(dòng)，“熱銷排行榜”頁(yè)面就會(huì)從右側(cè)彈出。

• 點(diǎn)擊“查看更多”按鈕，“熱銷排行榜”頁(yè)面也從右側(cè)彈出。

• 點(diǎn)擊熱銷排行榜橫向滑動(dòng)商品列表中的商品，對(duì)應(yīng)的商品詳情頁(yè)會(huì)從右側(cè)彈出。

• 直接點(diǎn)擊加號(hào)添加購(gòu)物車，有1s的“商品放入購(gòu)物車”的動(dòng)畫。

7. 商品專題活動(dòng)區(qū)

用戶場(chǎng)景：用戶想要購(gòu)買打折或有優(yōu)惠價(jià)格的活動(dòng)商品。

頁(yè)面邏輯：

• 專題活動(dòng)標(biāo)簽區(qū)共六類，點(diǎn)擊相應(yīng)的標(biāo)簽可進(jìn)入相應(yīng)的活動(dòng)頁(yè)面。

• 這里以“每日秒殺”活動(dòng)頁(yè)面為例進(jìn)行介紹，“每日秒殺”活動(dòng)頁(yè)面，分為標(biāo)題欄、結(jié)束倒計(jì)時(shí)欄和活動(dòng)商品列表三部分，點(diǎn)擊商品列表中的商品區(qū)域可進(jìn)入相應(yīng)商品的詳情頁(yè)面。

• 活動(dòng)商品列表中的商品介紹會(huì)顯示商品的庫(kù)存和已搶購(gòu)人數(shù)。

頁(yè)面交互：

• “首頁(yè)”頁(yè)面中的活動(dòng)標(biāo)簽，相應(yīng)的活動(dòng)頁(yè)面會(huì)從右側(cè)彈出。

• 點(diǎn)擊“每日秒殺”活動(dòng)頁(yè)面商品列表中的商品區(qū)域右側(cè)會(huì)彈出相應(yīng)商品的詳情頁(yè)面。

• 點(diǎn)擊“每日秒殺”活動(dòng)頁(yè)面左下角的購(gòu)物車按鈕，購(gòu)物車頁(yè)面從右側(cè)彈出。

• 點(diǎn)擊“馬上搶”按鈕，商品將被自動(dòng)加入購(gòu)物車中，同時(shí)頁(yè)面左下方購(gòu)物車上的數(shù)字加1。

8. 特色商品分類欄專題區(qū)

用戶場(chǎng)景:

• 用戶打開APP進(jìn)入首頁(yè)，想直接在首頁(yè)挑選相應(yīng)類別的商品。

• 用戶想購(gòu)買商品，但不知道具體購(gòu)買什么，可以通過瀏覽此頁(yè)面進(jìn)行挑選。

頁(yè)面邏輯：

• 系統(tǒng)為用戶推薦了一些用戶可能喜歡的商品，用戶可全部查看、也可點(diǎn)擊不同的分類標(biāo)簽（如鮮魚鮮肉、在家火鍋、一件包郵等）查看相關(guān)商品推薦列表。

• 在商品推薦列表中點(diǎn)擊商品可進(jìn)入相應(yīng)的商品詳情頁(yè)面，也可直接把商品加入購(gòu)物車。

頁(yè)面交互：

• 下滑“首頁(yè)”頁(yè)面，用戶可以左右滑動(dòng)橫排標(biāo)簽欄，默認(rèn)選中標(biāo)簽為“全部”。

• 當(dāng)點(diǎn)擊標(biāo)簽區(qū)的各個(gè)標(biāo)簽時(shí)，功能標(biāo)簽呈現(xiàn)選中狀態(tài)；同時(shí)，頁(yè)面下方彈出相應(yīng)類別的商品推薦列表。

• 點(diǎn)擊橫排標(biāo)簽滑動(dòng)區(qū)的7個(gè)標(biāo)簽中第3、4、5個(gè)標(biāo)簽，標(biāo)簽行會(huì)自動(dòng)向左或向右滑動(dòng)。

• 特色商品分類欄專題區(qū)可向下滑動(dòng)瀏覽相應(yīng)標(biāo)簽下的更多商品。

• 點(diǎn)擊下方商品推薦列表中的商品區(qū)域，商品詳情頁(yè)從右側(cè)彈出。

• 點(diǎn)擊商品旁的加號(hào)，會(huì)有1s的商品放入底部標(biāo)簽欄的購(gòu)物車的動(dòng)畫。

對(duì)首頁(yè)整體的思考：“每日優(yōu)鮮”APP用商品搜索框、廣告banner、商品分類tab導(dǎo)航、熱銷商品推薦區(qū)、專題活動(dòng)區(qū)、特色商品推薦區(qū)這六大模塊，對(duì)不同用戶的不同需求提供相應(yīng)的引導(dǎo)方案，這六個(gè)用戶需求入口集中到同一出口“商品詳情頁(yè)”，驅(qū)使用戶加入購(gòu)物車。每日優(yōu)鮮可以根據(jù)用戶的瀏覽、搜索和訂單記錄更精準(zhǔn)地向用戶推薦商品。

4.3 商品詳情頁(yè)

頁(yè)面結(jié)構(gòu)：

商品圖片

商品簡(jiǎn)介

商品所在榜單

活動(dòng)分享

推薦商品

菜譜做法

商品詳情

功能描述：用戶在商品詳情頁(yè)面可查看商品的具體信息并加入購(gòu)物車，還可以分享商品到微信和朋友圈。

前置條件：點(diǎn)擊所有頁(yè)面中的具體商品。

頁(yè)面邏輯：

• 在商品詳情頁(yè)面包含五張商品的圖片；

• 點(diǎn)擊商品圖片右上角“分享”按鈕，可以選擇微信或朋友圈進(jìn)行分享；

• 點(diǎn)擊榜單可進(jìn)入“熱銷排行榜界面”，并顯示該商品所在的榜單類別里的所有商品；

• 點(diǎn)擊分享可進(jìn)入“天天賺錢”活動(dòng)界面；

• 在相關(guān)推薦商品列表中點(diǎn)擊商品可進(jìn)入相關(guān)商品詳情頁(yè)面，點(diǎn)擊加號(hào)可以直接加入購(gòu)物車；

• 點(diǎn)擊“加入購(gòu)物車”按鈕可直接將商品加入購(gòu)物車；

• 菜譜做法區(qū)包含相關(guān)菜品的菜譜信息，點(diǎn)擊菜譜可進(jìn)入相應(yīng)的菜譜詳情頁(yè)面。

頁(yè)面交互：

• 在商品的圖片上左右滑動(dòng)，可查看商品的不同圖片；

• 點(diǎn)擊圖片左上方的“返回”按鈕可返回之前的頁(yè)面；

• 在商品詳情頁(yè)面向下拖動(dòng)可查看商品詳情等其他信息；

• 點(diǎn)擊“分享”按鈕，商品詳情頁(yè)面變暗產(chǎn)生遮罩層，同時(shí)分享頁(yè)面從底部彈出，點(diǎn)擊分享路徑圖標(biāo)可分享至相關(guān)途徑，點(diǎn)擊“取消”按鈕或點(diǎn)擊外，返回到原來的商品詳情頁(yè)；

• 點(diǎn)擊“加入購(gòu)物車”選項(xiàng)，右上角購(gòu)物車角標(biāo)數(shù)字加1，同時(shí)會(huì)有1s的商品放入購(gòu)物車的動(dòng)畫；

• 點(diǎn)擊頁(yè)面左下角的“購(gòu)物車”圖標(biāo)，購(gòu)物車頁(yè)面從右側(cè)彈出；

• 滑動(dòng)菜譜列表可查看菜譜信息，點(diǎn)擊菜譜列表中的菜譜，相應(yīng)的菜譜詳情頁(yè)面從右側(cè)彈出。

4.4 分類頁(yè)面

頁(yè)面結(jié)構(gòu)：

搜索框；

商品分類tab導(dǎo)航（主標(biāo)簽），共11類；

商品細(xì)分類別導(dǎo)航（子標(biāo)簽），不同商品大類的細(xì)分類別不同；

廣告banner；

具體商品列表。

功能描述：選擇商品的分類標(biāo)簽，可進(jìn)入相應(yīng)的商品推薦頁(yè)面。

用戶場(chǎng)景：

• 用戶想要通過商品分類挑選商品；

• 用戶想?yún)⒖忌唐返匿N量來選擇商品；

• 價(jià)格敏感的用戶需要對(duì)商品進(jìn)行價(jià)格排序，從而挑選出低價(jià)商品。

優(yōu)先級(jí)：高

前置條件：點(diǎn)擊頁(yè)面底部導(dǎo)航欄的“分類“標(biāo)簽。

頁(yè)面邏輯：

• 點(diǎn)擊搜索框，進(jìn)入商品搜索頁(yè)面；

• 點(diǎn)擊廣告banner區(qū)的廣告進(jìn)入相應(yīng)的廣告界面；

• 點(diǎn)擊商品分類tab導(dǎo)航的標(biāo)簽頁(yè)面右側(cè)出現(xiàn)相應(yīng)的商品大類的推薦頁(yè)面；

• 點(diǎn)擊左側(cè)商品細(xì)分類別導(dǎo)航的標(biāo)簽頁(yè)面右側(cè)出現(xiàn)相應(yīng)細(xì)分類類別的推薦頁(yè)面；

• 商品可以按綜合、銷量、價(jià)格進(jìn)行排序顯示；

• 點(diǎn)擊商品直接進(jìn)入商品詳情界面，或點(diǎn)擊加號(hào)，可將商品直接加入購(gòu)物車。

頁(yè)面交互：

• 在“分類”頁(yè)面上方點(diǎn)擊搜索框，商品搜索頁(yè)面從右側(cè)彈出，同時(shí)字母鍵盤從頁(yè)面底部彈出；

• 點(diǎn)擊廣告活動(dòng)banner區(qū)的廣告，相應(yīng)的廣告界面從右側(cè)彈出；

• 主標(biāo)簽可以左右滑動(dòng)，子標(biāo)簽可以上下滑動(dòng)，查看更多信息；

• 選中標(biāo)簽的內(nèi)容時(shí)，字體會(huì)加粗顯示；

• 點(diǎn)擊商品分類頁(yè)面中的主標(biāo)簽，相應(yīng)的商品推薦頁(yè)面和商品子標(biāo)簽從頁(yè)面下半部分加載出來；

• 在商品推薦頁(yè)面上方點(diǎn)擊綜合、銷量、價(jià)格等排序按鈕，商品推薦頁(yè)面會(huì)自動(dòng)更新，重新加載；

• 點(diǎn)擊每個(gè)商品右方的加號(hào)圖標(biāo)，商品旁的數(shù)字+1，同時(shí)數(shù)字左邊出現(xiàn)“－”按鈕，底部導(dǎo)航頁(yè)的購(gòu)物車右角標(biāo)數(shù)字+1，同時(shí)會(huì)有1s的商品放入購(gòu)物車的動(dòng)畫。

4.5 購(gòu)物車頁(yè)面

頁(yè)面結(jié)構(gòu)：

用戶位置定位；

購(gòu)物車商品列表；

猜你喜歡商品推薦區(qū)；

結(jié)算區(qū)。

功能描述：選擇想要購(gòu)買的商品，點(diǎn)擊結(jié)算按鈕即可下單支付。

用戶場(chǎng)景：用戶想要挑選商品進(jìn)行結(jié)算。

優(yōu)先級(jí)：高

前置條件：

• 點(diǎn)擊頁(yè)面底部導(dǎo)航欄的“購(gòu)物車“標(biāo)簽；

• 點(diǎn)擊商品詳情頁(yè)左下角購(gòu)物車icon；

• 點(diǎn)擊菜譜詳情頁(yè)右上角購(gòu)物車icon；

• 點(diǎn)擊廣告活動(dòng)詳情頁(yè)購(gòu)物車浮標(biāo)。

頁(yè)面邏輯：

• 在購(gòu)物車頁(yè)面下，用戶可以查看添加到購(gòu)物車的商品，也可點(diǎn)擊查看商品詳情；

• 用戶可以改變購(gòu)物車內(nèi)商品的數(shù)量，也可以同時(shí)選擇對(duì)一種或多種商品進(jìn)行結(jié)算或刪除；

• 用戶點(diǎn)擊去結(jié)算按鈕進(jìn)入結(jié)算頁(yè)面可以更改收貨地址、選擇送達(dá)時(shí)間、選擇優(yōu)惠紅包和選擇支付方式，極速達(dá)商品默認(rèn)送達(dá)時(shí)間為接下來一小時(shí)；

• 結(jié)算頁(yè)面有商品合計(jì)價(jià)格、活動(dòng)優(yōu)惠以及運(yùn)費(fèi)的信息；

• 在結(jié)算頁(yè)面未支付返回購(gòu)物車會(huì)出現(xiàn)dialog彈窗提示用戶是否要離開。

頁(yè)面交互：

• 用戶點(diǎn)擊頁(yè)面上方定位Icon，選擇售后地址頁(yè)面從右側(cè)彈出；

• 點(diǎn)擊勾選商品或全選的“白色圓圈”，圓圈上會(huì)顯示玫紅色的勾，頁(yè)面右下方合計(jì)價(jià)格通過單價(jià)*數(shù)量算出并顯示在去結(jié)算按鈕左邊，“去結(jié)算”按鈕填充玫紅色；

• 用戶點(diǎn)擊商品，相應(yīng)的商品詳情頁(yè)面從右側(cè)彈出；

• 用戶點(diǎn)擊商品訂單中的“+” “-”按鈕，可改變結(jié)算商品的數(shù)量；若商品數(shù)量為1，點(diǎn)擊商品訂單中的“-”按鈕，頁(yè)面中間出現(xiàn)dialog彈窗，詢問顧客是否刪除該商品；

• 點(diǎn)擊填充玫紅色的“去結(jié)算”按鈕，填寫訂單（支付）頁(yè)面從右側(cè)彈出；

• 用戶點(diǎn)擊猜你喜歡區(qū)域商品旁的加號(hào)，底部導(dǎo)航頁(yè)的購(gòu)物車右角標(biāo)數(shù)字+1，這時(shí)沒有動(dòng)畫；

• 用戶點(diǎn)擊商品旁的“可用優(yōu)惠券”按鈕，相應(yīng)的優(yōu)惠券Actionbar向上滑動(dòng)顯示，點(diǎn)擊彈窗右上角的X或遮罩，“優(yōu)惠券”彈窗向下滑出，同時(shí)遮罩消失。

4.6 我的頁(yè)面

頁(yè)面結(jié)構(gòu)：

用戶信息（頭像、用戶名、賬戶信息）；

消息提醒；

訂單信息；

廣告活動(dòng)；

用戶服務(wù)欄。

功能描述：查看訂單狀態(tài)、活動(dòng)消息提醒、兌換積分、聯(lián)系客服、參加優(yōu)惠活動(dòng)、更改賬戶信息。

用戶場(chǎng)景：

• 用戶想要更改賬號(hào)信息；

• 用戶想要充值；

• 用戶想要把積分兌換成商品；

• 用戶想查看訂單狀態(tài)；

• 用戶想聯(lián)系客服尋求幫助；

• 用戶想退出登錄；

• 用戶想開發(fā)票。

優(yōu)先級(jí)：高。

前置條件：點(diǎn)擊頁(yè)面底部導(dǎo)航欄的“我的”標(biāo)簽。

頁(yè)面邏輯：

• 點(diǎn)擊頁(yè)面左上角鈴鐺icon出現(xiàn)消息頁(yè)面，提示用戶相關(guān)的優(yōu)惠活動(dòng)；

• 點(diǎn)擊積分兌換、積分商城出現(xiàn)福利社頁(yè)面，可供用戶兌換商品；

• 點(diǎn)擊我的訂單部分的標(biāo)簽欄可查看訂單狀態(tài)、評(píng)價(jià)訂單和訂單售后；

• 點(diǎn)擊“全部訂單”可查看用戶的所有訂單，并提供開發(fā)票服務(wù)；

• 點(diǎn)擊活動(dòng)標(biāo)簽可進(jìn)入相關(guān)活動(dòng)詳情頁(yè)；

• 點(diǎn)擊貨地址可新增和更改現(xiàn)有收貨地址；

• 點(diǎn)擊客服可進(jìn)入客服與幫助界面；

• 點(diǎn)擊設(shè)置可退出登陸和查看app相關(guān)信息。

頁(yè)面交互：

• 點(diǎn)擊頁(yè)面左上角鈴鐺icon，活動(dòng)消息頁(yè)面從右側(cè)彈出；

• 點(diǎn)擊“立即開通”按鈕，開通會(huì)員的“優(yōu)享會(huì)員專場(chǎng)”頁(yè)面從右側(cè)彈出；

• 點(diǎn)擊“全部訂單”用戶的所有訂單頁(yè)面從右側(cè)彈出；

• 點(diǎn)擊我的訂單區(qū)域相應(yīng)標(biāo)簽（待支付、待配送、配送中、待評(píng)價(jià)、售后），相應(yīng)頁(yè)面從右側(cè)彈出；

• 點(diǎn)擊活動(dòng)標(biāo)簽，相關(guān)活動(dòng)詳情頁(yè)從右側(cè)彈出；

• 點(diǎn)擊貨地址，我的收貨地址頁(yè)面從右側(cè)彈出；

• 點(diǎn)擊客服，客服與幫助界面從右側(cè)彈出；

• 點(diǎn)擊設(shè)置，設(shè)置頁(yè)面從右側(cè)彈出。

4.7 吃什么頁(yè)面

頁(yè)面結(jié)構(gòu)：

菜譜、食材搜索框；

PGC專欄；

UGC專欄，橫向列表分為8類，點(diǎn)擊右側(cè)列表圖標(biāo)可展開更多；

用戶頭像。

功能描述：查看菜譜分類、查看菜譜的圖文和視頻信息、查看或加購(gòu)菜譜里的鏈接商品、查查看用戶主頁(yè)、點(diǎn)贊、收藏、分享。

用戶場(chǎng)景：

• 用戶買了商品不知如何制作，想要搜索商品的菜譜；

• 用戶想分享自己的廚藝，獲得自我實(shí)現(xiàn)和滿足感；

• 用戶不知道吃什么，想看看他人分享的菜譜尋找靈感；

• 用戶想提升自己的廚藝，需要學(xué)習(xí)一些菜譜。

優(yōu)先級(jí)：高

前置條件：

• 點(diǎn)擊頁(yè)面底部導(dǎo)航欄的“吃什么“標(biāo)簽；

• 在商品詳情頁(yè)菜譜做法區(qū)點(diǎn)擊任一菜譜區(qū)域。

頁(yè)面邏輯：

• 點(diǎn)擊搜索框，進(jìn)入菜譜搜索頁(yè)面；

• 點(diǎn)擊頭像進(jìn)入用戶個(gè)人中心；

• 點(diǎn)擊暖心推薦下方圖片進(jìn)入相關(guān)的內(nèi)容頁(yè)面；

• 點(diǎn)擊下方菜譜分類別導(dǎo)航的標(biāo)簽頁(yè)面下方出現(xiàn)相應(yīng)類別的推薦菜譜；

• 點(diǎn)擊商品分類tab右側(cè)的列表icon，會(huì)展開更詳細(xì)的類別供挑選；

• 在今日推薦板塊，用戶可以對(duì)喜歡的菜譜進(jìn)行點(diǎn)贊操作，點(diǎn)贊后會(huì)把相應(yīng)菜譜加入到個(gè)人中心頁(yè)面的點(diǎn)贊區(qū)域；

• 點(diǎn)擊具體的菜譜會(huì)直接進(jìn)入菜譜詳情界面，下拉會(huì)出現(xiàn)食材清單區(qū)域，點(diǎn)擊相應(yīng)食材旁的加號(hào)，可將商品直接加入購(gòu)物車，點(diǎn)擊相應(yīng)食材的圖片/視頻，會(huì)跳轉(zhuǎn)商品詳情頁(yè)；

• 在菜譜詳情界面，可以對(duì)菜譜進(jìn)行點(diǎn)贊、收藏、分享操作；點(diǎn)贊、收藏后會(huì)把相應(yīng)菜譜加入到個(gè)人中心頁(yè)面的點(diǎn)贊、收藏區(qū)域。

頁(yè)面交互：

• 上下滑動(dòng)瀏覽內(nèi)容；

• 點(diǎn)擊搜索框，搜索頁(yè)面從右側(cè)彈出，同時(shí)字母全鍵盤從頁(yè)面底部彈出；

• 點(diǎn)擊用戶頭像，用戶詳情頁(yè)從右側(cè)彈出；

• 點(diǎn)擊暖心推薦“優(yōu)鮮小廚”發(fā)布的官方內(nèi)容，相應(yīng)內(nèi)容界面從右側(cè)彈出；

• 點(diǎn)擊菜譜圖片或視頻，菜譜詳情頁(yè)從右側(cè)彈出；

• 點(diǎn)擊?圖標(biāo)給用戶點(diǎn)贊，灰色的?會(huì)變成玫紅色，再點(diǎn)擊一下玫紅色的?會(huì)重新變?yōu)榛疑?/p>

頁(yè)面整體思考和建議：

“吃什么”頁(yè)面為用戶提供了社區(qū)，增強(qiáng)了用戶黏性。

幫助購(gòu)買了菜品不知如何制作的用戶提供了方便的制作方法。

以前往往是用戶想做什么菜，然后在去搜索相應(yīng)食材，就會(huì)比較麻煩。現(xiàn)在用戶可以直接搜索出菜譜，在菜譜詳情頁(yè)的食材清單中，把食材直接加入購(gòu)物車。

搜索框暫不支持內(nèi)容模糊搜索，不會(huì)彈出備選列表。

菜譜圖文詳情頁(yè)頁(yè)面頂端，每個(gè)菜譜只有一張成品圖片，無法點(diǎn)擊圖片放大圖。建議以后擁有自己的社區(qū)后，支持用戶上傳多張成品圖可供左右滑動(dòng)查看。

用戶暫時(shí)只能點(diǎn)贊收藏菜譜，并不能評(píng)論和發(fā)布作品，可以讓用戶購(gòu)買APP上的食材后，分享該商品的做法，并po出自己的成品圖/視頻，同時(shí)借助評(píng)論功能讓用戶進(jìn)行交流。

由于大多是第三方APP的用戶在社區(qū)上發(fā)布的作品，所以還沒有關(guān)注功能。

UGC區(qū)域的內(nèi)容大多源于豆果美食這一第三方APP，相當(dāng)于是把豆果美食的社區(qū)生態(tài)圈硬搬到自己的平臺(tái)。我建議每日優(yōu)鮮后期可以形成自己的社區(qū)，讓自己的用戶在“吃什么”頁(yè)面發(fā)布作品。前期，為了加大宣傳，可以邀請(qǐng)一些明星入駐，讓明星在“吃什么”社區(qū)分享自己的作品。

五、總結(jié)

隨著互聯(lián)網(wǎng)發(fā)展的越來越成熟，生鮮電商作為生鮮流通新渠道，發(fā)展速度快，成長(zhǎng)空間廣闊，導(dǎo)致新的生鮮電商不斷增加，巨頭布局持續(xù)擴(kuò)大，行業(yè)競(jìng)爭(zhēng)還在持續(xù)升級(jí)。每日優(yōu)鮮從思路、模式到路徑，都需要?jiǎng)?chuàng)新，才能在眾多生鮮平臺(tái)中脫穎而出。

最后，歡迎有問題的小伙伴加微信：chanpin628?交流。

此外我們的官方網(wǎng)站也上線了，每日分享高質(zhì)量的文章、原型素材和行業(yè)報(bào)告，小伙伴可自行前往索取，支持搜索，需要的小伙伴可點(diǎn)擊底部的閱讀原文直接查看，或者復(fù)制網(wǎng)址：www.dadaghp.com?打開。

更多干貨可關(guān)注微信公眾號(hào)：產(chǎn)品劉

想學(xué)習(xí)更多關(guān)于產(chǎn)品、職場(chǎng)、心理、認(rèn)知等干貨，可長(zhǎng)按右邊二維碼，關(guān)注我們。

··················END··················

RECOMMEND

推薦閱讀

不知道自己是否適合做產(chǎn)品經(jīng)理

什么樣的企業(yè)適合建設(shè)中臺(tái)

線下實(shí)戰(zhàn)2.0

面試題，上海有多少個(gè)理發(fā)店？

點(diǎn)擊“閱讀原文”

查看更多干貨

總結(jié)

以上是生活随笔為你收集整理的分享一篇关于“每日优鲜”的PRD文档的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。