“餓了麼”App產品需求文檔

加關注,帶你看世界

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

“饿了么”App产品需求文档

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

文檔目錄:

一、文檔綜述

1.1版本修訂記錄

1.2PRD輸出環境

1.3產品介紹

二、產品結構

2.1產品功能結構圖

2.2產品信息結構圖

三、全局說明

3.1功能權限

3.2鍵盤說明

3.3頁面內交互

3.4頁面異常

3.5頁面間切換交互方式

3.6更多操作

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

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

六、頁面詳細功能說明

6.1啟動頁

6.2登陸/註冊頁

6.3首頁(外賣頁)

6.4商家頁面

6.5訂單的支付與評價頁面

七、測試異常頁面及突發狀況

7.1網絡異常

7.2登錄異常

7.3數據丟失

八、總結

一、文檔綜述

1.1 版本修訂記錄

“饿了么”App产品需求文档

1.2 PRD輸出環境

“饿了么”App产品需求文档

1.3 產品介紹

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

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

二、產品結構

2.1 產品功能結構圖

“饿了么”App产品需求文档

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

2.2 產品信息結構圖

“饿了么”App产品需求文档

“餓了麼”App的信息架構異常複雜,這對於平時基本只會用到點餐訂外賣的我來說是沒有想到的。一個主要針對在線訂餐服務的產品承載瞭如此多的內容,併產生了如此多的流量入口,可留存率容易降低且流量加工能力需要很強。

三、全局說明

3.1 功能權限

(1)分為登陸狀態和未登陸狀態

(2)登錄狀態可進行App內所有操作

(3)未登錄狀態下

  • 僅可以瀏覽頁面,如商家信息、商品信息等;

  • 無法進行商品預訂、訂單結算和商家收藏;

  • 無法進入金幣商城、推薦有獎、周邊優惠、免費流量以及官方活動等界面;

  • 無法查詢訂單和早餐預訂等。

3.2 鍵盤說明

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

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

3.3頁面內交互

(1)頂部和底部彈窗

“饿了么”App产品需求文档

(2)Toast、Dialog、Alert彈窗

“饿了么”App产品需求文档

3.4 頁面異常

“饿了么”App产品需求文档

3.5 頁面間切換交互方式

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

“饿了么”App产品需求文档

3.6更多操作

“饿了么”App产品需求文档

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

“饿了么”App产品需求文档

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

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

“饿了么”App产品需求文档“饿了么”App产品需求文档

六、頁面詳細功能說明

6.1 啟動頁

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

1、已連接網絡

“饿了么”App产品需求文档

頁面邏輯:

  • 在已連接網絡情況下,啟動餓了麼App後,進入引導頁;

  • 引導頁等待1秒後進入廣告頁;

  • 對廣告頁不進行任何操作等待3秒,或點擊頁面右上方“跳過”按鈕,進入App首頁(外賣頁);

  • 點擊廣告頁面圖片,彈出廣告內容。

2、未連接網絡

“饿了么”App产品需求文档

在未連接網絡情況下,啟動App後直接進入網絡異常提示頁面,並提示用戶重新加載。

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

6.2 登陸/註冊頁

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

1、登陸/註冊頁面

“饿了么”App产品需求文档

頁面邏輯內容:

  • 用戶輸入手機號碼,點擊“獲取驗證碼”按鈕,“獲取驗證碼”按鈕內容變為“已發送”,並倒計時30秒,30秒後“已發送”按鈕內容變為“重新獲取”;

  • 用戶收到驗證碼並在5分鐘內輸入即可登陸,超過5分鐘驗證碼失效需要重新獲取;

  • 若用戶在30秒內未收到手機驗證碼,點擊“重新獲取”按鈕嘗試重新獲取驗證碼;

  • 老用戶可使用手機號碼和登錄密碼進行登陸;

  • 用戶亦可點擊第三方登錄下的四個按鈕,調出其授權接口進行登陸操作。

頁面交互說明:

  • 用戶點擊手機號及驗證文本框,數字鍵盤從底部彈出;

  • 用戶點擊獲取驗證碼按鈕,按鈕顏色變為灰色,文本變為“已發送”並伴有30秒倒計時,30秒過後按鈕文本變為“重新獲取”;

  • 用戶點擊右上角“密碼登錄”,密碼登錄頁面從頁面右側彈出,同時字母全鍵盤從底部彈出,在輸入密碼時,可以點擊右側圖標設置是否顯示密碼;

  • 用戶點擊第三方登陸下的四個按鈕,相應的第三方授權頁面從頁面右側彈出。

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

