根据图虫网的app产品倒推了图虫网的产品需求文档，写这篇文档主要是为了加强对产品功能的逻辑和细节上的把控，也是为之后工作中能给开发UI测试呈现出一个可量化条理清楚便于理解的产品需求文档做准备。本文省去了实际PRD中版本修订、业务描述、产品前景等内容，直接从PRD的核心内容产品功能逻辑说起。

目录

一、文档综述 

1.1 PRD输出环境

1.2 产品介绍

1.3 文档名词说明

二、产品结构

2.1 产品结构图

2.2 产品信息结构图

三、全局说明

3.1 功能权限

3.2 键盘说明

3.3 页面内交互

四、 产品详细功能说明

4.0 常用操作

4.0.1. 常用icon

4.0.2. 分享弹窗

4.0.3. 更多操作

4.1. 欢迎页

4.2. 登陆/注册页&引导页

4.2.1 登录首页

4.2.2 授权后注册页

4.2.3 注册页

4.2.4 登录页

4.2.5 选择感兴趣图片分类页

4.3. 发布图博页

4.3.1 选择照片

4.3.2 图博编辑

4.3.3 输入标签

4.4. 首页

4.4.1 首页-推荐列表

4.4.2 顶部banner&文字图博&图片图博

4.4.3 热门标签推荐

4.4.4 用户推荐

4.4.5 活动推荐

4.4.6 首页-关注列表

4.4.7 图虫编辑推荐

4.4.8 大图

4.4.9 图片图博详情页

4.4.10 文字图博详情

4.4.11 回复详情弹框

4.4.12 用户列表页（关注&粉丝&喜欢人&优秀讲师列表）

4.4.13 打赏

4.4.14 图片标签主页&活动标签主页

4.5. 图博列表页

4.6. 发现页面

4.6.1 发现页面

4.6.2 搜索页

4.6.3 摄影课堂页

4.6.4 影像频道

4.6.5 热门摄影师页

4.6.6 活动列表页

4.7. 消息

4.7.1 消息

4.7.2 通知列表页

4.8. 我

4.8.1 我-图博

4.8.2 我-喜欢

4.8.3 我-活动

4.8.4 我-更多

4.8.5 设置

4.8.6 个人信息

4.9. 用户主页

一、文档综述

1.1 PRD输出环境

1.2 产品介绍

图虫网是专为摄影师打造的照片分享与经验交流的平台，其致力于成为中国年轻摄影师的成长平台。为摄影爱好者营造一个自由平等、版权尊重的环境，让其输出的影像发挥其价值。

1.3 文档名词说明

二、产品结构

2.1 产品结构图

2.2 信息结构图

三、全局说明

3.1 功能权限

分为未登陆状态与登陆状态。

• 登陆状态下可进行所有操作
• 未登录状态下不可进入导航栏中“发布图博”“消息”和“我”，不可进行喜欢、评论、打赏、关注用户、参加活动、订阅标签的操作；进行以上操作跳转到登录首页4.2.1

3.2 键盘说明

点击（手机号、验证码）输入框时弹出数字键盘

点击其他输入框弹出字母键盘

3.3 页面内交互

四、产品详细功能说明

4.0 常用操作

4.0.1 常用icon

4.0.2 分享弹窗

页面逻辑：点击分享到朋友圈/微信好友/手机QQ/微博

4.0.3 更多操作

页面逻辑：

• 朋友圈/微信好友/手机QQ/微博：点击分享
• 生成长图：点击生成长图[略]
• 查看参数：点击打开照片参数弹窗
• 举报：点击弹出actionsheet，按钮1：淫秽色情，按钮2：违法有害，按钮3：广告营销，按钮4：版权盗用。点击按钮后弹出toast”举报成功“
• 编辑：点击打开图博编辑页
• 删除：点击删除图博

4.1 欢迎页

首次启动app进入开屏视频，开屏视频播放5秒出现下图中“开启图虫”按钮，点击开启图虫进入登录首页4.2.1

非首页启动app进入欢迎页1或欢迎页2

页面逻辑：

• 若未登录，显示欢迎页1，3秒后进入登陆首页4.2.1
• 若已登陆，显示欢迎页2
  a）欢迎页2背景图为编辑人工推荐的应用内用户所发照片
  b）点击欢迎页2任意位置进入该推荐图片的图博详情页4.4.9
  c）未点击3秒后自动跳转到首页4.4

