本文選取一款發(fā)展已經(jīng)相對成熟的中國詩詞APP—— 西窗燭，對它的核心功能做了拆解分析，希望分析內(nèi)容對你有所啟發(fā)與幫助。

修訂歷史

頁面結(jié)構(gòu)

一、文檔說明

本文對西窗燭v4.4.3-iOS版APP進行了拆解，由于此APP已經(jīng)是一款成熟的產(chǎn)品，功能繁雜，而由于本人時間有限，所以只對核心功能進行了拆解分析，文中涉及到的原型圖均以iPhone為基礎(chǔ)制作，完整的原型（交互+文字說明）見鏈接https://lanhuapp.com/url/LPoB9。

本文尚有很多不足之處，望各位前輩不吝指正！

二、產(chǎn)品概述

1. 產(chǎn)品信息

產(chǎn)品名稱：西窗燭

產(chǎn)品版本：v4.4.3

產(chǎn)品slogan：品味中國詩詞之美

產(chǎn)品定位：打造新的中國傳統(tǒng)文化平臺，為用戶提供豐富的詩詞、書法、繪畫等學(xué)習(xí)工具、內(nèi)容社區(qū)和文創(chuàng)電商服務(wù)。

2. 名詞解釋

3. 用戶角色

4. 產(chǎn)品架構(gòu)

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

6. 功能摘要

三、全局說明

1. 功能權(quán)限

分為登錄狀態(tài)和未登錄狀態(tài).

• 登錄狀態(tài)：擁有APP中所有操作權(quán)限
• 未登錄狀態(tài)：不可收藏；不可發(fā)帖；不可點贊、評論、贊賞；不可購買周邊商城；不可查看修改個人信息；不可查看個人主頁；不可查看私信；不可進行賬戶、隱私等相關(guān)設(shè)置。

2. 原型說明

3. 異常頁面

4. 常見操作

4.1 操作

• 下拉刷新
• 上拉加載（到達最底部）

4.2 選擇對話框

• 對話框上有相應(yīng)操作按鈕
• 點擊對話框以外的區(qū)域，對話框消失

4.3 用戶頭像

已登錄狀態(tài)下，點擊頭像進入個人主頁

4.4 軟鍵盤的彈出及退去機制

• 點擊驗證碼輸入框時頁面底部彈出數(shù)字鍵盤
• 點擊其他輸入框時頁面底部彈出拼音鍵盤
• 搜索頁面載入時，頁面底部彈出拼音鍵盤
• 點擊軟鍵盤右下方“搜索”、“完成”、“下一步”時，軟鍵盤退去
• 在軟鍵盤以外區(qū)域，點擊或滑動頁面時，軟鍵盤退去

4.5 中斷機制

• 來電、按Home鍵：系統(tǒng)默認(rèn)保存當(dāng)前頁面數(shù)據(jù)，再次打開軟件時，回到當(dāng)前頁
• 軟件異常關(guān)閉、崩潰、閃退：再次打開時，進入啟動頁

4.6 Home鍵

按Home鍵，軟件改為后臺運行，再次打開軟件時，回到按Home鍵之前的頁面。

四、頁面功能詳述

1. 注冊

功能描述：用戶注冊APP賬戶

優(yōu)先級：高

輸入/前置條件：打開西窗燭APP，點擊任意一個未登錄狀態(tài)下功能受限按鈕，或點擊未登錄狀態(tài)下“我”頁面的“登錄/注冊”選項。

基本事件流：

1. APP進入登錄表單頁面，顯示“個人信息保護政策”彈框，彈框中包含政策摘要、“僅瀏覽”按鈕、“同意”按鈕和“關(guān)閉”按鈕。
2. 用戶點擊“同意”按鈕，彈框消失，顯示登陸表單頁面內(nèi)容，表單中包含返回按鈕、注冊按鈕、手機/郵箱輸入框和密碼輸入框、登錄按鈕、其他登錄方式和忘記密碼選項。
3. 用戶點擊“注冊”按鈕，進入注冊頁面，注冊頁包含返回登錄頁按鈕、手機號/郵箱輸入框、下一步按鈕。
4. 用戶輸入手機號/郵箱，點擊“下一步”按鈕，系統(tǒng)發(fā)送手機/郵箱驗證碼，并進入“驗證”頁面。
5. 進入“驗證”頁面，此頁面包含返回注冊頁的按鈕、驗證碼輸入框和“重新發(fā)送”按鈕。用戶輸入驗證碼，進入完善信息頁面。
6. 完善信息頁面包含返回驗證頁面按鈕、用戶名輸入框、密碼輸入框和“完成”按鈕，用戶輸入用戶名和密碼，點擊“完成”按鈕完成注冊，進入已登錄狀態(tài)下的“我”頁面。

