抖音短视频 产品需求文档

一、 文档综述

1.1 文档属性

1.2 产品简介

• 产品背景：字节跳动旗下产品
• 产品类型：UGC短视频平台
• 产品slogan：记录美好生活（原先为“让崇拜从这里开始”）
• 产品介绍：一款以年轻人为目标群体的音乐短视频社区，用户通过拍摄15s/60s的短视频，或者通过直播，与其他用户分享生活认识朋友，了解新鲜事。
• 产品定位：专注于年轻人的短视频创作分享app，以音乐+视频的模式展现内容，构建年轻人的社交社区。

1.3 产品用户

  据数据统计，在2018年，抖音的月活跃用户量已经达到2.3亿，其中，将近82%的用户处在35岁以下，52%的用户的年龄段都集中在25岁以下，其中21-25岁以及26-30岁这两个年龄段的用户数最多。并且接近六成用户均为女性。抖音的用户虽然覆盖各年龄段，但30岁以下的年轻群体占大多数。

1.4 需求总结

二、 产品结构

2.1 产品功能结构图

2.2 产品信息架构图

三、 全局说明

3.1 登录页面

权限说明：

• 登录状态下可以进行所有操作
• 未登录状态下进入APP，不可关注好友，不可点赞，不可评论以及聊天，不可制作视频，不可查看消息栏，不可查看个人主页。要进行上述操作需要跳转到登录页面。
  
  （1） 页面名称：登录页面
  （2） 页面入口：未登录状态下，用户点击关注、消息、个人中心、拍摄等界面入口，或者点击使用点赞、点评、分享等任何互动功能时，自动跳转入登录界面
  （3） 页面功能：实现三种方式的登录——手机验证码模式、第三方授权登录、手机密码登录
  （4） 页面逻辑辑内容及其交互详细说明：

1. 手机验证码登录方式：

• 初始界面下，呈现手机号码输入栏、验证码输入栏、获取验证码按钮
• 手机号码默认+86，输入限制11位数字。当输入非数字内容时，输入界面不显示任何内容；输入数字小于11位时，点击登录提示“请输入11位数字手机号”当输入大于11位数字时，超过部分不显示。
• 点击获取验证码后，系统自动发验证码短信给输入手机号，验证码按钮变为60s倒计时，倒计时结束前不可再获取验证码。
• 验证码正确，完成登录，转入首页—推荐页面

2. 第三方授权登录：

• 初始界面下，手机验证码输入栏下方，呈现其他方式登录提示词
• 提供各社交平台按钮，点击进入此社交平台授权登录界面
• 授权完成后，完成登录，转入首页—推荐页面

3. 手机密码登录

• 初始界面下，右上方有密码登录按钮，点击进入密码登录界面
• 密码登录界面呈现手机号码输入栏与密码输入栏。手机号码输入栏限制与上一页相同。密码输入栏可输入数字、大小写英文字母、各类符号。
• 忘记密码时，可点击“找回密码”跳转到找回密码页面，输入登录名后滑动滑块验证获取验证码，输入验证码后点击下一步进行密码重置。
• 账号密码验证正确，完成登录，转入首页—推荐页面

3.2 网络环境

3.3 键盘输入

• 点击手机号码输入框，由页面底部弹出数字键盘；
• 点击其他输入框时，由页面底部弹出字母键盘。
  

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. 页面切换区
2. 视频播放区
3. 视频分类切换区
4. 互动功能区
5. 视频文字描述

（4） 页面逻辑内容及其交互详细说明

1. 页面切换区

• 为app主菜单，除拍摄视频界面外均存在于屏幕最底部，为五个页面的入口。
• 点击标题按钮可以进入对应页面，点击中央十字按钮，可以进入视频拍摄页面。
• 启动抖音短视频app，直接进入“首页”推荐页，首页为按钮为加粗加亮，其他按钮灰暗。若转入其他页面，则转入页面按钮变高亮，其他页面为灰暗。
• 当有系统功能更新时，“我”页面按钮出现黄色小圆点提示。当有互动消息时，“消息”页面按钮出现黄色小圆点提示。点击后小圆点消失。

2. 视频播放区

• 全屏播放视频，视频由后台推荐机制分发。
• 点击视频，可以控制暂停/播放视频
• 向右滑动，可以切换到“首页”界面的“附近”界面
• 向左滑动，进入播放视频的拍摄者的个人中心，观看详情。
• 上下滑动，切换播放视频，切换视频由后台分发机制设定。
• 视频在播放中，可预缓存推荐列表的下几个视频，保证切换的流畅。

