需求文档实战好友圈(共10页).docx

好友圈需求文档
产品名称
好友圈
涉及系统
APP
撰写人
Bin
编写日期
2030年1月1日

需求列表
模块
需求名称
需求概要
涉及平台
发布入
发布入
发好友圈的入
APP
发好友圈
选择图片/视频
选择图片/视频发布好友圈
APP
拍摄照片/视频
拍摄图片/视频发布好友圈
撰写文案
选择图片后撰写文案
好友圈查看
好友圈展示
好友圈列表，具体图文内容展示
APP
好友圈下拉刷新
好友圈下拉刷新需求

需求明细
2.1发布好友圈
2.11发布入
图 2. 111
图 2. 112
＜波或
图 2. 113

【需求说明】
用户进入“好友圈”页面在页面actionbar右侧有发布好友圈的入，点击“
0之后进入发圈流程。默认进入选择图片页面，同时用户可以选择拍摄功
能，进入拍摄模式，拍摄视频或照片。
2.12选择图片或视频

Q
U
©
©

©

_©
_©
,_©
国
_©
a
_©

0
_©

_©
__©

•原S3
图 2. 121

【需求说明】好友圈图片或视频来自号码 默认的相册，选取的逻辑遵循以下几个原则:
•支持（最少1,最多9张）图片。没选择图片不可发布好友圈（不支持发纯文字）
•支持发布1个时长W10秒的视频。
•图片可从相册选择，也支持自己拍摄。
•自己拍摄界面可切换前后置摄像头，自己拍摄界面点击拍照，长按拍摄视频。
【交互说明】（具体效果参考原型）
•如果用户点击图片右上角的“"”按钮，""”按钮变为数字。数字表明当前图片是第几张被选中的图片，数字被再次点击之后，取消选中该图片，其他选中图片上的数字做相应更新（case，用户选中了 15, 5张图片，用户点击数字“3”，“3”变成“ "”，“4”和“5”分别减1，变更为“3”和“4”）请参看微信发朋友圈选图片的效果。
•用户在图片列表点击图片（“"”以外的区域）进入该图片的预览模式，
默认选中原图，可以取消选中原图的选项。
•如果用户选中的是图片，视频则无法被选中（只能发图片或者视频，不能同时发图片和视频）
•如果用户点击的视频时长＞10秒，则吐司提示：视频长度不可超过10秒
•图片或视频选中完成之后，点击“取消”返回好友圈列表，点击“完成”进入文案撰写页面
2.13拍摄图片或视频

图片或视频
钮把眼「垸ISIS源

▼

图 2. 131
图 2. 132
图 2. 133
【交互说明】

•用户在“选择图片”页面，点击进入图片/视频拍摄界面，提示“轻点拍照，长按拍视频”用户单击拍摄按钮，则拍摄图片，进入上方右
图界面。
•用户长按拍摄按钮，提示语“轻点拍照，长按拍视频”隐藏，进入拍摄视频状态，同事圆形进度条开始走动，整个圆环走完的时间是10秒（视频最大时长）
•用户在10秒内放手则视频停止拍摄，进入视频预览页上方右图所示，拍摄超过30秒，自动停止拍摄，进入视频预览页上方右图所示。
•图片/视频预览页，有两个操作按钮，“返回”和“选中”，用户点击“返回”则回到拍摄界面。点击“选中”则进入好友圈撰写界面。
2.14撰写文案
【需求说明】
用户在选择完图片/视频之后，会进入到撰写文案的页面，用户在该页面进行
文案撰写，添
加图片，删除图片，查看帮助文档，取消发布，发布等操作

•用户可以在文本框里输入数字，汉字，英文字符，特殊字符算一个字，Emoji表情。总字数要求在1200个字（数字，汉字，英文字符，特殊字符算一个字，Emoji表情算2个字）
•字数为空的时候，“发布”按钮为灰色不可点击，有字数之后，“发布”按钮会绿色可点击。字数超过200个之后，继续输入无效，检测到输入之后提示：最多可输入200个字
•用户点击“如何撰写优秀的好友圈？ ”进入陆页面，这个H5页面是官方提供的好友圈撰写建议
•发布的内容如果是视频，则无法继续添加视频或图片，发布的内容如果是图片，少于9张图片之前可以继续添加图片，知道9张则无法继续添加
（如上方左图和中图所示）
•在本页面，用户长按图片，页面底部弹出“拖动到此处删除”用户将图片拖动到红色区域，则对应的图片自动删除并关闭“拖动到此处删除”的按钮
•好友圈文案编辑过程，需要放弃编辑点击“取消”显示取消对话框，让用户再次确认是否放弃编辑
•用户在编辑完文案点击“发布”之后跳转到用户主页（1期先跳转到商品详情页好友圈列表）
•用户发布好友圈后，在详情页“好友圈我的”列表里面显示
2.3好友圈查
好友圈显示
【需求说明】
图 2. 312