異常流程：

• 用戶點擊了“個人信息保護政策”彈框中的“僅瀏覽”或“關(guān)閉”按鈕，則退出登錄頁面，進入未登錄狀態(tài)下的“我”頁面。
• 用戶輸入的手機號/郵箱非法，系統(tǒng)彈出toast提示“手機號/郵箱非法”，2s后消失，用戶重新輸入。
• 驗證碼輸入錯誤，彈出toast提示“驗證碼錯誤”，2s后消失，用戶重新輸入。
• 用戶未收到驗證碼，進入“驗證”頁面60s后，“重新發(fā)送”按鈕變?yōu)榭牲c擊狀態(tài)，用戶點擊“重新發(fā)送”驗證碼。
• 完善信息頁面，用戶未輸入用戶名，彈出toast提示“用戶名不能為空”，2s后消失；用戶未輸入密碼，彈出toast提示“密碼不能為空”，2s后消失。

輸出/后置條件：注冊成功，進入APP已登錄狀態(tài)下的“我”頁面。

流程：

交互說明：

2. 登錄

功能描述：用戶登錄APP

優(yōu)先級：高

輸入/前置條件：打開西窗燭APP，點擊任意一個未登錄狀態(tài)下功能受限按鈕，或點擊未登錄狀態(tài)下“我”頁面的“登錄/注冊”選項。

基本事件流：

1. APP進入登錄表單頁面，顯示“個人信息保護政策”彈框，彈框中包含政策摘要、“僅瀏覽”按鈕、“同意”按鈕和“關(guān)閉”按鈕。
2. 用戶點擊“同意”按鈕，彈框消失，顯示登陸表單頁面內(nèi)容，表單中包含返回按鈕、注冊按鈕、手機/郵箱輸入框和密碼輸入框、登錄按鈕、其他登錄方式和忘記密碼選項。
3. 用戶輸入手機號/郵箱，輸入密碼，點擊登錄按鈕，進行登錄。
4. 登錄成功，進入已登錄狀態(tài)下的“我”頁面。

異常流程：

• 手機號/郵箱不合法，系統(tǒng)彈出toast提示“手機號/郵箱不合法”，2s后消失，用戶重新輸入。
• 登錄密碼錯誤，點擊登錄按鈕后，系統(tǒng)彈出toast提示“密碼錯誤”，2s后消失，用戶重新輸入。
• 點擊登錄按鈕后，系統(tǒng)后臺未檢測到用戶注冊的信息，彈出對話框“用戶未注冊，是否注冊？”。

輸出/后置條件：登陸成功，進入已登錄狀態(tài)下的“我”頁面。

流程：

交互說明：

3. 摘錄

3.1 詩詞摘錄

功能描述：系統(tǒng)自動摘錄詩句詞句，以卡片的形式顯示

優(yōu)先級：高

輸入/前置條件：用戶處于“摘錄”頁面

基本事件流：

• 用戶任一方向滑動卡片時，切換卡片
• 點擊卡片，進入詩詞詳情頁面

輸出/后置條件：進入詩詞詳情頁面

交互說明：

3.2 選擇摘錄范圍

功能描述：選擇摘錄卡片的詩詞范圍

優(yōu)先級：中

輸入/前置條件：用戶點擊“選擇摘錄范圍”按鈕icon，進入選擇摘錄范圍頁面

頁面邏輯：

• 用戶選擇摘錄的范圍
• 點擊完成按鈕

輸出/后置條件：返回“摘錄”頁面，更新摘錄卡片

其他情況：用戶點擊關(guān)閉按鈕，保留原來設(shè)置，返回“摘錄”頁面

交互說明：

3.3 分享摘錄卡片

功能描述：用戶將摘錄卡片分享到第三方應(yīng)用。

優(yōu)先級：高

輸入/前置條件：用戶處于“摘錄”頁面，并且點擊了“分享”按鈕icon，進入分享頁面。

頁面邏輯：

• 用戶選擇卡片樣式
• 修改卡片字體
• 點擊“分享”按鈕
• 選擇要分享到的應(yīng)用
• 完成分享

其他情況：用戶點擊保存到本地相冊按鈕，不分享到其他應(yīng)用；用戶點擊關(guān)閉按鈕，取消分享。

輸出/后置條件：完成分享，返回分享頁面。

交互說明：

3.4 收藏摘錄卡片

功能描述：用戶收藏喜歡的摘錄卡片

優(yōu)先級：高

