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

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

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

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

文檔目錄:

一、文檔綜述

1.1版本修訂記錄

1.2PRD輸出環(huán)境

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訂單的支付與評價頁面

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

7.1網(wǎng)絡異常

7.2登錄異常

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

八、總結

一、文檔綜述

1.1 版本修訂記錄

1.2 PRD輸出環(huán)境

1.3 產品介紹

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

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

二、產品結構

2.1 產品功能結構圖

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

2.2 產品信息結構圖

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

三、全局說明

3.1 功能權限

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

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

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

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

3.2 鍵盤說明

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

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

3.3頁面內交互

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

3.4 頁面異常

3.5 頁面間切換交互方式

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

3.6更多操作

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

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

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

六、頁面詳細功能說明

6.1 啟動頁

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

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

頁面邏輯:

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

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

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

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

6.2 登陸/注冊頁

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

1、登陸/注冊頁面

頁面邏輯內容:

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

頁面交互說明:

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

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

6.3 首頁(外賣頁)

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

6.3.1 外賣頁-上

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

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

(3)頁面結構

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

(4)邏輯內容詳細說明

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

頁面邏輯內容:

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

頁面交互說明:

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

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

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

頁面邏輯內容:

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

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

頁面交互說明:

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

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

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

頁面邏輯內容:

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

頁面交互說明:

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

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

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

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

頁面邏輯內容:

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

頁面交互說明:

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

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

頁面邏輯內容:

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

頁面交互說明:

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

6.3.2 外賣頁-中

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

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

(3)頁面結構

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

(4)邏輯內容詳細說明

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

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

頁面邏輯內容:

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

頁面交互說明:

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

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

頁面邏輯內容:

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

頁面交互說明:

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

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

6.3.3 外賣頁-下

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

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

(3)頁面結構

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

(4)邏輯內容詳細說明

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

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

頁面邏輯內容:

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

頁面交互說明:

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

6.3.4 外賣頁小結

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

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

6.4 商家頁面

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

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

(2)頁面結構:

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

(3)邏輯內容詳細說明

①?商家頁面更多操作

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

②?商家標題欄

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

③?商家促銷欄

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

④?商品/評價欄

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

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

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

⑤?商品結算欄

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

6.5 訂單的支付與評價頁面

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

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

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

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

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

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

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

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

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

7.1 網(wǎng)絡異常

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

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

網(wǎng)絡異常小結

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

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

7.2 登陸異常

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

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

登陸異常小結

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

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

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

