[关闭]
@jean 2016-02-26T07:47:55.000000Z 字数 7203 阅读 3839

App & PC 共用一套导购内容

A-运营线 主站 导购

文档改动

ID 时间 改动 讨论者
1 2016.1.11 10:06AM 对应页页面信息 已确认 Daisy
2 2016.1.13 3:06PM 此需求不再捆绑下单次数, 后台中 排序规则和 "时间段" 的搜索条件移除 Wilson
3 2016.2.19 2:30PM 补充了栏目页 商品标签管理 中排序值的说明 Lewis
4 2016.2.19 2:30PM 补充了栏目页工具栏 下拉框 中, 选中已选分类时的说明 Clark
5 2016.2.22 2:10PM 补充了栏目页中添加的商品起止时间相同时的排序规则说明, 新添加的显示在前 Clark
6 2016.2.24 2:50PM 栏目页 排序控制 原来文档写的是 "发布时间", 现改为 "更新时间" Yoko
7 2016.2.26 3:45PM 补充了确定了的 栏目页页面信息 Daisy

1. 需求简介

此处输入图片的描述

  1. 将那些 App 导购专题生成一个个 PC 专题链接, 让小编自己分配给诸如上图左边那些专题位 (2.对应页面部分)
  2. 开发一个新的栏目, 类似 "分享购、拼单购、团购、VIP购", 在同一栏目内可浏览到的商品 (3.新专题栏目部分)
  3. 此需求 分两期开发, 一期先开发对应页面部分 (以及 相应后台部分) , 二期开发新专题栏目部分 (以及 相应后台部分), 以便尽早用上研发成果

2. 对应专题页部分

2.1 页面入口

如 需求背景 所述, 一般来说新专题页都是通过首页某个专题位点击进入.
从新窗口打开
未登录是否直接打开目标页面

这些要求已经在首页改版的需求里实现, 这里仅简单说明交互.

2.2 专题页

此处输入图片的描述
查看原图

2.2.1 专题广告图

此处输入图片的描述

  1. 如果后台已经设置
  2. 广告图 = PC专题页广告图 ≠ App专题头图
  4. 如果后台没有设置
  5. 广告图 = 无, 并且下方所有的元素相应上移

广告图没有点击事件

2.2.2 商品显示规则

对于没链接的商品, 在专题页直接忽略, 不会显示在专题上, 并且出现这种情况时, 原先在其后面的商品补上其位置, 不会使得页面上空出一个商品位置来.

也就是说, 需要对专题内有链接的商品再次进行排序.

2.2.3 商品排序规则

目前 App 的规则是每个专题里面的商品编号[1]越大, 显示在越前面. PC 专题页沿用此排序规则.

2.2.4 商品信息
  1. 商品图片 = 后台设置的图片 ≠ 链接商品的第一张图
  3. 商品名称 = 后台设置的商品名称 ≠ 链接商品的名称 //名称超出一行时自动换行
  5. 商品价格 = 商品链接抓取过来的商品价格 (与一键代购页面上相同) 
  7. 商品链接 = 后台设置的商品链接 //这不代表点击商品会打开这个链接
2.2.5 商品橱窗交互

点击整个商品橱窗区域都是打开 该商品链接对应的 商品详情页
(不太明白的话把错误例子里的链接在浏览器打开)
从新窗口打开
未登录是否直接打开目标页面

点击打开链接说明

  2. 点击打开链接说明商品链接 = https://item.taobao.com/item.htm?id=522719899491
  3. 页面链接 = http://www.panli.com/Crawler.aspx?purl=[encode 过的商品链接]
  4. 举例说明 = http://www.panli.com/Crawler.aspx?purl=http%3a%2f%2fitem.taobao.com%2fitem.htm%3fid%3d522719899491
2.2.6 翻页控件

此处输入图片的描述

2.2.7 页面信息
  1. <title>"专题名称" - Panli代购</title> //"专题名称"是后台录入时的一个字段
  3. <meta name="keywords" content="Panli代购,代购,海外代购,华人代购,代购中国,淘宝代购,留学生代购">
  5. <meta name="description" content="Panli网－全球最大的专业代购网络，为海外华人代购国内各种商品，方便您的购物需求。">  
  7. <head>: 
  8. 见效果图, 即 PC 首页的新版
  10. <boot>: 
  11. 见效果图, 即 PC 首页的新版

2.3 专题页后台页面

此处输入图片的描述

2.3.1 地址显示