3. 视频分类切换区

• 可以在推荐/附近两个界面切换，所在界面的标识高亮，另一个灰暗。
• “推荐”界面，由后台推荐机制分发。“附近”界面，按距离远近排序。

4. 互动功能区
   从上到下描述：

• 点击头像可查看对方个人中心。
• 点赞按钮，点击后icon变为红色，表示已点赞，再次点击可取消。
• 评论按钮，点击后，底部上弹评论框，详情可看评论页描述。
• 分享页面，点击后，底部上弹分享框，详情可看分享页描述。
• 未登录不能参与互动，点击跳转至登录界面

5. 视频文字描述
   从上到下描述：

• 所有发布视频的用户，均以 @名称 的形式，为了区分下一行的标题，点击后进入该用户的个人主页
• 此行为标题行，最多不超过50字，可分三行，不可点击
• 此行为该视频使用的音乐名称，包括歌曲名称+歌手，以滚动形式展现，不可点击

6.1.2 首页 — 附近页面

（1） 页面名称：首页——附近页面
（2） 页面入口：通过下方主菜单进入首页页面后，向右滑动或者点击上方附近按钮进入
（3） 页面结构：

1. 定位栏
2. 切换城市界面
3. 各视频封面
   （4） 页面逻辑内容及其交互详细说明
4. 定位栏

• 初始通过GPS定位，自动定位所在城市
• 定位栏有段为切换按钮，点击进入切换城市界面，自行切换城市分区

2. 切换城市界面
   由上而下描述

• 第一部分显示自动定位城市
• 第二部分为热门城市选项。将用户较多的九个城市按次序排开。点击则定位于该城市。
• 第三部分为各城市按首字母排序。根据音序顺次排列各个城市名称。点击则定位于该城市。

3. 各视频封面

• 首页——附近页面，按距离远近推荐视频。视频截取一帧为封面，由近及远排序展现。
• 封面下方，存在文字说明。文字说明由上而下分别为距离（km，一位小数），视频说明（两行），作者昵称及点赞数。
• 点击视频封面，进入该视频详情页。详情页全屏播放该视频，页面结构与首页——推荐页面相同。

6.2 关注页面

（1） 页面名称：关注页面
（2） 页面入口：通过下方主菜单点击“关注”按钮进入
（3） 页面结构：

1. 视频信息区
2. 视频播放区
3. 视频互动区

（4） 页面逻辑内容及其交互详细说明
关注页面内，为用户所有关注对象所发布的视频，按时间从倒叙排布。每一个视频所占区域均由三部分组成。由上至下描述分别为

1. 视频信息区
   由上至下描述：

• 第一栏左侧为本视频发布用户头像及昵称，点击可进入对方个人界面。
• 第一栏右侧为取消关注按钮，点击之后出现询问是否取消关注的窗口。
• 第二栏为视频简介，两行，由发布者自行提供。

2. 视频播放区

• 视频界面，自动播放，点击进入详情页。详情页全屏播放该视频，页面结构与首页——推荐页面相同。
• 视频界面底端左侧为音乐名称，右侧为暂停键，可控制播放/暂停。

3. 视频互动区
   视频互动区包括用户与本视频的互动功能（点赞，分享，评论）以及对本视频其他观看者、评论者的互动功能。由上往下描述

• 第一栏左侧为视频总时长，第一栏右侧分别为评论、分享、点赞按钮。点击评论/分享按钮，从下方弹出评论栏与分享栏。点击点赞按钮，对作品点赞，点赞数加一，再按取消。
• 第二栏，显示点赞数，字体灰暗，较小。
• 第三栏开始，显示1至3条高赞评论，视评论数量决定。点击从底部弹出评论栏，并定位于所点击的评论位置。可在评论栏内对相关评论进行点赞、评论。
• 倒数第二栏，显示评论总数，点击从底部弹出评论栏。
• 最后一栏为输入评论栏，点击从底部弹出键盘，可发布用户自己对该视频的评论。

6.3 拍摄页面

6.3.1 拍摄 — 拍摄页面

（1） 页面名称：视频拍摄页面
（2） 页面入口：通过下方主菜单“＋”按钮进入
（3） 页面结构：

