小米APP活动页UI改版，如何做有策略性的UI设计！

 前言 

电商产品每到节日几乎都会做促销活动，活动页就是承载促销活动的主要功能页面。

说到活动页大家的印象一定是视觉冲击力强，活动氛围很足，也确实如此活动页需要这样的感觉。

但是被过度设计的活动页会适得其反，比如混乱的元素、糟糕的排版、不合理的配色都会让用户反感，最终达不到活动预期。

本期我们就针对一个真实的活动页案例，进行有策略性、有依据的视觉优化。

 案例解析 

小米商城在816期间策划了感恩季活动，活动正式开始前，有订金预售阶段，用来预热和宣传活动，接下来要优化的就是预热会场活动页。

下图是市场部给到的活动页，经过我们设计团队和运营方的评估，认为设计未达预期，需要进行二次优化，下图所示。

优化前版本

从整体来看有活动氛围，但信息呈现、设计技法、色彩把控都有提升的空间，如果视觉呈现不够好，用户第一映像就会失去一定的信任感。

如果信息呈现不合理，用户很难找到信息重点和优惠卖点，就会降低导购效率，进而影响用户决策。

下面我们把每个模块的问题做一个详细总结，然后再针对性的去调整设计。

 优化前工作 

在优化前首先要充分了解活动，与运营同学进一步沟通，了解活动运营策略，比如需要了解活动主推哪些商品，然后把主推商品放置头图重点曝光。

了解预售会场在整个活动中的权重，权重大小决定视觉设计上的氛围强弱，比如预售会场肯定不能强过活动当天的活动氛围。

了解活动商品的主要卖点，然后通过设计手段合理表达。

做好设计前期的工作，就是有策略性、有依据的做设计。

另外再说一点，设计师前期与需求方进行一番深入的需求探讨和设计研究，不仅对设计有很大帮助，而且还会得到对方充分的信任，这样的合作最终都是更有价值的、愉快的。

 头图优化 

旧版

头图最大的问题是背景暗淡有脏脏的感觉，其次是背景元素杂乱与元素较多的主视觉放一起不够恰当。

头图的设计其实很好定义，主视觉元素复杂较多，那就设计一个简单的背景，主视觉简单，那就设计一个较为丰富的背景，可增强活动的氛围感。

标题有三个层级，活动主题、活动名称、活动卖点，三个信息层级本身没问题，但头图的下方又出现标签信息的卖点展示（上图的蓝条），这就导致头图的信息冗余。

头图上的商品摆放透视、大小、投影都没有处理的特别好，需要根据运营策略更换适合的商品。

标签的设计样式在头图与商品列表中间显得非常割裂，设计形式没有做好与整体的融合。

背景优化

头图的主视觉设计首先要符合业务策略，不能强于活动氛围当天的头图，所以与设计活动当天头图的同事进行探讨，想法达成一致后进行下一步的设计。

头图改版还是以现有的元素为基调，提亮背景，减少背景元素，调整主视觉位置，下方元素过多没关系，后面会用渐变遮挡。

商品优化

与运营同学确定主推摆放的商品，设计上放置商品也要有设计策略，比如两个白色的商品尽量分开放，电视机选择封面与背景对比强的等等。

商品投影的处理尽可能真实，商品整体加上了环境光，红色的台面商品就会反射红色光，做好这两点商品看起来融入感会更好。

标题优化

因为头图下方还要放置标签卖点，所以标题两行更合适，这样信息结构会更简洁。

“小米816 感恩季”的主题字，在所有的宣传海报都是红色，所以这里最好也应该是红色字，旧版使用蓝色字，感恩的寓意表达不是很强。

“预售会场”字号设计较大，比较突出，但因为使用浅色调并不会显得突兀。

字的投影与背景做了色调上的融合，整体看起来会比较协调。

下面分享一下投影的设计技法，非常简单，会的同学可以直接略过。

设计方法：字体转为图形，给一个合适的渐变色，在使用动感模糊，动感参数调整为15，角度调整为45度（根据光影设定）。

然后整体再给一个90%的透明度，这样能更好的与背景色融入，最后用白色的文字图层覆盖，调整位置即可。

