疫情過后，線上買菜會成為趨勢嗎？每日優(yōu)鮮作為一個比較成熟的O2O生鮮電商平臺，我根據(jù)現(xiàn)有的每日優(yōu)鮮app進行了文檔倒推，對產(chǎn)品結(jié)構(gòu)、主要業(yè)務(wù)流程、主要窗口的頁面邏輯和交互進行了簡要的分析和說明。

該文檔主要是從前端用戶體驗方面設(shè)計的，剛開始學(xué)習(xí)相關(guā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ù)流程圖——用戶購買功能

三、全局說明

3.1功能權(quán)限

3.2鍵盤說明

3.3頁面內(nèi)交互

四、頁面功能詳細說明

4.1登錄頁

4.2首頁

4.3商品詳情頁

4.4分類頁面

4.6我的頁面

4.7吃什么頁面

五、總結(jié)

一、產(chǎn)品概述

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

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

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

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

做B2C生鮮移動電商有利可圖！

1.2 產(chǎn)品概述

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

1.3 產(chǎn)品定位

全品類精選商品+1小時極速達物流+社交化會員制運營。

1.4 目標(biāo)用戶

• 女性
• 18-35歲的年輕人：工作繁忙+剛成立家庭+喜好網(wǎng)購+重視時間效率；
• 一二線城市+東部沿海地區(qū)：經(jīng)濟條件好+工作競爭強烈+空閑時間較少；
• 白領(lǐng)、大學(xué)生、寶媽、特殊情況不能出門采購的用戶。

二、產(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ù)流程圖——用戶購買功能

三、全局說明

3.1 功能權(quán)限

（1）是否登陸

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

（2）是否會員

• 普通用戶：沒有會員權(quán)益，其余功能均可用
• 優(yōu)享會員：商品享有會員價、可以參與超級會員日活動、積分加倍、可以分享給好友會員體驗卡、擁有專屬客服

3.2 鍵盤說明

（1）登陸頁面中點擊手機號輸入框，頁面底部彈出數(shù)字鍵盤；

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

（3）在評價頁面點擊評價框時彈出字母全鍵盤。

3.3 頁面內(nèi)交互

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

頁面異常如下圖所示：

四、頁面功能詳細說明

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

4.1 登錄頁

功能：輸入手機號、獲取驗證碼、第三方登錄入口。

用戶場景：

• 用戶第一次使用，用戶登錄新的賬號以及使用新的設(shè)備登錄，或老用戶退出后再次登陸。
• 游客用戶執(zhí)行購買、個人消息、參加優(yōu)惠活動等需要登陸的操作。

優(yōu)先級：高。

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

頁面邏輯：

• 用戶輸入手機號碼，點擊“獲取驗證碼”按鈕；
• 若用戶在60秒內(nèi)未收到手機驗證碼，點擊“獲取驗證碼”按鈕重新獲取驗證碼；
• 用戶也可以點擊總登錄注冊頁面底部其他登錄方式的微信登陸按鈕進行授權(quán)登錄；
• 勾選“同意用戶使用協(xié)議和隱私政策”才能點擊“登陸”或“微信登陸”。

后置條件：登錄成功/重新獲取驗證碼登錄。

頁面交互：

• 手機號默認(rèn)+86，輸入限制11位，當(dāng)輸入大于11位數(shù)字時，彈出Toast提示“您輸入的手機號超過了11位”提示文本；
• 點擊手機號、驗證碼輸入框時，數(shù)字鍵盤從底部向上彈出；
• 獲取驗證碼后，按鈕內(nèi)容變?yōu)椤?0S后重發(fā)”并降低灰度開始60秒倒數(shù)，60S后按鈕內(nèi)容變回原本內(nèi)容；
• 用戶點擊第三方登陸下的三個按鈕，相應(yīng)的第三方授權(quán)頁面從頁面右側(cè)彈出。

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

4.2 首頁

功能：展示商品和活動信息、對商品分類、推薦商品信息。

優(yōu)先級：高

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

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

1. 用戶位置定位；
2. 商品搜索框；
3. 活動/廣告banner頁，6例活動/廣告頁輪播；
4. 商品分類tab導(dǎo)航，共10類；
5. 活動標(biāo)簽區(qū)；
6. 熱銷商品推薦區(qū)；
7. 商品專題活動區(qū)；
8. 特色商品分類欄專題區(qū)，共7類。

刷新機制：

• 下拉頁面進行刷新；
• 進入此頁面自動刷新。

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

