双 12 商品列表页面 / 领代金券页面

@jean 2016-02-17T14:29:56.000000Z 字数 6772 阅读 4881

A-运营线 双12 主站 HTML5 代金券

文档改动

ID	时间	改动	讨论者
1	2015.11.25 11:40 AM	改动了 PC 的页面信息	Daisy
2	2015.11.25 5:40 PM	放上了 H5 活动页效果图	-
3	2015.11.25 6:05 PM	2.6 其他超链接中 "我的Panli-我的代金券" 不可在未登录时打开	-
4	2015.11.27 9:40 AM	放上了 PC 活动页效果图	-
5	2015.11.27 2:45 PM	增加了两个提示需求, 详见 4.1、4.2 两部分	Daisy
6	2015.11.30 9:40 AM	文档里超链接原来都是从新窗口打开, 现在改为在当前页面跳转, 点击键盘/浏览器的返回键可以返回到之前的位置	-
7	2015.11.30 11:30 AM	补充了未登录状态领券的处理 (PC、H5)	Eason、Wilson
8	2015.11.30 1:25 PM	补充了 PC 活动页右侧固定导航栏里打印机的超链接	Daisy
9	2015.11.30 2:15 PM	补充了 PC 活动页中几处未登录不可直接打开目标页面的处理 (邀请好友、我的代金券), 即登录后跳转回目标页面	-
10	2015.12.1 1:15 PM	改动了 PC 活动页点击收藏的警告框提示文字, "网页收藏夹" → "收藏夹"	-
11	2015.12.1 1:35 PM	补上了 PC、H5 活动页 URL	Daisy
12	2015.12.1 1:40 PM	倒计时 logo 两个显示规则中都增加了 "老版外页型头部 (类似拼单购页面)"	-
13	2015.12.3 10:05 AM	补充了 H5 页面上点击邀请好友区域时的处理	Daisy
14	2015.12.4 2:05 PM	补充了代金券编号	Daisy
15	2015.12.4 4:30 PM	取消了联合登录后的跳转页面的要求	-
16	2015.12.7 10:15 AM	补充了淘宝专区链接	Athena
17	2015.12.7 11:25 AM	活动上线前, 确定后台设置的4张代金券的上限和服务器端是否相同	-
18	2015.12.8 9:35 AM	收藏商品保存的价格为 Excel 里的 "淘宝价"	Daisy

1. 领代金券部分

需求原文

活动时间：2015年12月7日——12月12日
活动内容：
在双12导购列表上，包括PC+H5，有领券入口。领券面值有：
满100减5：不限量
满300减20：限量300张
满500减50：限量200张
满1000减100：限量50张
1、相同面值的券，每个用户仅限领1张；不同面值的券，每个用户可领2张券。
2、券领完后，提示已领完。

满 500 减 50 券的面额在最新的 PSD 文件中有改动, 改为 满 500 减 40.

1.1 活动平台

PC 主站领取页面
手机 banner 点进去的 H5 页面

1.2 领券时的各种 Case[1]

