本文作者對抖音短視頻APP產品進行產品需求分析輸出此份文檔，該文檔由幾個板塊構成：產品結構、全局說明、產品流程圖、產品頁面邏輯圖和頁面詳細說明。

一、文檔綜述

1.1 文檔屬性

1.2 產品簡介

• 產品背景：字節(jié)跳動旗下產品
• 產品類型：UGC短視頻平臺
• 產品slogan：記錄美好生活（原先為“讓崇拜從這里開始”）
• 產品介紹：一款以年輕人為目標群體的音樂短視頻社區(qū)，用戶通過拍攝15s/60s的短視頻，或者通過直播，與其他用戶分享生活認識朋友，了解新鮮事。
• 產品定位：專注于年輕人的短視頻創(chuàng)作分享app，以音樂+視頻的模式展現(xiàn)內容，構建年輕人的社交社區(qū)。

1.3 產品用戶

據(jù)數(shù)據(jù)統(tǒng)計，在2018年，抖音的月活躍用戶量已經達到2.3億，其中，將近82%的用戶處在35歲以下，52%的用戶的年齡段都集中在25歲以下，其中21-25歲以及26-30歲這兩個年齡段的用戶數(shù)最多。并且接近六成用戶均為女性。抖音的用戶雖然覆蓋各年齡段，但30歲以下的年輕群體占大多數(shù)。

1.4 需求總結

二、產品結構

2.1?產品功能結構圖

2.2?產品信息架構圖

三、全局說明

3.1 登錄頁面

權限說明：

• 登錄狀態(tài)下可以進行所有操作
• 未登錄狀態(tài)下進入APP，不可關注好友，不可點贊，不可評論以及聊天，不可制作視頻，不可查看消息欄，不可查看個人主頁。要進行上述操作需要跳轉到登錄頁面。

（1）頁面名稱：登錄頁面

（2）頁面入口：未登錄狀態(tài)下，用戶點擊關注、消息、個人中心、拍攝等界面入口，或者點擊使用點贊、點評、分享等任何互動功能時，自動跳轉入登錄界面

（3）頁面功能：實現(xiàn)三種方式的登錄——手機驗證碼模式、第三方授權登錄、手機密碼登錄

（4）頁面邏輯輯內容及其交互詳細說明：

a. 手機驗證碼登錄方式：

• 初始界面下，呈現(xiàn)手機號碼輸入欄、驗證碼輸入欄、獲取驗證碼按鈕
• 手機號碼默認+86，輸入限制11位數(shù)字。當輸入非數(shù)字內容時，輸入界面不顯示任何內容；輸入數(shù)字小于11位時，點擊登錄提示“請輸入11位數(shù)字手機號”當輸入大于11位數(shù)字時，超過部分不顯示。
• 點擊獲取驗證碼后，系統(tǒng)自動發(fā)驗證碼短信給輸入手機號，驗證碼按鈕變?yōu)?0s倒計時，倒計時結束前不可再獲取驗證碼。
• 驗證碼正確，完成登錄，轉入首頁—推薦頁面

b. 第三方授權登錄

• 初始界面下，手機驗證碼輸入欄下方，呈現(xiàn)其他方式登錄提示詞
• 提供各社交平臺按鈕，點擊進入此社交平臺授權登錄界面
• 授權完成后，完成登錄，轉入首頁—推薦頁面

c. 手機密碼登錄

• 初始界面下，右上方有密碼登錄按鈕，點擊進入密碼登錄界面
• 密碼登錄界面呈現(xiàn)手機號碼輸入欄與密碼輸入欄。手機號碼輸入欄限制與上一頁相同。密碼輸入欄可輸入數(shù)字、大小寫英文字母、各類符號。
• 忘記密碼時，可點擊“找回密碼”跳轉到找回密碼頁面，輸入登錄名后滑動滑塊驗證獲取驗證碼，輸入驗證碼后點擊下一步進行密碼重置。
• 賬號密碼驗證正確，完成登錄，轉入首頁—推薦頁面

3.2 網(wǎng)絡環(huán)境

3.3 鍵盤輸入

• 點擊手機號碼輸入框，由頁面底部彈出數(shù)字鍵盤；
• 點擊其他輸入框時，由頁面底部彈出字母鍵盤。‘

’

3.4 評論框

