起點學院課程

PRD:倒推“每日優鮮”app產品需求文檔

56 評論 3.2萬 瀏覽 371 收藏 37 分鐘
15天0基礎極速入門數據分析,掌握一套數據分析流程和方法,學完就能寫一份數據報告!了解一下>>

疫情過后,線上買菜會成為趨勢嗎?每日優鮮作為一個比較成熟的O2O生鮮電商平臺,我根據現有的每日優鮮app進行了文檔倒推,對產品結構、主要業務流程、主要窗口的頁面邏輯和交互進行了簡要的分析和說明。

該文檔主要是從前端用戶體驗方面設計的,剛開始學習相關知識,肯定有很多不足,還請各位大佬多多指正!鞠躬~

版本修訂歷史:

PRD輸出環境:

圖標:

目錄

一、產品概述

1.1產品背景介紹

1.2產品概述

1.3產品定位

1.4目標用戶

二、產品結構及業務流程

2.1產品功能結構圖

2.2產品信息結構圖

2.3業務流程圖——用戶購買功能

三、全局說明

3.1功能權限

3.2鍵盤說明

3.3頁面內交互

四、頁面功能詳細說明

4.1登錄頁

4.2首頁

4.3商品詳情頁

4.4分類頁面

4.6我的頁面

4.7吃什么頁面

五、總結

一、產品概述

1.1 產品背景介紹

互聯網的發展、年輕消費者消費習慣的改變、冷鏈物流技術的不斷進步,加之新零售的機遇,我國生鮮電商行業保持了較快的發展速度。

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

精選生鮮需求上升:進口優質生鮮市場份額上升。

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

1.2 產品概述

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

1.3 產品定位

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

1.4 目標用戶

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

二、產品結構及業務流程

2.1 產品功能結構圖

2.2 產品信息結構圖

2.3 業務流程圖——用戶購買功能

三、全局說明

3.1 功能權限

(1)是否登陸

  • 登錄狀態可進行APP內所有操作
  • 非登錄狀態下:無法訂單結算;無法進入消息、邀請有禮以及好友助力提現等活動頁面、“吃什么”社區頁面

(2)是否會員

  • 普通用戶:沒有會員權益,其余功能均可用
  • 優享會員:商品享有會員價、可以參與超級會員日活動、積分加倍、可以分享給好友會員體驗卡、擁有專屬客服

3.2 鍵盤說明

(1)登陸頁面中點擊手機號輸入框,頁面底部彈出數字鍵盤;

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

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

3.3 頁面內交互

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

頁面異常如下圖所示:

四、頁面功能詳細說明

每日優鮮底部標簽欄有5個標簽,分別是:首頁、分類、吃什么、購物車、我的。接下來我將圍繞這五個標簽頁詳細闡述具體的頁面功能。

4.1 登錄頁

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

用戶場景:

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

優先級:高。

前置條件:打開每日優鮮后選擇我的標簽頁,即可看到登錄選項,或點擊任意一個游客身份功能受限鍵則可以跳轉到該頁面。

頁面邏輯:

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

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

頁面交互:

  • 手機號默認+86,輸入限制11位,當輸入大于11位數字時,彈出Toast提示“您輸入的手機號超過了11位”提示文本;
  • 點擊手機號、驗證碼輸入框時,數字鍵盤從底部向上彈出;
  • 獲取驗證碼后,按鈕內容變為“60S后重發”并降低灰度開始60秒倒數,60S后按鈕內容變回原本內容;
  • 用戶點擊第三方登陸下的三個按鈕,相應的第三方授權頁面從頁面右側彈出。

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

4.2 首頁

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

優先級:

前置條件:打開每日優鮮APP后首先顯示的內容或點擊底部導航欄中的“首頁”功能標簽。

頁面結構:

  1. 用戶位置定位;
  2. 商品搜索框;
  3. 活動/廣告banner頁,6例活動/廣告頁輪播;
  4. 商品分類tab導航,共10類;
  5. 活動標簽區;
  6. 熱銷商品推薦區;
  7. 商品專題活動區;
  8. 特色商品分類欄專題區,共7類。

刷新機制:

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

邏輯內容詳細說明:

1. 用戶位置定位

系統默認顯示上一次用戶選擇的地址,點擊后頁面跳轉至選擇其他收貨地址頁面。

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

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

頁面邏輯:

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

頁面交互:

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