1. 用戶位置定位

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

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

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

頁面邏輯：

• 在選擇其他收貨地址頁面，用戶點擊輸入框輸入新收貨地址，會自動顯示與包含輸入地址字符的所有地址選項，選擇好后頁面自動轉(zhuǎn)回至首頁，用戶收貨地址變更為已輸入的地址。
• 其他收貨地址頁面結(jié)構(gòu)分為城市選擇框、文本搜索框、當(dāng)前定位、用戶已存儲的收貨地址、附近地址共5部分內(nèi)容。
• 用戶選擇城市后，在文本搜索框內(nèi)輸入具體地址內(nèi)容進行搜索（支持內(nèi)容模糊搜索），在下拉備選列表中給出相關(guān)搜索內(nèi)容的具體地址及距離公里數(shù)。
• 系統(tǒng)對已搜索過的內(nèi)容自動標(biāo)簽化添加到歷史記錄中（歷史搜索規(guī)則描述：按搜索的時間倒序排列，排列方式從上至下排列，可點擊垃圾桶圖標(biāo)清除所有歷史搜索內(nèi)容）。

頁面交互：

• 在“首頁”點擊送貨地址，選擇收貨地址頁面從右側(cè)彈出。
• 在“選擇收貨地址”頁面下點擊“請輸入您的收貨地址”文本框，字母鍵盤從底部彈出，文本框在輸入文本后，原文本框提示內(nèi)容消失，出現(xiàn)下拉備選列表，列表里顯示與搜索內(nèi)容相關(guān)的地址，點擊“取消”回到“選擇收貨地址”頁面。
• 在“選擇收貨地址”頁面點擊“新增地址”，新增收貨地址頁面從右側(cè)彈出，點擊手機號輸入框，數(shù)字鍵盤從頁面底部彈出；點擊“+通訊錄”，頁面中間跳出dialog彈窗，請求訪問用戶通訊錄，用戶選擇“好”，從底部彈出通訊錄頁面，用戶選擇“取消”，回到當(dāng)前頁面；點擊“收貨地址”文本框，地址搜索頁面從右側(cè)彈出；點擊門牌號輸入框，字母全鍵盤從頁面底部彈出。
• 在選擇當(dāng)前定位、已存儲的收貨地址、附近地址欄目中的地址后，收貨地址頁面從右側(cè)滑出，跳轉(zhuǎn)回首頁。

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

2. 商品搜索框

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

功能：搜索商品。

用戶場景：用戶需要快速獲得想要購買的商品的信息。

頁面邏輯：

• 搜索頁面結(jié)構(gòu)分為搜索框、搜索歷史、熱門熱搜三部分。
• 用戶在搜索框內(nèi)輸入商品進行搜索，支持內(nèi)容模糊搜索，搜索完成后頁面轉(zhuǎn)至包含搜索詞的相應(yīng)的商品搜索結(jié)果頁面，沒有庫存的商品顯示“已搶光”，不能添加購物車，但可以尋找相似商品。
• 系統(tǒng)對已搜索過的內(nèi)容自動標(biāo)簽化添加到歷史搜索內(nèi)容點擊“垃圾桶”按鈕可刪除搜索歷史。
• “搜索歷史”規(guī)則描述：按搜索的時間倒敘排列，排列方式從左至右、從上至下排列，可兩排展示10條歷史搜索內(nèi)容，字?jǐn)?shù)長度限制為10字符，超出部分用“…”代替。
• 熱門搜索內(nèi)容是系統(tǒng)根據(jù)定位，為用戶推薦附近多數(shù)用戶搜索的榜單商品，按搜索熱度百分比降序排列，點擊相應(yīng)標(biāo)簽，進入相應(yīng)商品推薦頁面，最多可展示15條熱門搜索內(nèi)容，并將熱門搜索前三商品加粗顯示。

頁面交互：

• 在“首頁”頁面點擊搜索框，搜索頁面從右側(cè)彈出，同時字母全鍵盤從頁面底部彈出。
• 搜索框內(nèi)會自動顯示推薦商品名，輸入文本后，默認(rèn)推薦內(nèi)容消失，當(dāng)前頁面其他內(nèi)容隱藏，同時彈出下拉備選列表，系統(tǒng)會根據(jù)輸入的漢字提供相關(guān)的搜索關(guān)鍵詞，在下拉備選列表中的文本與輸入框中搜索內(nèi)容相關(guān)的文本被加粗顯示。
• 點擊搜索歷史右側(cè)的“垃圾桶”按鈕可清除所有歷史搜索內(nèi)容。
• 通過搜索框搜索商品、點擊搜索歷史標(biāo)簽、熱門搜索標(biāo)簽，商品搜索結(jié)果頁面直接彈出。

