起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識盒馬鮮生PRD：解析頁面邏輯與功能設計
盒馬鮮生是阿里巴巴對線下超市完全重構的新零售業態，于2017年7月14日正式開業，主要用生鮮和餐飲高頻消費鎖定消費者。它打破了傳統零售售賣商品的模式，聚焦場景與體驗，實施“零售+外賣+堂食+加工服務”的全新的商品組合。
筆者根據最新的盒馬鮮生APP產品倒推了本篇PRD，若文章中仍有疏漏之處，歡迎各位批評指正，共同交流學習。
文章結構
一、文檔綜述
- 版本修訂記錄
- PRD輸出環境
- 產品定位和目標用戶人群
二、產品結構圖
- 產品功能結構圖
- 產品信息結構圖
三、全局說明
- 功能權限
- 鍵盤說明
- 頁面內交互
- 頁面異常
- 頁面切換
四、頁面邏輯
- 用戶操作主流程圖
- 用戶訂購商品主邏輯
五、頁面詳細功能說明
- 啟動頁
- 登錄/注冊頁
- 首頁
- 商品搜索結果頁面
- 商品詳情頁面
- 分類
- 購物車與訂單結算頁面
六、總結
一、文檔綜述
1.1 版本修訂記錄
1.2?PRD輸出環境
1.3?產品定位和目標用戶人群
盒馬鮮生是阿里巴巴對線下超市完全重構的新零售業態，于2017年7月14日正式開業，主要用生鮮和餐飲高頻消費鎖定消費者。它打破了傳統零售售賣商品的模式，聚焦場景與體驗，實施 ” 零售 + 外賣 + 堂食 + 加工服務 ” 的全新的商品組合。追求不僅僅為顧客提供簡單商品，而是以提供一種生活方式的經營理念。
消費者可到店購買，也可以在盒馬APP下單。盒馬最大的特點之一就是快速配送：門店附近3公里范圍內，30分鐘送貨上門。目前只支持支付寶付款和現金，不接受銀行卡等任何其他支付方式。
盒馬鮮生的目標用戶主要有三類：第一，晚上大部分時間在家的家庭用戶；第二，基于辦公室場景推出針對性便利店或輕餐；第三，周末會去超市帶著孩子出去走走的用戶。
二、產品結構圖
2.1?產品功能結構圖
2.2?產品信息結構圖
三、全局說明
3.1?功能權限
分為登錄狀態和未登錄狀態：
登錄狀態：登錄狀態可進行APP內所有操作。
未登錄狀態：
- 可以瀏覽頁面，如商品信息和分類等；
- 可以分享商品信息、活動信息；
- 無法將商品加入購物車，也無法進入購物車頁面；
- 無法進入“我的”頁面，也無法查看訂單信息和使用優惠券等。
3.2 鍵盤說明
（1）點擊手機號與驗證碼輸入框時，頁面底部彈出數字鍵盤；
（2）點擊其他輸入框頁面底部彈出字母全鍵盤。
3.3?頁面內交互
（1）頂部、底部彈窗
（2）toast、dialog、actionbar彈窗
3.4 頁面異常
3.5?頁面切換
在當前頁面左邊緣處，用右劃手勢快速返回之前頁面。
四、頁面邏輯
4.1 用戶操作主流程圖
4.2 用戶訂購商品主邏輯
五、頁面詳細功能說明
5.1?啟動頁
功能描述：用戶剛打開盒馬鮮生APP。
交互需求：啟動APP后進入啟動頁，約停留兩秒后進入APP首頁。
5.2?登錄/注冊頁
功能描述：手機淘寶快速登錄、支付寶快速登錄及賬戶/密碼登錄。
輸入/前置條件：在盒馬APP點擊所有“購物車”圖標的功能按鈕、點擊加入購物車選項或點擊“我的”功能標簽。
頁面交互：
1. 輸入/前置條件：點擊手機淘寶快捷登錄。
點擊“手機淘寶快捷登錄”，將自動跳轉到淘寶賬戶授權頁面，點擊“確認授權”可立刻登錄；
2. 輸入/前置條件：點擊支付寶快捷登錄。
點擊“支付寶快捷登錄”，將自動跳轉到支付寶賬戶授權頁面，點擊“確認授權”可立刻登錄；
3. 輸入/前置條件：點擊賬號/密碼登錄。
- 點擊“賬戶/密碼登錄”，將跳轉到淘寶賬戶登錄頁面，輸入淘寶賬戶和密碼可登錄；
- 在賬戶登錄頁面下，輸入密碼時默認為不可見狀態，點擊輸入密碼欄左方“眼睛”圖標，密碼轉換成可見狀態
- 點擊“短信驗證碼登錄”可切換登錄方式，輸入合法手機號后點擊“獲取驗證碼”，輸入正確的驗證碼后可登錄；
- 點擊“注冊”可跳轉到快速注冊頁面，輸入合法手機號后點擊”獲取驗證碼”，輸入正確的驗證碼后點擊可快速注冊；
- 選擇“+86”可切換選擇其他國家地區的手機號碼；
- 點擊“賬戶/密碼/手機號/驗證碼輸入框”，頁面底部自動彈出字母全鍵盤。
5.3?首頁
功能描述：用戶瀏覽主要的商品和活動信息等。
輸入/前置條件：打開APP后首先顯示的內容或點擊底部導航欄中的“首頁”功能標簽。
（1）用戶位置定位
頁面邏輯內容：
在選擇收獲地址頁面，用戶點擊“請輸入收獲地址”文本框輸入新地址、或點擊系統默認的地址、或點擊附近地址（可重新定位）、或點擊頁面右上方的新增地址編輯保存后都將會自動跳轉回首頁，用戶位置定位變更為當前已選擇或保存的新地址。
頁面交互：
- 在“首頁”點擊用戶位置定位，選擇收貨地址頁面從右側彈出；
- 在“選擇收貨地址”頁面下點擊“請輸入收獲地址”文本框，頁面變暗；同時字母全鍵盤從底部彈出，文本框在輸入文本后，原文本框提示內容消失，點擊“取消”頁面恢復正常；
- 系統默認地址為上一次的選擇的收貨地址；
- 在“選擇收貨地址”頁面下點擊“新增地址”，新增收貨地址頁面從右側彈出，點擊手機號輸入框，數字全鍵盤從頁面底部彈出；點擊其他內容，輸入框字母全鍵盤從頁面底部彈出；
- 點擊“收貨地址”文本框，選擇收獲地址頁面從右側彈出。
（2）商品搜索框
頁面邏輯：
- 搜索頁面結構分為搜索框、搜索歷史、實時熱搜和新品時令四部分；
- 用戶在搜索框內輸入商品、美食等進行搜索會跳轉至相應的商品搜索結果頁面；
- 系統對已搜索過的內容自動標簽化添加到歷史搜索內容，點擊“垃圾桶”按鈕可刪除搜索歷史；“搜索歷史”規則描述：按搜索的時間倒敘排列，排列方式從左至右、從上至下排列，可展示10條歷史搜索內容，展示排數沒有限制；
- 附近門店實時熱搜內容是系統根據定位，為用戶推薦最近盒馬門店的熱搜商品，點擊相應標簽，進入相應商品推薦頁面；
- 新品時令是系統為用戶推薦的新品和時令商品，點擊相應商品標簽，也會進入相應商品搜索結果頁。
頁面交互：
- 在“首頁”頁面點擊搜索框，搜索頁面從右側彈出，同時字母全鍵盤從頁面底部彈出；
- 搜索框內會自動顯示歷史搜索內容，輸入文本后，歷史搜索內容消失，同時系統會根據輸入的漢字提供相關的搜索關鍵詞；
- 點擊搜索歷史右側的“垃圾桶”按鈕可清除所有歷史搜索內容；
- 點擊附近門店實施熱搜欄右側的“更新”按鈕可更新實時熱搜內容；
- 通過搜索商品內容、點擊搜索歷史標簽、附近XX門店實時熱搜標簽及新品時令標簽，商品搜索結果頁面直接彈出。
（3）功能導航
頁面邏輯：
點擊功能導航按鈕，顯示出系列功能或活動的功能選項，點擊相應的功能或活動選項可進入相關頁面。
頁面交互：
- 在“首頁”的頁面下點擊功能導航按鈕，功能導航標簽欄從搜索欄下方彈出；同時，搜索框邊長覆蓋功能導航按鈕，向上滑動頁面，功能導航標簽欄向上滑動收起，頁面恢復正常；
- 點擊功能導航標簽欄中的功能，如“在線點餐”，相應頁面從右側彈出；
（4）消息中心
頁面邏輯：消息頁面主要包括APP相關的優惠券和活動通知等。
頁面交互：
- 在“首頁”頁面下點擊”消息“按鈕”，消息頁面從頁面右側彈出；
- 所有消息按時間倒序排列；
- 點擊“盒馬小紙條”可跳轉至活動、優惠券頁面，均從右側彈出；
（5）廣告活動banner
頁面邏輯：活動/廣告頁輪播，點擊可轉到相關活動/廣告頁面。
頁面交互：點擊活動/廣告Banner區域，活動/廣告頁面從右側彈出。
（6）商品分類標簽區
頁面邏輯：
- 商品分類標簽區共十類，點擊相應的標簽可進入相關商品推薦頁面。由于十類商品分類的頁面結構和內容極其相似，筆者暫時優先選擇對“新鮮水果”類標簽做分析和說明；
- “新鮮水果”頁面結構分為標題欄，商品標簽欄和商品推薦列表三部分組成；
- 在“新鮮水果”頁面下點擊標題欄中的“搜索”按鈕可進入搜索頁面，點擊“購物車”按鈕可進入購物車頁面；
- 點擊左側商品標簽區的標簽，右側的商品推薦列表會列出商品篩選結果（其中在主標簽“春日嘗鮮”頁面，可根據商品子標簽可以進一步篩選商品）；
- 點擊商品直接進入商品詳情界面，點擊每個商品右方的“購物車”圖標，或點擊商品詳情頁的“加入購物車”功能選項，可將商品加入購物車。
頁面交互：
- 點擊“首頁”頁面中的“新鮮水果”標簽，相應的商品推薦頁面從右側彈出；
- 在“新鮮水果”商品推薦頁面下，點擊標題欄中的“搜索”按鈕，“搜索”頁面從右側彈出；同時，字母全鍵盤從底部彈出，此時在商品搜索頁面點擊“返回”按鈕，返回“新鮮水果”商品標簽頁面；
- 點擊“購物車”按鈕，購物車頁面從右側彈出；同理，點擊“返回”按鈕，返回之前的商品標簽頁面；
- 在商品推薦頁面下，點擊切換左側商品標簽區的標簽，右側的商品推薦列表自動更新直接彈出；
- 右側的商品推薦列表可上下滑動，查看更多信息?；瑒訒r，在上部邊界，上拉可至上一個分類的商品推薦列表；在下部邊界，下拉可至下一個分類的商品推薦列表；
- 點擊商品推薦列表中的商品，商品詳情頁面會從右側彈出；
- 點擊每個商品右方的購物車圖標，或點擊商品詳情頁的加入購物車選項，商品分類頁右上角購物車右角標數字+1，同時會有1s的“商品放入購物車”的動畫；
（7）商品專題活動區
頁面邏輯：
- 商品專題活動區包括“超盒算”、“盒馬平價菜”、“盒馬一百分”和“時令嘗鮮”四個主題活動。點擊主題活動點擊進入專項頁面后，頁面的結構和內容各有不同，但主要內容都是推薦一些相關的活動商品，這里以“超盒算”為例進行介紹。
- “超盒算”頁面結構分為標題欄、標簽欄（今日必搶）和商品推薦列表三部分，點擊商品推薦列表中的商品區域可進入相應商品的詳情頁面；
- 商品圖片左上方顯示商品的活動信息，如特價/買一贈一等，選擇“馬上搶”可將商品加入購物車中，同時會有1s的“商品放入購物車”的動畫；
頁面交互：
- 在首頁下點擊所有商品的專題活動，活動詳情頁面均從右側彈出；
- 在“超盒算”頁面下點擊標題欄中的購物車按鈕，購物車頁面從右側彈出；
- 點擊“馬上搶”按鈕，商品將被自動加入購物車中，同時頁面右上方購物車的角標數字加1；
- 點擊商品推薦列表中的商品，商品詳情頁從右側彈出。
（8）猜你喜歡商品推薦區
頁面邏輯：
- 系統為用戶推薦了一些用戶可能喜歡的商品，用戶可全部查看、也可點擊不同的分類標簽（如下午茶、菜譜、食材等）查看相關商品推薦列表；
- 在商品推薦列表中點擊商品可進入相應的商品詳情頁面。
頁面交互：
- 在“首頁”頁面下用戶點擊“猜你喜歡”標簽區的標簽，功能標簽呈現選中狀態；同時，頁面下方彈出相應類別的商品推薦列表，默認選中標簽為“全部-猜你喜歡”；
- 點擊商品推薦列表中的商品區域，商品詳情頁從右側彈出。
5.4?商品搜索結果頁面
功能描述：用戶搜索商品關鍵詞或選擇其他搜索標簽后進入搜索結果頁面，可以得到相關商品的推薦列表，也可以對搜索結果進行分類、排序和篩選。
輸入/前置條件：在搜索框輸入商品關鍵詞后，點擊“搜索”功能選項或點擊搜索歷史、新品時令等搜索類別中的搜索標簽。
頁面邏輯：
1）在商品搜索結果頁面，篩選排序欄由“分類”、“排序”和“篩選”三個部分組成。點擊各功能標簽，可按條件對搜索結果中的商品進行分類、排序或篩選。如選擇“排序”功能，可選擇默認排序，按價格高到低的方式進行排序和按優惠優先的方式進行排序等。
2）在商品推薦列表內點擊商品區域進入相應商品詳情頁面。
頁面交互：
1）在商品搜索頁面搜索商品內容、點擊搜索標簽等，商品搜索結果頁面直接彈出；
2）點擊“全部分類”、“默認排序”標簽，頁面變暗，產生遮罩層，彈出下拉列表。在下拉列表中點擊相關條件選項，如“價格高到低”，商品會按所選條件進行重新篩選或排序，頁面恢復正常。也可直接點擊頁面遮罩層，商品搜索結果頁面自動恢復；
3）點擊“篩選”標簽，篩選框從屏幕右側彈出，同時頁面左部產生遮罩。在“價格區間”內輸入內容時，數字鍵盤從底部彈出；點擊“品牌”、“是否進口等類別下的”圓角矩形標簽時，標簽呈現選中狀態，外框和文字都變為藍色，并在矩形右下角顯示一個藍色的叉，再次點擊該標簽則恢復正常；
4）點擊“包裝”“乳糖含量”等類別旁的下拉按鈕，相關備選圓角標簽向下展開。同時下拉按鈕旋轉180度，再次點擊收起按鈕，相關標簽收起。點擊遮罩層，篩選框向右滑動消失頁面恢復正常。
5.5 商品詳情頁面
功能描述：用戶在商品詳情頁面可查看商品的具體信息，同時可以分享商品內容和將商品加入購物車。
輸入/前置條件：點擊所有頁面中商品推薦列表中的具體商品。
頁面邏輯：
- 在商品詳情頁面包含五張商品的圖片；
- 點擊商品信息右側“分享”按鈕，選擇分享途徑可進行分享；
- 菜譜列表中包含相關菜品的信息，點擊相關菜譜列表中的菜品可進入相應的菜譜詳情頁面；
- 在相關推薦商品列表中點擊商品可進入相關商品詳情頁面；
- 點擊“加入購物車”選項可直接將商品加入購物車；
頁面交互：
- 在商品的圖片上左右滑動，可查看商品的不同圖片；
- 點擊圖片左上方的“返回”按鈕可返回之前的頁面；
- 滑動菜譜列表可查看其他相關菜品信息，點擊菜譜列表中的菜譜，相應的菜譜詳情頁面從右側彈出；
- 在商品詳情頁面向下拖動可查看商品詳情等其他信息；
- 點擊“分享”按鈕，商品詳情頁面變暗產生遮罩層，同時分享頁面從底部彈出，點擊分享路徑圖標可分享至相關途徑，點擊“取消”按鈕或彈框外，返回到原來的頁面；
- 點擊“加入購物車”選項，右上角購物車角標數字加1，同時會有1s的“商品放入購物車”的動畫；
- 點擊頁面右上方的“購物車”圖標，購物車頁面從右側彈出；
5.6?分類
功能描述：選擇商品的分類標簽，可進入相應的商品推薦頁面。
輸入/前置條件：點擊頁面底部導航欄的“分類“標簽。
頁面邏輯：
- 商品分類頁面由頂部標題欄（包含頁面標題和搜索功能選項）、廣告活動banner區和商品分類標簽區組成；
- 在商品分類頁面下點擊“搜索”按鈕，進入商品搜索頁面；
- 點擊廣告活動banner區的廣告/活動進入相應的活動界面；
- 點擊商品分類標簽區的標簽進入相應的商品推薦頁面；
- 在商品推薦頁面下可通過篩選按鈕直接跳轉至其他分類標簽頁面。
頁面交互：
- 在“分類”頁面下點擊“搜索”按鈕，商品搜索頁面從右側彈出，同時字母全鍵盤從頁面底部彈出；
- 點擊廣告活動banner區的廣告/活動，相應的活動界面從右側彈出；
- 點擊商品分類頁面中的“新鮮水果”標簽，相應的商品推薦頁面從右側彈出；
- 在商品推薦頁面下點擊篩選按鈕，篩選狀態欄從頁面上方彈出，當前頁面背景變暗，產生遮罩層。點擊篩選狀態欄中的其他商品分類標簽選項，可直接跳轉至其他商品分類的推薦頁面，點擊遮罩處，篩選狀態消失，頁面恢復正常。
5.7 購物車與訂單結算頁面
功能描述：用戶選中購物車的商品可以對其進行結算或刪除，也可以改變購物車內商品的數量。
輸入/前置條件：點擊底部導航區的“購物車”功能標簽，或點擊其他頁面右上方的“購物車”按鈕。
頁面邏輯：
- 在購物車頁面下，用戶可以查看曾添加到購物車的商品訂單，也可以選擇商品訂單重新查看商品詳情；
- 用戶可以改變購物車內商品的數量，也可以同時選擇對一種或多種商品進行結算或刪除；
- 用戶在結算的過程中可以更改收貨地址和商品數量、選擇送達時間和是否開發票等，其中必須要確認送達時間才能提交訂單，提交訂單后可進行支付；
- 提交訂單后立即付款跳轉至“支付成功”頁面。
頁面交互：
- 用戶點擊“購物車”按鈕，“購物車”頁面從右側彈出；
- 在購物車頁面下，用戶點擊商品訂單，相應的商品詳情頁面從右側彈出，點擊返回按鈕可返回購物車頁面；
- 用戶點擊商品訂單左側的單選框可以選中商品，用戶可同時選中一種或多種商品，點擊右上方的刪除選項可刪除選中商品，點擊右下方的“去結算”選項，確認訂單頁面從右側彈出；
- 在確認訂單頁面下，用戶點擊收貨地址欄，選擇收貨地址頁面從右側彈出，用戶可對收貨地址進行更改；
- 用戶點擊“選擇送達時間”功能，確認訂單頁面變暗，產生遮罩層，同時時間段選擇頁面從底部彈出，點擊取消則返回確認訂單頁面，用戶選擇相應的時間段后再點擊確定，頁面恢復正常；
- 用戶點擊商品訂單中的“+”“-”按鈕，可改變結算商品的數量；
- 用戶點擊“提交訂單”功能選項，確認訂單頁面變暗，產生遮罩層，同時支付頁面從底部彈出，選擇“立即付款”則可完成訂單的結算，同時跳轉至“支付成功”頁面。
六、總結
盒馬鮮生作為“新零售”的典范，其線上與線下相結合的運營方式也大大加快了企業一體化發展的進程。
隨著線上客戶的日益增多，不斷優化盒馬APP的設計對于提升用戶留存率具有很大的意義。盒馬APP的版本仍處于不斷迭代中，信息框架也在不斷擴大和復雜化，筆者在此僅對盒馬APP主要的功能和流程進行撰寫說明，有一些細節之處仍然存在問題，在此歡迎大家批評指正，我也會繼續努力，撰寫更規范的產品文檔。
作者：冰糖草莓，微信公眾號:Thinkers
本文由 @冰糖草莓 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash, 基于CC0協議
盒馬鮮生收貨地址不在可配送3km范圍內， 商品全都是 24小時發貨的水果
4.1是否取消付款的是否寫反了哈 ??
用戶操作主流程圖那里實在是太雜，可以嘗試用下泳道圖、UML之類來呈現可能會好點
PRD一時爽
一直P一直爽
產品小白想問一下，產品結構圖和產品信息結構圖的區別是什么？？？
請問為什么我的上面沒有盒馬100分和平價菜活動模塊？是因為運營后臺調整了模塊展示還是因為沒下過單，系統按新用戶推薦活動模塊展示的？
分類里面也沒有新鮮水果和蔬菜品類，這和定位有關系？還是針對新用戶和老用的定位展示不同？我的iOS V4.11.0
版本不一樣吧，我寫的是上個月的版本，不過我的現在仍然有你說的，而且新鮮水果和蔬菜應該都有啊 ?? 不太清楚
主流程的取消付款那邊寫反了 ??
的確的確，太匆忙寫反了 ?? 感謝指正