3.5 分享框

四、產品流程圖

4.1 前端流程

4.1.1 登錄注冊流程

4.1.2 觀看視頻流程

4.1.3?拍攝/上傳視頻流程

4.2 后臺流程

4.2.1 視頻推薦機制

五、 產品頁面邏輯圖

六、?頁面詳細說明

6.1 首頁頁面

6.1.1 首頁——推薦頁面

（1）頁面名稱：首頁——推薦頁面

（2）頁面入口：啟動抖音app直接進入“首頁”—推薦頁面或點擊主菜單“首頁”按鈕進入

（3）頁面分布：

1. 頁面切換區(qū)
2. 視頻播放區(qū)
3. 視頻分類切換區(qū)
4. 互動功能區(qū)
5. 視頻文字描述

（4）頁面邏輯內容及其交互詳細說明

1）頁面切換區(qū)

• 為app主菜單，除拍攝視頻界面外均存在于屏幕最底部，為五個頁面的入口。
• 點擊標題按鈕可以進入對應頁面，點擊中央十字按鈕，可以進入視頻拍攝頁面。
• 啟動抖音短視頻app，直接進入“首頁”推薦頁，首頁為按鈕為加粗加亮，其他按鈕灰暗。若轉入其他頁面，則轉入頁面按鈕變高亮，其他頁面為灰暗。
• 當有系統(tǒng)功能更新時，“我”頁面按鈕出現(xiàn)黃色小圓點提示。當有互動消息時，“消息”頁面按鈕出現(xiàn)黃色小圓點提示。點擊后小圓點消失。

2）視頻播放區(qū)

• 全屏播放視頻，視頻由后臺推薦機制分發(fā)。
• 點擊視頻，可以控制暫停/播放視頻
• 向右滑動，可以切換到“首頁”界面的“附近”界面
• 向左滑動，進入播放視頻的拍攝者的個人中心，觀看詳情。
• 上下滑動，切換播放視頻，切換視頻由后臺分發(fā)機制設定。
• 視頻在播放中，可預緩存推薦列表的下幾個視頻，保證切換的流暢。

3）視頻分類切換區(qū)

• 可以在推薦/附近兩個界面切換，所在界面的標識高亮，另一個灰暗。
• “推薦”界面，由后臺推薦機制分發(fā)?！案浇苯缑妫淳嚯x遠近排序。

4）互動功能區(qū)

從上到下描述：

• 點擊頭像可查看對方個人中心。
• 點贊按鈕，點擊后icon變?yōu)榧t色，表示已點贊，再次點擊可取消。
• 評論按鈕，點擊后，底部上彈評論框，詳情可看評論頁描述。
• 分享頁面，點擊后，底部上彈分享框，詳情可看分享頁描述。
• 未登錄不能參與互動，點擊跳轉至登錄界面

5）視頻文字描述

從上到下描述：

• 所有發(fā)布視頻的用戶，均以 @名稱 的形式，為了區(qū)分下一行的標題，點擊后進入該用戶的個人主頁
• 此行為標題行，最多不超過50字，可分三行，不可點擊
• 此行為該視頻使用的音樂名稱，包括歌曲名稱+歌手，以滾動形式展現(xiàn)，不可點擊

6.1.2 首頁——附近頁面

（1）頁面名稱：首頁——附近頁面
（2）頁面入口：通過下方主菜單進入首頁頁面后，向右滑動或者點擊上方附近按鈕進入

（3）頁面結構：

1. 定位欄
2. 切換城市界面
3. 各視頻封面

（4）頁面邏輯內容及其交互詳細說明

1）定位欄

• 初始通過GPS定位，自動定位所在城市
• 定位欄有段為切換按鈕，點擊進入切換城市界面，自行切換城市分區(qū)

2）切換城市界面

由上而下描述

• 第一部分顯示自動定位城市
• 第二部分為熱門城市選項。將用戶較多的九個城市按次序排開。點擊則定位于該城市。
• 第三部分為各城市按首字母排序。根據(jù)音序順次排列各個城市名稱。點擊則定位于該城市。

3）各視頻封面

