PRD:倒推螞蟻森林產品需求文檔

48 評論 41663 瀏覽 271 收藏 15 分鐘

支付寶推出了一項名為“螞蟻森林”的公益活動性質的功能,用戶通過步行、在線繳納水電煤氣電話費、網絡購票等行為收集能量,實現虛擬樹木的養成,最后在公益組織、環保企業等的組織下,在某荒漠化地區栽種一棵真實的樹。本文是關于螞蟻森林產品需求文檔,enjoy~

引言

都說寫PRD是產品汪基本功之一,但是在人人上看了一些文章和評論,以及結合自己為數不多的開發經歷思考之后,感覺要寫好一篇PRD絕非易事。

按照前輩給的建議,PRD在撰寫時應該注意的問題羅列如下:

  • 由于PRD是產品與(主要是)技術溝通協調的重要橋梁,所以內容方面應最大程度考慮技術實現方式與難度,明確給出每個功能的實現邏輯、頁面跳轉路徑、交互效果、頁面信息組織方式等等,以及功能之間優先級排列、全局設計(如權限、鍵盤喚起、彈窗等),思慮周全,給出每個輸入文本框或每次點擊時的所有可能情形,并給出相應解決方案。
  • 內容側重需求和功能邏輯的梳理,通過功能結構圖、信息結構圖、頁面流程圖等呈現形式將每個功能的內部、底層邏輯闡述清楚,而非泛泛而談,將體驗環境、用戶畫像、市場分析等不必要的部分放在文檔中,這部分內容有對應的XX分析文檔闡述。盡量不要寫成交互文檔、產品體驗/分析文檔。
  • 呈現形式建議采用以圖為主、文字補充說明的形式,更直觀、不易造成項目角色理解差異;善用Axure、墨刀、Xmind等工具輔助說明,但是不要過分關注原型制作、本末倒置、忘記初心。

1. 概述

1.1 背景及產品介紹

中國是世界上土地荒漠化最為嚴重的國家之一,全國荒漠化面積曾經達到262萬平方公里,相當于國土陸地面積的27%,比中國的耕地面積總和還要大。經過30多年的治理,土地荒漠化現象和沙化土地的擴展在不斷縮減,但是目前為止全國沙化土地面積仍有約174萬平方公里,占到國土的17%,所以治沙、防沙工作仍迫在眉睫。

圖1 土地荒漠化現象

為了植樹造林、減少全國沙化土地面積、改善沙化地區人民生活狀況和當地經濟效益(用戶目標,可參考筆者另一篇文章;也為了鼓勵廣大用戶綠色出行/辦公/生活、擴大移動支付應用場景、培養用戶使用習慣和提高用戶黏性(產品目標))支付寶推出了一項名為“螞蟻森林”的公益活動性質的功能,用戶通過步行、在線繳納水電煤氣電話費、網絡購票等行為收集能量,實現虛擬樹木的養成,最后在公益組織、環保企業等的組織下,在某荒漠化地區栽種一棵真實的樹。

1.2 適配設備及統系

螞蟻森林作為支付寶的內部功能之一,可適配IOS、Android系統以及目前市場上主流的絕大部分智能機機型。

本文檔是基于Android系統撰寫的。

1.3 版本修訂記錄

表1 修訂記錄

2. 需求分析

表2 需求分析

3. 全局說明

3.1 功能權限

  • 登錄狀態下:可使用所有功能、查看所有頁面;
  • 未登錄狀態下:不能執行任何操作。

(支付寶所有功能都基于用戶個人信息和行為,因此必須登錄,將用戶消費、行為數據與賬號綁定)

3.2 鍵盤說明

在推送詳情頁下方,點擊評論輸入框——進入我的評論頁面——點擊文字輸入區域時 / 在好友螞蟻森林主頁點擊“發消息”——點擊文本輸入框時/在設置好友備注時,喚起九宮格拼音鍵盤或全字母拼音鍵盤(根據用戶設置)。

3.3 頁面異常