3. 活動/廣告banner頁

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

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

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

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

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

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

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

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

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

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

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

用戶場景：用戶不知道購買哪種商品，從眾心理會驅(qū)使用戶瀏覽熱銷商品。

頁面邏輯：

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

頁面交互：

• 熱銷排行榜商品列表可橫向滑動顯示12個商品，滑到最右邊出現(xiàn)“查看更多”，繼續(xù)向左滑動，“熱銷排行榜”頁面就會從右側(cè)彈出。
• 點擊“查看更多”按鈕，“熱銷排行榜”頁面也從右側(cè)彈出。
• 點擊熱銷排行榜橫向滑動商品列表中的商品，對應(yīng)的商品詳情頁會從右側(cè)彈出。
• 直接點擊加號添加購物車，有1s的“商品放入購物車”的動畫。

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

用戶場景：用戶想要購買打折或有優(yōu)惠價格的活動商品。

頁面邏輯：

• 專題活動標(biāo)簽區(qū)共六類，點擊相應(yīng)的標(biāo)簽可進入相應(yīng)的活動頁面。
• 這里以“每日秒殺”活動頁面為例進行介紹，“每日秒殺”活動頁面，分為標(biāo)題欄、結(jié)束倒計時欄和活動商品列表三部分，點擊商品列表中的商品區(qū)域可進入相應(yīng)商品的詳情頁面。
• 活動商品列表中的商品介紹會顯示商品的庫存和已搶購人數(shù)。

頁面交互：

• “首頁”頁面中的活動標(biāo)簽，相應(yīng)的活動頁面會從右側(cè)彈出。
• 點擊“每日秒殺”活動頁面商品列表中的商品區(qū)域右側(cè)會彈出相應(yīng)商品的詳情頁面。
• 點擊“每日秒殺”活動頁面左下角的購物車按鈕，購物車頁面從右側(cè)彈出。
• 點擊“馬上搶”按鈕，商品將被自動加入購物車中，同時頁面左下方購物車上的數(shù)字加1。

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

用戶場景:

• 用戶打開APP進入首頁，想直接在首頁挑選相應(yīng)類別的商品。
• 用戶想購買商品，但不知道具體購買什么，可以通過瀏覽此頁面進行挑選。

頁面邏輯：

• 系統(tǒng)為用戶推薦了一些用戶可能喜歡的商品，用戶可全部查看、也可點擊不同的分類標(biāo)簽（如鮮魚鮮肉、在家火鍋、一件包郵等）查看相關(guān)商品推薦列表。
• 在商品推薦列表中點擊商品可進入相應(yīng)的商品詳情頁面，也可直接把商品加入購物車。

頁面交互：

• 下滑“首頁”頁面，用戶可以左右滑動橫排標(biāo)簽欄，默認(rèn)選中標(biāo)簽為“全部”。
• 當(dāng)點擊標(biāo)簽區(qū)的各個標(biāo)簽時，功能標(biāo)簽呈現(xiàn)選中狀態(tài)；同時，頁面下方彈出相應(yīng)類別的商品推薦列表。
• 點擊橫排標(biāo)簽滑動區(qū)的7個標(biāo)簽中第3、4、5個標(biāo)簽，標(biāo)簽行會自動向左或向右滑動。
• 特色商品分類欄專題區(qū)可向下滑動瀏覽相應(yīng)標(biāo)簽下的更多商品。
• 點擊下方商品推薦列表中的商品區(qū)域，商品詳情頁從右側(cè)彈出。
• 點擊商品旁的加號，會有1s的商品放入底部標(biāo)簽欄的購物車的動畫。

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

4.3 商品詳情頁

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

1. 商品圖片
2. 商品簡介
3. 商品所在榜單
4. 活動分享
5. 推薦商品
6. 菜譜做法
7. 商品詳情

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

前置條件：點擊所有頁面中的具體商品。

頁面邏輯：

