盒馬鮮生App產(chǎn)品需求文檔

盒馬鮮生App產(chǎn)品需求文檔作為一個決心入行的產(chǎn)品準(zhǔn)新人，寫了上一篇產(chǎn)品分析報告后，又繼續(xù)深入學(xué)習(xí)研究了一個月，現(xiàn)筆者根據(jù)最新的“盒馬”App產(chǎn)品倒推了本篇PRD，肯定存在很多疏漏之處，請各位前輩幫忙指正，感謝！學(xué)習(xí)RPD之初，了解到RPD有word和axure兩種書寫載體，從閱讀體驗來看，用word來寫的PRD很難一個文檔覆蓋完整需求，也不是一份可讀性很強的PRD文檔。在本網(wǎng)站上看到了@小白菜用Axure寫的一RPD后，決定自己也嘗試直接在Axure原型中撰寫PRD。再此對文章作者表示感謝。Axure中RPD截圖如下：（右擊，在新標(biāo)簽頁中打開即可查看大圖）原型體驗鏈接：用Axure寫完RPD后，再將其整理成word格式RPD，如下文所示：文檔目錄：1.文檔綜述1.1版本修訂記錄1.2PRD輸出環(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.全局說明3.1權(quán)限說明3.2鍵盤說明3.3頁面異常3.4頁面內(nèi)交互3.5頁面間交互3.6更多操作4.頁面邏輯4.1用戶操作主流程圖4.2用戶訂購商品主邏輯5.頁面詳細功能說明5.1啟動頁5.2登陸/注冊頁5.3首頁結(jié)構(gòu)概述5.3.1“首頁上”邏輯內(nèi)容/頁面交互詳細說明5.3.2“首頁中”邏輯內(nèi)容/頁面交互詳細說明5.3.3“首頁下”邏輯內(nèi)容/頁面交互詳細說明5.4分類頁面5.5商品詳情頁面5.6購物車與訂單的支付頁面6.

總結(jié)1.文檔綜述1.1版本修訂記錄1.2PRD輸出環(huán)境1.3產(chǎn)品定位和目標(biāo)用戶人群盒馬鮮生于2017年7月14日正式開業(yè)，其是超市、餐飲和菜市場的結(jié)合。消費者在門店購物需要下載盒馬App，且只支持支付寶付款，不接受現(xiàn)金、銀行卡等任何其他支付方式。同樣，消費者也直接在盒馬App下單。本文介紹的產(chǎn)品即為盒馬App。盒馬鮮生是阿里巴巴對線下超市完全重構(gòu)的新零售業(yè)態(tài)。盒馬最大的特點之一就是快速配送：門店附近3公里范圍內(nèi)，30分鐘送貨上門。保證用戶在盒馬App內(nèi)可以購買到和門店一樣新鮮的商品。盒馬主要的目標(biāo)用戶為：第一，晚上大部分時間在家的家庭用戶；第二，基于辦公室場景推出針對性便利店或輕餐；第三，周末會去超市帶著孩子出去走走的用戶。2.產(chǎn)品結(jié)構(gòu)圖2.1產(chǎn)品功能結(jié)構(gòu)圖（右擊，在新標(biāo)簽頁中打開即可查看大圖）2.2產(chǎn)品信息結(jié)構(gòu)圖（右擊，在新標(biāo)簽頁中打開即可查看大圖）3.全局說明3.1權(quán)限說明分為登錄和未登錄狀態(tài)：（1）登錄狀態(tài)登錄狀態(tài)可進行App內(nèi)所有操作。（2）未登錄狀態(tài)可以瀏覽常規(guī)的商品信息、活動信息；可分享商品信息、活動信息；可定位附近地址；無法輸入收貨地址和新增地址；無法將商品加入購物車，無法進入購物車；無法查看“我的”界面，如訂單情況、咨詢客服。3.2鍵盤說明（1）點擊手機號和校驗碼輸入框時頁面底部彈出數(shù)字鍵盤；（2）點擊其他輸入框頁面底部彈出字母全鍵盤。3.3頁面異常3.4頁面內(nèi)交互（1）頂部、底部彈窗（2）toast、dialog、actionbar彈窗備注：（1）Toast提示框Toast提示框是一種非模態(tài)彈窗，它彈出一個小信息，作為提醒或消息反饋來用，一般用來顯示操作結(jié)果，或者應(yīng)用狀態(tài)的改變?？紤]到Toast提示框顯示的時間較短（一般只有幾秒種）、占用區(qū)域不大，它很容易被用戶忽略，所以Toast不適合承載過多的文字和重要信息。（2）Dialog對話框Dialog對話框是一種模態(tài)彈窗。當(dāng)用戶進行了敏感操作，或者當(dāng)App內(nèi)部發(fā)生了較為嚴(yán)重性的狀態(tài)改變，這種操作和改變會帶來影響性比較大的行為結(jié)果，在該結(jié)果發(fā)生前以Dialog對話框的彈窗形式告知用戶且讓用戶進行功能選擇。比如退出App、進行付費下載等功能操作。一般情況下Dialog由標(biāo)題、信息內(nèi)容和功能按鈕組成，只有當(dāng)用戶點擊了某個功能按鈕后彈窗才會消失，App隨即執(zhí)行該功能操作，進入相應(yīng)的功能流程。（3）Actionbar功能框Actionbar可以看成是Dialog的一種延伸設(shè)計，兩者都是模態(tài)彈窗，用戶必須進行回應(yīng)，否則彈窗不會消失，用戶無法繼續(xù)其它操作。Actoinbar比Dialog擁有更多的功能按鈕，提供給用戶更多的功能選擇，Acionbar一般都設(shè)計有一個默認(rèn)的“取消”功能按鈕，點擊該按鈕后關(guān)閉彈窗。在iOS中，Actionbar的樣式比較常見的是文字列表框，它出現(xiàn)在頁面底部，以簡潔的功能描述性文字展示功能按鈕，敏感的功能操作一般用紅色字體標(biāo)出（也可以設(shè)計其它顏色以突出某個功能按鈕）。3.5頁面間交互3.6更多操作4.頁面邏輯4.1用戶操作主流程圖（右擊，在新標(biāo)簽頁中打開即可查看大圖）4.2用戶訂購商品主邏輯（右擊，在新標(biāo)簽頁中打開即可查看大圖）5.頁面詳細功能說明5.1啟動頁使用場景：用戶剛打開盒馬APP。交互需求：啟動APP后，進入歡迎頁，歡迎頁等待2秒后進入廣告頁；廣告頁不做任何操作等待3秒，進入App首頁；點擊廣告圖片右上方“跳過”按鈕，進入App首頁；點擊廣告頁圖片立即進入廣告詳情頁，廣告詳情頁可在右上角點擊購物車和分享，在廣告詳情頁點擊返回進入App首頁。5.2登陸/注冊頁“盒馬”App的登錄方式采用手機淘寶快捷登錄、支付寶快捷登錄（調(diào)用手淘和支付寶授權(quán)接口登錄）及賬號密碼登錄相結(jié)合的方式。盒馬生鮮屬于阿里巴巴旗下產(chǎn)品，因此界面設(shè)計上突出手機淘寶和支付寶的顏色，有意引導(dǎo)用戶使用這二者之一進行登錄。這樣最大的便捷之處就是省去繁瑣的注冊流程，不再需要輸入的動作。體驗非常友好。使用場景：當(dāng)用戶第一次使用該應(yīng)用，新增地址或者將商品加入購物車時。交互需求：（1）輸入/前置條件：點擊手機淘寶快捷登錄。點擊“手機淘寶快捷登錄”按鈕時，調(diào)出手淘授權(quán)接口，進行登錄操作；在“淘寶登錄”界面內(nèi)，點擊左上角“取消”，會立即返回盒馬App“賬戶登錄”界面，并且出現(xiàn)“您已取消淘寶授權(quán)登錄”的toast彈框字樣。彈出后背景頁面顏色不變，懸浮2s后消失。在“淘寶登錄”界面內(nèi)，點擊右上角“幫助”，會跳轉(zhuǎn)至“阿里小蜜”的智能助理窗口，跳轉(zhuǎn)過程中會顯示“正在加載”的toast彈框字樣。彈出后背景顏色不變，懸浮直至阿里小蜜頁面顯示。（2）輸入/前置條件：點擊支付寶快捷登錄。點擊“支付寶快捷登錄”按鈕時，調(diào)出支付寶授權(quán)接口，進行登錄操作；在“支付寶登錄”界面內(nèi)，點擊左上角“首頁”，會立即返回盒馬App“賬戶登錄”界面，并且出現(xiàn)“您已取消支付寶授權(quán)登錄”的toast彈框字樣。彈出后背景頁面顏色不變，懸浮2s后消失。（3）輸入/前置條件：點擊賬號/密碼登錄點擊“賬號/密碼登錄”按鈕，跳轉(zhuǎn)到賬號/密碼登錄頁面；獲取焦點在“賬戶”輸入框，字母全鍵盤從頁面底部彈出。若此時焦點轉(zhuǎn)換至“登錄密碼”輸入框，字母鍵盤不消失但是鍵盤只能輸入字母和數(shù)字，無法輸入漢字；若此時焦點轉(zhuǎn)換至空白處，字母全鍵盤向下收回。密碼輸入時，密碼默認(rèn)為不可見狀態(tài)，點擊右方“眼睛”圖案，密碼可以轉(zhuǎn)換成可見狀態(tài)。點擊“忘記密碼”按鈕，會跳轉(zhuǎn)至“找回密碼“頁面，跳轉(zhuǎn)過程中會顯示“正在加載”的toast彈框字樣。彈出后背景顏色不變，懸浮直至找回密碼頁面顯示。獲取焦點至“登錄名”輸入框，輸入登錄名，拖動滑塊驗證，驗證成功后，跳轉(zhuǎn)至手機校驗碼安全監(jiān)測狀態(tài)。（此處找回密碼的操作設(shè)計到淘寶APP邏輯，故不做詳述。）點擊“免費注冊”按鈕，跳轉(zhuǎn)至“注冊”界面后，焦點默認(rèn)在“手機號”輸入框，數(shù)字鍵盤默認(rèn)彈出，國家地區(qū)默認(rèn)“中國大陸+86″，選擇“+86”可切換其他國家地區(qū)的手機號碼；當(dāng)輸入手機號正確時，點擊“下一步”按鈕跳轉(zhuǎn)至“安全校驗”界面，當(dāng)手機號碼不正確（超出或不足11位）時不直接提示不符合規(guī)定，而是在“安全校驗”界面驗證時，會出現(xiàn)“手機號碼格式不正確，請重新輸入”的toast彈框字樣，懸浮2s后返回“注冊”頁面。思考：此處盒馬App在輸入手機號之初，沒有提示手機號碼是否合法，而是跳轉(zhuǎn)至“安全校驗”界面驗證之后才提示，浪費了用戶的時間，筆者認(rèn)為可以在輸入手機號時在格式上提前攔截。5.3首頁結(jié)構(gòu)概述5.3.1“首頁上”邏輯內(nèi)容/頁面交互詳細說明（1）用戶位置定位使用場景：用戶想在盒馬App中定位想要送達的目的地。頁面邏輯內(nèi)容：在選擇收貨地址頁面，用戶點擊“請輸入您的收貨地址”文本框輸入新地址、或點擊頁面中已經(jīng)保存的“我的收貨地址”內(nèi)容、或點擊附近地址、抑或點擊頁面右上方的“新增地址”編輯并保存后，選擇收貨地址頁面轉(zhuǎn)回只App首頁，此時用戶定位位置變?yōu)楫?dāng)前已修改的新地址。頁面交互需求：系統(tǒng)默認(rèn)情況GPS自動定位至上一次的定位地址，而不會實時定位；“首頁”頁面下點擊用戶位置定位，選擇收貨地址頁面從底部彈出；“選擇收貨地址”頁面下點擊“請輸入您的收貨地址”文本框，字母全鍵盤從底部彈出，頂部“返回符號、新增地址和選擇收貨地址”字樣、我的收貨地址及附近地址等頁面內(nèi)容隱藏；“選擇收貨地址”頁面下點擊新增地址，新增地址頁面從右側(cè)彈出；“新增收貨地址”頁面下，一是點擊“收貨地址”，地圖界面從右側(cè)彈出；二是點擊“門牌號”和“聯(lián)系人”文本框輸入內(nèi)容時字母全鍵盤從底部彈出；三是點擊“手機號”文本框輸入內(nèi)容時字母全鍵盤切換成數(shù)字九宮格鍵盤。點擊空白處鍵盤消失。（2）商品搜索欄使用場景：用戶想在盒馬App中搜索他喜歡的分類或內(nèi)容。頁面邏輯內(nèi)容：點擊搜索框后，輸入搜索內(nèi)容，可跳轉(zhuǎn)至商品搜索頁面；搜索頁面結(jié)構(gòu)分為文本框搜索、搜索歷史、“附件XX門店”實時熱搜和新品時令四部分內(nèi)容；用戶輸入商品名稱進行搜索（支持內(nèi)容模糊搜索），搜索字?jǐn)?shù)無限制，搜索完成后頁面轉(zhuǎn)至搜索的商品搜索結(jié)果頁；系統(tǒng)對已搜索過的內(nèi)容自動標(biāo)簽化添加到“搜索歷史”，“搜索歷史”規(guī)則描述：按搜索的時間倒敘排列，排列方式從左至右、從上至下排列，可展示10條歷史搜索內(nèi)容，展示排數(shù)沒有限制，可點擊垃圾桶圖標(biāo)清除所有歷史搜索內(nèi)容；附近XX門店實時熱搜是系統(tǒng)根據(jù)定位為用戶推薦的最近的盒馬會員門店的熱搜商品，點擊相應(yīng)商品標(biāo)簽，進入相應(yīng)商品搜索結(jié)果頁；新品時令是系統(tǒng)為用戶推薦的新品和時令商品，點擊相應(yīng)商品標(biāo)簽，同樣會進入相應(yīng)商品搜索結(jié)果頁；商品搜索結(jié)果頁面的結(jié)構(gòu)為搜索框、購物車入口、篩選排序欄和搜索推薦商品；篩選排序欄分為“分類”、“排序”和“篩選”：“分類”下拉列表點擊時列表將從上到下展開，包括全部分類、乳品烘焙、盒馬云超、飲料沖調(diào)等共14個選項；“排序”下拉列表點擊時列表將從上到下展開，包括默認(rèn)排序、價格高到低、價格低到高、銷量高到低和優(yōu)惠優(yōu)先5個選項；“篩選”下拉列表點擊時將從右側(cè)彈出一個篩選框，包括價格篩選（最低價到最高價）和品牌篩選，品牌篩選默認(rèn)顯示9個（3×3行），點擊下拉按鈕可顯示全部品牌；標(biāo)簽欄是可與搜索欄組合，如“牛油果”+“奧妙”，“牛油果+酸奶”，通過點擊各個標(biāo)簽，商品列表將把包含搜索內(nèi)容+標(biāo)簽內(nèi)容的商品羅列出來；在商品搜索頁內(nèi)點擊相應(yīng)商品區(qū)域進入相應(yīng)商品詳情頁面。頁面交互需求：“首頁”頁面下點擊商品搜索框，商品搜索頁面淡入，外賣頁淡出，字母全鍵盤從底部彈出；文本框系統(tǒng)會自動顯示歷史搜索內(nèi)容，在輸入文本之后，歷史搜索內(nèi)容消失；通過搜索商品內(nèi)容、點擊搜索歷史標(biāo)簽、附近XX門店及新品時令標(biāo)簽，商品搜索結(jié)果頁面直接彈出；點擊“分類”、“排序”標(biāo)簽，下拉列表彈出后，原商品搜索結(jié)果頁面變暗；再次點擊標(biāo)簽，下拉列表原路收回，商品搜索結(jié)果頁面恢復(fù)；商品搜索結(jié)果頁面下，商品列表可上下滑動，顯示更多信息，滑動時上、下部均有邊界，上部為阻尼拖拽，下部會在邊界處更新內(nèi)容。點擊“篩選”標(biāo)簽，會從屏幕右側(cè)彈出一個比屏幕小的篩選框，同時設(shè)置顯示遮罩；點擊設(shè)置“價格區(qū)間”時從底部彈出數(shù)字鍵盤，點擊“品牌”圓角矩形標(biāo)簽時，圓角矩形外框和文字都設(shè)置為藍色，并在矩形右下角顯示一個藍色的叉，再次點擊已選中的圓角矩形則恢復(fù)原來的樣式；最多只能選擇一個品牌；點擊遮罩，篩選框向右滑出消失。（3）掃碼使用場景：用戶想在盒馬App中通過掃描條形碼/二維碼搜索商品，或者在盒馬會員實體店內(nèi)出示付款碼進行付款。頁面邏輯內(nèi)容：在首頁，用戶點擊“掃描”按鈕進入掃碼頁面，此頁面有兩大模塊，一是掃碼，而是付款?！皰叽a”對象可以是商品條形碼，也可以是二維碼，可直接拍照，也可掃描手機相冊中的掃碼圖片。點擊時鐘圖標(biāo)可轉(zhuǎn)至掃碼歷史頁面，點擊垃圾桶圖標(biāo)可刪除掃碼歷史，點擊手電筒圖標(biāo)可打開手電筒。掃碼成功即可跳轉(zhuǎn)至相應(yīng)商品詳情頁。頁面交互需求：“首頁”頁面下點擊“掃描”按鈕，掃描頁面從右向左彈出，且默認(rèn)為掃碼頁面，掃描框外的屏幕變暗。亮光處，掃碼框內(nèi)會從上而下輪回顯示掃描網(wǎng)格；暗光處，掃描網(wǎng)格消失，掃碼框內(nèi)顯示手電筒圖標(biāo)并提示“輕點照亮”。此時點擊掃碼框，手電筒照亮，再次點擊手電筒熄滅；點擊掃描框外無法點亮手電筒。掃碼框邊沿處提示語“將條形碼/二維碼放入框內(nèi)”一直顯示不消失。點擊時鐘圖標(biāo)，跳轉(zhuǎn)至掃碼歷史頁面，頁面從右向左進入，點擊歷史二維碼內(nèi)容可跳轉(zhuǎn)相關(guān)的商品詳情頁，點擊刪除按鈕，dialog彈窗從下往上彈出；點擊圖片圖標(biāo)，手機相冊從下往上彈出，默認(rèn)相冊以“時刻”展示；點擊右上角手電筒圖標(biāo)，手電筒直接點亮。不管掃碼成功或失敗，都會有“吱吱”（擬聲）提示音。掃碼成功會跳轉(zhuǎn)至商品詳情頁面，頁面從右向左彈出；掃碼失敗直接在屏幕正中央顯示“該商品不在這家店賣了~”的toast提示彈框，且屏幕明暗無變化，彈框顯示2s后消失。點擊“付款”圖標(biāo)，跳轉(zhuǎn)至付款頁面，頁面從右向左彈出，屏幕亮度變成最亮；點擊付款方式，可選擇付款方式，此處即為支付寶賬號綁定的支付方式。付款碼頁面下，點擊右上角選擇按鈕圖標(biāo)，顯示Actionbar彈框，彈框從底部彈出，背景變暗，點擊選項框外無反應(yīng)，點擊選項后彈框消失，背景頁面恢復(fù)正常。付款碼頁面內(nèi)的付款碼（條形碼/二維碼）每1分鐘自動更新一次。（4）App消息使用場景：用戶想要在App內(nèi)查看最近的消息。頁面邏輯內(nèi)容：這是盒馬App用來提醒用戶相關(guān)信息的接收口，包括推送App最新的活動、提醒優(yōu)惠券信息、退款信息等。頁面交互需求：“首頁”頁面下點擊消息圖標(biāo)，消息頁面從右側(cè)彈出；所有消息按時間倒敘排列；點擊“盒馬小紙條”可跳轉(zhuǎn)至相關(guān)活動、商品、優(yōu)惠券、訂單詳情等頁面，所有頁面也從右側(cè)彈出。（5）活動/廣告Banner頁面邏輯內(nèi)容：5例活動/廣告頁輪播，點擊可轉(zhuǎn)到相關(guān)活動/廣告頁面。頁面交互需求：“首頁”頁面下自動進行輪播，輪播間隔為1s；輪播方向為從右向左；Banner頁面內(nèi)可左右滑動；點擊活動/廣告Banner區(qū)域，活動/廣告頁面從右側(cè)彈出。（6）商品分類標(biāo)簽區(qū)使用場景：用戶想要在App內(nèi)通過分類標(biāo)簽查看商品。頁面邏輯內(nèi)容：此模塊共十類，點擊相應(yīng)的商品分類標(biāo)簽，進入相應(yīng)的商品推薦頁面。由于標(biāo)簽區(qū)十類商品分類的頁面結(jié)構(gòu)和內(nèi)容極其相似，本文統(tǒng)一歸一分析，頁面統(tǒng)稱為“商品分類頁”。舉例“餐飲熟食”來具體分析?！吧唐贩诸愴摗表撁娼Y(jié)構(gòu)為“左右+上下”的形式：左欄為商品父標(biāo)簽（共十五類），其中有爆款、推薦款；頂欄為商品子標(biāo)簽。點擊商品父標(biāo)簽右欄會列出商品篩選結(jié)果，再根據(jù)商品子標(biāo)簽可以進一步篩選商品。點擊商品直接進入商品詳情界面。點擊每個商品右方的購物車圖標(biāo)，可將此商品加入購物車?！吧唐贩诸愴摗表撁鎯?nèi)點擊右上角搜索圖標(biāo)可跳轉(zhuǎn)至a2中商品搜索頁面，點擊購物車，可進入購物車頁面。頁面交互需求：“首頁”頁面下點擊商品分類標(biāo)簽區(qū)標(biāo)簽，商品分類頁面從右側(cè)彈出；商品分類頁面下點擊搜索按鈕，商品搜索頁面淡入，商品分類頁面淡出，字母全鍵盤從底部彈出，此時在商品搜索頁面點擊取消按鈕，返回App首頁；商品分類頁面下點擊購物車按鈕，購物車頁面從右側(cè)彈出，此時在購物車頁面點擊取消，返回剛才商品分類頁面；商品分類頁面下，商品左列表的“商品父標(biāo)簽”可上下滑動，顯示更多信息，滑動時上、下部均有邊界；商品上列表的“商品子標(biāo)簽”固定不動，商品詳細列表可上下滑動，顯示更多信息，滑動時上、下部均有邊界，下部會在邊界處更新內(nèi)容。商品子標(biāo)簽只可點擊切換查看不同標(biāo)簽，非左右滑動切換查看；點擊商品詳細列表中商品，商品詳情頁面從右側(cè)彈出；點擊商品詳細列表中商品后的購物車按鈕，每將一個商品加入購物車時，商品分類頁右上角購物車右角標(biāo)數(shù)字+1，同時會有1s中“商品放入購物車”的動畫；（7）大嘴頭條使用場景：用戶想要在App內(nèi)查看關(guān)于食物的新聞。頁面邏輯內(nèi)容：大嘴頭條是App的新聞入口，3例文字新聞Banner循環(huán)播放，點擊可進入大嘴頭條新聞界面，點擊分享按鈕可分享新聞。頁面交互需求：“首頁”頁面下自動進行輪播，輪播間隔為1s；輪播方向為從下向上；點擊大嘴頭條區(qū)域，大嘴頭條新聞頁面從右側(cè)彈出，點擊每例新聞，具體新聞頁面從右側(cè)彈出；點擊右上方分享按鈕，Actionbar彈框從下方彈出，大嘴頭條主頁面變暗，點擊彈框外或“取消”按鈕，頁面恢復(fù)。（8）商品專題活動使用場景：用戶想要在App內(nèi)快速進入盒馬推薦的主題商品頁面，查閱和購買商品。頁面邏輯內(nèi)容：共有“精致素食”、“健康餐飲”、“早/午/晚間快餐店”、“家常菜”、“美味意面”等主題；頁面僅呈現(xiàn)其中一個主題，通過點擊“換一換”按鈕可切換至其他主題，主題推薦內(nèi)容根據(jù)不同時間段而定；點擊專題活動商品區(qū)域轉(zhuǎn)至相應(yīng)的商品專題活動頁?！吧唐穼ｎ}活動”頁面結(jié)構(gòu)分為標(biāo)題欄（包括主題、“今天吃什么”）和商品推薦列表兩部分；點擊標(biāo)題欄標(biāo)簽或在頁面內(nèi)左右滑動“商品專題活動”頁面，標(biāo)題欄標(biāo)簽區(qū)和商品推薦列表的內(nèi)容相應(yīng)刷新并改變；點擊商品推薦列表中商品，轉(zhuǎn)至“商品詳情頁”；點擊商品推薦列表中商品右下角的“加號”圖標(biāo)，可將商品加入購物車；點擊“商品專題活動”頁面右上角購物車，進入“購物車”頁面；“今天吃什么”標(biāo)題欄下推薦商品在所有主題下內(nèi)容相同。頁面交互需求：“首頁上”頁面下點擊“換一換”圖標(biāo)，專題活動區(qū)域內(nèi)商品會切換一個主題。每天只有5個主題；“首頁上”頁面下點擊專題商品活動區(qū)域，商品專題活動頁從右側(cè)彈出；“商品專題活動”頁面下點擊商品詳細列表中商品右方的“加號”按鈕，每將一個商品加入購物車時，“商品專題活動”頁右上角購物車右角標(biāo)數(shù)字+1，同時會有1s中“商品放入購物車”的動畫；在“商品專題活動”頁面非邊緣區(qū)域左右滑動，標(biāo)簽欄標(biāo)簽跟隨頁面滑動，效果與點擊標(biāo)簽相同，標(biāo)題欄標(biāo)簽區(qū)和商品推薦列表的內(nèi)容相應(yīng)刷新并改變；點擊“商品專題活動”頁面右上角購物車，“購物車”頁面從右側(cè)彈出。（9）下拉頁面使用場景：用戶App首頁進行頁面的下拉動作。頁面邏輯內(nèi)容：下拉分為兩種情況：下拉動作幅度較小、下拉動作幅度較大；下拉動作幅度較小時為刷新當(dāng)前頁面，下拉背景處帶有“下拉刷新”字樣；下拉動作較大時，進入“盒爾蒙”商品分類頁面?！昂袪柮伞表撁娼Y(jié)構(gòu)由可滑動的商品廣告、商品分類、商品分類列表和精選推薦構(gòu)成。“盒爾蒙”頁面內(nèi)，點擊商品廣告進入可商品詳情頁面，點擊商品分類可進入商品分類頁，點擊商品分類列表中廣告，進入a2中的“商品搜索結(jié)果”頁面，點擊盒爾蒙商品可進入商品詳情頁面。頁面交互需求：“首頁上”頁面內(nèi)，用手下拉頁面，下拉幅度在三分之一屏幕之間內(nèi)，此時功能為刷新頁面；屏幕背景提示語逐步從“下拉刷新”（下拉幅度在六分之一屏幕內(nèi)），變?yōu)椤八墒炙⑿隆保ㄏ吕瘸^六分之一屏幕，小于三分之一屏幕）。使用刷新功能時，松手后屏幕背景提示語變?yōu)椤八⑿轮小薄！笆醉撋稀表撁鎯?nèi)，用手下拉頁面，下拉幅度超過三分之一的屏幕，此時屏幕背景提示語為“無限驚喜，盡在盒爾蒙”；松手后“盒爾蒙”頁面淡入，且在加載時背景圖片變成盒爾蒙的廣告圖片?！昂袪柮伞表撁鎯?nèi)中點擊頁面右上角購物車，“購物車”頁面從右側(cè)彈出?！昂袪柮伞表撁鎯?nèi)點擊右上方分享按鈕，Actionbar彈框從下方彈出，盒爾蒙頁面變暗，點擊彈框外或“取消”按鈕，頁面恢復(fù)。“盒爾蒙”頁面內(nèi)商品廣告處共有3例商品廣告，可左右手動滑動查看，點擊商品廣告，商品詳情頁面從右側(cè)滑入?！昂袪柮伞表撁鎯?nèi)，點擊商品分類，商品分類頁從右側(cè)滑入；點擊商品分類列表中廣告，“商品搜索結(jié)果”頁面從右側(cè)滑入；點擊盒爾蒙商品，商品詳情頁面從右側(cè)滑入?！昂袪柮伞表撁婵缮舷禄瑒?，一直上滑可查看所有精選推薦商品，滑動時上部有邊界，下部會不斷更新。5.3.2“首頁中”邏輯內(nèi)容/頁面交互詳細說明熱門商品活動：頁面邏輯內(nèi)容：共七類，包括“超盒算”、“耍大牌”、“追洋貨”3個金標(biāo)主題活動，以及“10分鐘一桌菜”、“吃好點”、“健康點”、“SOS”4個生活和食品類主題活動。這部分熱門商品活動點擊進入子頁面后，頁面結(jié)構(gòu)和內(nèi)容都有很大的區(qū)別，只是在首頁放置于同處。（1）金標(biāo)主題活動“超盒算”頁面結(jié)構(gòu)分為標(biāo)題欄、標(biāo)簽欄（包括超級日、云超限時搶）和商品推薦列表三部分，不同的標(biāo)簽對應(yīng)著相對應(yīng)的商品推薦列表?！霸瞥迺r搶”頁面，標(biāo)簽欄下有一個橫條，橫條中的每個格子標(biāo)注著時間以及搶購狀態(tài)，從左到右搶購的時段依次推后，點擊不同時段可以查看不同時段場次的搶購商品，若商品還有剩余則可繼續(xù)搶，若已搶完會在商品圖片上顯示“已售罄”，但還可查看該商品的詳情。“耍大牌”頁面結(jié)構(gòu)分為標(biāo)題欄、標(biāo)簽欄、商品/活動廣告、品牌優(yōu)惠券和商品推薦列表，其中標(biāo)簽欄包含精選活動、美妝、百貨、水飲、糧油和零食六個細分，不同的標(biāo)簽對應(yīng)著相對應(yīng)的商品/活動廣告和推薦列表?！白费筘洝表撁娼Y(jié)構(gòu)分為商品分類、商品廣告和商品推薦列表，其中商品分類包含休閑小食、美妝個護、酒水飲料、糧油調(diào)味和百貨母嬰五個分類，點擊商品分類可進入商品分類頁，點擊商品廣告進入可商品詳情頁面，點擊商品推薦列表中商品可進入商品詳情頁面。（2）生活和食品類主題活動“10分鐘一桌菜”、“吃好點”、和“健康點”3個主題活動從頁面結(jié)構(gòu)和內(nèi)容上極其相似，本文優(yōu)先考慮其中的“10分鐘一桌菜”主題進行分析和說明，剩余的兩個在以后逐一補充。“10分鐘一桌菜”頁面結(jié)構(gòu)分為套餐廣告，10分廚房（大嘴頭條廣告）Banner、標(biāo)簽欄和菜品推薦列表組成。其中標(biāo)簽欄包含本周精選、半成品大葷、半成品小炒、雞鴨魚肉及海鮮半成品等就個標(biāo)簽。點擊套餐廣告，進入套餐一件加購頁面，點擊10分廚房Banner進入大嘴頭條頁面，點擊商品推薦列表中商品可進入半成品商品詳情頁?！癝OS”頁面結(jié)構(gòu)為“上下+左右”的形式：頂欄為商品父標(biāo)簽（共五類），包含日常急需、女性用品、計生情趣、急救防護和出行必備；左欄為商品子標(biāo)簽。點擊商品父標(biāo)簽右欄會列出商品篩選結(jié)果，再根據(jù)商品子標(biāo)簽可以進一步篩選商品。點擊商品直接進入商品詳情界面。頁面交互需求：點擊所有熱門商品主題活動，活動詳情頁面均從右側(cè)彈出；（1）金標(biāo)主題活動“超盒算”頁面內(nèi)，只能通過點擊標(biāo)簽（超級日、云超限時搶）進行標(biāo)簽切換：在“超級日”標(biāo)簽下無法左滑至“云超限時搶”標(biāo)簽。在“云超限時搶”頁面點擊橫條中的不同時段，時段標(biāo)簽的樣式由藍底白字變?yōu)榧t底白字，橫條移動，使所點擊的標(biāo)簽在屏幕居中，并且切換到相應(yīng)的搶購商品頁面；點擊“即將開始”時段中的“開搶提醒”，顯示出一個“設(shè)置提醒成功”的toast彈框，背景明暗無變化，2s后彈框消失。“耍大牌”頁面內(nèi)，也只能通過點擊標(biāo)簽來進行標(biāo)簽切換，隨著標(biāo)簽的切換，商品/活動廣告、品牌優(yōu)惠券和商品推薦列表等內(nèi)容也相應(yīng)變換?！白费筘洝表撁娼换シ绞胶蚢9“盒爾蒙”頁面類似，此處不做詳述。（2）生活和食品類主題活動“10分鐘一桌菜”頁面內(nèi)，點擊套餐廣告，套餐頁面從右側(cè)彈出；點擊10分廚房Banner，大嘴頭條從右側(cè)彈出；點擊橫條中的不同標(biāo)簽，標(biāo)簽的樣式由灰底白字變?yōu)榧t底白字，橫條移動，使所點擊的標(biāo)簽在屏幕居中，并且切換到相應(yīng)的搶購商品頁面；點擊菜品推薦列表中商品，商品詳情頁從右側(cè)彈出。“SOS”頁面交互方式和a6中“商品分類頁”類似，此處也不做贅述。5.3.3“首頁下”邏輯內(nèi)容/頁面交互詳細說明（1）盒馬精選頁面邏輯內(nèi)容：盒馬精選是盒馬App按照不同時節(jié)來為胡勇精心選出的商品推薦欄，例如中秋時節(jié)會推出一系列中秋主題的商品和會場（中秋月餅、中秋好貨榜、秋日大牌美食、糧油調(diào)味會場和花好月圓酒飲會場等）。盒馬精選一共有12個主題/會場，每部分由廣告和商品推薦列表組成，點擊廣告圖片進入相關(guān)活動頁，點擊商品推薦列表進入商品詳情頁。頁面交互需求：首頁內(nèi)，可上下滑動頁面查看盒馬精選的12個主題/會場，其中時令活動廣告在上，商品分類會場在下。點擊廣告圖片，相關(guān)活動頁從右彈出；點擊商品推薦列表中商品，商品詳情頁從右彈出；點擊商品右下角購物車圖標(biāo)，可將商品放入購物車。（2）猜你喜歡頁面邏輯內(nèi)容：“猜你喜歡”是首頁最下方的內(nèi)容。根據(jù)用戶之前的購買和瀏覽記錄，用算法畫出用戶畫像，將用戶最常查閱購買的商品推薦在上方。頁面交互需求：“猜你喜歡”的頁面比較簡單，在之前的頁面內(nèi)也見過，即以商品推薦列表的形式展現(xiàn)。點擊商品圖標(biāo)和描述，商品詳情頁從右側(cè)彈出；點擊商品右下角購物車圖標(biāo)，可將商品放入購物車。5.4分類頁面頁面名稱：分類頁面頁面入口：“盒馬”App分類頁面邏輯內(nèi)容：共有15個分類，有4個商品分類名稱和首頁內(nèi)“a6商品分類”相同（海鮮水產(chǎn)、肉禽蛋類、乳品烘焙、餐飲熟食），其他商品分類名稱上略有不同，但商品列表大部分會有重疊。本文以“餐飲熟食”為例進行講解和說明。“分類”頁面內(nèi)點擊商品分類圖標(biāo)，進入分類頁?！胺诸惿唐妨斜眄撁妗眱?nèi)操作內(nèi)容和a6的“商品分類頁面”幾乎一樣，唯一不同處是可在此頁面通過篩選按鈕選擇其他的分類。相同處可查閱上文，此處不再贅述。頁面交互需求：所有15個商品分類均在頁面內(nèi)，下拉頁面松手可進行刷新?！胺诸悺表撁鎯?nèi)點擊商品分類圖標(biāo)，商品詳細分類頁面從右側(cè)彈出。

“分類商品列表頁面”內(nèi)點擊“篩選”按鈕，篩選狀態(tài)框從上方彈出，當(dāng)前頁面背景變暗，產(chǎn)生遮罩。點擊篩選狀態(tài)欄中其他商品分類，可直接跳至其他商品分類列表頁面。點擊遮罩處，篩選狀態(tài)欄消失?！胺诸惿唐妨斜眄撁妗逼渌龅慕换ヅca6的“商