4.2 登陆/注册页&引导页

4.2.1 登录首页

页面序号逻辑：

1. 点击调出微信/微博/QQ授权接口，授权登陆后进入首页4.4
2. 点击进入注册页4.2.3
3. 点击进入登陆页4.2.4
4. 点击进入以未登录状态进入首页4.4

4.2.2 授权后注册页

页面序号逻辑：

1. ① 默认为授权号的头像。点击弹出actionsheet，按钮1为拍摄照片，点击打开设备相机；按钮2为相册上传，点击打开相册。
2. 用户名唯一不可重复。默认为授权号用户名，若授权号用户名已被注册，自动在授权号用户名后加随机三位数字，例如“张三383”。
3. 未输入用户名为禁用状态，输入用户名切换为可点击状态。点击后校验用户名是否唯一，校验失败弹出toast“该用户名已被注册”；校验成功进入选择感兴趣图片分类页4.2.5

4.2.3 注册页

页面序号逻辑：

① 点击校验手机号格式

• 手机号已注册，弹出toast“该手机号已经存在”
• 手机号格式不正确，弹出toast“手机号格式错误”
• 手机号无误，点击发送验证码，进入120s倒计时，文本变为“X s后重试”，倒计时结束后恢复发送验证码状态

② 点击进入《图虫用户协议和隐私条款》[略]

③ 输入项有一项为空注册按钮为禁用状态，全部输入后变为可用状态。点击按照用户名、密码、手机号、验证码的顺序校验。以下为校验失败提醒。

• 用户名：用户名重复，弹出toast“该用户名已存在”
• 密码：密码<6位，密码框上红字提示“密码长度至少6位”
• 手机号：手机号已注册，弹出toast“该手机号已经存在”；手机号格式不正确，弹出toast“手机号格式错误”
• 验证码：验证码位数不对，验证码框上红字提示“验证码位数不正确”；验证码错误，弹出toast“短信验证码错误”

所有项校验成功点击进入选择感兴趣图片分类页4.2.5

4.2.4 登录页

页面序号逻辑：

• 点击忘记密码进入密码找回页[略]
• 登陆：输入框有一项为空时为禁用状态，全部输入变为可用。点击校验用户名、密码，校验成功进入首页4.4

4.2.5 选择感兴趣图片分类页

页面序号逻辑：

• 编辑推荐的标签分类，选择后打钩
• 选中任何分类弹出；分类至少选择3个；每选择一个文本中数字减1；选择3个或以上时文本变为“完成”；点击完成进入首页4.4

其他说明：此页面选择的分类标签存储在用户订阅的标签中

4.3 发布图博页

点击底部导航栏中“+”，打开选择照片

4.3.1 选择照片

页面序号逻辑：

• 未选择图片时为禁用状态，选择后可用，点击进入图博编辑页
• 点击校验图片宽高比，1:5<宽高比<5:1。若不满足要求选择失败弹出toast“图片宽高比不能大于5:1或小于1:5，换一张试试”；符合要求选择成功
• 点击进入页面2
• 点击选中显示照片大小，1M以下以K为单位，1M及以上以M为单位

其他说明：最多选择30张图片，选择第31张图片时弹出toast“最多只能上传30张图片”

4.3.2 图博编辑

页面序号逻辑：

① 发布

• 无图片时为禁用状态，有图片时可用
• 点击后若未添加标签，弹出alert“添加标签可以让更多人发现你的作品，不添加标签就发布吗？”
• 发布后进入首页-关注，并展示发布的图博

② 点击删除照片

③ 点击进入右边页面

④ 点击进入选择照片

⑤ 点击弹出输入标签窗口

⑥ 点击添加标签，添加的标签进入到“输入标签”右边

4.3.3 输入标签

页面序号逻辑：

① 常用标签：点击添加标签。常用标签是当前用户使用过的标签，按照用户使用次数由左到由排序，使用次数多靠前。最多显示10项。常用标签超过屏幕时，支持左右滑动。

② 推荐标签：编辑人工推荐的标签，支持左右滑动

③ 添加的标签区域：