• 在商品詳情頁面包含五張商品的圖片；
• 點擊商品圖片右上角“分享”按鈕，可以選擇微信或朋友圈進行分享；
• 點擊榜單可進入“熱銷排行榜界面”，并顯示該商品所在的榜單類別里的所有商品；
• 點擊分享可進入“天天賺錢”活動界面；
• 在相關(guān)推薦商品列表中點擊商品可進入相關(guān)商品詳情頁面，點擊加號可以直接加入購物車；
• 點擊“加入購物車”按鈕可直接將商品加入購物車；
• 菜譜做法區(qū)包含相關(guān)菜品的菜譜信息，點擊菜譜可進入相應(yīng)的菜譜詳情頁面。

頁面交互：

• 在商品的圖片上左右滑動，可查看商品的不同圖片；
• 點擊圖片左上方的“返回”按鈕可返回之前的頁面；
• 在商品詳情頁面向下拖動可查看商品詳情等其他信息；
• 點擊“分享”按鈕，商品詳情頁面變暗產(chǎn)生遮罩層，同時分享頁面從底部彈出，點擊分享路徑圖標(biāo)可分享至相關(guān)途徑，點擊“取消”按鈕或點擊外，返回到原來的商品詳情頁；
• 點擊“加入購物車”選項，右上角購物車角標(biāo)數(shù)字加1，同時會有1s的商品放入購物車的動畫；
• 點擊頁面左下角的“購物車”圖標(biāo)，購物車頁面從右側(cè)彈出；
• 滑動菜譜列表可查看菜譜信息，點擊菜譜列表中的菜譜，相應(yīng)的菜譜詳情頁面從右側(cè)彈出。

4.4 分類頁面

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

1. 搜索框；
2. 商品分類tab導(dǎo)航（主標(biāo)簽），共11類；
3. 商品細分類別導(dǎo)航（子標(biāo)簽），不同商品大類的細分類別不同；
4. 廣告banner；
5. 具體商品列表。

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

用戶場景：

• 用戶想要通過商品分類挑選商品；
• 用戶想?yún)⒖忌唐返匿N量來選擇商品；
• 價格敏感的用戶需要對商品進行價格排序，從而挑選出低價商品。

優(yōu)先級：高

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

頁面邏輯：

• 點擊搜索框，進入商品搜索頁面；
• 點擊廣告banner區(qū)的廣告進入相應(yīng)的廣告界面；
• 點擊商品分類tab導(dǎo)航的標(biāo)簽頁面右側(cè)出現(xiàn)相應(yīng)的商品大類的推薦頁面；
• 點擊左側(cè)商品細分類別導(dǎo)航的標(biāo)簽頁面右側(cè)出現(xiàn)相應(yīng)細分類類別的推薦頁面；
• 商品可以按綜合、銷量、價格進行排序顯示；
• 點擊商品直接進入商品詳情界面，或點擊加號，可將商品直接加入購物車。

頁面交互：

• 在“分類”頁面上方點擊搜索框，商品搜索頁面從右側(cè)彈出，同時字母鍵盤從頁面底部彈出；
• 點擊廣告活動banner區(qū)的廣告，相應(yīng)的廣告界面從右側(cè)彈出；
• 主標(biāo)簽可以左右滑動，子標(biāo)簽可以上下滑動，查看更多信息；
• 選中標(biāo)簽的內(nèi)容時，字體會加粗顯示；
• 點擊商品分類頁面中的主標(biāo)簽，相應(yīng)的商品推薦頁面和商品子標(biāo)簽從頁面下半部分加載出來；
• 在商品推薦頁面上方點擊綜合、銷量、價格等排序按鈕，商品推薦頁面會自動更新，重新加載；
• 點擊每個商品右方的加號圖標(biāo)，商品旁的數(shù)字+1，同時數(shù)字左邊出現(xiàn)“－”按鈕，底部導(dǎo)航頁的購物車右角標(biāo)數(shù)字+1，同時會有1s的商品放入購物車的動畫。

4.5 購物車頁面

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

1. 用戶位置定位；
2. 購物車商品列表；
3. 猜你喜歡商品推薦區(qū)；
4. 結(jié)算區(qū)。

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

用戶場景：用戶想要挑選商品進行結(jié)算。

優(yōu)先級：高

前置條件：

• 點擊頁面底部導(dǎo)航欄的“購物車“標(biāo)簽；
• 點擊商品詳情頁左下角購物車icon；
• 點擊菜譜詳情頁右上角購物車icon；
• 點擊廣告活動詳情頁購物車浮標(biāo)。

頁面邏輯：

