电商教程!如何高效做大促页面设计

教程

教程作者:花田design (授权转载)

自己从事电商这几年积累的一些经验,希望可以帮助到刚入行或者处在迷茫阶段的电商设计师。

我们经常接触到的电商几大平台,天猫、京东、唯品会、聚美优品、蘑菇街等现在都是活动一波接一波;停不下来的节奏。作为电商设计师,做图、做大促页面、活动页面也是停不下来的节奏……

最开始,我也是很怕做大促页面、活动页面之类的,因为任务一下来,完全不知道从哪里着手。

懵逼也分2种情况:

1、运营不靠谱,只告诉你要做一个活动页面,其他什么信息也没有!!!

没有提供活动主题文案,没有活动促销信息,不知道主推产品是什么,就是除了“做一个活动页面”这句话,其他的TMD什么都没有!!!

2、运营还算专业,会提供详细的demo稿给你;包括活动主题文案,促销信息,时间,页面层级框架,每款产品的卖点及活动价格等,基本上的框架都有,设计师填图作画,把这些信息用图片的方式表达出来就ok。

——————————————-  分割一下   —————————————

第1种懵逼相信不需要多说了,是个人都会懵逼。我他妈做什么呀?这时候基本上一整天也不知道要怎么做?从哪里下手?有欠扁的运营还来问做的怎么样了,要快呀,简直分分钟想炸飙!!!

那第2种如果要懵逼的话,真的就是设计师自身的问题了,因为运营能给的东西基本上都到位了,如果你不知道怎么做,就要努力提升自己了。

还好,我总算悟出了一些解决方法:

针对第1种情况:主动和运营去沟通,哪怕他真的什么都不知道,也总归会有一些想法的。你问他活动主要要通过视觉传达给顾客什么信息?本次活动力度是怎么样的?有没有优惠券或者满额送或抽奖等活动?参加活动的商品有哪些?哪些款做主推?你抓着他问,他总会装逼式的说一些。然后你自己再整理一下他的需求。想方设法了解基本需求之后再动手,否则,可能改稿千万遍!!

如果有条件,参加活动的产品,产品价格以及优惠力度让运营助理给你整理出来,不然你公司产品多的话,这些东西你都要费大量的时间去整理,而这个时间会算在你出设计稿的时间之内。等于你自己花大量时间做运营助理的事,而boss和运营会把这些时间算在你的设计时间里面,并不会觉得你弄清楚需求及内容要花这么多时间。这个其实是运营无形中造的一个巨大的坑。

针对第2种情况:运营该给的都给了,当然你有疑问的还是需要找运营沟通,动手之前,搞清楚需求。然后实在不知道怎么做,先去找灵感。我个人常用的方法就是去花瓣、站酷等设计类网站看优秀的作品,看别人的页面是怎么做的,总结一下,基本上页面的框架都能出来了。当然找一个优秀的,直接抄是一种快速出结果的方式,而且还能短暂的麻痹自己,以为自己变大神了。但是这样的话,下一次要做页面你还是继续懵逼,然后抄别人的,所以真的要把优秀的作品总结出自己的东西,几次下来你会收获很多。

—————————————- 下面开始切入正题 —————————————-

一、页面的风格

这些风格都是我自己起的名,唐突之处莫怪哈,能理解就好。现在比较流行的

①手绘插画风:代表品牌【百雀羚三生花】【老金磨方】等

不安常理出牌的没有风格的风格:代表品牌【卫龙】反正涂鸦啦、名国风啦、苹果风,关注卫龙总会打到你的三观。

③吊炸天的霓虹灯风格:很多类目,很多品牌都用过。

④新型的剪纸风格

⑤高冷风格:

⑥牛皮鲜风格:各大运营老板最喜欢的风格。

⑦3D建模,塑模:

反正现在是百家争鸣、百花齐放的现状;每种风格都能拿捏最好,技多不压身。像手绘、3D这些实在不会也没有关系,可以通过PS合层去仿;其实扎扎实实学好版式平面,然后灵活运用,擅长一种风格就足够应对公司需求了。

二、页面的框架

做一个页面就像起一栋房子一样,先把地基和框架建好,房子才能建的又好又快。

页面的组成部分通常是:版头banner + 活动区(包括优惠卷、满额送、抽奖、等活动)+ 楼层区 + 页尾区

1、版头banner:

不管是手机端还是电脑端,顾客来到你家店铺第一眼看到的东西,所以氛围一定要足,吸引眼球。banner的组成就和海报是差不多的,产品(有的有代言人或模特)+主文案+辅文案+活动时间+背景+装饰。

版头banner的排版方式通常有:左右排版,居中(或左右对称)排版,左中右排版3种;根据产品的排版来选择适当的版式。当然足够个性的不规则排版方式也有使用,不过设计师对版式的把控能力要很高,不然会显得乱。

下面随便在网上截几张图示例一下,图片来自花瓣,如有冒犯,联系我立即更换。

相宜本草2016年情人节页面的banner:采用的是左右排版(左文右图或右文做图)▼

俏十岁这个页面版头banner也是左右排版▼

