倒推“餓了么”App產(chǎn)品需求文檔(PRD)

236 評論 304984 瀏覽 1805 收藏 46 分鐘

產(chǎn)品需求文檔(PRD),是一個產(chǎn)品項目由“概念化”階段進入到“圖紙化”階段的最主要的一個文檔,其作用是“對市場需求文檔(MRD)中的內(nèi)容進行指標化和技術(shù)化”,文檔的質(zhì)量好壞直接影響到研發(fā)部門是否能夠明確產(chǎn)品的功能與性能。

下面筆者將以C端用戶的身份通過使用、體驗和分析等方式倒推“餓了么”App,生成它的產(chǎn)品需求文檔。然而,由于“餓了么”產(chǎn)品功能框架實在龐大,信息流分支眾多且界面繁雜,筆者將這份文檔的撰寫重心放在“餓了么”最主要的流量入口處——首頁(外賣頁),其余界面會在以后逐一補充。

文檔目錄:

一、文檔綜述

1.1版本修訂記錄

1.2PRD輸出環(huán)境

1.3產(chǎn)品介紹

二、產(chǎn)品結(jié)構(gòu)

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

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

三、全局說明

3.1功能權(quán)限

3.2鍵盤說明

3.3頁面內(nèi)交互

3.4頁面異常

3.5頁面間切換交互方式

3.6更多操作

四、用戶操作主流程(外賣頁)

五、頁面邏輯(用戶訂購商品主邏輯)

六、頁面詳細功能說明

6.1啟動頁

6.2登陸/注冊頁

6.3首頁(外賣頁)

6.4商家頁面

6.5訂單的支付與評價頁面

七、測試異常頁面及突發(fā)狀況

7.1網(wǎng)絡異常

7.2登錄異常

7.3數(shù)據(jù)丟失

八、總結(jié)

一、文檔綜述

1.1 版本修訂記錄

1.2 PRD輸出環(huán)境

1.3 產(chǎn)品介紹

“餓了么”于2009年4月上線,是一款在線外賣訂餐服務平臺。為中國廣泛地區(qū)的用戶提供豐富多樣、簡單快捷的在線訂餐服務;為不同類型的餐飲商戶提供基于互聯(lián)網(wǎng)技術(shù)的一體化運營解決方案。

“餓了么”移動端App,滿足用戶在手機端使用產(chǎn)品時的基本功能主要包括用戶在線訂購外賣、商家入駐、配送服務、城市服務代理等。

二、產(chǎn)品結(jié)構(gòu)

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

(右擊,在新標簽頁中打開即可查看大圖)

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

“餓了么”App的信息架構(gòu)異常復雜,這對于平時基本只會用到點餐訂外賣的我來說是沒有想到的。一個主要針對在線訂餐服務的產(chǎn)品承載了如此多的內(nèi)容,并產(chǎn)生了如此多的流量入口,可留存率容易降低且流量加工能力需要很強。

三、全局說明

3.1 功能權(quán)限

(1)分為登陸狀態(tài)和未登陸狀態(tài)

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

(3)未登錄狀態(tài)下

  • 僅可以瀏覽頁面,如商家信息、商品信息等;
  • 無法進行商品預訂、訂單結(jié)算和商家收藏;
  • 無法進入金幣商城、推薦有獎、周邊優(yōu)惠、免費流量以及官方活動等界面;
  • 無法查詢訂單和早餐預訂等。

3.2 鍵盤說明

(1)點擊(手機號與驗證碼)輸入框時頁面底部彈出數(shù)字鍵盤;

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

3.3頁面內(nèi)交互

(1)頂部和底部彈窗
(2)Toast、Dialog、Alert彈窗

3.4 頁面異常

3.5 頁面間切換交互方式

在當前頁面左邊緣處用右劃手勢快速返回之前頁面。

3.6更多操作

四、用戶操作主流程(外賣頁)

從用戶操作的主流程可以看出,“餓了么”App并不像其他一些App特別注重用戶的注冊引導性,只有在用戶需要修改/添加“收貨地址”和“提交訂單”時才會判斷用戶是否已登錄,這和“餓了么”的主要業(yè)務和功能需求有關(guān),用戶在未登錄的狀態(tài)下依然可以先查看商品的內(nèi)容信息,并在對個人喜好或者偏愛的商品下訂單作出決定時,再適時提醒用戶是否登錄,這看似遲緩的引導反而在一定的程度上增強了用戶的粘性。

五、頁面邏輯(用戶訂購商品主邏輯)

六、頁面詳細功能說明

6.1 啟動頁

啟動頁前置條件為是否已連接網(wǎng)絡,分為以下兩種情況:

1、已連接網(wǎng)絡

頁面邏輯:

  • 在已連接網(wǎng)絡情況下,啟動餓了么App后,進入引導頁;
  • 引導頁等待1秒后進入廣告頁;
  • 對廣告頁不進行任何操作等待3秒,或點擊頁面右上方“跳過”按鈕,進入App首頁(外賣頁);
  • 點擊廣告頁面圖片,彈出廣告內(nèi)容。

2、未連接網(wǎng)絡

在未連接網(wǎng)絡情況下,啟動App后直接進入網(wǎng)絡異常提示頁面,并提示用戶重新加載。

思考:此處餓了么App并沒有使用其他彈窗來引導用戶如何檢查或設(shè)置網(wǎng)絡及網(wǎng)絡路徑,僅有的網(wǎng)絡異常提示和重新加載按鈕個人感覺從體驗上不能有效的幫助用戶解決網(wǎng)絡問題。

6.2 登陸/注冊頁

“餓了么”App的登陸方式采用手機號碼與驗證碼、密碼登錄及第三方登錄(調(diào)用第三方授權(quán)接口登陸)相結(jié)合的方式,最大的便捷之處是省去了注冊的流程,用戶個人手機號碼即賬戶名,而通過手機號碼和驗證碼驗證登錄及第三方登陸的過程就替代了相對繁瑣的注冊流程。用戶在登陸以后可以再設(shè)置個人登錄密碼,同時熟悉用戶的個人頁面。