在小编专题和商品专题的 "编辑页" 的 "操作"/ 保存 上方增加一栏, 用来展示调用此专题内容的 PC 专题页地址, 以便小编将专题发布到 PC 主站上
显示在编辑页 //与 "最后更新人" 和 "最后更新时间" 类似
显示在添加页

2.3.2 保存时重新生成页面

由于专题页生成之后还能再编辑, 因此需要每次点击 保存 的时候重新生成一下页面, 页面地址不变, 省得重新贴网址.

2.3.3 PC 专题页广告图

此处输入图片的描述
此处输入图片的描述

在 "手机管理 - 广告管理 - 专题推荐管理/商品推荐管理" 的 专题名称 下方增加一个栏 "PC专题页广告图" (添加页和编辑页都增加), 用于录入前面专题页的广告图.

输入数据限制[2]

图片大小 图片尺寸 图片格式 是否必填 默认值 异常提示
< 1MB 宽度1200px jpeg/jpg/gif/bmp/png 选填 - 请上传宽度1200像素的图片

与上面两张图中上面那张 "专题推荐管理" 两个传图控件一样, 将此要求以相同的样式标记在控件右边

图片大小小于1MB,宽度1200像素,格式支持jpeg/jpg/gif/bmp/png

2.3.4 后台老项目标题改动 (商品专题)

此处输入图片的描述
如上图所示, 改动为

  1. 专题封面头图 → App专题封面头图
  3.   首页缩略图 → App首页缩略图

防止两个平台上传图片位置产生歧义.

2.3.5 商品标签

小编专题和商品专题在商品录入时再增加一个字段 "商品标签", 选填, 只能选择 已创建的标签, 保存时记录为该商品对应的标签, 后面 会用到. 商品标签可删除.

2.3.5.1 标签管理

左边 分享购话题管理 下面, 增加一个 商品标签管理.
此处输入图片的描述

创建在上面, 管理在下面, 点击修改后将标签名填入上方
此处输入图片的描述

2.3.6 商品显示控制

小编专题和商品专题在商品预览图位置的右边, 增加一个复选框, 勾选表示在 App 和 PC 显示这个商品, 默认勾选.

2.3.7 性能优化

现在后台性能相对较差, 经常会出现各种无法保存的情况, 具体问题可以向小编 @Lynn 了解.

2.3.7.1 商品显示和商品链接

App/PC 是否显示商品, 以有没有打勾为准.

原来要求只要是没有商品链接的商品, 就不显示在任何平台上, 不管是 App 还是生成的 PC 对应页面, 或者总栏目上, 但是现在 App 上有图的话还是会保持显示. 而相比删链接, 直接反选复选框更为便捷. 因此改为这种方式实现.
2.3.7.2 无法保存

据小编自己的描述, 一次性上传的商品超过一定数量时, 能成功保存的概率大大降低, 现在基本都 5 个一传.

2.3.7.3 上传速度久

一个专题里商品多了后，等待上传成功会很久.

2.3.7.4 删除专题
此功能需要的研发资源不大的话希望可以实现. Nice to have.

可以在两个 专题管理页 最右边的 "编辑" 一列改为 "操作", 并且在 编辑 按钮右边增加一个 删除 按钮, 点击时弹出警告框

  1. 确定要删除这个专题吗? 
  3. 取消 //点击关闭警告框
  5. 确定 //点击后删除此专题, 并在后台页面上移除该记录
2.3.8 商品浏览和下单数据

商品浏览和下单数据 这部分提到1期, 便于了解效果, 入口权限等说明详见

2.4 商品详情页

即 PC 一键代购页, 相当于将手机导购后台设置的商品链接在 Panli 主站提交一键代购, 忽略后台设置的链接外的其他信息[3].

3. 新专题栏目部分

3.1 页面入口

新专题栏目入口
首页 "特色购物" 下拉列表里增加一项, 具体加的位置和图标文案详见到时候的设计稿
一般来说新专题页都是通过首页某个专题位点击进入.
从新窗口打开
未登录是否直接打开目标页面

3.2 栏目页面

此处输入图片的描述
查看原图

banner 确定之后会连同工具栏一起改
头部导航改动

使用 特色购物 选中状态

3.2.1 专题广告图

点击从新窗口打开特定页面, 页面链接和图片是一起设置的. 没有链接则不能点击, 并且 没有轮播效果.

3.2.2 工具栏

此处输入图片的描述

3.2.2.1 下拉框