花王这种算是居中排版,做促销页面,居中是容易出氛围的一种方式▼

多乐士这个是左右对称(居中的一种),从中心发射的那种,天猫各大促官方页面常用的版式▼

丽得姿这个页面是典型的左中右分布,很多食品和护肤品类都喜欢用这种▼

2、活动区:

活动区的组成:优惠券+满送活

动+抽奖+送礼+其他类互动活动等,其中的1个或多个优惠方式组合。

搞完版头的气氛,就来点实在的优惠,优惠券基本是都有,那满送活动要看实际有没有,抽奖和其他活动一般都只在618、双11、双12、年终大促这种世纪活动才有的。

也来几张图片展示一下,图片来自花瓣,如有冒犯,联系我立即更换。

周生生圣诞节的页面▼

水密码日常页面的活动优惠区▼

兰蔻的页面活动区▼

3、楼层区:

楼层区是页面最长的一个板块。就像超市的货架一样,摆产品卖东西;主推款会放在最显眼的位置,也就是前面几屏黄金位置;我们通过电脑和手机买东西,拖动鼠标或滑动屏幕,一般都在前几屏,所以前面的产品要有足够的优势,肯定是店铺的主打款爆款,希望买家多买的产品。也是有足够优势打动买家的产品。

讲真,一个几十款产品的页面,顾客能看到中间位置已经是给你面子了,后面基本不会去看的。

主推款一般会有很多信息需要展示:降价信息、赠品信息、产品卖点、文案、价格等等,这些信息的层级怎么去把控,怎么样有主有次层次分明的展示给顾客而不显得乱,也是一个重点。这个后面再专门写一篇来说。今天主要讲页面的整体框架。

楼层虽然长但是就是铺货,版式确定后,直接复制铺货复制铺货就好了。能做些灵活变化,让画面不那么死板最好,但是切记变化不要太大,要在统一中求变化,不要整个页面乱的没有办法控制。

要注意:

①每款产品的促销标、功能标等都要保持一致,大小一致,位置相对一致(有的楼层版式左右变化的)

②每款产品的文案、价格等字体大小一致,颜色相对一致(楼层区不同小板块背景颜色可相对变化、那字体颜色也会相对变化)

SKII日常页面的主推款展示▼

(提一下,国际大牌,日韩高端品牌这些页面走的都是性冷淡风格哈,简约高端大气,人家是大牌,有底气!反正我就在这里,你爱买不买。那我们日常的大众品牌一般不会这么高冷的哈,大促页面都会走大红大紫大黄风格的。具体落地执行还是要根据产品风格、品牌定位和运营或boss需求,表现形式也是多样化)

相宜本草2016情人节页面主推款▼

丹姿618页面,美妆类目来说是一个常用且中规中矩的版式▼

花印楼层区主推款版式▼(好喜欢这条牛仔裤呀☀☀☀)

3、页尾

页尾常用的处理方式无非就是:①做个返回顶部的按钮。②售后保障之类。③品牌slogan之类。④没有页尾。

返回顶部这种记得和版头做好呼应▼

产品分类▼

页尾放了售后保障之类的内容▼

页尾放的品牌slogan,也可以有旺旺客服▼

好累,写一篇好花好几个小时的时间,谢谢花时间耐心看完的朋友。花田需要亲们的5分好评哦 [心]

结语

本期教程到这里就结束了,希望大家在练习过程中多思考、理解制作思路和操作方法,活学活用。

相关推荐:

→ 电商教程!Banner设计全解析及项目复用设计价值思考

→ 电商教程!如何快速的完成一个店铺首页


一个人做练习的时候,做得好没人发现,做得差没人点评,总感觉很难坚持下去呢···
从今天开始参与「优优教程网 365 天打卡计划」,每天一个小练习, 4 位U站管理员与大家一起打卡练习,点赞点评,互帮互助。优秀练习还有机会被优优转发
【参与方式】每天在 #优设每日作业# 内,上传打卡练习,话题微博格式【 DAY 01~365 】转发视为参加。(动图为打卡演示)
【收获】更好的自己

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,转载请联系 @优设基础训练营 授权。原作品版权归属原作者。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

本文链接: https://uiiiuiii.com/other/121245254.html

欢迎关注 @优秀网页设计 @优设基础训练营 @优设大课堂 @你丫才美工 @优设微电台 @移动端设计 @招聘设计师

继续阅读与本文标签相同的文章

促销页面电商
img

相关文章

教程评价

基于 1 条评论
5.0
平均分
5 stars
100%
1
4 stars
0%
0
3 stars
0%
0
2 stars
0%
0
1 stars
0%
0

发表评论

电子邮件地址不会被公开。 必填项已用*标注

CAPTCHA Refresh

  1. avatar头像

    你抓着他问,他总会装逼式的说一些。然后你自己再整理一下他的需求。想方设法了解基本需求之后再动手,否则,可能改稿千万遍!! 虽然这么说是有点不太好,但却是真理(手动滑稽)

把好文章收藏到微信

打开微信,扫码分享
优质教程 UiiiUiii 每日更新