• 首頁——附近頁面，按距離遠近推薦視頻。視頻截取一幀為封面，由近及遠排序展現(xiàn)。
• 封面下方，存在文字說明。文字說明由上而下分別為距離（km，一位小數(shù)），視頻說明（兩行），作者昵稱及點贊數(shù)。
• 點擊視頻封面，進入該視頻詳情頁。詳情頁全屏播放該視頻，頁面結構與首頁——推薦頁面相同。

6.2 關注頁面

（1）頁面名稱：關注頁面

（2）頁面入口：通過下方主菜單點擊“關注”按鈕進入

（3）頁面結構：

1. 視頻信息區(qū)
2. 視頻播放區(qū)
3. 視頻互動區(qū)

（4）頁面邏輯內容及其交互詳細說明

關注頁面內，為用戶所有關注對象所發(fā)布的視頻，按時間從倒敘排布。每一個視頻所占區(qū)域均由? 三部分組成。由上至下描述分別為

1）視頻信息區(qū)

由上至下描述：

• 第一欄左側為本視頻發(fā)布用戶頭像及昵稱，點擊可進入對方個人界面。
• 第一欄右側為取消關注按鈕，點擊之后出現(xiàn)詢問是否取消關注的窗口。
• 第二欄為視頻簡介，兩行，由發(fā)布者自行提供。

2）視頻播放區(qū)

• 視頻界面自動播放，點擊進入詳情頁。詳情頁全屏播放該視頻，頁面結構與首頁—推薦頁面相同。
• 視頻界面底端左側為音樂名稱，右側為暫停鍵，可控制播放/暫停。

3）視頻互動區(qū)

視頻互動區(qū)包括用戶與本視頻的互動功能（點贊，分享，評論）以及對本視頻其他觀看者、評論者的互動功能。由上往下描述

• 第一欄左側為視頻總時長，第一欄右側分別為評論、分享、點贊按鈕。點擊評論/分享按鈕，從下方彈出評論欄與分享欄。點擊點贊按鈕，對作品點贊，點贊數(shù)加一，再按取消。
• 第二欄，顯示點贊數(shù)，字體灰暗，較小。
• 第三欄開始，顯示1至3條高贊評論，視評論數(shù)量決定。點擊從底部彈出評論欄，并定位于所點擊的評論位置。可在評論欄內對相關評論進行點贊、評論。
• 倒數(shù)第二欄，顯示評論總數(shù)，點擊從底部彈出評論欄。
• 最后一欄為輸入評論欄，點擊從底部彈出鍵盤，可發(fā)布用戶自己對該視頻的評論。

6.3 拍攝頁面

6.3.1 拍攝——拍攝頁面

（1）頁面名稱：視頻拍攝頁面

（2）頁面入口：通過下方主菜單“＋”按鈕進入

（3）頁面結構：

1. 拍攝視頻顯示區(qū)
2. 拍攝輔助操作區(qū)
3. 拍攝主操作區(qū)

（4）頁面邏輯內容及交互詳細說明

1)?拍攝視頻顯示區(qū)

• 全屏顯示攝像頭畫面
• 界面頂部有錄制進度條，若處于拍攝錄制中，出現(xiàn)黃色進度條

2)?拍攝輔助操作區(qū)

• 選擇音樂按鈕，點擊彈出音樂選擇窗口，可用來選擇視頻搭配背景音樂。音樂選擇窗口對音樂分類，按音樂熱度、音樂類別顯示不同的音樂推薦列表，供用戶選擇。
• 右側按鈕從上往下第一個，翻轉攝像頭按鈕，用于拍攝過程中前置攝像頭與后置攝像頭的切換使用。
• 右側按鈕從上往下第二個，拍攝速度按鈕，點擊出現(xiàn)速度選擇框，視頻速度分為五檔。用于控制視頻的播放速度?！皹藴省睓n，播放速度與拍攝速度相同，“快”與“極快”檔將視頻二倍速、三倍速播放，“慢”與“極慢”檔將視頻1/2、1/3速度播放。
• 右側按鈕從上往下第三個，為“濾鏡”按鈕，用于對拍攝視頻加相應濾鏡。點擊底部彈出濾鏡選擇框。

濾鏡選擇框分為上下兩部分，它將不同濾鏡按風格分類，上部分可挑選不同的濾鏡風格按鈕，可左右滑動。點擊某一按鈕，此按鈕圖形高亮，下部分會出現(xiàn)相應風格分類下的各種濾鏡，可左右滑動選擇。點擊為視頻添加此濾鏡。

