作為一個決心入行的產品準新人，寫了上一篇產品分析報告后，又繼續深入學習研究了一個月，現筆者根據最新的“盒馬”App產品倒推了本篇PRD，肯定存在很多疏漏之處，請各位前輩幫忙指正，感謝！

學習RPD之初，了解到RPD有word和axure兩種書寫載體，從閱讀體驗來看，用word來寫的PRD很難一個文檔覆蓋完整需求，也不是一份可讀性很強的PRD文檔。在本網站上看到了@小白菜用Axure寫的一RPD后，決定自己也嘗試直接在Axure原型中撰寫PRD。再此對文章作者表示感謝。

Axure中RPD截圖如下：

（右擊，在新標簽頁中打開即可查看大圖）

原型體驗鏈接：https://sekb0c.axshare.com

用Axure寫完RPD后，再將其整理成word格式RPD，如下文所示：

文檔目錄：

1. 文檔綜述

1.1 版本修訂記錄

1.2 PRD輸出環境

1.3 產品定位和目標用戶人群

2. 產品結構圖

2.1 產品功能結構圖

2.2 產品信息結構圖

3. 全局說明

3.1 權限說明

3.2 鍵盤說明

3.3 頁面異常

3.4 頁面內交互

3.5 頁面間交互

3.6 更多操作

4. 頁面邏輯

4.1 用戶操作主流程圖

4.2 用戶訂購商品主邏輯

5. 頁面詳細功能說明

5.1 啟動頁

5.2 登陸/注冊頁

5.3 首頁結構概述

5.3.1 “首頁上”邏輯內容/頁面交互詳細說明

5.3.2 “首頁中”邏輯內容/頁面交互詳細說明

5.3.3 “首頁下”邏輯內容/頁面交互詳細說明

5.4 分類頁面

5.5 商品詳情頁面

5.6 購物車與訂單的支付頁面

6.?總結

1. 文檔綜述

1.1 版本修訂記錄

1.2 PRD輸出環境

1.3 產品定位和目標用戶人群

盒馬鮮生于2017年7月14日正式開業，其是超市、餐飲和菜市場的結合。消費者在門店購物需要下載盒馬App，且只支持支付寶付款，不接受現金、銀行卡等任何其他支付方式。同樣，消費者也直接在盒馬App下單。本文介紹的產品即為盒馬App。

盒馬鮮生是阿里巴巴對線下超市完全重構的新零售業態。盒馬最大的特點之一就是快速配送：門店附近3公里范圍內，30分鐘送貨上門。保證用戶在盒馬App內可以購買到和門店一樣新鮮的商品。

盒馬主要的目標用戶為：第一，晚上大部分時間在家的家庭用戶；第二，基于辦公室場景推出針對性便利店或輕餐；第三，周末會去超市帶著孩子出去走走的用戶。

2. 產品結構圖

2.1 產品功能結構圖

（右擊，在新標簽頁中打開即可查看大圖）

2.2 產品信息結構圖

（右擊，在新標簽頁中打開即可查看大圖）

3. 全局說明

3.1 權限說明

分為登錄和未登錄狀態：

（1）登錄狀態

登錄狀態可進行App內所有操作。

（2）未登錄狀態

• 可以瀏覽常規的商品信息、活動信息；
• 可分享商品信息、活動信息；
• 可定位附近地址；
• 無法輸入收貨地址和新增地址；
• 無法將商品加入購物車，
• 無法進入購物車；
• 無法查看“我的”界面，如訂單情況、咨詢客服。

3.2 鍵盤說明

（1）點擊手機號和校驗碼輸入框時頁面底部彈出數字鍵盤；

（2）點擊其他輸入框頁面底部彈出字母全鍵盤。

3.3 頁面異常

3.4 頁面內交互

（1）頂部、底部彈窗

（2）toast、dialog、actionbar彈窗

備注：

（1）Toast 提示框

Toast提示框是一種非模態彈窗，它彈出一個小信息，作為提醒或消息反饋來用，一般用來顯示操作結果，或者應用狀態的改變?？紤]到Toast提示框顯示的時間較短（一般只有幾秒種）、占用區域不大，它很容易被用戶忽略，所以Toast不適合承載過多的文字和重要信息。

（2）Dialog 對話框

Dialog對話框是一種模態彈窗。當用戶進行了敏感操作，或者當App內部發生了較為嚴重性的狀態改變，這種操作和改變會帶來影響性比較大的行為結果，在該結果發生前以Dialog對話框的彈窗形式告知用戶且讓用戶進行功能選擇。比如退出App、進行付費下載等功能操作。一般情況下Dialog由標題、信息內容和功能按鈕組成，只有當用戶點擊了某個功能按鈕后彈窗才會消失，App隨即執行該功能操作，進入相應的功能流程。