Case	领取券类	此券剩余张数	是否领取过此券	领取代金券总次数	是否可领取	警告框类型
1	`满 100 减 5`	任意	否	0	可领取	领取成功
2	`满 300 减 20`	有剩余	否	0	可领取	领取成功
3	`满 500 减 40`	有剩余	否	0	可领取	领取成功
4	`满 1000 减 100`	有剩余	否	0	可领取	领取成功
5	`满 100 减 5`	任意	否	1	可领取	领取成功
6	`满 300 减 20`	有剩余	否	1	可领取	领取成功
7	`满 500 减 40`	有剩余	否	1	可领取	领取成功
8	`满 1000 减 100`	有剩余	否	1	可领取	领取成功
9	`满 100 减 5`	任意	否	2	不可领取	已领两张券
10	`满 300 减 20`	有剩余	否	2	不可领取	已领两张券
11	`满 500 减 40`	有剩余	否	2	不可领取	已领两张券
12	`满 1000 减 100`	有剩余	否	2	不可领取	已领两张券
13	`满 100 减 5`	任意	是	1	不可领取	已领过此券
14	`满 300 减 20`	有剩余	是	1	不可领取	已领过此券
15	`满 500 减 40`	有剩余	是	1	不可领取	已领过此券
16	`满 1000 减 100`	有剩余	是	1	不可领取	已领过此券
17	`满 100 减 5`	任意	是	2	不可领取	已领两张券
18	`满 300 减 20`	有剩余	是	2	不可领取	已领两张券
19	`满 500 减 40`	有剩余	是	2	不可领取	已领两张券
20	`满 1000 减 100`	有剩余	是	2	不可领取	已领两张券
21	`满 300 减 20`	无剩余	否	0	不可领取	此券已被领完
22	`满 500 减 40`	无剩余	否	0	不可领取	此券已被领完
23	`满 1000 减 100`	无剩余	否	0	不可领取	此券已被领完
24	`满 300 减 20`	无剩余	否	1	不可领取	此券已被领完
25	`满 500 减 40`	无剩余	否	1	不可领取	此券已被领完
26	`满 1000 减 100`	无剩余	否	1	不可领取	此券已被领完
27	`满 300 减 20`	无剩余	否	2	不可领取	已领两张券
28	`满 500 减 40`	无剩余	否	2	不可领取	已领两张券
29	`满 1000 减 100`	无剩余	否	2	不可领取	已领两张券
30	`满 300 减 20`	无剩余	是	1	不可领取	已领过此券
31	`满 500 减 40`	无剩余	是	1	不可领取	已领过此券
32	`满 1000 减 100`	无剩余	是	1	不可领取	已领过此券
33	`满 300 减 20`	无剩余	是	2	不可领取	已领两张券
34	`满 500 减 40`	无剩余	是	2	不可领取	已领两张券
35	`满 1000 减 100`	无剩余	是	2	不可领取	已领两张券

1.2.1 条件之间的逻辑关系

每一行里各种条件之间是 "与逻辑/and" 的关系, 或者根据 Case 35 加粗的三个条件按 "或非逻辑/nor" 得出是否成功领取, 但即便如此仍然要按此优先级[2]判断以便弹出合适的警告框:

领 取 代 金 券 总 次 数 是 否 为 两 张 是 否 领 取 过 此 券 此 券 剩 余 张 数 是 否 为 零 前 面 都 没 发 生 的 话 成 功 领 取

$领取代金券总次数是否为两张 > 是否领取过此券 > 此券剩余张数是否为零 > (前面都没发生的话) 成功领取$

1.2.2 两个平台数据的一些说明

本次活动在 PC/H5 两个平台上都有活动页面, 两个平台共用同一个代金券池和领取记录:

PC/H5 两个平台上每种券的剩余券数是相同的, 不会出现 ~~一个平台有券而另一个平台没有券~~ 的情况;
在任何一个平台领取过某一种代金券, 领取过的券类也是共用的, 不会出现 ~~可以在两个平台分别领取到同一张代金券~~ 的情况, 也不会出现 ~~在两个平台领取的代金券总数 > 2~~ 的情况, 就算是在两个平台同时点 领取 按钮也不会出现

1.3 领取时的界面反馈

当出现 "可领取" 的情况时, 根据下表弹出网页警告框, 点击操作按钮后关闭警告框, 领取目标代金券, 并且:

更新该类代金券剩余张数
记录用户该券类型的领取记录
更新用户领取代金券总数
当出现 "不可领取" 的情况时, 根据下表弹出网页警告框, 点击操作按钮后关闭警告框, 不领取目标代金券
(PC 活动页) 未登录状态 点击 立即领取 时 , 在当前页面弹出登录窗口, 登录完成后刷新当前页面, 并且登录状态为 "已登录"

如果这时使用联合登录, 则 Facebook 登录页和微信扫码页从新窗口打开, 登录完成后跳转页面不要求
(H5 活动页) 未登录状态 点击 立即领取 时 , 弹出登录界面, 登录完成后回到活动页, 并且登录状态为 "已登录"

如果这时使用联合登录, 登录完成后跳转页面不要求

1.3.1 警告框的各种 Case

领取结果	对应上表 Case	提示文字	操作按钮
领取成功	`1/2/3/4`、`5/6/7/8`	恭喜您成功抢到代金券	`确定`
已领两张券	`9/10/11/12`、`17/18/19/20`、`27/28/29`、`33/34/35`	每个人只能领两张券哦	`我知道了`
已领过此券	`13/14/15/16`、`30/31/32`	这张券已经抢过了哦	`好吧`
此券已被领完	`21/22/23`、`24/25/26`	啊喔, 这张券已经被大家抢光了呢	`好吧`

