大唐王朝#注册平台

发布于:2022-01-06 作者:admin 浏览人数:
电商产品每到节日几乎都会做促销活动,活动页就是承载促销活动的主要功能页面。
 
说到活动页大家的印象一定是视觉冲击力强,活动氛围很足,也确实如此活动页需要这样的感觉。
 
但是被过度设计的活动页会适得其反,比如混乱的元素、糟糕的排版、不合理的配色都会让用户反感,最终达不到活动预期。
 
本期我们就针对一个真实的活动页案例,进行有策略性、有依据的视觉优化。
 
 案例解析 
 
小米商城在816期间策划了感恩季活动,活动正式开始前,有订金预售阶段,用来预热和宣传活动,接下来要优化的就是预热会场活动页。
 
下图是市场部给到的活动页,经过我们设计团队和运营方的评估,认为设计未达预期,需要进行二次优化,下图所示。
 
 
优化前版本
 
从整体来看有活动氛围,但信息呈现、设计技法、色彩把控都有提升的空间,如果视觉呈现不够好,用户第一映像就会失去一定的信任感。
 
如果信息呈现不合理,用户很难找到信息重点和优惠卖点,就会降低导购效率,进而影响用户决策。
 
下面我们把每个模块的问题做一个详细总结,然后再针对性的去调整设计。
 
 优化前工作 
 
在优化前首先要充分了解活动,与运营同学进一步沟通,了解活动运营策略,比如需要了解活动主推哪些商品,然后把主推商品放置头图重点曝光。
 
了解预售会场在整个活动中的权重,权重大小决定视觉设计上的氛围强弱,比如预售会场肯定不能强过活动当天的活动氛围。
 
了解活动商品的主要卖点,然后通过设计手段合理表达。
 
做好设计前期的工作,就是有策略性、有依据的做设计。
 
另外再说一点,设计师前期与需求方进行一番深入的需求探讨和设计研究,不仅对设计有很大帮助,而且还会得到对方充分的信任,这样的合作最终都是更有价值的、愉快的。
 
 头图优化 
 
旧版
 
头图最大的问题是背景暗淡有脏脏的感觉,其次是背景元素杂乱与元素较多的主视觉放一起不够恰当。
 
头图的设计其实很好定义,主视觉元素复杂较多,那就设计一个简单的背景,主视觉简单,那就设计一个较为丰富的背景,可增强活动的氛围感。
 
标题有三个层级,活动主题、活动名称、活动卖点,三个信息层级本身没问题,但头图的下方又出现标签信息的卖点展示(上图的蓝条),这就导致头图的信息冗余。
 
头图上的商品摆放透视、大小、投影都没有处理的特别好,需要根据运营策略更换适合的商品。
 
标签的设计样式在头图与商品列表中间显得非常割裂,设计形式没有做好与整体的融合。
 
 
背景优化
 
头图的主视觉设计首先要符合业务策略,不能强于活动氛围当天的头图,所以与设计活动当天头图的同事进行探讨,想法达成一致后进行下一步的设计。
 
头图改版还是以现有的元素为基调,提亮背景,减少背景元素,调整主视觉位置,下方元素过多没关系,后面会用渐变遮挡。
 
 
商品优化
 
与运营同学确定主推摆放的商品,设计上放置商品也要有设计策略,比如两个白色的商品尽量分开放,电视机选择封面与背景对比强的等等。
 
商品投影的处理尽可能真实,商品整体加上了环境光,红色的台面商品就会反射红色光,做好这两点商品看起来融入感会更好。
 
 
 
标题优化
 
因为头图下方还要放置标签卖点,所以标题两行更合适,这样信息结构会更简洁。
 
“小米816 感恩季”的主题字,在所有的宣传海报都是红色,所以这里最好也应该是红色字,旧版使用蓝色字,感恩的寓意表达不是很强。
 
“预售会场”字号设计较大,比较突出,但因为使用浅色调并不会显得突兀。
 
字的投影与背景做了色调上的融合,整体看起来会比较协调。
 
 
下面分享一下投影的设计技法,非常简单,会的同学可以直接略过。
 