用戶網絡狀況不佳時:

  • 左上角頁面名稱后 顯示白色圓圈緩沖圖標;(點擊種樹,最后加載“敬請期待”圖片)
  • 頁面中上部顯示“稍等片刻……”文本、螞蟻森林圖標緩沖動畫(根據當前頁面選擇文本顏色,為藍底、綠底時文本呈白色,為白底時文本呈綠色)(點擊地圖)、隔3s左右顯示“重新加載”鏈接;(點擊好友森林)
  • 頁面中部顯示“系統正忙 稍后再試”的toast,矩形框填充黑色,文本為白色;
  • 頁面中部顯示靜態藍色螞蟻圖案、“網絡不給力 世界上最遙遠的距離莫過于此”文本、“刷新試試”鏈接;
  • 頁面彈出dialog,文本為“人氣大爆發 稍后再試試”,有“確定”選項;
  • 內容加載區域閃爍。

圖3 頁面異常反饋

3.4 頁面內交互方式

表3 頁面內交互方式

圖4 actionbar示例

通過點擊彈窗頂部tab的不同標簽和彈窗上的超鏈接,進行同一層級關聯功能的切換、跳轉。

圖5 tab切換示例

3.5?頁面間切換方式

點擊功能入口,切換到對應頁面(如:在螞蟻森林主頁右上方點擊“種樹”按鈕,跳轉至選擇樹種的“環保項目頁”)。

4. 功能/業務邏輯

4.1 功能結構及流程圖

螞蟻森林的所有功能及分別涉及的頁面見需求分析部分,下面以圖的形式展示功能的結構和功能之間的關聯關系(紅色虛線表示)。

圖6 螞蟻森林功能結構及流程圖

4.2 信息結構圖

信息主要包括:每個頁面/彈窗上的文本、靜態/動態圖片、數字,每一類又可以針對當前頁面進行細分,如:推送頁面的文本包含 文章標題、正文、評論內容、各種交互操作提示等。

此外需考慮文本的擺放位置(根據信息優先級、用戶視線轉移規律測試并確定)、顏色、字體、字號、透明度等,可在交互文檔中細化。

圖7 螞蟻森林信息結構圖

4.3 信息流分發邏輯

“通知”、“最新動態”、“排行榜”三處的信息流分發邏輯設計如下:

圖8 螞蟻森林信息流分發邏輯

5. 頁面邏輯

5.1 頁面跳轉流程圖

圖9 頁面跳轉流程圖

由于版面限制,部分頁面跳轉用水滴標記元件在圖9中進行了展示。

5.2 部分頁面交互說明

以“我的成就”頁為例。從前置條件/輸入、頁面邏輯內容和頁面交互3個方面進行說明。

表4“我的成就”頁面邏輯及交互說明

圖10 “我的成就”頁面交互流程

圖11 “我的成就”頁彈窗效果

更詳細的交互效果可在交互設計文檔中闡述。如:在“我的成就”頁。

  • 上滑時,頂部返回 + 頁面名稱 + 折疊菜單 + 回到首頁按鈕所在的通欄保持固定,顏色由綠色漸變為白色;同時文本由白色變為黑色、按鈕顏色由白色變為藍色;文本及按鈕變化的觸發時間為:滑動至用戶名所在區域時。
  • 下滑時,逆向變化,恢復至原始狀態。
  • 點擊解鎖項目時,彈出證書dialog,背景變灰、出現遮罩效果(燈箱)。
  • ……

6. 數據需求

數據需求主要包括:模塊內需要統計的數據項及其計算方法、埋點位置及說明(一般設置在關鍵路徑節點處)。

表5 數據項名目及計算方式

表6 關鍵路徑節點處 埋點說明及返回值

埋點的目的是 為了通過數據分析了解不同用戶在不同界面、不同流程中連串或單個動作行為的規律,以及背后說明的問題。例如:

  • 通知頁埋點,獲取到用戶點擊某些推送的次數,與進入通知列表頁的UV對比、計算占比,就能大致分析出用戶對哪一類的內容推送更感興趣,就可以指導運營喵們進行活動策劃、調整文案等。
  • 邀好友節點處埋點,可通過用戶點擊該入口的次數與獲得授權、成功邀請好友入駐的數量比對或者計算出用戶跳出率,分析出用戶對授權通訊錄給支付寶的態度(是否信任)、該舉措拉新的成功率,從而優化產品局部邏輯。

7. 安全需求

