标签： UI设计

从接收需求到产出？这过程中到底经历了什么？不妨来阅读本文作者的文字，一起来了解了解吧～【需求概述】
商品，增加商品类型，分为普通、赠品两种。赠品可下单购买，也可根据订单金额及对应代理级别配赠率赠送。可按照代理级别，设置对应级别的配赠率。当代理下单购买普通类型或赠品类型商品，配赠条件满足时，在支付订单前提供选择赠品操作，代理可选择配赠金额范围内的任意赠品，也可不选择；选择赠品，并支付成功后，对应订单增加配赠商品信息。
注：配赠金额=订单面价金额×对应等级配赠率。目标用户：某护肤品牌微商代理
年龄：18-40占绝大多数
性别：女性占98%
职业：微商
设备：iphone及以上
场景描述：某天，代理a在清点仓库库存的时候，发现最近热销的某品牌商品库存都不多了，想着，到时候缺货会影响自己的销售及客户的满意度，暗想着，要再进些货才行，于是她对库存不足的商品进行了一下盘点，盘点完毕后，她拿出手机，将需要订货的商品一一加入购物车，加入完毕后，她核对了一下商品的金额，正准备点“支付“按钮进行付款，忽然看到付款按钮上方有一条提示，说”还差500元就可获得免费赠品“，她心一动，反正要买，只要加500块钱，就能免费获得赠品，有何不可？于是她当即便在某一商品下面增加了数量，满额后，提示文字就变成了”可获得免费赠品“，确认金额后，她立即点了支付按钮，来到确认订单的页面，快速浏览了一下自己的收获地址及信息，便赶紧看获得什么样的赠品，果然，在支付的上方又看到了配赠说明的提示，提示我”选择赠品“（这里说明一下，之所以将提示语都放在同一位置，是为了让前面界面的视觉路径在同一水平点上，使页面结构更整洁），点击进入”选择赠品“界面，参照页面给出的赠品金额提示，选择了想要的赠品，由于选择的赠品太多，从上下拉到下浏览起来效率太低，于是她又点击了按钮”已选赠品“进行复核了一遍，确定完毕后，回到确认下单的页面，便满意的点击了”支付“按钮，发现金额与未选赠品前的金额一致，便放心的提交了订单，订单支付完毕后，引导代理来到了订单列表页面，上面还特意标明了”含赠品“字样提示，a点击进去再次看了一下所购的商品及赠品，准确无误会，抱着愉悦的心情关闭了应用与手机。
”1、商品列表及商品详情，赠品类型的商品须显示对应图标；
2、赠品类型商品同普通商品一样可正常下单购买；
3、购物车，根据代理当前所选商品的总面价金额及当前代理对应配赠率，如果配赠金额不为0，则显示相应配赠金额及提示信息（若当前配赠金额暂不足以购买系统当前上架的任意赠品，则显示提示信息：“还差××就可获得免费赠品”；若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时，则显示提示信息“可获得免费赠品”）；如果配赠金额为0，则不显示相应配赠金额及提示信息。
4、确认订单界面，若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时，则提供选择赠品操作项。未选择赠品时，操作项显示配赠金额、及“选择赠品”文案。已选择赠品时，若配赠金额-已选择赠品的总面价>0，操作项显示“已选择××元赠品，还可选择××元”；若配赠金额-已选择赠品的总面价=0，操作项显示“已选择赠品”。点击操作项进入选择赠品列表。
若当前配赠金额暂不足以购买系统当前上架的任意赠品，则不提供选择赠品操作项；
5、选择赠品列表，列表显示当前配赠金额可购买的所有已上架的且库存不为0的赠品类型商品，用户可点击选择，也可取消选择，当前选择的赠品总面价金额=配赠金额时，不可再继续选择更多（若再点击选择赠品，则提示“不能再选择更多了”）；提供显示选择提示信息“还可选择××元赠品”（××为配赠金额-已选配赠商品总面价）、“查看已选赠品”操作、“确认”操作。
点击“查看已选赠品操作”，可弹出浮框列表显示当前已选择的赠品信息。浮框提供关闭按钮，可点击关闭浮框；
点击“确认”操作，确认当前已选择的赠品信息，返回确认订单界面。
6、个人中心，增加显示当前代理的配赠率信息。
7、订单列表，若对应订单含有配赠商品信息（注：如果只是正常下单购买的赠品类型的商品，则同普通商品订单。此处指的是确认订单时根据配赠金额范围免费选择的配赠商品），则显示“含免费赠品”标签；
8、订单详情，若对应订单还有配赠商品信息（同7），则列表显示用户选择的免费获赠的商品信息（注：正常下单购买的赠品类型商品，显示在同普通商品位置。这里只显示确认订单时选择的免费配赠商品），并显示总的免费配赠金额信息。