导购2期 - 小编推荐频道

导购 后台 A-运营线 App

需求背景

1. App 首页改造，增加小编推荐的一系列频道，提高用户的人均订单量；
2. 商品详情页(不包括团购)增加一些信息，便于用户更加全面地了解商品，从而达到提高订单转化率的目的。

功能点

1. App 首页改版，增加小编推荐功能；
2. App 新首页的后台支持；
3. App 商品详情界面增加“月销量、买家评价、直接选择 SKU”功能，移除了状态栏，底部增加了进入购物车按钮(图标形式)。

需求详情

文档改动

1. 商品详情页——SKU 相关——操作结果部分改动//2015.7.13 2:15M

   • 增加了直接点击立即购买和加入购物车然后返回的说明；
   • 修改了该部分第3条中的错别字(立即购买 → 加入购物车)；
   • 增加了没有 SKU 选项商品的情况

2. 专题内容编辑页——商品添加方式改动//2015.7.15 6:00PM

   原来有10个默认商品编辑位，改为一个个添加商品

3. 导购后台统计——筛选条件中移除“按某种来源筛选”//2015.7.17 11:34AM

   和数据展示方式有冲突，此功能移除

4. 小编专题图片中补上了“排序”//2015.7.17 1:34PM

5. 移除了拼单中“滑动商品图片”部分的描述，此功能已于需求确认会上讨论取消//2015.7.17 3:33PM

6. 订单统计改为统计下单次数，而非支付//2015.7.21 11:30AM

推荐(原首页 tab) → 精选频道

App 底部 tab bar 上原“首页”更名为“推荐”，相应的，图标也改为一颗钻石，这部分以设计稿为准。

1. App 前端界面

顶部标签
状态栏下方的三个标签，字体/位置/颜色以视觉稿为准

点击标签时，标签切换至选中项(字体颜色会改变)，红色小短线在点击时直接出现在选中项下方。

标签调整

“拼单”改为“大家都在买”，点击进入的界面同现在的“拼单”不变；
“团购”点击进入的界面同现在的“团购”不变。

1.1 Banner 型

[重要]由于这种 banner 页有商品列表页现在功能，因此 banner 打开的界面需要增加一种新类型，类型名为“导购”。

尺寸以视觉稿为准，点击后进入下面界面:

导航栏

导航栏标题，由小编在后台设置；
右上角的三个小点和里面的分享功能不在此次需求内，不论设计稿上有没有，界面上都不显示。

导航栏下方，使用原生形式，非HTML5。
从上往下的元素依次为:

• 一张 banner 大图；
• 小编在后台编写的专题文案；
• 下方为商品列表，打开界面后显示10个，超出部分可以通过继续向上滑动的“加载更多”加载出来；
• 点击商品列表中的商品图片/商品名称/商品价格可以从屏幕右边移入商品详情界面，点击返回按钮可以返回到此界面；
• 每次打开时，默认显示前10个商品，超出的部分通过往上滑动的“加载更多”来加载。

选择原生界面而非 HTML5，是出于这样的考虑:

如果 Banner 点进来，是一个 HTML5 页面，没有什么问题；
但进来是 HTML5 页面，点进商品详情之后也得是 HTML5 页面。在没有触屏站的现在，页面得完全从头制作以外，还要与 App 的购物车同步、打通支付，不是一个可以忽略工期的问题。

1.2 商品专题型

• 超出3个商品时，可以滑动来看后面的商品；
• 点击右上角查看全部后，打开如下图所示的商品专题界面。

1.3 小编精选专题型

• 同“Banner 型”部分完全一样；
• 超出3个商品时，可以滑动来看后面的专题。

由于 Banner 位同一时间只能展示一个专题/广告/公告，而我们可能在同一时间上线多个专题。上线这个功能可以让小编发布更多专题。

导购后台

1. 专题推荐管理 - 带编辑说明

位置
后台入口位于“手机管理 - 首页管理”中的“编辑专题管理”。

筛选结果列表

• 管理页面与“告示管理”基本相同，顶部提供一个搜索专题名称的功能，模糊查询，去除两端空格;
• 按照最后更新日期由近致远排序;
• 一页显示20个专题，底部还会显示一共有多少个专题，有多少页数据，以及常规的翻页控件。

操作按钮

