中国电科旗下高技能IT教育培训机构

当前位置: 首页 > 公司动态 > 技术文章 > 双11电商设计指南:和天猫一起学习如何玩设计

双11电商设计指南:和天猫一起学习如何玩设计

2018-11-08 20:49:31

距离今年双11,还有仅仅2天了 !

胖友们,优惠券抢了好多张?

战队能量有多少了?预售款买到了吗?

定金付完没?

海报做完了么?N张图做完了么?

淘宝鏖战双11?快醒醒~


---------这是一条安妹扎心的分割线---------


安妹先跟你说个数据。

大家都晓得去年双11的网红——阿里设计平台鹿班。数据显示,2017年双十一,鹿班总共设计完成了4亿海报!鹿班的设计水准一直在持续进化,“鹿班”的创始者乐乘就发话说:“鹿班”预计在2018年双11可以达到阿里P6设计师的水准,相当于市面上的高级设计师,可以担当中等设计项目的主创人员。“

看到功能如此强大的“鹿班”,作为设计师的你,是不是也害pia地抱住了自己。


虽说人工智能来势汹汹,不断冲击设计行业,但其实它更多解决的是“体力”而不是“脑力”的问题。即便如功能如此强大的“鹿班”,目前也不能替代设计师的创意能力。

今天,帮大家分析双十一电商设计的流行趋势,包括场景、配色、角度、标题、辅助性元素等,干货+趋势,绝对值得一读!

还等什么,赶快跟着安妹一起来充电吧!


首先放一张天猫11.11入口图,

红金搭配,依旧是豪气、热闹亮眼得不要不要的。


1.jpg


今年的天猫双11给你的感受是什么:牛逼、炸裂、绚丽,过目不忘、流连忘返?那么页面还有哪些地方出彩的呢?



一.售卖页主会场


1.场景


2.jpg


非常强烈的购物情景代入感觉、背景由购物商品组成,而看到商品大脑反应给我们的直觉就是挑选购物、这自然就达到了节日的目的。


3.jpg


页面上面承载的信息: 

1、双11 Logo标识用来强调形象传递、这也是每年双11都会这样做。

2、促销海报及大牌logo,促销海报引导刺激用户购物欲望,大牌logo(全英文)增强品质感和全球、时尚的感受。。


2.角度


4.jpg

1.jpg

  

1、在角度上面,背景产品的倾斜和下面色块的弧形倾斜,带来非常强的纵深感。在平面上构造空间纵深感。

2、其次也起到了非常强烈聚焦效果,让你的视觉直击中心。没错就是商品和标题。 

3、强烈的圆弧形倾斜角度也给人带来了速度感,在心理上面让用户感受到节日的氛围和紧张感受。


3.颜色


5.jpg


配色上面主打红色色调和渐变色,渐变色均为临近的颜色渐变,所以也显得不会那么突兀。

1、天猫国际主色调为红色 

2、红色是极佳的刺激色。从性格色彩的层面来说,红色代表热情/热闹/刺激/欲望/奔放/喜庆/血腥暴力; 从颜色的层面来说,根据色相/明度/饱和度的不同红色也分很多种红,比如大红/深红/品红/粉红/枣红/朱红/橙红/紫红等等。正是因为红色有着极佳的感官刺激作用,所以像双十一这样喜庆的节日促销电商页面,以红色作为大背景主色是比较妥帖的。

3、辅助图形为渐变色、很醒目和时尚。


6.jpg


渐变配色的回归正巧是在扁平化大行其道的今天,所以它不可避免地同大量扁平化的元素搭配到了一起,而其中最值得考虑的因素,就是色彩。某些用色最大胆、跨度范围最大的渐变色设计干脆直接就从扁平化配色中“借用”色彩。像这样在辅助图形上面用上了渐变色,非常出彩。


7.jpg

be计师作品


要说明的是,颜色用写轻佻一些的,别老是整那些近视色,搞得页面标题标题不突出、商品商品不突出。