思考改進:用戶在文本搜索框內輸入具體地址內容進行搜索時,在下拉備選列表中的文本與輸入框中搜索內容相關的文本可以被加粗顯示。

2. 商品搜索框

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

功能:搜索商品。

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

頁面邏輯:

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

頁面交互:

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

3. 活動/廣告banner頁

頁面邏輯:6例活動/廣告頁輪播,點擊可轉到相關活動/廣告頁面。

頁面交互:點擊活動/廣告Banner區域,活動/廣告頁面從右側彈出。

4. 商品分類tab導航

用戶場景:用戶知道自己想要購買商品的類別,想要在某一特定類別內挑選商品。

頁面邏輯:商品分類標簽區共十類,點擊相應的標簽可進入“分類”頁面,同時出現相關商品推薦頁面。

頁面交互:點擊“首頁”頁面中的商品分類標簽會迅速跳轉至“分類”頁面,同時顯示出tab對應的商品列表。

5. 活動標簽區

用戶場景:價格敏感型用戶或者忠實用戶想要通過各種活動優惠來節省一筆開支。

頁面邏輯:活動標簽區共四類,點擊相應的標簽可進入相應的活動頁面。

頁面交互:點擊“首頁”頁面中的活動標簽,相應的活動頁面會從右側彈出。

6. 熱銷商品推薦區

用戶場景:用戶不知道購買哪種商品,從眾心理會驅使用戶瀏覽熱銷商品。

頁面邏輯:

  • 熱銷商品排行榜為用戶推薦附近多數用戶購買的商品,按銷量百分比降序排列,點擊相應標簽,可以進入相應商品的詳情頁面,或直接點擊加號,將商品加入購物車中。
  • 點擊查看更多直接跳轉至熱銷排行榜頁面。

頁面交互:

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

7. 商品專題活動區

用戶場景:用戶想要購買打折或有優惠價格的活動商品。

頁面邏輯:

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

頁面交互:

  • “首頁”頁面中的活動標簽,相應的活動頁面會從右側彈出。
  • 點擊“每日秒殺”活動頁面商品列表中的商品區域右側會彈出相應商品的詳情頁面。
  • 點擊“每日秒殺”活動頁面左下角的購物車按鈕,購物車頁面從右側彈出。
  • 點擊“馬上搶”按鈕,商品將被自動加入購物車中,同時頁面左下方購物車上的數字加1。

8. 特色商品分類欄專題區

用戶場景:

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

頁面邏輯:

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

頁面交互:

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

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

4.3 商品詳情頁

頁面結構:

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

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

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

頁面邏輯:

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

頁面交互:

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

4.4 分類頁面

頁面結構:

  1. 搜索框;
  2. 商品分類tab導航(主標簽),共11類;
  3. 商品細分類別導航(子標簽),不同商品大類的細分類別不同;
  4. 廣告banner;
  5. 具體商品列表。

功能描述:選擇商品的分類標簽,可進入相應的商品推薦頁面。

用戶場景:

  • 用戶想要通過商品分類挑選商品;
  • 用戶想參考商品的銷量來選擇商品;
  • 價格敏感的用戶需要對商品進行價格排序,從而挑選出低價商品。

優先級:

前置條件:點擊頁面底部導航欄的“分類“標簽。

頁面邏輯:

  • 點擊搜索框,進入商品搜索頁面;
  • 點擊廣告banner區的廣告進入相應的廣告界面;
  • 點擊商品分類tab導航的標簽頁面右側出現相應的商品大類的推薦頁面;
  • 點擊左側商品細分類別導航的標簽頁面右側出現相應細分類類別的推薦頁面;
  • 商品可以按綜合、銷量、價格進行排序顯示;
  • 點擊商品直接進入商品詳情界面,或點擊加號,可將商品直接加入購物車。

頁面交互:

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

4.5 購物車頁面

頁面結構:

  1. 用戶位置定位;
  2. 購物車商品列表;
  3. 猜你喜歡商品推薦區;
  4. 結算區。

功能描述:選擇想要購買的商品,點擊結算按鈕即可下單支付。

用戶場景:用戶想要挑選商品進行結算。

優先級:

前置條件:

  • 點擊頁面底部導航欄的“購物車“標簽;
  • 點擊商品詳情頁左下角購物車icon;
  • 點擊菜譜詳情頁右上角購物車icon;
  • 點擊廣告活動詳情頁購物車浮標。