1、登陸/注冊頁面

頁面邏輯內(nèi)容:

  • 用戶輸入手機號碼,點擊“獲取驗證碼”按鈕,“獲取驗證碼”按鈕內(nèi)容變?yōu)椤耙寻l(fā)送”,并倒計時30秒,30秒后“已發(fā)送”按鈕內(nèi)容變?yōu)椤爸匦芦@取”;
  • 用戶收到驗證碼并在5分鐘內(nèi)輸入即可登陸,超過5分鐘驗證碼失效需要重新獲?。?/li>
  • 若用戶在30秒內(nèi)未收到手機驗證碼,點擊“重新獲取”按鈕嘗試重新獲取驗證碼;
  • 老用戶可使用手機號碼和登錄密碼進行登陸;
  • 用戶亦可點擊第三方登錄下的四個按鈕,調(diào)出其授權(quán)接口進行登陸操作。

頁面交互說明:

  • 用戶點擊手機號及驗證文本框,數(shù)字鍵盤從底部彈出;
  • 用戶點擊獲取驗證碼按鈕,按鈕顏色變?yōu)榛疑?,文本變?yōu)椤耙寻l(fā)送”并伴有30秒倒計時,30秒過后按鈕文本變?yōu)椤爸匦芦@取”;
  • 用戶點擊右上角“密碼登錄”,密碼登錄頁面從頁面右側(cè)彈出,同時字母全鍵盤從底部彈出,在輸入密碼時,可以點擊右側(cè)圖標設(shè)置是否顯示密碼;
  • 用戶點擊第三方登陸下的四個按鈕,相應的第三方授權(quán)頁面從頁面右側(cè)彈出。

2、登陸/注冊功能邏輯流程

6.3 首頁(外賣頁)

由于筆者繪制的App原型圖完全參照個人手機屏幕的實際尺寸即(375px*677px),所以這里將首頁(外賣頁)分為上、中、下三個部分,并對相應的功能和操作進行逐一說明。

6.3.1 外賣頁-上

(1)頁面名稱:外賣頁-上

(2)頁面入口:“餓了么”App首頁

(3)頁面結(jié)構(gòu)

  1. 用戶位置定位
  2. 用戶位置天氣
  3. 商家、商品搜索框
  4. 食品標簽欄
  5. 商品分類標簽區(qū),共十五類
  6. 活動/廣告Banner,七例活動/廣告頁輪播
  7. 商品分類專題區(qū),共五類
  8. 購物車,對添加進購物車的商品集中結(jié)算、刪除等。

(4)邏輯內(nèi)容詳細說明

①?用戶位置定位:系統(tǒng)默認情況GPS自動定位并顯示用戶所在位置,點擊后頁面轉(zhuǎn)至選擇收貨地址頁面。

頁面邏輯內(nèi)容:

在選擇收貨地址頁面,用戶點擊“請輸入地址”文本框輸入新地址、或點擊頁面中已保存的其他收貨地址、抑或點擊頁面右上方的新增地址并且編輯確定后,選擇收貨地址頁面轉(zhuǎn)回至外賣頁,用戶位置定位變更為當前已修改的新地址。

頁面交互說明:

  • “外賣”頁面下點擊用戶位置定位,選擇收貨地址頁面從底部彈出;
  • “選擇收貨地址”頁面下點擊“請輸入地址”文本框,字母全鍵盤從底部彈出,當前地址、收貨地址和附近地址等頁面內(nèi)容隱藏;
  • “選擇收貨地址”頁面下點擊新增地址,新增地址頁面從右側(cè)彈出,點擊相應文本框輸入內(nèi)容時字母全鍵盤會從底部彈出,點擊地址文本框,右側(cè)彈出確認收貨地址頁面;
  • 文本框在輸入文本后,原文本框提示內(nèi)容消失。

用戶位置天氣,系統(tǒng)根據(jù)用戶所在位置實時的展示當前位置的天氣情況。

商家、商品搜索框:點擊搜索框后頁面跳轉(zhuǎn)至商家、商品搜索頁面。

頁面邏輯內(nèi)容:

  • 搜索頁面結(jié)構(gòu)分為文本搜索框、歷史搜索及熱門搜索三部分內(nèi)容;
  • 用戶輸入商家、商品名稱等內(nèi)容進行搜索(支持內(nèi)容模糊搜索),搜索完成后頁面轉(zhuǎn)至搜索的商家、商品推薦頁;
  • 系統(tǒng)對已搜索過的內(nèi)容自動標簽化添加到歷史搜索內(nèi)容(歷史搜索規(guī)則描述:按搜索的時間倒序排列,排列方式從左至右、從上至下排列,可展示四排內(nèi)容,可點擊垃圾桶圖標清除所有歷史搜索內(nèi)容,也可長按相應的搜索標簽進行刪除,標簽字數(shù)長度限制為十字符,超出部分用“…”代替。);
  • 熱門搜索內(nèi)容是系統(tǒng)為用戶推薦的商家、商品及活動標簽,點擊相應標簽,進入相應商家、商品及活動推薦頁。

  • 商家、商品推薦頁面結(jié)構(gòu)為搜索框、篩選排序欄、與搜索內(nèi)容相關(guān)的標簽欄和推薦商家列表;
  • 在商家、商品推薦頁面上,與搜索內(nèi)容相關(guān)的文本都被加粗加亮顯示,如“漢堡”;
  • 篩選排序欄分為綜合排序下拉列表、按銷量最高排序、按距離最近排序及篩選;綜合排序下拉列表包括好評優(yōu)先、起送價最低、配送最快等選項;篩選則按照配送方式(蜂鳥專送)、優(yōu)惠活動(新用戶、特價商品、下單立減、贈品優(yōu)惠、下單返券、進店領(lǐng)券)、人均消費(20以下、20-40、40以上)等三方面進行篩選排序;
  • 標簽欄是可與搜索內(nèi)容相關(guān)的可組合內(nèi)容,如“漢堡”+“蜂鳥專送”、“漢堡”+“炸雞”,通過點擊各個標簽,商家列表將把包含搜索內(nèi)容+標簽內(nèi)容的商家羅列出來;
  • 在商家列表內(nèi)點擊相應商家區(qū)域進入相應商家頁面。

頁面交互說明:

  • “外賣”頁面下點擊商家、商品搜索框,商家、商品搜索頁面淡入,外賣頁淡出,字母全鍵盤從底部彈出;
  • 在輸入文本后,文本框提示內(nèi)容 消失;
  • 通過搜索商家和商品內(nèi)容、點擊歷史搜索標簽及熱門搜索標簽,商家、商品及活動推薦頁面從右側(cè)彈出;
  • 點擊綜合排序或篩選,從“篩選排序欄”處彈出下拉列表,原商家、商品推薦頁面變暗;再次點擊綜合排序和篩選,下拉列表收回,商家、商品推薦頁面恢復;
  • 標簽欄可點擊選擇,也可以通過左右滑動的手勢查看后面的標簽,并點擊不同的標簽內(nèi)容;
  • 單次點擊不同的標簽,商家列表刷新且加入不同的標簽內(nèi)容,重復點擊同一標簽,刪除之前添加的標簽內(nèi)容;
  • 商家列表可上下滑動,顯示更多信息,滑動時上、下部均有邊界,上部為阻尼拖拽,下部會在邊界處更新內(nèi)容。

食品標簽欄:點擊相應的食品標簽進入相應的食品內(nèi)容搜索頁面(與“商家、商品搜索框搜索到的商家、商品推薦頁一致”),同時向下拉動“外賣”頁面可以更新食品標簽欄的內(nèi)容,食品標簽欄最多展示七個食品標簽。

商品分類標簽區(qū):共十五類,點擊相應的商品分類標簽,進入相應的商品推薦頁面。由于標簽區(qū)十五類商品分類的頁面結(jié)構(gòu)和內(nèi)容極其相似,筆者暫時優(yōu)先選擇對“美食”類標簽做分析和說明,其余十四類會在以后逐一補充。

頁面邏輯內(nèi)容:

  • “美食”頁面結(jié)構(gòu)分為標題欄(包括美食標題、商家和商品搜索按鈕和返回按鈕),美食標簽欄,美食標簽區(qū)和與美食標簽相對應的商家推薦列表四部分。
  • 點擊標題欄中的搜索按鈕轉(zhuǎn)至商家、商品搜索頁;
  • 點擊美食標簽或在頁面內(nèi)左右滑動“美食”頁面,美食標簽區(qū)和商家推薦列表的內(nèi)容相應刷新并改變;
  • 點擊美食標簽欄的下拉按鈕,展開商品分類標簽區(qū)列表;
  • 點擊美食標簽區(qū)進入美食標簽區(qū)頁面,如“熱賣套餐”頁面;
  • 商家推薦列表包括篩選排序欄和商家列表,點擊商家區(qū)域會進入相應的商家頁面。

頁面交互說明:

  • “外賣”頁面下點擊商品分類標簽區(qū)標簽,如“美食”,“美食”頁面從右側(cè)彈出;
  • “美食”頁面下點擊搜索按鈕,商家、商品搜索頁面淡入,“美食”頁面淡出,字母全鍵盤從底部彈出;
  • “美食”頁面下點擊美食標簽欄下拉按鈕,“美食”頁面變暗,從“美食”標題欄處向下彈出商品分類標簽區(qū)列表,下拉按鈕方向向上,再次點擊下拉按鈕或者點擊空白區(qū)域,商品分類標簽區(qū)列表收回,“美食”頁面恢復,下拉按鈕方向恢復默認;
  • 在“美食”頁面非邊緣區(qū)域左右滑動,美食標簽跟隨頁面滑動,效果與點擊標簽相同,美食標簽區(qū)和商家推薦列表內(nèi)容相應更新并改變;
  • 商家列表可上下滑動,顯示更多信息,滑動時上部有邊界,下部會不斷更新。

活動/廣告Banner:七例活動/廣告頁輪播,點擊后頁面轉(zhuǎn)到相應活動/廣告頁面;

頁面交互說明:點擊活動/廣告Banner區(qū)域,活動/廣告頁面從右側(cè)彈出。

商品分類專題區(qū):共五類,包括“限量搶購”、“熱賣套餐”、“吃貨狂歡節(jié)”以及兩個根據(jù)每天和時段細分的不同分類專題,點擊后進入相應分類專題頁面,同樣由于商品分類專題區(qū)的五類專題從頁面結(jié)構(gòu)和內(nèi)容上極其相似,筆者優(yōu)先選擇其中的“限量搶購”專題進行分析和說明,剩余的四類在以后逐一補充。

頁面邏輯內(nèi)容:

  • 限時搶購頁面的頁面結(jié)構(gòu)分為標題欄、標簽欄和商品推薦列表,其中標簽欄包含早餐、下午茶、正餐、夜宵和水果零食五個細分,不同的標簽對應著相應的商品推薦列表;
  • 用戶可以根據(jù)餐時及自身的需要選擇相應的細分標簽,并在細分標簽下的商品推薦列表中挑選商品;
  • 在商品推薦列表中點擊商品所在區(qū)域,頁面轉(zhuǎn)至該商品所在的商家頁面,同時點擊的商品會自動加入已選商品列表等待用戶結(jié)算。

頁面交互說明:

  • 在“限時搶購”頁面下,點擊不同的標簽,標簽的底紋顏色會發(fā)生相應的變化,如早餐(綠色漸變)、下午茶(橙色漸變)、正餐(藍色漸變)、夜宵(深藍色漸變)、水果零食(紫色漸變);
  • 商品列表可上下滑動,顯示更多信息,滑動時上、下部均有邊界,上部為阻尼拖拽,下部會在邊界處更新內(nèi)容;
  • 在商品推薦列表中點擊商品所在區(qū)域,商品所屬的商家界面會從“限時搶購”頁面右側(cè)彈出。

購物車:用戶可以對添加進購物車的商品進行結(jié)算、刪除等。

頁面邏輯內(nèi)容:

  • “購物車”頁面主要分為兩部分,等待結(jié)算的商品訂單、起送價不足的商品訂單(商品價格低于商家配送的金額標準)和失效商家(商品所屬商家休息);
  • 用戶在對商品未進行結(jié)算之前,所有曾點擊添加過的商品都會進入“購物車”等待結(jié)算;
  • 在“購物車”中可能會有多種商品等待結(jié)算,用戶可以刪除不需要的商品亦可以對相應的商品進行結(jié)算支付;
  • 在結(jié)算支付過程中可以選擇更改收貨地址,使用紅包或代金券等;

頁面交互說明:

  • 用戶在“外賣頁”未有任何操作2秒時,購物車按鈕從頁面底部右側(cè)彈出,當進行滑動頁面或者任何操作時,購物車按鈕彈回右側(cè);
  • 用戶點擊購物車按鈕,“購物車”頁面從頁面右側(cè)彈出;
  • 用戶在“購物車”頁面點擊垃圾桶圖標,彈出Toast提示是否確認刪除該商家的所有商品;
  • 用戶在“購物車”頁面點擊“去結(jié)算”按鈕,支付頁面從右側(cè)彈出,且在“支付”頁面下點擊當前收貨地址,可修改并重新選擇收貨地址,選擇收貨地址頁面從右側(cè)彈出;
  • 在“支付”頁面點擊“免密支付”,“下單成功”頁面從右側(cè)彈出。

6.3.2 外賣頁-中

(1)頁面名稱:外賣頁-中

(2)頁面入口:“餓了么”App首頁

(3)頁面結(jié)構(gòu)

  1. 商家、商品搜索框
  2. 商品分類專題區(qū),共五類
  3. 官方推薦精品商家
  4. 品質(zhì)優(yōu)選區(qū),大牌精選商家
  5. 購物車
  6. 推薦商家列表

(4)邏輯內(nèi)容詳細說明

由于上述頁面結(jié)構(gòu)中①、②、⑤部分在“外賣頁-上”中已作出過說明,不再贅述,接下來對③、④、⑥部分進行說明。

官方推薦精品商家:每天系統(tǒng)都會對該區(qū)內(nèi)容作出更新調(diào)整,用戶點擊官方推薦精品商家區(qū)域后頁面轉(zhuǎn)至精品商家頁面。

頁面邏輯內(nèi)容:

  • 官方推薦精品商家區(qū)域類似一個廣告鏈接,用戶點擊過后轉(zhuǎn)至商家頁面;
  • 結(jié)構(gòu)布局主要由商家主打商品圖片、特價商品信息和促銷活動信息構(gòu)成。

頁面交互說明:

  • 在“外賣”頁下點擊官方推薦精品商家區(qū)域,商家頁面從“外賣頁”右側(cè)彈出。

品質(zhì)優(yōu)選區(qū),大牌商家:用戶點擊該區(qū)域頁面轉(zhuǎn)至品質(zhì)優(yōu)選頁面。

頁面邏輯內(nèi)容:

  • “外賣”頁下的品質(zhì)優(yōu)選區(qū)域由標題(品質(zhì)優(yōu)選)和商家推薦表組成,商家推薦表由單行四列的商家(商家圖片+商家名稱+“大牌精選”標注)構(gòu)成,商家名稱最多顯示五個字符,如名稱超過五個字符,第五個字符由“…”代替,如“深圳麥當…(深圳麥當勞)”;
  • 品質(zhì)優(yōu)選頁面結(jié)構(gòu)由標題欄(即品質(zhì)優(yōu)選)和推薦商家列表組成;
  • 推薦商家列表內(nèi)羅列的商家都是規(guī)模較大的品牌商家,每個商家下方都放置“大牌精選”的標注;
  • 在商家列表中點擊商家區(qū)域進入相應的商家頁面;
  • 由于沒有篩選排序欄,在品質(zhì)優(yōu)選頁面無法對商家列表進行排序,因而其排列規(guī)則筆者暫時還無從知曉。

頁面交互說明:

  • 在“外賣”頁下點擊品質(zhì)優(yōu)選區(qū)域,品質(zhì)優(yōu)選頁面從“外賣”頁右側(cè)彈出;
  • 在“品質(zhì)優(yōu)選”頁下點擊推薦商家列表內(nèi)的相應商家區(qū)域,商家頁面從“品質(zhì)優(yōu)選”頁右側(cè)彈出;
  • 商家列表可上下滑動,顯示更多信息,滑動時上、下部均有邊界,上部為阻尼拖拽,下部會在邊界處更新內(nèi)容。

推薦商家列表:由于推薦商家列表的主要內(nèi)容在“外賣頁-下”中,所以其說明也放在“外賣頁-下”中進行。

6.3.3 外賣頁-下

(1)頁面名稱:外賣頁-下

(2)頁面入口:“餓了么”App首頁

(3)頁面結(jié)構(gòu)

  1. 商家、商品搜索框
  2. 商家推薦列表
  3. 購物車

(4)邏輯內(nèi)容詳細說明

由于上述頁面結(jié)構(gòu)中①、③部分在“外賣頁-上”中已作出過說明,不再贅述,接下來對②部分進行主要說明。

②商家推薦列表,羅列了餓了么App內(nèi)所有的商家,包括普通商家、品牌商家和新入駐商家,用戶點擊相應的商家區(qū)域便進入到相應的商家頁面,并在商家頁面下挑選商品進行預訂和結(jié)算。

頁面邏輯內(nèi)容:

  • 商家推薦列表中的商家信息由商家圖片、名稱、星級評分、月售訂單數(shù)、起送價格、配送方式、配送費、配送時間、商家距離、商家促銷活動以及商家保障等構(gòu)成;·
  • 每一個商家的促銷活動信息最多顯示兩條,可通過點擊促銷活動下拉菜單查看所有的促銷活動;
  • 點擊相應的商家區(qū)域轉(zhuǎn)至相應的商家頁面;
  • 商家推薦列表中沒有篩選排序欄,因而商家列表的牌序規(guī)則筆者暫時無從知曉。

頁面交互說明:

  • 在“外賣”頁的商家推薦列表下點擊商家區(qū)域,商家頁面從“外賣”頁右側(cè)彈出;
  • 推薦商家列表可上下滑動,顯示更多信息,滑動時上、下部均有邊界,上部為阻尼拖拽,下部會在邊界處更新商家列表內(nèi)容。

6.3.4 外賣頁小結(jié)

縱觀整個外賣頁的功能與結(jié)構(gòu),大體可以分為三大類功能模塊即“搜索模塊(搜索框)”、“分類模塊(分類標簽/分類專題)”與“推薦模塊(推薦列表)”等?!梆I了么”App用這三大模塊功能對不同用戶的不同需求提供相應的解決方案,然而看似三種甚至更多的用戶需求入口,最終都會集中到同一出口即“具體的商家頁面”,進而結(jié)算商品訂單直至最終的交易完成,功能邏輯如下。

由此可見,“商家頁面”是“外賣”頁中最為主要且唯一的流量出口頁面,也正因如此,“餓了么”App才會選擇在這里來引導用戶登陸/注冊,而不是在App初次打開的首頁面便引導用戶。那么接下來筆者就對從商家頁面直至最后的交易完成整個流程進行逐一說明。

6.4 商家頁面

筆者通過自身的體驗,隨機選擇一個商家為例(漢克斯炸雞漢堡)。

(1)頁面名稱:商家頁面

(2)頁面結(jié)構(gòu):

  1. 商家頁面更多操作
  2. 商家標題欄
  3. 商家促銷活動欄
  4. 商品/評價欄
  5. 商品結(jié)算欄

(3)邏輯內(nèi)容詳細說明

①?商家頁面更多操作

包含多人訂餐、進入購物車以及更多操作按鈕(“…”)。其中更多操作按鈕在點擊后彈出下拉列表菜單,菜單內(nèi)容包括店內(nèi)搜索、多人訂餐、分享商家、商家詳情頁和收藏商家等功能,點擊相應子菜單進入相應的功能頁面。

②?商家標題欄

顯示商家名稱、商家公告等信息,點擊此區(qū)域頁面轉(zhuǎn)至商家詳情頁。商家詳情頁展示商家名稱、評分、月售訂單量、商家公告、商家圖片、商家配送信息、商家促銷活動與服務、商家評價、商家信息(商家品類、商家電話、地址、營業(yè)時間)及商家營業(yè)資質(zhì)等內(nèi)容。用戶可以在商家詳情頁內(nèi)查看該商家評價內(nèi)容,聯(lián)系商家(商家電話),查看商家的營業(yè)資質(zhì)或舉報商家等。

③?商家促銷欄

展示商家的促銷信息,單次點擊右側(cè)的“7個活動”區(qū)域(下拉列表)展開,再次點擊下拉列表收回,默認情況只展示一條促銷活動,在促銷欄展開時,商品/評論欄及下方的商品內(nèi)容自動下移,同時促銷活動的角標垂直翻轉(zhuǎn)。

④?商品/評價欄

展示商品類型(如熱銷、優(yōu)惠、新品上市等)及相應類型商品列表和用戶對商家商品的評價內(nèi)容。默認情況下為“商品”頁面,展示的是商品類型內(nèi)容,且“商品”字段下方注有下劃線,“商品字段”和“下劃線”顏色一致,當用戶點擊評價或者在頁面中左劃手勢操作時,“商品頁面”轉(zhuǎn)至評價頁面(從右側(cè)彈出)且“商品”字段下方下劃線動態(tài)滑落至“評價”字段下方,再次點擊“商品”或在頁面中右劃手勢操作返回商品頁面。

商品頁面包含內(nèi)容:商品類型標簽、代金券領(lǐng)取和商品列表。點擊代金券處“去領(lǐng)取”按鈕即領(lǐng)取了商家的代金券,在商品列表中對相應商品點擊“+”按鈕,即將商品添加到結(jié)算欄中,同時該商品所屬的商品類型標簽及結(jié)算欄圖標的右上角相應增加角標如“1”、“2”等,具體角標數(shù)字視添加的商品數(shù)量而定。

評價頁面包含商家的綜合評分信息與用戶評價內(nèi)容兩部分。在綜合評分信息欄中用戶可以看到商家的服務態(tài)度、商品評分及商品的送達時間,數(shù)據(jù)都來自于用戶的匯總評價。用戶評價內(nèi)容分三欄,上方為查看評價內(nèi)容的標簽欄(全部、滿意、不滿意、有圖、味道好、送貨慢等),標簽中的數(shù)字代表該標簽下的評價總數(shù)量,中間為提醒用戶是否選擇查看有內(nèi)容的評論,下方則是具體用戶的評價內(nèi)容及評價時間?!梆I了么”的評價系統(tǒng)均采用匿名評價的方式,評價內(nèi)容包括用戶對商家服務、商品、送達時間以及具體的評價內(nèi)容等四方面。