4.标题

天猫的页面标题没有立体,没有夸张的变形。够直接、清爽、大方。


8.jpg


居中排版最稳定、也是最容易的做法。上文、下图,也是运营活动主会场最常见的应用方式,因为给人比较正式、重要的感受。




二.售卖页分会场


我们先来看几张分会场头图:


9.jpg

10.jpg

11.jpg


那么我们从以下几个点分析下分会场,它们都具备有: 

1、背景圆弧形光波元素的重复运用,基本贯穿整个活动。 

2、颜色轻佻、对比强,促销氛围感强,均采用渐变色,风格统一的同时也很新颖。

3、排版右图左文,是分会场的最明显的特征之一。,这样做让分会场的易用性非常高。

其次: 辅助图形部分用到了颜色的重复,视觉上面还挺有意思的,同时带来了也有节奏感、动感。


顺便放几张颜色重复的视觉图、大家随意感受下: 

12.jpg


三.双十一猫头 


每年“双十一猫头”的延展设计,各家设计师纷纷上演拼脑洞大戏。

2018天猫双11的logo一如既往很精彩,延展性非常强。

今年双十一,天猫就联合了44家知名品牌以及22个阿里经济体伙伴,共计66个品牌,一起发布了今年的双十一猫头海报。


13.jpg

2018双十一官方LOGO


14.jpg

国民女神“老干妈”

15.jpg

运动摄像品牌go pro

16.jpg

亚马逊电子阅读器kindle


有媒体对今年双11的猫头海报进行了创意手法归纳整理,划分出初级、中级和高级猫头延展设计。

1.初级延展设计,主要以猫头logo为一扇窗,窗外风景即结合品牌宣传内容进行设计。作品示例:


17.jpg

18.jpg

大疆和蜂花


2.中级延展设计,主要仍以猫头logo作为主体,同时结合场景将其拟物化,演化成一个真实物体。作品示例:


19.jpg

20.jpg

立顿和乐事


3.高级延展设计,突破常规思维,猫头logo完全成为画面中的一个零件,一个有机组成,违和感是什么可以吃吗?只想双击666!作品示例:


21.jpg

22.jpg

小米和阿里云



看完以上这些脑洞大开、

创意十足的设计,

是不是很有启发呢?

咳咳~安妹不只整理了这么多干货,

还有个重磅福利要告诉大家:

本月21日晚20:00,腾讯课堂

国信安教育UI设计线上公开课

免费开启!

▼▼▼


23.jpg

课前学习交流群现已开通

扫描海报中二维码,

赶快进群和大家一起交流吧!


课程主题

PS公开课 -1小时快速学会明星人像合成海报


讲师简介

UI设计高级讲师 - Chloe

国信安UI设计高级讲师,曾任国际4A广告集团、著名外企艺术总监等职,专业涉及UI/UE设计、新媒体设计、游戏原画设计与制作、商业摄影、数字广告设计与营销、现代影视设计制作。美国苹果公司ACP认证高级剪辑师、ACAA高级数字艺术设计师、高等学院青年教师资格认证教师,获行业“新锐设计师”称号。


课程亮点

- 通过大咖讲师直播教学“运用孟菲斯风格,打造个性明星人像合成海报”,带你上手实操,简单快速学合成。

- 只需要1个小时,7大核心知识点,案列讲解由浅入深,让你轻松导出到精美个性孟菲斯风格人物海报!

- 超清视频讲解,超清晰录制让你看清每一步操作!


能力目标

1.养成良好的做图习惯; 

2.通过PS软件组合工具使用实现完整海报商业实战; 

3.用图层样式巧妙的设计各种特效,如抠图技巧、蒙版原理、文字特效、图片特效等; 

4.掌握时下主流的设计趋势及技巧; 

5.学习一定的版式基础、设计规范流程,快捷键掌握; 

6.掌握工作中的设计技巧; 

7.学习简单调色与修图技巧。 


-END-


相关推荐