輸入/前置條件：用戶已經(jīng)登錄APP，并且處于“摘錄”頁面。

頁面邏輯：用戶點擊收藏按鈕icon，按鈕變色，收藏成功。

輸出/后置條件：收藏成功

交互說明：

4. 創(chuàng)作

4.1 選擇頻道分類

功能描述：用戶選擇“創(chuàng)作”頁面要展示的分類，根據(jù)分類查看用戶創(chuàng)作的帖子。

優(yōu)先級：高

輸入/前置條件：用戶已登錄APP，處于“創(chuàng)作”頁面，并且點擊了“頻道廣場”按鈕，進入頻道廣場頁面。

頁面邏輯：

• 用戶點擊“全部”，查看所有分類，選擇要加入的分類，點擊“加入”。
• 用戶點擊“我的”，查看已加入的分類，并拖動排序。
• 用戶點擊“關(guān)閉”按鈕，完成選擇。

輸出/后置條件：完成選擇，返回“創(chuàng)作”頁面，并更新分類欄。

交互說明：

4.2 瀏覽帖子

功能描述：用戶瀏覽其他用戶發(fā)表的帖子，可按分類瀏覽，查看已關(guān)注好友的帖子。

優(yōu)先級：高

輸入/前置條件：用戶已登錄并處于創(chuàng)作頁面。

頁面邏輯：

• 用戶上下滑動頁面，瀏覽其他用戶發(fā)表的帖子。
• 用戶點擊頁面頂部“關(guān)注”按鈕，瀏覽已關(guān)注好友的帖子。

交互說明：

4.3 發(fā)帖

功能描述：用戶發(fā)表創(chuàng)作

優(yōu)先級：高

輸入/前置條件：用戶已登錄并處于創(chuàng)作頁面

基本事件流程：

1. 用戶點擊“發(fā)帖”按鈕，頁面底部顯示發(fā)帖分類頁簽
2. 用戶選擇發(fā)帖分類，點擊后進入發(fā)帖頁面
3. 輸入標(biāo)題和內(nèi)容，添加圖片和話題，點擊保存按鈕
4. 發(fā)帖成功，進入帖子詳情頁面

異常流程：

• 在發(fā)帖分類頁簽，用戶點擊取消發(fā)帖按鈕，頁簽消失
• 在發(fā)帖分類頁簽中，用戶點擊更多按鈕，進入頻道廣場頁面
• 在發(fā)帖頁面，用戶點擊關(guān)閉按鈕，返回創(chuàng)作頁面
• 在發(fā)帖頁面，用戶未輸入標(biāo)題，點擊保存時彈出toast提示“標(biāo)題不能為空”，2s后隱藏，用戶輸入標(biāo)題
• 在發(fā)帖頁面，用戶未輸入內(nèi)容，點擊保存時彈出toast提示“內(nèi)容不能為空”，2s后隱藏，用戶輸入內(nèi)容

輸出/后置條件：發(fā)帖成功，進入帖子詳情頁面

交互說明：

4.4 帖子詳情

功能描述：用戶查看某一帖子的詳細內(nèi)容，包括用戶頭像、用戶名、發(fā)表時間、帖子內(nèi)容、添加的話題、點贊信息、評論信息、贊賞信息。

優(yōu)先級：高

輸入/前置條件：用戶在創(chuàng)作頁面點擊某一帖子

頁面邏輯：

• 用戶查看帖子詳細內(nèi)容，查看評論信息
• 用戶給帖子點贊并評論
• 用戶給其他用戶的評論點贊并回復(fù)
• 用戶點擊關(guān)注帖子作者

其他情況：用戶未登錄時，不可點贊評論回復(fù)關(guān)注，只可瀏覽。

交互說明：

5. 發(fā)現(xiàn)

功能描述：用戶在發(fā)現(xiàn)頁找到感興趣的東西

優(yōu)先級：高

輸入/前置條件：用戶處于發(fā)現(xiàn)頁

頁面邏輯：

• 用戶可以在這里找到話題、市集、書店、活動入口
• 頁面按不同屬性聚合模塊，并上下排列分布

交互說明：

5.1 話題廣場

功能描述：用戶查看話題、搜索話題

優(yōu)先級：高

輸入/前置條件：用戶處于發(fā)現(xiàn)頁，并點擊“話題”按鈕

頁面邏輯：

• 用戶上下滑動頁面，查看已創(chuàng)建的話題和話題下的帖子數(shù)量
• 用戶在頂部搜索欄搜索話題
• 用戶點擊話題，進入話題詳情頁

其他情況：用戶點擊關(guān)閉按鈕，關(guān)閉話題廣場頁面，返回發(fā)現(xiàn)頁