頁面邏輯:

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

頁面交互:

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

4.6 我的頁面

頁面結構:

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

功能描述:查看訂單狀態、活動消息提醒、兌換積分、聯系客服、參加優惠活動、更改賬戶信息。

用戶場景:

  • 用戶想要更改賬號信息;
  • 用戶想要充值;
  • 用戶想要把積分兌換成商品;
  • 用戶想查看訂單狀態;
  • 用戶想聯系客服尋求幫助;
  • 用戶想退出登錄;
  • 用戶想開發票。

優先級:高。

前置條件:點擊頁面底部導航欄的“我的”標簽。

頁面邏輯:

  • 點擊頁面左上角鈴鐺icon出現消息頁面,提示用戶相關的優惠活動;
  • 點擊積分兌換、積分商城出現福利社頁面,可供用戶兌換商品;
  • 點擊我的訂單部分的標簽欄可查看訂單狀態、評價訂單和訂單售后;
  • 點擊“全部訂單”可查看用戶的所有訂單,并提供開發票服務;
  • 點擊活動標簽可進入相關活動詳情頁;
  • 點擊貨地址可新增和更改現有收貨地址;
  • 點擊客服可進入客服與幫助界面;
  • 點擊設置可退出登陸和查看app相關信息。

頁面交互:

  • 點擊頁面左上角鈴鐺icon,活動消息頁面從右側彈出;
  • 點擊“立即開通”按鈕,開通會員的“優享會員專場”頁面從右側彈出;
  • 點擊“全部訂單”用戶的所有訂單頁面從右側彈出;
  • 點擊我的訂單區域相應標簽(待支付、待配送、配送中、待評價、售后),相應頁面從右側彈出;
  • 點擊活動標簽,相關活動詳情頁從右側彈出;
  • 點擊貨地址,我的收貨地址頁面從右側彈出;
  • 點擊客服,客服與幫助界面從右側彈出;
  • 點擊設置,設置頁面從右側彈出。

4.7 吃什么頁面

頁面結構:

  1. 菜譜、食材搜索框;
  2. PGC專欄;
  3. UGC專欄,橫向列表分為8類,點擊右側列表圖標可展開更多;
  4. 用戶頭像。

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

用戶場景:

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

優先級:

前置條件:

  • 點擊頁面底部導航欄的“吃什么“標簽;
  • 在商品詳情頁菜譜做法區點擊任一菜譜區域。

頁面邏輯:

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

頁面交互:

  • 上下滑動瀏覽內容;
  • 點擊搜索框,搜索頁面從右側彈出,同時字母全鍵盤從頁面底部彈出;
  • 點擊用戶頭像,用戶詳情頁從右側彈出;
  • 點擊暖心推薦“優鮮小廚”發布的官方內容,相應內容界面從右側彈出;
  • 點擊菜譜圖片或視頻,菜譜詳情頁從右側彈出;
  • 點擊?圖標給用戶點贊,灰色的?會變成玫紅色,再點擊一下玫紅色的?會重新變為灰色。

頁面整體思考和建議:

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

五、總結

隨著互聯網發展的越來越成熟,生鮮電商作為生鮮流通新渠道,發展速度快,成長空間廣闊,導致新的生鮮電商不斷增加,巨頭布局持續擴大,行業競爭還在持續升級。每日優鮮從思路、模式到路徑,都需要創新,才能在眾多生鮮平臺中脫穎而出。

注:文檔中所引用的APP截圖均來源于“每日優鮮”APP,原型圖均為作者自己制作。

 

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

