倒推“餓了么”App產品需求文檔(PRD)
產品需求文檔(PRD),是一個產品項目由“概念化”階段進入到“圖紙化”階段的最主要的一個文檔,其作用是“對市場需求文檔(MRD)中的內容進行指標化和技術化”,文檔的質量好壞直接影響到研發部門是否能夠明確產品的功能與性能。
下面筆者將以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 版本修訂記錄
1.2 PRD輸出環境
1.3 產品介紹
“餓了么”于2009年4月上線,是一款在線外賣訂餐服務平臺。為中國廣泛地區的用戶提供豐富多樣、簡單快捷的在線訂餐服務;為不同類型的餐飲商戶提供基于互聯網技術的一體化運營解決方案。
“餓了么”移動端App,滿足用戶在手機端使用產品時的基本功能主要包括用戶在線訂購外賣、商家入駐、配送服務、城市服務代理等。
二、產品結構
2.1 產品功能結構圖
(右擊,在新標簽頁中打開即可查看大圖)
2.2 產品信息結構圖
“餓了么”App的信息架構異常復雜,這對于平時基本只會用到點餐訂外賣的我來說是沒有想到的。一個主要針對在線訂餐服務的產品承載了如此多的內容,并產生了如此多的流量入口,可留存率容易降低且流量加工能力需要很強。
三、全局說明
3.1 功能權限
(1)分為登陸狀態和未登陸狀態
(2)登錄狀態可進行App內所有操作
(3)未登錄狀態下
- 僅可以瀏覽頁面,如商家信息、商品信息等;
- 無法進行商品預訂、訂單結算和商家收藏;
- 無法進入金幣商城、推薦有獎、周邊優惠、免費流量以及官方活動等界面;
- 無法查詢訂單和早餐預訂等。
3.2 鍵盤說明
(1)點擊(手機號與驗證碼)輸入框時頁面底部彈出數字鍵盤;
(2)點擊其他輸入框頁面底部彈出字母全鍵盤。
3.3頁面內交互
(1)頂部和底部彈窗
(2)Toast、Dialog、Alert彈窗
3.4 頁面異常
3.5 頁面間切換交互方式
在當前頁面左邊緣處用右劃手勢快速返回之前頁面。
3.6更多操作
四、用戶操作主流程(外賣頁)
從用戶操作的主流程可以看出,“餓了么”App并不像其他一些App特別注重用戶的注冊引導性,只有在用戶需要修改/添加“收貨地址”和“提交訂單”時才會判斷用戶是否已登錄,這和“餓了么”的主要業務和功能需求有關,用戶在未登錄的狀態下依然可以先查看商品的內容信息,并在對個人喜好或者偏愛的商品下訂單作出決定時,再適時提醒用戶是否登錄,這看似遲緩的引導反而在一定的程度上增強了用戶的粘性。
五、頁面邏輯(用戶訂購商品主邏輯)
六、頁面詳細功能說明
6.1 啟動頁
啟動頁前置條件為是否已連接網絡,分為以下兩種情況:
1、已連接網絡
頁面邏輯:
- 在已連接網絡情況下,啟動餓了么App后,進入引導頁;
- 引導頁等待1秒后進入廣告頁;
- 對廣告頁不進行任何操作等待3秒,或點擊頁面右上方“跳過”按鈕,進入App首頁(外賣頁);
- 點擊廣告頁面圖片,彈出廣告內容。
2、未連接網絡
在未連接網絡情況下,啟動App后直接進入網絡異常提示頁面,并提示用戶重新加載。
思考:此處餓了么App并沒有使用其他彈窗來引導用戶如何檢查或設置網絡及網絡路徑,僅有的網絡異常提示和重新加載按鈕個人感覺從體驗上不能有效的幫助用戶解決網絡問題。
6.2 登陸/注冊頁
“餓了么”App的登陸方式采用手機號碼與驗證碼、密碼登錄及第三方登錄(調用第三方授權接口登陸)相結合的方式,最大的便捷之處是省去了注冊的流程,用戶個人手機號碼即賬戶名,而通過手機號碼和驗證碼驗證登錄及第三方登陸的過程就替代了相對繁瑣的注冊流程。用戶在登陸以后可以再設置個人登錄密碼,同時熟悉用戶的個人頁面。
1、登陸/注冊頁面
頁面邏輯內容:
- 用戶輸入手機號碼,點擊“獲取驗證碼”按鈕,“獲取驗證碼”按鈕內容變為“已發送”,并倒計時30秒,30秒后“已發送”按鈕內容變為“重新獲取”;
- 用戶收到驗證碼并在5分鐘內輸入即可登陸,超過5分鐘驗證碼失效需要重新獲取;
- 若用戶在30秒內未收到手機驗證碼,點擊“重新獲取”按鈕嘗試重新獲取驗證碼;
- 老用戶可使用手機號碼和登錄密碼進行登陸;
- 用戶亦可點擊第三方登錄下的四個按鈕,調出其授權接口進行登陸操作。
頁面交互說明:
- 用戶點擊手機號及驗證文本框,數字鍵盤從底部彈出;
- 用戶點擊獲取驗證碼按鈕,按鈕顏色變為灰色,文本變為“已發送”并伴有30秒倒計時,30秒過后按鈕文本變為“重新獲取”;
- 用戶點擊右上角“密碼登錄”,密碼登錄頁面從頁面右側彈出,同時字母全鍵盤從底部彈出,在輸入密碼時,可以點擊右側圖標設置是否顯示密碼;
- 用戶點擊第三方登陸下的四個按鈕,相應的第三方授權頁面從頁面右側彈出。
2、登陸/注冊功能邏輯流程
6.3 首頁(外賣頁)
由于筆者繪制的App原型圖完全參照個人手機屏幕的實際尺寸即(375px*677px),所以這里將首頁(外賣頁)分為上、中、下三個部分,并對相應的功能和操作進行逐一說明。
6.3.1 外賣頁-上
(1)頁面名稱:外賣頁-上
(2)頁面入口:“餓了么”App首頁
(3)頁面結構
- 用戶位置定位
- 用戶位置天氣
- 商家、商品搜索框
- 食品標簽欄
- 商品分類標簽區,共十五類
- 活動/廣告Banner,七例活動/廣告頁輪播
- 商品分類專題區,共五類
- 購物車,對添加進購物車的商品集中結算、刪除等。
(4)邏輯內容詳細說明
①?用戶位置定位:系統默認情況GPS自動定位并顯示用戶所在位置,點擊后頁面轉至選擇收貨地址頁面。
頁面邏輯內容:
在選擇收貨地址頁面,用戶點擊“請輸入地址”文本框輸入新地址、或點擊頁面中已保存的其他收貨地址、抑或點擊頁面右上方的新增地址并且編輯確定后,選擇收貨地址頁面轉回至外賣頁,用戶位置定位變更為當前已修改的新地址。
頁面交互說明:
- “外賣”頁面下點擊用戶位置定位,選擇收貨地址頁面從底部彈出;
- “選擇收貨地址”頁面下點擊“請輸入地址”文本框,字母全鍵盤從底部彈出,當前地址、收貨地址和附近地址等頁面內容隱藏;
- “選擇收貨地址”頁面下點擊新增地址,新增地址頁面從右側彈出,點擊相應文本框輸入內容時字母全鍵盤會從底部彈出,點擊地址文本框,右側彈出確認收貨地址頁面;
- 文本框在輸入文本后,原文本框提示內容消失。
②用戶位置天氣,系統根據用戶所在位置實時的展示當前位置的天氣情況。
③商家、商品搜索框:點擊搜索框后頁面跳轉至商家、商品搜索頁面。
頁面邏輯內容:
- 搜索頁面結構分為文本搜索框、歷史搜索及熱門搜索三部分內容;
- 用戶輸入商家、商品名稱等內容進行搜索(支持內容模糊搜索),搜索完成后頁面轉至搜索的商家、商品推薦頁;
- 系統對已搜索過的內容自動標簽化添加到歷史搜索內容(歷史搜索規則描述:按搜索的時間倒序排列,排列方式從左至右、從上至下排列,可展示四排內容,可點擊垃圾桶圖標清除所有歷史搜索內容,也可長按相應的搜索標簽進行刪除,標簽字數長度限制為十字符,超出部分用“…”代替。);
- 熱門搜索內容是系統為用戶推薦的商家、商品及活動標簽,點擊相應標簽,進入相應商家、商品及活動推薦頁。
- 商家、商品推薦頁面結構為搜索框、篩選排序欄、與搜索內容相關的標簽欄和推薦商家列表;
- 在商家、商品推薦頁面上,與搜索內容相關的文本都被加粗加亮顯示,如“漢堡”;
- 篩選排序欄分為綜合排序下拉列表、按銷量最高排序、按距離最近排序及篩選;綜合排序下拉列表包括好評優先、起送價最低、配送最快等選項;篩選則按照配送方式(蜂鳥專送)、優惠活動(新用戶、特價商品、下單立減、贈品優惠、下單返券、進店領券)、人均消費(20以下、20-40、40以上)等三方面進行篩選排序;
- 標簽欄是可與搜索內容相關的可組合內容,如“漢堡”+“蜂鳥專送”、“漢堡”+“炸雞”,通過點擊各個標簽,商家列表將把包含搜索內容+標簽內容的商家羅列出來;
- 在商家列表內點擊相應商家區域進入相應商家頁面。
頁面交互說明:
- “外賣”頁面下點擊商家、商品搜索框,商家、商品搜索頁面淡入,外賣頁淡出,字母全鍵盤從底部彈出;
- 在輸入文本后,文本框提示內容 消失;
- 通過搜索商家和商品內容、點擊歷史搜索標簽及熱門搜索標簽,商家、商品及活動推薦頁面從右側彈出;
- 點擊綜合排序或篩選,從“篩選排序欄”處彈出下拉列表,原商家、商品推薦頁面變暗;再次點擊綜合排序和篩選,下拉列表收回,商家、商品推薦頁面恢復;
- 標簽欄可點擊選擇,也可以通過左右滑動的手勢查看后面的標簽,并點擊不同的標簽內容;
- 單次點擊不同的標簽,商家列表刷新且加入不同的標簽內容,重復點擊同一標簽,刪除之前添加的標簽內容;
- 商家列表可上下滑動,顯示更多信息,滑動時上、下部均有邊界,上部為阻尼拖拽,下部會在邊界處更新內容。
④食品標簽欄:點擊相應的食品標簽進入相應的食品內容搜索頁面(與“商家、商品搜索框搜索到的商家、商品推薦頁一致”),同時向下拉動“外賣”頁面可以更新食品標簽欄的內容,食品標簽欄最多展示七個食品標簽。
⑤商品分類標簽區:共十五類,點擊相應的商品分類標簽,進入相應的商品推薦頁面。由于標簽區十五類商品分類的頁面結構和內容極其相似,筆者暫時優先選擇對“美食”類標簽做分析和說明,其余十四類會在以后逐一補充。
頁面邏輯內容:
- “美食”頁面結構分為標題欄(包括美食標題、商家和商品搜索按鈕和返回按鈕),美食標簽欄,美食標簽區和與美食標簽相對應的商家推薦列表四部分。
- 點擊標題欄中的搜索按鈕轉至商家、商品搜索頁;
- 點擊美食標簽或在頁面內左右滑動“美食”頁面,美食標簽區和商家推薦列表的內容相應刷新并改變;
- 點擊美食標簽欄的下拉按鈕,展開商品分類標簽區列表;
- 點擊美食標簽區進入美食標簽區頁面,如“熱賣套餐”頁面;
- 商家推薦列表包括篩選排序欄和商家列表,點擊商家區域會進入相應的商家頁面。
頁面交互說明:
- “外賣”頁面下點擊商品分類標簽區標簽,如“美食”,“美食”頁面從右側彈出;
- “美食”頁面下點擊搜索按鈕,商家、商品搜索頁面淡入,“美食”頁面淡出,字母全鍵盤從底部彈出;
- “美食”頁面下點擊美食標簽欄下拉按鈕,“美食”頁面變暗,從“美食”標題欄處向下彈出商品分類標簽區列表,下拉按鈕方向向上,再次點擊下拉按鈕或者點擊空白區域,商品分類標簽區列表收回,“美食”頁面恢復,下拉按鈕方向恢復默認;
- 在“美食”頁面非邊緣區域左右滑動,美食標簽跟隨頁面滑動,效果與點擊標簽相同,美食標簽區和商家推薦列表內容相應更新并改變;
- 商家列表可上下滑動,顯示更多信息,滑動時上部有邊界,下部會不斷更新。
⑥活動/廣告Banner:七例活動/廣告頁輪播,點擊后頁面轉到相應活動/廣告頁面;
頁面交互說明:點擊活動/廣告Banner區域,活動/廣告頁面從右側彈出。
⑦商品分類專題區:共五類,包括“限量搶購”、“熱賣套餐”、“吃貨狂歡節”以及兩個根據每天和時段細分的不同分類專題,點擊后進入相應分類專題頁面,同樣由于商品分類專題區的五類專題從頁面結構和內容上極其相似,筆者優先選擇其中的“限量搶購”專題進行分析和說明,剩余的四類在以后逐一補充。
頁面邏輯內容:
- 限時搶購頁面的頁面結構分為標題欄、標簽欄和商品推薦列表,其中標簽欄包含早餐、下午茶、正餐、夜宵和水果零食五個細分,不同的標簽對應著相應的商品推薦列表;
- 用戶可以根據餐時及自身的需要選擇相應的細分標簽,并在細分標簽下的商品推薦列表中挑選商品;
- 在商品推薦列表中點擊商品所在區域,頁面轉至該商品所在的商家頁面,同時點擊的商品會自動加入已選商品列表等待用戶結算。
頁面交互說明:
- 在“限時搶購”頁面下,點擊不同的標簽,標簽的底紋顏色會發生相應的變化,如早餐(綠色漸變)、下午茶(橙色漸變)、正餐(藍色漸變)、夜宵(深藍色漸變)、水果零食(紫色漸變);
- 商品列表可上下滑動,顯示更多信息,滑動時上、下部均有邊界,上部為阻尼拖拽,下部會在邊界處更新內容;
- 在商品推薦列表中點擊商品所在區域,商品所屬的商家界面會從“限時搶購”頁面右側彈出。
⑧ 購物車:用戶可以對添加進購物車的商品進行結算、刪除等。
頁面邏輯內容:
- “購物車”頁面主要分為兩部分,等待結算的商品訂單、起送價不足的商品訂單(商品價格低于商家配送的金額標準)和失效商家(商品所屬商家休息);
- 用戶在對商品未進行結算之前,所有曾點擊添加過的商品都會進入“購物車”等待結算;
- 在“購物車”中可能會有多種商品等待結算,用戶可以刪除不需要的商品亦可以對相應的商品進行結算支付;
- 在結算支付過程中可以選擇更改收貨地址,使用紅包或代金券等;
頁面交互說明:
- 用戶在“外賣頁”未有任何操作2秒時,購物車按鈕從頁面底部右側彈出,當進行滑動頁面或者任何操作時,購物車按鈕彈回右側;
- 用戶點擊購物車按鈕,“購物車”頁面從頁面右側彈出;
- 用戶在“購物車”頁面點擊垃圾桶圖標,彈出Toast提示是否確認刪除該商家的所有商品;
- 用戶在“購物車”頁面點擊“去結算”按鈕,支付頁面從右側彈出,且在“支付”頁面下點擊當前收貨地址,可修改并重新選擇收貨地址,選擇收貨地址頁面從右側彈出;
- 在“支付”頁面點擊“免密支付”,“下單成功”頁面從右側彈出。
6.3.2 外賣頁-中
(1)頁面名稱:外賣頁-中
(2)頁面入口:“餓了么”App首頁
(3)頁面結構
- 商家、商品搜索框
- 商品分類專題區,共五類
- 官方推薦精品商家
- 品質優選區,大牌精選商家
- 購物車
- 推薦商家列表
(4)邏輯內容詳細說明
由于上述頁面結構中①、②、⑤部分在“外賣頁-上”中已作出過說明,不再贅述,接下來對③、④、⑥部分進行說明。
③官方推薦精品商家:每天系統都會對該區內容作出更新調整,用戶點擊官方推薦精品商家區域后頁面轉至精品商家頁面。
頁面邏輯內容:
- 官方推薦精品商家區域類似一個廣告鏈接,用戶點擊過后轉至商家頁面;
- 結構布局主要由商家主打商品圖片、特價商品信息和促銷活動信息構成。
頁面交互說明:
- 在“外賣”頁下點擊官方推薦精品商家區域,商家頁面從“外賣頁”右側彈出。
④品質優選區,大牌商家:用戶點擊該區域頁面轉至品質優選頁面。
頁面邏輯內容:
- “外賣”頁下的品質優選區域由標題(品質優選)和商家推薦表組成,商家推薦表由單行四列的商家(商家圖片+商家名稱+“大牌精選”標注)構成,商家名稱最多顯示五個字符,如名稱超過五個字符,第五個字符由“…”代替,如“深圳麥當…(深圳麥當勞)”;
- 品質優選頁面結構由標題欄(即品質優選)和推薦商家列表組成;
- 推薦商家列表內羅列的商家都是規模較大的品牌商家,每個商家下方都放置“大牌精選”的標注;
- 在商家列表中點擊商家區域進入相應的商家頁面;
- 由于沒有篩選排序欄,在品質優選頁面無法對商家列表進行排序,因而其排列規則筆者暫時還無從知曉。
頁面交互說明:
- 在“外賣”頁下點擊品質優選區域,品質優選頁面從“外賣”頁右側彈出;
- 在“品質優選”頁下點擊推薦商家列表內的相應商家區域,商家頁面從“品質優選”頁右側彈出;
- 商家列表可上下滑動,顯示更多信息,滑動時上、下部均有邊界,上部為阻尼拖拽,下部會在邊界處更新內容。
⑥推薦商家列表:由于推薦商家列表的主要內容在“外賣頁-下”中,所以其說明也放在“外賣頁-下”中進行。
6.3.3 外賣頁-下
(1)頁面名稱:外賣頁-下
(2)頁面入口:“餓了么”App首頁
(3)頁面結構
- 商家、商品搜索框
- 商家推薦列表
- 購物車
(4)邏輯內容詳細說明
由于上述頁面結構中①、③部分在“外賣頁-上”中已作出過說明,不再贅述,接下來對②部分進行主要說明。
②商家推薦列表,羅列了餓了么App內所有的商家,包括普通商家、品牌商家和新入駐商家,用戶點擊相應的商家區域便進入到相應的商家頁面,并在商家頁面下挑選商品進行預訂和結算。
頁面邏輯內容:
- 商家推薦列表中的商家信息由商家圖片、名稱、星級評分、月售訂單數、起送價格、配送方式、配送費、配送時間、商家距離、商家促銷活動以及商家保障等構成;·
- 每一個商家的促銷活動信息最多顯示兩條,可通過點擊促銷活動下拉菜單查看所有的促銷活動;
- 點擊相應的商家區域轉至相應的商家頁面;
- 商家推薦列表中沒有篩選排序欄,因而商家列表的牌序規則筆者暫時無從知曉。
頁面交互說明:
- 在“外賣”頁的商家推薦列表下點擊商家區域,商家頁面從“外賣”頁右側彈出;
- 推薦商家列表可上下滑動,顯示更多信息,滑動時上、下部均有邊界,上部為阻尼拖拽,下部會在邊界處更新商家列表內容。
6.3.4 外賣頁小結
縱觀整個外賣頁的功能與結構,大體可以分為三大類功能模塊即“搜索模塊(搜索框)”、“分類模塊(分類標簽/分類專題)”與“推薦模塊(推薦列表)”等?!梆I了么”App用這三大模塊功能對不同用戶的不同需求提供相應的解決方案,然而看似三種甚至更多的用戶需求入口,最終都會集中到同一出口即“具體的商家頁面”,進而結算商品訂單直至最終的交易完成,功能邏輯如下。
由此可見,“商家頁面”是“外賣”頁中最為主要且唯一的流量出口頁面,也正因如此,“餓了么”App才會選擇在這里來引導用戶登陸/注冊,而不是在App初次打開的首頁面便引導用戶。那么接下來筆者就對從商家頁面直至最后的交易完成整個流程進行逐一說明。
6.4 商家頁面
筆者通過自身的體驗,隨機選擇一個商家為例(漢克斯炸雞漢堡)。
(1)頁面名稱:商家頁面
(2)頁面結構:
- 商家頁面更多操作
- 商家標題欄
- 商家促銷活動欄
- 商品/評價欄
- 商品結算欄
(3)邏輯內容詳細說明
①?商家頁面更多操作
包含多人訂餐、進入購物車以及更多操作按鈕(“…”)。其中更多操作按鈕在點擊后彈出下拉列表菜單,菜單內容包括店內搜索、多人訂餐、分享商家、商家詳情頁和收藏商家等功能,點擊相應子菜單進入相應的功能頁面。
②?商家標題欄
顯示商家名稱、商家公告等信息,點擊此區域頁面轉至商家詳情頁。商家詳情頁展示商家名稱、評分、月售訂單量、商家公告、商家圖片、商家配送信息、商家促銷活動與服務、商家評價、商家信息(商家品類、商家電話、地址、營業時間)及商家營業資質等內容。用戶可以在商家詳情頁內查看該商家評價內容,聯系商家(商家電話),查看商家的營業資質或舉報商家等。
③?商家促銷欄
展示商家的促銷信息,單次點擊右側的“7個活動”區域(下拉列表)展開,再次點擊下拉列表收回,默認情況只展示一條促銷活動,在促銷欄展開時,商品/評論欄及下方的商品內容自動下移,同時促銷活動的角標垂直翻轉。
④?商品/評價欄
展示商品類型(如熱銷、優惠、新品上市等)及相應類型商品列表和用戶對商家商品的評價內容。默認情況下為“商品”頁面,展示的是商品類型內容,且“商品”字段下方注有下劃線,“商品字段”和“下劃線”顏色一致,當用戶點擊評價或者在頁面中左劃手勢操作時,“商品頁面”轉至評價頁面(從右側彈出)且“商品”字段下方下劃線動態滑落至“評價”字段下方,再次點擊“商品”或在頁面中右劃手勢操作返回商品頁面。
商品頁面包含內容:商品類型標簽、代金券領取和商品列表。點擊代金券處“去領取”按鈕即領取了商家的代金券,在商品列表中對相應商品點擊“+”按鈕,即將商品添加到結算欄中,同時該商品所屬的商品類型標簽及結算欄圖標的右上角相應增加角標如“1”、“2”等,具體角標數字視添加的商品數量而定。
評價頁面包含商家的綜合評分信息與用戶評價內容兩部分。在綜合評分信息欄中用戶可以看到商家的服務態度、商品評分及商品的送達時間,數據都來自于用戶的匯總評價。用戶評價內容分三欄,上方為查看評價內容的標簽欄(全部、滿意、不滿意、有圖、味道好、送貨慢等),標簽中的數字代表該標簽下的評價總數量,中間為提醒用戶是否選擇查看有內容的評論,下方則是具體用戶的評價內容及評價時間?!梆I了么”的評價系統均采用匿名評價的方式,評價內容包括用戶對商家服務、商品、送達時間以及具體的評價內容等四方面。
⑤?商品結算欄
用于用戶對已挑選的商品進行結算并且與購物車相關聯。用戶在商品列表中對滿意的商品點擊“+”按鈕時,會有模擬商品從“+”按鈕處以拋物線形式動態掉落至結算欄圖標處,同時“+”按鈕向左彈出“-”按鈕,此時用戶點擊“+”、“-”按鈕,即相應增減結算欄中的商品數量。用戶點擊商品結算欄區域會從結算欄處向上彈出結算列表,用戶可以對已選的商品進行增減數量及清空等操作,在結算列表彈出的時候,商家頁面同時變暗。點擊“去結算”按鈕后,頁面轉至訂單預支付頁面。
6.5 訂單的支付與評價頁面
在訂單預支付頁面,用戶可以查看并修改個人的收貨地址,同時查看訂單預計送達時間和訂單詳情(包括商家、商品內容)。根據用戶的口味偏好及用餐人數,用戶可以設置備注填寫個人口味及餐具數量。在用戶支付訂單之前,還可以查看是否有紅包和代金券可用,并選擇相應的在線支付方式及是否需要商家開具發票。目前餓了么支持四種在線支付方式,包括支付寶免密支付、花唄、銀行卡網銀支付、QQ錢包支付等。筆者常用的支付方式是支付寶免密支付,這種支付方式快捷便利,在確定了收貨地址、訂單內容與商品金額后,點擊“免密支付”按鈕頁面隨即轉至下單成功頁面,然后點擊“完成”按鈕就可以靜靜地等待商品送貨上門了,同時在下單成功頁面用戶還可以在頁面下方查看和自己口味、興趣相當的其他用戶都看了哪些商品,逛了哪些商家。
在用戶下單支付后,系統會給用戶派發分享紅包及優惠代金券禮包,紅包可以轉發分享給好友,類似微信紅包,隨機領取相應的紅包金額,而代金券禮包則是用戶自己領取,也是隨機金額。同時在等待訂單的過程中,用戶會接到“商家接單”及“配送員出發配送”的實時提醒,彈窗從頁面頂部彈出。此外用戶在訂單完成頁面點擊右上角的完成按鈕之后,頁面轉至等待送達的頁面。
在等待送達頁面用戶可通過上下劃手勢操作查看訂單預送達時間(由動態環形進度條顯示,隨著時間的推移,環形進度條逐漸減短),訂單信息(包括配送信息和訂單信息)等內容;用戶可根據自身需要進行“取消訂單、聯系賣家、催促賣家盡快發貨(催單)”等操作,在頁面的最下方也可以瀏覽其他商品信息。而當用戶存在任何與訂單相關的問題時都可以點擊頁面右上方的耳麥圖標,與“餓了么”App客服聯系。
當用戶收到商品后可點擊確認送達按鈕,或不進行操作,由賣家提交商品已送至用戶收貨地址處。此時頁面轉至訂單完成頁面,用戶可申請售后或者評價訂單。
評價頁面分為三部分:商品評價、商家服務評價及配送服務評價。三部分評價內容除了商品評價內可添加商品圖片外基本相同,都包括表情、標簽和文字內容。其中表情分為三類即代表“不滿意、基本滿意和很滿意”,默認表情為第二種基本滿意;標簽基本涵蓋了用戶對評價對象表示基本滿意的各項內容;如果用戶有對商家和商品有任何的看法和建議可以在文本框內輸入文字內容進行評價,文字內容不能涉及敏感詞庫并要超過五個字符,否則提交評價失敗且會有彈窗提示用戶。
當用戶在商品評價時輸入了文字內容或選擇了商品評價標簽,在提交評價后會得到10金幣,金幣用于“餓了么”App內另一個頁面功能(金幣商城),在這里筆者暫不作說明。
當用戶對訂單提交評價后,頁面轉至評價成功界面。至此,表示用戶在“餓了么”App內的預訂商品交易流程完成。
七、測試異常頁面及突發狀況
筆者根據自身對“餓了么”App的使用體驗,測試了一些異常頁面和突發狀況下App的應對處理方式,大體分為網絡異常、登陸異常及數據丟失等。
7.1 網絡異常
測試內容:斷開網絡時各頁面的顯示內容及聯網使用過程中突然的斷網狀態。
通過測試,筆者發現“餓了么”App在用戶網絡斷開連接時對首頁(外賣頁)及“我的”頁面做了數據的緩存,而沒有數據緩存的頁面如訂單頁則是做了網絡異常的UI界面設計,并且界面中包含動態的圖標,并提示用戶“網絡異常,重新加載”;在用戶使用App過程中,突發網絡中斷時會相應的彈出Toast提醒用戶“似乎已斷開與互聯網的連接”。
網絡異常小結
網絡異常突發狀況下,“餓了么”App會以三種方式應對處理即:頁面數據緩存、設計網絡異常UI界面和彈窗提示。
其中頁面數據緩存方式的頁面效果比較友好,而由于網絡異常導致的部分過期數據內容會困擾用戶(如“我的”頁面中的金幣和紅包),且隨著使用時長的增加,App緩存占用的內存會不斷增加;同時設計網絡異常UI頁面和彈窗提示能在一定程度上提高用戶體驗,但過度頻繁的提醒可能會增加用戶的厭煩感。
7.2 登陸異常
測試內容:未登錄狀態下查看各頁面內容及嘗試結算訂單。
通過測試,筆者發現在未登錄狀態下用戶除了訂單頁、用戶“我的”頁及在商家頁面結算時會提示用戶登陸或直接轉至登陸界面,其他頁面用戶都可以隨意查看瀏覽。由此可見,“餓了么”App對用戶的“登陸/注冊”引導性很低,然而考慮之前對“餓了么”多入口對應單出口的功能邏輯分析,這可能也是“餓了么”App采取的特有引導方式,即將“登陸/注冊”功能設置在商家頁面的結算出口處,針對不同使用場景及不同需求的用戶,以此來適當增加用戶對App的粘性。
登陸異常小結
登陸異常突發狀況下,“餓了么”App采取頁面跳轉登陸界面及設計登陸異常的UI界面兩種方式。其中需要用戶信息的頁面會有相應登陸異常的UI提示(如查看訂單頁),需要用戶信息的子頁面會直接轉至登陸頁面(如商家頁面與購物車的訂單結算)。
7.3 數據丟失
除了網絡異常及登陸異常以外,用戶還可能遇到在使用“餓了么”App過程中接打電話、手機突然關機、App程序突然崩潰等異常狀況,這些狀況都會造成一定程度上的數據丟失。在使用App時接打電話,“餓了么”程序會自動設置為后臺運行,但若在后臺運行的時間過長,再次打開程序頁面會默認轉至“歡迎引導頁”,而在手機關機和App崩潰的情況下,App只能重新打開,而不能回到之前操作的頁面。此外“餓了么”App對支付訂單功能設置了十五分鐘支付時效,即需要用戶在十五分鐘內對已選定的訂單進行結算付款,這也在一定程度上能夠解決可能的數據丟失造成的支付問題。
八、總結
由于“餓了么”App框架龐大,流量入口繁雜,筆者在此主要對首頁(外賣頁)部分及相應的邏輯功能流程進行撰寫說明,其他部分會在以后逐一補充。本篇PRD是個人根據現有的“餓了么”App產品倒推的,一定會有很多疏漏之處,作為一個決心入行的產品準新人小白,懇請您的諒解,此外有些功能邏輯或頁面邏輯闡述不合理的,也請您能幫我指出,在以后的學習中一定會逐漸修正,本人不勝感激!
注:文檔中所引用的彩色App截圖來源于“餓了么”App。
本文由 @Milo 原創發布于人人都是產品經理。未經許可,禁止轉載。
怎么沒有商家的操作說明和商家角色頁面
可以加個好友嗎?互相學習
這才是一個能提高效率的prd
感謝支持~
親,可以加個好友嗎?給你一個做產品的機會
謝謝支持。
辛苦了
加油!很久沒有來,好多評論沒有及時回復。
連續看了幾篇結構極度相似的prd,你們是同一個培訓班出來的嗎
hhh,然而并沒有培訓班。
哈哈哈哈,我也覺得,為什么套路一模一樣,單純好奇
加個好友啊,大佬~
方便加個qq學習一下嗎?
這是哪個培訓課程的作業? 好幾篇PRD文章 內容相似度太高了 盒馬鮮生 和網易嚴選
沒有培訓。
那為什么你們這么相似呢,禮貌提問
樓主博客被盜名轉發了唄。,。
但是內容不一樣啊….是骨架一樣
您好,看過之后非常敬佩,我是在校生,好奇您是怎么自學的呢?
是的
給力
良心文章,受益頗多,感謝!
謝謝支持與理解。
感謝作者提供了這么的案例,我也正在轉型產品的路上一路狂奔,祝好~
加油!
感覺作者真的很用心在做事情,謝謝作者
加油!
論壇上這樣的良心文章不多啊
感謝支持,做了快一年互聯網工作,然而并沒有做產品……
你是做哪方面的? 我是技術渣碩出生,現在打算做產品運營這塊,以后多向你請教
很抱歉,沒有經?;貋砜?,目前從事的是類似內容產品的工作。
我剛從內容產品崗位跳出來 ??
小白一枚,自己畫頁面邏輯圖的時候感覺很亂,求指導下,如何才能思路清晰 ??
先選一些常用的App或者軟件,可能是你對應用還不是很熟悉吧。
你這一份已經很不錯了,我很好奇你做產品多久了
這份文檔是去年轉行時候寫的,其實現在也沒有做真正的產品工作,很慚愧。
看了結構圖,表示很膜拜,樓主好棒,可以加微信好友嗎?最近在準備轉行產品經理,有很多不懂得,求指教~
為了加好友特意注冊的哦~
感謝支持與理解,很遺憾我現在并沒有從事產品經理的工作,但還是會努力的。
加油。
這更像是一份交互文檔,這種混合式的文檔,更適合開發看。
感謝支持與理解!您說的很棒!文檔撰寫之初確實是很偏向交互設計的。
很優秀的,但是就怕他們看不下去,當初我也長篇文檔,幾乎不看,,,
信息結構圖和功能結構圖有什么區別啊
信息結構圖一般脫離實際頁面,將各種用戶看到的內容信息分類出來,便于技術人員設計表結構,比如QQ空間發布動態包含的內容有圖片、文字、表情、時間、位置等,需數據庫調用存放的;產品結構圖(又叫功能結構圖),一般是將產品劃分各個功能模塊羅列多出,比如QQ空間的動態發布功能
那信息架構呢。跟信息結構一樣嗎?
說的很到點
您的文檔給我很大的啟示,請問方便給一個聯系方式嗎。一起交流學習
感謝您的支持與理解~到目前為止我其實還沒有真正做產品經理的工作,不過還是會繼續努力的!
可以的~
為了發個“佩服”專門注冊的賬號。
感謝支持!~
大佬,頁面交互圖是怎么畫的?
Axure畫的,我是小白,共同學習~
寫的真的好棒啊,能加個好友么,想討教 ??
可以的哈~
想學習這些內容,有沒有推薦的在線課程之類的?
感覺多看一些書比較好,課程貌似都不是很適合,親測。
您可以推薦一些不錯的書嗎?我最近在泡論壇,但是像您這樣高質量的文章并不多。我想看書,但是又覺得如果書挑選得不對就浪費了很多時間。前輩,您可以推薦一些書嗎?
寫的挺好,加油
感謝支持~
你好,想問下樓主現在從事什么行業的產品經理呢,現在技術轉化產品經理好轉嗎?
很遺憾目前并沒有從事我喜歡的產品工作…所以我沒法給你專業方面的意見,感謝你的支持!
現在沒有做產品工作嗎?
是的,很遺憾還沒有,不過也進入了互聯網公司,做產品的決心是不會斷的!
現在在互聯網公司從事什么崗位?運營嗎?我也準備轉行,有什么好的建議么? ??
方便加個微信學習一下嗎?
互相學習~很抱歉回復晚了,感謝支持和理解。
沒事,不經常在網站逛很正常