豆瓣APP产品PRD文档(倒推)

豆瓣APP的上线已经有很长周期,版本更迭数次,在功能和交互界面上都有了很大改变。这次通过倒推的形式制作PRD文档,一方面是加强对阅读类app的产品理解,另一方面也可加强个人在产品细节逻辑上的把控。

注:豆瓣小组页面与前几页面功能有很多重复,本身又带有小组社区式的讨论模块,交互方面较为繁琐,因此在本文当中不做具体说明,后续再专门补足。

目录大纲

一.基础描述

1.1 PRD输出环境

1.2 产品介绍

1.3 文档名词说明

二.产品结构

2.1 产品结构图

三.基础交互

3.1 页面交互

3.2 键盘及搜索页面

3.3 截图

3.4 聊天

3.5 功能限制

3.6 常用icon

四.详细产品说明

4.1欢迎页

4.1.1 初次登陆

4.1.2 常规登陆

4.2 登陆/注册/分类

4.2.1 登录页

4.2.2 注册页

4.2.3 兴趣选择页

4.3 首页

4.3.1 热推图文

4.3.2 豆瓣时间&集市&豆瓣书店&豆瓣视频

4.3.3 广告推送

4.4 书影音

4.4.1 电影&电视&读书&音乐

4.4.2 同城

4.4.3 查找页

4.5 广播

4.5.1 动态浏览

4.5.2 广播发布

4.6 内容页

4.6.1 原创内容页

4.6.2 信息内容页

4.7 我的

4.7.1 我的主页

4.7.2个人主页

4.7.3 非个人主页

一.PRD基础描述

1.1 PRD输出环境

1.2 产品介绍

豆瓣(douban)是一个社区网站。网站由杨勃(网名“阿北”)[1]创立于2005年3月6日。该网站以书影音起家,提供关于书籍、电影、音乐等作品的信息,无论描述还是评论都由用户提供(User-generated content,UGC),是Web 2.0网站中具有特色的一个网站。网站还提供书影音推荐、线下同城活动、小组话题交流等多种服务功能,它更像一个集品味系统(读书、电影、音乐)、表达系统(我读、我看、我听)和交流系统(同城、小组、友邻)于一体的创新网络服务,一直致力于帮助都市人群发现生活中有用的事物。

1.3 文档名词说明

二.产品结构

2.1 产品结构图


产品结构图

三.基础交互

3.1 页面交互

3.2 键盘及搜索页面

点击输入框时弹出键盘(用户名、密码、搜索栏等)

点击搜索栏另外跳出搜索历史、热门搜索条目,搜索历史可手动消除。

搜索栏可选定类别,如电影电视、图书、游戏等。

3.3 截图

任意界面截图后下方弹出底部弹窗,分享页面包括微信、朋友圈、QQ、微博。

3.4 聊天

显示聊天记录,若无聊天记录则显示没有聊天记录。

右上角添加私聊或群聊,选定后弹出好友名单。

3.5 功能限制

登陆状态下可进行所有操作

未登录状态下选择导航栏中发布广播、聊天、我的,或进行喜欢、评论、打赏、关注用户、参加活动、订阅标签的操作,将以上操作跳转到登录页面4.2.1

3.6 常用功能


“更多”

分为两类个人内容和非个人内容

共有类

按钮一:分享

点击分享,弹出底部弹窗,上部为分享平台,包括微信、朋友圈、QQ、QQ空间、微博;下部为其他操作,分享到聊天、举报、复制链接。点击聊天分享到聊天,则跳转至聊天列表;点击举报,则进入“举报”功能;点击复制链接,则弹出toast,显示复制成功。

按钮二:复制广播内容

点击复制广播内容,弹出toast,显示复制成功。

非共有类

按钮三:举报(非个人内容)

弹出二级底部弹窗,按钮一为广告或垃圾信息,按钮二为色情、淫秽或低俗内容,按钮三为激进时政或意识形态话题,按钮四为其他原因。其中点击按钮四会跳转至原因输入页面,其他按钮直接完成投诉,并由toast提示。

按钮四:编辑(个人内容)

点击跳转至内容编辑界面。

按钮五:删除(个人内容)

点击后跳出alert,确认即删除内容,取消则返回原页面。

四.详细产品说明

4.1欢迎页

4.1.1 初次登陆

初次登陆后会载入一段5秒动画,后出现按钮“立即使用”,点击后进入到兴趣分类选择页面

4.1.2 常规登陆