• 编辑按钮，点击会打开该专题的信息，并且可以编辑
• 添加专题按钮，点击会打开一个空白专题，用于创建新专题

1.1 专题推荐编辑页 - 带编辑说明

专题名称
仅作为一个提示文字，不显示在 App 任何地方。

专题头图

• 如果所传图片尺寸与 App 界面上尺寸不一致，则在保持宽高比不变的情况下，将图片拉伸至宽度等于 App 界面上的尺寸，尺寸以视觉稿为准；
• 后台使用的控件为“广告管理”中的上传控件和预览控件；
• App 前端界面中，显示在状态栏下方，如果设计稿没有特殊说明，则紧挨着状态栏。

编辑说明 —— 非必填项
后台使用的控件为一个多行文本框。文本框内的回车，在 App 前端界面中等同于换行。
App 前端界面中，显示在头图下方，为小编对这个专题的介绍。

商品编辑

• 与图中不同，不再有前10个商品栏作为默认项，现在只有一个商品栏，后面要添加的商品都通过点击 + 来添加，右边有两个文本框和一个上传图片的控件；
• 商品链接文本框中输入的是打开到 App 商品详情的链接；
• 商品名称文本框中输入的是 App 首页和专题页看到的商品名称，与打开详情后的商品名称无关；
• 选择文件这个上传图片控件上传的是 App 首页和专题页看到的商品图片，与打开详情后的商品名称无关；
• 更多商品右边的 + 按钮，点击会增加一行可编辑商品，左边的商品编号“商品X”会相应增加1号，并且下方原来的元素整体下移。

• 在上面的商品会显示在前面(左边)，也就是按添加时间来排序；
• 抓不到商品加的话，商品不显示

剩余部分
“开始时间、结束时间、可用复选框、排序、最后更新人、最后更新时间”与现在“广告管理”这同名部分功能和逻辑一致。

这里的排序，决定这个专题头图在“首页”界面上的前后顺序，以及非 banner 中所有的编辑专题的前后顺序，专题在新首页的上下顺序由广告管理中的栏位号决定。

排序值越大的排在越前面。

如果现在已经发了3个专题，但都还没下线。这时候小编想发第4个专题又想显示在第一个的时候，就比较方便了，直接填上4就行。
原来的话，你得把前面的排序每一个都改一下

保存按钮
如未修改、数据全部为空，则点击时提示“保存失败”；
正常情况下，点击时提示“保存成功”。
保存成功后不需要自动跳转到管理页。

如果是“添加专题”，保存成功后会将这个专题会自动分配到一个 id 号，并显示在管理页中。
id 前面增加一个前缀“E”，比如“26→E26”，以区别“告示 id”和“商品专题 id”。

2. 商品推荐管理

位置
后台入口位于“手机管理 - 首页管理”中的“商品推荐管理”。

筛选结果列表

• 管理页面与“告示管理”基本相同，顶部提供一个搜索专题名称的功能，模糊查询，去除两端空格;
• 按照最后更新日期由近致远排序;
• 一页显示20个专题，底部还会显示一共有多少个专题，有多少页数据，以及常规的翻页控件。

操作按钮
编辑按钮，点击会打开该专题的信息，并且可以编辑
添加专题按钮，点击会打开一个空白专题，用于创建新专题。

2.1 专题编辑页

专题名称
所输入的文字既显示在后台也显示在 App 导航栏标题位置，也就是这里:

商品编辑

• 前10个商品如上图所示，右边有两个文本框和一个上传图片的控件；
• 商品链接文本框中输入的是打开到 App 商品详情的链接；
• 商品名称文本框中输入的是 App 首页和专题页看到的商品名称，与打开详情后的商品名称无关；
• 选择文件这个上传图片控件上传的是 App 首页和专题页看到的商品图片，与打开详情后的商品名称无关；
• 更多商品右边的 + 按钮，点击会增加一行可编辑商品，左边的商品编号“商品X”会相应增加1号，并且下方原来的元素整体下移。

• 在上面的商品会显示在前面(左边)，也就是按添加时间来排序；
• 抓不到商品加的话，商品不显示

剩余部分
“开始时间、结束时间、可用复选框、最后更新人、最后更新时间”与现在“广告管理”这同名部分功能和逻辑一致。

这里没有排序，商品前后排序仅根据文本框中上下顺序决定，专题在界面上的上下顺序由广告管理中的排序决定。