（3）Actionbar功能框

Actionbar可以看成是Dialog的一種延伸設計，兩者都是模態彈窗，用戶必須進行回應，否則彈窗不會消失，用戶無法繼續其它操作。Actoinbar比Dialog擁有更多的功能按鈕，提供給用戶更多的功能選擇，Acionbar一般都設計有一個默認的“取消”功能按鈕，點擊該按鈕后關閉彈窗。在iOS中，Actionbar的樣式比較常見的是文字列表框，它出現在頁面底部，以簡潔的功能描述性文字展示功能按鈕，敏感的功能操作一般用紅色字體標出（也可以設計其它顏色以突出某個功能按鈕）。

3.5 頁面間交互

3.6 更多操作

4. 頁面邏輯

4.1 用戶操作主流程圖

（右擊，在新標簽頁中打開即可查看大圖）

4.2 用戶訂購商品主邏輯

（右擊，在新標簽頁中打開即可查看大圖）

5. 頁面詳細功能說明

5.1 啟動頁

使用場景：

用戶剛打開盒馬APP。

交互需求：

• 啟動APP后，進入歡迎頁，歡迎頁等待2秒后進入廣告頁；
• 廣告頁不做任何操作等待3秒，進入App首頁；
• 點擊廣告圖片右上方“跳過”按鈕，進入App首頁；
• 點擊廣告頁圖片立即進入廣告詳情頁，廣告詳情頁可在右上角點擊購物車和分享，在廣告詳情頁點擊返回進入App首頁。

5.2 登陸/注冊頁

“盒馬”App的登錄方式采用手機淘寶快捷登錄、支付寶快捷登錄（調用手淘和支付寶授權接口登錄）及賬號密碼登錄相結合的方式。盒馬生鮮屬于阿里巴巴旗下產品，因此界面設計上突出手機淘寶和支付寶的顏色，有意引導用戶使用這二者之一進行登錄。這樣最大的便捷之處就是省去 繁瑣的注冊流程，不再需要輸入的動作。體驗非常友好。

使用場景：

當用戶第一次使用該應用，新增地址或者將商品加入購物車時。

交互需求：

（1）輸入/前置條件：點擊手機淘寶快捷登錄。

• 點擊“手機淘寶快捷登錄”按鈕時，調出手淘授權接口，進行登錄操作；
• 在“淘寶登錄”界面內，點擊左上角“取消”，會立即返回盒馬App“賬戶登錄”界面，并且出現“您已取消淘寶授權登錄”的toast彈框字樣。彈出后背景頁面顏色不變，懸浮2s后消失。
• 在“淘寶登錄”界面內，點擊右上角“幫助”，會跳轉至“阿里小蜜”的智能助理窗口，跳轉過程中會顯示“正在加載”的toast彈框字樣。彈出后背景顏色不變，懸浮直至阿里小蜜頁面顯示。

（2）輸入/前置條件：點擊支付寶快捷登錄。

• 點擊“支付寶快捷登錄”按鈕時，調出支付寶授權接口，進行登錄操作；
• 在“支付寶登錄”界面內，點擊左上角“首頁”，會立即返回盒馬App“賬戶登錄”界面，并且出現“您已取消支付寶授權登錄”的toast彈框字樣。彈出后背景頁面顏色不變，懸浮2s后消失。

（3）輸入/前置條件：點擊賬號/密碼登錄

• 點擊“賬號/密碼登錄”按鈕，跳轉到賬號/密碼登錄頁面；
• 獲取焦點在“賬戶”輸入框，字母全鍵盤從頁面底部彈出。若此時焦點轉換至“登錄密碼”輸入框，字母鍵盤不消失但是鍵盤只能輸入字母和數字，無法輸入漢字；若此時焦點轉換至空白處，字母全鍵盤向下收回。
• 密碼輸入時，密碼默認為不可見狀態，點擊右方“眼睛”圖案，密碼可以轉換成可見狀態。
• 點擊“忘記密碼”按鈕，會跳轉至“找回密碼“頁面，跳轉過程中會顯示“正在加載”的toast彈框字樣。彈出后背景顏色不變，懸浮直至找回密碼頁面顯示。獲取焦點至“登錄名”輸入框，輸入登錄名，拖動滑塊驗證，驗證成功后，跳轉至手機校驗碼安全監測狀態。（此處找回密碼的操作設計到淘寶APP邏輯，故不做詳述。）
• 點擊“免費注冊”按鈕，跳轉至“注冊”界面后，焦點默認在“手機號”輸入框，數字鍵盤默認彈出，國家地區默認“中國大陸+86″，選擇“+86”可切換其他國家地區的手機號碼；當輸入手機號正確時，點擊“下一步”按鈕跳轉至“安全校驗”界面，當手機號碼不正確（超出或不足11位）時不直接提示不符合規定，而是在“安全校驗”界面驗證時，會出現“手機號碼格式不正確，請重新輸入”的toast彈框字樣，懸浮2s后返回“注冊”頁面。