此处输入图片的描述

  1. 数据来源
  2. 后台设置商品时, 可以给商品设置 "标签", 然后在标签管理里设置好下拉框中对应位置的 "分类".
  3. 没有设置 "分类" 的商品全部算做 "其他".
  5. 默认状态
  6. 选中 "全部"
  8. 选中任意一项时
  9. 不重置/切换 "排序方式", 清空搜索栏
  10. 以选中的排序方式来呈现该标签下面的所有商品 (未选排序则以默认排序)
  11. 点击现在所选分类时, 重置页码, 但不重置 "排序方式"
3.2.2.2 排序方式 (5种情况)
  1. 数据来源
  2. 销量为抓取时保存的商品数据 "月销量" //不能抓取时也记为0
  3. 新品为商品在后台发布时间 //针对单件商品
  4. 价格为抓取到的一键下单默认价 (也就是没选择 SKU 的情况) 
  6. 排序类型
  7. 默认不选择任何排序, 使用后台设置的默认排序方式
  8. 除了价格排序有正序和倒序外, 其他排序都只有倒序一种
  10. 选中任意一项时
  11. 不重置/切换 "排序方式", 清空搜索栏
  12. 以选中的排序方式来呈现该标签下面的所有商品 (未选排序则以默认排序)
  13. 在已选中价格排序时再次点击会切换成另一种价格排序, 第一次选中时为正序 (从低到高) 
  14. (除了价格以外的排序方式的) 对于已选中的排序方式, 点击时不做处理
3.2.2.3 栏目内商品搜索

搜索框要求

  1. 输入时关键词过长
  2. 当超过搜索框长度时继续输入, 则最左边的字移出范围不可见, 光标继续定位在搜索框右边
  4. 输入过长的关键词后丢失焦点时
  5. 搜索框内文字从左起第一个字开始显示, 显示不下的文字直接隐藏, 不需要 "..." 等标记
  7. 搜索字段
  8. 商品名称
  10. 匹配方式
  11. 模糊匹配 //用户基本上不可能精准地输入一个完全匹配的商品名称
  13. 控件要求
  14. 去两端空格 //因为关键词可能是复制来的, 而复制过程中带上空格很常见

搜索结果

  1. 正常情况
  2. 从当前选中的标签下搜索, 并以当前使用的排序方式展示搜索结果
  4. 特殊情况
  5. 当输入了空格或者没有输入关键词直接搜索时, 以当前使用的排序方式展示选中标签内的所有结果
  7. 异常情况
  8. 当搜索不到任何商品时, 在页面上给予一个提示, 类似于下图
  10. 关于重置
  11. 不论是否能搜到商品, 是否异常, 是否没有输入关键词, 搜索时都不会重置标签/排序方式/关键词

此处输入图片的描述

没有找到相关的商品
查看全部商品 //点击 全部商品 时, 清空关键词, 不重置标签, 从当前选中的标签下搜索, 并以当前使用的排序方式展示搜索结果

3.2.3 商品显示规则

专题里面有一部分是本来就在后台设置了不显示的, 这批商品需要在显示时就过滤掉, 这些商品有:

与此同时, 还需要过滤掉没有商品的 无商品专题, 使之不影响商品在页面上的排序.

这些商品不仅仅是在默认排序规则下不显示, 调整了排序/筛选规则之后同样不显示.

3.2.3.1 相同的商品显示问题

如果一件商品在后台录入了多次, 栏目页中希望能够只显示一次 (最后录入的那次).

如果无法实现需要变更, 请提前告知, 不要等到验收才告知.

3.2.4 商品排序规则

如果小编专题A和商品专题B, 同时开始同时结束, 而且都是在时间范围内的可用专题, 则以添加时间新的显示在前.

3.2.5 商品信息
  1. 商品图片 = 后台设置的图片 ≠ 链接商品的第一张图
  3. 商品名称 = 后台设置的商品名称 ≠ 链接商品的名称
  5. 商品价格 = 商品链接抓取过来的商品价格 (与一键代购页面上相同) 
  7. 商品链接 = 后台设置的商品链接 //这不代表点击商品会打开这个链接
3.2.6 商品橱窗交互

点击整个商品橱窗区域都是打开 该商品链接对应的 商品详情页
(不太明白的话把错误例子里的链接在浏览器打开)
从新窗口打开
未登录是否直接打开目标页面

  1. 商品链接 = https://item.taobao.com/item.htm?id=522719899491
  2. 页面链接 = http://www.panli.com/Crawler.aspx?purl=[encode 过的商品链接]
  3. 举例说明 = http://www.panli.com/Crawler.aspx?purl=http%3a%2f%2fitem.taobao.com%2fitem.htm%3fid%3d522719899491
3.2.7 翻页控件

此处输入图片的描述

