作為一個(gè)決心入行的產(chǎn)品準(zhǔn)新人，寫了上一篇產(chǎn)品分析報(bào)告后，又繼續(xù)深入學(xué)習(xí)研究了一個(gè)月，現(xiàn)筆者根據(jù)最新的“盒馬”App產(chǎn)品倒推了本篇PRD，肯定存在很多疏漏之處，請(qǐng)各位前輩幫忙指正，感謝！

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

Axure中RPD截圖如下：

（右擊，在新標(biāo)簽頁(yè)中打開(kāi)即可查看大圖）

原型體驗(yàn)鏈接：https://sekb0c.axshare.com

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

文檔目錄：

1. 文檔綜述

1.1 版本修訂記錄

1.2 PRD輸出環(huán)境

1.3 產(chǎn)品定位和目標(biāo)用戶人群

2. 產(chǎn)品結(jié)構(gòu)圖

2.1 產(chǎn)品功能結(jié)構(gòu)圖

2.2 產(chǎn)品信息結(jié)構(gòu)圖

3. 全局說(shuō)明

3.1 權(quán)限說(shuō)明

3.2 鍵盤說(shuō)明

3.3 頁(yè)面異常

3.4 頁(yè)面內(nèi)交互

3.5 頁(yè)面間交互

3.6 更多操作

4. 頁(yè)面邏輯

4.1 用戶操作主流程圖

4.2 用戶訂購(gòu)商品主邏輯

5. 頁(yè)面詳細(xì)功能說(shuō)明

5.1 啟動(dòng)頁(yè)

5.2 登陸/注冊(cè)頁(yè)

5.3 首頁(yè)結(jié)構(gòu)概述

5.3.1 “首頁(yè)上”邏輯內(nèi)容/頁(yè)面交互詳細(xì)說(shuō)明

5.3.2 “首頁(yè)中”邏輯內(nèi)容/頁(yè)面交互詳細(xì)說(shuō)明

5.3.3 “首頁(yè)下”邏輯內(nèi)容/頁(yè)面交互詳細(xì)說(shuō)明

5.4 分類頁(yè)面

5.5 商品詳情頁(yè)面

5.6 購(gòu)物車與訂單的支付頁(yè)面

6.?總結(jié)

1. 文檔綜述

1.1 版本修訂記錄

1.2 PRD輸出環(huán)境

1.3 產(chǎn)品定位和目標(biāo)用戶人群

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

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

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

2. 產(chǎn)品結(jié)構(gòu)圖

2.1 產(chǎn)品功能結(jié)構(gòu)圖

（右擊，在新標(biāo)簽頁(yè)中打開(kāi)即可查看大圖）

2.2 產(chǎn)品信息結(jié)構(gòu)圖

（右擊，在新標(biāo)簽頁(yè)中打開(kāi)即可查看大圖）

3. 全局說(shuō)明

3.1 權(quán)限說(shuō)明

分為登錄和未登錄狀態(tài)：

（1）登錄狀態(tài)

登錄狀態(tài)可進(jìn)行App內(nèi)所有操作。

（2）未登錄狀態(tài)

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

3.2 鍵盤說(shuō)明

（1）點(diǎn)擊手機(jī)號(hào)和校驗(yàn)碼輸入框時(shí)頁(yè)面底部彈出數(shù)字鍵盤；

（2）點(diǎn)擊其他輸入框頁(yè)面底部彈出字母全鍵盤。

3.3 頁(yè)面異常

3.4 頁(yè)面內(nèi)交互

（1）頂部、底部彈窗

（2）toast、dialog、actionbar彈窗

備注：

（1）Toast 提示框

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

（2）Dialog 對(duì)話框

Dialog對(duì)話框是一種模態(tài)彈窗。當(dāng)用戶進(jìn)行了敏感操作，或者當(dāng)App內(nèi)部發(fā)生了較為嚴(yán)重性的狀態(tài)改變，這種操作和改變會(huì)帶來(lái)影響性比較大的行為結(jié)果，在該結(jié)果發(fā)生前以Dialog對(duì)話框的彈窗形式告知用戶且讓用戶進(jìn)行功能選擇。比如退出App、進(jìn)行付費(fèi)下載等功能操作。一般情況下Dialog由標(biāo)題、信息內(nèi)容和功能按鈕組成，只有當(dāng)用戶點(diǎn)擊了某個(gè)功能按鈕后彈窗才會(huì)消失，App隨即執(zhí)行該功能操作，進(jìn)入相應(yīng)的功能流程。