八、總結

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

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

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 看到了新人轉產品的決心,表面東西可以靠耐心和心細去畫葫蘆,但實際工作中真的不回去做這么詳細的東西,都是快速迭代,產品最重要的還是業(yè)務理解能力和對事物本質的透析能力,另外對代碼和數(shù)據(jù)的理解也相當重要。

    來自浙江 回復
    1. 非常感謝您的支持和理解,我一定會繼續(xù)努力的!目前的目標是Appstore二十三類排行榜460個App,逐個熟悉其邏輯和功能以及為什么會這樣設計,考慮了哪些用戶場景,滿足了哪些用戶需求等等,只為鍛煉自己的產品思維和業(yè)務理解能力。

      來自廣東 回復
    2. 最好還是實戰(zhàn),你說的用戶場景,用戶需求都是在特定的時間區(qū)間,特定的環(huán)境下產生的,所謂此一時彼一時,與其研究其他產品經理的作品,還不如自己親身經歷一下,你就會發(fā)現(xiàn)你以為的為什么不是你以為的了。

      來自北京 回復
    3. 感謝您的支持和理解~!您所說的親身經歷是經歷一遍產品的開發(fā)或迭代嗎?我是轉行過來的,如果有機會肯定會去用心做,但沒有辦法,事與愿違,我只能這么說。

      來自廣東 回復
    4. 我剛剛沒看到您在之前就已經回答了我剛剛的評論,花了兩周做的這個工作,很厲害~。
      我想說我們有個三人小組,參加了微軟創(chuàng)新杯比賽(是一個把好想法轉化成好產品的一個比賽),如果通過初選,我們將會進入到進一步產品開發(fā)階段,您有興趣了解一下我們的產品構想么?

      來自重慶 回復
  2. app體驗已經寫的挺詳細了,但是流程圖看上去有點雜,至少顆粒度邊界不清晰。就我知道的用戶啟動app有很多業(yè)務要做。例如app要展示用戶匹配地址,需要檢測:
    1、用戶是否開啟定位權限
    2、是否已登錄
    3、是否存在當前有效的地址(地址會因為后端的調整,在有效和無效之間變換)
    定位成功后,還要進行最近有效地址的匹配(地址與上次不同時,還要進行用戶提醒)
    定位不成功,要進行對應的異常信息展示,并提供有效入口(例如,隨便看看,手動定位等等)
    完成以上動作后,再進行首頁內容的匹配工作。
    同時需要考慮邏輯優(yōu)先級,例如首頁存在彈出視圖時,是先進行地址匹配還是彈出視圖展示等等。

    來自浙江 回復
    1. 真心感謝您的支持和指導,這確實是我沒有考慮到的,如此可見一定還有很多模塊或者功能我考慮的不周全,我會再仔細的梳理一遍,并且在以后的學習和運用中多琢磨這些業(yè)務邏輯。

      來自廣東 回復
  3. 餓了么的金幣兌換并不是自己研發(fā)的,用的是第三方的兌換商城。

    來自浙江 回復
    1. 恩恩,明白~

      來自廣東 回復
  4. 文檔寫的真的很好,很細致,調理清晰;小反饋,1.流程其實可以在某種程度往簡單畫,功能最好拆分描述;2.關于產品經理的主要能力,輸出PRD是很重要的一項,但是我覺得能理解和分析每一個產品背后的東西更重要,市場需求,業(yè)務的商業(yè)邏輯等,這個才是產品經理的核心

    來自廣東 回復
    1. 感謝你的支持和理解,很受用,學習了~感謝您的小反饋 ??

      來自廣東 回復
  5. 寫的非常用心,點贊??

    回復
    1. 感謝您的支持!~

      來自廣東 回復
  6. 有沒有興趣來給一份簡歷,或者告訴我你郵箱

    回復
    1. zhl_11314@163.com我的郵箱

      來自廣東 回復
    2. 產品經理這app做的挺爛的

      回復
  7. 結構圖好全啊,分析的好細~~~

    回復
    1. 感謝支持。

      來自廣東 回復
  8. 排版看起來好亂,直接貼PDF看起來舒服

    來自江蘇 回復
    1. 感謝您的建議,謝謝支持。

      來自廣東 回復
  9. 好清晰的、、、邏輯

    來自江蘇 回復
    1. 感謝支持,新人希望多提建議和意見啊 ??

      來自廣東 回復
  10. 贊一個

    來自河南 回復
    1. 感謝支持。

      來自廣東 回復
  11. 登錄…登錄…登錄 ??

    來自北京 回復
    1. ???

      來自廣東 回復
  12. 好像部分和交互文檔重疊了

    來自浙江 回復
    1. 感謝您的支持。

      來自廣東 回復
  13. 厲害

    回復
    1. 新人轉行ing,一起努力一起哈啤!

      來自廣東 回復
  14. 想問下 五、頁面邏輯(用戶訂購商品主邏輯)的流轉圖是用的什么軟件做的?

    來自江蘇 回復
    1. 您好,我是用Axure RP 8.0做的。

      來自廣東 回復
    2. 導向箭頭是在哪里找到的??

      來自江蘇 回復
    3. 連接線啊親

      來自廣東 回復
    4. 哈哈 原來在它的樣式里面 謝謝謝謝 之前一直沒搞出來

      來自江蘇 回復
    5. 一起加油!一起哈?。?/p>

      來自廣東 回復
  15. 原型畫的好,我汗顏。不過建議一次只說某個功能。主要是數(shù)據(jù)的流轉,頁面的產生。另外角色權限這一塊沒涉及,可能也是看不到后臺吧。一個功能模塊是前端和后臺都有的。只是看到前端的界面,不知道后端數(shù)據(jù)的邏輯,是不完整的。設計產品時一個模塊都是同時考慮前后端,不同角色權限的。

    來自四川 回復
    1. 感謝您寶貴的建議,很受用!角色權限目前只是考慮了普通用戶,后臺數(shù)據(jù)沒有涉及到,此后會多加考慮。

      來自廣東 回復
  16. 作者好強大,請問用axure畫的嗎?

    回復
    1. 是用的Axure,也是產品小白一個。

      回復
    2. 可以可以,不錯

      來自廣東 回復
    3. 感謝支持。

      來自廣東 回復
  17. 作者有心了,潛力無限。

    回復
    1. 感謝感謝,會堅持下去的!

      回復
  18. 樓主很有心,作為一個沒有參與到項目研發(fā)過程的外人,能夠從多個維度復盤一款APP產品已經很難得了。建議后面,多增加“為什么要做這個需求并且做成這樣?”的思考,比起交互和原型界面,這部分內容更能體現(xiàn)產品經理的思維能力

    來自北京 回復
    1. 非常感謝您的指導建議,我會繼續(xù)努力的,轉行雖苦,但一定會堅持到底!

      來自廣東 回復
  19. 讓我這樣的新人無地自容

    來自廣東 回復
    1. 一起哈啤,一起加油!

      來自廣東 回復
    2. 像是來找工作的

      回復
    3. 只是把最近的準備和學習內容發(fā)出來,算是一個記錄吧。

      來自廣東 回復
  20. 厲害厲害,值得學習。你以后是想做電商類的產品嗎?

    來自四川 回復
    1. 感謝支持!目前還沒有限定具體的行業(yè)類別,現(xiàn)在只想先入行,從基礎的工作開始做起就可以,之前下了很大的決心想轉行產品,有些艱難。

      來自廣東 回復
  21. 能花這么多時間去倒推一個產品,很有心~

    來自四川 回復
    1. 感謝支持!之前還做了一個產品的體驗報告和競品分析,字數(shù)太多,沒有發(fā)出來,轉行很痛苦,沒有相關實際工作經驗。

      來自廣東 回復
    2. 等一波體驗報告和競品分析!

      來自廣東 回復
  22. 還不錯

    來自浙江 回復
    1. 感謝支持!

      來自廣東 回復
  23. 可以可以,不錯

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

      來自廣東 回復
  24. 表層的東西大家都能看到 深入理解呢?

    來自上海 回復
    1. 目前還處于學習積累階段,感謝您的建議。

      來自廣東 回復
    2. 但是表層的東西做成這樣已經很好了,這已經充分的體現(xiàn)了作者書寫文檔的能力和邏輯能力,還有說明夠用心,有多少人吵著天天要入行,之后沒有實踐呢。

      來自北京 回復
    3. 之前還準備了一份產品體驗報告和精品分析,大概有一萬八千字,但面試的結果不理想,革命尚未成功,同志仍需努力!我會堅持!感謝支持!

      來自廣東 回復
    4. 面試不成功的情況很多的,不一定是你不優(yōu)秀,繼續(xù)加油吧。我也要像你學習呢。

      來自北京 回復
    5. 真的很感謝您的支持和理解,我會堅持下去的

      來自廣東 回復
    6. 不說好不好 只是我站在讀者這個角度 給予這篇文章或者讀者的一個建議 理解為用戶反饋就行

      來自上海 回復
    7. 確實沒有產品實際工作經驗,所以考慮的不到位,感謝您的建議。

      來自廣東 回復
    8. 你這個來的太直接了,我是感覺你先給予作者肯定,之后再說建議加一點深入的東西會更好一點。能理解你的意思,就是這樣的表達方式我不是太接受。哈哈哈

      來自北京 回復
  25. 不知道作者這篇文章是不是受網(wǎng)易云音樂那篇文章的影響而來的

    來自上海 回復
    1. 目前還是學習積累階段,看了很多文章,也借鑒一些,感謝。

      回復
  26. 原型畫的很細致。作者現(xiàn)在是什么職業(yè)?

    來自上海 回復
    1. 目前已經離職,找產品工作ing…

      回復
  27. 前員工來報到了,寫得挺詳細的,畫圖也很棒啊,樓主好有耐心。通篇看下來感覺更加偏向交互設計,如果可以加一些對于功能和業(yè)務上的思考會更好的~

    來自上海 回復
    1. 嗯嗯,感謝寶貴建議

      回復
  28. 只看篇幅就感覺很可以了。。

    來自北京 回復
    1. 還寫了一篇有大概一萬八千字,但感覺寫的更多是浮于表面…

      回復
  29. 最難倒推的是后臺邏輯

    來自浙江 回復
    1. 能否指導一下,方便的話

      回復
  30. 倒推,看成了推到。。??赐臧l(fā)現(xiàn)還是很用心寫的。

    來自北京 回復
    1. 決心轉行到產品,感謝感謝

      回復