輸出/后置條件：進入話題詳情頁

交互說明：

5.2 話題詳情

功能描述：用戶查看某一話題的詳細情況

優(yōu)先級：高

輸入/前置條件：用戶點擊某一話題

頁面邏輯：

• 頁面包含話題名稱、帖子總數(shù)、話題發(fā)起人、話題簡介、最新帖子列表、最熱帖子列表
• 用戶可以查看與此話題相關(guān)的最新和最熱帖子
• 用戶可以在此話題下發(fā)帖

交互說明：

6. 文庫

6.1 分類

功能描述：用戶查看文庫作品分類，按分類查找、瀏覽詩詞作品。

優(yōu)先級：高

輸入/前置條件：用戶處于文庫頁面

頁面邏輯：

• 按不同屬性分類，包括選集、主題、寫景、節(jié)日節(jié)氣、詞牌、時令、課本、地理、用典，每個屬性下有具體分類。
• 每個分類顯示分類名稱和簡介。
• 用戶上下滑動頁面，查看所有分類，也可點擊進入分類查看詳情。

交互說明：

6.2 分類詳情

功能描述：用戶查看某一分類的詳細信息

優(yōu)先級：高

輸入/前置條件：用戶在文庫頁面分類頁簽點擊某一分類

頁面邏輯：

• 頁面包含分類名稱、分類簡介、分類下所有作品列表、與此分類作品相關(guān)的所有摘錄、與此分類作品相關(guān)的所有創(chuàng)作
• 用戶可以上下滑動頁面查看作品、摘錄和創(chuàng)作
• 用戶點擊某一作品時，進入作品詳情頁；點擊某一摘錄時，進入摘錄來源作品的詳情頁；點擊某一創(chuàng)作時，進入帖子詳情頁
• 用戶可以查看上次閱讀的作品
• 用戶可以將此分類作品加入學(xué)習(xí)計劃

交互說明：

6.3 作品

功能描述：用戶查看文庫中所有詩詞作品

優(yōu)先級：高

輸入/前置條件：用戶處于文庫頁面，并且點擊頁面頂部“作品”按鈕

頁面邏輯：

• 用戶可上下滑動頁面查看所有作品，點擊某一作品進入作品詳情頁
• 作品按照名稱排序
• 列表顯示作品名稱、作者年代、作者姓名、詩詞摘要

交互說明：

6.4 作品詳情頁

功能描述：查看作品詳情

優(yōu)先級：高

輸入/前置條件：用戶點擊某一詩詞作品

頁面邏輯：

• 作品詳情頁包含詩詞內(nèi)容、評析內(nèi)容、市集相關(guān)、作者信息、摘錄信息、語音信息、詩單信息、分類信息，沒有相關(guān)信息則不顯示。
• 頁面包含詩詞注釋入口、譯文入口、賞析入口、輯評入口、與此作品相關(guān)的創(chuàng)作統(tǒng)計入口。
• 用戶可以查看詩詞的詳細情況，學(xué)習(xí)詩詞。
• 用戶可以收藏、分享當(dāng)前詩詞，引用當(dāng)前詩詞發(fā)表創(chuàng)作。

交互說明：

6.5 作者

功能描述：用戶查看文庫中所有作者

優(yōu)先級：高

輸入/前置條件：用戶處于文庫頁面，并且點擊頁面頂部“作者”按鈕

頁面邏輯：

• 作者頁面按作者所屬朝代排序，包含作者名稱、作者詩詞摘要
• 頁面右側(cè)包含按年代快速定位操作，用戶點擊某一年代后，頁面定位到此年代
• 用戶點擊某一作者進入作者詳情頁

輸出/后置條件：進入作者詳情頁

交互說明：

6.6 作者詳情頁

功能描述：用戶查看某一作者的詳細信息

優(yōu)先級：高

輸入/前置條件：用戶點擊某一作者名稱

頁面邏輯：

• 頁面包含作者名稱、生活年代、生卒年、作者簡介、作者所有的作品列表、與作者相關(guān)的所有帖子、與此作者相關(guān)的摘錄統(tǒng)計入口
• 用戶可以點擊作品列表中的作品，進入作品詳情頁
• 用戶可以點擊帖子列表中的帖子，進入帖子詳情頁
• 用戶可以收藏此作者

交互說明：

7. 搜索

功能描述：搜索文庫作品或用戶

優(yōu)先級：高

輸入/前置條件：用戶點擊搜索按鈕

頁面邏輯：

