本篇文章通過(guò)使用、體驗(yàn)、研究等方式倒推「易捷加油APP」，借助 Axure 撰寫(xiě) PRD 文檔。與大家分享。

作為產(chǎn)品小白，希望通過(guò)倒推的方式，來(lái)鍛煉產(chǎn)品思維、提升畫(huà)原型的能力。同時(shí)分享在使用中獲得的心得體會(huì)，歡迎提出寶貴建議。

目錄：

一、文檔綜述

1. 文檔屬性
2. 產(chǎn)品綜述

二、產(chǎn)品說(shuō)明

1. 產(chǎn)品功能結(jié)構(gòu)圖
2. 產(chǎn)品信息結(jié)構(gòu)圖
3. 產(chǎn)品結(jié)構(gòu)圖

三、全局說(shuō)明

1. 功能權(quán)限
2. 鍵盤(pán)交互說(shuō)明
3. 異常情況說(shuō)明
4. 交互規(guī)則
5. 數(shù)據(jù)說(shuō)明

四、部分任務(wù)流程

1. 購(gòu)物流程
2. 加油流程

五、部分功能詳細(xì)說(shuō)明

1. 登錄頁(yè)/注冊(cè)頁(yè)
2. 首頁(yè)
3. 商品詳情
4. 一鍵加油
5. 我的

六、非功能性需求

1. 性能需求
2. 可用性需求
3. 運(yùn)營(yíng)需求

七、優(yōu)化建議

優(yōu)化商品詳情頁(yè)

01 文檔綜述

1. 文檔屬性

2. 產(chǎn)品綜述

二、產(chǎn)品說(shuō)明

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

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

3. 產(chǎn)品結(jié)構(gòu)圖

三、全局說(shuō)明

1. 功能權(quán)限

登錄/未登錄：

• 登錄用戶可以瀏覽所有頁(yè)面、執(zhí)行所有操作。
• 未登錄用戶可以以游客身份進(jìn)行內(nèi)容游覽，可以游覽商城商品。

2. 鍵盤(pán)交互說(shuō)明

• 點(diǎn)擊APP手機(jī)號(hào)碼輸入框，頁(yè)面底部彈出數(shù)字鍵盤(pán)。
• 點(diǎn)擊其他輸入框時(shí)，頁(yè)面底部彈出字母鍵盤(pán)。

3.異常情況說(shuō)明

打斷后重新打開(kāi)APP：

點(diǎn)擊空白區(qū)域或無(wú)網(wǎng)絡(luò)情況：

無(wú)網(wǎng)絡(luò)情況：

4. 交互規(guī)則

加載狀態(tài)：

首頁(yè)：

商品列表模塊：

提示信息：

空狀態(tài)：

頁(yè)面在正常情況下，沒(méi)有數(shù)據(jù)顯示時(shí)，表現(xiàn)形式為插圖配提示性文案。如需要，根據(jù)特定頁(yè)面場(chǎng)景，增加引導(dǎo)用戶操作的Button或鏈接等；

操作狀態(tài)：

所有的按鈕或者可點(diǎn)擊的icon、文字均分為：可操作狀態(tài)，不可操作狀態(tài)兩種。

其中可操作狀態(tài)對(duì)應(yīng)可操作顏色，不可操作狀態(tài)一般可見(jiàn)，但為灰色，易捷加油APP沒(méi)有做操作后的按鈕狀態(tài)變化。

5. 數(shù)據(jù)說(shuō)明

四、部分任務(wù)流程

1. 購(gòu)物流程

2. 加油流程

五、部分功能詳細(xì)說(shuō)明

1. 登錄頁(yè)/注冊(cè)頁(yè)

頁(yè)面名稱(chēng)：登錄

入口：初始登錄APP

基本事件流程：

1. app顯示登錄表單頁(yè)面，表單中包含文本：①輸入手機(jī)號(hào)碼②輸入驗(yàn)證碼
2. 用戶輸入11位手機(jī)號(hào)碼，獲取驗(yàn)證碼并輸入
3. 點(diǎn)擊登錄按鈕，進(jìn)行登錄
4. 登錄成功進(jìn)入首頁(yè)

頁(yè)面邏輯：

1. 登錄方式：①手機(jī)號(hào)碼登錄②提供第三方登錄
2. 點(diǎn)擊手機(jī)號(hào)/驗(yàn)證碼登錄，輸入手機(jī)號(hào)和驗(yàn)證碼進(jìn)行登錄
3. 用戶可點(diǎn)擊注冊(cè)，輸入手機(jī)號(hào)碼，填寫(xiě)驗(yàn)證碼，設(shè)置密碼進(jìn)行登錄，并默認(rèn)“注冊(cè)代表同意用戶使用協(xié)議”

后置條件：登錄成功/登錄失敗重新登錄

異常流程：用戶輸入短信驗(yàn)證碼錯(cuò)誤，彈出“短信驗(yàn)證碼錯(cuò)誤”提示文本，2秒后消失，用戶重新操作

頁(yè)面內(nèi)交互：

