项目目的 在原先进行的客户端3.6.0的基础上,优化首页和文章推荐机制,具体如下: 1、首页改版,把文章、论坛帖子、图集跟进用户兴趣进行混排,并支持用户进行喜好投票 2、用户可定制关注车系,并形成首页的栏目 原型地址: 原型浏览 设计稿地址: 在线查看3.6设计稿 切图单: 切图单v1 切图参考文件 项目接口 接口 设置页面调整 1、入口说明 1.1、点击客户端首页左上角的设置按钮,滑出快速设置层 1.2、滑出的设置层,最顶部为用户登录通行证的入口,中上部分为“个人收藏”、“文章搜索”、“栏目定制”、“离线阅读”的功能或者入口按钮 1.3、滑出层的中下部为详细设置的入口、用户意见反馈入口、用户体验计划入口 1.4、【针对IOS客户端】实现客户端内的推荐APP,可以直接通过点击下载,而无需到app store,需添加“SKStoreProductViewController”特性 参考资料 2、用户登录通行证说明 2.1、点击页面中上部的登陆按钮,页面向左滑动,进入登录专用页(和3.5.0登录通行证页面一致) 2.2、登陆后,客户端获取相应账号的头像,显示在客户端上 2.3、用户登录太平洋通行证之后,个人收藏自动进行云同步功能, 查看云同步详细逻辑 3、个人收藏中心 3.1、页面右上角为返回按钮,下方为论坛、帖子、文章、车系、车型5个收藏栏目,默认进入论坛栏目 3.2、用户左右滑动可以切换不同的收藏栏目项 3.3、点击页面右上角的编辑按钮,进入对收藏内容的编辑状态,用户可以勾选多项,进行批量删除 3.4、若相应收藏项没有内容的时候,要有相应的提示。 3.5、论坛收藏,若用户本身没有收藏任何论坛,系统自动推荐4个论坛 资讯版块 1、文章列表 1.1、2G/3G网络下,无图模式,连导航图/焦点图都不显示 1.2、文章列表的右下方,要放出相应的内容信息,文章要显示评论条数,图集要显示图集张数,论坛要显示盖楼的楼层数 1.3、图集、论坛、直播、视频的标签放在最右侧 1.4、点击文章区域,该区域要有点击触发效果 1.5、资讯客户端首页的栏目导航顺序是:头条、新车、行情、导购、评测、用车、文化、行业、技术 1.6、android客户端加入在线调整栏目顺序功能,规则和IOS一致(当用户有自定义过栏目顺序的时候,在线调整功能对其无效) 2、文章内容页 2.1、点击后页面右滑回到之前页,客户端自动记录用户在文章页阅读时所在的位置,即:当用户返回首页,再点击返回文章时,位置要定位到之前阅读时所在的页码 2.2、mrobot出文章页数据时,要在标题顶部加入空行,以保证用户进入文章终端页时,标题不会被遮盖 2.3、当用户双击文章页时,渐现收缩出现文章的快速设定层,点击设定层以外的区域,将设定层关闭 2.4、设定层提供“全屏阅读”/“手势翻页”/“字号切换”/“夜间模式”四项功能,默认开启全屏阅读和手势翻页 2.5、当用户设定开启“全屏阅读”:用户用户单击文章页时,顶部和底部的功能按钮渐隐消失;文章页用户再次单击文章页时,功能按钮渐现出现 2.6、关闭手势翻页只是控制在文章阅读的左右滑动的手势效果,上下翻页功能还是保留 2.7、文章页字体大小全部+1,点击切换字体大小,字体按以下顺序循环变化:中字体—大字体—小字体—中字体 2.8、点击大图,页面变黑并且图片展开,进入读图模式,再点击图片则退出读图模式 2.9、汽车网文章页,加入“行情信息采集来源”,需要mrobot根据接口出相应的数据 2.10、点击收藏的星星按钮,进行添加收藏时,要有个闪烁的动态效果,可参考百度新闻,具体可联系李春杰讲解 2.11、厂商链接修改点 2.11.1、需制作新的接口,接口功能是通过厂商的ID,获取到相应品牌的ID 2.11.2、客户端文章页要使用新接口,实现效果为:用户点击厂商的连接后,跳转到车型库的列表页,该列表页显示该厂商所在的品牌的所有车型 2.11.3、备注:3.5.0时,已经将文章页的厂商连接进行过滤屏蔽,需在4.0.0的时候,解除屏蔽 3、评论列表页 3.1、原有表情套,改为文字表情套 3.2、点击表情的时候,直接外显的是表情符号 \(o)/~ 3.3、上传服务器的时候,客户端将 \(o)/~ 改为编码{201}传给服务器 3.4、相应文字表情在PC端上是表情,在客户端上是文字 3.5、(for ios)发送评论,在顶部栏会有相应的发送信息提示:“正在发送评论...”;发送成功,显示:“评论发送成功” 3.6、(for ios)若发送失败,顶部提示“评论发送失败,点击顶部栏再次发送” 4、分享细化 4.1、分享到QQ空间,保留现有的分享文章链接 4.2、分享到新浪微博和腾讯微博的内容,若是用手机客户端打开分享连接,则跳转至客户端打开文章链接;若是用PC端浏览器打开分享连接,则直接打开PC端网页,和现有分享到腾讯微博的操作一致 4.3、分享到微信、微信朋友圈、手机QQ,分享的内容为相关页面的wap版地址,和现有的android版分享到微信的功能一致 分享需求统一说明 4.4、新浪微博采用SSO登录;腾讯微博和QQ空间登录方式不作改变,暂不采用SSO登陆 4.5、分享的范围为:分享到:新浪微博、腾讯微博、QQ空间;分享给:微信好友、微信朋友圈、QQ好友 汽车网论坛 1、热门栏目说明[[BR] 1.1、论坛的热门推荐列表以及顶部焦点图,由编辑手动人工推荐,同时顶部放用户收藏的论坛入口 2、车型/地区/综合栏目说明 2.1、页面结构和现有客户端的页面保持一致 3、搜索功能说明 3.1、进入搜索页面后,默认滑出输入键盘,同时默认选择“搜索版块” 3.2、搜索版块下方的空白处显示的内容,会根据用户输入的字符进行自动判断而显示结果 3.3、用户点击则直接进入相应的论坛版块 3.4、用户搜索结果的在空白区域进行上下滑动的时候,将系统键盘隐藏 3.5、搜索功能放在系统键盘中,用户直接在键盘点搜索即可 3.6、搜索版块时,点击搜索,系统键盘下滑,搜索帖子时,点击搜索,页面向左滑动进入搜索结果 3.7、点击“搜索帖子”,切换到搜索帖子项目,输入内容后,点击键盘的搜索,直接进入搜索结果页 4、帖子列表页说明 4.1、在帖子列表页,要允许编辑手动插入帖子 4.2、加精华的帖子,标题前有“精”的小图标 4.3、有图片的帖子,标题后有“图”的小图标 4.4、有“精”图标的帖子,不显示“图”小图标 4.5、帖子排序选项,默认用时间排序 4.6、共有排序选择如下:按发表时间排序---外显 按时间;按最后回复排序---外显 按回复;置顶帖---外显 按置顶;精华帖---外显 按精华 4.7、点击发帖,页面向左滑动进入发帖页面 4.8、点击收藏,星星变为实心,同时出现提示层,提示层淡入,显示1秒后,淡出 4.9、翻页效果和文章页翻页一致,下一页上升 5、帖子内容页 5.1、顶部功能栏,有切换“看全贴/只看楼主”的功能,切换时,要有提示 5.2、提供该帖子所在的论坛的快速入口,点击入口进入论坛 5.3、点击楼层的“回复”或者下方的“回帖”,进入回帖页面,点击楼层的“回复”按钮,进入的回帖页面会显示“回复xx楼”;点击下方的“回帖”按钮,回帖页面显示“回复楼主” 5.4、发帖/回帖页面点击发送后,直接返回帖子内容页,同时在顶部栏会有相应的发送信息提示:“回帖/发帖发送中…”;发送成功,显示:“回帖/发帖成功” 5.6、若发送失败,顶部提示“回帖/发帖失败,点击顶部栏再次发送” 5.7、提供报名功能,用户点击“我要报名”按钮则弹出报名的浮层。点击浮层外其他地方,则收起浮层。 5.8、提供查看报名信息功能,点击弹出报名信息列表浮层。点击浮层外其他地方,收起浮层 5.9、提供投票功能,投票区域默认展开 5.10、投票时,点击某项的效果,选择的项底色变色,当选择的项达到要求时,其余选项变成灰色,同时地下的提交按钮变为可提交状态 5.11、提交投票后,显示相应的结果 5.12、点击大图,页面变黑并且图片展开,进入读图模式,再点击图片则退出读图模式 6、发帖页说明 6.1、在发帖页点击返回的时候,当系统发现帖子已有内容的时候(有标题/有帖子内容/有图片),提醒用户是否要退出 6.2、当用户确定退出后,系统自动将当前内容保存为草稿,并进行提示 6.3、点击发布后,页面返回帖子列表页,顶部状态栏提示帖子发送状态,若帖子发送失败,则自动存草稿箱 6.4、点击添加图片按钮,滑出添加图片的功能层,点击相应的功能添加图片 6.5、点击已添加的图片,滑出替换/删除图片的功能层,点击相应功能进行操作 6.6、最多只能添加8张图片,到达八张后,添加图片的按钮消失只允许提供上传一张图片;提供拼图功能,将5-8张图片拼成一张大图,图片宽度限定在500PX 6.7、下方提供同步发布的分享绑定功能按钮 6.8、取消草稿箱,系统只保存上次未发布的帖子,具体流程如下: 6.8.1、用户进入发帖页面,系统提示上次有未发布的帖子,是否继续编辑; 6.8.2、若用户选择确定,进入上次的草稿,继续发帖,发帖后草稿箱清空; 6.8.3、用户选择取消,则开新的帖子,同时上次存的草稿也被删除; 6.8.4、用户的新帖子,若是点击发布,则正常发布,下次用户再点击发帖,还是会提醒用户上次有未发布的帖子; 6.8.5、用户的新帖子若未发布,则新帖子存入草稿箱,取代上次的稿件 电脑网论坛 1、电脑网论坛首页顶部为各论坛入口,其中第一个是写死的进入全部论坛版块的入口,其余为编辑推荐的论坛版块,推荐个数由编辑控制,需要提供录入推荐的后台 2、编辑精选旁有“全部热帖”的入口,点击进入全部热帖页面,该页面将各大版块的热帖按照不同栏目进行排列显示 3、电脑网的论坛层级结构保持和现有客户端一致 4、其余论坛要素,和汽车网论坛一致 汽车网车型库 1、搜索功能说明 1.1、点击搜索按钮后,页面向左滑动进入搜索页 1.2、进入搜索页后,默认弹出输入键盘 1.3、根据输入的内容,输入框下方自能给出相应的搜索结果,点击相应结果,直接进入车系页面 1.4、在输入框下方的空白区域上下滑动,可将键盘收起 1.5、点击“确定”按钮后,进入搜索结果页 2、品牌选车说明 2.1、点击某品牌后,页面向左滑出该品牌所有的车系列表层 2.2、点击不同品牌,该列表层的内容进行刷新更新 2.3、点击按钮,可收起滑出层 3、价格选车说明 3.1、页面左侧为相应的价钱范围,右侧为该范围内的各大品牌的车系,最右侧为字母快速导航 3.2、点击不同的价格范围,切换右侧的车系列表内容 3.3、字母导航在滑动过程中,要提示当前选择的是哪个字母,提示框1秒后消失 4、筛选选车说明 4.1、页面列出筛选的所有条件,按照“价格”“排量”“级别”进行归类 4.2、通过点击,对条件进行选择,只能单选。 4.3、被选择的条件,变成灰色,再次点击相应条件,取消选中状态 4.4、如果某分类下,没有任何条件被选择,则默认该分类下的所有条件都被选择 4.5、在页面下方为“确定搜索”按钮,按钮上同时显示有多少款车型符合条件 4.6、点击“确定搜索”按钮后,进入搜索结果页 5、车系概述页说明 5.1、车系的图片下,显示该车系有多少张图片,点击后进入车系图集页 5.2、页面提供车系的论坛快速入口,旁边还有“询价”、“经销商”和“文章”的入口 5.3、车系下的车型名称接口要修改,取消其车系名称 5.4、点击相应的车型,进入车型概述页 5.5、点击旁边的“对比”按钮,唤出对比页面的入口 5.5、原客户端的栏目(概览/经销商/文章)改为在下方显示取消“概览”入口,车系页首页即为概览 5.6、点击文章栏目后,页面上方显示文章的各个分类(新闻/评测/导购/行情) 5.7、行情栏目的文章,提供地区选择 6、车型概述页说明 6.1、车型的图片下,显示该车型有多少张图片,点击后进入车型图集页 6.2、点击旁边的“对比”按钮,唤出对比页面的入口 6.3、点击基本参数旁边的按钮,进入详细的参数页 6.4、在详细参数页,点击右侧的“参数类别”,用户可以快速选择查看相应的参数 6.5、其余的功能,和现有的一致 7、车型对比功能说明 7.1、已添加进入对比的车型,按钮变为已选中状态 7.2、点击了添加对比按钮后,页面右下方浮现出进入对比页面的按钮 7.3、按钮上方显示已添加对比车型的数量 7.4、对比按钮在出现后,会从侧方滑出提示,1秒后滑回消失 7.5、最多添加6个车型 7.6、各状态提示列表,详见原型 8、车型对比页面说明 8.1、若添加多款车型,外显的是最后添加的两款车型的对比 8.2、VS按钮下有数字提醒现在有多少款车进行对比 8.3、页面向上滑动时,图片收起,只留下相应车型的文字 8.4、在参数对比页面,右侧为“具体参数”的半透明按钮,点击可以滑出相应的锚点层,按钮变为不透明 8.5、再次点击“具体参数”按钮,锚点层滑回,按钮变回半透明 8.6、点击VS按钮,页面蒙层,同时下拉车型对比选择页 8.7、被选中对比的车型,上面蒙层,表示被选中 8.8、用户通过滑动蒙层,选择需要对比的车型 8.9、用户点击对比按钮后,才进行对比 8.10、点击编辑后车型列表右侧出现选框,下方对比按钮变为“确定删除” 8.11、如果对比中的车型被删除之后,默认选择最上方的一款车型进行代替 8.12、最多提供7款车型对比,不够7款的对比按钮上移,下拉求缩小 8.13、删除只有一款车型后的效果和删除所有车型后的效果,详见原型 8.14、只有点击“对比车型”才能把弹出的对比选择层收起;点页面的蒙层处,对比选择层不收起