“饿了么”App产品需求文档

6.3 首頁(外賣頁)

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

6.3.1 外賣頁-上

“饿了么”App产品需求文档

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

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

(3)頁面結構

  1. 用戶位置定位

  2. 用戶位置天氣

  3. 商家、商品搜索框

  4. 食品標籤欄

  5. 商品分類標籤區,共十五類

  6. 活動/廣告Banner,七例活動/廣告頁輪播

  7. 商品分類專題區,共五類

  8. 購物車,對添加進購物車的商品集中結算、刪除等。

(4)邏輯內容詳細說明

① 用戶位置定位:系統默認情況GPS自動定位並顯示用戶所在位置,點擊後頁面轉至選擇收貨地址頁面。

頁面邏輯內容:

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

“饿了么”App产品需求文档

頁面交互說明:

  • “外賣”頁面下點擊用戶位置定位,選擇收貨地址頁面從底部彈出;

  • “選擇收貨地址”頁面下點擊“請輸入地址”文本框,字母全鍵盤從底部彈出,當前地址、收貨地址和附近地址等頁面內容隱藏;

  • “選擇收貨地址”頁面下點擊新增地址,新增地址頁面從右側彈出,點擊相應文本框輸入內容時字母全鍵盤會從底部彈出,點擊地址文本框,右側彈出確認收貨地址頁面;

  • 文本框在輸入文本後,原文本框提示內容消失。

②用戶位置天氣,系統根據用戶所在位置實時的展示當前位置的天氣情況。

③商家、商品搜索框:點擊搜索框後頁面跳轉至商家、商品搜索頁面。

頁面邏輯內容:

  • 搜索頁面結構分為文本搜索框、歷史搜索及熱門搜索三部分內容;

  • 用戶輸入商家、商品名稱等內容進行搜索(支持內容模糊搜索),搜索完成後頁面轉至搜索的商家、商品推薦頁;

  • 系統對已搜索過的內容自動標籤化添加到歷史搜索內容(歷史搜索規則描述:按搜索的時間倒序排列,排列方式從左至右、從上至下排列,可展示四排內容,可點擊垃圾桶圖標清除所有歷史搜索內容,也可長按相應的搜索標籤進行刪除,標籤字數長度限制為十字符,超出部分用“…”代替。);

  • 熱門搜索內容是系統為用戶推薦的商家、商品及活動標籤,點擊相應標籤,進入相應商家、商品及活動推薦頁。

“饿了么”App产品需求文档
  • 商家、商品推薦頁面結構為搜索框、篩選排序欄、與搜索內容相關的標籤欄和推薦商家列表;

  • 在商家、商品推薦頁面上,與搜索內容相關的文本都被加粗加亮顯示,如“漢堡”;

  • 篩選排序欄分為綜合排序下拉列表、按銷量最高排序、按距離最近排序及篩選;綜合排序下拉列表包括好評優先、起送價最低、配送最快等選項;篩選則按照配送方式(蜂鳥專送)、優惠活動(新用戶、特價商品、下單立減、贈品優惠、下單返券、進店領券)、人均消費(20以下、20-40、40以上)等三方面進行篩選排序;

  • 標籤欄是可與搜索內容相關的可組合內容,如“漢堡”+“蜂鳥專送”、“漢堡”+“炸雞”,通過點擊各個標籤,商家列表將把包含搜索內容+標籤內容的商家羅列出來;

  • 在商家列表內點擊相應商家區域進入相應商家頁面。

頁面交互說明:

  • “外賣”頁面下點擊商家、商品搜索框,商家、商品搜索頁面淡入,外賣頁淡出,字母全鍵盤從底部彈出;

  • 在輸入文本後,文本框提示內容 消失;

  • 通過搜索商家和商品內容、點擊歷史搜索標籤及熱門搜索標籤,商家、商品及活動推薦頁面從右側彈出;

  • 點擊綜合排序或篩選,從“篩選排序欄”處彈出下拉列表,原商家、商品推薦頁面變暗;再次點擊綜合排序和篩選,下拉列表收回,商家、商品推薦頁面恢復;

  • 標籤欄可點擊選擇,也可以通過左右滑動的手勢查看後面的標籤,並點擊不同的標籤內容;

  • 單次點擊不同的標籤,商家列表刷新且加入不同的標籤內容,重複點擊同一標籤,刪除之前添加的標籤內容;

  • 商家列表可上下滑動,顯示更多信息,滑動時上、下部均有邊界,上部為阻尼拖拽,下部會在邊界處更新內容。

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