思考：此處盒馬App在輸入手機號之初，沒有提示手機號碼是否合法，而是跳轉至“安全校驗”界面驗證之后才提示，浪費了用戶的時間，筆者認為可以在輸入手機號時在格式上提前攔截。

5.3 首頁結構概述

5.3.1 “首頁上”邏輯內容/頁面交互詳細說明

（1） 用戶位置定位

使用場景：

用戶想在盒馬App中定位想要送達的目的地。

頁面邏輯內容：

在選擇收貨地址頁面，用戶點擊“請輸入您的收貨地址”文本框輸入新地址、或點擊頁面中已經保存的“我的收貨地址”內容、或點擊附近地址、抑或點擊頁面右上方的“新增地址”編輯并保存后，選擇收貨地址頁面轉回只App首頁，此時用戶定位位置變為當前已修改的新地址。

頁面交互需求：

• 系統默認情況GPS自動定位至上一次的定位地址，而不會實時定位；
• “首頁”頁面下點擊用戶位置定位，選擇收貨地址頁面從底部彈出；
• “選擇收貨地址”頁面下點擊“請輸入您的收貨地址”文本框，字母全鍵盤從底部彈出，頂部“返回符號、新增地址和選擇收貨地址”字樣、我的收貨地址及附近地址等頁面內容隱藏；
• “選擇收貨地址”頁面下點擊新增地址，新增地址頁面從右側彈出；
• “新增收貨地址”頁面下，一是點擊“收貨地址”，地圖界面從右側彈出；二是點擊“門牌號”和“聯系人”文本框輸入內容時字母全鍵盤從底部彈出；三是點擊“手機號”文本框輸入內容時字母全鍵盤切換成數字九宮格鍵盤。點擊空白處鍵盤消失。

（2）商品搜索欄

使用場景：

用戶想在盒馬App中搜索他喜歡的分類或內容。

頁面邏輯內容：

• 點擊搜索框后，輸入搜索內容，可跳轉至商品搜索頁面；
• 搜索頁面結構分為文本框搜索、搜索歷史、“附件XX門店” 實時熱搜和新品時令四部分內容；
• 用戶輸入商品名稱進行搜索（支持內容模糊搜索），搜索字數無限制，搜索完成后頁面轉至搜索的商品搜索結果頁；
• 系統對已搜索過的內容自動標簽化添加到“搜索歷史”，“搜索歷史”規則描述：按搜索的時間倒敘排列，排列方式從左至右、從上至下排列，可展示10條歷史搜索內容，展示排數沒有限制，可點擊垃圾桶圖標清除所有歷史搜索內容；
• 附近XX門店實時熱搜是系統根據定位為用戶推薦的最近的盒馬會員門店的熱搜商品，點擊相應商品標簽，進入相應商品搜索結果頁；
• 新品時令是系統為用戶推薦的新品和時令商品，點擊相應商品標簽，同樣會進入相應商品搜索結果頁；
• 商品搜索結果頁面的結構為搜索框、購物車入口、篩選排序欄和搜索推薦商品；
• 篩選排序欄分為“分類”、“排序”和“篩選”：“分類”下拉列表點擊時列表將從上到下展開，包括全部分類、乳品烘焙、盒馬云超、飲料沖調等共14個選項；“排序”下拉列表點擊時列表將從上到下展開，包括默認排序、價格高到低、價格低到高、銷量高到低和優惠優先5個選項；“篩選”下拉列表點擊時將從右側彈出一個篩選框，包括價格篩選（最低價到最高價）和品牌篩選，品牌篩選默認顯示9個（3×3行），點擊下拉按鈕可顯示全部品牌；
• 標簽欄是可與搜索欄組合，如“牛油果”+“奧妙”，“牛油果+酸奶”，通過點擊各個標簽，商品列表將把包含搜索內容+標簽內容的商品羅列出來；
• 在商品搜索頁內點擊相應商品區域進入相應商品詳情頁面。

