如何设计移动端H5产品优惠券（下）

在上一篇中，讨论了如何创建优惠券，本章将主要介绍优惠券是如何投放、领取和被使用的。如果有需要看优惠券是如何创建的请移步至：如何设计移动端H5产品优惠券（上）

优惠券功能信息结构

一、优惠券投放

在看待这个版块时，我们需要拆分为三个问题：什么时候投放？如何投放和在哪里投放。

首先，什么时候投放

在创建优惠券时，我们已经知道优惠券有有效期，而且是两种形式的有效期：一种是固定的时间段（适用于针对节假日推出的优惠券）；另一种是浮动的有效期，即：自领取时往后推固定天数（适用于拉新）。这个有效期定义的是优惠券可以使用的时间，也就是说超过这个时间，优惠券就失效了。那么问题来了，我们通过什么方式控制优惠券什么投放呢？是创建完了就直接在前台投放，还是需要专门设定一个投放的开始时间呢？

这也是为什么，第一篇中把优惠券基本属性和限制属性分开的原因，因为如果分开，就可以在活动中设定活动开始和结束时间，也就是说优惠券的投放时间是活动的有效时间范围内。但是我最终选择的不是这个方案，而是在创建和投放之间增加一个未发布的状态，即：创建之后，需要手动发布，手动发布后直接在前台进行投放，同时即可被领取。同样的，方案无优劣，这个方案由于舍弃了活动这一步可以以较短的开发周期完成上线。

其次，如何投放

既然是如何投放，那就是方式的问题，那么如果我们通过考虑自动投放和手动投放两种情况，它就可以满足MECE原则。

自动投放：顾名思义就是系统根据优惠券创建的所有限制属性，自动投放至预先设定好的位置，无需人工干预，到时上架、超时下架。所以在处理自动投放问题时，我们仅需要思考究竟需要在哪些地方投放优惠券，即：思考用户最有可能在哪里看到并领取优惠券，然后我们就在那里预先留好位置即可。

那么，作为产品设计者应该把优惠券放在那里呢？考虑用户想购买某种商品的操作流程，其实无非两种情况：

第一种，用户奔某个商品而来，即通过搜索/历史记录/购买记录直接找到某个商品去购买，那他必须经过商品详情页进行操作。这时候，我们把优惠券放置在商品详情页是最合适的。

第二种，用户想买某种商品，但是不知道哪个品牌好，他需要进行比较再决定。这时候我们可以利用优惠券将用户引导到我们希望让用户购买的那个分类，那这种场景应该是：用户打开应用-我们可以在首页添加专门的入口，将用户引导到优惠券集散地，让用户领取后再直接指向优惠券适用的商品列表，这时候 我们就需要一个优惠券集散地，即：领券中心。用户可以在这里领取所有优惠券，并跳转到领取优惠券适用商品的详情页/列表。

手动投放：即我们需要根据运营需求针对性的进行投放

例如：我需要做一个辣条的专场活动，整个页面布局是：上部宣传banner，中部是适用于专场的优惠券，下部是优惠券可以使用的所有辣条相关商品。如下图所示

当你看到下面这样一个页面的时候，有没有似曾相识的感觉？现如今各电商类APP或者H5 产品，都少不了这样或者那样的专题活动：满减、满赠、折扣、拼团、限时折扣、秒杀等等。基本都可以由下面这个基本页面架构进行扩展而成。那么这样的页面是如何实现的呢？（总不能每次都让前端写页面吧？），怎么让没有开发能力的运营喵玩转呢？

回到我们现在的问题，如果我需要做一场专题活动，这个优惠券怎么投放到专题页面？如下专题活动：

专题活动页面

如果我们把上面这个专题活动页面抽象出来，其实就是下面的结构：

辣条专题活动页面示意图

是不是还有点懵？ 即使我不说，大家都知道可以这样分啊，问题是我还是不知道这个页面是怎么做出来的啊！，但是如果这个页面做成了可以窗口化配置，你还这么认为吗？

什么意思？这就类似于windows和linux，windows之所以应用普遍，是因为它很图形化，通过鼠标、键盘就可以完成操作；而linux需要你学过linux操作的命令，这对于普通人来讲是不容易上手的。

对于这个页面来讲也是一样的，对于没有开发能力的运营喵来讲，不可能每次他们要做一次活动你都让前端攻城狮帮他写一个页面（注意，我们这里谈的是H5产品不是APP），有没有方法可以让没有开发能力的人一样可以写出这样的页面？

答案当然是肯定的

我们再来看下上面那个专题页面的示意图，我们可以继续把它进行抽象化，它其实就是由：Banner（图片）、优惠券、文字导航和商品列表组成，如下图所示：

模块化专题页面

如果我们预置一个HTML页面，提供：图片导航、优惠券、文字导航、商品 四种模块供用户选择，就可以让用户自定义页面的样式，完全摆脱工程师。

选择图片模块：用户即可在预定位置上传一张图片，当然这张图片还可以自定义外链或者跳转到指定页面，根据需求而定

选择优惠券模块：预置优惠券样式，用户只需要关联后台已经创建的优惠券，即可将相关数据传给指定的优惠券

选择文字导航：用户可以自定义文字

选择商品列表：预定义商品列表样式（图片大小、名称、价格等），用户只需要关联后台上架的商品即可。

做好这些数据关联保存后，就可以生成一张HTML的网页，然后我们要做的事情就是在店铺首页做一张Banner链接跳转到这张制作好的HTML网页即可。