由于森林模塊的功能不涉及消費數據、電子現金往來、賬戶信息等強隱私性的內容,所以對安全性的要求不如“財富”、“余額寶”等模塊高。

用戶進入螞蟻森林以及使用內部所有功能時,不需要另外驗證身份,因此不提供隱私設置功能(如:手勢密碼、指紋密碼)。

8. 系統響應需求

  • 滑動操作:系統即時響應,頁面滑動流暢、不卡頓;
  • 點擊、請求某服務:7s 內響應,若請求成功,進入相應頁面或執行相應操作,若請求失敗,系統分析失敗原因并給出明確反饋,幫助/指導用戶解決問題;
  • ……

圖12 主頁簡單滑動效果

總結

筆者參考了一些人人上已有的倒推文檔,結合自己的思考,倒推了支付寶內螞蟻森林模塊的PRD。麻雀雖小,五臟俱全,雖然螞蟻森林只是支付寶眾多內部功能模塊之一、在首頁上也只占據了小小的一塊面積,但它的需求分析、邏輯闡述、信息界面等的設計都是需要精雕細琢、反復優化的。

本文內容除了老生常談的頁面交互、全局說明等之外,增加了對需求分析、頁面邏輯的闡述,旨在細化產品工作、與技術更好對接。

望前輩們不吝賜教。

 

作者:李蘭,某211高校研究生,剛入坑的產品小白。