1. 點(diǎn)擊手機(jī)號(hào)、驗(yàn)證碼輸入框時(shí)，數(shù)字鍵盤(pán)從底部向上彈出
2. 獲取驗(yàn)證碼后，按鈕內(nèi)容變?yōu)椤?20S”并開(kāi)始120秒倒數(shù)，120S后按鈕內(nèi)容變回“獲取驗(yàn)證碼”文字。

2. 首頁(yè)

頁(yè)面名稱(chēng)：首頁(yè)

前置條件：①登錄APP ②網(wǎng)絡(luò)良好

頁(yè)面邏輯：

1. 點(diǎn)擊掃描購(gòu)，定位便利店位置，掃描二維碼/條形碼商品，添加購(gòu)物車(chē)，支付
2. 點(diǎn)擊搜索框，關(guān)鍵詞搜索商品
3. 點(diǎn)擊掃描掃描二維碼/條形碼商品，添加購(gòu)物車(chē)
4. 點(diǎn)擊一鍵加油切換至加油頁(yè)面
5. 點(diǎn)擊Banner圖跳轉(zhuǎn)相關(guān)頁(yè)面
6. 點(diǎn)擊對(duì)應(yīng)標(biāo)簽跳轉(zhuǎn)至相應(yīng)頁(yè)面及操作
7. 點(diǎn)擊易捷頭條輪播主題，跳轉(zhuǎn)相應(yīng)頁(yè)面
8. 點(diǎn)擊商品跳轉(zhuǎn)商品詳情
9. 點(diǎn)擊推薦有獎(jiǎng)跳轉(zhuǎn)推薦有獎(jiǎng)方法及規(guī)則說(shuō)明

刷新機(jī)制：下拉頁(yè)面刷新

異常流程：

1. 無(wú)網(wǎng)絡(luò)情況下用戶當(dāng)前頁(yè)面受影響
2. 無(wú)網(wǎng)絡(luò)情況下無(wú)法操作功能按鈕及商品詳情

3. 商品詳情

頁(yè)面名稱(chēng)：商品詳情

前置條件：①登錄APP?②網(wǎng)絡(luò)良好

頁(yè)面邏輯：

1. 點(diǎn)擊商品圖片，可查看商品放大后的圖片
2. 點(diǎn)擊分享，彈出微信，朋友圈，短信，二維碼分享方式
3. 點(diǎn)擊客服跳轉(zhuǎn)在線客服頁(yè)面
4. 點(diǎn)擊收藏，收藏按鈕狀態(tài)變紅
5. 點(diǎn)擊購(gòu)物車(chē)跳轉(zhuǎn)購(gòu)物車(chē)頁(yè)面
6. 點(diǎn)擊加入購(gòu)物車(chē)，商品添加至購(gòu)物車(chē)
7. 點(diǎn)擊立即購(gòu)買(mǎi)，彈出商品頭像，庫(kù)存情況，價(jià)格，幾件，確定

刷新機(jī)制：固定頁(yè)面布局，無(wú)刷新?tīng)顟B(tài)

異常情況：

1. 在無(wú)網(wǎng)絡(luò)情況下進(jìn)入頁(yè)面，頁(yè)面提示“哇哦，網(wǎng)絡(luò)出錯(cuò)了，刷新試試”
2. 在無(wú)網(wǎng)絡(luò)情況前進(jìn)入頁(yè)面，頁(yè)面顯示商品詳情，操作相關(guān)按鈕提示“無(wú)網(wǎng)絡(luò)”

4. 一鍵加油

頁(yè)面名稱(chēng)：一鍵加油

前置條件：①登錄APP?②網(wǎng)絡(luò)良好

頁(yè)面邏輯：

1. 點(diǎn)擊切換加油錢(qián)包頁(yè)面，可查看余額，充值，賬單，車(chē)牌，加油記錄，發(fā)票開(kāi)具，修改支付密碼操作
2. 點(diǎn)擊導(dǎo)航，跳轉(zhuǎn)第三方導(dǎo)航APP導(dǎo)航加油站位置
3. 點(diǎn)擊相應(yīng)按鈕，切換對(duì)應(yīng)頁(yè)面，以及添加車(chē)牌操作
4. 點(diǎn)擊充值，跳轉(zhuǎn)充值頁(yè)面，選擇第三方支付充值
5. 點(diǎn)擊開(kāi)關(guān)按鈕，設(shè)置開(kāi)紙質(zhì)發(fā)票
6. 點(diǎn)擊一鍵加油，等待加油員給車(chē)加油
7. 點(diǎn)擊其他油站，地圖附近油站信息，顯示距離位置多遠(yuǎn)

刷新機(jī)制：固定頁(yè)面布局，無(wú)刷新?tīng)顟B(tài)

異常情況：

1. 在無(wú)網(wǎng)絡(luò)情況下，無(wú)法進(jìn)入一鍵加油頁(yè)面
2. 在無(wú)網(wǎng)絡(luò)情況提前進(jìn)入一鍵加油頁(yè)面，當(dāng)前頁(yè)面影響，無(wú)法顯示相應(yīng)三級(jí)頁(yè)面信息