常规登陆后会有3秒图片式热门宣传,内容为产品提供,与个人关注无关。结束后自动进入首页。

4.2 登陆/注册/分类选择

4.2.1登录页

1.点击输入注册手机号/邮箱,手机号/邮箱即为默认用户名,唯一且不可重复。

密码需不少于4位。

单机登录按钮进行信息监测。错误信息通过toast弹出提示包括(下同):

1)用户名与密码不符。(用户名及密码填写规范但不符)

2)密码过短(用户名栏填写格式正确,密码填写少于4位)

3)请填写密码(用户名栏填写格式正确,密码栏空缺)

4)请填写用户名(用户名栏为空)

2.点击注册豆瓣跳转到注册页。

点击忘记密码跳转至我忘记密码页。(输入用户名获取验证码,若为手机则发送动态码,若为邮箱则发送验证邮件,图略)

3.点击微信登录跳转至微信内授权页面,点击微博登录跳转至微博内授权页面。

4.2.2注册页

1.手机号/邮箱格式同登录页;密码不少于6位;昵称唯一不可重复。

2.点击下一步监测

1)请填写手机号或邮箱(手机号或邮箱错误格式错误)

2)密码过短(密码位数小于6位);请填写密码(密码栏空)

3)昵称重复(昵称重复)

3.用户使用协议可点击阅读。

1.点击获取验证码,手机或邮箱接收。

2.点击完成监测验证码正误,若错误则提示验证码有误。完成通过跳转至首页。

4.2.3兴趣选择页


1.标题栏为栏目分类,包括推荐,电视,电影,读书等,会随版本迭代有所变动。

2.标签项为热门内容题目,定期更新。点击标签后变色为选中,再次点击为取消。

每一栏目下选中标签数不大于5。

3.进入豆瓣按钮在末端显示,未到达末端时,为文字链接“选好专题了吗?进入豆瓣”

点击链接跳转至末端进入按钮。

点击进入豆瓣即跳转至首页。

4.3 首页

4.3.1热门图文

1.热门图文由所属专题、内容题目、内容开头、作者、配图、更多操作6项组成。点击区域内任一处即可跳转至内容页面4.6。上拉刷新内容,弹出tosat提示刷新量;底部下拉加载。

1)所属专题由“专题名称·细分目标”组成,如“音乐·朴树”。

若为个人关注用户发布个人内容,所属专题项将取消。

2)内容题目为黑体加粗,在内容被查看后字体变为浅灰色。

2.此处“更多操作”按钮为特例,点击跳出下拉菜单,显示“不感兴趣”。点击“不感兴趣”则删除词条内容,内容标签及专题将被发送至豆瓣后台数据库,今后将少显示类似内容。

4.3.2豆瓣时间&市集&豆瓣书店&豆瓣视频

3.栏目列表分为4个专题项,点击相应的图标进入相关专题。

豆瓣时间:1)点击滚动栏或内容栏即跳转到相应内容页面,内容由编辑制作,格式有差异,此处略

2)点击我的豆瓣时间跳转后,显示我的订阅、我的下载列表,若无内容则显示暂无。豆瓣时间购买或订阅后,自动将信息显示在我的豆瓣时间中。

豆瓣集市:1)点击滚动栏或内容栏即跳转到相应内容页面,内容由编辑制作,格式有差异,此处略

2)点击购物车与我的市集分别跳转至相应列表,同上。

3)新品发售栏固定为两项,由编辑推送。

4)推荐话题为6栏,不可继续加载新内容。

豆瓣书店:1)点击滚动栏或内容栏即跳转到相应内容页面,内容由编辑制作,格式有差异,此处略。

2)点击活动、新书、书单选项,下方显示相关内容,格式相同。活动、新书固定为20项内容,书单内容小于20项。均不可继续加载新内容。

3)点击购物车图标跳转至购物车内容,若无购物则显示“暂无”

豆瓣视频:目前内容仅限于文案及视频连接,可直接点击观看。目前栏目为《瓣嘴》、《如是》,交互界面略。

4.3.3广告推送

4.广告出现顺序固定:3图文+1广告+5图文+1广告+6图文+1广告+12图文+1广告。后续顺序随机,但不少于5个图文信息相隔。

5.广告内容可点击右下角广告按钮,在菜单中点击不感兴趣以删除。

4.4书影音

书影音分为6模块,电影、电视、读书、同城、音乐、市集。其中,电影、电视、读书、音乐页面结构相似;同城为全图文列表;市集详见4.3.2

4.4.1电影&电视&读书&音乐