• 頁面包含搜索框、輸入光標(biāo)、語音輸入按鈕、相機按鈕、關(guān)閉按鈕
• 頁面載入時，輸入光標(biāo)閃爍，顯示拼音鍵盤
• 用戶輸入搜索條件，選擇搜索文庫或者用戶，點擊鍵盤右下方搜索按鈕開始搜索
• 得到搜索結(jié)果

交互說明：

8. 我

功能描述：用戶查看修改個人信息、查看社交情況、設(shè)置APP、開通會員等操作。

優(yōu)先級：高

輸入/前置條件：用戶位于“我”頁面

頁面邏輯：

• 用戶已登錄時，顯示個人簡要信息、主頁入口、卡片制作入口、關(guān)注入口、收藏入口、學(xué)習(xí)計劃入口，以及消息通知等系統(tǒng)操作選項，詳見交互說明。
• 用戶未登錄時，顯示登陸/注冊按鈕，不顯示個人相關(guān)的操作選項，只顯示系統(tǒng)相關(guān)操作選項，詳見交互說明。

交互說明：

8.1 個人信息

功能描述：用戶查看修改個人信息

優(yōu)先級：高

輸入/前置條件：用戶已登錄，并且點擊頭像欄

頁面邏輯：

• 頁面包含頭像、用戶名、簽名、性別、出生日期、地區(qū)
• 用戶可以點擊相應(yīng)信息進行修改

交互說明：

8.2 個人主頁

功能描述：用戶查看自己發(fā)表的帖子、加入的學(xué)習(xí)計劃、獲贊情況、關(guān)注、粉絲信息等內(nèi)容。

優(yōu)先級：高

輸入/前置條件：用戶已登錄，并且點擊“我”頁面的“主頁”按鈕。

頁面邏輯：

• 頁面包含個人頭像和用戶名、編輯資料入口、獲贊數(shù)、關(guān)注數(shù)、粉絲數(shù)、詩單數(shù)、發(fā)表的帖子統(tǒng)計列表、學(xué)習(xí)計劃列表。
• 用戶可以點擊相關(guān)內(nèi)容查看詳細情況。

交互說明：

8.3 設(shè)置

功能描述：用戶對賬戶、隱私以及系統(tǒng)進行設(shè)置。

優(yōu)先級：高

輸入/前置條件：用戶點擊“設(shè)置”按鈕。

頁面邏輯：

• 在用戶已登錄狀態(tài)下，頁面包含賬號設(shè)置、隱私設(shè)置，字體等系統(tǒng)設(shè)置，以及退出登錄按鈕，詳見交互說明。
• 用戶未登錄時，只顯示字體等系統(tǒng)設(shè)置，詳見交互說明。

交互說明：

8.4 退出登錄

功能描述：用戶退出登錄

優(yōu)先級：高

輸入/前置條件：用戶已登錄，并且點擊“退出登錄”按鈕

頁面邏輯：

• 用戶點擊“退出登錄”按鈕，頁面底部彈出顯示對話框
• 用戶點擊對話框中的“退出”按鈕，成功退出賬號

輸出/后置條件：成功退出，返回未登錄狀態(tài)下的“我”頁面

其他情況：用戶點擊對話框中“取消”按鈕，隱藏對話框，取消退出

交互說明：

五、其他需求

1. 安全需求

• 所有用戶信息，比如用戶名、性別、出生日期等內(nèi)容，需要在接口層加密傳輸
• 所有前端頁面，需要使用HTTPS協(xié)議
• APP安裝包混淆代碼，以防破解

2. 性能需求

• 啟動引導(dǎo)時間不超過xxx秒
• 搜索時間不超過xxx秒
• 加載帖子時間不超過xxx秒
• 對頁面元素做預(yù)加載處理

3. 可用性需求

• 操作系統(tǒng)：iOS10.0和watchOS4.0或跟高版本；Android4.1或更高版本
• 兼容設(shè)備：iPhone、iPad、iPod touch
• 提供意見反饋入口
• 定期補充文庫

4. 產(chǎn)品數(shù)據(jù)統(tǒng)計需求

數(shù)據(jù)統(tǒng)計分析有兩種方式：一種是接入第三方數(shù)據(jù)分析工具，如talkingdata，友盟等；一種是自己開發(fā)數(shù)據(jù)分析工具。

5. 埋點需求

注：文中（圖片）所涉及的用戶名、手機號信息為虛構(gòu)內(nèi)容！手機號已在某些強制要求下打了馬賽克。

作者：riiyn，轉(zhuǎn)行產(chǎn)品，有一年多開發(fā)經(jīng)驗，求職產(chǎn)品ing。微信公眾號：躬長張

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

題圖來自Pexels，基于CC0協(xié)議