（3）Actionbar功能框

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

3.5 頁(yè)面間交互

3.6 更多操作

4. 頁(yè)面邏輯

4.1 用戶操作主流程圖

（右擊，在新標(biāo)簽頁(yè)中打開(kāi)即可查看大圖）

4.2 用戶訂購(gòu)商品主邏輯

（右擊，在新標(biāo)簽頁(yè)中打開(kāi)即可查看大圖）

5. 頁(yè)面詳細(xì)功能說(shuō)明

5.1 啟動(dòng)頁(yè)

使用場(chǎng)景：

用戶剛打開(kāi)盒馬APP。

交互需求：

• 啟動(dòng)APP后，進(jìn)入歡迎頁(yè)，歡迎頁(yè)等待2秒后進(jìn)入廣告頁(yè)；
• 廣告頁(yè)不做任何操作等待3秒，進(jìn)入App首頁(yè)；
• 點(diǎn)擊廣告圖片右上方“跳過(guò)”按鈕，進(jìn)入App首頁(yè)；
• 點(diǎn)擊廣告頁(yè)圖片立即進(jìn)入廣告詳情頁(yè)，廣告詳情頁(yè)可在右上角點(diǎn)擊購(gòu)物車和分享，在廣告詳情頁(yè)點(diǎn)擊返回進(jìn)入App首頁(yè)。

5.2 登陸/注冊(cè)頁(yè)

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

使用場(chǎng)景：

當(dāng)用戶第一次使用該應(yīng)用，新增地址或者將商品加入購(gòu)物車時(shí)。

交互需求：

（1）輸入/前置條件：點(diǎn)擊手機(jī)淘寶快捷登錄。

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

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

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

（3）輸入/前置條件：點(diǎn)擊賬號(hào)/密碼登錄

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

思考：此處盒馬App在輸入手機(jī)號(hào)之初，沒(méi)有提示手機(jī)號(hào)碼是否合法，而是跳轉(zhuǎn)至“安全校驗(yàn)”界面驗(yàn)證之后才提示，浪費(fèi)了用戶的時(shí)間，筆者認(rèn)為可以在輸入手機(jī)號(hào)時(shí)在格式上提前攔截。

5.3 首頁(yè)結(jié)構(gòu)概述

5.3.1 “首頁(yè)上”邏輯內(nèi)容/頁(yè)面交互詳細(xì)說(shuō)明

（1） 用戶位置定位

使用場(chǎng)景：

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

頁(yè)面邏輯內(nèi)容：

在選擇收貨地址頁(yè)面，用戶點(diǎn)擊“請(qǐng)輸入您的收貨地址”文本框輸入新地址、或點(diǎn)擊頁(yè)面中已經(jīng)保存的“我的收貨地址”內(nèi)容、或點(diǎn)擊附近地址、抑或點(diǎn)擊頁(yè)面右上方的“新增地址”編輯并保存后，選擇收貨地址頁(yè)面轉(zhuǎn)回只App首頁(yè)，此時(shí)用戶定位位置變?yōu)楫?dāng)前已修改的新地址。

頁(yè)面交互需求：

• 系統(tǒng)默認(rèn)情況GPS自動(dòng)定位至上一次的定位地址，而不會(huì)實(shí)時(shí)定位；
• “首頁(yè)”頁(yè)面下點(diǎn)擊用戶位置定位，選擇收貨地址頁(yè)面從底部彈出；
• “選擇收貨地址”頁(yè)面下點(diǎn)擊“請(qǐng)輸入您的收貨地址”文本框，字母全鍵盤從底部彈出，頂部“返回符號(hào)、新增地址和選擇收貨地址”字樣、我的收貨地址及附近地址等頁(yè)面內(nèi)容隱藏；
• “選擇收貨地址”頁(yè)面下點(diǎn)擊新增地址，新增地址頁(yè)面從右側(cè)彈出；
• “新增收貨地址”頁(yè)面下，一是點(diǎn)擊“收貨地址”，地圖界面從右側(cè)彈出；二是點(diǎn)擊“門牌號(hào)”和“聯(lián)系人”文本框輸入內(nèi)容時(shí)字母全鍵盤從底部彈出；三是點(diǎn)擊“手機(jī)號(hào)”文本框輸入內(nèi)容時(shí)字母全鍵盤切換成數(shù)字九宮格鍵盤。點(diǎn)擊空白處鍵盤消失。