• 在購物車頁面下，用戶可以查看添加到購物車的商品，也可點擊查看商品詳情；
• 用戶可以改變購物車內(nèi)商品的數(shù)量，也可以同時選擇對一種或多種商品進行結(jié)算或刪除；
• 用戶點擊去結(jié)算按鈕進入結(jié)算頁面可以更改收貨地址、選擇送達時間、選擇優(yōu)惠紅包和選擇支付方式，極速達商品默認(rèn)送達時間為接下來一小時；
• 結(jié)算頁面有商品合計價格、活動優(yōu)惠以及運費的信息；
• 在結(jié)算頁面未支付返回購物車會出現(xiàn)dialog彈窗提示用戶是否要離開。

頁面交互：

• 用戶點擊頁面上方定位Icon，選擇售后地址頁面從右側(cè)彈出；
• 點擊勾選商品或全選的“白色圓圈”，圓圈上會顯示玫紅色的勾，頁面右下方合計價格通過單價*數(shù)量算出并顯示在去結(jié)算按鈕左邊，“去結(jié)算”按鈕填充玫紅色；
• 用戶點擊商品，相應(yīng)的商品詳情頁面從右側(cè)彈出；
• 用戶點擊商品訂單中的“+” “-”按鈕，可改變結(jié)算商品的數(shù)量；若商品數(shù)量為1，點擊商品訂單中的“-”按鈕，頁面中間出現(xiàn)dialog彈窗，詢問顧客是否刪除該商品；
• 點擊填充玫紅色的“去結(jié)算”按鈕，填寫訂單（支付）頁面從右側(cè)彈出；
• 用戶點擊猜你喜歡區(qū)域商品旁的加號，底部導(dǎo)航頁的購物車右角標(biāo)數(shù)字+1，這時沒有動畫；
• 用戶點擊商品旁的“可用優(yōu)惠券”按鈕，相應(yīng)的優(yōu)惠券Actionbar向上滑動顯示，點擊彈窗右上角的X或遮罩，“優(yōu)惠券”彈窗向下滑出，同時遮罩消失。

4.6 我的頁面

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

1. 用戶信息（頭像、用戶名、賬戶信息）；
2. 消息提醒；
3. 訂單信息；
4. 廣告活動；
5. 用戶服務(wù)欄。

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

用戶場景：

• 用戶想要更改賬號信息；
• 用戶想要充值；
• 用戶想要把積分兌換成商品；
• 用戶想查看訂單狀態(tài)；
• 用戶想聯(lián)系客服尋求幫助；
• 用戶想退出登錄；
• 用戶想開發(fā)票。

優(yōu)先級：高。

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

頁面邏輯：

• 點擊頁面左上角鈴鐺icon出現(xiàn)消息頁面，提示用戶相關(guān)的優(yōu)惠活動；
• 點擊積分兌換、積分商城出現(xiàn)福利社頁面，可供用戶兌換商品；
• 點擊我的訂單部分的標(biāo)簽欄可查看訂單狀態(tài)、評價訂單和訂單售后；
• 點擊“全部訂單”可查看用戶的所有訂單，并提供開發(fā)票服務(wù)；
• 點擊活動標(biāo)簽可進入相關(guān)活動詳情頁；
• 點擊貨地址可新增和更改現(xiàn)有收貨地址；
• 點擊客服可進入客服與幫助界面；
• 點擊設(shè)置可退出登陸和查看app相關(guān)信息。

頁面交互：

• 點擊頁面左上角鈴鐺icon，活動消息頁面從右側(cè)彈出；
• 點擊“立即開通”按鈕，開通會員的“優(yōu)享會員專場”頁面從右側(cè)彈出；
• 點擊“全部訂單”用戶的所有訂單頁面從右側(cè)彈出；
• 點擊我的訂單區(qū)域相應(yīng)標(biāo)簽（待支付、待配送、配送中、待評價、售后），相應(yīng)頁面從右側(cè)彈出；
• 點擊活動標(biāo)簽，相關(guān)活動詳情頁從右側(cè)彈出；
• 點擊貨地址，我的收貨地址頁面從右側(cè)彈出；
• 點擊客服，客服與幫助界面從右側(cè)彈出；
• 點擊設(shè)置，設(shè)置頁面從右側(cè)彈出。

4.7 吃什么頁面

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

1. 菜譜、食材搜索框；
2. PGC專欄；
3. UGC專欄，橫向列表分為8類，點擊右側(cè)列表圖標(biāo)可展開更多；
4. 用戶頭像。