保存按钮
如未修改、数据全部为空，则点击时提示“保存失败”；
正常情况下，点击时提示“保存成功”。
保存成功后不需要自动跳转到管理页。

如果是“添加专题”，保存成功后会将这个专题会自动分配到一个 id 号，并显示在管理页中。
id 前面增加一个前缀“I”，比如“26→I26”，以区别“告示 id”和“编辑专题 id”。

3. 广告管理 - 管理各专题上下位置

位置
后台入口位于“手机管理 - 首页管理”中的“广告管理”。

筛选条件

• 筛选条件中，广告类型的下拉框增加一个选项导购，前面“编辑专题”和“商品专题”都可以用这个选项直接搜索到；
• 广告类型右边增加一个栏位号的下拉框，选项为全部和A～Z的26个字母，用于准确搜索某一栏位号下特定的专题，默认选项为全部

栏位号筛选条件的使用场景是，用于查看某一特定的栏位号上是否存在多个专题，以方便小编管理。毕竟专题越来越多的话，会被挤到很后面，一眼看不到

栏位号说明

• 栏位号是在广告编辑页新增的一个字段，用户控制专题在 App 新首页显示位置
• 栏位号 A 的专题会显示在 App “首页” banner 下面的最上方,按字母顺序显示；
• 如果栏位号上没有可用/有效期内专题时，后面的专题自动往上补位，使得界面上不会看起来空出一块；
• 如果两个商品专题栏位号相同时，更新时间越新的显示在越上方

其他条件不改动。

操作按钮
点击添加广告会打开新的广告编辑页面。

筛选结果列表

• 按照最后更新日期由近致远排序;
• 一页显示20个专题，底部还会显示一共有多少个专题，有多少页数据，以及常规的翻页控件。

3.1 广告编辑页

广告名称
所输入的文字既显示在后台也显示在 App 导航栏标题位置，也就是下图“专题名称”这里:

水平居中显示，暂定超出8个字后用“...”来代替剩余文字

类型(下拉框)
与广告管理页一样，增加一个导购选项。

对应ID(文本框)
需要能识别新的“编辑专题 id(B开头的id)”和“商品专题 id(I开头的id)”。

位置(下拉框)
增加一个专题选项。

• 放在 Banner 位置的编辑专题，依然选择广告栏；
• 放在 App “首页”中间的编辑专题，选择专题；
• App “首页”中的商品专题，选择专题

排序(文本框)
排序号截止到 App 导购2期的需求为止，对 App 专题没有任何意义，不论设置多少都不会有任何用处。Banner 依然可以通过排序来控制位置。
对于导购专题，以后 PC 改版导购的时候可能会用到。

栏位号(下拉框)
栏位号是个新增字段，用户控制专题在 App 新首页显示位置。

排序下方增加一个栏位号的下拉框，选项为请选择和A～Z的26个字母，用于准确搜索某一栏位号下特定的专题，默认选项为请选择，在 App “首页”中的上下顺序就可以通过这个参数来控制了:

• 栏位号 A 的专题会显示在 App “首页” banner 下面的最上方,按字母顺序显示；
• 如果栏位号上没有可用/有效期内专题时，后面的专题自动往上补位，使得界面上不会看起来空出一块；
• 如果两个商品专题栏位号相同时，更新时间越新的显示在越上方

必填项
广告名称、简体版图片、繁体版图片、类型、对应ID、位置、开始时间、结束时间、排序值、栏位号为必填项。未填选栏位号时点击保存则弹出警告框“请选择栏位号”，其余必填选项提示不变。

发布时的延迟

技术方提出，专题发布之后需要等 30min～60min 时间才会显示，这部分是服务器的缓存，与原来 App banner 的缓存不同。

导购后台统计

位置
后台入口位于“手机管理 - 数据分析统计”中，“订单来源统计”。

筛选条件

• 列表框/移除，请无视上图中这部分

  全部(默认选项)
  专题
  逛街
  URL
  拼单
  团购
  关注
  其他

• 双日历控件

• 搜索按钮 - 点击时根据所选条件进行搜索；
• 导出所有搜索结果按钮 - 点击时导出该筛选条件下的搜索结果为 Excel，字段同上图筛选结果。

筛选结果列表
所有的订单数均指立即购买商品和将商品添加到购物车的次数(非用户数和支付次数)