⑤商品分類標籤區:共十五類,點擊相應的商品分類標籤,進入相應的商品推薦頁面。由於標籤區十五類商品分類的頁面結構和內容極其相似,筆者暫時優先選擇對“美食”類標籤做分析和說明,其餘十四類會在以後逐一補充。

頁面邏輯內容:

  • “美食”頁面結構分為標題欄(包括美食標題、商家和商品搜索按鈕和返回按鈕),美食標籤欄,美食標籤區和與美食標籤相對應的商家推薦列表四部分。

  • 點擊標題欄中的搜索按鈕轉至商家、商品搜索頁;

  • 點擊美食標籤或在頁面內左右滑動“美食”頁面,美食標籤區和商家推薦列表的內容相應刷新並改變;

  • 點擊美食標籤欄的下拉按鈕,展開商品分類標籤區列表;

  • 點擊美食標籤區進入美食標籤區頁面,如“熱賣套餐”頁面;

  • 商家推薦列表包括篩選排序欄和商家列表,點擊商家區域會進入相應的商家頁面。

“饿了么”App产品需求文档
“饿了么”App产品需求文档

頁面交互說明:

  • “外賣”頁面下點擊商品分類標籤區標籤,如“美食”,“美食”頁面從右側彈出;

  • “美食”頁面下點擊搜索按鈕,商家、商品搜索頁面淡入,“美食”頁面淡出,字母全鍵盤從底部彈出;

  • “美食”頁面下點擊美食標籤欄下拉按鈕,“美食”頁面變暗,從“美食”標題欄處向下彈出商品分類標籤區列表,下拉按鈕方向向上,再次點擊下拉按鈕或者點擊空白區域,商品分類標籤區列表收回,“美食”頁面恢復,下拉按鈕方向恢復默認;

  • 在“美食”頁面非邊緣區域左右滑動,美食標籤跟隨頁面滑動,效果與點擊標籤相同,美食標籤區和商家推薦列表內容相應更新並改變;

  • 商家列表可上下滑動,顯示更多信息,滑動時上部有邊界,下部會不斷更新。

⑥活動/廣告Banner:七例活動/廣告頁輪播,點擊後頁面轉到相應活動/廣告頁面;

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

⑦商品分類專題區:共五類,包括“限量搶購”、“熱賣套餐”、“吃貨狂歡節”以及兩個根據每天和時段細分的不同分類專題,點擊後進入相應分類專題頁面,同樣由於商品分類專題區的五類專題從頁面結構和內容上極其相似,筆者優先選擇其中的“限量搶購”專題進行分析和說明,剩餘的四類在以後逐一補充。

頁面邏輯內容:

  • 限時搶購頁面的頁面結構分為標題欄、標籤欄和商品推薦列表,其中標籤欄包含早餐、下午茶、正餐、夜宵和水果零食五個細分,不同的標籤對應著相應的商品推薦列表;

  • 用戶可以根據餐時及自身的需要選擇相應的細分標籤,並在細分標籤下的商品推薦列表中挑選商品;

  • 在商品推薦列表中點擊商品所在區域,頁面轉至該商品所在的商家頁面,同時點擊的商品會自動加入已選商品列表等待用戶結算。

“饿了么”App产品需求文档

頁面交互說明:

  • 在“限時搶購”頁面下,點擊不同的標籤,標籤的底紋顏色會發生相應的變化,如早餐(綠色漸變)、下午茶(橙色漸變)、正餐(藍色漸變)、夜宵(深藍色漸變)、水果零食(紫色漸變);

  • 商品列表可上下滑動,顯示更多信息,滑動時上、下部均有邊界,上部為阻尼拖拽,下部會在邊界處更新內容;

  • 在商品推薦列表中點擊商品所在區域,商品所屬的商家界面會從“限時搶購”頁面右側彈出。

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

頁面邏輯內容:

  • “購物車”頁面主要分為兩部分,等待結算的商品訂單、起送價不足的商品訂單(商品價格低於商家配送的金額標準)和失效商家(商品所屬商家休息);

  • 用戶在對商品未進行結算之前,所有曾點擊添加過的商品都會進入“購物車”等待結算;

  • 在“購物車”中可能會有多種商品等待結算,用戶可以刪除不需要的商品亦可以對相應的商品進行結算支付;

  • 在結算支付過程中可以選擇更改收貨地址,使用紅包或代金券等;

