[关闭]
@jean 2015-05-11T10:02:57.000000Z 字数 10208 阅读 2597

以旧带新 - 邀请微信好友注册赢代金券

以旧带新 代金券 A-运营线

如果没有特殊说明，本文档中所说的“公众号”均是指“番丽电商Panli代购”服务号，公众号二维码和公众号名片也是此服务号的二维码和名片。
如果没有特殊说明，本文档中所说的“红包金额”均是指“该红包内所有代金券的总面值”，满减券按“减多少钱”计算面值。

Panli 主站部分

提示标记 -“礼”

网站全局的头部，在我的Panli上增加一个漂浮在最上方的“礼”，吸引用户点击，效果大致为:
此处输入图片的描述
我的Panli右边当然也有一个箭头，与购物车类似，但左边不需要图标。
鼠标悬停时
此处输入图片的描述
悬停时显示一个菜单，字体样式与购物车悬停一致。里面有个邀请好友选项，点击时跳转到以旧带新活动页(非宣传页)。//到时候会补上链接

活动页入口位置

(账户管理标签下的)个人资料下方，增加一项邀请好友，作为 PC Web 端“以旧带新”活动的入口，在不同情况时显示效果为:
正常状态/鼠标未悬停也未点击时
此处输入图片的描述
相比普通的文本按钮，此按钮为红色无下划线
鼠标悬停时
邀请好友使用“个人资料”的悬停样式，“new”标记不变。
此样式与其他文本按钮一致

此效果能使所有打开我们网站的用户都很容易进入活动页。
由于后面涉及到绑定微信账号以及奖励发放的问题，要求只有登录状态下才能够打开活动页，不会有未登录状态打开活动页的情况。

下面开始的流程较为复杂，浏览文档时建议结合流程图文件。

PC以旧带新活动页(刚进入时)

点击邀请好友后，从当前页面进入到活动页。每当打开此活动页时，都会进行一个判断，如果该账号没有绑定微信账号，则有这部分的流程。
这里会有一个动画效果:

页面被一层阴影覆盖，阴影出现的动画效果为“fade/淡入淡出 300ms”，与此同时从页面底部将一个对话框沿着 Y 轴正方向移至屏幕中间，且固定在浏览器中(不会因为滚动页面而移动在屏幕的位置)，移动的动画效果为“先快后慢 300ms”，具体效果参见原型。
此处输入图片的描述

这部分文案以文档为准

标题文字

邀请好友拿好礼，你就领豪礼！

提示文字

每次最高可获得价值1000元红包

两个操作按钮 - 右上角的X和请先绑定微信，豪礼享不停～

  • 点击X时，当前页面返回到活动页的上一个页面(如果没有上一个页面则返回到 Panli 首页)；
  • 突出请先绑定微信，豪礼享不停～按钮；
  • 点击请先绑定微信，豪礼享不停～时，从当前页面打开微信扫码登录页。

微信扫码登录页

由于此页面是微信平台自行制作，文案和二维码是现成的，这里只说明交互部分。

PC 以旧带新活动页(刚完成绑定微信时)

刚从微信扫码登录页返回时，活动页上的对话框和阴影层都不在了。

至此，引导用户绑定微信账号的工作已完成。再次说明，如果用户的账号本来就绑定了微信，那么不会出现这套流程。点击账户管理页面上的邀请好友后，直接跳到接下来的流程。

PC 以旧带新活动页(已绑定/绑定完成后)

@视觉设计 页面内容包括:

用户分享的流程还没有结束,接下来的流程将被引导至微信上,请浏览接下去的文档。

此部分页面没有任何交互动作，页面内容请参考视觉稿。

微信端

(背景填充)响应式设计的一点说明

由于此次活动会展示在不同分辨率的设备屏幕上，所以需要使用响应式设计。举例来说明:

使用场景

微信端有四种场景(建议结合流程图一起浏览本文档):

直接打开公众号

已关注了公众号的用户，直接在微信打开公众号，开始此流程。

(文档中统一称为)公众号首页

1.1 公众号自动推送的第一条消息
刚关注公众号的用户，会收到公众号自动推送的一条信息，这条信息中，会有一个超链接，点击可以打开“公众号文章 - (以旧带新)活动规则说明”，以了解我们以旧带新的活动规则。
此处输入图片的描述

1.2 (文档中统一称为)公众号菜单
公众号底部，可以自定义一些按钮，组成一个菜单。本次“以旧带新”活动届时将会取代掉现在的“十年账单”。显示的文字如下图:
此处输入图片的描述
点击进入发放红包页面
公众号菜单需要技术这边来做，以及接管自动推送的信息。