題圖來自網絡

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
起點學院課程
評論
評論請登錄
  1. 文檔非常值得學習,可是我的原型GIF格式插入文檔就不動了,請問一下您是轉成網頁形式存儲的嗎還是?

    回復
    1. 謝謝~如果插入word文檔,電腦上看著是不動的噢,把word文檔發送到手機上打開就能看到動態原型圖啦

      回復
    2. 謝謝大神回復,您用的不是word文檔寫的嗎?

      回復
    3. 是word寫的哈~

      回復
  2. 請問下,圖片左右滑動的效果,是怎么實現的呢?

    回復
    1. 用Axure的動態面板實現的

      回復
  3. 請問一下AXURE原型圖怎么實現動態效果的

    回復
    1. 用的LICEcap

      回復
  4. 同比叮咚、美團買菜,為啥每日優鮮商詳不開放評論呢?

    回復
    1. 每日優鮮主打全品類精選SKU,再加上蔬菜水果等商品不同批次可能會有差別,消費者評價的話參考意義沒有其他種類商品大,所以每日優鮮現在才沒開放吧。百果園的評價也開放了,但評價的人其實很少。不過現在每日優鮮除了生鮮蔬菜水果,它還賣一些日用百貨。我覺得后期可能它也會開放評論區吧。

      回復
    2. 我覺得還是因為定位的人群不一樣。叮咚買菜側重于日常買菜和生鮮,菜品種類和奶制品,豆制品種類明顯比每日優鮮多,相對應的,用的家庭主婦和年齡大的人就多。他們的購物習慣是想要看評論的,因為需要貨比三家。每日優鮮更像是一個類似全品類的平臺,用的年輕人和上班族比較多,從界面設計就可以看出來,更加輕快有活力,這類人群自然不喜歡,也沒功夫去評論,所以,開設評論的意義不是很大。

      回復
  5. 雖然不錯,但是,產品文檔不僅僅于此,這個東西,設計師畫的比你漂亮。產品需要邏輯,比如首頁的商品,一個平臺那么多商品和商家,憑什么就顯示的是你,怎么來的,每個數據,每個排序···

    回復
    1. 感謝指點,以后會注意邏輯部分的~

      回復
  6. 自學的嗎? 你已經入行了嗎

    回復
    1. 是的,不過還沒入行,很多想法都還停留在表面??

      回復
  7. 請教下在流程圖里好像沒有用戶取消訂單的流程,這個是怎么考慮的呢?以及產品信息結構圖的目的是什么啊,給研發看,每條對應一個字段嗎?

    回復
    1. 我當時只列出了最簡單的用戶下單到收到貨物這種最簡單直接的流程,用戶結算后取消訂單這一操作是存在的,下次會注意把流程圖畫得更詳細一點,謝謝提醒。產品信息結構圖可以作為開發建立數據庫的參考依據,有助于開發理解產品方案。開發根據信息結構圖來設計數據表,從而實現產品功能。至于最終是不是每條對應一個字段,我認為還是需要進行溝通確定的。個人拙見,如有不妥,還請斧正。

      回復
  8. 寫的很詳細,學習了 ??

    回復
    1. 謝謝~

      回復
  9. 寫的很棒呀,繼續加油

    回復
    1. 謝謝~

      回復
  10. 厲害了,向你學習

    回復
    1. 謝謝,一起加油

      回復
  11. 我想問一下,原型是怎么做成gif文件的,非常感謝

    回復
    1. 官網下個LICEcap,可以直接存為gig,很方便

      回復
  12. 你好,請問原型是用AXURE畫的嗎?

    回復
    1. 是的

      回復
  13. 寫得還蠻詳細的~~期待后續更新~~關注了~

    回復
    1. 謝謝~~

      回復
  14. 很好,學習了,希望作者能出個后臺文檔,謝謝??

    回復
    1. 謝謝,我會繼續努力的~??

      回復
    2. 你是說每日優鮮的后臺嘛……

      回復
    3. 我是說針對這一個文檔相應的后臺文檔

      回復
    4. 是的,至于是不是每日優鮮的后臺嘛。。。。。??醋髡???

      回復
    5. 用過

      回復
  15. 收藏了??

    回復
    1. 哈哈謝謝!互相學習~

      回復
  16. 希望能出一節ui教程~

    回復
    1. 好的??

      回復
  17. 優秀! ?

    回復
    1. 謝謝??

      回復
  18. UI設計做的也太棒了 考慮出個教程嗎??

    回復
    1. 謝謝喜歡!我購物車和點贊的交互都還沒做進去,下次爭取出個完整版的教程!??

      回復
    2. 關注了!期待你的交互教程!

      回復
  19. 棒!

    回復
    1. 謝謝??!

      回復
  20. 寫的很好,謝謝分享

    回復
    1. 謝謝!

      回復
  21. 寫的比較全面 繼續加油

    回復
    1. 謝謝~

      回復
  22. 謝謝分享

    回復
    1. 謝謝!歡迎點評~

      回復
  23. 期待作者更新更多同類產品的PRD

    回復
    1. 謝謝^_^

      回復
  24. 太贊了,關注你了。希望還有下一章

    回復
    1. 感謝認可??!:)

      回復