PRD:倒推“易捷加油APP”產品需求文檔

小程序這么火爆,作為產品經理,還不了解小程序如何設計?4周在線學習,搶占職場優勢。了解一下>>

本篇文章通過使用、體驗、研究等方式倒推「易捷加油APP」,借助 Axure 撰寫 PRD 文檔。與大家分享。

作為產品小白,希望通過倒推的方式,來鍛煉產品思維、提升畫原型的能力。同時分享在使用中獲得的心得體會,歡迎提出寶貴建議。

目錄:

一、文檔綜述

  1. 文檔屬性
  2. 產品綜述

二、產品說明

  1. 產品功能結構圖
  2. 產品信息結構圖
  3. 產品結構圖

三、全局說明

  1. 功能權限
  2. 鍵盤交互說明
  3. 異常情況說明
  4. 交互規則
  5. 數據說明

四、部分任務流程

  1. 購物流程
  2. 加油流程

五、部分功能詳細說明

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

六、非功能性需求

  1. 性能需求
  2. 可用性需求
  3. 運營需求

七、優化建議

優化商品詳情頁

01 文檔綜述

1. 文檔屬性

2. 產品綜述

二、產品說明

1. 產品功能結構圖

2. 產品信息結構圖

3. 產品結構圖

三、全局說明

1. 功能權限

登錄/未登錄:

  • 登錄用戶可以瀏覽所有頁面、執行所有操作。
  • 未登錄用戶可以以游客身份進行內容游覽,可以游覽商城商品。

2. 鍵盤交互說明

  • 點擊APP手機號碼輸入框,頁面底部彈出數字鍵盤。
  • 點擊其他輸入框時,頁面底部彈出字母鍵盤。

3.異常情況說明

打斷后重新打開APP:

點擊空白區域或無網絡情況:

無網絡情況:

4. 交互規則

加載狀態:

首頁:

商品列表模塊:

提示信息:

空狀態:

頁面在正常情況下,沒有數據顯示時,表現形式為插圖配提示性文案。如需要,根據特定頁面場景,增加引導用戶操作的Button或鏈接等;

操作狀態:

所有的按鈕或者可點擊的icon、文字均分為:可操作狀態,不可操作狀態兩種。

其中可操作狀態對應可操作顏色,不可操作狀態一般可見,但為灰色,易捷加油APP沒有做操作后的按鈕狀態變化。

5. 數據說明

四、部分任務流程

1. 購物流程

2. 加油流程

五、部分功能詳細說明

1. 登錄頁/注冊頁

頁面名稱:登錄

入口:初始登錄APP

基本事件流程:

  1. app顯示登錄表單頁面,表單中包含文本:①輸入手機號碼②輸入驗證碼
  2. 用戶輸入11位手機號碼,獲取驗證碼并輸入
  3. 點擊登錄按鈕,進行登錄
  4. 登錄成功進入首頁

頁面邏輯:

  1. 登錄方式:①手機號碼登錄②提供第三方登錄
  2. 點擊手機號/驗證碼登錄,輸入手機號和驗證碼進行登錄
  3. 用戶可點擊注冊,輸入手機號碼,填寫驗證碼,設置密碼進行登錄,并默認“注冊代表同意用戶使用協議”

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

異常流程:用戶輸入短信驗證碼錯誤,彈出“短信驗證碼錯誤”提示文本,2秒后消失,用戶重新操作

頁面內交互:

  1. 點擊手機號、驗證碼輸入框時,數字鍵盤從底部向上彈出
  2. 獲取驗證碼后,按鈕內容變為“120S”并開始120秒倒數,120S后按鈕內容變回“獲取驗證碼”文字。

2. 首頁

頁面名稱:首頁

前置條件:①登錄APP ②網絡良好

頁面邏輯:

  1. 點擊掃描購,定位便利店位置,掃描二維碼/條形碼商品,添加購物車,支付
  2. 點擊搜索框,關鍵詞搜索商品
  3. 點擊掃描掃描二維碼/條形碼商品,添加購物車
  4. 點擊一鍵加油切換至加油頁面
  5. 點擊Banner圖跳轉相關頁面
  6. 點擊對應標簽跳轉至相應頁面及操作
  7. 點擊易捷頭條輪播主題,跳轉相應頁面
  8. 點擊商品跳轉商品詳情
  9. 點擊推薦有獎跳轉推薦有獎方法及規則說明

刷新機制:下拉頁面刷新

異常流程:

  1. 無網絡情況下用戶當前頁面受影響
  2. 無網絡情況下無法操作功能按鈕及商品詳情

3. 商品詳情

頁面名稱:商品詳情

前置條件:①登錄APP?②網絡良好

頁面邏輯:

  1. 點擊商品圖片,可查看商品放大后的圖片
  2. 點擊分享,彈出微信,朋友圈,短信,二維碼分享方式
  3. 點擊客服跳轉在線客服頁面
  4. 點擊收藏,收藏按鈕狀態變紅
  5. 點擊購物車跳轉購物車頁面
  6. 點擊加入購物車,商品添加至購物車
  7. 點擊立即購買,彈出商品頭像,庫存情況,價格,幾件,確定