濾鏡選擇框右上角為管理按鈕，點擊后彈出濾鏡管理框，可在不同風格下選擇常用濾鏡，常用濾鏡將在濾鏡選擇框中優(yōu)先排列。

• 右側按鈕從上往下第四個，為“美化”按鈕，點擊后底部彈出修圖框，修圖框中存在各類修圖功能選項，如“磨皮”、“瘦臉”、“大眼”等，可左右滑動選擇。選擇后對視頻中人物進行相應的修圖。

3) 拍攝主操作區(qū)

• 底部為拍攝類型欄，分為照片拍攝、60s視頻拍攝、15s視頻拍攝，點擊可選擇三種拍攝類型。
• 中心紅色圓形按鈕，為拍攝按鈕，點擊開始視頻拍攝，再次點擊結束視頻拍攝。結束后自動會看視頻，并在視屏拍攝按鈕右側出現(xiàn)√與×按鈕。用戶滿意視頻，點擊√進入視頻編輯界面，否則點擊×刪除視頻，并跳轉回視頻拍攝界面。拍攝過程中，視頻界面頂部黃色進度條隨拍攝時間增加，到拍攝限定時間自動結束拍攝。
• 拍攝按鈕右側，為上傳視頻按鈕。點擊打開手機相冊界面，選擇已有視頻，直接進入視頻編輯界面。
• 拍攝按鈕左側，為道具按鈕，點擊彈出道具框使用道具。

6.3.2 拍攝——編輯頁面

（1）頁面名稱：視頻編輯頁面

（2）頁面入口：完成視頻拍攝后，跳轉至此頁面

（3）頁面結構：

1. 視頻顯示區(qū)
2. 編輯輔助操作區(qū)
3. 編輯主操作區(qū)

（4）頁面邏輯內容及交互詳細說明

1）視頻顯示區(qū)

• 全屏播放已經完成拍攝的視頻，循環(huán)播放。

2）編輯輔助操作區(qū)

位于界面右側，從上而下描述

• 第一個為“自動美顏”按鈕，點擊后對視頻自動增強畫質，無需設置。再點擊關閉效果。
• 第二個為“變聲”按鈕，可以變換原視頻聲音風格。點擊后從底部彈出變聲選擇框，選擇變聲效果。
• 第三個為“濾鏡”按鈕，可以為視頻增加濾鏡效果。其頁面邏輯功能與拍攝界面下的“濾鏡”按鈕相同。

3）編輯主操作區(qū)

位于界面底部，從左而右描述

• 第一個為“音樂”按鈕，點擊可以選擇視頻配樂。點擊后從底部彈出音樂選擇框。

音樂選擇框推薦欄內，根據(jù)熱度推薦音樂，可左右滑動選擇。收藏欄內，可以選擇用戶過去收藏過的音樂。點擊更多按鈕可以進入拍攝視頻中的選擇音樂界面