頁面交互需求：

• “首頁”頁面下點擊商品搜索框，商品搜索頁面淡入，外賣頁淡出，字母全鍵盤從底部彈出；
• 文本框系統會自動顯示歷史搜索內容，在輸入文本之后，歷史搜索內容消失；
• 通過搜索商品內容、點擊搜索歷史標簽、附近XX門店及新品時令標簽，商品搜索結果頁面直接彈出；
• 點擊“分類”、“排序”標簽，下拉列表彈出后，原商品搜索結果頁面變暗；再次點擊標簽，下拉列表原路收回，商品搜索結果頁面恢復；
• 商品搜索結果頁面下，商品列表可上下滑動，顯示更多信息，滑動時上、下部均有邊界，上部為阻尼拖拽，下部會在邊界處更新內容。
• 點擊“篩選”標簽，會從屏幕右側彈出一個比屏幕小的篩選框，同時設置顯示遮罩；點擊設置“價格區間”時從底部彈出數字鍵盤，點擊“品牌”圓角矩形標簽時，圓角矩形外框和文字都設置為藍色，并在矩形右下角顯示一個藍色的叉，再次點擊已選中的圓角矩形則恢復原來的樣式；最多只能選擇一個品牌；點擊遮罩，篩選框向右滑出消失。

（3）掃碼

使用場景：

用戶想在盒馬App中通過掃描條形碼/二維碼搜索商品，或者在盒馬會員實體店內出示付款碼進行付款。

頁面邏輯內容：

在首頁，用戶點擊“掃描”按鈕進入掃碼頁面，此頁面有兩大模塊，一是掃碼，而是付款?！皰叽a”對象可以是商品條形碼，也可以是二維碼，可直接拍照，也可掃描手機相冊中的掃碼圖片。點擊時鐘圖標可轉至掃碼歷史頁面，點擊垃圾桶圖標可刪除掃碼歷史，點擊手電筒圖標可打開手電筒。掃碼成功即可跳轉至相應商品詳情頁。

頁面交互需求：

• “首頁”頁面下點擊“掃描”按鈕，掃描頁面從右向左彈出，且默認為掃碼頁面，掃描框外的屏幕變暗。
• 亮光處，掃碼框內會從上而下輪回顯示掃描網格；暗光處，掃描網格消失，掃碼框內顯示手電筒圖標并提示“輕點照亮”。此時點擊掃碼框，手電筒照亮，再次點擊手電筒熄滅；點擊掃描框外無法點亮手電筒。
• 掃碼框邊沿處提示語“將條形碼/二維碼放入框內”一直顯示不消失。
• 點擊時鐘圖標，跳轉至掃碼歷史頁面，頁面從右向左進入，點擊歷史二維碼內容可跳轉相關的商品詳情頁，點擊刪除按鈕，dialog彈窗從下往上彈出；點擊圖片圖標，手機相冊從下往上彈出，默認相冊以“時刻”展示；點擊右上角手電筒圖標，手電筒直接點亮。
• 不管掃碼成功或失敗，都會有“吱吱”（擬聲）提示音。掃碼成功會跳轉至商品詳情頁面，頁面從右向左彈出；掃碼失敗直接在屏幕正中央顯示“該商品不在這家店賣了~”的toast提示彈框，且屏幕明暗無變化，彈框顯示2s后消失。
• 點擊“付款”圖標，跳轉至付款頁面，頁面從右向左彈出，屏幕亮度變成最亮；點擊付款方式，可選擇付款方式，此處即為支付寶賬號綁定的支付方式。
• 付款碼頁面下，點擊右上角選擇按鈕圖標，顯示Actionbar彈框，彈框從底部彈出，背景變暗，點擊選項框外無反應，點擊選項后彈框消失，背景頁面恢復正常。
• 付款碼頁面內的付款碼（條形碼/二維碼）每1分鐘自動更新一次。

（4）App消息

使用場景：

用戶想要在App內查看最近的消息。

頁面邏輯內容：

這是盒馬App用來提醒用戶相關信息的接收口，包括推送App最新的活動、提醒優惠券信息、退款信息等。

頁面交互需求：

• “首頁”頁面下點擊消息圖標，消息頁面從右側彈出；
• 所有消息按時間倒敘排列；
• 點擊“盒馬小紙條”可跳轉至相關活動、商品、優惠券、訂單詳情等頁面，所有頁面也從右側彈出。

（5） 活動/廣告Banner

頁面邏輯內容：

5例活動/廣告頁輪播，點擊可轉到相關活動/廣告頁面。

頁面交互需求：