内容模块形式

1)今日推荐/今日更新/作品榜及资讯(横向滚动/罗列)

2)内容列表(横向滚动/罗列)

3)你可能感兴趣(纵向罗列)(每4个内容间插入一片评论文章)

你可能感兴趣评论文章

书影音交互页

1.列表分为六项,点击任一项后,选中项字体加粗,下滑杠划至其下方,下方页面跳转至相应页面。

2.点击“查找”按钮则跳转至查找页4.4.3,点击“我的”按钮跳转至个人列表(略)

3.内容列表及今日更新/作品榜/资讯/广告交替排版,根据不同主题模块顺序不一,暂无规律要求。

点击任意其中内容即跳转至相应内容页面4.6

4.你可能感兴趣中,每4个内容间插入一片评论文章,点击任意内容即跳转至相应内容页面4.6

4.4.2同城页面

1.点击所在城市,跳转至选择标签页面。标签选择后自动跳转回同城页面,当前城市后显示标签选择内容,内容文字为绿色。

点击类型、时间、地点,跳转至筛选页面,类同于4.4.3。

2.点击任意其中内容即跳转至相应内容页面4.6。

4.4.3筛选页

1.点击筛选条件,每条条件项内只可选中一条条件,可左右滑动。初始选中条件均为“全部”,选中条件变绿色。

2.点击“最受欢迎”、“筛选”,页码自动移动至该两栏置顶,并弹出相应相应下拉菜单底部页面变暗。(视觉效果类似于顶部弹窗。)

“最受欢迎”菜单:最受欢迎、评分最高、最新(不可多选)

“筛选菜单”:可播放、我没看过的、评分区间。(可多重选择)

选择相应条件后,直接完成检索跳转,下次进入时被选条件已变为绿色。

3.解锁结果为内容列表形式,点击任意其中内容即跳转至相应内容页面4.6。

4.5广播

4.5.1 动态浏览

1.分享条置顶于页面内。

点击分享条内非照片图标区域,跳转至纯文字广播发布。

点击分享条内照片图标区域,跳转至图片选择页面。(详见4.5.2)

2.内容信息来源于个人主动关注的用户发生的动态,包括转播、原创广播、日记、评论、喜欢、建立豆列、加入小组等。

点击用户头像跳转至该用户主页。

点击图片会使图片全屏,若是动态图则启动动态图载入,循环播放。再次点击后恢复。

赞、评论、详见3.6。转播(转发)详见4.5.2

点击“更多操作”详见3.6

3.话题推荐为横向列表,可左右拖动查看。右侧拖动至末端后,继续持续拖动会逐渐形成圆弧,显示文字“更多”,松开后恢复原状。继续拖动,圆弧达到一定弧度(个人猜测此处为后台自定义,话题栏与推荐栏弧度并不相同),“更多”文字变为“释放查看”,此时松开直接跳转至话题广场页面(话题小组列表,此处略)。

4.用户推荐功能及交互类同于话题推荐。

4.5.2 广播发布

广播(主动原创发布)

1.点击取消回到广播页面。

没有输入内容发布为不可用(灰色)。

输入内容后后点击发布,页面跳转至广播页面,页面自动刷新。

2.文字内容限制140自以内,序号三出有计数。

转播内容一栏在文字广播时不存在,在图片广播中替换为被选定图片,数量不多于9张,可左右拖拽。

3.点击@,跳转出主动关注列表,每次可选择一人。显示为“@某用户昵称”。

点击#,输入光标出插入“#插入话题#”#间编辑完成发布后,显示为绿色,可关联到目标话题。若为不存在话题,亦可发布,但点击时则弹出toast,显示不可用。

纯文字文本广播在3处多出“照相”图标按钮,点击则进入图片选择页面,选定后进入图片广播流程。

转播(转发他人广播内容)

页面逻辑基本相同,不同点有:

1)存在转播内容栏,没有“照相”图标。不可同时发布原创图片

2)发布后在文字内容下会显示转发内容概要,若有内容链接则显示块状链接。

4.6内容页

4.6.1原创内容页

注:若为评论类文章,标题顶部有被评论对象信息栏,点击可跳转至相应信息页4.6.2,此处略。

1.点击相应图标完成相应交互,具体详见3.6。最右侧为转发按钮,点击弹出底部弹窗,功能等同于“更多操作”。

2.点击头像或作者信息则跳转至作者个人主页4.7.2。

3.内容正文包括图文或视频连接,不可直接插入视频或音乐,文章结构由作者编辑。

