盒馬鮮生PRD：解析頁面邏輯與功能設計
盒馬鮮生是阿里巴巴對線下超市完全重構的新零售業態，於2017年7月14日正式開業，主要用生鮮和餐飲高頻消費鎖定消費者。它打破了傳統零售售賣商品的模式，聚焦場景與體驗，實施“零售+外賣+堂食+加工服務”的全新的商品組合。
筆者根據最新的盒馬鮮生APP產品倒推了本篇PRD，若文章中仍有疏漏之處，歡迎各位批評指正，共同交流學習。
文章結構
一、文檔綜述
二、產品結構圖
三、全局說明
四、頁面邏輯
五、頁面詳細功能說明
六、總結
一、文檔綜述 1.1 版本修訂記錄 1.2 PRD輸出環境
1.3 產品定位和目標用戶人羣
盒馬鮮生是阿里巴巴對線下超市完全重構的新零售業態，於2017年7月14日正式開業，主要用生鮮和餐飲高頻消費鎖定消費者。它打破了傳統零售售賣商品的模式，聚焦場景與體驗，實施 ” 零售 + 外賣 + 堂食 + 加工服務 ” 的全新的商品組合。追求不僅僅爲顧客提供簡單商品，而是以提供一種生活方式的經營理念。
消費者可到店購買，也可以在盒馬APP下單。盒馬最大的特點之一就是快速配送：門店附近3公里範圍內，30分鐘送貨上門。目前只支持支付寶付款和現金，不接受銀行卡等任何其他支付方式。
盒馬鮮生的目標用戶主要有三類：第一，晚上大部分時間在家的家庭用戶；第二，基於辦公室場景推出針對性便利店或輕餐；第三，週末會去超市帶着孩子出去走走的用戶。
二、產品結構圖 2.1 產品功能結構圖
2.2 產品信息結構圖
三、全局說明 3.1 功能權限
分爲登錄狀態和未登錄狀態：
登錄狀態：登錄狀態可進行APP內所有操作。
未登錄狀態：
（1）點擊手機號與驗證碼輸入框時，頁面底部彈出數字鍵盤；
（2）點擊其他輸入框頁面底部彈出字母全鍵盤。
3.3 頁面內交互
（2）toast、dialog、actionbar彈窗
3.4 頁面異常
3.5 頁面切換
在當前頁面左邊緣處，用右劃手勢快速返回之前頁面。
四、頁面邏輯 4.1 用戶操作主流程圖
4.2 用戶訂購商品主邏輯
五、頁面詳細功能說明 5.1 啓動頁
功能描述：用戶剛打開盒馬鮮生APP。
交互需求：啓動APP後進入啓動頁，約停留兩秒後進入APP首頁。
5.2 登錄/註冊頁
功能描述：手機淘寶快速登錄、支付寶快速登錄及賬戶/密碼登錄。
輸入/前置條件：在盒馬APP點擊所有“購物車”圖標的功能按鈕、點擊加入購物車選項或點擊“我的”功能標籤。
頁面交互：
1. 輸入/前置條件：點擊手機淘寶快捷登錄。
點擊“手機淘寶快捷登錄”，將自動跳轉到淘寶賬戶授權頁面，點擊“確認授權”可立刻登錄；
2. 輸入/前置條件：點擊支付寶快捷登錄。
點擊“支付寶快捷登錄”，將自動跳轉到支付寶賬戶授權頁面，點擊“確認授權”可立刻登錄；
3. 輸入/前置條件：點擊賬號/密碼登錄。
功能描述：用戶瀏覽主要的商品和活動信息等。
輸入/前置條件：打開APP後首先顯示的內容或點擊底部導航欄中的“首頁”功能標籤。
（1）用戶位置定位
頁面邏輯內容：
在選擇收穫地址頁面，用戶點擊“請輸入收穫地址”文本框輸入新地址、或點擊系統默認的地址、或點擊附近地址（可重新定位）、或點擊頁面右上方的新增地址編輯保存後都將會自動跳轉回首頁，用戶位置定位變更爲當前已選擇或保存的新地址。
頁面交互：
（2）商品搜索框
頁面邏輯：
頁面交互：
（3）功能導航
頁面邏輯：
點擊功能導航按鈕，顯示出系列功能或活動的功能選項，點擊相應的功能或活動選項可進入相關頁面。
頁面交互：
（4）消息中心
頁面邏輯：消息頁面主要包括APP相關的優惠券和活動通知等。
頁面交互：
（5）廣告活動banner
頁面邏輯：活動/廣告頁輪播，點擊可轉到相關活動/廣告頁面。
頁面交互：點擊活動/廣告Banner區域，活動/廣告頁面從右側彈出。
（6）商品分類標籤區
頁面邏輯：
頁面交互：
（7）商品專題活動區
頁面邏輯：
頁面交互：
（8）猜你喜歡商品推薦區
頁面邏輯：
頁面交互：
功能描述：用戶搜索商品關鍵詞或選擇其他搜索標籤後進入搜索結果頁面，可以得到相關商品的推薦列表，也可以對搜索結果進行分類、排序和篩選。
輸入/前置條件：在搜索框輸入商品關鍵詞後，點擊“搜索”功能選項或點擊搜索歷史、新品時令等搜索類別中的搜索標籤。
頁面邏輯：
1）在商品搜索結果頁面，篩選排序欄由“分類”、“排序”和“篩選”三個部分組成。點擊各功能標籤，可按條件對搜索結果中的商品進行分類、排序或篩選。如選擇“排序”功能，可選擇默認排序，按價格高到低的方式進行排序和按優惠優先的方式進行排序等。
2）在商品推薦列表內點擊商品區域進入相應商品詳情頁面。
頁面交互：
1）在商品搜索頁面搜索商品內容、點擊搜索標籤等，商品搜索結果頁面直接彈出；
2）點擊“全部分類”、“默認排序”標籤，頁面變暗，產生遮罩層，彈出下拉列表。在下拉列表中點擊相關條件選項，如“價格高到低”，商品會按所選條件進行重新篩選或排序，頁面恢復正常。也可直接點擊頁面遮罩層，商品搜索結果頁面自動恢復；
3）點擊“篩選”標籤，篩選框從屏幕右側彈出，同時頁面左部產生遮罩。在“價格區間”內輸入內容時，數字鍵盤從底部彈出；點擊“品牌”、“是否進口等類別下的”圓角矩形標籤時，標籤呈現選中狀態，外框和文字都變爲藍色，並在矩形右下角顯示一個藍色的叉，再次點擊該標籤則恢復正常；
4）點擊“包裝”“乳糖含量”等類別旁的下拉按鈕，相關備選圓角標籤向下展開。同時下拉按鈕旋轉180度，再次點擊收起按鈕，相關標籤收起。點擊遮罩層，篩選框向右滑動消失頁面恢復正常。
5.5 商品詳情頁面
功能描述：用戶在商品詳情頁面可查看商品的具體信息，同時可以分享商品內容和將商品加入購物車。
輸入/前置條件：點擊所有頁面中商品推薦列表中的具體商品。
頁面邏輯：
頁面交互：
功能描述：選擇商品的分類標籤，可進入相應的商品推薦頁面。
輸入/前置條件：點擊頁面底部導航欄的“分類“標籤。
頁面邏輯：
頁面交互：
功能描述：用戶選中購物車的商品可以對其進行結算或刪除，也可以改變購物車內商品的數量。
輸入/前置條件：點擊底部導航區的“購物車”功能標籤，或點擊其他頁面右上方的“購物車”按鈕。
頁面邏輯：
頁面交互：
盒馬鮮生作爲“新零售”的典範，其線上與線下相結合的運營方式也大大加快了企業一體化發展的進程。
隨着線上客戶的日益增多，不斷優化盒馬APP的設計對於提升用戶留存率具有很大的意義。盒馬APP的版本仍處於不斷迭代中，信息框架也在不斷擴大和複雜化，筆者在此僅對盒馬APP主要的功能和流程進行撰寫說明，有一些細節之處仍然存在問題，在此歡迎大家批評指正，我也會繼續努力，撰寫更規範的產品文檔。
作者：冰糖草莓，微信公衆號:Thinkers
本文由 @冰糖草莓 原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash, 基於CC0協議