标签优化

卖点标签的主要作用，是介绍此次活动最有吸引力的优惠政策，设计的要点需要突出文字优惠信息，还要做好与整体的融合。

设计上要做到让用户容易看到文字优惠信息，但也能让用户看过一次后，视觉上容易忽略掉，这就需要把握好设计的度。

优化后设计上加大字号，弱化背景色调，放置头图，头图背景使用渐变色与页面下方的底色融接，这样就会成为了一个整体。

 商品列表优化 

旧版

产品列表背景图，其实没必要再设计突出的样式，设计多处没有策略的突出样式就是过度设计。

头图已经强调了活动氛围，下面应该安静地展示商品更为合适。

商品列表的问题是卖点信息排版设计不合理，卖点信息放在列表右上角并不是最优的方案，因为文字多就破坏了列表信息结构。

另外，卖点信息使用了两个没有依据的颜色，再加上颜色由于明度高与白色字也没有拉开对比，这个问题直接导致用户容易忽略最关键的卖点信息。

另外，按钮中的小文字过于小，不符合UI的设计规范，活动页的文字元素还是要展示的直接明了，按钮渐变色的使用也有可提升的空间。

新版

优化后商品列表背景改为暖色调，用于简单的强调氛围，同时列表中也增加了活动主题标识（红色心形主题logo），进一步能强调主题。

把卖点信息融入列表信息中，用图标+红色字的样式突出，这样信息的呈现既工整，也做到了突出。

按钮的设计样式改为两边对比强烈的色调，渐变色使用左右渐变，旧版的上下渐变样式看起来鼓鼓的，其实是比较过时的样式。

立即预订按钮颜色依旧使用黄色，因为是预订流程还不是购买，所以黄色的寓意较为恰当。

 两坑列表优化 

旧版

同样的问题，两坑列表的卖点信息背景色与白色字对比度依旧没有拉开，这样很容易造成阅读困难。

两坑列表按钮是“立即购买”，所以使用强烈的红色更为恰当，红色同时也区别了黄色预订流程按钮。

另外，列表副标题字号过小不符合设计规范，这点也需要做字号的优化。

新版

改版后，卖点改为红色标签形式，放置左上角，调整排版样式和副标题字号，使用红色渐变按钮。

 标题优化 

旧版

先说一下此活动页后台配置的方式，设计师设计好活动页后，需要把页面分块切图给到运营同学，他们再把切图上传后台分别配置链接即可，最终形成完整的活动页。

配置方式就类似盖楼层，上图就是一个一个模块的标题，需要分别切图给到运营同学。

旧版的设计技法过于老旧，样式不够简洁，所以标题样式也需要进一步优化。

新版

优化后结合了感恩季主题元素，使用心形元素来装饰标题，对于此活动页这样简洁的设计形式更合适。

 底部Tab优化 

旧版

旧版底部Tab依旧是有很多装饰，其实底Tab空间并不大，这样的设计形式，对于商品图标来说不太容易识别，再加上字号也小于UI规范，视觉体验就会存在问题。

另外没有预留Home条位置，这也是一个比较严重的问题，这样切图配置后，文字会被Home条遮挡。

新版

针对旧版存在的问题，优化设计样式，减少修饰元素，以简洁突出商品为主，字号使用规范大小，预留Home条位置。

 最终整体效果 

最终效果

上图是优化后的效果，页面中根据运营需求又加了两个抢红包位置。

 最后 

设计的本质是助力业务拿到更好的结果，所以设计应该是有策略的、有目的的完成。

设计前期通透的了解业务，再结合业务做设计策略，那设计结果才会是经得起考验、更有价值的。

主页君个人微信

添加主页君个人微信领取：大厂设计规范及组件库、免商中文字体、样机、作品集等

推荐阅读

（点击标题可跳转阅读）

微软的亚克力玻璃柔光风格，也太美了！
当自动布局遇上组件，一定别踩这个坑！
反转！冬奥会海报遭抄袭原作者，竟也涉及侵权？！

回复 灵感 下载UI设计灵感合辑

点个 “ 在看” 好文不断