积分红包设计流程详解

12 评论 12058 浏览 123 收藏 12 分钟

2019年春节就要来临,为了满足用户在公司内部通讯产品上互发积分红包的需求,作者仿照微信红包撰写了一份积分红包的需求设计说明书,供大家参考学习。

一、积分红包通用规则

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

  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. 点击自己已领取的红包,弹出红包弹窗-自己已领取。

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

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

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

红包详情-自己未领取、未过期、已被领完页面:

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

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

红包详情-自己未领取、已过期页面:

红包弹窗-自己已领取:

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

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

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

 

本文由 @姚雪春linda 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 积分红包需要设计后台管理吗

    来自广东 回复
  2. 请问在app内部用积分发红包,会有什么相关法律法规的限制或者要求嘛?

    来自浙江 回复
  3. 学习一下,

    回复
  4. 这个积分红包用在哪里呢?

    回复
    1. 是公司内部的通讯产品😊

      回复
  5. 0岁产品小白,能加你微信问你一些页面设计问题吗?

    来自广东 回复
    1. 微信号:linda199027,欢迎交流~

      来自湖北 回复
  6. 支持你的设计文档,加油!

    回复
    1. 谢谢鼓励! :mrgreen:

      来自湖北 回复
  7. 支持一下新同学。刚好自己写了一篇红包的文章, 文章中设计居多。下次可以多分享一下设计思路。

    来自福建 回复
    1. 感谢支持~看了您的文章,确实思维逻辑性很强!我还要多多学习 😳

      来自湖北 回复
    2. 回复