•好友圈在商品详情页显示，商品详情页的好友圈有三个列表“精选、我的、收藏”
精选：包含后台审核设置为“精选”和“精选且置顶”的好友圈（其中被设置为“精选且置顶”的好友圈为前端“推荐”列表的好友圈，其他好友圈为“最新”好友圈）
我的：店主自己撰写的所有好友圈
收藏：店主自己收藏的好友圈
•好友圈以“图+文”或“视频+文”的形式显示。如上方左图所示。
.文”的数字。点击“全文”则显示所有文案，同时出现“收起”的按钮。文案支持Emoji表情。允许用户换行。
•图片/视频显示规则：假定
好友圈图片原始尺寸的宽度和高度分别为_和y
图片最大显示区域的面积定义成a_a（由UI确定具体数值是个常量）
图片之间的间隔为b
图片的实际宽度为
图片的实际高度为y
图片显示宽度为w（所求的值）
图片显示高度为h（所求的值）
图片张数/行数
显示样式示例
图片宽度/图片高度
假定一张图片情况的图片区域为a1（a1的值根据UI提供）
1. 如果上传图片是宽图（_>y）么图片的宽度w=a1图片的长度为h=（y/_）_a1
2. 如果上传图片是长图（_<y）么图片的宽度w=（_/y）_a1图片的高度h=a1
3. 如果上传图片是方图（_=y）么图片的宽和高w=h=a1
，那
，那
，那

皿一景素啪戒市.St房字数地制底2001亨虽
少g不少T1时卓 压素纲Era i知碇=
当惊整也.侦管号皂示，可皿震开可以新
陆.古捋匚〒一心珈…A
11M ± Q* 230
图 2.315

假定一张图片情况的图片区域为a2
（a2=a1）
w=h=（a2b）/2
图片显示方形中段（如下方图
3.3191 和图 3.3192 所示）
图片张数/行数
显示样式示例
图片宽度/图片高度
3张
按1J亍显示
4张
按2行显示
图 2.316
事亨就菁％kPTio个字・iriFM.E-11.遗卫由行开想3i龄心.以1戏与更长 可以屣开,可湎田立HKmQj刑..&
图 2.315
WTElHdEr』立左
tfHFFO#*：- . L'aAIWX^ =TUMFi
假定一张图片情况的图片区域为a3
（a3由UI具体确定）
w=h=（a32b）/3
图片显示方形中段（如下方图
3.3191 和图 3.3192 所示）
假定一张图片情况的图片区域为a2
（a2=a1）
w=h=（a2b）/2
图片显示方形中段（如下方图
3.3191 和图 3.3192 所示）
5张，6张按2行显示
v瞑做
夕的诅多的16:5^3
戏一4时的Hm序#1碰任网叶字ia
Nr瑜eg mk*臭.且曲i厅开
假定一张图片情况的图片区域为a3
（a3由UI具体确定）
w=h=（a32b）/3
图片显示方形中段（如下方图
3.3191 和图 3.3192 所示）
7张，8张，9张按3行显示
图 2.318
MLM4 沁
:El切KtW 册 A 曰可!M .瞄博击开
. Ljm认 可烟哥.可以折
S-iaim
假定一张图片情况的图片区域为a3
（a3由UI具体确定）
w=h=（a32b）/3
图片显示方形中段（如下方图
3.3191 和图 3.3192 所示）

图片张数/行数
显示样式示例
图片宽度/图片高度
itc55i：42
1个视频
按1J亍显示
视频区域为a1（a1的值根据UI提供）
1. 如果上传视频是宽的（_>y），那
么视频的显示宽度w=a1
视频的显示长度为h=（y/_）_a1
2. 如果上传视频是长的（—<y），那
么视频的宽度w=（_/y）_a1
视频的高度h=a1
3. 如果上传视频是方的（—二y），那
么视频的宽和高w=h=a1

•具体的数据请见UI标注•好友圈列表点击图片，进入大图模式。如图3.312所示
•好友圈列表点击视频，进入视频播放模式。如图3.313所示
•下图所示，图3.3191和图3.3192为图片以正方形形式预览的读取区域
图 2.3191
图 2.3192

下拉刷新
图 2. 321
不*于】1＞亍# EJ?2^S 皿切
户髡4网. WW<En<阳以所.FT&ift
£. ssf r»- e
0
.免广枷
踏LEL坦 LtS5s42
图 2.322
图 2.323

【交互说明】
操作
触发动画
触发请求
下拉时
① 页面跟着下拉（如上方图2.322所示）
② 加载图标显示（如上方图2.323所示）
无
下拉结束时
① 加载图标开始转动
② 转动速度240°/s
③ 数据加载结束加载图标隐藏
请求刷新好友圈列表

End