“饿了么”App产品需求文档

頁面交互說明:

  • 用戶在“外賣頁”未有任何操作2秒時,購物車按鈕從頁面底部右側彈出,當進行滑動頁面或者任何操作時,購物車按鈕彈回右側;

  • 用戶點擊購物車按鈕,“購物車”頁面從頁面右側彈出;

  • 用戶在“購物車”頁面點擊垃圾桶圖標,彈出Toast提示是否確認刪除該商家的所有商品;

  • 用戶在“購物車”頁面點擊“去結算”按鈕,支付頁面從右側彈出,且在“支付”頁面下點擊當前收貨地址,可修改並重新選擇收貨地址,選擇收貨地址頁面從右側彈出;

  • 在“支付”頁面點擊“免密支付”,“下單成功”頁面從右側彈出。

6.3.2 外賣頁-中

“饿了么”App产品需求文档

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

  1. 商家、商品搜索框

  2. 商品分類專題區,共五類

  3. 官方推薦精品商家

  4. 品質優選區,大牌精選商家

  5. 購物車

  6. 推薦商家列表

(4)邏輯內容詳細說明

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

③官方推薦精品商家:每天系統都會對該區內容作出更新調整,用戶點擊官方推薦精品商家區域後頁面轉至精品商家頁面。

頁面邏輯內容:

  • 官方推薦精品商家區域類似一個廣告鏈接,用戶點擊過後轉至商家頁面;

  • 結構佈局主要由商家主打商品圖片、特價商品信息和促銷活動信息構成。

“饿了么”App产品需求文档

頁面交互說明:

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

④品質優選區,大牌商家:用戶點擊該區域頁面轉至品質優選頁面。

頁面邏輯內容:

  • “外賣”頁下的品質優選區域由標題(品質優選)和商家推薦表組成,商家推薦表由單行四列的商家(商家圖片+商家名稱+“大牌精選”標註)構成,商家名稱最多顯示五個字符,如名稱超過五個字符,第五個字符由“…”代替,如“深圳麥當…(深圳麥當勞)”;

  • 品質優選頁面結構由標題欄(即品質優選)和推薦商家列表組成;

  • 推薦商家列表內羅列的商家都是規模較大的品牌商家,每個商家下方都放置“大牌精選”的標註;

  • 在商家列表中點擊商家區域進入相應的商家頁面;

  • 由於沒有篩選排序欄,在品質優選頁面無法對商家列表進行排序,因而其排列規則筆者暫時還無從知曉。

“饿了么”App产品需求文档

頁面交互說明:

  • 在“外賣”頁下點擊品質優選區域,品質優選頁面從“外賣”頁右側彈出;

  • 在“品質優選”頁下點擊推薦商家列表內的相應商家區域,商家頁面從“品質優選”頁右側彈出;

  • 商家列表可上下滑動,顯示更多信息,滑動時上、下部均有邊界,上部為阻尼拖拽,下部會在邊界處更新內容。

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

6.3.3 外賣頁-下

“饿了么”App产品需求文档

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

  1. 商家、商品搜索框

  2. 商家推薦列表

  3. 購物車

(4)邏輯內容詳細說明

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

②商家推薦列表,羅列了餓了麼App內所有的商家,包括普通商家、品牌商家和新入駐商家,用戶點擊相應的商家區域便進入到相應的商家頁面,並在商家頁面下挑選商品進行預訂和結算。

頁面邏輯內容:

  • 商家推薦列表中的商家信息由商家圖片、名稱、星級評分、月售訂單數、起送價格、配送方式、配送費、配送時間、商家距離、商家促銷活動以及商家保障等構成;·

  • 每一個商家的促銷活動信息最多顯示兩條,可通過點擊促銷活動下拉菜單查看所有的促銷活動;

  • 點擊相應的商家區域轉至相應的商家頁面;

  • 商家推薦列表中沒有篩選排序欄,因而商家列表的牌序規則筆者暫時無從知曉。

“饿了么”App产品需求文档

頁面交互說明:

  • 在“外賣”頁的商家推薦列表下點擊商家區域,商家頁面從“外賣”頁右側彈出;

  • 推薦商家列表可上下滑動,顯示更多信息,滑動時上、下部均有邊界,上部為阻尼拖拽,下部會在邊界處更新商家列表內容。