⑤?商品結(jié)算欄

用于用戶對已挑選的商品進行結(jié)算并且與購物車相關(guān)聯(lián)。用戶在商品列表中對滿意的商品點擊“+”按鈕時,會有模擬商品從“+”按鈕處以拋物線形式動態(tài)掉落至結(jié)算欄圖標處,同時“+”按鈕向左彈出“-”按鈕,此時用戶點擊“+”、“-”按鈕,即相應增減結(jié)算欄中的商品數(shù)量。用戶點擊商品結(jié)算欄區(qū)域會從結(jié)算欄處向上彈出結(jié)算列表,用戶可以對已選的商品進行增減數(shù)量及清空等操作,在結(jié)算列表彈出的時候,商家頁面同時變暗。點擊“去結(jié)算”按鈕后,頁面轉(zhuǎn)至訂單預支付頁面。

6.5 訂單的支付與評價頁面

在訂單預支付頁面,用戶可以查看并修改個人的收貨地址,同時查看訂單預計送達時間和訂單詳情(包括商家、商品內(nèi)容)。根據(jù)用戶的口味偏好及用餐人數(shù),用戶可以設(shè)置備注填寫個人口味及餐具數(shù)量。在用戶支付訂單之前,還可以查看是否有紅包和代金券可用,并選擇相應的在線支付方式及是否需要商家開具發(fā)票。目前餓了么支持四種在線支付方式,包括支付寶免密支付、花唄、銀行卡網(wǎng)銀支付、QQ錢包支付等。筆者常用的支付方式是支付寶免密支付,這種支付方式快捷便利,在確定了收貨地址、訂單內(nèi)容與商品金額后,點擊“免密支付”按鈕頁面隨即轉(zhuǎn)至下單成功頁面,然后點擊“完成”按鈕就可以靜靜地等待商品送貨上門了,同時在下單成功頁面用戶還可以在頁面下方查看和自己口味、興趣相當?shù)钠渌脩舳伎戳四男┥唐罚淞四男┥碳摇?/p>

在用戶下單支付后,系統(tǒng)會給用戶派發(fā)分享紅包及優(yōu)惠代金券禮包,紅包可以轉(zhuǎn)發(fā)分享給好友,類似微信紅包,隨機領(lǐng)取相應的紅包金額,而代金券禮包則是用戶自己領(lǐng)取,也是隨機金額。同時在等待訂單的過程中,用戶會接到“商家接單”及“配送員出發(fā)配送”的實時提醒,彈窗從頁面頂部彈出。此外用戶在訂單完成頁面點擊右上角的完成按鈕之后,頁面轉(zhuǎn)至等待送達的頁面。

在等待送達頁面用戶可通過上下劃手勢操作查看訂單預送達時間(由動態(tài)環(huán)形進度條顯示,隨著時間的推移,環(huán)形進度條逐漸減短),訂單信息(包括配送信息和訂單信息)等內(nèi)容;用戶可根據(jù)自身需要進行“取消訂單、聯(lián)系賣家、催促賣家盡快發(fā)貨(催單)”等操作,在頁面的最下方也可以瀏覽其他商品信息。而當用戶存在任何與訂單相關(guān)的問題時都可以點擊頁面右上方的耳麥圖標,與“餓了么”App客服聯(lián)系。

當用戶收到商品后可點擊確認送達按鈕,或不進行操作,由賣家提交商品已送至用戶收貨地址處。此時頁面轉(zhuǎn)至訂單完成頁面,用戶可申請售后或者評價訂單。

評價頁面分為三部分:商品評價、商家服務評價及配送服務評價。三部分評價內(nèi)容除了商品評價內(nèi)可添加商品圖片外基本相同,都包括表情、標簽和文字內(nèi)容。其中表情分為三類即代表“不滿意、基本滿意和很滿意”,默認表情為第二種基本滿意;標簽基本涵蓋了用戶對評價對象表示基本滿意的各項內(nèi)容;如果用戶有對商家和商品有任何的看法和建議可以在文本框內(nèi)輸入文字內(nèi)容進行評價,文字內(nèi)容不能涉及敏感詞庫并要超過五個字符,否則提交評價失敗且會有彈窗提示用戶。

當用戶在商品評價時輸入了文字內(nèi)容或選擇了商品評價標簽,在提交評價后會得到10金幣,金幣用于“餓了么”App內(nèi)另一個頁面功能(金幣商城),在這里筆者暫不作說明。

當用戶對訂單提交評價后,頁面轉(zhuǎn)至評價成功界面。至此,表示用戶在“餓了么”App內(nèi)的預訂商品交易流程完成。

七、測試異常頁面及突發(fā)狀況

筆者根據(jù)自身對“餓了么”App的使用體驗,測試了一些異常頁面和突發(fā)狀況下App的應對處理方式,大體分為網(wǎng)絡異常、登陸異常及數(shù)據(jù)丟失等。

7.1 網(wǎng)絡異常

測試內(nèi)容:斷開網(wǎng)絡時各頁面的顯示內(nèi)容及聯(lián)網(wǎng)使用過程中突然的斷網(wǎng)狀態(tài)。

通過測試,筆者發(fā)現(xiàn)“餓了么”App在用戶網(wǎng)絡斷開連接時對首頁(外賣頁)及“我的”頁面做了數(shù)據(jù)的緩存,而沒有數(shù)據(jù)緩存的頁面如訂單頁則是做了網(wǎng)絡異常的UI界面設(shè)計,并且界面中包含動態(tài)的圖標,并提示用戶“網(wǎng)絡異常,重新加載”;在用戶使用App過程中,突發(fā)網(wǎng)絡中斷時會相應的彈出Toast提醒用戶“似乎已斷開與互聯(lián)網(wǎng)的連接”。

網(wǎng)絡異常小結(jié)

