PRD:用Axure原型展示抖音页面交互逻辑

21天Excel零基础速成训练营,导师带学+答疑辅导+实战作业,让你真正掌握Excel技能,了解一下>>

本文笔者从四个部分输出此份抖音产品需求文档:产品概述、产品结构图、部分逻辑业务,以及,功能需求与交互。

笔者作为一名小白,第一次尝试利用Axure来制作PRD,并且重点尝试将页面交互逻辑直接用Axure原型来展示,可能会存在表达不够详细的问题,希望各位大神提出建议,十分感谢。

一、产品概述

1. 产品介绍

抖音,是一款可以拍短视频的音乐创意短视频社交软件,该软件于2016年9月上线,是一个专注年轻人音乐短视频社区平台。用户可以通过这款软件选择歌曲,拍摄音乐短视频,形成自己的作品。

2. 产品需求定位

产品定位:适合年轻人的音乐短视频社区,UGC类资讯产品

slogan:纪录美好生活

用户:

从性别来看,抖音提供的内容对男性与女性拥有同样的吸引力,从年龄段可以看出抖音的目标人群并没有偏离原始目标用户“年轻人”这一群体。

需求整理:

需求定位脑图展示:

这里将产品定位、目标用户、以及需求整理通过思维导图的形式合并展现,个人觉得这样会将结构展示得更加清晰。

3. 文档属性

二、版本信息

抖音主要功能大部分早已完善,版本更新多为细节的优化与一些小功能更新。

三、产品结构图

1. 产品功能结构图

2. 产品信息架构图

四、全局说明

1. 功能权限

登录后:享受APP一切服务。

登陆前:可以以游客的身份进行浏览,但是不能够使用点赞,评论等对内容进行评判的功能,也无法发布内容。一旦使用这些功能,就会弹出登录界面提示用户登录后才可以使用。

2. 键盘交互说明

输入框为手机号或验证码输入框时:弹出数字键盘。

其余输入框:弹出字母全键盘。

3. 页面内交互

3.1 网络环境:

3.2 加载中:

3.3 提示:

3.4 首页交互方式:

五、部分业务逻辑

1. 登录业务逻辑

2. 观看视频业务逻辑

3. 制作视频业务逻辑

六、核心功能需求与交互

(逻辑交互部分放到了Axure中,请放大网页比例进行观看)

1. 总体页面流程图

2. 登录页面

功能:登录

用户场景:

  • 想查看自己关注的用户有没有发布新的视频。
  • 想拍摄视频。
  • 想评论视频等。

入口:

  1. 登录
  2. 评论,收藏,点赞
  3. 拍摄、发布视频

前置条件:用户未登录时,尝试进行须识别个人身份的操作。

优先级:

页面说明:

  • 手机号默认+86,输入限制11位,密码输入不可见,密码必须高于6位。
  • 当输入非数字内容时,输入界面不显示任何内容;输入数字小于11位时,点击登录提示“请输入11位数字手机号”当输入大于11位数字时,超过部分不显示。
  • 获取验证码后,按钮内容变为“60s”并降低灰度开始60秒倒数,60秒后按钮内容变为“点击重新获取”,恢复原来的灰度。
  • 忘记密码时,可点击“忘记密码”跳转到找回密码页面,输入登录名后滑动滑块验证获取验证码,输入验证码后点击下一步进行密码重置。

交互逻辑:如图。

3. 推荐短视频页面

功能:推荐短视频观看。

用户场景:想观看自己喜欢的短视频。

页面说明:

  • 未登录不能参与评论、转发、收藏等操作,进行相应操作时跳转至登录界面。
  • 评论时键盘从下方弹出。
  • 评论字数最大不能超过110字,超过是给出提示。

入口:首页

前置条件:

优先级:

交互逻辑:如图

4. 附近短视频页面

功能:附近短视频观看。

用户场景:看看附近有没有什么人拍摄了短视频。

页面说明:

  • 未登录不能参与评论、转发、收藏等操作,进行相应操作时跳转至登录界面。
  • 评论时键盘从下方弹出。
  • 评论字数最大不能超过110字,超过是给出提示。

入口:点击“附近”

前置条件:

优先级:

交互逻辑:如图

5. 关注的短视频页面

功能:关注的短视频观看

用户场景:看看自己关注的用户有没有更新内容。

页面说明:

  • 未登录不能参与评论、转发、收藏等操作,进行相应操作时跳转至登录界面。
  • 评论时键盘从下方弹出。
  • 评论字数最大不能超过110字,超过是给出提示。

入口:1.点击“关注”;2.点击“我的”-》“关注”

前置条件:登录

优先级:

交互逻辑:如图

6. 拍摄短视频页面

功能:拍摄视频

用户场景:用户想自己拍摄短视频。