1.4 活动页面上线时间

时区: 
UTC+8 北京时间 (CST/BJT) 
开始时间: 
2015.12.7 0:00:00
结束时间: 
2015.12.12 23:59:59

1.5 活动代金券

券类面值	券类编号	活动编号	数量	有效期	使用范围	可用终端
`满 100 减 5`	228FAC3E	13	无限	2015/12/12 0:00:00～2015/12/13 0:00:00	全部付款	全部终端
`满 300 减 20`	W64BCH8O	13	300	2015/12/12 0:00:00～2015/12/13 0:00:00	全部付款	全部终端
`满 500 减 40`	D66TOBCC	13	200	2015/12/12 0:00:00～2015/12/13 0:00:00	全部付款	全部终端
`满 1000 减 100`	2IK9T7FW	13	50	2015/12/12 0:00:00～2015/12/13 0:00:00	全部付款	全部终端

1.6 活动提醒

双 12 当天还会在 App 上推送提醒[3]给 还没用掉 (本次活动奖励的) 代金券的 用户.

2. PC 页面部分

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

2.1 领取代金券

未登录是否可使用

点击 立即领取 时, 按照 1.2、1.3 两部分来判断.

当出现这种某张券被领完的情况时, 页面上该券的图片变为:
此处输入图片的描述

页面上代金券已经显示 "已领完" 的时候, 立即领取 不可点击;
页面上代金券没有显示 "已领完" 的时候, 立即领取 仍然可以点击, 然后弹出正确的警告框反馈用户

2.2 邀请好友入口

此处输入图片的描述

从新窗口打开
未登录是否直接打开目标页面
此处输入图片的描述

    http://www.panli.com/mypanli/UserInfo/InviteFriends.aspx

2.3 右侧固定导航栏

此处输入图片的描述

2.3.1 固定位置

固定在浏览器窗口中, 并且始终显示在页面最上方, 具体固定的坐标位置与 @阳荣沟通.

2.3.2 点击效果

点击某专区时, 垂直方向 锚点到当前页面中 该专区标题
点击 Top/返回顶部 时, 垂直方向 锚点到 页面最顶部

交互效果

Animate:
ease out cubic
Time: 
300ms

2.3.3 打印机

此处输入图片的描述

从新窗口打开
未登录是否直接打开目标页面

    http://store.lg.com/CN/Product/ProductView.aspx?SvcPrdNo=14318

2.4 商品橱窗

此处输入图片的描述

点击收藏> 按钮
点击后弹出浏览器警告框, 并将该商品 (来源链接) 保存到用户的个人收藏夹, 商品价格 Excel 里的 "淘宝价"

警告框提示文字:
该商品已经保存到您的收藏夹
警告框操作按钮:
确定

未登录是否可使用
此处输入图片的描述

    目标页面 = 活动页, 也就是跳转回活动页 (最好能同时完成保存的动作)

立即购买 按钮
点击 点击收藏 按钮以外的区域, 包括 立即购买, 都是打开 (该来源链接对应的) 一键代购[4] 页面
从新窗口打开
未登录是否直接打开目标页面

2.5 二维码 in 底部说明区

/ 二维码扫描之后打开的都是应用宝链接

   http://android.myapp.com/myapp/detail.htm?apkName=com.panli.android

2.6 其他超链接

2.6.1 立即注册

此处输入图片的描述

从新窗口打开
未登录是否直接打开目标页面

    http://passport.panli.com/Register/

2.6.2 我的Panli-我的代金券

此处输入图片的描述

从新窗口打开
未登录是否直接打开目标页面
此处输入图片的描述

    http://www.panli.com/mypanli/Voucher/

2.6.3 淘宝专区超链接

此处输入图片的描述
从新窗口打开
未登录是否直接打开目标页面

Athena(高鹰 Athena) 10:20:59
女装
https://www.taobao.com/markets/20151212/nvzhuang/index
男装
https://www.taobao.com/markets/20151212/nanzhuang/index
鞋靴
https://www.taobao.com/markets/20151212/nvxienanxie/index
箱包
https://www.taobao.com/markets/20151212/xiangbao/index
美妆
https://www.taobao.com/markets/20151212/meizhuangxihu/index
配饰
https://www.taobao.com/markets/20151212/zhubaochongwu/index
居家
https://www.taobao.com/markets/20151212/baihuo/index