1. 拍摄视频显示区
2. 拍摄辅助操作区
3. 拍摄主操作区

（4） 页面逻辑内容及交互详细说明

1. 拍摄视频显示区

• 全屏显示摄像头画面
• 界面顶部有录制进度条，若处于拍摄录制中，出现黄色进度条

2. 拍摄辅助操作区

• 选择音乐按钮，点击弹出音乐选择窗口，可用来选择视频搭配背景音乐。音乐选择窗口对音乐分类，按音乐热度、音乐类别显示不同的音乐推荐列表，供用户选择。
• 右侧按钮从上往下第一个，翻转摄像头按钮，用于拍摄过程中前置摄像头与后置摄像头的切换使用。
• 右侧按钮从上往下第二个，拍摄速度按钮，点击出现速度选择框，视频速度分为五档。用于控制视频的播放速度。“标准”档，播放速度与拍摄速度相同，“快”与“极快”档将视频二倍速、三倍速播放，“慢”与“极慢”档将视频1/2、1/3速度播放。
• 右侧按钮从上往下第三个，为“滤镜”按钮，用于对拍摄视频加相应滤镜。点击底部弹出滤镜选择框。
  滤镜选择框分为上下两部分，它将不同滤镜按风格分类，上部分可挑选不同的滤镜风格按钮，可左右滑动。点击某一按钮，此按钮图形高亮，下部分会出现相应风格分类下的各种滤镜，可左右滑动选择。点击为视频添加此滤镜。
  滤镜选择框右上角为管理按钮，点击后弹出滤镜管理框，可在不同风格下选择常用滤镜，常用滤镜将在滤镜选择框中优先排列。
• 右侧按钮从上往下第四个，为“美化”按钮，点击后底部弹出修图框，修图框中存在各类修图功能选项，如“磨皮”、“瘦脸”、“大眼”等，可左右滑动选择。选择后对视频中人物进行相应的修图。

3. 拍摄主操作区

• 底部为拍摄类型栏，分为照片拍摄、60s视频拍摄、15s视频拍摄，点击可选择三种拍摄类型。
• 中心红色圆形按钮，为拍摄按钮，点击开始视频拍摄，再次点击结束视频拍摄。结束后自动会看视频，并在视屏拍摄按钮右侧出现√与×按钮。用户满意视频，点击√进入视频编辑界面，否则点击×删除视频，并跳转回视频拍摄界面。
  拍摄过程中，视频界面顶部黄色进度条随拍摄时间增加，到拍摄限定时间自动结束拍摄。
• 拍摄按钮右侧，为上传视频按钮。点击打开手机相册界面，选择已有视频，直接进入视频编辑界面。
• 拍摄按钮左侧，为道具按钮，点击弹出道具框使用道具。

6.3.2 拍摄 — 编辑页面

（1） 页面名称：拍摄——编辑页面
（2） 页面入口：完成视频拍摄后，跳转至此页面
（3） 页面结构：

1. 视频显示区
2. 编辑辅助操作区
3. 编辑主操作区

（4） 页面逻辑内容及交互详细说明

1. 视频显示区

• 全屏播放已经完成拍摄的视频，循环播放。

2. 编辑辅助操作区
   位于界面右侧，从上而下描述

• 第一个为“自动美颜”按钮，点击后对视频自动增强画质，无需设置。再点击关闭效果。
• 第二个为“变声”按钮，可以变换原视频声音风格。点击后从底部弹出变声选择框，选择变声效果。
• 第三个为“滤镜”按钮，可以为视频增加滤镜效果。其页面逻辑功能与拍摄界面下的“滤镜”按钮相同。

3. 编辑主操作区
   位于界面底部，从左而右描述

• 第一个为“音乐”按钮，点击可以选择视频配乐。点击后从底部弹出音乐选择框。
  音乐选择框推荐栏内，根据热度推荐音乐，可左右滑动选择。收藏栏内，可以选择用户过去收藏过的音乐。点击更多按钮可以进入拍摄视频中的选择音乐界面
  音乐选择框内有音量按钮，点击从底部弹出音量调节框。可以调节配乐音量。
• 第二个为“特效”按钮，可以在视频中增加特效。点击后进入特效编辑界面。原视频从全屏缩小至界面中心。从底部弹出特效选择栏，从选择栏中选择要加入的特效。左上角取消特效编辑，返回视频编辑界面；右上角保存特效编辑，返回视频编辑界面。
• 第三个与第四个为文字和贴纸界面，可以在视频中增加文字与贴纸标签。点击从底部弹出相应窗口，过程类似于滤镜按钮。
• 第五个为“下一步”按钮，靠左，点击保存视频编辑内容，并跳入视频发布界面。

