Axure實例:即刻 app 產品需求文檔

147 評論 133563 瀏覽 1125 收藏 11 分鐘

第一次用Axure RP8寫產品需求文檔,筆者為產品小白,希望通過這篇文章和大家分享以及學習交流。

以下我的Axure原型截圖:

目錄:

1.概述

1.1產品介紹

1.2需求整理

2.版本信息

2.1修訂歷史

2.2版本規劃

3.產品邏輯

3.1產品信息圖

3.2產品結構圖

3.3部分業務流程圖

4.產品設計

4.1全局說明

4.2部分功能需求說明

4.3部分交互設計

1. 概述

1.1 產品介紹

1.1.1 文檔屬性

1.1.2 產品綜述

1.2 需求整理

1.2.1用戶畫像

1.2.2 需求匯總

2. 版本信息

2.1 修訂歷史

數據來自:ASO100

2.2 版本規劃

在現階段將需求轉化功能和對產品的完善后,我們還需對下一階段的產品進行規劃。

3. 產品邏輯

3.1 產品信息圖

即刻這個產品的信息很復雜,我就以四個主要頁面進行羅列,下面的結構圖也是如此。

相信很多小白和我一樣,會分不清產品信息結構圖和產品功能圖的區別,以下有段話供大家理解:

產品結構圖:通常是指產品功能結構圖,就是說這個產品的所有功能模塊結構圖。比如微信分四個大模塊:消息、通訊錄、發現、我的,依次每個模塊里面還有對應的功能。

信息結構圖:指脫離實際頁面,將產品所有的數據抽象出來,組合分類的圖表。比如:微信的用戶資料包括:昵稱、頭像、微信號、二維碼、地址、性別等。再比如:微信在朋友圈中,發布信息包括:文字、圖片或小視頻、時間等。

對這段話我的理解就是:產品結構圖就是把產品的功能模塊羅列出來,這個頁面有什么功能?這個功能的跳轉是什么?都要盡可能列出來。而產品信息結構圖就是你這個頁面給用戶所呈現的是什么。

舉個例子:

微信朋友圈的信息包括:朋友圈這個標題,好友的頭像,昵稱,發布的內容列表,評論內容等。

微信朋友圈的功能包括:發布朋友圈的方式(圖文還是純文本),點贊,評論等。

3.2 產品結構圖

3.3 部分業務流程圖

3.3.1 注冊與登錄流程圖

4. 產品設計

4.1 全局說明

4.1.1 角色說明

4.1.2 常用部分交互說明

(1)打斷后重新打開app

(2)點擊空白區域或無網絡情況

(3)頁面內交互

(4)頁面間交互

Android

切換方式:進入頁面,向左平推

觸發方式:點擊切換頁面,左滑切換下一頁,右滑上一頁

4.2 部分功能需求說明

4.2.1 注冊界面

用戶場景:用戶第一次使用即刻app

功能描述:輸入手機號、獲取驗證碼、第三方登錄入口、切換到登錄界面

優先級:高

輸入/前置條件:打開App選擇【我的】——選擇【點擊登陸賬號】

頁面邏輯

  1. 選擇【+86】可切換其他國家地區的手機號碼
  2. 輸入合法的手機號碼后才能點擊【獲取驗證碼】
  3. 點擊【登錄】可切換登錄界面
  4. 可選擇第三方平臺進行注冊登錄

4.2.2 登錄界面

用戶場景:用戶打開App進行用戶登錄

功能描述:輸入手機號、獲取驗證碼、使用密碼登錄、第三方登錄入口、切換到注冊界面

優先級:高

輸入/前置條件:打開App選擇【我的】——選擇【點擊登錄賬號】

頁面邏輯

  1. 選擇【+86】可切換其他國家地區的手機號碼
  2. 輸入合法的手機號碼后才能點擊【獲取驗證碼】
  3. 點擊【使用密碼登錄】可切換到手機號密碼登錄界面
  4. 可選擇第三方平臺進行注冊登錄
  5. 若曾經以用戶名的方式注冊過即刻賬號,可選擇【即刻賬號】登錄,切換到用戶名登錄界面

4.2.3 關注界面

用戶場景:用戶打開App想看ta關注的主題的發布的內容

功能描述:消息、動態、搜索、最近熱門、最近熱門推薦內容、關注的主題內容列表、推薦、關注、發現、我的

優先級:高

輸入/前置條件:打開App在底部選擇【關注】

頁面邏輯

  1. 下拉刷新,上拉內容加載
  2. 在WiFi下,自動播放gif動畫和視頻
  3. 點擊頁面上的功能,跳轉到相應的功能界面

4.2.4 搜索界面

用戶場景:用戶想在即刻中搜索ta喜歡的主題或內容

能描述:搜索輸入、綜合、主題、消息、用戶、推薦詞、輸入鍵盤、搜索歷史、清除

優先級:高

輸入/前置條件:用戶在關注頁面點擊搜索圖標或者在發現頁面點擊頂部