（2）商品搜索欄

使用場(chǎng)景：

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

頁(yè)面邏輯內(nèi)容：

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

頁(yè)面交互需求：

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

（3）掃碼

使用場(chǎng)景：

用戶想在盒馬App中通過(guò)掃描條形碼/二維碼搜索商品，或者在盒馬會(huì)員實(shí)體店內(nèi)出示付款碼進(jìn)行付款。

頁(yè)面邏輯內(nèi)容：

在首頁(yè)，用戶點(diǎn)擊“掃描”按鈕進(jìn)入掃碼頁(yè)面，此頁(yè)面有兩大模塊，一是掃碼，而是付款?！皰叽a”對(duì)象可以是商品條形碼，也可以是二維碼，可直接拍照，也可掃描手機(jī)相冊(cè)中的掃碼圖片。點(diǎn)擊時(shí)鐘圖標(biāo)可轉(zhuǎn)至掃碼歷史頁(yè)面，點(diǎn)擊垃圾桶圖標(biāo)可刪除掃碼歷史，點(diǎn)擊手電筒圖標(biāo)可打開(kāi)手電筒。掃碼成功即可跳轉(zhuǎn)至相應(yīng)商品詳情頁(yè)。

頁(yè)面交互需求：

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

（4）App消息

使用場(chǎng)景：

用戶想要在App內(nèi)查看最近的消息。

頁(yè)面邏輯內(nèi)容：

這是盒馬App用來(lái)提醒用戶相關(guān)信息的接收口，包括推送App最新的活動(dòng)、提醒優(yōu)惠券信息、退款信息等。

頁(yè)面交互需求：

• “首頁(yè)”頁(yè)面下點(diǎn)擊消息圖標(biāo)，消息頁(yè)面從右側(cè)彈出；
• 所有消息按時(shí)間倒敘排列；
• 點(diǎn)擊“盒馬小紙條”可跳轉(zhuǎn)至相關(guān)活動(dòng)、商品、優(yōu)惠券、訂單詳情等頁(yè)面，所有頁(yè)面也從右側(cè)彈出。

（5） 活動(dòng)/廣告Banner

頁(yè)面邏輯內(nèi)容：

5例活動(dòng)/廣告頁(yè)輪播，點(diǎn)擊可轉(zhuǎn)到相關(guān)活動(dòng)/廣告頁(yè)面。

頁(yè)面交互需求：

• “首頁(yè)”頁(yè)面下自動(dòng)進(jìn)行輪播，輪播間隔為1s；
• 輪播方向?yàn)閺挠蚁蜃螅?/li>
• Banner頁(yè)面內(nèi)可左右滑動(dòng)；
• 點(diǎn)擊活動(dòng)/廣告Banner區(qū)域，活動(dòng)/廣告頁(yè)面從右側(cè)彈出。

（6）商品分類標(biāo)簽區(qū)

使用場(chǎng)景：

用戶想要在App內(nèi)通過(guò)分類標(biāo)簽查看商品。

頁(yè)面邏輯內(nèi)容：

此模塊共十類，點(diǎn)擊相應(yīng)的商品分類標(biāo)簽，進(jìn)入相應(yīng)的商品推薦頁(yè)面。由于標(biāo)簽區(qū)十類商品分類的頁(yè)面結(jié)構(gòu)和內(nèi)容極其相似，本文統(tǒng)一歸一分析，頁(yè)面統(tǒng)稱為“商品分類頁(yè)”。舉例“餐飲熟食”來(lái)具體分析。

• “商品分類頁(yè)”頁(yè)面結(jié)構(gòu)為“左右+上下”的形式：左欄為商品父標(biāo)簽（共十五類），其中有爆款、推薦款；頂欄為商品子標(biāo)簽。點(diǎn)擊商品父標(biāo)簽右欄會(huì)列出商品篩選結(jié)果，再根據(jù)商品子標(biāo)簽可以進(jìn)一步篩選商品。點(diǎn)擊商品直接進(jìn)入商品詳情界面。點(diǎn)擊每個(gè)商品右方的購(gòu)物車圖標(biāo)，可將此商品加入購(gòu)物車。
• “商品分類頁(yè)”頁(yè)面內(nèi)點(diǎn)擊右上角搜索圖標(biāo)可跳轉(zhuǎn)至a2中商品搜索頁(yè)面，點(diǎn)擊購(gòu)物車，可進(jìn)入購(gòu)物車頁(yè)面。