• 点击“×”删除标签
• 键入字符后进行精准匹配，匹配项来源于已存在的标签，点击匹配项添加标签
• 支持键入字符后按空格或换行添加标签

④ 关闭弹窗

4.4 首页

首页默认tab为推荐

4.4.1 首页-推荐列表

首页-推荐下包含6个模块内容：顶部banner、文字图博、图片图博、热门标签推荐、用户推荐、活动推荐、图虫编辑推荐。

页面说明：

• 内容排序：顶部banner＋3个图博＋1个标签推荐＋3个图博＋1个用户推荐/活动推荐＋5个图博＋1个图虫编辑推荐＋（剩余均为图博）
• 默认显示10条推荐图博，顶部下拉更新10条推荐。底部上拉加载10条图博，加载的图博为之前默认的10条推荐图博（按之前的推荐次序展示）
• 最新更新的10条推荐图博显示标签分类（例如人像热门），其他底部上拉的图博显示图博发布时间
• 推荐规则：不详[略]

4.4.2 顶部banner&文字图博&图片图博

页面序号逻辑：

① 用户名、头像：点击进入用户主页4.9

② 标签/图博发布时间：顶部下拉最新更新的10条图博显示标签，点击进入图片标签主页4.4.14；其他显示发布时间。

• 发布时间5秒内显示“刚刚”
• 发布时间5-59秒显示“XX秒前”
• 发布时间1-59分钟显示“XX分前”
• 发布时间1-23小时显示“XX小时前”
• 发布时间1-9天显示“XX天前”
• 发布时间10天以上显示“年-月-日”，例如2017-07-09

③ 图片：最多显示图博详情中前两行图片。点击进入大图4.4.8。

图片排布规则：设有6张图，其宽高比分别为：a，b，c，d，e，f；系统设定宽高比例参数值介于K1和K2之间，下图为计算逻辑图，具体K1和K2值未知。

说明：后文中无特殊提及的地方图片排布都采用此方法

④ 喜欢、评论、分享、打赏图标

• 评论：点击评论进入图博详情页（下）4.4.9
• 打赏：点击打赏进入打赏页面4.4.13

⑤ 图博标题和图博内容：文字图博根据屏幕宽度显示3行图博内容，图片图博显示前2行

⑥ 更多操作

⑦ 照片数量：照片数量<=2行隐藏

⑧ 活动：点击进入活动标签主页4.4.14，若无活动则隐藏

⑨ 小头像：按时间次序最多显示最新点击喜欢的5人头像，点击进入用户主页4.9，无喜欢隐藏

⑩ 标签：用户发布图博时所打标签，点击进入标签主页4.4.14，无标签则隐藏

⑪ 喜欢人数：点击进入喜欢人列表页4.5，无喜欢隐藏

⑫ 评论个数：点击进入评论详情页图博详情页（下）4.4.9，无评论隐藏

页面说明：点击图博内其他任何位置进入图博详情页（上）4.4.9

4.4.3 热门标签推荐

页面序号逻辑：

① 图片：图片展示两行，图片为标签主页4.4.14中“最热”页签下置顶的前两行图片

页面说明：点击除订阅外任何位置进入标签主页4.4.14

4.4.4 用户推荐

页面序号逻辑：

①图片：显示3张图片，图片为该用户主页-图博的前三张图

②发现更多：点击进入热门摄影师页6.5

页面说明：

• 点击其他任何位置进入用户主页4.9
• 用户简介按屏幕宽度显示一行
• 默认显示5个推荐用户，支持左右滑动，滑动到最右显示“发现更多”
• 用户推荐规则：不详

4.4.5 活动推荐

页面序号逻辑：

①投稿数量＞=200，显示“已投稿XX“；投稿数量＜200，显示“火热报名中”

页面说明：

• 背景图：背景图为活动海报
• 点击任何位置进入活动标签主页4.14

4.4.6 首页-关注列表

页面说明：

• 内容来源：用户所关注人的图博
• 默认显示20条图博，顶部下拉加载最新图博，底部上拉继续加载20条图博..
• 排序规则：按照发布时间排序，新发布的在上

4.4.7 图虫编辑推荐

页面说明：编辑推荐是图虫官方运营的用户账号，其属性为用户。点击除“关注”外任何区域进入用户主页。

页面序号逻辑：

①图片：图片展示两行，图片为用户主页9中图博的前两行图片

