积分红包设计流程详解

作者 @陈梦蝶 原文地址 http://www.woshipm.com/pd/1763869.html

一、积分红包通用规则

首先确定积分红包的通用规则如下：

1. 1积分=0.1元；
2. 发红包单次金额限制2000积分；
3. 积分领取最小额度为0.1积分；
4. 个人红包只能对方领取，自己不能领取；群红包可以自己领取。

二、积分红包页面流程

对微信红包进行了研究后，我分别梳理了个人红包页面流程和群红包页面流程。
个人红包页面流程：

群红包页面流程：
**

三、个人红包页面设计

1. 发红包的人

聊天-积分红包按钮页面：

用户点击【积分红包】按钮，进入发积分红包页面。

发积分红包页面：**

1. 能输入数字和小数点，只能输入到小数点后1位，金额超过2000积分弹出提示“单个红包金额不可超过2000积分”；默认为0.0，为0.0时【发红包】按钮置灰。
2. 字数限制为25字。默认和为空是“恭喜发财，大吉大利”。
3. 提示语有三种，每次进入发积分红包页面时会随机显示，分别为：（1）未领取的积分红包，将于24小时后退回积分账户；（2）对方可领取的红包金额为0.1-2000积分；（3）可直接使用收到的积分发红包。
4. 金额输入正确后，【发红包】按钮高亮，点击跳转到支付页面。

聊天-红包页面：**

1. 点击未被领取、未过期的红包，进入红包详情-未被领取、未过期页面；
2. 点击未被领取、已过期的红包，弹出红包弹窗-未被领取、已过期；
3. 点击已被领取的红包，进入红包详情-已被领取页面。

红包详情-未被领取、未过期页面：
**

红包弹窗-未被领取、已过期：

点击【查看领取详情】按钮，进入红包详情-未被领取、已过期页面。
红包详情-未被领取、已过期页面：

红包详情-已被领取页面：
**

2. 收红包的人

聊天-红包页面：

1. 点击未领取、未过期的红包，弹出红包弹窗-未领取、未过期；
2. 点击未领取、已过期的红包，弹出红包弹窗-未领取、已过期；
3. 点击已领取的红包，弹出红包弹窗-已领取。

红包弹窗-未领取、未过期：**

红包弹窗-未领取、已过期：

红包弹窗-已领取：

点击【查看领取详情】按钮，进入红包详情-已领取页面。

红包详情-已领取页面：**

四、群红包页面设计

1. 发红包

群聊-积分红包按钮页面：

用户点击【积分红包】按钮，进入拼手气红包页面。
拼手气红包页面：

1. 默认为拼手气红包：
   (1)若已输入总金额，则切换为普通红包时，总金额变为单个金额；
   (2)若已输入红包个数，则切换为普通红包时，红包个数不变；
   (3)若已输入总金额和红包个数，则切换为普通红包时，单个金额=总金额/红包个数，单个金额精确到0.1；若除不尽则要改变总金额：如总金额为20，红包个数为3，则切换为普通红包时，单个金额=20/3=6.6，支付总金额变为19.8。

2. 只能输入数字和小数点，只能输入到小数点后1位，总金额超过200000积分弹出提示“单次支付总额不可超过200000积分”；默认为0.0，为0.0时【发红包】按钮置灰。

3. 只能输入数字，为0时【发红包】按钮置灰；单个红包金额超过2000积分时弹出提示“单个红包金额不可超过2000积分”；单个红包金额低于0.1积分时弹出提示“单个红包金额不可低于0.1积分”；红包个数超过100时弹出提示“一次最多发100个红包”。

4. 字数限制为25字。默认和为空是“恭喜发财，大吉大利”。

5. 提示语有三种，每次进入拼手气红包页面时会随机显示，分别为：
   （1）未领取的积分红包，将于24小时后退回积分账户；
   （2）对方可领取的红包金额为0.1-2000积分；
   （3）可直接使用收到的积分发红包。

6. 总金额和红包个数输入正确后，【发红包】按钮高亮，点击跳转到支付页面。

普通红包页面：

1. 若已输入单个金额，则切换为拼手气红包时，单个金额变为总金额；若已输入红包个数，则切换为拼手气红包时，红包个数不变；若已输入单个金额和红包个数，则切换为拼手气红包时，总金额=单个金额*红包个数。

2. 只能输入数字和小数点，只能输入到小数点后1位，单个金额超过2000积分弹出提示“单个红包金额不可超过2000积分”；默认为0.0，为0.0时【发红包】按钮置灰。

3. 只能输入数字，为0时【发红包】按钮置灰；红包个数超过100时弹出提示“一次最多发100个红包”。

4. 字数限制为25字。默认和为空是“恭喜发财，大吉大利”。

5. 提示语有三种，每次进入普通红包页面时会随机显示，分别为：（1）未领取的积分红包，将于24小时后退回积分账户；（2）对方可领取的红包金额为0.1-2000积分；（3）可直接使用收到的积分发红包。

6. 单个金额和红包个数输入正确后，【发红包】按钮高亮，点击跳转到支付页面。

2. 抢红包

聊天-红包页面：

1. 点击自己未领取、未过期、未被领完的红包，弹出红包弹窗-自己未领取、未过期、未被领完；
2. 点击自己未领取、未过期、已被领完的红包，弹出红包弹窗-自己未领取、未过期、已被领完；
3. 点击自己未领取、已过期的红包，弹出红包弹窗-自己未领取、已过期；
4. 点击自己已领取的红包，弹出红包弹窗-自己已领取。

红包弹窗-自己未领取、未过期、未被领完：

红包弹窗-自己未领取、未过期、已被领完：

点击【查看领取详情】按钮，进入红包详情-自己未领取、未过期、已被领完页面。
红包详情-自己未领取、未过期、已被领完页面：

红包弹窗-自己未领取、已过期：

点击【查看领取详情】按钮，进入红包详情-自己未领取、已过期页面。
红包详情-自己未领取、已过期页面：

红包弹窗-自己已领取：

点击【查看领取详情】按钮，进入红包详情-自己已领取页面。

红包详情-自己已领取页面：**

以上是我梳理的积分红包需求设计说明书，欢迎大家交流指正~