每页显示 15 条数据，超出则换页，使用通用的翻页控件。

商品详情页

图为向上滑动后的界面，商品主图尺寸不变。

涉及界面

• 除“拼单”、“团购”、“购物车中查看”外的所有淘宝天猫商品详情，包括分类、逛街、URL 下单、搜索框搜索、关注；
• 逛街和 URL 下单中各 B2C 平台和未知链接这些情况，无买家评价入口、月销量和直接选 SKU，也就是说这些情况的界面不改动。

1. 抓取淘宝商品月销量/成交记录数

2. SKU 相关

增加一个选择 SKU 的入口

如上图所示，增加一个直接选择 SKU 的入口。提示文字:

选择: 颜色款式

交互动画
点击该区域后从屏幕右侧移入新 SKU 面板

移入的交互动效为 300ms 先快后慢

点击 SKU 面板中的 确认 和右上角的 × 按钮后，向屏幕右侧移出屏幕

移入的交互动效为 300ms 先快后慢

操作结果

• (有 SKU 按钮的商品)选好 SKU 点确定，返回详情页后颜色款式几个字变为所选的 SKU；
• (没有 SKU 按钮的商品)选好 SKU 点确定，返回详情页后颜色款式几个字变为所选的 SKU；
• 在已经选好 SKU 的情况下点击立即购买，则按照所选的 SKU，直接根据余额跳转到支付界面；
• 在已经选好 SKU 的情况下点击加入购物车，则按照所选的 SKU，直接添加到购物车；
• 如果在详情页选择了 SKU，点击立即购买或者加入购物车，然后返回，这时详情页上所选的 SKU 重置为空；
• 如果在详情页没有选择 SKU，直接点击立即购买或者加入购物车，但没去支付而是返回
  ，这时详情页上所选的 SKU 也重置为空。

3. 买家评价

调用图中没阴影的部分。

2期不涉及帮用户解决填写淘宝账号的问题，只需要将买家评价部分的页面调用。

交互动效
买家评价点击后，从屏幕右侧移入一个 HTML5 页面

移入的交互动效为 300ms 先快后慢

4. 购物车按钮

底部浮动层左侧增加购物车按钮，点击后从屏幕右侧移入购物车界面。

移入的交互动效为 300ms 先快后慢

购物车按钮右上角会有一个数字标记，表示当前账号中购物车里商品种类(不是商品总件数)的数量。

4.1 iPhone 版返回按钮

这种购物车界面导航栏左上角增加一个返回按钮，点击可以返回到商品详情:

4.2 Android 版返回功能

可以通过设备的返回按键返回到商品详情

5. 移除状态栏

顶部状态栏移除，这项改动作用于所有商品详情(普通商品详情/拼单商品详情/团购商品详情/导购商品详情)。

一方面可以结合新底部浮动工具栏省出屏幕高度，使得小屏手机比如 iPhone 5 的屏幕也能一屏显示出买家评价；
另一方面，在浏览商品详情时状态栏信息比较容易造成干扰。

(iPhone 版特定)选择 SKU 的面板也没有状态栏。

6. 界面剩余部分

原先店铺下方的继续拖动,查看图文详情、“图文详情”、关注`按钮调整好位置即可，功能和逻辑都不变。

7. 验收要求

由于改动的界面会直接影响到购物流程，测试的时候务必保证以下情况在线下测试的时候能正常支付:

• 从分类中打开的淘宝天猫商品；
• 从搜索框搜索出的淘宝天猫商品；
• URL 下单的淘宝天猫商品；
• 逛街中的淘宝天猫商品；
• 关注商品中的淘宝天猫商品；
• URL 下单的各 B2C 平台商品(不属于淘宝天猫商品也不属于未知链接)；
• 逛街中的各 B2C 平台商品(不属于淘宝天猫商品也不属于未知链接)；
• 关注商品中的各 B2C 平台商品(不属于淘宝天猫商品也不属于未知链接)；
• URL 下单中的未知链接；
• 逛街中的未知链接；
• 拼单商品；
• 团购商品

正常支付是指余额支付、Paypal 支付和信用卡支付(支付宝)都能支付成功。

测试过程中请通过商品详情右上角的联系客服功能，将测试的 URL 复制下来，整理到 Excel 表格中，以便了解测试工作。