4.显示作者简介,提供关注按钮,具体交互详见3.6

5.评论区显示所有评论,点击任意评论内容或点击写评论则弹出键盘和评论输入行,提交评论后自动刷新评论区。

6.提供作者热门内容关联,热门判定要素为浏览量,喜欢量,转发量。点击任意关联即可跳转至相应原创内容页面。

4.6.2信息内容页

1.显示内容图片,点击图片则生成全屏图,再次点击恢复原页。

背景页为纯色背景,色调以图片主色调为准,自动识别生成。点击背景页不产生交互。

2.内容相关信息栏为文字描述,包括内容标题、参与人员、主题类型。不产生交互。

豆瓣评分栏显示所有评分数据的均值,一位小数。点击豆瓣评分栏弹出评分数据页,显示1星至5星各评分级人数,下方显示个人关注列表中,参与此内容评分用户的评分情况,如***、**评价为3星等。

3.点击想看或看过,跳转至相应页面,如图。

注:

电视三按钮为:想看,在看,看过

读书三按钮为:想读,在读,读过

电影两按钮为:想看,看过

在看与看过页面相同此处略。

想看,在看,看过三项点击选择,也可滑动页面跳转。下方信息跟随标题相应变更。

标签项选择不大于5个,选中变色,再次选中恢复

评分已1整星为最小单位,评分后星星内填充为黄色。满星时,星星图标呈现闪烁效果。

豆瓣广播与新浪微博为可选推广项,默认选中豆瓣广播。选中变为绿色,未选中为灰色。

选中项将再点击确定后推送信息。

4.点击4链接,跳转至购买渠道页面,渠道页面为购物列表,有相应引流链接,提供直接付费购买服务。

5.内容简介以纯文本形式表现,内容多时进行折叠,点击展开按钮浏览全文。

6.电视,电影,音乐提供演员、音乐人图片,点击点击进入人物内容页,内容分为:

人物图集    个人简介     代表作品      获奖情况      相关影人。页面形式与信息内容页类同。

7.提供照片和视频,可左右滑动。点击图片则放大全屏观看,双击图片放大。点击视频则全屏播放视频。

8.评论区详见4.6.1,讨论区为相关小组及话题推荐。

4.7我的

4.7.1我的主页

1.背景页及头像内容与个人主页4.7.2中一致,点击关注数,被关注数两按钮外区域跳转至个人主页4.7.2。

2.点击关注数、被关注数跳转至相应用户列表。

3.点击提示栏跳转至提示栏列表。

若有提示信息,则有小红点出现,红内显示提示数量。1~99条显示数字,多于99条显示99+。

若无提示信息则显示暂无提示信息,列表中亦显示暂无信息。

4.分类列表内容分为13项,具体内容参照2.1。

点击某一项图标跳转至相应页面,此处略。

4.7.2个人主页

1.点击头像区域,全屏放大头像图片(若没有则放大初始图),弹出底部弹窗,三个按钮分别为:手机相册,相机,取消。点击手机相册进入手机相册推按选择,点击相机进入拍照模式(若未开通相机访问则跳出alert,确认打开)。点击取消回到个人主页。

点击封面或按钮封面,皆可进入封面编辑,页面逻辑与头像相同。

2.点击编辑个人主页,弹出个人内容编辑页面,内容为个人信息编辑,此处略。

3.点击个人背书后的关联按钮,跳转至个人背书编辑页,背景为封面背景

4.点击5项按钮分别跳转至相应分类列表,列表为纵向,以时间就近排序分割。

5.关注按钮处,在关注数后显示5个热门关注人头像。点击关注和被关注按钮跳转至相对列表。

6.显示所有个人动态,页面逻辑与4.5广播浏览页相同。

4.7.3 非个人主页

非个人主页与个人主页基本相同,差别在于封面、昵称、个人背书等个人信息编辑功能不能使用。

写在最后

通过本次PRD文档的撰写,我发现在文档梳理制作过程中会出现许多无法直接注意到的漏洞,尤其是在产品内容模块繁多且互有交集时,单纯的图文文档表述很难完全表达需求及功能。因此在实际工作过程中,对于核心流程的高仿真交互模型制作很有必要。并且,在文档的书写中,个人认为在大页面线框图的背景上逐一添加文字说明可以更直观表现产品核心流程。

细节方面,我希望可以细分每一项功能,就各项功能页制作分部详尽PRD说明,以求精密细节,减少纰漏。

推荐阅读更多精彩内容