網(wǎng)絡異常突發(fā)狀況下,“餓了么”App會以三種方式應對處理即:頁面數(shù)據(jù)緩存、設(shè)計網(wǎng)絡異常UI界面和彈窗提示。

其中頁面數(shù)據(jù)緩存方式的頁面效果比較友好,而由于網(wǎng)絡異常導致的部分過期數(shù)據(jù)內(nèi)容會困擾用戶(如“我的”頁面中的金幣和紅包),且隨著使用時長的增加,App緩存占用的內(nèi)存會不斷增加;同時設(shè)計網(wǎng)絡異常UI頁面和彈窗提示能在一定程度上提高用戶體驗,但過度頻繁的提醒可能會增加用戶的厭煩感。

7.2 登陸異常

測試內(nèi)容:未登錄狀態(tài)下查看各頁面內(nèi)容及嘗試結(jié)算訂單。

通過測試,筆者發(fā)現(xiàn)在未登錄狀態(tài)下用戶除了訂單頁、用戶“我的”頁及在商家頁面結(jié)算時會提示用戶登陸或直接轉(zhuǎn)至登陸界面,其他頁面用戶都可以隨意查看瀏覽。由此可見,“餓了么”App對用戶的“登陸/注冊”引導性很低,然而考慮之前對“餓了么”多入口對應單出口的功能邏輯分析,這可能也是“餓了么”App采取的特有引導方式,即將“登陸/注冊”功能設(shè)置在商家頁面的結(jié)算出口處,針對不同使用場景及不同需求的用戶,以此來適當增加用戶對App的粘性。

登陸異常小結(jié)

登陸異常突發(fā)狀況下,“餓了么”App采取頁面跳轉(zhuǎn)登陸界面及設(shè)計登陸異常的UI界面兩種方式。其中需要用戶信息的頁面會有相應登陸異常的UI提示(如查看訂單頁),需要用戶信息的子頁面會直接轉(zhuǎn)至登陸頁面(如商家頁面與購物車的訂單結(jié)算)。

7.3 數(shù)據(jù)丟失

除了網(wǎng)絡異常及登陸異常以外,用戶還可能遇到在使用“餓了么”App過程中接打電話、手機突然關(guān)機、App程序突然崩潰等異常狀況,這些狀況都會造成一定程度上的數(shù)據(jù)丟失。在使用App時接打電話,“餓了么”程序會自動設(shè)置為后臺運行,但若在后臺運行的時間過長,再次打開程序頁面會默認轉(zhuǎn)至“歡迎引導頁”,而在手機關(guān)機和App崩潰的情況下,App只能重新打開,而不能回到之前操作的頁面。此外“餓了么”App對支付訂單功能設(shè)置了十五分鐘支付時效,即需要用戶在十五分鐘內(nèi)對已選定的訂單進行結(jié)算付款,這也在一定程度上能夠解決可能的數(shù)據(jù)丟失造成的支付問題。

八、總結(jié)

由于“餓了么”App框架龐大,流量入口繁雜,筆者在此主要對首頁(外賣頁)部分及相應的邏輯功能流程進行撰寫說明,其他部分會在以后逐一補充。本篇PRD是個人根據(jù)現(xiàn)有的“餓了么”App產(chǎn)品倒推的,一定會有很多疏漏之處,作為一個決心入行的產(chǎn)品準新人小白,懇請您的諒解,此外有些功能邏輯或頁面邏輯闡述不合理的,也請您能幫我指出,在以后的學習中一定會逐漸修正,本人不勝感激!