1.3 成功领取红包时，收到红包时的推送消息也由此公众号发出。文案内容:

分享获得的红包

标题: 领取红包通知
内容: 恭喜您成功邀请您的好友-叶蓝妃！
成功领取: Panli代金券红包1个
红包金额: 100元
如何使用代金券？点击本消息立即查看。

领取别人的红包

标题: 领取红包通知
内容: 恭喜您获得Panli红包！
成功领取: 叶蓝妃发的Panli代金券红包1个
红包金额: 100元
如何使用代金券？点击本消息立即查看。

最后会出现在这样的框框里:

此处输入图片的描述
文案以上文为准，此处仅说明效果。

由于代金券的获得时，新用户不会事先安装 App/随时会打开我们网站查看，因此利用公众号的推送来实现这个推送消息。顺便告诉用户如何使用这个代金券。
点击上图的文章可以查看“代金券使用说明”的页面。

红包发放规则请查看“红包发放相关的一些问题”部分文档。

1.4 公众号文章 - (以旧带新)活动规则说明

包含这几部分内容:

这篇文章建议用公众号文章的形式，后面还有其他地方有机会查看。便于用户有更多的机会关注公众号。

1.5 公众号文章 - 代金券使用说明

包含这几部分内容:

这篇文章仅在收到红包奖励时推送给用户，详细情况参考视觉稿。

发放红包页面

使得红包分享出去的时候，显示在朋友圈里那条可以点的链接。

**头像为用户微信头像，名字为用户微信名字。**

PC 上扫码打开了公众号名片

未关注公众号时，微信里会提示用户关注公众号，不关注的话无法继续接下来的流程；
已关注公众号时，可以直接进入公众号首页。后面的流程与直接打开公众号一致。

分享链接打开时的默认页面

之前开会的时候，管总表示“生成红包”和不同情况下用户点击“分享链接”后的两个默认页在技术上可以跳过。“生成红包”的页面已经从流程中移除，但考虑到点击“分享链接”的情况多种多样，而且需求方还有单独的说明文字要求，本文档中依然保留了这个节点。

不论打开“分享链接”的用户是否是分享者本人，也不论用户是否登录以及登录后的各种情况，打开“分享链接”时，总是会先打开一个右上角没有三个小点“打开微信的分享菜单按钮”，也就是没有这个:
此处输入图片的描述
因为这时用户大多数情况下还没有登录，用户都不知道其朋友分享给 ta 的红包大概是什么就直接弹出登录页面又非常突兀，无法直接转发。

打开此页面时，如果红包的分享者在 Panli 有过订单，则会展示其在 Panli 的注册天数(也就是使用时间)，以及买过几次东西，先使用这段文案:

我是 Panli 小伙伴 Athena～
使用 Panli 91 天了，买过7次东西，
感觉棒棒哒，邀请你一起来～

如果红包的分享者在 Panli 没有过订单，则会展示

我是Panli小伙伴Athena~
使用Panli很久了，感觉棒棒哒，邀请你一起来~

头像为用户微信头像，名字为用户微信名字。

点击红包上的拆红包即可打开红包(继续接下来的流程)，这里用“拆”而不用“领取”，对大多数领取者来说更为亲切，也暗示了红包已经领到了，拆开即可。

活动规则页面

每个红包页面(发红包/拆红包/领取成功/已领取/国内)上的活动规则按钮，点击之后打开公众号文章:

http://mp.weixin.qq.com/s?__biz=MjM5OTIzMzMzMg==&mid=207113294&idx=1&sn=f636599efed0d42c3d3ea494e7526fe8#rd

与 App 打开一个小弹窗不同。

(红包)分享者打开自己分享的红包

如果点击“分享链接打开时的默认页面”上拆红包按钮的是分享这个红包的本人，则提示不能领自己发的红包，同时引导 ta 可以继续转发以获得红包。
页面上会有一个点此了解详情按钮，点击可以打开“公众号文章 - (以旧带新)活动规则说明”。

这个页面右上角有三个小点“打开微信的分享菜单按钮”，也就是这个:
此处输入图片的描述
用户随时都可以直接转发。

(红包)领取者打开别人分享的红包

由于点击“分享链接打开时的默认页面”上拆红包按钮时，系统会判断不是分享者本人点击，不是本人点击时，会有这个场景出现。这时会根据用户是否开启了手机定位，出现两种情况:

  • 如果用户允许，则打开“微信授权登录”页面，根据用户的操作和情况继续接下来的流程；
  • 如果用户不允许，则关闭警告框，除非用户允许，否则无法继续接下来的流程
微信授权登录页面