4.4.8 大图

页面名称：大图

页面逻辑：

• 支持左右滑动更换当前图博内图片
• 显示“当前图片序号/总图片数”
• 大图上滑进入照片参数页
• 点击空白区域返回进入大图前的页面

页面名称：上滑后页面

页面逻辑：

• 举报：点击弹出actionsheet，按钮1：淫秽色情，按钮2：违法有害，按钮3：广告营销，按钮4：版权盗用。点击按钮后弹出toast”举报成功“，举报消息提交至编辑处审核。
• 点击空白区域返回进入大图前的页面

4.4.9 图片图博详情页

页面：图博详情页（上）

特殊说明：

• 显示图博发布时间
• 显示全部图片
• 显示全部图博内容
• 喜欢和分享与写评论写死到页面底部，写评论逻辑见图博详情页（下）

页面序号逻辑：

①文本显示规则

• 打赏人数=0：“还没人打赏，快来当第一个打赏的人吧”
• 1<=打赏人数(N)<=3：“用户A、用户B、用户C共3人打赏”，点击用户名进入用户主页4.9
• 打赏人数(N)>3：”用户A、用户B、用户C等共N人打赏”，点击用户名进入用户主页4.9

页面逻辑：除特殊说明外与4.4.2中图片图博页面逻辑相同

页面名称：图博详情页（下）

显示条件：评论数量>0，显示图博详情页（下）

页面序号逻辑：

① 评论数量

② 评论排序分为最热和最新，默认显示最热排序

• 最热排序规则：首先按照点赞数量排序；若点赞数量相同，按照评论的回复数量排序；若评论回复数量相同，按照时间顺序排列
• 最新排序规则：按照时间顺序排列

③ 回复层：点击用户名进入用户主页，点击其他区域进入回复详情弹框4.4.11；回复层评论按照时间次序排序，新发布的在下

④ 点赞：点赞后显示数字+1，图标变为红色；再次点击取消点赞，返回未点赞状态

⑤ 评论：点击弹出评论框

其他说明

• 评论时间：年-月-日时：分：秒，例如2017-08-07 16:20:03
• 点击评论条的其他任何位置打开评论弹框，给该层用户发表评论回复。发表的评论回复进入回复层
• 支持图博发布者删除评论，支持评论者删除自己评论
• 无评论回复时隐藏回复层

4.4.10 文字图博详情

页面说明：

• 图片：图片宽度自适应屏幕，点击进入大图4.4.8
• 图博内容为图片+文字穿插排列，具体以发布者编辑为准
• 其他功能逻辑与4.9图片图博相同

4.4.11 回复详情弹框

进入条件：回复数量＞0

页面序号逻辑：

① 回复数量：评论的回复数量

② 评论层

• 点击用户名、头像进入用户主页4.9
• 点击其他任何位置打开评论弹框，发表的回复进入回复层，回复者头像右边显示“回复者用户名”

③ 回复层

• 点击用户名、头像进入用户主页4.9
• 点击其他任何位置打开评论弹框，发表的回复进入回复层，回复者头像右边显示“xx 回复xx”，例如“张三回复李四”

④ 写评论：点击打开评论弹框，发表的回复进入回复层，回复者头像右边显示“回复者用户名”

其他说明：

• 回复时间：与评论时间规则相同。年-月-日时：分：秒，例如2017-08-07 16:20:03
• 回复排序：按照回复时间排序，最新发布的在下
• 支持当前用户删除自己的回复

4.4.12 用户列表页（关注&粉丝&喜欢人&优秀讲师列表）

页面说明：使用此页面的有关注列表页、粉丝列表页、喜欢人列表页，优秀讲师页

页面序号逻辑：

① 标题名称

• 关注列表页：”关注“
• 粉丝列表页：“粉丝”
• 喜欢人列表页：“N人喜欢”，N为点击喜欢的人数
• 优秀讲师页：“优秀讲师”

② 信息条

• 简介：最多显示33个字符
• 点击其他任何位置进入用户主页
• 默认显示20个，滑动到底部每次加载20个
• 排序方式：

a）优秀讲师：不详

b）关注、粉丝：按照用户名首字母排序

c）喜欢：按照点击喜欢时间排序，新点击在上

4.4.13 打赏