功能描述：查看菜譜分類、查看菜譜的圖文和視頻信息、查看或加購菜譜里的鏈接商品、查查看用戶主頁、點贊、收藏、分享。

用戶場景：

• 用戶買了商品不知如何制作，想要搜索商品的菜譜；
• 用戶想分享自己的廚藝，獲得自我實現(xiàn)和滿足感；
• 用戶不知道吃什么，想看看他人分享的菜譜尋找靈感；
• 用戶想提升自己的廚藝，需要學(xué)習(xí)一些菜譜。

優(yōu)先級：高

前置條件：

• 點擊頁面底部導(dǎo)航欄的“吃什么“標(biāo)簽；
• 在商品詳情頁菜譜做法區(qū)點擊任一菜譜區(qū)域。

頁面邏輯：

• 點擊搜索框，進入菜譜搜索頁面；
• 點擊頭像進入用戶個人中心；
• 點擊暖心推薦下方圖片進入相關(guān)的內(nèi)容頁面；
• 點擊下方菜譜分類別導(dǎo)航的標(biāo)簽頁面下方出現(xiàn)相應(yīng)類別的推薦菜譜；
• 點擊商品分類tab右側(cè)的列表icon，會展開更詳細的類別供挑選；
• 在今日推薦板塊，用戶可以對喜歡的菜譜進行點贊操作，點贊后會把相應(yīng)菜譜加入到個人中心頁面的點贊區(qū)域；
• 點擊具體的菜譜會直接進入菜譜詳情界面，下拉會出現(xiàn)食材清單區(qū)域，點擊相應(yīng)食材旁的加號，可將商品直接加入購物車，點擊相應(yīng)食材的圖片/視頻，會跳轉(zhuǎn)商品詳情頁；
• 在菜譜詳情界面，可以對菜譜進行點贊、收藏、分享操作；點贊、收藏后會把相應(yīng)菜譜加入到個人中心頁面的點贊、收藏區(qū)域。

頁面交互：

• 上下滑動瀏覽內(nèi)容；
• 點擊搜索框，搜索頁面從右側(cè)彈出，同時字母全鍵盤從頁面底部彈出；
• 點擊用戶頭像，用戶詳情頁從右側(cè)彈出；
• 點擊暖心推薦“優(yōu)鮮小廚”發(fā)布的官方內(nèi)容，相應(yīng)內(nèi)容界面從右側(cè)彈出；
• 點擊菜譜圖片或視頻，菜譜詳情頁從右側(cè)彈出；
• 點擊?圖標(biāo)給用戶點贊，灰色的?會變成玫紅色，再點擊一下玫紅色的?會重新變?yōu)榛疑?/li>

頁面整體思考和建議：

1. “吃什么”頁面為用戶提供了社區(qū)，增強了用戶黏性。
2. 幫助購買了菜品不知如何制作的用戶提供了方便的制作方法。
3. 以前往往是用戶想做什么菜，然后在去搜索相應(yīng)食材，就會比較麻煩?，F(xiàn)在用戶可以直接搜索出菜譜，在菜譜詳情頁的食材清單中，把食材直接加入購物車。
4. 搜索框暫不支持內(nèi)容模糊搜索，不會彈出備選列表。
5. 菜譜圖文詳情頁頁面頂端，每個菜譜只有一張成品圖片，無法點擊圖片放大圖。建議以后擁有自己的社區(qū)后，支持用戶上傳多張成品圖可供左右滑動查看。
6. 用戶暫時只能點贊收藏菜譜，并不能評論和發(fā)布作品，可以讓用戶購買APP上的食材后，分享該商品的做法，并po出自己的成品圖/視頻，同時借助評論功能讓用戶進行交流。
7. 由于大多是第三方APP的用戶在社區(qū)上發(fā)布的作品，所以還沒有關(guān)注功能。
8. UGC區(qū)域的內(nèi)容大多源于豆果美食這一第三方APP，相當(dāng)于是把豆果美食的社區(qū)生態(tài)圈硬搬到自己的平臺。我建議每日優(yōu)鮮后期可以形成自己的社區(qū)，讓自己的用戶在“吃什么”頁面發(fā)布作品。前期，為了加大宣傳，可以邀請一些明星入駐，讓明星在“吃什么”社區(qū)分享自己的作品。

五、總結(jié)

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

注：文檔中所引用的APP截圖均來源于“每日優(yōu)鮮”APP，原型圖均為作者自己制作。

本文由 @Luffy 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自網(wǎng)絡(luò)