• “首頁”頁面下自動進行輪播，輪播間隔為1s；
• 輪播方向為從右向左；
• Banner頁面內可左右滑動；
• 點擊活動/廣告Banner區域，活動/廣告頁面從右側彈出。

（6）商品分類標簽區

使用場景：

用戶想要在App內通過分類標簽查看商品。

頁面邏輯內容：

此模塊共十類，點擊相應的商品分類標簽，進入相應的商品推薦頁面。由于標簽區十類商品分類的頁面結構和內容極其相似，本文統一歸一分析，頁面統稱為“商品分類頁”。舉例“餐飲熟食”來具體分析。

• “商品分類頁”頁面結構為“左右+上下”的形式：左欄為商品父標簽（共十五類），其中有爆款、推薦款；頂欄為商品子標簽。點擊商品父標簽右欄會列出商品篩選結果，再根據商品子標簽可以進一步篩選商品。點擊商品直接進入商品詳情界面。點擊每個商品右方的購物車圖標，可將此商品加入購物車。
• “商品分類頁”頁面內點擊右上角搜索圖標可跳轉至a2中商品搜索頁面，點擊購物車，可進入購物車頁面。

頁面交互需求：

• “首頁”頁面下點擊商品分類標簽區標簽，商品分類頁面從右側彈出；
• 商品分類頁面下點擊搜索按鈕，商品搜索頁面淡入，商品分類頁面淡出，字母全鍵盤從底部彈出，此時在商品搜索頁面點擊取消按鈕，返回App首頁；
• 商品分類頁面下點擊購物車按鈕，購物車頁面從右側彈出，此時在購物車頁面點擊取消，返回剛才商品分類頁面；
• 商品分類頁面下，商品左列表的“商品父標簽”可上下滑動，顯示更多信息，滑動時上、下部均有邊界；商品上列表的“商品子標簽”固定不動，商品詳細列表可上下滑動，顯示更多信息，滑動時上、下部均有邊界，下部會在邊界處更新內容。
• 商品子標簽只可點擊切換查看不同標簽，非左右滑動切換查看；
• 點擊商品詳細列表中商品，商品詳情頁面從右側彈出；
• 點擊商品詳細列表中商品后的購物車按鈕，每將一個商品加入購物車時，商品分類頁右上角購物車右角標數字+1，同時會有1s中“商品放入購物車”的動畫；

（7）大嘴頭條

使用場景：

用戶想要在App內查看關于食物的新聞。

頁面邏輯內容：

大嘴頭條是App的新聞入口，3例文字新聞Banner循環播放，點擊可進入大嘴頭條新聞界面，點擊分享按鈕可分享新聞。

頁面交互需求：

• “首頁”頁面下自動進行輪播，輪播間隔為1s；
• 輪播方向為從下向上；
• 點擊大嘴頭條區域，大嘴頭條新聞頁面從右側彈出，點擊每例新聞，具體新聞頁面從右側彈出；
• 點擊右上方分享按鈕，Actionbar彈框從下方彈出，大嘴頭條主頁面變暗，點擊彈框外或“取消”按鈕，頁面恢復。

（8）商品專題活動

使用場景：

用戶想要在App內快速進入盒馬推薦的主題商品頁面，查閱和購買商品。

頁面邏輯內容：

• 共有“精致素食”、“健康餐飲”、“早/午/晚間快餐店”、“家常菜”、“美味意面”等主題；
• 頁面僅呈現其中一個主題，通過點擊“換一換”按鈕可切換至其他主題，主題推薦內容根據不同時間段而定；
• 點擊專題活動商品區域轉至相應的商品專題活動頁。
• “商品專題活動”頁面結構分為標題欄（包括主題、“今天吃什么”）和商品推薦列表兩部分；
• 點擊標題欄標簽或在頁面內左右滑動“商品專題活動”頁面，標題欄標簽區和商品推薦列表的內容相應刷新并改變；
• 點擊商品推薦列表中商品，轉至“商品詳情頁”；
• 點擊商品推薦列表中商品右下角的“加號”圖標，可將商品加入購物車；
• 點擊“商品專題活動”頁面右上角購物車，進入“購物車”頁面；
• “今天吃什么”標題欄下推薦商品在所有主題下內容相同。

頁面交互需求：