设计方法:字体转为图形,给一个合适的渐变色,在使用动感模糊,动感参数调整为15,角度调整为45度(根据光影设定)。
 
然后整体再给一个90%的透明度,这样能更好的与背景色融入,最后用白色的文字图层覆盖,调整位置即可。
 
 
标签优化
 
卖点标签的主要作用,是介绍此次活动最有吸引力的优惠政策,设计的要点需要突出文字优惠信息,还要做好与整体的融合。
 
设计上要做到让用户容易看到文字优惠信息,但也能让用户看过一次后,视觉上容易忽略掉,这就需要把握好设计的度。
 
优化后设计上加大字号,弱化背景色调,放置头图,头图背景使用渐变色与页面下方的底色融接,这样就会成为了一个整体。
 
 商品列表优化 
 
 
旧版
 
产品列表背景图,其实没必要再设计突出的样式,设计多处没有策略的突出样式就是过度设计。
 
头图已经强调了活动氛围,下面应该安静地展示商品更为合适。
 
商品列表的问题是卖点信息排版设计不合理,卖点信息放在列表右上角并不是最优的方案,因为文字多就破坏了列表信息结构。
 
另外,卖点信息使用了两个没有依据的颜色,再加上颜色由于明度高与白色字也没有拉开对比,这个问题直接导致用户容易忽略最关键的卖点信息。
 
另外,按钮中的小文字过于小,不符合UI的设计规范,活动页的文字元素还是要展示的直接明了,按钮渐变色的使用也有可提升的空间。
 
 
新版
 
优化后商品列表背景改为暖色调,用于简单的强调氛围,同时列表中也增加了活动主题标识(红色心形主题logo),进一步能强调主题。
 
把卖点信息融入列表信息中,用图标+红色字的样式突出,这样信息的呈现既工整,也做到了突出。
 
按钮的设计样式改为两边对比强烈的色调,渐变色使用左右渐变,旧版的上下渐变样式看起来鼓鼓的,其实是比较过时的样式。
 
立即预订按钮颜色依旧使用黄色,因为是预订流程还不是购买,所以黄色的寓意较为恰当。
 
 两坑列表优化 
 
旧版
 
同样的问题,两坑列表的卖点信息背景色与白色字对比度依旧没有拉开,这样很容易造成阅读困难。
 
两坑列表按钮是“立即购买”,所以使用强烈的红色更为恰当,红色同时也区别了黄色预订流程按钮。
 
另外,列表副标题字号过小不符合设计规范,这点也需要做字号的优化。
 
新版
 
改版后,卖点改为红色标签形式,放置左上角,调整排版样式和副标题字号,使用红色渐变按钮。
 
 标题优化 
 
 
旧版
 
先说一下此活动页后台配置的方式,设计师设计好活动页后,需要把页面分块切图给到运营同学,他们再把切图上传后台分别配置链接即可,最终形成完整的活动页。
 
配置方式就类似盖楼层,上图就是一个一个模块的标题,需要分别切图给到运营同学。
 
旧版的设计技法过于老旧,样式不够简洁,所以标题样式也需要进一步优化。
 
 
新版
 
优化后结合了感恩季主题元素,使用心形元素来装饰标题,对于此活动页这样简洁的设计形式更合适。
 
 底部Tab优化 
 
 
旧版
 
旧版底部Tab依旧是有很多装饰,其实底Tab空间并不大,这样的设计形式,对于商品图标来说不太容易识别,再加上字号也小于UI规范,视觉体验就会存在问题。
 
另外没有预留Home条位置,这也是一个比较严重的问题,这样切图配置后,文字会被Home条遮挡。
 
 
新版
 
针对旧版存在的问题,优化设计样式,减少修饰元素,以简洁突出商品为主,字号使用规范大小,预留Home条位置。
 
 
 最终整体效果 
 
最终效果
 
上图是优化后的效果,页面中根据运营需求又加了两个抢红包位置。
 
 最后 
 
设计的本质是助力业务拿到更好的结果,所以设计应该是有策略的、有目的的完成。
 
设计前期通透的了解业务,再结合业务做设计策略,那设计结果才会是经得起考验、更有价值的。
 
 
 

 

返回顶部