注:文檔中所引用的彩色App截圖來源于“餓了么”App。

 

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 怎么沒有商家的操作說明和商家角色頁面

    來自廣東 回復
  2. 可以加個好友嗎?互相學習

    來自福建 回復
  3. 這才是一個能提高效率的prd

    回復
    1. 感謝支持~

      來自廣東 回復
  4. 親,可以加個好友嗎?給你一個做產(chǎn)品的機會

    來自廣東 回復
    1. 謝謝支持。

      來自廣東 回復
  5. 辛苦了

    來自海南 回復
    1. 加油!很久沒有來,好多評論沒有及時回復。

      來自廣東 回復
  6. 連續(xù)看了幾篇結(jié)構(gòu)極度相似的prd,你們是同一個培訓班出來的嗎

    來自廣東 回復
    1. hhh,然而并沒有培訓班。

      來自廣東 回復
    2. 哈哈哈哈,我也覺得,為什么套路一模一樣,單純好奇

      來自重慶 回復
  7. 加個好友啊,大佬~

    來自香港 回復
  8. 方便加個qq學習一下嗎?

    來自廣東 回復
  9. 這是哪個培訓課程的作業(yè)? 好幾篇PRD文章 內(nèi)容相似度太高了 盒馬鮮生 和網(wǎng)易嚴選

    來自廣東 回復
    1. 沒有培訓。

      來自廣東 回復
    2. 那為什么你們這么相似呢,禮貌提問

      來自重慶 回復
    3. 樓主博客被盜名轉(zhuǎn)發(fā)了唄。,。

      來自上海 回復
    4. 但是內(nèi)容不一樣啊….是骨架一樣

      來自重慶 回復
  10. 您好,看過之后非常敬佩,我是在校生,好奇您是怎么自學的呢?

    來自黑龍江 回復
    1. 是的

      來自廣東 回復
  11. 給力

    來自重慶 回復
  12. 良心文章,受益頗多,感謝!

    來自北京 回復
    1. 謝謝支持與理解。

      來自廣東 回復
  13. 感謝作者提供了這么的案例,我也正在轉(zhuǎn)型產(chǎn)品的路上一路狂奔,祝好~

    來自河北 回復
    1. 加油!

      來自廣東 回復
  14. 感覺作者真的很用心在做事情,謝謝作者

    來自浙江 回復
    1. 加油!

      來自廣東 回復
  15. 論壇上這樣的良心文章不多啊

    來自江蘇 回復
    1. 感謝支持,做了快一年互聯(lián)網(wǎng)工作,然而并沒有做產(chǎn)品……

      來自廣東 回復
    2. 你是做哪方面的? 我是技術(shù)渣碩出生,現(xiàn)在打算做產(chǎn)品運營這塊,以后多向你請教

      來自江蘇 回復
    3. 很抱歉,沒有經(jīng)?;貋砜矗壳皬氖碌氖穷愃苾?nèi)容產(chǎn)品的工作。

      來自廣東 回復
    4. 我剛從內(nèi)容產(chǎn)品崗位跳出來 ??

      來自上海 回復
  16. 小白一枚,自己畫頁面邏輯圖的時候感覺很亂,求指導下,如何才能思路清晰 ??

    來自江蘇 回復
    1. 先選一些常用的App或者軟件,可能是你對應用還不是很熟悉吧。

      來自廣東 回復
  17. 你這一份已經(jīng)很不錯了,我很好奇你做產(chǎn)品多久了

    回復
    1. 這份文檔是去年轉(zhuǎn)行時候?qū)懙?,其實現(xiàn)在也沒有做真正的產(chǎn)品工作,很慚愧。

      來自廣東 回復
  18. 看了結(jié)構(gòu)圖,表示很膜拜,樓主好棒,可以加微信好友嗎?最近在準備轉(zhuǎn)行產(chǎn)品經(jīng)理,有很多不懂得,求指教~
    為了加好友特意注冊的哦~

    來自湖北 回復
    1. 感謝支持與理解,很遺憾我現(xiàn)在并沒有從事產(chǎn)品經(jīng)理的工作,但還是會努力的。

      來自廣東 回復
    2. 加油。

      來自北京 回復
  19. 這更像是一份交互文檔,這種混合式的文檔,更適合開發(fā)看。

    來自上海 回復
    1. 感謝支持與理解!您說的很棒!文檔撰寫之初確實是很偏向交互設(shè)計的。

      來自廣東 回復
    2. 很優(yōu)秀的,但是就怕他們看不下去,當初我也長篇文檔,幾乎不看,,,

      來自北京 回復
  20. 信息結(jié)構(gòu)圖和功能結(jié)構(gòu)圖有什么區(qū)別啊

    來自廣東 回復
    1. 信息結(jié)構(gòu)圖一般脫離實際頁面,將各種用戶看到的內(nèi)容信息分類出來,便于技術(shù)人員設(shè)計表結(jié)構(gòu),比如QQ空間發(fā)布動態(tài)包含的內(nèi)容有圖片、文字、表情、時間、位置等,需數(shù)據(jù)庫調(diào)用存放的;產(chǎn)品結(jié)構(gòu)圖(又叫功能結(jié)構(gòu)圖),一般是將產(chǎn)品劃分各個功能模塊羅列多出,比如QQ空間的動態(tài)發(fā)布功能

      來自江蘇 回復
    2. 那信息架構(gòu)呢。跟信息結(jié)構(gòu)一樣嗎?

      來自廣東 回復
    3. 說的很到點

      來自廣東 回復
  21. 您的文檔給我很大的啟示,請問方便給一個聯(lián)系方式嗎。一起交流學習

    來自重慶 回復
    1. 感謝您的支持與理解~到目前為止我其實還沒有真正做產(chǎn)品經(jīng)理的工作,不過還是會繼續(xù)努力的!

      來自廣東 回復
  22. 可以的~

    來自廣東 回復
  23. 為了發(fā)個“佩服”專門注冊的賬號。

    來自北京 回復
    1. 感謝支持!~

      來自廣東 回復
  24. 大佬,頁面交互圖是怎么畫的?

    回復
    1. Axure畫的,我是小白,共同學習~

      來自廣東 回復
  25. 寫的真的好棒啊,能加個好友么,想討教 ??

    來自北京 回復
    1. 可以的哈~

      來自廣東 回復
  26. 想學習這些內(nèi)容,有沒有推薦的在線課程之類的?

    來自安徽 回復
    1. 感覺多看一些書比較好,課程貌似都不是很適合,親測。

      來自廣東 回復
    2. 您可以推薦一些不錯的書嗎?我最近在泡論壇,但是像您這樣高質(zhì)量的文章并不多。我想看書,但是又覺得如果書挑選得不對就浪費了很多時間。前輩,您可以推薦一些書嗎?

      來自湖北 回復
  27. 寫的挺好,加油

    來自廣東 回復
    1. 感謝支持~

      來自廣東 回復
  28. 你好,想問下樓主現(xiàn)在從事什么行業(yè)的產(chǎn)品經(jīng)理呢,現(xiàn)在技術(shù)轉(zhuǎn)化產(chǎn)品經(jīng)理好轉(zhuǎn)嗎?

    來自上海 回復
    1. 很遺憾目前并沒有從事我喜歡的產(chǎn)品工作…所以我沒法給你專業(yè)方面的意見,感謝你的支持!

      來自廣東 回復
    2. 現(xiàn)在沒有做產(chǎn)品工作嗎?

      來自廣東 回復
    3. 是的,很遺憾還沒有,不過也進入了互聯(lián)網(wǎng)公司,做產(chǎn)品的決心是不會斷的!

      來自廣東 回復
    4. 現(xiàn)在在互聯(lián)網(wǎng)公司從事什么崗位?運營嗎?我也準備轉(zhuǎn)行,有什么好的建議么? ??

      來自廣東 回復
  29. 方便加個微信學習一下嗎?

    來自四川 回復
    1. 互相學習~很抱歉回復晚了,感謝支持和理解。

      來自廣東 回復
    2. 沒事,不經(jīng)常在網(wǎng)站逛很正常

      來自四川 回復