这仅仅只是一个满额减的完整的流程，里面还涉及到阶梯满减的概念，那么除了满额减，还有满额赠，满量增，满量减，满额折，满量折，每一个都这么来一遍？中国人都绕晕了吧，何况还得翻译成英文，还得通俗易懂短小精悍，即使不考虑技术成本，如果这个作为第一个版本就这么个推出，基本就GG了。

所以，在功能框架一定的情况下，如果照搬国内的设计并且直接推出全套版本显然不能满足我们的需求，我们要另辟蹊径，站在国外友人的脑海里去考虑问题，去考虑他们的思考方式和语言特点，虽然我们要重新教育用户，但是要尽可能的将用户理解成本降至最低。

因此最终此功能的第一版大致方案框架是这样事儿的：

暂时舍去阶梯概念，舍去满折方式，以一个Icon为节点，囊括满额，满量两种活动方式，我们需要教育客户一看到这个Icon就知道这是类似于加价购的活动，不再在标识上区分满额，满量概念，在用户的购物动线上，从Icon，文案一步步引导用户，完成对活动的理解和参与，整个过程是个很自然的引导过程，不用再去让用户纠结规则，也不再去设置长篇大论的活动引导页。

到了这里，我们就不再出现加价购这个名词了，我们称之为APA活动体系，去养成用户对于APA活动的认知和使用习惯。

原型出图 前台原型出图

这个需求在原型制作环节整个页面展示虽然简单，但是涉及到多规则，后台设计多流程。前端页面动态数据较多，尤其注意规则说明以及异常说明详细无遗漏，否则到时候做完了测试的时候就不可避免的开怼。并且与用户的交互也比较多，所以我采取了低保真交互原型，并且把交互方式录成GIF放在原型包里面，（必须要特意去提醒开发和设计某些按钮是可以点的！！！）具体的原型这里就不放了（不要打我，我一般做低保真交互模型的原则是做出特定的交互方式，对于界面元素只是标注下信息层级关系，不会去加色彩以及按钮样式诱导设计师，每个人都有每个人的原型写法，如果有感兴趣的同学可以跟笔者交流下），在跟设计和开发反复沟通交流以及后两次评审会之后，我们的第一版前端成品是这样的：

商品列表页Icon展示：

由于以前设计规范的缺失，在商品列表页我们补充并且制定了活动功能的Icon规范，采用红底白字的Icon方式展示活动，这为后续的其他活动功能留下扩展空间，鼠标移入会有简短说明。

商品详情页活动规则以及选购商品展示：

商品详情页首先展示的是一段引导性文案，我们不会上来就告诉用户活动详细规则，因为第一英文解释起来实在太麻烦，二来过于繁琐的文案也会造成页面混乱。我们把既定的规则放入展开模块当中。这个页面涉及到的程序规则就是页面展示的相应文案，根据后台配置的活动类型不同而变化，比如满减活动，这里就会提示 “You have a chance to get this following fashion items in a low price:”

如果后台配置的是满赠活动，这里就会提示”You have a chance to get this items for free”,同时按钮文案也会变成 “See the free items”,里面的规则说明也会相应变化。

这个链接会引导客户去一个专门为APA活动定做的专题落地页当中，可供用户选择更多APA商品，当然这个专题落地页模板的制作也又是一个比较好玩的事情了，直接上部分设计稿吧（Low-price items里面的图标文案超出图标范围是因为我在截图的时候只是缩小了页面，但是文案是用html写的，不是图片，所以字体缩小不了）

商品专题页页面截图（部分）

购物车页展示：

示例截图1

示例截图2