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

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

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