刷新機制:固定頁面布局,無刷新狀態

異常情況:

  1. 在無網絡情況下進入頁面,頁面提示“哇哦,網絡出錯了,刷新試試”
  2. 在無網絡情況前進入頁面,頁面顯示商品詳情,操作相關按鈕提示“無網絡”

4. 一鍵加油

頁面名稱:一鍵加油

前置條件:①登錄APP?②網絡良好

頁面邏輯:

  1. 點擊切換加油錢包頁面,可查看余額,充值,賬單,車牌,加油記錄,發票開具,修改支付密碼操作
  2. 點擊導航,跳轉第三方導航APP導航加油站位置
  3. 點擊相應按鈕,切換對應頁面,以及添加車牌操作
  4. 點擊充值,跳轉充值頁面,選擇第三方支付充值
  5. 點擊開關按鈕,設置開紙質發票
  6. 點擊一鍵加油,等待加油員給車加油
  7. 點擊其他油站,地圖附近油站信息,顯示距離位置多遠

刷新機制:固定頁面布局,無刷新狀態

異常情況:

  1. 在無網絡情況下,無法進入一鍵加油頁面
  2. 在無網絡情況提前進入一鍵加油頁面,當前頁面影響,無法顯示相應三級頁面信息

5. 我的

頁面名稱:進入APP-我的

前置條件:①登錄APP②網絡良好

頁面邏輯:

  1. 點擊設置,消息,標簽鍵,下一頁圖標,跳轉至相應頁面
  2. 顯示用戶信息,兌換包,積分,卡券,易捷幣,錢包
  3. 可進入App相關設置

刷新機制:固定頁面布局,無刷新狀態

異常情況:

  1. 無網絡狀態下進入頁面,彈出浮窗“請檢查網絡”1S后消失;
  2. 無網絡狀態下無法獲取相應信息“獲取數據失敗啦,點擊屏幕重新加載”

六、非功能性需求

1. 性能需求

  1. APP 啟動時間不超過 5 秒(現在啟動時間為 3 秒)。
  2. APP 內操作的響應時間不超過 3 秒,在網絡連接超時/弱網情況下,需給出相應提示并可重新加載。
  3. 程序閑時沒有異常的 CPU 占用,忙時沒有異常的峰值占用。
  4. 前端實現圖片懶加載,節約用戶流量,保障頁面加載速度。

2. 可用性需求

  • 容錯性:必要的引導和提示文字,應該突出能夠讓用戶看到;當操作結果不可逆的時候,需要有模態彈窗詢問用戶讓其知道操作的后果并做出選擇;通知用戶、不會影響用戶操作、用戶可以不予回應的通知,用非模態彈窗來實現。
  • 狀態可見:讓用戶了解自己處于何種狀態。
  • 環境貼切:使用用戶熟悉的界面范式和概念。
  • 用戶可控:頁面返回按鈕應明顯,位置應統一,防止用戶因誤觸進入頁面而無法返回。
  • 一致性:結構/色彩/文字/操作/反饋一致性。

3. 運營需求

用戶運營:

  1. 推薦好友注冊,可以獲得易捷幣,在購買商品的時候易捷幣可抵扣金額,商品可使用易捷幣使用數量為上限為本商品“易捷幣可抵扣金額”的數量。
  2. 積分可以兌換商品,利用積分體系,來培養用戶習慣,提升產品的活躍度。
  3. 優惠/卡券可以去領券中心領取或系統自動發放,優惠/卡券分為優惠券,線下券,抵用券
  4. 用戶可以在 APP 中購買商品,油卡,以及第三方服務,以滿足不同用戶需求。

內容運營:

  1. 建立便利店、線上商品、評價體系,能夠線上線下用戶需求,提高便利店營收。
  2. 在公眾號定期推送文章,尤其是油價調整情況,以及相關活動,提高用戶復購率。

活動運營:

  • 新人專享:贈送滿100元減20券,100元減40券,對于剛需用戶來說,刺激用戶消費。
  • 滿送:充值多少錢送多少元指定商品券,在滿足用戶加油的同時,也能促進用戶購買其他產品,提高便利店營收

七、優化建議

?優化商品詳情頁:

  1. 收藏位置調整至商品圖片下方,更符合用戶操作習慣;
  2. 快遞包郵調整至服務;
  3. 加入購物車,立即購買樣式更改為圓角,在導航欄中顯得更有層次感,識別度。

 

本文由 @苦行僧 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言討論~!
  1. 鼓勵一下,最后建議中是對交互或者UI設計的建議,沒有對產品使用邏輯或者業務流程上建議。這種可以多多體驗一下這個APP,設想一下如果你是該APP的產品,你會怎么樣完善它

    回復
  2. 想說用心了,但是想了想只能說用力了。最后的優化建議,建議刪除。

    回復
    1. 第一次寫有很多不完整的地方,謝謝您的指點。

      回復
  3. 算不上PRD文檔。像功能說明書但又不完整,整個文檔很散,沒有主次。文檔的目的和文檔面向對象先理清楚再寫吧

    回復
    1. 謝謝指點

      回復
    2. 以為你是個王者,結果你主頁啥都沒,大話而已

      回復
北京赛车投注