页面是微信方自己的，此时只提供两种操作:
点击< 返回按钮，返回到“分享链接打开时的默认页面”；
点击确认登录按钮，用于登录。这时走一遍 App 版微信联合登录的流程，完成账号的创建/登录。
也就是说，在登录的时候不用管账号是否有联系邮箱，未注册的以“我是新用户”的身份注册，已注册的直接登录，补邮箱这个步骤留到客户端/网站上。

登录完成后跳转到一个空白页,此时有这些情况:


授权使用定位信息时，又会有这么几种情况:

这几种情况
已领取过此分享者的红包(不在国内)
告知用户已经领取过此用户的红包，以及如何使用代金券，代金券的用处，领到的代金券总金额。 这个页面右上角有三个小点“打开微信的分享菜单按钮”，也就是这个:

此处输入图片的描述

用户随时都可以直接转发。 页面上还会有两个按钮: `下载 App`、`接力转发`。 点击`下载 App`时，打开我们应用宝的链接

http://a.app.qq.com/o/simple.jsp?pkgname=com.panli.android&g_f=991653

点击`接力转发`时，打开一个蒙版层，告知用户直接点击右上角来分享。
已领取过此分享者的红包(在国内)——这种情况发生时，打开的是未领取过此分享者的红包(在国内)页面。//补充于2015.4.21 15:20

[重要] (领取的)双唯一规则
对于一个 Panli 账号B，只能领取“分享者 Panli 账号A / 分享者微信账号W”最多一次红包，不会因为分享者 Panli 账号 A 绑定了其他微信账号X 使得分享的红包能再次被领取，也不会因为分享者微信账号 W 注册了一个新 Panli 账号 C 使得分享的红包能再次被领取。
只有当这些条件全部不符合时，才算做没有领取过此分享者的红包。

未领取过此分享者的红包(不在国内)
恭喜用户成功领取红包，告知红包已发放至其 账号中，以及如何使用代金券，代金券的用处，领到的代金券总金额。 这个页面右上角有三个小点“打开微信的分享菜单按钮”，也就是这个:

此处输入图片的描述
用户随时都可以直接转发。

页面上还会有两个按钮: `下载 App`、`接力转发`。 点击`下载 App`时，打开我们应用宝的链接

http://a.app.qq.com/o/simple.jsp?pkgname=com.panli.android&g_f=991653

由于公众号之外的环境下原来的下载页面点击后不能跳转到 iPhone 版，因此更换链接。//**改动于5015.5.8** 点击`接力转发`时，打开一个蒙版层，告知用户直接点击右上角来分享。
未领取过此分享者的红包(在国内)
告知国内用户不能领取本次活动的红包，同时引导 ta 可以继续转发以获得红包。 这个页面右上角有三个小点“打开微信的分享菜单按钮”，也就是这个: ![此处输入图片的描述][9] 用户随时都可以直接转发。 页面上还会有一个按钮: `发红包`，点击`发红包`时，打开一个蒙版层，告知用户直接点击右上角来分享。
关于接力转发/二次分享的说明//补充于2015.4.23 10:57
微信聊天界面中，长按分享链接转发时//补充于2015.4.24 13:46

数据统计

页面埋点

[重要]红包发放相关的一些问题

红包被领取时，奖励总是发至分享红包的“微信用户个人信息ID”所绑定的 Panli 账号；
成功领取红包时，奖励也总是发至分享红包的“微信用户个人信息ID”所绑定的 Panli 账号。

Panli 账号 A 与微信号 W 绑定，解绑后，微信号 W 的分享福利还是送给 Panli 账号 A ，除非微信号 W 绑定了另一个 Panli 账号

用户在公众号菜单点击“邀请好友”时，有一个创建账号 / 登录 的流程，这时候用户已经处于登录状态。

总的原则就是: 保证用户能正常领取到 ta 应得的红包，作为其为我们邀请来一个新用户的奖励。

App 端

MyPanli 部分 - 邀请图标

MyPanli 首页，用户头像右边增加一个小图标，表示这是“邀请好友”功能的入口。
此处输入图片的描述

小红点规则

  • 今日为邀请时，显示小红点；
  • 今日已邀请时，不显示小红点 (微信返回邀请成功时，算做已邀请)

用户名换行规则:

用户名所在的 label 宽度，以现在字体大小的6个汉字作为标准宽度，如果用户名超出这个宽度，则换行。//不再按字符数作为换行标准，改动于2015.4.21 17:00.

@前端工程师

警告框标题

Panli 提醒

提示文字

邀请微信好友需要安装微信客户端。

只提供一个操作按钮 - 我知道了

点击我知道了时，关闭警告框