6.3.3 拍摄 — 发布页面

（1） 页面名称：视频发布页面
（2） 页面入口：完成视频编辑后，“下一步”按钮跳转至发布界面
（3） 页面结构：

1. 增加配文
2. 选择位置
3. 可见范围
4. 草稿与发布

（4） 页面逻辑内容及交互详细说明
界面各部分从上往下分布，各自描述为

1. 增加配文

• 第一部分为增加视频说明区域，点击区域中心，从下方弹出键盘输入视频说明。
• 此区域右侧为视频封面，封面是从视频中随机截取一帧。点击封面可进入封面选择界面，系统从视频中随机截取五帧画面，用户从中选取封面。
• 此区域左下角为话题与好友按钮。点击话题可在视频发布中参与某一话题讨论；点击好友可在视频发布中@某一好友，提醒好友观看。

2. 选择位置

• 第二部分为定位区，可以添加视频发布地点。此区域根据GPS数据，自动显示距离最近的三个位置，选中点亮该位置，单选。
• 点击箭头更多按钮，进入位置选择界面，可以输入位置名称，选择相关地点。

3. 可见范围

• 第三部分可以选择可观看人群范围。分为公开（所有人可见）、好友可见（互相关注好友可见）、私密（仅自己可见）三个层级，从中选取。

4. 草稿与发布

• 第四部分为发布视频区域，左侧为草稿按钮，可将所拍摄视频及其编辑、发布情况暂时放入草稿箱保存；
• 右侧为发布按钮，点击完成发布，并关闭该页面，并自动转入首页—推荐界面。

6.4 消息与个人中心页面

（1） 页面名称：消息页面、个人中心页面
（2） 页面入口：底部主菜单中“消息”按钮与“我”按钮
（3） 页面逻辑内容：

  消息页面中从上往下分为两个部分：

1. 界面顶部为各个互动功能入口，从左往右依次为

• 粉丝：点击进入关注用户的粉丝列表
• 赞：点击进入用户的获赞情况列表
• @我的：点击进入用户被好友@情况列表
• 评论：点击可观看用户作品收到的评论列表

2. 界面中部开始为用户与他人的聊天列表

• 每个对话框显示头像，昵称，时间和最后收到的消息。
• 未读消息会有小黄点提示

  个人中心页面中，从上往下为三个部分：

1. 第一部分包括用户头像、编辑资料按钮与发现好友按钮

• 用户头像：点击可观看大图
• 编辑资料按钮：点击进入个人资料编辑界面
• 发现好友按钮：点击进入搜索好友、推荐好友界面

2. 第二部分为文字部分，从上而下包括：

• 用户昵称
• 抖音号
• 个人简介：来自于个人资料的填写
• 个人信息：来自于个人资料的填写，包括性别、年龄、地区
• 获赞数、关注数、粉丝数

3. 第三部分为视频展示，分为三栏，可在第三部分区域内左右滑动切换

• 作品栏：用户拍摄发布的作品，按时间顺序倒序排序
• 动态栏：用户动态展示，按时间顺序倒序排序
• 喜欢栏：用户点赞过得作品展示，按点赞时间倒序排序

七、 总结

  以上便是我倒推撰写的抖音APP的产品需求文档。
  如今，短视频行业成为互联网行业的热点，以抖音、快手为第一梯队的诸多产品在短视频行业发力。抖音已经是一款火爆成功的产品，但是以我个人角度而言，从功能、交互角度仍有如下可以尝试的迭代方向：

1. 热点榜功能太深。热搜是反映生活热点和最新时事的功能，是能增强产品影响力和舆论效应的功能。现如今热点榜入口在首页——搜索按钮——热点榜。入口太深，且首页过于抢占用户注意力。使得用户使用习惯难以养成，因此此功能难以形成类似“新浪热搜”的影响力。
2. 个人关注用户不能分类。对关注的用户难以分类，往往身边朋友与明星大V混杂在一起。内容也一起推送。使得朋友、好友的内容淹没在明星大V的内容里。这不利于抖音社交属性的发展。建议可以讲关注用户分类，内容推送也可以分开。

本文原创发布。未经许可，禁止转载