2.7 页面属性

<title>决战双12 一年剁一回 不止50%OFF 1212购物券抢先领 - Panli代购</title>
<meta name="keywords" content="Panli代购,代购,海外代购,华人代购,代购中国,淘宝代购,留学生代购">
<meta name="description" content="决战双12，一年剁一回！不止50%OFF，1212购物券抢先领！Panli网－全球最大的专业代购网络，为海外华人代购国内各种商品，方便您的购物需求">
<head>: 
见效果图, 即 PC 首页的新版
<boot>: 
见效果图, 即 PC 首页的新版

2.8 PC 活动页 URL

    http://www.panli.com/Special/sale_201512.aspx

3. H5 页面部分

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

3.1 领取代金券

未登录是否可使用

点击 立即领取 时, 按照点击 立即领取 时, 按照 1.2、1.3 两部分来判断.
当出现这种某张券被领完的情况时, 页面上该券的图片变为 (以设计稿为准) :
此处输入图片的描述

页面上代金券已经显示 "已领完" 的时候, 立即领取 不可点击;
页面上代金券没有显示 "已领完" 的时候, 立即领取 仍然可以点击, 然后弹出正确的警告框反馈用户

3.2 邀请好友入口

此处输入图片的描述

未登录是否直接打开目标页面

    http://www.panli.com/Special/m/20150519/default.aspx

3.3 页面属性

<title>先领券，再血拼</title> //显示在 App 导航栏标题位置
meta name="keywords": 
null
meta name="description": 
null
<head>: 
以效果图为准
<boot>: 
以效果图为准

3.4 H5 活动页 URL

    http://www.panli.com/Special/sale201512_H5.aspx

4. 活动期间的提醒

4.1 倒计时 logo

双12需求，再加一个双12倒计时，跟双11一样的。。。12月7日到12月11日是按天倒计，12月12日当天是按几时几分几秒倒计时

4.1.1 临时 logo 图

4.1.1.1 (待补)

4.1.1.2 (待补)

4.1.2 显示规则

4.1.2.1 按天显示型 (4.1.1.1 的图)

时区: 
UTC+8 北京时间 (CST/BJT) 
开始时间: 
2015.12.7 0:00:00
结束时间: 
2015.12.11 23:59:59
显示页面
首页型新头部、老版外页型头部 (比如拼单购页面)、老版内页型头部、团购域名头部
//拼单购网址 http://www.panli.com/Piece/

4.1.2.2 按时间显示 (4.1.1.2 的图)

时区: 
UTC+8 北京时间 (CST/BJT) 
开始时间: 
2015.12.12 0:00:00
结束时间: 
2015.12.12 23:59:59
显示页面
首页型新头部、老版外页型头部 (比如拼单购页面)、老版内页型头部、团购域名头部
//拼单购网址 http://www.panli.com/Piece/

4.2 一键代购页面提示语

    就是把双11换成双12

4.2.1 提示语文案

在海外，如何顺利抢购双12？
①提交双12订单时，建议注明备选颜色、尺寸、款式以及其他需要备注的信息，以便尽快为您抢购。
②如果Panli抓取的价格高于双12价，您可以先下单，稍后Panli会为您退还差价。

4.2.2 显示规则

时区: 
UTC+8 北京时间 (CST/BJT) 
开始时间: 
2015.12.12 0:00:00
结束时间: 
2015.12.12 23:59:59
显示页面
一键代购页面

5. 上线前准备

活动上线前, 确定后台设置的4张代金券的上限和服务器端是否相同.

$Engage$

[1] 点击这里下载《领券时的各种 Case》的表格 ↩
[2] 此优先级设计的目的是为了让用户在已经领过两张券的时候不再浪费时间 ↩
[3] 推送的具体时间和文案待定 ↩
[4] 类似于此页面 (请注意 encode 商品链接) http://www.panli.com/Crawler.aspx?purl=http%3a%2f%2fitem.taobao.com%2fitem.htm%3fid%3d522719899491 ↩