3.2.8 页面信息
  1. <title>[值得买 - Panli代购]小编每日为您精选爆款商品，天天都有惊喜！</title>
  3. <meta name="keywords" content="Panli代购,代购,海外代购,华人代购,代购中国,淘宝代购,留学生代购">
  5. <meta name="description" content="小编每日为您精选爆款商品，天天都有惊喜！Panli网－全球最大的专业代购网络，为海外华人代购国内各种商品，方便您的购物需求。
  6. ">
  8. <head>: 
  9. 见效果图, 即 PC 首页的新版
  11. <boot>: 
  12. 见效果图, 即 PC 首页的新版

3.3 商品详情页

即 PC 一键代购页, 相当于将手机导购后台设置的商品链接在 Panli 主站提交一键代购, 忽略后台设置的链接外的其他信息.

淘宝商品id 下单次数

3.4 栏目后台页面

3.4.1 入口

此处输入图片的描述
在 "网站编辑部" 后台左边手风琴导航最底下 (双十一红包管理下方).

3.4.2 访问权限

可以打开 "网站编辑部" 后台的所有人员可访问.

3.4.3 涉及功能
3.4.4 商品标签管理

此处输入图片的描述

3.4.5 商品排序控制

此处输入图片的描述

排序方式
此处输入图片的描述

点击 保存 后, 重新打开的栏目页会按选择的排序方式来排序, 当然刷新页面也行.

  1. 按商品发布时间: 
  2. 商品更新时间越接近的, 显示在越前面
  4. 按商品点击量: 
  5. 商品点击量越高的, 显示在越前面
  7. 按专题发布时间: 
  8. 专题更新时间越接近的, 整个专题内商品显示在越前面. 并且专题里面的商品编号越大, 显示在每个专题越前面 (两套排序)
3.4.6 广告图控制

此处输入图片的描述

控件 选填/必填 输入数据限制 备注
文本框 选填 只能输入链接, 或者为空 作为图片点击后打开的链接
上传控件×3 必填 文件大小不限制/尺寸详见设计稿/图片格式 jpg/png/jpeg/gif/bmp -
图片预览 - - 图片上传后显示 (不行就改为保存后显示)
复选框 已被控件限制 - 默认勾选, 勾选代表显示在页面上

点击 保存 后, 进行输入数据判断, 出现异常时:

  • 弹出警告框, 提示 "请上传正确的图片"

交互设计

  1. 点击图片
  2. 打开相应的链接 //由后台设置, 未设置则不可点击
  4. 轮播效果
  5. 无
3.4.7 商品浏览和下单数据

此处输入图片的描述

筛选条件

条件 控件 默认状态 输入数据 控件要求
商品名称 单行文本框 无 非必填 / 长度不限制 / 允许中英文数字 模糊匹配, 去两端空格
所属专题 单行文本框 无 非必填 / 长度不限制 / 只允许英文数字 精确匹配, 去两端空格

因为此需求不再捆绑下单次数, 上图排序规则和 "时间段" 的搜索条件移除, 数据呈现按照点击量从大到小排序.

以及两个导出 Excel 按钮, 导出“搜索结果”中所有带标题的数据.

按发布时间、

按点击量、

按下单次数

搜索结果

标题 展示数据 示例
商品名称 商品的名称 (与链接中的商品名称相同) 美国区 iTunes 10美金 App Store 充值卡
点击量 该商品在 PC 和 App 上总的打开次数 88
下单次数 该商品在 PC 和 App 上总的下单次数 20
所属专题 该商品从属的专题, 如果从属多个专题时, 用英文逗号","隔开 i236

在 导出当前页到Excel 按钮右边, 显示如下几个记录:

标题 展示数据 示例
下单商品数量 商品的名称 (与链接中的商品名称相同) 2
专题商品总数量 该商品在 PC 和 App 上总的打开次数 20
专题数量 商品专题和小编专题的总数 2
点击量 该商品在 PC 和 App 上总的点击次数 (打开过就算, 不管是否可用) 148
专题商品下单总次数 该商品从属的专题, 如果从属多个专题时, 用英文逗号","隔开 148

[1] 点击 这里 查看后台页面截图 点击右边图标可返回文档原位置 ↩
[2] 虽然此项是选填, 但如果上传了图片的话, 必须满足上面要求. 如果没有上传则跳过这些判断/不算异常 ↩
[3] 不论手机导购后台设置的专题状态是 "可用" 还是 "不可用", 也不论专题是否处于 "开始时间" 和 "结束时间" 之间: 只要用户有办法进到专题页就能打开商品详情页 点击右边图标可返回文档原位置 ↩
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注