本文由 @李蘭 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自網絡

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 讀得什么專業

    來自浙江 回復
    1. 通信狗一只

      來自湖北 回復
  2. 怎么沒有寫排序規則呢

    來自浙江 回復
    1. 漏寫了…謝謝指點~

      來自湖北 回復
  3. 技術愛看的文檔是簡單明了,這個文檔技術不愛看,這個文檔適合給領導看,不過文章層次感還有優化空間。

    回復
    1. 實戰經驗比較少,謝謝前輩指點~以后會多加注意!

      來自湖北 回復
  4. 一份非常詳細的文檔,基本囊括了一份標準PRD的所有內容,不過在主次分明,文檔結構上可以繼續提高。
    我個人對PRD的理解是對交互原型的補充,對于開發、測試首先關注的是原型,在原型中無法展現出來的邏輯再用PRD進行細節描述,這樣能夠大大提高開發跟測試的閱讀效率跟理解程度。
    1、需求與目標簡要概述,能夠量化更好,PRD不是寫論文;
    2、界面跳轉,交互在原型體現,數據交互用文檔說明;
    3、另外一定要先寫清楚業務流程,再按照業務流程的順序去寫PRD正向流程,正向流程走通之后再分別在每個正向流程后面寫異常情況及處理方式;
    實際工作中還是要結合整個項目團隊成員具體情況去寫PRD,PRD是鏈接整個項目團隊成員的溝通橋梁,是產品把自己的想法傳遞給項目組其他成員的“產品”,這是不是一款好的“產品”由開發測試說了算

    來自上海 回復
    1. 嗯嗯,明白了,感謝您的指導!

      來自湖北 回復
  5. 非常細致的文檔呀。提幾個粗淺的建議:
    1.需求背景和目標寫得簡單明確些。需要讓開發同學知道,這個需求值得做要好好做
    2.以整體功能流程圖/用戶用例圖來最快說明需求的概要。
    3.線稿圖不一定要連起所有頁面,可以用矩形替代,盡量避免線重疊。另外區分主次流程,以流程來布局串聯線稿圖

    來自上海 回復
    1. 謝謝前輩指導~

      來自湖北 回復
  6. 頁面跳轉流程,又叫頁面邏輯交互,這里少了很重要的頁面名稱!不過寫的是很完整,開發不愛看,能說清楚描述,頁面狀態,交互,輸入輸出,邊界條件等即可!

    回復
    1. 感謝前輩指導~

      來自湖北 回復
  7. 作為一個一年級的產品來看,挺好的,但是實際工作中這樣的PRD效率比較低(不知道大廠是不是這樣,反正本人公司著重描述清楚需求,交互,狀態,展示就行);
    真正的實際工作中還是需要簡化清楚,直接,便于溝通;
    加油!一起努力!

    來自廣東 回復
    1. 好的,謝謝前輩的指導,加油!

      來自湖北 回復
  8. 很細心,但是交付開發文檔的時候,開發估計會原地爆炸。個人建議:業務流程和功能結構放在最前面,交互文檔單獨做一份PRD文檔;字段名/屬性/是否必填/示例/以及交互方式做成excel表格形式,每個頁面寫清楚功能需求就好了。

    來自廣東 回復
    1. 說的沒錯 同時也覺得他一個產品小白能做到這個份上已經很棒了

      來自北京 回復
    2. 謝謝肯定與鼓勵~

      來自湖北 回復
    3. 嗯嗯,以前做過數據庫設計,有點類似

      來自湖北 回復
  9. 請教一下,你的文章是如何添加Axure動圖?

    回復
    1. 用LICEcap錄屏軟件錄的GIF,直接插入就行

      來自湖北 回復
    2. 謝謝分享

      回復
  10. 頁面內交互方式,,這部分請問在哪可以學習,IOS的,我也是在讀生 想做產品的小白,可以加個qq什么的一起學習嗎 ??

    來自湖南 回復
    1. 我主要是自己看設計類的書、相關博客、文章…

      來自湖北 回復
  11. 文檔格式也有問題

    來自北京 回復
  12. 這個能是1線大廠產品寫的需求嗎? 還不如四線人會寫

    來自北京 回復
    1. ? 你是四線的?你寫份出來看看?

      來自廣東 回復
  13. 很業余,開發基本懵B,

    來自北京 回復
    1. 感謝指正,會繼續努力的

      來自湖北 回復
  14. 頁面跳轉你給我們開發視覺設計,他們會掐死你

    來自上海 回復
    1. 涉及的頁面太多了,放在一個圖里就很擠,拆分一下或者做成axure動態原型圖 您覺得怎么樣?

      來自湖北 回復
  15. 優點:
    1、敢于實踐,敢于分析
    缺點
    1、頁面跳轉邏輯圖變成了蛛網圖,要在非常費力的情況下才能識別出要傳達的跳轉信息
    2、表單沒有主次的標注,閱讀起來也比較費力
    3、原型制作較不規范

    總結:作為Prd是不合格且有很大改進空間的。但是,是可以鼓勵的產品分析文檔,加油!

    來自湖北 回復
    1. ? 感謝指正,可以詳細說明一下原型不規范之處嗎?

      來自湖北 回復
  16. 寫的不錯,贊一個

    來自河南 回復
    1. ? 感謝鼓勵,感覺還有好多問題呀

      來自湖北 回復
  17. 看著像是剛畢業的伙伴寫的,都不知道小編寫這篇文章的目的是什么?

    來自北京 回復
    1. 還沒畢業… ?? 倒推別人的產品幫助自己理解需求分析、頁面邏輯交互設計呀

      來自湖北 回復
  18. 終于看到螞蟻森林的分析文檔了,超贊的~?。?!
    想要加入起點學院官方微信群,更互聯網更多產品運營人一起討論學習,可以加下我微信:qdxyCoco 備注:【微信群】 我會拉你加入群聊哦

    來自廣東 回復
    1. 謝謝~

      來自湖北 回復
  19. 第五部分開始,一個字都不想看了

    來自廣東 回復
    1. 愿聞其詳

      來自湖北 回復
    2. 樓上在說你的蜘蛛網看著太累

      來自上海 回復
    3. 明白了!

      來自湖北 回復
  20. 不知道是培訓機構還是自己寫文檔的習慣,作為開發的角度來說 如果把單個頁面與數據需求和功能需求為一單元講解 更方便解讀 有時間可以嘗試下 給到開發看看他們的反饋 寫的挺好的

    來自上海 回復
    1. 嗯嗯,每個頁面及其涵蓋的功能、前后臺數據需求應該是綁定在一起的,以后會注意噠。

      來自湖北 回復
  21. 怎么用戶場景那里都是用戶想干啥啥

    來自廣東 回復
    1. 您覺得應該是什么呢~

      來自湖北 回復
    2. 場景里描述解決了用戶什么需求,這個需求可以是本身訴求,更多的是產品引導用戶發現“哦,我還有我應該有的需求”

      來自廣東 回復
    3. 挖掘和引導需求屬于比較高的層次了,我還要多多學習

      來自湖北 回復