页面序号逻辑：

① 打赏金额：默认为5元，点击其他金额选中

② 输入打赏金额：输入后①中取消选中，输入金额限制到0.01

③ 微信支付：①未选择②未输入时点击弹出toast，toast内容“请选择或输入打赏金额”，选择或输入后点击调出微信支付接口

④ 文本规则：与图博详情页（上）4.4.9规则一致

4.4.14 图片标签主页&活动标签主页

页面序号逻辑：

① 图博数量/活动剩余天数/投稿数：每日24:00更新数量

② 摄影师：

• 默认显示10个用户，滑到底部每次加载10个
• 排序规则：不详
• 其他页面逻辑与4.4.12用户列表页相同

③ 最热/最新页签：排序规则见4.5

④ 文字图博缩略图

• 显示图博标题，截取图博内容
• 点击进入图博列表页4.5并定位到该图博

⑤ 图片图博缩略图

• 图片为图博中第一张图
• 左下角显示喜欢数量与评论数量
• 右上角显示图博内图片数量，图片数量=1则不显示此项
• 点击进入图博列表4.5，并定位到该图博

⑥ 点击打开发布图博4.3，标签中加入活动标签。

⑦ 活动介绍：点击弹出活动介绍页（略）

4.5. 图博列表页

以下页面采用图博列表页

页面

页面序号逻辑：

① 点击返回进入页面，并依照当前页面的图博定位到返回页的该图位置（见下图示）

② 页面名称：根据入口命名，名称见上表

4.6. 发现页面

4.6.1 发现页面

页面序号逻辑：

① 搜索：点击弹出搜索页4.6.2

② 焦点图

• 最多5张，支持左右滑动
• 焦点图分为2类。活动类：点击进入活动标签主页；图虫一周精选：点击进入图虫一周精选的图博列表页

③ 摄影课堂：点击进入摄影课堂页；影像频道：点击进入影响频道页；摄影师：点击进入热门摄影师页4.6.5

④ 热门活动

• 最多显示5个活动，支持左右滑动
• 滑到最右显示更多活动，点击进入活动列表页4.6.6
• 点击全部进入活动列表页

⑤ 标签推荐

• 标签名称tab支持左右滑动显示/隐藏标签
• 图片支持左右滑动更换标签
• 上滑后页签固定顶部（见下图）
• 点击图片进入图博列表页4.5

4.6.2 搜索页

页面序号逻辑：

• 点击关闭搜索页
• 点击进入图片标签主页或活动标签主页4.4.14
• 点击进入用户主页4.9

搜索逻辑：

• 标签：根据输入内容进行精准搜索，匹配标签/活动名，搜索结果右侧显示已有N组图或已有N投稿
• 用户：根据输入内容进行精准搜索，匹配用户名和简介

4.6.3 摄影课堂页

页面序号逻辑：

① 点击进入我的课堂页[略]

② 点击进入用户列表页4.4.12

③ 点击头像进入用户主页4.9

④ 教程

• 点击头像进入用户主页4.9
• 点击其他任何位置进入文字图博详情页4.4.10
• 阅读数：显示点击进入图博详情页的人次
• 封面图：图博详情内第一张图

4.6.4 影像频道

页面序号逻辑：

① 点击弹出更多操作

② 点击进入文字图博详情页，阅读数为点击进入详情页的人次

③ 图片图博

• 点击进入图片图博详情
• 图片：图博内前三张图
• 阅读数为点击进入详情页的人次

4.6.5 热门摄影师页

页面序号逻辑：

① 点击打开搜索页4.6.2

② 图片为用户主页-图博中最新的三张图；点击其他任何位置进入用户主页。

页面说明：

• 默认加载10个用户，每次下拉到底加载10个
• 推荐规则：不详

4.6.6 活动列表页

页面序号逻辑：

① 活动状态：”距截稿N天” “评奖中” “已截稿”，编辑可根据活动状况更改活动状态

4.7 消息

4.7.1 消息

页面序号逻辑：

① 点击进入通知列表页

② 点击进入粉丝列表页

③ 消息条

a）头像：点击进入用户主页

b）图片：图博内第一张图

c）动态中点击进入图博详情页（上）4.4.10，评论中点击进入回复详情页4.4.11

d）时间显示规则：