App 以旧带新活动界面(刚进入时)

点击“邀请好友”图标后，从当前页面进入到活动页。每当打开此活动界面时，都会进行一个判断，如果该账号没有绑定微信账号，则有这部分的流程。
如果打开此界面时该账号没有绑定微信，则有以下效果:

界面被一层阴影覆盖，阴影出现的动画效果为“fade/淡入淡出 300ms”，与此同时弹出一个警告框(原型里警告框的文案与文档不同时，以文档为准)
警告框标题

绑定微信，派红包超方便

提示文字

绑定无法获取您的个人隐私，您也可以随时解绑。

两个操作按钮 - 左边为不，谢谢，右边为去绑定

  • 点击不，谢谢时，返回到 MyPanli；
  • 去绑定按钮字体颜色在 iOS 8 下为红色，Android、iOS 7 及以前的 iOS 系统字体颜色没有要求；
  • 点击去绑定时，隐藏警告框和阴影层，跳转到微信去授权，功能相当于 App 内绑定微信账号。

如果遇到“用户不授权”、“授权信息传输失败”等授权不成功的情况，跳转回 Panli App 时，黑框提示“绑定失败”，自动跳回 MyPanli。跳回后界面重置为默认值。

重要问题 - 同步登录

App 打开邀请好友页面时， 邀请好友页面是以 App 登录账号的身份登录的，之前的活动没有强调过，功能发布时也没有验收过，此功能如果不行直接影响 App 上这个活动。需要注意。

App 以旧带新活动界面

界面需要常规的顶部导航栏，嵌一个HTML5页面:

App 以旧带新活动页面

红包内代金券发放相关

  1. 先确定首次奖励外发放的代金券张数 Quantity(简称为Q)
    在 0-100 范围内的随机数X，X⊂(0-100)，则有：
    不同情况下的期望值

    不使用完全独立随机事件(类似正态分布)抽取代金券张数的考虑：

    • 这样不太容易得到太多的张数导致浪费，也不太容易得到太最少的张数导致不满意或不够用；
    • (获得最少的两种情况概率更低)也使得用户更有动力转发；
    • 如果按每张代金券面值为10元来计算，此方案的10种情况得到的代金券期望值与完全独立随机事件相同(都为55不变)，没有在原来全随机事件的方案上增加额外的计提成本。

  2. 再确定发放的具体代金券奖池类型

    • 所有随机数之间不是换算关系得出，每次都是单独生成，以免每次发放的代金券种类非常有规律性(比如卡伪随机数的情况)；
    • 假设被领取奖励中代金券的种类为S1，排除首次被领取奖励中代金券的种类为S2，排除所有非满减券的种类为S3: 如果抽取过程中遇到非满减券，则将这一面值的非满减券从奖池中暂时移除，使得抽取下一张代金券时不再会抽到这种已经抽到过的非满减券。
    • 目前只有一种非满减券，S2 与 S3 相同，但不排除以后有增加非满减券种类的可能，这里建议还是直接区分开来。
    • 确定具体发放张数和奖池后，抽取的具体哪种代金券的概率独立随机。

需求原文

  • 首次被领取，一张非满减 + 从S1中抽取1～10张； //但非满减券只能获得一张
  • 非首次被领取，从S2中抽取1～10张； //但非满减券只能获得一张
  • 首次领取，一张60-50 + 从S3中抽取1～10张；
  • 非首次领取，从S3中抽取1～10张；
    //将中文奖池改成S1、S2、S3，并且改动了歧义说名，改动于2015.4.22 10:03

  1. 开始发券，有以下4种情况：

    • 首次被领取时，奖励一张10元非满减代金券 + Q张代金券(从S2中随机抽取Q次)；//但非满减券只能获得一张
    • 非首次被领取时，奖励Q张代金券(从S1中随机抽取Q次)；//但非满减券只能获得一张
    • (无 Panli 消费记录的)新用户首次领取时，奖励一张满60减50代金券 + Q张代金券(从S3中随机抽取Q次)；
    • (无 Panli 消费记录的)新用户非首次领取以及(有 Panli 消费记录的)老用户领取时，奖励Q张代金券(从S3中随机抽取Q次)//首次领取奖励仅限无消费记录的新用户，补充于2015.5.5 11:39

  2. 以旧带新活动奖励的代金券有效期
    对于微信已经绑定了 Panli 账号的用户，以上所有发放的代金券，开始时间都是自发放时开始，有效期14天；
    对于从公众号关注保存了微信个人信息ID，但并未登录以创建 Panli 账号的用户，发放的代金券有效期开始时间请参考“红包发放相关的一些问题”部分。。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注