小米商城 一个活动页的UI、交互优化案例！【高级篇】

为了进一步验证一排两个更合适，在设计帮的社群中，跟小伙伴们进行了一番探讨。

绝大多数人选择了一排两个的方案，当然也有人认为，一排三个的设计方案在首屏能曝光更多的商品，这个观点本身是没有问题的。

但从权重上来说，页面信息良好呈现体验更重要，再者首屏多呈现一个商品，因为信息密集也未必会更吸引用户，未必能提高转化率。

为什么不一排一个？

在群中有小伙伴也提出，为什么不用一排一个呢？其实原型图上交互设计师给出的方案确实是一排一个。

但其实一排一个会降低页面的屏效率，并不适用此活动首页中出现，因为“限时秒杀”也并没有一个二级页来承接所有秒杀商品。

运营上，每个秒杀时间段最多只会推出12个商品，所以交互上也没必要设计二级页面。

一般来说，横向一排一个的排版方式，适合专门的一个页面呈现，比如下图中的“京东秒杀”和“有品秒杀”他们都是从首页的一个入口点击进来，用一个页面承接所有推广商品。

案例解析-交互篇 

在现有的原型图中，有两个交互上的优化，非常值得跟大家分享，应该算是在交互设计中较为经典且实用的案例。 

案例一：

下图中的原型图，当用户米金不足时，按钮置灰不可点击，逻辑上看似没问题，但其实对平台没有任何价值，对用户也是较为鸡肋的存在。

改版后，按钮还是正常状态，并不告诉用户你的米金不足，而是当用户点击按钮时，使用弹窗告知用户你的米金不足，并且有按钮引导用户去赚米金，这个活动页有个非常重要的目的就是，让用户赚米金使用米金，下图所示。

弹窗中还有一个非常高级的优化点，就是左侧原本是“取消”按钮，改为“原价购买”。

原价购买的提示给用户的心理感受是，“我点它我就是吃亏了”，所以这样一来，能够促进用户点击赚米金的按钮。

另外，在这个模块中还优化了一个小小的点，就是价格和米金的信息呈现，原型图中是价格和米金并列排放，这样的表现形式不够直接，一定会使一些用户不好理解。

所以，改版后在价格信息和米金信息中间增加一个“+”号，这样就能明确让用户感受到，享受这个价格需要加这些米金。

案例二：

这个交互优化方案是页面最底部的模块，下图所示，原型图中是tab切换的方式，看似没什么问题的方案，但其实不妥。

因为我跟运营同学了解过，每个tab分类并不会很多，一般就是一两个，甚至有时候没有，所以从这点来讲，设计成tab切换不合适。

改版后把tab分类项，放在兑换券上面，成为他的标签，改为标签的原因是，其实用户根本不会关注品类，在这个模块中，用户关心的只会是商品本身。

然后在排列方式上，把所有的兑换券全部依次呈现，这样用户滑动一屏，基本上就能把所有券尽收眼底。

最后 

最后想跟大家说的是，在设计时间充裕的情况下，我们不妨多设计几种方案，每一种方案都从不同的角度去思考设计。

这样能有效避免我们的思考方向和角度，禁锢在一个设计方案中，另外多找参考和设计同行们进行探讨也是非常不错的方法。

文章来源：https://www.xueui.cn/experience/app-experience/active-page-ui-interactive-optimization-case.html