• 5秒内显示“刚刚”
• 5-59秒显示“XX秒前”
• 1-59分钟显示“XX分前”
• 1-23小时显示“XX小时前”
• 1-9天显示“XX天前”
• 10天以上显示“年-月-日”，例如2017-07-09

4.7.2 通知列表页

页面逻辑：

• 时间显示规则：“年-月-日”，例如2017-07-09
• 通知内容：

a）打赏通知：“【用户名】给你的作品【图博名称】（无名称显示“无标题”）打赏【XX】元”
点击进入图博详情页

b）编辑人工通知：内容为人工自由编辑

根据通知链接到其他页面

4.8 我

页面序号逻辑：

① 点击进入设置

② 点击弹出分享页

③ 封面图：点击更换封面图，默认为登录首页封面图

④ 点击更换头像，见4.8.6

⑤ 点击进入个人信息4.8.6

⑥ 点击关注进入关注列表页，点击粉丝进入粉丝列表页4.5

页面说明：

• 向上滑动：图博/喜欢/活动/更多页签固定至顶部

4.8.1 我-图博

页面说明：

• 图博缩略图：与4.4.14图片标签&活动标签主页中缩略图格式相同
• 排序规则：见4.5
• 点击图片进入图博列表页4.5

4.8.2 我-喜欢

页面说明：

此页面下图博为当前用户点击过喜欢的图博

• 图博缩略图：与4.4.14图片标签&活动标签主页中缩略图格式相同
• 排序规则：见4.5
• 点击图片进入图博列表页4.5

4.8.3 我-活动

页面说明：

• 活动名称：点击进入活动标签主页4.4.14
• 图博：点击进入图博详情页
• 时间显示规则：“年-月-日”，例如2017-07-09
• 去看看：点击进入活动列表页4.6.6

4.8.4 我-更多

页面序号逻辑：

① 点击进入我的打赏页

② 点击进入图片标签主页4.4.14

4.8.5 设置

页面逻辑：

用户名：点击进入个人信息4.8.6

清除缓存：

• 点击弹出actionsheet，按钮1文本为“清除缓存数据”
• 点击按钮1清除缓存

推送设置：点击打开推送设置页

a）关注、喜欢、评论、图虫推荐默认为选中状态

b）取消选中后不为用户发送该项的推送

• 打赏功能：默认选中状态，取消选中后，当前用户的图博中隐藏打赏按钮
• 关注作为首页：默认未选中状态，选中状态：进入app后首页的页签默认为关注
• Appstore评分：点击打开Appstore-图虫-评论页
• 分享给好友：点击弹出更多操作
• 意见反馈：点击打开意见反馈[略]
• 开屏视频：点击打开第一次启动app时视频
• 关于图虫：点击打开关于图虫页[略]
• 退出登录：点击退出当前账号并返回登录首页

4.8.6 个人信息

页面逻辑：

头像：点击弹出actionsheet。按钮1：拍摄照片，点击打开设备相机；按钮2：相册上传，点击打开本地相册。

用户名：若1月内更新过用户名，点击弹出toast“用户名一个月仅能修改一次”；若用户1个月内未更新过用户名，点击进入修改页。

输入用户名后，若用户名重复，弹出toast“用户名已被占用”；若用户名可用，更新用户名，返回个人信息页，弹出toast“更新成功”，记录用户名更新时间。

简介：点击进入简介修改页，最多输入140字。点击完成更新简介并返回个人信息页，弹出toast“更新成功”

居住地：点击进入省市选择页，选择省市后进入市区选择页，选择完成后返回个人信息页，弹出tosat“更新成功”

个人封面主页：点击打开本地相册，选择照片后上传，上传时弹出toast“正在上传”，上传封面后跳转到4.5我

4.9. 用户主页

页面说明：除特殊说明外，与4.8我页面逻辑相同

特殊说明：点击头像显示全屏；不可更换封面；关注操作；用户名不链接页面；更多-打赏下不可提现。

最后，虽说想要尽可能的把产品的逻辑都写清楚写完善，但毕竟不是图虫真正的产品经理，很多对于功能上的把握不到位，对于逻辑的梳理会有遗漏，有些地方只是流露于表面，也希望能够得到更多专业产品人士的批评指正。

 

作者：bubble，在读研究生，产品小白进阶中。

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