頁面邏輯

  1. 底部自動彈出鍵盤
  2. 在搜索輸入框輸入內容后自動搜索
  3. 為用戶在綜合界面推薦熱搜詞
  4. 用戶在輸入關鍵字和點擊熱搜詞后,會相應變為搜索歷史,點擊清除鍵可以清除搜索歷史

4.3 部分交互設計

4.3.1 注冊登錄界面交互演示

交互說明:

  • 點擊【登錄】,黑線右移,顯示使用密碼登錄,微信微博QQ左移,顯示即刻賬號
  • 點擊【注冊】,黑線左移,隱藏使用密碼登錄,微信微博QQ右移,隱藏即刻賬號

4.3.2 關注進入搜索界面演示

交互說明:

  • 點擊【搜索圖標】,右劃進入搜索界面
  • 點擊【清除圖標】,隱藏清除圖標,清除歷史,旅游,絕地求生
  • 點擊【空白區】,下拉隱藏鍵盤
  • 點擊【搜索】,上拉顯示鍵盤
  • 點擊【返回按鈕】,左劃返回關注界面

文檔還有很多不足的地方,歡迎大神提出指導,謝謝!

供大家參考學習:

(1)來自本文作者的分享:

鏈接:http://pan.baidu.com/s/1i4PYs2h

密碼:j2kr

(打開得需要瀏覽器下載好Axure拓展插件)

(2)來自人人都是產品經理的官方分享:

鏈接:https://pan.baidu.com/s/1mh7Bv7a

密碼: hvki

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 親,鏈接失效了 方便分享下么?

    來自上海 回復
  2. 鏈接失效了,重新發一下吧

    來自四川 回復
  3. 鏈接失效了,重新發一下吧

    來自上海 回復
  4. ?? 是不是應該換成交互設計文檔啊,學習了 ??

    來自上海 回復
  5. 需求文檔百度云鏈接失效了 煩請分享一下 謝謝

    來自浙江 回復
  6. 大兄弟 打開為啥是只有導航沒有內容

    來自廣東 回復
    1. 你的瀏覽器得安裝axure插件

      來自廣東 回復
  7. 怎么看著產品信息圖和結構圖是一樣的呢

    來自江西 回復
    1. 文中有說明哦

      來自廣東 回復
  8. 文章和評論都看完了,發現樓主是個虛心好學且努力向上的好孩紙!這些文章和各位謙虛好學的態度都非常值得我學習!

    然后從我的角度提點小建議哈,感覺整篇看下來上面的流程圖和下面的交互說明像是分開的兩塊東西,我是說排版方面整體看著不是很清爽哈,也許是都放到網頁上閱讀體驗較差吧~

    還有登錄和注冊那一塊,頁面上好像只有輸入手機號和獲取驗證碼,沒有輸入驗證碼及確認的操作呢,可能你是獲取完再填寫驗證碼,但我感覺一起放上去更好~ ?

    總之文章很棒,學習了,繼續加油哦! :mrgreen:

    來自湖北 回復
    1. 謝謝你的建議,最近在產品實習,沒怎么看信息,下次我會注意的 ??

      來自廣東 回復
  9. 建議流程圖只有一個結束形狀,也就是橢圓藍色登錄成功。

    來自河北 回復
    1. 好的,謝謝,下次再改進改進

      來自廣東 回復
    2. 不客氣,我也是新人,互相學習交流~

      來自河北 回復
  10. 請問,最后你呈現的需求文檔,是導出的html格式,還是類似于pdf或者word格式的 ??

    來自上海 回復
    1. html

      來自廣東 回復
    2. 好的,謝謝

      來自上海 回復
  11. 我實際操作了一下,發現有以下幾個難點:

    1.不完全知道最終的產品功能
    2.不會有產品修訂的信息,這個是以后才填
    3.一旦最初的基準被推翻后,所有原型圖都作廢。

    這個產品文檔像是APP出來了,再去做。如果先做產品文檔的話,沒有那么詳細,很多東西都不知道。

    來自廣東 回復
    1. 不是APP出來了去做的,是結合原型圖一起做的。

      來自北京 回復
  12. 不是原型文件

    回復
  13. 全局說明包括那些?

    來自廣東 回復
  14. 2個時間段看了2遍,剛巧我最近也在研究拆解、分析產品,這篇文章說是需求文檔但是更像是產品體驗和分析,但是并沒有寫即刻核心的功能和解決的問題??

    來自北京 回復
    1. 確實沒有太大突出重點,我也是第一次寫,來向各位請教的,對于需求文檔,您覺得需要寫哪些內容呢,能否分享下目錄,謝謝

      來自廣東 回復
    2. 我也是個新人,之前有整理過,感覺需求文檔要分為兩類,一是從0到1的文檔,還有一份是逐漸優化迭代的文檔,我寫第二類比較多,我列出來可以一起討論討論
      1.概述
      包括需求整體,階段實現的需求,清單,涉及的功能和頁面
      2.項目背景和分析
      這塊主要記錄的是為什么會提出這個需求以及當時的問題是什么,后來是如何解決的,有沒有什么風險
      3.功能詳細描述
      包括業務邏輯圖、功能結構圖(大功能)、功能流程圖、頁面流程圖、詳細的規則說明
      4.頁面描述
      原型+交互說明+簡單的用例描述
      5.之后是數據需求
      需要統計哪些、如何計算的、怎么埋點
      因為一直在小公司,所以別人文檔里有的其他需求,比如安全需求、系統響應需求我們這邊開發自己調整的,不需要產品去寫所以這塊就沒有列出,如果是大公司的話,這些要求應該也會有的

      來自北京 回復
    3. 謝謝您的分享! ??

      來自廣東 回復
    4. 是通過你的分享我們一起交流的~

      來自北京 回復
    5. 厲害

      來自湖北 回復
  15. 你好,請問你原型和需求說明書是分開寫的嗎?

    來自福建 回復
    1. 一起寫,用Axure

      來自廣東 回復
  16. :mrgreen:

    來自福建 回復
  17. 你好,冒昧的問一下,您之前是做UI或者設計的嗎?
    還是一直做產品崗位的啊

    來自廣東 回復
    1. 還沒有產品崗位的經驗,在自學中

      來自廣東 回復
  18. 自從去年學習某大神的案例后,從此告別word

    回復
    1. 用axure寫既能鍛煉對軟件的熟悉程度,也可以完成任務。一舉兩得 ??

      來自廣東 回復
  19. 我覺得到真正給開發看不需要那么多,例如分析,分析可以整理做一份分析報告給老板有空的時候看看或者自己做數據分析日后跟老板撕逼可能用得上。還有某位同學說用泳道會更好也很贊同。寫得比我好,鼓勵下次出更好的

    來自廣東 回復
    1. 好的,我會加油的 ??

      來自廣東 回復
  20. 對于小白的我,收獲頗多,向你學習

    來自上海 回復
    1. 一起加油 ??

      來自廣東 回復
  21. 擦汗,具體交互動作我都直接用文字描述,真是慚愧
    (產品實習狗假扮教練)功能粒度再細分的話,舉個栗子手機號注冊
    1.不合法手機號(少于11位,有其他字符,空號),點擊注冊,如何應對
    2.是否限制輸入長度,是否給提示
    3.重復手機號,點擊注冊,如何應對
    4.驗證碼有效時長為多少
    5.注冊成功后的跳轉頁面&提示

    來自廣東 回復
    1. 感謝你的指導,學到了 ??

      來自廣東 回復
  22. 干貨!思路也很棒,用axure寫prd可以掛到服務器上,隨時隨地瀏覽,而不用拘泥于本地文檔,果段粉

    回復
    1. 謝謝 ??

      來自廣東 回復
  23. 贊一個?。?!

    回復
    1. 謝謝 ??

      來自廣東 回復
    2. 謝謝!

      回復
  24. 功能模塊的粒度需要再拆分 不然技術沒辦法排期 鼓勵一下

    來自浙江 回復
    1. 您好,功能模塊的粒度可以拆分到什么程度,可以指導下嗎,求解惑!謝謝 ??

      來自廣東 回復
    2. 謝謝您的意見,請問下粒度再細分的話??梢栽趺醇毞?,能以這篇文章舉個例子嗎?求解惑???,謝謝!

      回復
  25. 1、prd不用寫用戶分析、歷史版本這些的,直接講需求和功能就可以;2、流程用泳道圖更好點;3、功能說明這部分顆粒度可以再細一點,這個版本沒法直接拿給開發看的。不過新人寫的還是很不錯的,大大的贊

    來自廣東 回復
    1. 謝謝 ??

      來自廣東 回復
  26. 4.1.2.(3),黃金比例是0.618,那個明顯不是黃金比例啊

    來自四川 回復
    1. 用詞有錯,下次注意 ??

      來自廣東 回復
  27. 非常厲害,樂于分享的產品要珍惜!太棒了

    來自上海 回復
    1. ?

      來自廣東 回復
  28. 你好,請問如何實現點擊概述矩陣跳轉下一頁面的時候,概述這個矩陣依然處于高亮的狀態。求解惑- -!

    來自內蒙古 回復
    1. 你可以準備兩個概述矩形,A負責相應的功能跳轉,B先隱藏,通過A來讓它顯示

      來自廣東 回復
    2. 太感謝了。

      來自內蒙古 回復
  29. RP原型怎么獲得啊 謝謝

    來自江蘇 回復
    1. 原文結尾有下載鏈接

      來自廣東 回復
  30. 學習了,請問制作gif用的什么

    來自上海 回復
    1. screen to gif

      來自廣東 回復
    2. 謝謝啦???

      回復
    3. ??

      來自廣東 回復