页面说明:

  • 拍摄方式可在长按拍与单机拍之间转换,转换方式如图。
  • 左上角“X”可退出拍摄界面。

入口:

  1. 在首页进行屏幕右滑
  2. 点击首页“+”号

前置条件:登录

优先级:

交互逻辑:如图

7. 编辑短视频页面

功能:编辑视频

用户场景:用户在拍摄短视频需要对视频进行编辑,包括音乐剪辑,添加特效等操作。

页面说明:

  • 该部分添加的滤镜,特效与道具与拍摄阶段提供的一致。
  • 左上角“<”可返回到拍摄界面。

入口:拍摄视频完成后

前置条件:拍摄视频

优先级:

交互逻辑:如图

8. 发布视频页面

功能:发布视频

用户场景:用户在编辑短视频后需要发布视频,添加相关活动,地理位置等。

页面说明:

  • 发布内容字数不能超过80字。
  • 添加位置中,搜索地址以后只能在下方菜单中选择一个相近地点。

入口:编辑视频完成后。

前置条件:编辑视频

优先级:

交互逻辑:如图

七、小结

整个抖音的功能结构比较繁杂,本文只选取了部分核心功能进行需求描写,由于交互都写在了Axure里,可能会有一些情况没有考虑到,还请大神轻喷。另外本文章节结构的思路参考了@神户短郎《用Axure写PRD:虎扑app产品需求文档》

 

本文由@Kazan 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自Unsplash, 基于CC0协议

给作者打赏,鼓励TA抓紧创作!
评论
欢迎留言讨论~!
  1. 很棒,很受用,谢谢分享 ;-)

    回复
  2. 很厉害了

    回复
  3. 牛人,加个微信吧

    回复
  4. 登录两个字全是错的……

    回复
  5. 厉害👍

    回复
  6. 这些带线条的批注是用Axure做的吗

    回复
  7. 第一次看到prd文档,感觉不错

    回复
  8. 我觉得还不错,最起码对功能划分比我刚做产品的时候强很多。说过多停留在表面的我想说可能他连你做的功能总结都不一定能做得好,看起来是没有实战经验因为没办法把每个模块想的太细,做项目的时候没人会把所有的功能都给你做,那你就累死了,你这个可以找关键功能出来最详细的需求说明,整体我觉得还好,加油哦~

    回复
  9. 登录业务逻辑手机号这个好奇怪😳

    回复
  10. 还是蛮粗的 过多的停留在了表面 内部逻辑还是要重点突出的

    回复
  11. 作为PRD的话,实际操作中这个文档一点都不够。给到研发和测试,他们会一脸懵逼。

    回复
    1. 所见略同,PRD是BRD中对产品功能描述的部分,只不过将其独立出来,以技术语言呈现和加以说明。
      例如,产品概述部分,可以写成:
      “产品概述
      摘要:①在登录功能模块,用户需要使用手机号码登录…②在拍摄短视频功能模块,拍摄方式可在长按拍与单机拍之间转换……”
      这在开头就告诉研发、测试部门这次的工作是某某功能某某模块。
      也是个人愚见,如果觉得不对,请各位海涵。

      回复
    2. 我也感觉,是不是要把里面的元素都描述一遍

      回复
  12. 做的很棒,十足的干货,选题也很好!

    回复
  13. 先说点题外话,登lu页面,用户登lu,是目录的录而不是大陆的陆。好多人混淆,不过两个有本质不同的意思😂

    回复
  14. 厉害

    回复
  15. 同研二,支持一下

    回复
  16. 可以加个微信认识吗 同学

    回复
  17. 兄弟,我也买了那个课程,我们路走歪了,人家的文档很专业的。

    回复
    1. 哪个文档专业啊?

      回复
    2. 我是跟着那个课程画的图,我觉得他那个图也没有说的很详细不知道人家开发看的懂不。。。重点还是练习一下axure吧

      回复
    3. 其实怎么画 用什么工具画原型都不重要 重要的是要理清内部逻辑 让人能明白 理解你的东西 就算不用Axure话 手绘的话 别人能理解都是可以的。

      回复
    4. 请问是哪个课程啊?

      回复
    5. 同问什么课程啊

      回复
    6. 那个课啊

      回复
  18. prd的话,我觉得详细设计写得太粗略了。

    回复
    1. 同感

      回复
    2. 是的需要不断把细节和情况写清楚

      回复
    3. 我也发现了这个问题,随便挑文中的一个毛病:拍摄短视频页面-拍摄方式可在长按拍与单机拍之间转换。“长按”在这里是具体指代按多少秒呢?是2s还是5s?还是一个“按住就持续,松开就完成拍摄”的状态?PRD的关键是要帮助研发、测试部门开展工作。

      回复
  19. 好牛逼,要是每步要是能告知你用什么做的就更好了,来自小白的膜拜

    回复