作者：T.zh 來源：簡書

以下我的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 關注進入搜尋介面演示

互動說明：

• 點選【搜尋圖示】，右划進入搜尋介面

• 點選【清除圖示】，隱藏清除圖示，清除歷史，旅遊，絕地求生

• 點選【空白區】，下拉隱藏鍵盤

• 點選【搜尋】，上拉顯示鍵盤

• 點選【返回按鈕】，左劃返回關注介面

此外把此篇文章轉發到朋友圈或者產品/運營微信群的小夥伴可憑截圖找微信：chanpin628領取《電商產品經理》電子書一份。

此外我們的官方網站也上線了，每日分享高質量的文章、原型素材和行業報告，小夥伴可自行前往索取，支援搜尋，需要的小夥伴可點選底部的閱讀原文直接檢視，或者複製網址：www.dadaghp.com開啟。

更多幹貨可關注微信公眾號：產品劉

想學習更多關於產品、職場、心理、認知等乾貨，可長按右邊二維碼，關注我們。

··················END··················

RECOMMEND

推薦閱讀

B端產品經理需要著重鍛鍊自己這些能力

懂技術對產品有哪些幫助？

線下實戰2.0

淘汰率最高的騰訊產品面試題

產品經理如何做好資訊架構

點選“閱讀原文”

檢視更多幹貨