6.3.4 外賣頁小結

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

“饿了么”App产品需求文档

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

6.4 商家頁面

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

“饿了么”App产品需求文档

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

(2)頁面結構:

  1. 商家頁面更多操作

  2. 商家標題欄

  3. 商家促銷活動欄

  4. 商品/評價欄

  5. 商品結算欄

(3)邏輯內容詳細說明

① 商家頁面更多操作

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

“饿了么”App产品需求文档

② 商家標題欄

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

“饿了么”App产品需求文档

③ 商家促銷欄

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

“饿了么”App产品需求文档

④ 商品/評價欄

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

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

評價頁面包含商家的綜合評分信息與用戶評價內容兩部分。在綜合評分信息欄中用戶可以看到商家的服務態度、商品評分及商品的送達時間,數據都來自於用戶的彙總評價。用戶評價內容分三欄,上方為查看評價內容的標籤欄(全部、滿意、不滿意、有圖、味道好、送貨慢等),標籤中的數字代表該標籤下的評價總數量,中間為提醒用戶是否選擇查看有內容的評論,下方則是具體用戶的評價內容及評價時間。“餓了麼”的評價系統均採用匿名評價的方式,評價內容包括用戶對商家服務、商品、送達時間以及具體的評價內容等四方面。

“饿了么”App产品需求文档

⑤ 商品結算欄

用於用戶對已挑選的商品進行結算並且與購物車相關聯。用戶在商品列表中對滿意的商品點擊“+”按鈕時,會有模擬商品從“+”按鈕處以拋物線形式動態掉落至結算欄圖標處,同時“+”按鈕向左彈出“-”按鈕,此時用戶點擊“+”、“-”按鈕,即相應增減結算欄中的商品數量。用戶點擊商品結算欄區域會從結算欄處向上彈出結算列表,用戶可以對已選的商品進行增減數量及清空等操作,在結算列表彈出的時候,商家頁面同時變暗。點擊“去結算”按鈕後,頁面轉至訂單預支付頁面。

“饿了么”App产品需求文档

6.5 訂單的支付與評價頁面

在訂單預支付頁面,用戶可以查看並修改個人的收貨地址,同時查看訂單預計送達時間和訂單詳情(包括商家、商品內容)。根據用戶的口味偏好及用餐人數,用戶可以設置備註填寫個人口味及餐具數量。在用戶支付訂單之前,還可以查看是否有紅包和代金券可用,並選擇相應的在線支付方式及是否需要商家開具發票。目前餓了麼支持四種在線支付方式,包括支付寶免密支付、花唄、銀行卡網銀支付、QQ錢包支付等。筆者常用的支付方式是支付寶免密支付,這種支付方式快捷便利,在確定了收貨地址、訂單內容與商品金額後,點擊“免密支付”按鈕頁面隨即轉至下單成功頁面,然後點擊“完成”按鈕就可以靜靜地等待商品送貨上門了,同時在下單成功頁面用戶還可以在頁面下方查看和自己口味、興趣相當的其他用戶都看了哪些商品,逛了哪些商家。

“饿了么”App产品需求文档

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

“饿了么”App产品需求文档

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

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

“饿了么”App产品需求文档

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

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

當用戶對訂單提交評價後,頁面轉至評價成功界面。至此,表示用戶在“餓了麼”App內的預訂商品交易流程完成。

“饿了么”App产品需求文档

七、測試異常頁面及突發狀況

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

7.1 網絡異常

“饿了么”App产品需求文档

測試內容:斷開網絡時各頁面的顯示內容及聯網使用過程中突然的斷網狀態。

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

網絡異常小結

網絡異常突發狀況下,“餓了麼”App會以三種方式應對處理即:頁面數據緩存、設計網絡異常UI界面和彈窗提示。

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

7.2 登陸異常

“饿了么”App产品需求文档

測試內容:未登錄狀態下查看各頁面內容及嘗試結算訂單。

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

登陸異常小結

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

7.3 數據丟失

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

八、總結

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

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

“饿了么”App产品需求文档

本文由Milo原創,產品會轉載發佈僅用於學習交流,如涉及版權問題,請聯繫小編,微信:hf16881688~ 產品會QQ群:140710383~ MVP聯盟QQ群:213626555~


分享到:


相關文章: