六、页面逻辑(用户浏览笔记为主逻辑)
七、页面详细功能说明
7.1启动页
7.2登陆/注册页
7.3“发现”页面
7.5“购买”页面
八、测试异常页面及突发状况
8.1网络异常
8.3数据丢失
九、问题探索&改进意见
十、总结
1.2PRD输出环境
伴随着网络购物时代的兴起,更多的消费者趋向于海外市场购物,但一些外界因素影响海外购物:
(1)海外购物缺少受信任的专属平台;
(4)海外购物费时费力费钱。
(3)热衷于化妆品、保健品类商品的消费者;
(4)海外购物追求货真价实的消费者;
(5)追求海外购物便捷快速的消费方式。
(右击,在新标签页中打开即可查看)
四、全面说明
(1)点击手机号输入框时面底部弹出数字键盘;
4.3面交互说明
(1)说明信息、提示/警告信息、更新信息
(2)底部、左侧弹窗
4.4面异常
4.5面间切换交互方式
在当前页面左边缘处用右划手势快速返回之前页面
五、用户操作主流程(笔记+购物)
六、面逻辑
七、面详细功能说明
当进入到小红书APP后,无论是手机是否连接到网络,页面背景会反复播放一段宣传片的小视频。
(1)已经连接网络
页面逻辑:
在已经连接网络的情况下,启动app直接进入到视频页面;
如果用户不操作页面,视频也不会受影响一直播放视频,也不会产生其他提示信息;
在未连接网络的状态下,app直接进入到异常提醒页面,并提醒重新加载页面。
提示信息一直显示网络不给力稍后再试,即使是网络设置没有连接网络,这样的提示容易误解为网络速度满造成的,没有给用户一个好的引导。
页面逻辑内容:
用户输入手机号码后,点击确定键接收6位数验证码,页面即跳转到输入验证码页面,并开始倒计时60秒,60秒后倒计时处变为重新发送按钮;
若60秒内没有收到验证码,就等60秒后“重新发送”出现后点击后即可重新获得新的验证码;
用户在收到验证码3分钟内输入验证码才有效;
页面交互说明:
输入好手机号码后点击确定按钮,页面跳转到输入验证码页面并开始60秒倒计时,键盘自动跳出,用户自己调到数字键盘;
60秒倒计时结束后,重新发送字样变为蓝色,即可点击重新获得新的验证码;
在小红书APP中,如果用户想要用浏览功能,采用的是从上向下浏览的方式,如果用户想要使用某项功能的时候,是从左侧和右侧来寻找的。因此,介绍某一页面的时候采用从上至下的方式,介绍某些功能时采用从左至右的方式。
(1)页面名称:“发现”笔记页
(2)页面入口:启动小红书app直接进入到“发现”页
(3)页面结构
浏览内容切换区
笔记、商品和用户搜索框
用户切换标签区
查看笔记内容入口
查看笔记用户的其他内容入口
笔记受欢迎程度
关于用户个人的所有操作内容都聚集在此
上传笔记的入口
查看所有消息入口
查看购物车商品入口
(4)逻辑内容详细说明
红色横线向右移动,内容页面从右向左移动;
快速点击两次标题,内容页面可以快速返回到页定;
快速点击两次标题,标签行下方出现红色圆圈旋转标识正在更新内容,有新内容被更新时有提示信息出现在标签行下方停留1秒钟然后消失。
2)笔记、商品和用户搜索框:点击搜索框自动跳转到搜索页面。
历史记录永远只显示一个最近的搜索记录,字数长度限制在20超出部分用“…”代替;
点击垃圾桶图标可以删除历史记录;
搜索完成后,页面会跳转到笔记、商品、用户搜索结果页面;
搜索结果“商品”部分属于购物商品列表,可以按照不同的方式排序商品、筛选商品;
搜索结果“用户”部分是所有用户名称包含搜索关键词的用户列表。
“发现”页面下点击笔记、商品、用户搜索框,立即进入到搜索页面,字母键盘从底端弹出;
搜索框中有红色光标不断出现消失,搜索框中有推荐搜索文字,呈现灰色;当输入文字时,推荐文字消失;
当预测框中出现要搜索的关键词时,点击关键词,键盘从底端弹回,页面跳转到搜索结果页面,带有#的标签从右侧弹出;
任意标签可以点击选择,也可以通过左右滑动查看后面的标签,点击不同的内容;
搜索结果默认笔记列表优先显示,向上滑动屏幕可以查看更多的笔记列表内容,点击某一个笔记图片,笔记页从右侧弹出;
点击“综合排序”文本,综合排序这一行和下方所有内容一起向上移动,覆盖上搜索框、“全部”行、#标签行,然后页面颜色变暗,综合排序下拉菜单从顶部向下弹出可供选择;选择完毕后,页面中心红色圆圈旋转更新内容,消失后内容更新结束;
点击“筛选”文本,效果与点击“综合排序”文本相似,但是筛选菜单从页面右侧向左侧弹出,选定选项后,这个选项方块颜色编程深色并且右侧带有关闭的“”,同时菜单中心位置红色圆圈旋转标识正在更新内容,同时其他选项随之消失。
在“发现”页面,点击列表中的图片、图片下方的标题或标题的白色背景部分都可以进入笔记的具体内容页面;
点击图片下方的心形图标可以不用浏览笔记直接给用户点赞;
点击图片下方的用户名称或用户头像,进入到这个发布者的个人空间,可以看到该用户发表的笔记和收藏的笔记;
在点击图片想要进入笔记页面时,图片处出现一个浅灰色圆形,像是水滴滴入水中的特效1秒钟后进入到笔记页面;点击图片下标题处还有白色区域都有同样的特效;
浏览笔记列表更多的内容,在图片任意区域向上滑动页面,下面更多内容就不断加载;
进入笔记页面内容没有及时加载出来时,页面呈现白色中间位置有红色圆圈在转动加载;
点击图片左上方向左箭头,页面向右弹出,回到上一页面;
点击笔记页面底部的心形,图标缩小在放大时变为红色,赞的数量增加1;点击红色心形也可以取消点赞;
点击收藏图标,整个页面变暗1秒钟,从底部弹出选择专辑菜单。
4)查看笔记用户的其他内容入口:无论是在“发现”页还是笔记页还是在其他页面,只要有用户头像和用户名称存在的页面,只要点击头像和用户名称文本,页面都直接跳转到用户的个人空间;个人空间可以看到用户的更多信息还有更多关于该用户发表的其他笔记。
点击头像或名称文本位置,现页面直接跳转到用户的个人空间页面;
继续向上互动页面,不断加载更多内容;
点击左上角向左按钮,页面向右弹出退回到上一页面。
5)笔记受欢迎程度:心形旁边的数字代表有多少小伙伴喜欢这个笔记,用户可以直接点击图标给笔记点赞,进入到笔记页面底部也有这个图标,浏览过笔记后也可以再点赞。
点击心形图标或数字位置,产生浅灰色圆圈发达特效,同时图标先缩小再变成红色的心形放大,周围弹出一个红色圆圈随之放大然后立即消失;
点击红色图标取消点赞,点击后浅灰色圆圈放大淡出,同时红色心形缩小,灰色边框心形有小变大。
点击页面左上角个人头像,和个人有关的选项列表菜单被打开;
点击每一个选项,新的页面直接加载出来。
点击页面左上角个人头像,菜单从页面左边向右弹出,菜单占整个页面的2/3,剩余1/3还是显示主页内容,在菜单弹出同时1/3页面变暗;
列表中哪个方面有新信息通知,会在相应标题右侧有一个红色小红点;
点击第二部分选项,加载页面,标题下方会产生红色横线从左至右快速变长,页面内容出现时,横线消失;
点击二级页面左上角的箭头,页面向右弹出回到上级页面;或者从页面左侧边缘向右滑动页面回到上级页面,同时菜单没有收回还停留在那。
点击照相机图标产生三个选项:上传图片、上传视频、编辑最近的草稿,图片和视频可以直接拍摄或从手机相册中选择;
最多上传9张图片,选择图片后可以给图片装修,加滤镜、美化图片、增加标贴纸;
美化图片后进入新页面编辑笔记文本部分,加标题、说说心得、@好友、加#话题、增加地点、另外发布在哪个第三方平台中;
在编辑文本环节中可以选择发布笔记或存入草稿箱;
选择上传视频,可以裁剪视频片段,然后加贴纸和文字;
然后给视频编辑笔记文本与图片编辑步骤相同;
发布成功后,刷新“发现”页面可以看到自己的笔记;
如果想要删除笔记可以回到第7项菜单中找到个人空间删除笔记。
在“发现”页面点击右上角照相机图标,屏幕变暗,底部弹出小菜单选择上传图片还是视频,点击小菜单以外的地方可以退出上传,小菜单直接消失回到原页面;
点击图片图标,页面直接显示手机相册照片列表,点击列表中右上角方块带有照相机图标,直接进入照相机状态;点击照片列表照片方块中右上角的对号,对号变红代表图片被选中,点击照片直接页面右侧弹出照片原图预览,最多选择9张照片;
选中照片后点击页面右上角“继续”按钮,下级页面右侧弹出进入到编辑照片;
“滤镜库”中选择不同效果,小图片效果内选中边框变红,上图不会有变化;
点击“美化照片”文本,文本变成黑色,“滤镜库”文本变成灰色,美化照片中每一个选项被点击后,小菜单直接跳转显示可调式状态;
如果选择上传视频,点击视频图标,面从右侧撤出显示镜头拍摄状态;
选定视频后,点击右上角对号图标,面中央弹出提示信息对话框显示
视频合成中1秒钟消失后,跳转到文本编辑面,编辑好文本后可以寄点击发布按钮直接发送,跳转到“发现”面显示提示信息对话框发布成功,然后页面自动刷新内容,页面笔记部分上部显示提示信息对话框显示多少个新笔记;
点击“存草稿”按钮面变暗同时中央弹出说明信息对话框问是否保存笔记至草稿箱,点击确定按钮后面向右弹出回到“发现”面。
8)查看所有消息入口:在三个主要页面,页面左下角都有消息的图标存在,有新消息时,有一个红色小圆点出现在图标右上角,点击图标直接打开消息页面。
点击左下角消息图标,打开消息页面;
点击每一个选项可以看到每一种消息的具体内容。
点击坐左下角消息图标,直接跳转到消息页面;
点击每一个选项,下级页面都会从屏幕右侧弹出;
点击左上角向左箭头页面向右弹出回到上级页面;
或者手指从页面左侧边缘向右滑动退回到上级页面;
点击私信选项,新页面在标题下方有红色加载条在加载新内容。
9)查看购物车商品入口:在三个主要页面,页面右下角都有购物车的图标存在,有新消息时,有一个红色小圆点出现在图标右上角,点击图标直接打开购物车页面。
点击每一个选项可以看到每一种消息的具体内容;
订单支付之前可以点击取消订单。
点击左下角消息图标,直接打开购物车页面,红色加载条显示加载进度,页面中央有四色圆点不断转圈闪动更新内容,然后显示购物车商品;
商品左侧对号默认被选中显示为红色,点击取消被选中显示为黑色;
点击右下角结算按钮,订单支付页面从右侧弹出;
右下角支付按钮开始30分钟倒计时;
选择支付途经后,点击支付按钮后,确认支付菜单从页面下方弹出。
(3)页面结构:
(4)逻辑页面详细说明
点击图片页面转至用户个人空间;
点击“隐藏”文本名片直接消失;
当前页面是标题是“用户”,文本为黑色其他3个为灰色文本,文本下方有红色横线,当向右滑动页面或是点击“商家”文本时,页面向左滑过“商家”文本,同时红色横线从“用户”下方滑到“商家”下方。
点击用户名称或用户头像直接转至这个用户的个人空间页面;
点击图片页面跳转到笔记页面,一切操作跟上一部分第4介绍中一致;
点击图片,页面中央有红色圆圈旋转加载页面然后跳转到笔记页面;
点击心形图标,图标先缩小再变成红色放大数量数字增长1;
点击“…”弹出菜单选项“不感兴趣”,选中这个选项后这些笔记消失;
点击用户名称跳转至个人空间;
点击图拍转至笔记页面;
点击图片下方图标会产生想上一部分相同的效果。
点击“…”页面变暗同时底端弹出菜单“不感兴趣”“取消”选项,点击菜单以外屏幕或“取消”,菜单向下从底端弹回;点击“不感兴趣”后赞了的笔记会从这一页面消失;
(1)页面名称:“购买”页
(2)页面入口:启动小红书app向左滑动页面或点击文本进入到“购买”页面
商品分类
商品限时购
黑卡升级
新草上线
商品列表
4)黑卡升级:黑卡会员是小红书专门为了用户(小红薯)购物所创办的会员,从“购物”页面进入到黑开详情页面,首先是是一个会员卡图片,点击图片中“查看详情”页面变暗中央弹出菜单说明黑卡会员省钱明细和“立即加入黑卡会员”链接按钮,用户可以根据需要缴费办理季卡、半年卡和全年卡,可以一次性购买也可以开通自动续费功能。
会员卡图片下方还列举了会员特权包括:特享包邮、限时提前抢、七天保价自动退、专享价格、专属客服、尊享包装的六大服务。
下方还有“黑卡会员们怎么说”,点击转至笔记页面,查看关于黑卡会员的笔记。下部分内容就是主要内容了,“黑卡会员尊享”部分通过标题行向左滑动查看哪类商品可以参与商品会员优惠,向上滑动页面查看商品宣传标题和部分商品列表。点击商品宣传标题转至此标题下的商品列表。浏览商品列表时,页面底端出现“立即加入”的快捷方式。
“一贵就赔、7天保价”点击右侧向右箭头,页面底端弹出菜单商品说明,内容中详细介绍了此件商品关于“一贵就赔”、“7天保价”、“保税仓发货”、“单价包邮”、“包税”、“不支持退货”六项政策通知。点击菜单以外页面或者点击关闭图标都可以使菜单从底端弹出。
有些商品可以选择件数,点击此行,页面底端弹出菜单可以选择数量并点击确定加入按钮,菜单从底端弹出回到上级页面底端购物车图标出,出现黑色小菜单显示“成功加入购物车”并带有红色“去结算”按钮连接到购物车页面。
商品页面底端始终有店铺、购物车、心愿单、加入购物车和立即购买快捷链接。
通过测试发现,再无网络连接的情况下app对选择进入购物车、订单、薯券、心愿单、黑卡会员这些功能做了数据缓存显示文本“找不到网页”,而其他没有做数据加载的页面做了网络异常的提示信息弹窗设计,在页面中上方的位置显示“网络连接断开,请检查网络设置”的文本并一直停留在页面中知道连接网络。
即使是在使用app过程中突发无网络情况,app同样是像以上这两种状态呈现出来。但如果用户是在上下滑动页面浏览笔记列表过程中连接不到网络的话,用户还是可以执行给笔记点赞或取消点赞这个操作的,也可以浏览下面的内容知道浏览所有加载了的内容,需要更新更多内容时才会出现提示信息弹窗。
问题1:标签内容切换
体验感受:
修改意见:
页面下方两个角落已经被两个快捷方式占据没有更多的空间,可以系统主动识别在用户向下滑动页面时,快速置顶的快捷方式出现在购物车图标上方,向上滑动页面或停止滑动时就被自动隐藏。
问题2:视频笔记走流量
当用户进入到“视频”标签中时,视频列表中所有视频自动走流量播放视频即使是连接手机网络也会自动播放视频。
App应该做出提示信息弹窗给用户提示,“允许app使用移动网络吗”并给出“去设置”按钮跳转到手机网络设置部分。