音樂選擇框內有音量按鈕，點擊從底部彈出音量調節(jié)框?？梢哉{節(jié)配樂音量。

• 第二個為“特效”按鈕，可以在視頻中增加特效。點擊后進入特效編輯界面。原視頻從全屏縮小至? ? ? ?界面中心。從底部彈出特效選擇欄，從選擇欄中選擇要加入的特效。左上角取消特效編輯，返回視頻編輯界面；右上角保存特效編輯，返回視頻編輯界面。
• 第三個與第四個為文字和貼紙界面，可以在視頻中增加文字與貼紙標簽。點擊從底部彈出相應窗口，過程類似于濾鏡按鈕。
• 第五個為“下一步”按鈕，靠左，點擊保存視頻編輯內容，并跳入視頻發(fā)布界面。

6.3.3 拍攝——發(fā)布頁面

（1）頁面名稱：視頻發(fā)布頁面

（2）頁面入口：完成視頻編輯后，“下一步”按鈕跳轉至發(fā)布界面

（3）頁面結構：

1. 增加配文
2. 選擇位置
3. 可見范圍
4. 草稿與發(fā)布

（4）頁面邏輯內容及交互詳細說明

界面各部分從上往下分布，各自描述為

1）增加配文

• 第一部分為增加視頻說明區(qū)域，點擊區(qū)域中心，從下方彈出鍵盤輸入視頻說明。
• 此區(qū)域右側為視頻封面，封面是從視頻中隨機截取一幀。點擊封面可進入封面選擇界面，系統(tǒng)從視頻中隨機截取五幀畫面，用戶從中選取封面。
• 此區(qū)域左下角為話題與好友按鈕。點擊話題可在視頻發(fā)布中參與某一話題討論；點擊好友可在視頻發(fā)布中@某一好友，提醒好友觀看。

2）選擇位置

• 第二部分為定位區(qū)，可以添加視頻發(fā)布地點。此區(qū)域根據(jù)GPS數(shù)據(jù)，自動顯示距離最近的三個位置，選中點亮該位置，單選。
• 點擊箭頭更多按鈕，進入位置選擇界面，可以輸入位置名稱，選擇相關地點。

3）可見范圍

• 第三部分可以選擇可觀看人群范圍。分為公開（所有人可見）、好友可見（互相關注好友可見）、私密（僅自己可見）三個層級，從中選取。

4）草稿與發(fā)布

• 第四部分為發(fā)布視頻區(qū)域，左側為草稿按鈕，可將所拍攝視頻及其編輯、發(fā)布情況暫時放入草稿箱保存；
• 右側為發(fā)布按鈕，點擊完成發(fā)布，并關閉該頁面，并自動轉入首頁—推薦界面。

6.4??消息與個人中心頁面

（1）頁面名稱：消息頁面、個人中心頁面

（2）頁面入口：底部主菜單中“消息”按鈕與“我”按鈕

（3）頁面邏輯內容：

消息頁面中從上往下分為兩個部分：

1）界面頂部為各個互動功能入口，從左往右依次為

• 粉絲：點擊進入關注用戶的粉絲列表
• 贊：點擊進入用戶的獲贊情況列表
• @我的：點擊進入用戶被好友@情況列表
• 評論：點擊可觀看用戶作品收到的評論列表

2）界面中部開始為用戶與他人的聊天列表

• 每個對話框顯示頭像，昵稱，時間和最后收到的消息。
• 未讀消息會有小黃點提示

個人中心頁面中，從上往下為三個部分：

1）第一部分包括用戶頭像、編輯資料按鈕與發(fā)現(xiàn)好友按鈕

• 用戶頭像：點擊可觀看大圖
• 編輯資料按鈕：點擊進入個人資料編輯界面
• 發(fā)現(xiàn)好友按鈕：點擊進入搜索好友、推薦好友界面

2）第二部分為文字部分，從上而下包括：

• 用戶昵稱
• 抖音號
• 個人簡介：來自于個人資料的填寫
• 個人信息：來自于個人資料的填寫，包括性別、年齡、地區(qū)
• 獲贊數(shù)、關注數(shù)、粉絲數(shù)

3）第三部分為視頻展示，分為三欄，可在第三部分區(qū)域內左右滑動切換

• 作品欄：用戶拍攝發(fā)布的作品，按時間順序倒序排序
• 動態(tài)欄：用戶動態(tài)展示，按時間順序倒序排序
• 喜歡欄：用戶點贊過得作品展示，按點贊時間倒序排序

七、 總結

以上便是我倒推撰寫的抖音APP的產品需求文檔。

如今，短視頻行業(yè)成為互聯(lián)網(wǎng)行業(yè)的熱點，以抖音、快手為第一梯隊的諸多產品在短視頻行業(yè)發(fā)力。抖音已經是一款火爆成功的產品，但是以我個人角度而言，從功能、交互角度仍有如下可以嘗試的迭代方向：

• 熱點榜功能太深。熱搜是反映生活熱點和最新時事的功能，是能增強產品影響力和輿論效應的功能。現(xiàn)如今熱點榜入口在首頁——搜索按鈕——熱點榜。入口太深，且首頁過于搶占用戶注意力。使得用戶使用習慣難以養(yǎng)成，因此此功能難以形成類似“新浪熱搜”的影響力。
• 個人關注用戶不能分類。對關注的用戶難以分類，往往身邊朋友與明星大V混雜在一起。內容也一起推送。使得朋友、好友的內容淹沒在明星大V的內容里。這不利于抖音社交屬性的發(fā)展。建議可以講關注用戶分類，內容推送也可以分開。

本文由 @Ted.Z 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載

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