• “首頁上”頁面下點擊“換一換”圖標，專題活動區域內商品會切換一個主題。每天只有5個主題；
• “首頁上”頁面下點擊專題商品活動區域，商品專題活動頁從右側彈出；
• “商品專題活動”頁面下點擊商品詳細列表中商品右方的“加號”按鈕，每將一個商品加入購物車時，“商品專題活動”頁右上角購物車右角標數字+1，同時會有1s中“商品放入購物車”的動畫；
• 在“商品專題活動”頁面非邊緣區域左右滑動，標簽欄標簽跟隨頁面滑動，效果與點擊標簽相同，標題欄標簽區和商品推薦列表的內容相應刷新并改變；
• 點擊“商品專題活動”頁面右上角購物車，“購物車”頁面從右側彈出。

（9）下拉頁面

使用場景：

用戶App首頁進行頁面的下拉動作。

頁面邏輯內容：

• 下拉分為兩種情況：下拉動作幅度較小、下拉動作幅度較大；
• 下拉動作幅度較小時為刷新當前頁面，下拉背景處帶有“下拉刷新”字樣；
• 下拉動作較大時，進入“盒爾蒙”商品分類頁面。
• “盒爾蒙”頁面結構由可滑動的商品廣告、商品分類、商品分類列表和精選推薦構成。
• “盒爾蒙”頁面內，點擊商品廣告進入可商品詳情頁面，點擊商品分類可進入商品分類頁，點擊商品分類列表中廣告，進入a2中的“商品搜索結果”頁面，點擊盒爾蒙商品可進入商品詳情頁面。

頁面交互需求：

• “首頁上”頁面內，用手下拉頁面，下拉幅度在三分之一屏幕之間內，此時功能為刷新頁面；屏幕背景提示語逐步從“下拉刷新”（下拉幅度在六分之一屏幕內），變為“松手刷新”（下拉幅度超過六分之一屏幕，小于三分之一屏幕）。
• 使用刷新功能時，松手后屏幕背景提示語變為“刷新中”。
• “首頁上”頁面內，用手下拉頁面，下拉幅度超過三分之一的屏幕，此時屏幕背景提示語為“無限驚喜，盡在盒爾蒙”；松手后“盒爾蒙”頁面淡入，且在加載時背景圖片變成盒爾蒙的廣告圖片。
• “盒爾蒙”頁面內中點擊頁面右上角購物車，“購物車”頁面從右側彈出。
• “盒爾蒙”頁面內點擊右上方分享按鈕，Actionbar彈框從下方彈出，盒爾蒙頁面變暗，點擊彈框外或“取消”按鈕，頁面恢復。
• “盒爾蒙”頁面內商品廣告處共有3例商品廣告，可左右手動滑動查看，點擊商品廣告，商品詳情頁面從右側滑入。
• “盒爾蒙”頁面內，點擊商品分類，商品分類頁從右側滑入；點擊商品分類列表中廣告，“商品搜索結果”頁面從右側滑入；點擊盒爾蒙商品，商品詳情頁面從右側滑入。
• “盒爾蒙”頁面可上下滑動，一直上滑可查看所有精選推薦商品，滑動時上部有邊界，下部會不斷更新。

5.3.2 “首頁中”邏輯內容/頁面交互詳細說明

熱門商品活動：

頁面邏輯內容：

共七類，包括“超盒算”、“耍大牌”、“追洋貨”3個金標主題活動，以及“10分鐘一桌菜”、“吃好點”、“健康點”、“SOS”4個生活和食品類主題活動。這部分熱門商品活動點擊進入子頁面后，頁面結構和內容都有很大的區別，只是在首頁放置于同處。

（1）金標主題活動

• “超盒算”頁面結構分為標題欄、標簽欄（包括超級日、云超限時搶）和商品推薦列表三部分，不同的標簽對應著相對應的商品推薦列表?！霸瞥迺r搶”頁面，標簽欄下有一個橫條，橫條中的每個格子標注著時間以及搶購狀態，從左到右搶購的時段依次推后，點擊不同時段可以查看不同時段場次的搶購商品，若商品還有剩余則可繼續搶，若已搶完會在商品圖片上顯示“已售罄”，但還可查看該商品的詳情。
• “耍大牌”頁面結構分為標題欄、標簽欄、商品/活動廣告、品牌優惠券和商品推薦列表，其中標簽欄包含精選活動、美妝、百貨、水飲、糧油和零食六個細分，不同的標簽對應著相對應的商品/活動廣告和推薦列表。
• “追洋貨”頁面結構分為商品分類、商品廣告和商品推薦列表，其中商品分類包含休閑小食、美妝個護、酒水飲料、糧油調味和百貨母嬰五個分類，點擊商品分類可進入商品分類頁，點擊商品廣告進入可商品詳情頁面，點擊商品推薦列表中商品可進入商品詳情頁面。

（2）生活和食品類主題活動

“10分鐘一桌菜”、“吃好點”、和“健康點”3個主題活動從頁面結構和內容上極其相似，本文優先考慮其中的“10分鐘一桌菜”主題進行分析和說明，剩余的兩個在以后逐一補充。

• “10分鐘一桌菜”頁面結構分為套餐廣告，10分廚房（大嘴頭條廣告）Banner、標簽欄和菜品推薦列表組成。其中標簽欄包含本周精選、半成品大葷、半成品小炒、雞鴨魚肉及海鮮半成品等就個標簽。點擊套餐廣告，進入套餐一件加購頁面，點擊10分廚房Banner進入大嘴頭條頁面，點擊商品推薦列表中商品可進入半成品商品詳情頁。
• “SOS” 頁面結構為“上下+左右”的形式：頂欄為商品父標簽（共五類），包含日常急需、女性用品、計生情趣、急救防護和出行必備；左欄為商品子標簽。點擊商品父標簽右欄會列出商品篩選結果，再根據商品子標簽可以進一步篩選商品。點擊商品直接進入商品詳情界面。

頁面交互需求：

點擊所有熱門商品主題活動，活動詳情頁面均從右側彈出；

（1）金標主題活動

• “超盒算”頁面內，只能通過點擊標簽（超級日、云超限時搶）進行標簽切換：在“超級日”標簽下無法左滑至“云超限時搶”標簽。在“云超限時搶”頁面點擊橫條中的不同時段，時段標簽的樣式由藍底白字變為紅底白字，橫條移動，使所點擊的標簽在屏幕居中，并且切換到相應的搶購商品頁面；點擊“即將開始”時段中的“開搶提醒”，顯示出一個“設置提醒成功”的toast彈框，背景明暗無變化，2s后彈框消失。
• “耍大牌”頁面內，也只能通過點擊標簽來進行標簽切換，隨著標簽的切換，商品/活動廣告、品牌優惠券和商品推薦列表等內容也相應變換。
• “追洋貨”頁面交互方式和a9“盒爾蒙”頁面類似，此處不做詳述。

（2）生活和食品類主題活動

• “10分鐘一桌菜”頁面內，點擊套餐廣告，套餐頁面從右側彈出；點擊10分廚房Banner，大嘴頭條從右側彈出；點擊橫條中的不同標簽，標簽的樣式由灰底白字變為紅底白字，橫條移動，使所點擊的標簽在屏幕居中，并且切換到相應的搶購商品頁面；點擊菜品推薦列表中商品，商品詳情頁從右側彈出。
• “SOS” 頁面交互方式和a6中“商品分類頁”類似，此處也不做贅述。

5.3.3 “首頁下”邏輯內容/頁面交互詳細說明

（1）盒馬精選

頁面邏輯內容：

• 盒馬精選是盒馬App按照不同時節來為胡勇精心選出的商品推薦欄，例如中秋時節會推出一系列中秋主題的商品和會場（中秋月餅、中秋好貨榜、秋日大牌美食、糧油調味會場和花好月圓酒飲會場等）。
• 盒馬精選一共有12個主題/會場，每部分由廣告和商品推薦列表組成，點擊廣告圖片進入相關活動頁，點擊商品推薦列表進入商品詳情頁。

頁面交互需求：

• 首頁內，可上下滑動頁面查看盒馬精選的12個主題/會場，其中時令活動廣告在上，商品分類會場在下。
• 點擊廣告圖片，相關活動頁從右彈出；
• 點擊商品推薦列表中商品，商品詳情頁從右彈出；點擊商品右下角購物車圖標，可將商品放入購物車。

（2）猜你喜歡

頁面邏輯內容：

“猜你喜歡”是首頁最下方的內容。根據用戶之前的購買和瀏覽記錄，用算法畫出用戶畫像，將用戶最常查閱購買的商品推薦在上方。

頁面交互需求：

• “猜你喜歡”的頁面比較簡單，在之前的頁面內也見過，即以商品推薦列表的形式展現。
• 點擊商品圖標和描述，商品詳情頁從右側彈出；
• 點擊商品右下角購物車圖標，可將商品放入購物車。

5.4 分類頁面

頁面名稱：分類頁面

頁面入口：“盒馬”App分類

頁面邏輯內容：

• 共有15個分類，有4個商品分類名稱和首頁內“a6 商品分類”相同（海鮮水產、肉禽蛋類、乳品烘焙、餐飲熟食），其他商品分類名稱上略有不同，但商品列表大部分會有重疊。本文以“餐飲熟食”為例進行講解和說明。
• “分類”頁面內點擊商品分類圖標，進入分類頁。
• “分類商品列表頁面”內操作內容和a6的“商品分類頁面”幾乎一樣，唯一不同處是可在此頁面通過篩選按鈕選擇其他的分類。相同處可查閱上文，此處不再贅述。

頁面交互需求：

• 所有15個商品分類均在頁面內，下拉頁面松手可進行刷新。
• “分類”頁面內點擊商品分類圖標，商品詳細分類頁面從右側彈出。
• ?“分類商品列表頁面”內點擊“篩選”按鈕，篩選狀態框從上方彈出，當前頁面背景變暗，產生遮罩。點擊篩選狀態欄中其他商品分類，可直接跳至其他商品分類列表頁面。點擊遮罩處，篩選狀態欄消失。
• “分類商品列表頁面”其他出的交互與a6的“商品分類”頁面相同，可前往查閱上文，此處不再贅述。

5.5 商品詳情頁面

頁面邏輯內容：

• 商品詳情頁面結構從上至下由商品圖片（5頁）、商品名稱（包含商品大小和重量）、商品評價、商品詳情、其他商品推薦構成。
• 商品圖片可通過用手在頁面上左右滑動顯示。
• 點擊分享圖標，進入“分享”頁。
• 點擊“加入購物車”按鈕，將當前商品加入購物車。
• 點擊商品詳情頁面右上角“購物車”圖標，進入“購物車”頁。

頁面交互需求：

• 商品詳情頁商品圖片共有5張，均為正方形。
• 點擊分享圖標，“分享”頁從下方彈出，商品詳情背景頁變暗，點擊“取消”按鈕或彈框外，恢復頁面。
• 點擊“加入購物車”按鈕，右上角購物車角標數字自加1。
• 點擊商品詳情頁面右上角“購物車”圖標，“購物車”頁從右側彈出。
• 在“商品詳情”頁面向下滑動到一定位置可以看到頂部有頁面切換功能區出現；頂部功能區可以在商品、評價、詳情、推薦這四個頁面間進行切換。

5.6 購物車與訂單的支付頁面

使用場景：

用戶對添加進購物車的商品進行結算、刪除等。

頁面邏輯內容：

• “購物車”頁面主要分為兩部分：等待結算的商品訂單和因配送范圍、庫存原因而導致失效的商品；
• 用戶在對商品未進行結算之前，所有曾點擊添加過的商品都會進入“購物車”等待結算；
• 在“購物車”中可能會有多種商品等待結算，用戶可以刪除不需要的商品，也可以對相應的商品進行結算支付；
• 在結算支付過程中可以選擇更改收貨地址、選擇送達時間以及使用優惠券、開發票等。

頁面交互需求：

• 用戶點擊購物車按鈕，“購物車”頁面從右面彈出；
• 用戶在“購物車”頁面點擊垃圾桶圖標，彈出dialog提示是否確認刪除選中的商品；
• 用戶在“購物車”頁面點擊“去結算”按鈕，支付頁面從右側彈出，且在“支付”頁面下點擊當前收貨地址，可修改并重新選擇收貨地址，選擇收貨地址頁面從右側彈出；在“支付”頁面下點擊提交訂單，“選擇送達時間”Actoinbar彈框從下方彈出，此處和點擊“選擇送達時間”按鈕達到的效果相同；
• 在“支付”頁面點擊“確認下單”，支付寶付款頁面從下方彈出。點擊立即付款付款成功后，訂單完成。

6.?總結

盒馬鮮生與阿里共用數據平臺，能夠更好的將線上的流量引導到線下門店體驗消費，由于全程結算都需要使用盒馬App，潤物無聲中增強了用戶對App的粘性，又巧妙的使得線下的流量倒流回線上。據統計，盒馬目前總體線上交易占比已超過50%，部分門店甚至超過60%，“坪效”已達到了統生鮮超市的“坪效”的3 ~ 5倍。

筆者已使用盒馬App購物半年，App的使用感不差于其他電商App，盒馬App目前框架已逐步擴大和復雜，筆者在此主要對第一層和第二層菜單的邏輯功能流程進行撰寫說明，在撰寫過程中難免會有疏漏之處。筆者作為一名2年項目經理工作經驗的新人，現決心入行產品經理，本文有邏輯和撰寫思路不對的地方，肯定您的原諒，也希望得到您寶貴的指導意見，本人會繼續學習，非常感謝。

注：本文所有圖片全是筆者使用Axure RP繪制。

本文由 @檬檬Kathy 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖由作者提供