5. 我的

頁(yè)面名稱(chēng)：進(jìn)入APP-我的

前置條件：①登錄APP②網(wǎng)絡(luò)良好

頁(yè)面邏輯：

1. 點(diǎn)擊設(shè)置，消息，標(biāo)簽鍵，下一頁(yè)圖標(biāo)，跳轉(zhuǎn)至相應(yīng)頁(yè)面
2. 顯示用戶信息，兌換包，積分，卡券，易捷幣，錢(qián)包
3. 可進(jìn)入App相關(guān)設(shè)置

刷新機(jī)制：固定頁(yè)面布局，無(wú)刷新?tīng)顟B(tài)

異常情況：

1. 無(wú)網(wǎng)絡(luò)狀態(tài)下進(jìn)入頁(yè)面，彈出浮窗“請(qǐng)檢查網(wǎng)絡(luò)”1S后消失；
2. 無(wú)網(wǎng)絡(luò)狀態(tài)下無(wú)法獲取相應(yīng)信息“獲取數(shù)據(jù)失敗啦，點(diǎn)擊屏幕重新加載”

六、非功能性需求

1. 性能需求

1. APP 啟動(dòng)時(shí)間不超過(guò) 5 秒（現(xiàn)在啟動(dòng)時(shí)間為 3 秒）。
2. APP 內(nèi)操作的響應(yīng)時(shí)間不超過(guò) 3 秒，在網(wǎng)絡(luò)連接超時(shí)/弱網(wǎng)情況下，需給出相應(yīng)提示并可重新加載。
3. 程序閑時(shí)沒(méi)有異常的 CPU 占用，忙時(shí)沒(méi)有異常的峰值占用。
4. 前端實(shí)現(xiàn)圖片懶加載，節(jié)約用戶流量，保障頁(yè)面加載速度。

2. 可用性需求

• 容錯(cuò)性：必要的引導(dǎo)和提示文字，應(yīng)該突出能夠讓用戶看到；當(dāng)操作結(jié)果不可逆的時(shí)候，需要有模態(tài)彈窗詢問(wèn)用戶讓其知道操作的后果并做出選擇；通知用戶、不會(huì)影響用戶操作、用戶可以不予回應(yīng)的通知，用非模態(tài)彈窗來(lái)實(shí)現(xiàn)。
• 狀態(tài)可見(jiàn)：讓用戶了解自己處于何種狀態(tài)。
• 環(huán)境貼切：使用用戶熟悉的界面范式和概念。
• 用戶可控：頁(yè)面返回按鈕應(yīng)明顯，位置應(yīng)統(tǒng)一，防止用戶因誤觸進(jìn)入頁(yè)面而無(wú)法返回。
• 一致性：結(jié)構(gòu)/色彩/文字/操作/反饋一致性。

3. 運(yùn)營(yíng)需求

用戶運(yùn)營(yíng)：

1. 推薦好友注冊(cè)，可以獲得易捷幣，在購(gòu)買(mǎi)商品的時(shí)候易捷幣可抵扣金額，商品可使用易捷幣使用數(shù)量為上限為本商品“易捷幣可抵扣金額”的數(shù)量。
2. 積分可以兌換商品，利用積分體系，來(lái)培養(yǎng)用戶習(xí)慣，提升產(chǎn)品的活躍度。
3. 優(yōu)惠/卡券可以去領(lǐng)券中心領(lǐng)取或系統(tǒng)自動(dòng)發(fā)放，優(yōu)惠/卡券分為優(yōu)惠券，線下券，抵用券
4. 用戶可以在 APP 中購(gòu)買(mǎi)商品，油卡，以及第三方服務(wù)，以滿足不同用戶需求。

內(nèi)容運(yùn)營(yíng)：

1. 建立便利店、線上商品、評(píng)價(jià)體系，能夠線上線下用戶需求，提高便利店?duì)I收。
2. 在公眾號(hào)定期推送文章，尤其是油價(jià)調(diào)整情況，以及相關(guān)活動(dòng)，提高用戶復(fù)購(gòu)率。

活動(dòng)運(yùn)營(yíng)：

• 新人專(zhuān)享：贈(zèng)送滿100元減20券，100元減40券，對(duì)于剛需用戶來(lái)說(shuō)，刺激用戶消費(fèi)。
• 滿送：充值多少錢(qián)送多少元指定商品券，在滿足用戶加油的同時(shí)，也能促進(jìn)用戶購(gòu)買(mǎi)其他產(chǎn)品，提高便利店?duì)I收

七、優(yōu)化建議

?優(yōu)化商品詳情頁(yè)：

1. 收藏位置調(diào)整至商品圖片下方，更符合用戶操作習(xí)慣；
2. 快遞包郵調(diào)整至服務(wù)；
3. 加入購(gòu)物車(chē)，立即購(gòu)買(mǎi)樣式更改為圓角，在導(dǎo)航欄中顯得更有層次感，識(shí)別度。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。