頁(yè)面交互需求：

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

（7）大嘴頭條

使用場(chǎng)景：

用戶想要在App內(nèi)查看關(guān)于食物的新聞。

頁(yè)面邏輯內(nèi)容：

大嘴頭條是App的新聞入口，3例文字新聞Banner循環(huán)播放，點(diǎn)擊可進(jìn)入大嘴頭條新聞界面，點(diǎn)擊分享按鈕可分享新聞。

頁(yè)面交互需求：

• “首頁(yè)”頁(yè)面下自動(dòng)進(jìn)行輪播，輪播間隔為1s；
• 輪播方向?yàn)閺南孪蛏希?/li>
• 點(diǎn)擊大嘴頭條區(qū)域，大嘴頭條新聞頁(yè)面從右側(cè)彈出，點(diǎn)擊每例新聞，具體新聞頁(yè)面從右側(cè)彈出；
• 點(diǎn)擊右上方分享按鈕，Actionbar彈框從下方彈出，大嘴頭條主頁(yè)面變暗，點(diǎn)擊彈框外或“取消”按鈕，頁(yè)面恢復(fù)。

（8）商品專題活動(dòng)

使用場(chǎng)景：

用戶想要在App內(nèi)快速進(jìn)入盒馬推薦的主題商品頁(yè)面，查閱和購(gòu)買商品。

頁(yè)面邏輯內(nèi)容：

• 共有“精致素食”、“健康餐飲”、“早/午/晚間快餐店”、“家常菜”、“美味意面”等主題；
• 頁(yè)面僅呈現(xiàn)其中一個(gè)主題，通過(guò)點(diǎn)擊“換一換”按鈕可切換至其他主題，主題推薦內(nèi)容根據(jù)不同時(shí)間段而定；
• 點(diǎn)擊專題活動(dòng)商品區(qū)域轉(zhuǎn)至相應(yīng)的商品專題活動(dòng)頁(yè)。
• “商品專題活動(dòng)”頁(yè)面結(jié)構(gòu)分為標(biāo)題欄（包括主題、“今天吃什么”）和商品推薦列表兩部分；
• 點(diǎn)擊標(biāo)題欄標(biāo)簽或在頁(yè)面內(nèi)左右滑動(dòng)“商品專題活動(dòng)”頁(yè)面，標(biāo)題欄標(biāo)簽區(qū)和商品推薦列表的內(nèi)容相應(yīng)刷新并改變；
• 點(diǎn)擊商品推薦列表中商品，轉(zhuǎn)至“商品詳情頁(yè)”；
• 點(diǎn)擊商品推薦列表中商品右下角的“加號(hào)”圖標(biāo)，可將商品加入購(gòu)物車；
• 點(diǎn)擊“商品專題活動(dòng)”頁(yè)面右上角購(gòu)物車，進(jìn)入“購(gòu)物車”頁(yè)面；
• “今天吃什么”標(biāo)題欄下推薦商品在所有主題下內(nèi)容相同。

頁(yè)面交互需求：

• “首頁(yè)上”頁(yè)面下點(diǎn)擊“換一換”圖標(biāo)，專題活動(dòng)區(qū)域內(nèi)商品會(huì)切換一個(gè)主題。每天只有5個(gè)主題；
• “首頁(yè)上”頁(yè)面下點(diǎn)擊專題商品活動(dòng)區(qū)域，商品專題活動(dòng)頁(yè)從右側(cè)彈出；
• “商品專題活動(dòng)”頁(yè)面下點(diǎn)擊商品詳細(xì)列表中商品右方的“加號(hào)”按鈕，每將一個(gè)商品加入購(gòu)物車時(shí)，“商品專題活動(dòng)”頁(yè)右上角購(gòu)物車右角標(biāo)數(shù)字+1，同時(shí)會(huì)有1s中“商品放入購(gòu)物車”的動(dòng)畫；
• 在“商品專題活動(dòng)”頁(yè)面非邊緣區(qū)域左右滑動(dòng)，標(biāo)簽欄標(biāo)簽跟隨頁(yè)面滑動(dòng)，效果與點(diǎn)擊標(biāo)簽相同，標(biāo)題欄標(biāo)簽區(qū)和商品推薦列表的內(nèi)容相應(yīng)刷新并改變；
• 點(diǎn)擊“商品專題活動(dòng)”頁(yè)面右上角購(gòu)物車，“購(gòu)物車”頁(yè)面從右側(cè)彈出。

（9）下拉頁(yè)面

使用場(chǎng)景：

用戶App首頁(yè)進(jìn)行頁(yè)面的下拉動(dòng)作。

頁(yè)面邏輯內(nèi)容：

• 下拉分為兩種情況：下拉動(dòng)作幅度較小、下拉動(dòng)作幅度較大；
• 下拉動(dòng)作幅度較小時(shí)為刷新當(dāng)前頁(yè)面，下拉背景處帶有“下拉刷新”字樣；
• 下拉動(dòng)作較大時(shí)，進(jìn)入“盒爾蒙”商品分類頁(yè)面。
• “盒爾蒙”頁(yè)面結(jié)構(gòu)由可滑動(dòng)的商品廣告、商品分類、商品分類列表和精選推薦構(gòu)成。
• “盒爾蒙”頁(yè)面內(nèi)，點(diǎn)擊商品廣告進(jìn)入可商品詳情頁(yè)面，點(diǎn)擊商品分類可進(jìn)入商品分類頁(yè)，點(diǎn)擊商品分類列表中廣告，進(jìn)入a2中的“商品搜索結(jié)果”頁(yè)面，點(diǎn)擊盒爾蒙商品可進(jìn)入商品詳情頁(yè)面。

頁(yè)面交互需求：

• “首頁(yè)上”頁(yè)面內(nèi)，用手下拉頁(yè)面，下拉幅度在三分之一屏幕之間內(nèi)，此時(shí)功能為刷新頁(yè)面；屏幕背景提示語(yǔ)逐步從“下拉刷新”（下拉幅度在六分之一屏幕內(nèi)），變?yōu)椤八墒炙⑿隆保ㄏ吕瘸^(guò)六分之一屏幕，小于三分之一屏幕）。
• 使用刷新功能時(shí)，松手后屏幕背景提示語(yǔ)變?yōu)椤八⑿轮小薄?/li>
• “首頁(yè)上”頁(yè)面內(nèi)，用手下拉頁(yè)面，下拉幅度超過(guò)三分之一的屏幕，此時(shí)屏幕背景提示語(yǔ)為“無(wú)限驚喜，盡在盒爾蒙”；松手后“盒爾蒙”頁(yè)面淡入，且在加載時(shí)背景圖片變成盒爾蒙的廣告圖片。
• “盒爾蒙”頁(yè)面內(nèi)中點(diǎn)擊頁(yè)面右上角購(gòu)物車，“購(gòu)物車”頁(yè)面從右側(cè)彈出。
• “盒爾蒙”頁(yè)面內(nèi)點(diǎn)擊右上方分享按鈕，Actionbar彈框從下方彈出，盒爾蒙頁(yè)面變暗，點(diǎn)擊彈框外或“取消”按鈕，頁(yè)面恢復(fù)。
• “盒爾蒙”頁(yè)面內(nèi)商品廣告處共有3例商品廣告，可左右手動(dòng)滑動(dòng)查看，點(diǎn)擊商品廣告，商品詳情頁(yè)面從右側(cè)滑入。
• “盒爾蒙”頁(yè)面內(nèi)，點(diǎn)擊商品分類，商品分類頁(yè)從右側(cè)滑入；點(diǎn)擊商品分類列表中廣告，“商品搜索結(jié)果”頁(yè)面從右側(cè)滑入；點(diǎn)擊盒爾蒙商品，商品詳情頁(yè)面從右側(cè)滑入。
• “盒爾蒙”頁(yè)面可上下滑動(dòng)，一直上滑可查看所有精選推薦商品，滑動(dòng)時(shí)上部有邊界，下部會(huì)不斷更新。

5.3.2 “首頁(yè)中”邏輯內(nèi)容/頁(yè)面交互詳細(xì)說(shuō)明

熱門商品活動(dòng)：

頁(yè)面邏輯內(nèi)容：

共七類，包括“超盒算”、“耍大牌”、“追洋貨”3個(gè)金標(biāo)主題活動(dòng)，以及“10分鐘一桌菜”、“吃好點(diǎn)”、“健康點(diǎn)”、“SOS”4個(gè)生活和食品類主題活動(dòng)。這部分熱門商品活動(dòng)點(diǎn)擊進(jìn)入子頁(yè)面后，頁(yè)面結(jié)構(gòu)和內(nèi)容都有很大的區(qū)別，只是在首頁(yè)放置于同處。

（1）金標(biāo)主題活動(dòng)

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

（2）生活和食品類主題活動(dòng)

“10分鐘一桌菜”、“吃好點(diǎn)”、和“健康點(diǎn)”3個(gè)主題活動(dòng)從頁(yè)面結(jié)構(gòu)和內(nèi)容上極其相似，本文優(yōu)先考慮其中的“10分鐘一桌菜”主題進(jìn)行分析和說(shuō)明，剩余的兩個(gè)在以后逐一補(bǔ)充。

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

頁(yè)面交互需求：

點(diǎn)擊所有熱門商品主題活動(dòng)，活動(dòng)詳情頁(yè)面均從右側(cè)彈出；

（1）金標(biāo)主題活動(dòng)

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

（2）生活和食品類主題活動(dòng)

• “10分鐘一桌菜”頁(yè)面內(nèi)，點(diǎn)擊套餐廣告，套餐頁(yè)面從右側(cè)彈出；點(diǎn)擊10分廚房Banner，大嘴頭條從右側(cè)彈出；點(diǎn)擊橫條中的不同標(biāo)簽，標(biāo)簽的樣式由灰底白字變?yōu)榧t底白字，橫條移動(dòng)，使所點(diǎn)擊的標(biāo)簽在屏幕居中，并且切換到相應(yīng)的搶購(gòu)商品頁(yè)面；點(diǎn)擊菜品推薦列表中商品，商品詳情頁(yè)從右側(cè)彈出。
• “SOS” 頁(yè)面交互方式和a6中“商品分類頁(yè)”類似，此處也不做贅述。

5.3.3 “首頁(yè)下”邏輯內(nèi)容/頁(yè)面交互詳細(xì)說(shuō)明

（1）盒馬精選

頁(yè)面邏輯內(nèi)容：

• 盒馬精選是盒馬App按照不同時(shí)節(jié)來(lái)為胡勇精心選出的商品推薦欄，例如中秋時(shí)節(jié)會(huì)推出一系列中秋主題的商品和會(huì)場(chǎng)（中秋月餅、中秋好貨榜、秋日大牌美食、糧油調(diào)味會(huì)場(chǎng)和花好月圓酒飲會(huì)場(chǎng)等）。
• 盒馬精選一共有12個(gè)主題/會(huì)場(chǎng)，每部分由廣告和商品推薦列表組成，點(diǎn)擊廣告圖片進(jìn)入相關(guān)活動(dòng)頁(yè)，點(diǎn)擊商品推薦列表進(jìn)入商品詳情頁(yè)。

頁(yè)面交互需求：

• 首頁(yè)內(nèi)，可上下滑動(dòng)頁(yè)面查看盒馬精選的12個(gè)主題/會(huì)場(chǎng)，其中時(shí)令活動(dòng)廣告在上，商品分類會(huì)場(chǎng)在下。
• 點(diǎn)擊廣告圖片，相關(guān)活動(dòng)頁(yè)從右彈出；
• 點(diǎn)擊商品推薦列表中商品，商品詳情頁(yè)從右彈出；點(diǎn)擊商品右下角購(gòu)物車圖標(biāo)，可將商品放入購(gòu)物車。

（2）猜你喜歡

頁(yè)面邏輯內(nèi)容：

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

頁(yè)面交互需求：

• “猜你喜歡”的頁(yè)面比較簡(jiǎn)單，在之前的頁(yè)面內(nèi)也見(jiàn)過(guò)，即以商品推薦列表的形式展現(xiàn)。
• 點(diǎn)擊商品圖標(biāo)和描述，商品詳情頁(yè)從右側(cè)彈出；
• 點(diǎn)擊商品右下角購(gòu)物車圖標(biāo)，可將商品放入購(gòu)物車。

5.4 分類頁(yè)面

頁(yè)面名稱：分類頁(yè)面

頁(yè)面入口：“盒馬”App分類

頁(yè)面邏輯內(nèi)容：

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

頁(yè)面交互需求：

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

5.5 商品詳情頁(yè)面

頁(yè)面邏輯內(nèi)容：

• 商品詳情頁(yè)面結(jié)構(gòu)從上至下由商品圖片（5頁(yè)）、商品名稱（包含商品大小和重量）、商品評(píng)價(jià)、商品詳情、其他商品推薦構(gòu)成。
• 商品圖片可通過(guò)用手在頁(yè)面上左右滑動(dòng)顯示。
• 點(diǎn)擊分享圖標(biāo)，進(jìn)入“分享”頁(yè)。
• 點(diǎn)擊“加入購(gòu)物車”按鈕，將當(dāng)前商品加入購(gòu)物車。
• 點(diǎn)擊商品詳情頁(yè)面右上角“購(gòu)物車”圖標(biāo)，進(jìn)入“購(gòu)物車”頁(yè)。

頁(yè)面交互需求：

• 商品詳情頁(yè)商品圖片共有5張，均為正方形。
• 點(diǎn)擊分享圖標(biāo)，“分享”頁(yè)從下方彈出，商品詳情背景頁(yè)變暗，點(diǎn)擊“取消”按鈕或彈框外，恢復(fù)頁(yè)面。
• 點(diǎn)擊“加入購(gòu)物車”按鈕，右上角購(gòu)物車角標(biāo)數(shù)字自加1。
• 點(diǎn)擊商品詳情頁(yè)面右上角“購(gòu)物車”圖標(biāo)，“購(gòu)物車”頁(yè)從右側(cè)彈出。
• 在“商品詳情”頁(yè)面向下滑動(dòng)到一定位置可以看到頂部有頁(yè)面切換功能區(qū)出現(xiàn)；頂部功能區(qū)可以在商品、評(píng)價(jià)、詳情、推薦這四個(gè)頁(yè)面間進(jìn)行切換。

5.6 購(gòu)物車與訂單的支付頁(yè)面

使用場(chǎng)景：

用戶對(duì)添加進(jìn)購(gòu)物車的商品進(jìn)行結(jié)算、刪除等。

頁(yè)面邏輯內(nèi)容：

• “購(gòu)物車”頁(yè)面主要分為兩部分：等待結(jié)算的商品訂單和因配送范圍、庫(kù)存原因而導(dǎo)致失效的商品；
• 用戶在對(duì)商品未進(jìn)行結(jié)算之前，所有曾點(diǎn)擊添加過(guò)的商品都會(huì)進(jìn)入“購(gòu)物車”等待結(jié)算；
• 在“購(gòu)物車”中可能會(huì)有多種商品等待結(jié)算，用戶可以刪除不需要的商品，也可以對(duì)相應(yīng)的商品進(jìn)行結(jié)算支付；
• 在結(jié)算支付過(guò)程中可以選擇更改收貨地址、選擇送達(dá)時(shí)間以及使用優(yōu)惠券、開(kāi)發(fā)票等。

頁(yè)面交互需求：

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

6.?總結(jié)

盒馬鮮生與阿里共用數(shù)據(jù)平臺(tái)，能夠更好的將線上的流量引導(dǎo)到線下門店體驗(yàn)消費(fèi)，由于全程結(jié)算都需要使用盒馬App，潤(rùn)物無(wú)聲中增強(qiáng)了用戶對(duì)App的粘性，又巧妙的使得線下的流量倒流回線上。據(jù)統(tǒng)計(jì)，盒馬目前總體線上交易占比已超過(guò)50%，部分門店甚至超過(guò)60%，“坪效”已達(dá)到了統(tǒng)生鮮超市的“坪效”的3 ~ 5倍。

筆者已使用盒馬App購(gòu)物半年，App的使用感不差于其他電商App，盒馬App目前框架已逐步擴(kuò)大和復(fù)雜，筆者在此主要對(duì)第一層和第二層菜單的邏輯功能流程進(jìn)行撰寫說(shuō)明，在撰寫過(guò)程中難免會(huì)有疏漏之處。筆者作為一名2年項(xiàng)目經(jīng)理工作經(jīng)驗(yàn)的新人，現(xiàn)決心入行產(chǎn)品經(jīng)理，本文有邏輯和撰寫思路不對(duì)的地方，肯定您的原諒，也希望得到您寶貴的指導(dǎo)意見(jiàn)，本人會(huì)繼續(xù)學(xué)習(xí)，非常感謝。

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

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

題圖由作者提供