首页

UI设计师如何高效支援Banner设计需求

雪涛


为什么需要高效?


当下互联网进入以内容运营为核心的时代,市场竞争激烈,需要对于市场的热点进行快速反应,持续迭代。不管是大厂还是小厂的UI设计师多多少少需要支援运营需求。U1S1 做简单运营图对于体验设计方向的设计师来说,性价比确实有点低,一般难度较高的运营设计需求都由专业的视觉设计师来做,体验设计师一般接到的都是比较简单或者紧急的需求,这对于设计的能力提升来说是比较有限的,大量的时间被占用在运营设计上,持续被榨干,有些本末倒置,但人生就是这么操蛋,总得想办法解决。



Banner构成拆解


就目前大部分互联产品的Banner而言。

其构成一般由标题文案、主体元素(人物、物品等)、背景(场景、底色等)元素构成。



模板化沉淀


面向设计师:模板化运营设计 + 素材资源同步盘

第一种方法是本文的核心方法,原理很简单,其实就是利用Sketch和或者Figma的组件化(为了统一语义本文统一称为组件,其子集为用例)进行设计。

我们将这些元素分别打包成组件.



把组件的用例调整后放置在预览区所有不同尺寸的画板中。

当出现需要特殊调整的时候可以解绑微调。如果希望给画面添加一些细节的话,再另外添加即可~


这么一波操作,大概1个多钟就可以输出一整套7个图,足以应付一周22套运营图的需求了(悲伤的故事)


当然要达到这种速度还需要一个通用素材库的加持。空闲时间把一些KV的图素拆出来放到Eagle共享盘,这样你和你的小伙伴们就可以高效愉快地拉图了...



面向运营同学:创客贴等第三方设计平台

在创客贴搞个团队模式,然后设计师把常用的一些模板上传上去,运营同学只要自己改改文案,换换人就可以啦



设计规范制定


虽然有了模板化的设计工具,但如果缺少了设计规范的引导,就会宛如脱缰野马,设计出各种偏离业务需求或风格不一致的Banner出来。

设计规范需要与运营同学共同协商制定,比如标题最长长度、排版构图、图素尺寸等等。具体规范需要根据不同的业务需求进行定制化。

下面就以我们团队的制定方式作为范例说明一下。



排版构图

常规的排版构图模式有居中式构图、左右构图。

居中式构图:居中式构图是将主体放置画面的中心进行构图。这种构图方式这种构图方式的最大优点就在于主体突出、明确而且画面容易取得左右平衡的效果

左右式构图:左右构图将文字标题元素和主体物按照比例分割进行位置安排。符合用户阅读习惯:阅读视线要符合用户从左到右或从上到下的浏览习惯。



尺寸

Banner的尺寸需要根据UI界面的需求进行制定。

例如针对我司的产品,一个活动最多有7个运营位的样式,分别在首页、搜索位、文章封面、活动中心、闪屏等。


标题长度限制

由于运营同学有时候对于标题的长度没有经过精简优化,标题特别长长长长长长长长,加上Banner本身就小,在手机屏幕上基本看不清,也就没有意义了。因此需要共同制定好主标题副标题长度限制,超过就直接打回重改。


出血设置

制定出血位的原因是某些尺寸的图素可能出现在多个不同的入口,以及不同尺寸的手机屏幕可能会出现裁剪的现象。



视觉走查


不论是设计师也好,运营同学也好,完成设计之后最好建立一个视觉自查表进行对照,目的是尽量减少一些原则性错误,减少来回改稿的情况。



流程化闭环


为了更完美的提升整个流程效率,不仅需要升级中部流程,前后端的流程都需要进行优化。

首先是最好在需求的前端建立需求排期表进行需求的筛选。

分门别类地将需求的详细信息进行可视化展示,对应的需求文档接入。这里不得不吹一波飞书文档,太**好用了。

针对需求的后端即设计交付环节,最好是在设计稿导出的时候使用工具进行压缩,更小的体积意味着更快的加载速度,这对于提升产品的用户体验是毋庸置疑的。这里推荐2个工具:

1.imageOptim

2.Picdiet https://www.picdiet.com/zh-cn (个人推荐JPG使用这个网站,压缩的质量最高)


总结


最后,如果实在人力不足的情况下,就把项目外包出去吧,毕竟占用UI设计师太多时间产出如果没什么价值的话,其实roi也是很低的,设计师的人力成本也是钱!

“能用钱解决的问题,就用钱解决!”—— 鲁迅

如果运营经常提出很多无理的需求,比如量很大,没有什么依据都是拍脑袋想的,那可以考虑把项目外包出去,一旦外包出去,花的就是真金白银,让运营也知道,这是设计师呕心沥血画的,市场的价格就摆在那,整天搞些有的没的是否真的能对项目带来价值。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:坡安Chris 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


谈谈Banner应用&交互设计

雪涛



编辑导语:UI设计师在日常工作中经常会进行Banner的设计,Banner代指任何投放于线上的各种尺寸的广告图,在设计Banner图时,需要考虑到多种因素,内容、受众、效果等等;本文作者分享了关于Banner应用和交互设计,我们一起来了解一下。

Banner是每个UI设计师家常便饭的项目,聊聊banner的那些事。

banner翻译成中文是横幅或旗帜,为了体现产品的中心意旨,利用鲜明的内容去表达最主要的情感思想或宣传中心,从而给整个产品起到宣传的效果。

在互联网时代,banner被广泛应用在pc网页、app设计等互联网平台间,作为设计师做一张banner乃家常便饭,如何才能设计一张高质量的banner呢?

一、设计风格

创意新颖、风格贴切的banner能第一时间吸引用户眼球,有利于banner的触达,带来高效率的点击,创造更高的价值。

1. 素雅文艺型

关键词:文艺、气质、素雅、安静、格调。

画面大量的留白;色彩以高级灰为主,饱和度和纯度低,明度高;字体多采用衬线体,标题文案突出,辅助文案偏小,整体突出高级感;画面点缀多采用精细的线条。

2. 时尚高冷型

关键词:高冷、时尚、大气、品质。

色彩多以黑白灰;文字清晰简洁内容少;焦点主图很大,突出表现细节;画面精简,无点缀物。

3. 传统国风型

关键词:传统、中国风、意境、韵律。

画面采用对称式构图,文字排版有采用竖排;色彩上采用中国传统颜色,采用物体的固有色,避免艳丽刺激的色彩;字体多采用书法字体,书法主要分为篆、隶、楷、行、草五种书体;图形活用中国风元素,剪纸、灯笼、折扇、祥云、梅花、水墨等作为辅助元素。

4. 青春活力型

关键词:青春、活力、年轻、动感、时尚。

色彩饱和度和纯度高;排版多样性,视觉冲击力强;运用几何图形装饰在产品、背景、氛围装饰上。

5. 可爱甜美型

关键词:可爱、甜美、卡哇伊、Q、呆萌。

色彩鲜亮透明,营造软萌可爱的感觉;字体采用少年字体、手写字体、卡通字体;点缀元素多使用卡通小元素。

6. 促销活动型

关键词:促销、活动、节日、热闹。

画面整体氛围热闹,内容饱满,很少留白;色彩丰富,红色、黄色、橙色、紫色偏多;主标题文字偏大,字体刚硬,视觉冲击力强,点缀元素有光效、舞台、五彩的渐变、冲击性的线条或多边形等。

7. 未来科技型

关键词:未来、科技。

科技类banner,文字和背景图非常具有科技感,画面具有空间感;色彩以冷色调为主,常见有蓝色、紫色、黑色;点缀元素有光效、金属、线条、光点。

8. 手绘风格

关键词:场景、趣味、手绘感、扁平。

画面具有故事性和趣味性;色彩扁平的配色,上色没有高光和阴影;字体偏向年轻化,圆润、无衬线体字体;点缀元素以涂鸦的小装饰为主。

二、设计流程

1. 创意监控

1)创意监控

产品在用户心中需要良好的正面形象,banner传播对内容需要进行严格控制,把握好政治导向关、价值取向关和格调品味关。广告内容需真实准确,不引起歧义。

2)情景约束

用户体验产品需要有愉悦感,banner需呈现积极阳光的正面情景,素材图片传达正向的情绪和氛围。

3)版权约束

避免法律纠纷,图片素材、文字等内容应该要有版权,banner中不使用来源不明的字体、图片、视频等素材。

2. 前期沟通

1)确定文案

文案尽量简洁明了,用词准确、文案通顺、语言生动。用词准确是最基本要求,活动、权益、业务表述文字内容符合业务方需求,无错别字。文案通顺、表述清晰,适合产品目标群体阅读与理解。语言生动、精简、有吸引力,集中核心诉求点,亮点突出。

3. 设计执行

1)板式

排版结构:

banner由多元素组成,banner内在包含:色彩、构图、风格等,外在包括文案、产品配图、背景、点缀这几个部分组成,设计过程通过拆分一步步执行,思路清晰且效率高。

构图方式:

对齐构图

画面中相关内容遵循对齐原则,便于用户视线快速浏览,接受重要信息。常见的对齐方式左对齐、右对齐、居中对齐,建议banner中只使用一种对齐方式,多种对齐方式用户阅读视线分散,增加用户认知成本。

聚拢构图

画面内容拆分为文字区、图片区、氛围区,相关内容聚集在一个区域,其次聚焦一个视觉重点,弱化其他元素,视觉出现层级。

留白构图

根据产品页面留出适当的安全边距,保证banner在适配过程中不会出现重要信息看不全的情况。排版时,元素之间需要留出空隙,画面看起来有透气感,减少用户认知信息的负担。

降噪构图

色彩、文字的种类不宜过多,点缀图形运用不合理,会分散读者注意力,成为用户阅读的“噪音”。

重复构图

排版注意整体设计的一致性和连贯性,避免出现不同类型的视觉元素,使画面出现跳跃。

对比构图

banner中重点信息加大与周围元素间的视觉差异,通过颜色对比、字体的大小字重对比、构成的面积对比等方式,以便于用户快速获取重点信息,丰富banner的视觉层级,吸引用户。

构图样式:

对称构图

通过对画面的平均分割保证画面的平衡,对称构图给人有力、稳固的视觉感受。

居中构图

居中构图很好的突出主题,画面中规中矩,活跃感较弱;用户视觉焦点会聚集中心位置,视觉焦点需要重点刻画,周围元素弱化处理。

左右构图

左右构图分为2种,左文右图、左图右文。2种构图样式,区别在于用户的浏览过程中是先看文字还是先看图片。

当配图示意不明确时,建议使用左文右图的排版。

配图主要是根据文案内容绘制的辅助图形,用户只看图无法明确活动内容,建议采用左文右图的板式。根据“F形”阅读模式,浏览习惯往往从左向右从上往下,将文字信息放在左边有助于用户快速浏览,获取重点信息。

当配图示意明确,图比文字更加重要时,建议使用左图右文的排版。

用户根据图片即可明白活动内容,运营或业务方希望有吸引力的活动图片获取用户的注意力。

衍生构图

基于banner受限尺寸和高度,会衍生出一些构图方式,例如放射性构图、倾斜构图等。不规则的构图,设计上具有层次感,丰富的视觉呈现给人眼前一亮,更容易吸引用户眼球。

构成比例

banner大多为左右排版,图文比例4:6,接近黄金分割比例0.618,文案标题比例约2:1。画面中文案占比一定要大于配图,用户更关注是是内容本身。

2)配色

色彩体系:

暖色系

暖色系主要由红、黄、橙等构成的色调。容哟联想到阳光、火焰、热血等场景,给用户积极、活泼、温暖的感觉。暖色系色彩的饱和度越高,温暖属性越突出,用于电商活动,渲染气氛。

冷色系

冷色系主要由青、蓝等构成的色调。容易联想到海洋、冰雪等场景,给用户寒冷等感觉,适宜表现恬静、低沉、严肃、理性的内容,比如科技类产品。

同色系

同色系又称单色,这种色系的搭配在产品本身颜色比较统一的情况下,提取产品邻近色,作为画面的搭配色,让整体画面变得统一和谐。

类似色系

类似色相比同色系,它具有丰富性和可变化性,基于banner整体的主色调以后通过添加与主色相近的辅助色,是整个画面变得丰富活跃起来,同时这些配色方式也相对容易。

对比色系

对比色系,色相环上相距120度-180度之间的2种颜色(180度则为互补色),对比色之间的搭配能够给画面带来华丽、跳跃、浓郁的视觉美感,高纯度、高明度、等面积的搭配,会产生强烈的刺激感,干扰用户视觉体验。画面中往往会考虑补色之间的面积比例、纯度比例、明度比例、空间间隔的比例,平衡画面之间的视觉感。

创新配色

除了基本的色系配色系外,还可以尝试更多的配色风格。画面中有目的地运用色彩元素,丰富画面的色调。

色彩比例:

banner色彩需要考虑页面统一性;banner尺寸较小,信息色彩不宜过多,2-3种即可。画面主要由主色、辅色、点缀色组成,色彩的黄金法则60:30:10的法则,60%左右的主色、30%左右的辅助色、10%左右的点缀色。

3)字体

字体类型:

无衬线体

粗的黑体,具有官方严肃气质,自带有力量感,视觉冲击强烈,与速度线条、碎片、划痕等设计手法十分搭配。细的黑体,具有年轻、简约、细致的感觉。无衬线体易读性较强,常用于科技类banner中。

衬线体

衬线体装饰性较强,给人带来活泼、轻松的感觉。比较适用于文化、文艺、美食、女性、时尚等行业。

圆体/卡通字体

具有趣味性和活泼感,适用于儿童、宠物类、休闲食品、家居等行业。

书法体

有韵味和艺术感,视觉张力丰富,适用于中国风、艺术感等画面。硬笔书法字体:优雅、有亲切感,适合传统、文化等画面。

字体样式:

考虑字体大小、字重、颜色。文案有主文案和副文案之分,需要有对比性。字体的颜色选择需要考虑与背景色的搭配效果、banner主题间的关联,选择合适的颜色能凸显文案。

4)辅助图形

几何图形:

几何图形是banner设计中常见的辅助元素,它的多样性和简约性设计师十分着迷。几何图形可以创作无线的可能,用户对其有意无意地进行自我诠释。

圆形

圆形象征着圆满、融合、自然、和谐、无穷,在设计中具有非常强的包容性,由于其自身的可拓展性,将圆形进行拉伸、叠加、重复可获取丰富的图形。

三角形

三角形具有方向感、变化感,它的锐利给以垂直、刚强、庄严、向上的感觉,其长度有穿透感,象征崇高和无限。

方形

方形具有对称、有序、平静、专业属性,给人稳定安全统一感。

多边形

多边形的形状会给人带来稳重感,通过多边形凸显产品的尊贵感。

不规则图形

不规则的图形营造画面的氛围,突出主体元素,激发用户点击欲望。

流畅的线条:

流畅的线条给画面带来韵律感。

立体几何图:

立体几何载体让整体画面格调显得品质高。

5)动效

展现商品质感和工艺或者展示同商品不同状态时,动态banner比静态banner点击率高。呈现商品多样性和系列感需要静态广告。

4. 审核

1)传达

呈现出来的画面鲜明地表达活动主旨,文案内容,可用性。

2)美感

板式设计、配色、字体设计、风格、插图、点缀图案以及动效这些运用是否合理。

3)效率

整体复杂程度,后期banner修改和加工工作难度,可不可重复利用。

4)创意

画面主题是否突出,具有吸引力,刺激用户点击。

三、设计应用

1. 轮播banner

现实中多是单张banner图,而互联网产品中大多采用多张轮播banner。有限的屏幕内采用多张轮播提高空间的利用率,其次用户长时间盯单一广告会疲惫,轮播banner有利于吸引用户注意,激发用户探索欲望。

2. 胶囊banner

电商产品用得比较多,全圆角矩形或不规则矩形,此类banner运用在促销活动中,实效性特别强。

3. 白底banner

运营强度较弱,banner在页面权重较低的专题活动会用到白底模版化banner。排版左文右图,内容由主标题、副标题和小插图组成,例如支付宝首页中间位置banner。

4. 悬浮banner

需要吸引用户来参与运营活动,可以采用悬浮图标的形式,吸引用户的注意力,对页面布局不产生影响。

5. 广告组合

用于产品中同一个功能模块,多个不同入口,或者不同服务类型的商品入口。商城或者热门板块使用。包括:两个入口、三个入口、四个入口、五个入口、六个入口。

四、交互设计

1. 交互需求

1)功能

banner在页面中所承担的责任是什么,活动运营、功能区入口、系统公告、还是第三方广告。

2)数量

banner位置所承载内容数量是多少,同时存在几个内容。

3)频率

banner采用的是静态banner还是轮播的方式。固定banner多久更换一次,轮播形式的banner,几个banner轮播,轮播的速率是多少。

4)层级

banner在页面中与其他功能区相比,banner位所属的信息层级是什么样。

2. 交互思考

1)静态/动态

静态banner。如果内容中有一个非常重量级的,其他的都是差不多的不怎么重要的,可以考虑只将重量级内容放在显眼位置的Banner上,且静态不轮播,其余内容放在别的运营位里。

动态轮播。轮播banner图注意帧数不宜过多,加上轮播指示器,提示用户banner的个数以及banner可以左右滑动。

2)尺寸

屏幕占比大的banner有更强的营销感和氛围感,常见电商平台的顶部banner。

屏幕占比小的banner会低调些,不会干扰用户阅读浏览页面,例如金融类平台。

3. 设计输出

1)图片大小

保证产品启动加载时间和操作流畅,上传广告图的大小建议在300kb以内。

2)图片格式

输出的格式:JPG、PNG、JPEG、BMP、GIF。


文章来源:人人都是产品经理  作者:
界白

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




今年的双11品牌联合猫头海报,简直就是一波天秀!

雪涛

每年的双11在设计师们的眼里,都不仅仅是购物狂欢节还是一场视觉盛宴。这不,今年的双11重头戏来了。

天猫联合各品牌发布了超级符合“猫头海报”,一共55家下面让我们一次看个够。

1. 泡泡玛特,很有意思的创意

今年的双11品牌联合猫头海报,简直就是一波天秀!

2. The North Face场景感十足

今年的双11品牌联合猫头海报,简直就是一波天秀!

3. 好奇很温馨的设计

今年的双11品牌联合猫头海报,简直就是一波天秀!

4. 外星人,一直都想买的电脑

今年的双11品牌联合猫头海报,简直就是一波天秀!

5. VANS,我喜欢他家的黑格子鞋

今年的双11品牌联合猫头海报,简直就是一波天秀!

6. Levi’s,我服了

今年的双11品牌联合猫头海报,简直就是一波天秀!

7. 麦当劳,烟雾的创意很契合产品

今年的双11品牌联合猫头海报,简直就是一波天秀!

8. 惠氏铂臻3,一团线织出来的创意

今年的双11品牌联合猫头海报,简直就是一波天秀!

9. 拉面说,来碗面

今年的双11品牌联合猫头海报,简直就是一波天秀!

10. 宜家家居,仔细看,是购物袋

今年的双11品牌联合猫头海报,简直就是一波天秀!

11. 巴黎欧莱雅,万能的C4D

今年的双11品牌联合猫头海报,简直就是一波天秀!

12. 朗仕,细节很多

今年的双11品牌联合猫头海报,简直就是一波天秀!

13. 华为,冷暖对比很有冲击力

今年的双11品牌联合猫头海报,简直就是一波天秀!

14. 乐高,积木的海洋

今年的双11品牌联合猫头海报,简直就是一波天秀!

15. Marshall,燥起来

今年的双11品牌联合猫头海报,简直就是一波天秀!

16. Jordan,乔丹

今年的双11品牌联合猫头海报,简直就是一波天秀!

17. 肯德基,WOW好吃!

今年的双11品牌联合猫头海报,简直就是一波天秀!

18. 林氏木业,俯视的构图角度,空间感很强

今年的双11品牌联合猫头海报,简直就是一波天秀!

19. 元气森林,故事性很强

今年的双11品牌联合猫头海报,简直就是一波天秀!

20. 强生,满是爱

今年的双11品牌联合猫头海报,简直就是一波天秀!

21. fresh,高端的护肤品牌

今年的双11品牌联合猫头海报,简直就是一波天秀!

22. 万代,为“酷”而生

今年的双11品牌联合猫头海报,简直就是一波天秀!

23. 始祖鸟,化石来了

今年的双11品牌联合猫头海报,简直就是一波天秀!

24. 三生花,旗袍肯定很漂亮

今年的双11品牌联合猫头海报,简直就是一波天秀!

25. HOLLISTER,一起冲浪

今年的双11品牌联合猫头海报,简直就是一波天秀!

26. 施华洛世奇,每个女孩都值得拥有

今年的双11品牌联合猫头海报,简直就是一波天秀!

27. PINKO,乱的有创意

今年的双11品牌联合猫头海报,简直就是一波天秀!

28. MINI,我有个进MINI车友群的梦

今年的双11品牌联合猫头海报,简直就是一波天秀!

29. 孩之宝变形金刚,汽车人变形

今年的双11品牌联合猫头海报,简直就是一波天秀!

30. Onisuka Tiger,日本的运动产品品牌

今年的双11品牌联合猫头海报,简直就是一波天秀!

31. 优衣库,线下实体店的货架创意

今年的双11品牌联合猫头海报,简直就是一波天秀!

32. 三顿半

今年的双11品牌联合猫头海报,简直就是一波天秀!

33. OLAY

今年的双11品牌联合猫头海报,简直就是一波天秀!

34. Dyson,很亲切的表达方式

今年的双11品牌联合猫头海报,简直就是一波天秀!

35. 迪士尼商店,可爱、好玩

今年的双11品牌联合猫头海报,简直就是一波天秀!

36. NIKE

今年的双11品牌联合猫头海报,简直就是一波天秀!

37. 法国娇兰,看起来很贵气

今年的双11品牌联合猫头海报,简直就是一波天秀!

38. 荣耀

今年的双11品牌联合猫头海报,简直就是一波天秀!

39. LINE FRIENDS

今年的双11品牌联合猫头海报,简直就是一波天秀!

40. M.A.C

今年的双11品牌联合猫头海报,简直就是一波天秀!

41. 红星美凯龙,空间感很强

今年的双11品牌联合猫头海报,简直就是一波天秀!

42. NET-A-PORTER,泡泡龙的感觉

今年的双11品牌联合猫头海报,简直就是一波天秀!

43. 稀奇,太喜感了

今年的双11品牌联合猫头海报,简直就是一波天秀!

44. 百威,哟哟切克闹

今年的双11品牌联合猫头海报,简直就是一波天秀!

45. 芭比

今年的双11品牌联合猫头海报,简直就是一波天秀!

46. 李子柒,依然还是熟悉的味道

今年的双11品牌联合猫头海报,简直就是一波天秀!

47. 爱他美3,阳光帅气

今年的双11品牌联合猫头海报,简直就是一波天秀!

48. 花西子,雕刻工艺品

今年的双11品牌联合猫头海报,简直就是一波天秀!

49. 伊利谷粒多,太美了

今年的双11品牌联合猫头海报,简直就是一波天秀!

50. Apple,表情包集合

今年的双11品牌联合猫头海报,简直就是一波天秀!

51. 滴露,传统国风的感觉

今年的双11品牌联合猫头海报,简直就是一波天秀!

52. Moleskine

今年的双11品牌联合猫头海报,简直就是一波天秀!

53. 大疆,很喜欢无人机,有一起拼单的吗?

今年的双11品牌联合猫头海报,简直就是一波天秀!

54. 绘儿乐,这个创意现实中我玩过

今年的双11品牌联合猫头海报,简直就是一波天秀!

55. 乐事,好吃

今年的双11品牌联合猫头海报,简直就是一波天秀!

每个品牌对于猫头的创意表达都不一样,很多都是生活中随处能见到的,但在设计师的眼中,就是创意灵感来源。

下面还有视频版,大家一起看看:

以下视频来源于

看完今年的猫头海报,让我更加期待接下来各品牌双11活动的玩法和创意。接下来让我拭目以待吧。


文章来源:优设    作者:
美工美邦


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


如何打造海报级banner

雪涛

首先看看我们的素材:


当拿到一张原始素材的时候!



怎么办?该怎么入手?怎么找方向?

来吧!


先来看看成稿:



最终设计成果还可以,那么是通过怎样的设计手法达到这样的效果呢?

下面我就来分享一下我的作图思路;



1.需求的梳理和信息收集:


理解核心需求,为设计方向做好前期准备


Slogan:传武(作品名) 副文案:幽府之力,逆转生死


我们漫画类的作品众多,内容风格繁杂,所以拿到需求之后,首先就是要对作品进行“调查”。通过对漫画作品的阅读,理解内容、故事、绘画风格来定性设计的方向。这样才能在设计过程中准确把握住作品调性,才能设计出最贴合作品风格内容的banner,才能把我们作品精髓的内容传递给用户。


比如上面这部作品,SLOGAN“传武”是我们要着重设计展示的。而副标题“幽府之力,逆转生死”也很重要,往往传达出了作品的卖点和调性。


再看看我们拿到的素材,一张单人的简单素材,看起来很单调,似乎没有可切入的地方。这个时候就体现出为什么要先对作品进行“调查”的重要性了!



2. 确定设计方向:


明确设计方向,精准展现作品调性


通过阅读,我们了解到这部作品是一部热血,古风,玄幻作品,还有大致的故事内容,再结合我们的副标题“幽府之力,逆转生死”。


脑子里就已经开始有画面了,“幽府”大概表达了一个场景,而“力量”和“逆转生死”又传达出了一种气势磅礴的场面。这就为我们设计的方向奠定了一个准确的方向。



首先就把我们的素材和文案拉进画框里,进行一个大致的排版找找感觉。第一个左右排版就太常规了,在场面和气势上有些弱。第二个添加了漫画框,想切入一些故事内容一起展示。但又有一些强调漫画框的存在了,磅礴的场景没有展示出来。但注意右边的部分,把主标题排在人物的两边似乎是一个不错的选择!我们就从这里入手。



重新尝试了一下,发现这样布局好像就是我们想要的感觉哈!那既然确定了框架,我们接下来就按照这个方向继续强化出“气势”“力量”的感觉。


我们以人物为中心,想象画面里有力量从人物背后向外“迸发”所以我们的字体可以设计得有一些趋势在里边,也是以一个圆弧为中心向外生长。以光从人物背面照射出来大逆光的视觉,营造一种“力量”迸发的感觉。



3. 颜色的选择:


跟随之前确定的设计方向,提炼选色搭配。


我的方法一般是先从素材本身出发,根据想要达成的视觉风格来延伸出想要的配色。这样得到的颜色更整体,人物素材能更好的融入背景氛围中,也方便后期调整。观察的素材,发现他的颜色都比较灰,缺乏对比,就会显得很“平”,难以营造出我们想要的感觉。所以从人物素材本身的颜色出发,提取同类色和提高饱和度。结合考虑到有利于运营推广的视觉需要“吸睛”。得出了后面一组对比更强烈的颜色。





4. 有主次地进行深入刻画:


画面中最主要的肯定是我们的SLOGAN和人物角色,是我们要重点刻画的对象。剩下的副标题、背景氛围次之。不仅是要在排版上做区分,在视觉感受上也要做出差异化。这样才能有远近虚实的感觉,增加空间感。




我们希望画面具有一定的质感,增加其冲击力。所以我们在刻画背景的时候可以选择一些漫画里比较好的场景,或扉页背景素材来做底图。再叠加上一些纹理材质,再一层一层地来给背景打光,用“叠加”“柔光”“滤色”等图层属性来慢慢提高亮度,最终达到我们想要的效果。


小技巧1:相同光源的照射,传达到不同的物体上时,它的视觉表现时不同的。并不是光源时什么颜色,照射的地方就会是什么颜色。





我们来对比一下两种颜色的实际效果,可以说是很直观了!



小技巧2:为了使素材更完美地融入到背景中,我们可以后期人为地给素材增加一圈高光/轮廓光。这样使画面更融洽的同时,也能让我们的人物变得立体起来!。




再来对比下没加轮廓光的感觉:



真的是少了些味道和细节哈哈,其实在很多时候我们都可以对我们的素材进行二次加工让其提升一定的品质,配合画面以达到更好的视觉效果。



5. SLOGAN的设计:

主文案在我们草图的基础上,结合整体画面的趋势进行细化。(增加毛笔笔触,和优化笔画)。


这里主要分了三层进行处理颜色层(文字层):主要给一个基础颜色;


材质层:因为这两个字的占比比较大,所以可以增加一些纹理细节让画面更丰富耐看;


厚度层:让后面的光源,在我们的字上形成一圈高光,可以突出我们的文字。





增加一些光晕效果,再放上做好的SLOGAN看看效果,好像还不错。



有些同学可能会疑惑这里为什么字体要做一个厚度层,我们也上一下对比图先看下效果:



可以看少了一些些质感和重量,在轻量的风格里ok,但是在我们当前的画面里就差了些感觉,所以才做了厚度层来强调光线照射过来的视觉增强画面冲击力。

之后主要是做一些符合我们画面氛围的漂浮元素,丰富画面。有一定手绘功底的话就再好不过了!



完成,到这一步差不多达成了我们想要实现的效果,“气势”和“力量”的感觉在这么“朴实无华”的素材身上也基本表现到位了。还是比较满意的,差不多可以提审交稿了!



最后在观察观察整体的画面,审视一遍,查缺补漏。

发现我们的画面好像有些燥啊,红色和黄色饱和略微有些高。整体的感觉也不够清晰。最后再做一个调整吧。



降低一些红色和黄色饱和度,在暗部加一些紫色(主文案暗的部分和画面四周的暗部)。增加冷暖对比就好多了。


小技巧3:盖印整个图层——在滤镜里面找到其他——高反差保留,数值根据画面来调。



然后就得到这么一个图层



是不是很神奇?别慌,把这个图层的属性改成线性光看看,画面清晰了很多,也变得更有质感了!

最后看下过程演变图:




总结


1)梳理需求内容:通过阅读漫画作品,深入了解内容并收集整理信息;

2)提炼关键字延展:尝试多种可行方案,最终确定设计方向;

3)slogan的设计:一定要符合画面和作品调性,达到与画面相映成辉的效果;

4)细节把控:完成之后再回过头来审视整体画面,查漏补缺力求做到最好!

文章来源:UI中国    作者:腾讯动漫TCD 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


如何做好Banner设计?

雪涛

「空间陈列法」是说先构建一个空间,然后将主体元素用合适的形式陈列出来。

这是随着手机兴起而真正流行起来的一招,因为PC时代都是宽大的横屏设计,适合展现视野开阔的大场面,像大漠、海边等等,而「空间陈列」作为小场景,在PC端就显得不大气,因此使用较少;而手机端却刚好相反,瘦长竖屏就适合表现长焦特写的小场景,像微距下的花鸟鱼虫等等,这时「空间陈列」就用的恰到好处。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

如图所示,同样的产品展示图,在PC端就显得单薄,版面空缺,整体不饱满;而在手机端则用的刚刚好,确实这种长焦特写、微距放大的陈列小场景就是手机屏的最爱,所以在手机时代,空间陈列图才会呈现井喷式增长。

其实合成、三维和摄影都可以实现「空间陈列」,但本书还是以合成为主,而合成的难点就在于如何将产品和空间进行自然融合,不能有违和感。

若想合的天衣无缝,第一步就是要做到「透视准确」,而透视作为构图中的重要知识点,可以说是无处不在,在前面的章节里也多次提及。我们只有掌握透视的变化规律,才能准确表现出元素的空间关系,如果透视不对,那空间将会失真,下面就来详细讲讲这个理性知识点——透视。

焦点透视

日常生活中,当我们看周围事物时,会有远近、高低、长短、宽窄等不同,这是由于距离、方位等差异在视觉中呈现的不同反映,这种现象就是透视。透视学的出现可以帮我们非常科学的表现各种空间感和立体感,它广泛用于绘画、建筑、环艺、设计等诸多领域,而常见的透视共3类:空气透视、散点透视和焦点透视,这3类的侧重点各有不同。

空气透视又称「色彩透视」,由于空气介质的存在(雨、雪、雾、烟等),使人们看到近处景物比远处的轮廓更清晰、色彩更饱满的视觉现象,例如下方海报中的「烟雨蒙蒙」,这种近实远虚感就是典型的空气透视,随着镜头拉远,山川也变得越来越模糊。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

散点透视则是中国画特有的一种透视类型,例如下方的《清明上河图》就是这类透视的代表作,在这五米长的画卷中,很难找出画家的具体观察位置,好似在移动中作画,每到一处画一部分,最后拼接起来,这种视点不断移动的画法就是散点透视,散点透视适合表现景色的波澜壮阔,重在写意,体现一种气势和意境。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

而焦点透视才是本文重点,它是透视学中的核心理论,也是西方绘画所遵循的透视原则,最早研究透视就是从这里开始,如果散点透视是「写意」,那焦点透视则「写实」,一切都以客观还原为准。

例如名画《最后的晚餐》,所有视线都汇聚一点(称为灭点),营造出一种立体空间感,这些就像自己身处画面中央所看到的逼真景象。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

而我们在设计中常说的透视也都指「焦点透视」,这是我们需要掌握的重中之重。记得高中学习素描时,老师就说画静物要「近大远小」,其实就是对焦点透视最为形象的描述,例如草地上的奶牛,离我们越近就越大,越远则越小,正是这种近大远小的透视变化才使场景有了空间和层次。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

观察视角

在介绍焦点透视前,我们先说说透视中一个很重要的影响因素——观察视角。视角即指人眼(称为视点)在观察事物时视线之间所形成的角度。

如下图所示,其实就是人眼观看角度的变化,常见有3种:当我们平视前方时就是「平视视角」;仰头看时则是「仰视视角」;低头看时便是「俯视视角」。

其中平视时人眼和物体形成的假想连线称为「水平视线」,这是判断视角高低的参考线。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

当我们将产品放入空间时,就要根据陈列形式选择合适视角,从下方的示意图中能看到,三种视角给人的感受都不相同:

  • 平视有种方方正正感,给人一种非常自然的观察感受,虽然中规中矩但视觉舒服;
  • 仰视则能体现产品的高大和气势,用来烘托价值感;
  • 而俯视最接近我们日常看桌面小物品的视角,很真实也很亲切,同时还凸显了产品的立体感。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

而上图的仰视和俯视都属于小视角,即产品视线和水平视线的夹角较小,这是设计中的常见视角,大概就是把头微微抬起或低下时看到的场景,这时画面最自然也最舒服。反之若视角过大,即头抬的很高或压的很低时,这时产品的形变就很夸张,显得刻意、不舒服。

说完3种视角,现在正式讲解焦点透视,一般根据物体灭点的数量不同,焦点透视又分3种:平行透视(一点透视)、成角透视(两点透视)和斜角透视(三点透视),它们都有各自的透视效果和适用范围,但若铺开讲会很复杂,因此下面就结合「空间陈列」进行介绍。

1. 平行透视

用立方体简单说明,就是有一面与画面平行,这时物体的厚度边线若向内延伸,最后都会汇聚到1个点上,因此又称「一点透视」。这是最简单也最易掌握的一种透视形式,其中汇聚点称为「灭点」,而灭点所在的那条线则是「视平线」,即与人眼等高的一条水平线。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

再来看看平行透视在生活中的场景呈现,如图所示,将各种景物进行前后连线并延伸,最后都是汇到一点才消失。平行透视适合表现场景纵深,给人一种正式感和平和感。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

电商中的产品展示也一样,例如下方示意图中,不管哪种视角,产品和立方体都是正对观众,让人觉得摆放角度正正好。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

总体来说平行透视只有1个灭点,变化并不多,视觉表现单一,没有太多的空间变化,基本就是从正面来表现整个场景,因此上手简单,只要确保前后连线都汇聚一点即可,这样画面各元素也会显得整齐。但有时这种正视会让画面缺少层次感,显得很平,此时可尝试俯视视角或者强化背景的空间纵深。

下面展示平行透视在3种视角下的应用案例,注意观察不同视角下的产品呈现和透视变化,虽然微妙,但每种视角确实给人不一样的视觉感受。

平行平视

当画面为平行透视和平视视角时,这时的观察位置很正。如下图所示,空间和产品都显得有些平整,虽然场景的立体感较弱,但视觉舒服协调,表现起来也相对简单。注意平视的「视平线」基本位于主体元素的中心处,即是说人眼此时正对前方物体的中心,这样才会有平视效果。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

平行仰视

当画面为仰视时,一般视角都不会太大,微微仰视即可,这样视觉才舒服。如下图所示,其实和平视比起来,小角度仰视的透视变化并不明显,没有夸张形变,但依然能体现空间和产品的高大。此时「视平线」位于主体中心靠下的位置,这时人眼明显是从下往上看。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

平行俯视

如果觉得画面的层次感和立体感不够,那就尝试下俯视视角,如下图所示,由于俯视时我们能同时看到物体的顶面和正面,这样就能表现物体的厚度,立体感也明显增强。而画面的「视平线」则位于主体中心靠上的位置,这时人眼就是从上往下看,但同样属于小角度俯视。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

2. 正俯视

平行透视的俯视还有一种特殊情形——正俯视,即视角为90°的俯视,这时我们是从物体的正上方低头往下看,如下图所示,当产品平放桌面时,正俯视能清晰看到产品的全貌。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

在空间陈列中这是一种常见视角,上手简单,展现清晰。例如下方案例中,俯视下的产品摆放非常灵活,根据构图需求可以工整 ① 也可以随意 ② ,并且产品多以正面展现为主,整体直观、舒服。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

以上都是产品的陈列案例,其实正俯视有时也会用于场景呈现中,如下图所示,视点位于场景的正上方,有点类似无人机的俯瞰拍摄,这种看似「刁钻」的视角能给画面带来独特的戏剧效果,令人印象深刻。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

空间平行透视

除了3种视角,这里还要介绍一种平行透视的常见形式——空间平行透视,这种形式即画面的正前方有个类似方盒的纵深空间,而人物或产品就放置在空间里。

如图所示,该形式也有视角的3种变化,但为了确保视觉的自然舒服,仰视和俯视也都是小角度的上下摆动,所以产品的透视变化并不明显,场景呈现也没有很夸张。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

为何要将该形式单独列出?因为它非常适合手机端的竖屏构图。

手机不像PC,无法通过宽屏来表现视野开阔的大场面,手机屏更适合长焦特写的小场景,但这样有时就会显得左右拥挤不透气,这时「空间平行透视」就刚好取长补短,通过「深度」刻画将狭窄空间的纵深感体现出来,最终使观者视线在前后维度上有了延伸和舒展。

该形式正是利用平行透视的纵深性,才缓解了手机屏的拥挤感。下面分视角列举案例,要注意不管平视、仰视还是俯视,空间里的所有元素最后都要汇聚一点,这样透视才合理,纵深效果也最好。

3. 空间平视

3种视角中,空间平视最常见,因为这种方方正正的空间展示最适合手机的竖屏构图,看着最舒服,上手也简单,易于搭建。在平视下,由于没有视角的高低变化,空间基本位于人眼的正前方,无任何偏移,摆放角度非常正,构图给人一种稳定感,元素也没有夸张形变,组合方便,真实自然。

对于「空间平行透视」,「深度」刻画很关键,我们要根据版面构图选择合适的深浅。例如下方案例中:① ② 的深度浅,空间相对封闭,适合展现小空间,给人温馨感和趣味性;而 ③ 的深度深,空间开阔,适合展现大空间,这样能让视线更舒展,画面更透气。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

4. 空间仰视

在仰视下,我们是抬头向上看,这时空间显得高大,给人强烈的气势感。如下图所示,视平线贴近地面,像是我们蹲着向上看,这种仰望视角,建筑和人物都很高大,再加上强烈的纵深感,虽然空间左右依然狭窄,但上下和前后维度却变的非常开阔,画面通透。

空间仰视能渲染氛围,提升场景的戏剧效果,突出视觉冲击力,但要注意仰视视角不能太大,否则夸张的仰视效果反而给人一种压抑感。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

5. 空间俯视

在俯视下,视平线处于空间中心的上方,类似我们站在高处往下看,如下图所示,这时空间显得立体,远近的各类元素也能得到清晰展现,层次分明。

俯视适合展现空间的全局观,也让各物体有着丰富的体积感。除非有特殊的构图需求,不然和仰视一样,俯视视角不能过大,否则俯视就变成俯瞰,会产生遥远的距离感,空间也压缩的厉害,进而导致形变和失真。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

成角透视

还是拿立方体举例,就是物体与画面形成一定夹角,这时物体的所有边线分别向各自方向进行延伸,最后会在视平线上形成一左一右2个灭点,因此又称「两点透视」。这类透视最接近我们日常的观察角度,即是说大部分时候,我们看到的物体都属于成角透视。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

虽然成角透视只比平行透视多了1个灭点,但2个灭点的位置却很灵活,这样空间的透视变化也更加丰富。

例如下方是我们经常看到的景象,虽然都是典型的成角透视,但 ① 是2个灭点都在画面外,这时建筑给人的感觉结构平稳,立体感强,侧重写实;而 ② 则是1个灭点在画面内,另1个在画面外,这时空间右侧的透视形变较大,产生纵深感,整个场景更有张力和冲击。

其实还有第3种情形是2个灭点都在画面内,但由于空间会产生夸张形变和失真,因此总体少见,不再举例说明。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

再看看成角透视下的产品展示效果,如下图所示,不同于单面展示为主的平行透视,成角透视则以展示物体的两面为主,这样立体感更强,构图也更稳定。注意在成角透视中,画面所有的竖向边线都是平行,不会产生灭点。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

相比平行透视,成角透视在表现上更复杂一些,一般都以2灭点在画面外的情形为主,这时透视最舒服。注意要想画面只产生2个灭点,那当中的所有元素都需排列整齐,这也是成角透视的常用做法,此时画面会显得整齐统一。下面列举3种视角下的电商案例,其中以仰视和俯视最为常见。

1. 成角平视

平视下的成角透视相对少见,因为使用成角透视就是为了凸显物体的立体感,但平视由于视角很正,恰恰就会显得立体感较弱,这时2种效果会有矛盾,影响场景的协调性。例如下方的2个案例中,产品看着就有些平整,和方形盒子以及立方体稍显冲突,但整体视觉真实平和,没有形变。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

2. 成角仰视

仰视下的成角透视就显得刚刚好,如下图所示,所有元素均用2个立面展示,加上透视形变,这时空间的立体感强,产品和立方体也都有明显的体积感,视觉平稳、饱满,而且还能体现产品形象的高大,凸显价值感。

注意2个案例中,视平线上都只有2个灭点,这是因为产品和立方体的排列都很整齐,反之若无序排列,就会产生多个灭点,这样画面会显凌乱,视觉不舒服,所以在表现成角透视时,尽量确保所有元素都能整齐排列。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

3. 成角俯视

在成角透视中,俯视视角最常见。因为该视角下的物体可以展现3个面,能进一步强化元素的立体感和方位感,如图所示,物体的空间关系明显,层次分明,构图也平稳。

一般成角俯视适合小场景陈列(若是大场景则垂直方向会发生严重形变,这就是后面要讲的「斜角透视」),刚好这是手机屏的擅长,小空间配上小角度俯视会给人一种亲切感,类似长焦镜头的特写画面,很好的拉近了观者的心理距离,因此属于手机端的常用构图。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

空间成角透视

成角透视的优势在于画面立体、稳定和写实,这些优势刚好适合空间的立体呈现,如下图所示,成角透视即可用于室内塑造 ① 也可用于外形搭建 ② ,类似我们站在空间侧面看整体,此时空间立体、饱满,结构有张力。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

但由于成角透视都是在画面两端形成灭点,所以该透视下的空间更适合横构图,但手机屏却是竖构图,对于横向拥挤的竖长屏,成角透视就会有些施展不开,左右狭窄,无法像横版那样开阔的展现空间,也没有平行透视那样看着规整,因此使用较少。

斜角透视

物体与画面存在一定夹角,并且在2点透视的基础上,再加入了高度变化,这样垂直方向的连线会向上或者向下汇聚,最终画面形成3个灭点,又称「三点透视」。相比成角透视,斜角透视其实就是让本没有交集的竖线有了交集,这样垂直方向就有了强烈的汇聚感。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

斜角透视的形变夸张,常用于大型物体的仰视或高处俯瞰,类似广角拍摄。

如下图所示,该透视能表现出建筑或空间的宏大感,并且越宏大透视就越强烈。这时画面的夸张构图会显得观者渺小,给人一种压迫感,也让场景有着极强冲击力,同时带来了更加刺激的视觉感受。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

其实只要观者在场景中显得很小,这时看到的画面就会产生斜角透视,例如当我们仰望高楼时,相对高楼而言,渺小的我们就会看到斜角透视。

但如果产品展示采用斜角透视时,就会有一种强烈的不真实感,因为相对产品来说,我们并不渺小,所以日常是不会看到这样的场景,这种场景更像是「昆虫视角」,如图所示,斜角透视下,虽然画面不真实,但会有种特别的戏剧效果。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

另外斜角透视没有平视视角,因为平视物体的竖向边线依然平行,不会在垂直方向产生第3个灭点,因此仍属于成角透视。总之只有在大角度仰视或俯视大型物体时,才会看到斜角透视。

这种形变强烈的夸张透视虽然生活中相对少见,但电商中用的还真不少。还记得我们在第2章讲创意方法时提过的「独特视角」吗?其中一个方向就是使用斜角透视。

这种透视可以体现物体的巨大(仰视)或者场景的宏大(俯视),正是这样一种不真实也不自然的视觉感受,反倒给人一种强烈的气势和冲击,画面极具张力的构图往往能脱颖而出,并在第一时间抓人眼球,吸引注意,所以成角透视特别适合大促主题的场景搭建和氛围营造,下面分视角举例。

斜角仰视

视能让物体显得高大,而斜角仰视则让物体显得「巨大」。如图所示,2个案例中的产品都十分「巨大」,通过这样一种「刁钻」视角和夸张手法渲染出了产品气势,使产品显得分量十足,同时也提升了视觉冲击力,整个场景都变的大气。其中 ① 由于版面有限,有个灭点没有标示出来。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

斜角俯视

当我们站在一个很高的地方俯瞰周围,或者用无人机在高空航拍,这时看到的景象就是斜角俯视。如图所示,尽管竖构图并不适合展现辽阔的大场面,但在斜角俯视的帮助下,2个案例依然体现了场景的宏大,视觉冲击强,这种居高临下感使人视野开阔。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

平行斜角透视

斜角透视中还有一种特殊情形——平行斜角透视,就是当空间或产品的一面与画面平行时,此时不管透视多强烈,画面也只有2个灭点。

如图所示,当立方体的一面正对视点时,侧面便从2个主立面减为了1个,这时除了垂直方向的1个灭点外,原本视平线上的2个也就成了1个,虽然只剩2灭点,但本质仍属于透视强烈的斜角透视。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

既然是与画面平行,那和平行透视有何区别?

下面看张空间对比图,能看到2者的形变差异还是相当大:左图为平行透视,像是我们在看一个小方盒,亲切、自然、真实;而右图则是平行斜角透视,更像是我们在仰望一个巨大空间的入口,充满戏剧性,并有压迫感。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

其实对于手机端,「平行斜角透视」才是斜角透视中的常用形式,因为它的摆放角度很正,这种正面观察很适合手机端的竖屏构图,而且前后的纵深刻画也能缓解版面的左右拥挤,另外画面纵向的汇聚感还能迅速吸引注意,给人一种巨大冲击力和强烈氛围感,其中仰视比俯视更加常见。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

平行斜角仰视

近几年这类透视越来越多见,因为它既适合竖构图,也能提升画面的形式感和表现力,非常利于促销主题的氛围打造。

如图所示,整个画面就像是我们站在宏大场景的正中央仰望时看到的景象,各元素摆放很正,虽有压迫感,但空间和产品都显得非常高大,张力十足,能让用户牢牢聚焦,同时也产生了强烈冲击力,更易在用户脑海中形成记忆。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

平行斜角俯视

在这类透视下我们会感觉自己拥有高高在上的「上帝视角」,元素摆放同样很正,视野辽阔,场景宏大。但过大的俯视视角会对场景进行一定压缩,再加上俯瞰产生的遥远距离感,这样就显得元素有些「小气」,无法体现仰视下的高大,因此画面的刺激感没那么强烈,总体相对少见。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

3. 小结

以上便是焦点透视的3种类型,我们再来回顾下各自的使用情形,如下图所示,这是一张3种透视的转换示意图,都是仰视视角,旁边小人则是观察者的大小示意:

  • 当立方体的一面正对观察者时,就是「平行透视」,这时除了物体厚度的边线会汇聚1点,其余边线均无交集;
  • 而当立方体旋转一个角度,任何一面都不正对观察者时,就是「成角透视」,这时横向边线会向各自方向汇聚成2点,竖向边线则无交集;
  • 此时若将立方体变的巨大,大到需要仰望,就是「斜角透视」,这时在2点基础上,本无交集的竖向边线将汇成1个新点。

希望通过这张示意图能帮大家更好理解什么时候该用哪种透视,总之小场景搭建一般以「平行透视」和「成角透视」为主,而恢弘的大场景则以「斜角透视」为主。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

当然现实里的透视远不会这么单一,根据物体不同的摆放位置以及不同的观测距离,很多时候同一画面也会存在多种透视,例如平行透视和成角透视就经常组合出现。

电商设计也一样,例如下方案例中,整个空间是平行透视,而里面的盒子则是成角透视,这时视平线上会有3个灭点,其实若产品的摆放再凌乱些,还会出现更多灭点,但这种无序组合会让空间塑造变的复杂,看着也不规整,因此并不推荐。

但要注意不管画面的透视多复杂,当中的视平线却只能有1条,并且无论水平方向有多少个灭点,最后也都会落在视平线上。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

除了以上3种透视外,其实还有4点透视(超广角透视)、5点透视(鱼眼透视)等等,但都过于复杂,用的也很少,这里就不做展开。对于电商里的「空间陈列」,3种透视已够用,它是我们塑造空间的基础,如果一开始的透视错了,即便配色、光影做的再出彩那也无用。

总有人说透视难掌握,其实只要我们在生活中多观察、多留意身边物体的透视变化和规律,及时总结,那这种理性还原就不难做到。当然设计终归还是理性与感性的双重表达,所以透视虽要遵循,但切忌生搬硬套,视觉协调即可。

讲完了焦点透视,我们知道了空间塑造的基本原则,下面就来说说都有哪些陈列场景。

陈列场景

相对PC来说,手机端受屏幕所限,陈列场景其实没那么复杂,核心是要先构建一个空间,然后让产品以合适的视角及透视在空间里呈现出来,而这个空间场景则要和主题氛围、产品气质都高度匹配。

一般来说,手机端常用的陈列场景有4类:盒子陈列、台面陈列、自然陈列以及舞台陈列,选择哪类则要看哪个场景对产品的烘托效果最好。

1. 产品组合

在介绍每个场景前,我先说说关于产品组合的2原则,因为很多时候在空间摆放的产品数量较多,这时它们的组合形式就变的尤其重要,稍不注意就会显得画面杂乱无章,不够协调,而且凌乱的摆放也会降低产品的品质感,缺少吸引力。关于组合原则,核心有2点:大小合理以及三角构图。

大小合理

如果将多个产品摆一起,则要确保它们之间的相对大小符合现实中的真实差异,现实中尺寸大的产品就要相对大些,而尺寸小的产品就要相对小一点,这样才会真实并经得起推敲。

而有些设计师在组合产品时,也不管大小的真实差异,放进版面后就很随意的放大或缩小,最后出来的组合要不就大小一样,要不就比例失真,这些都会给用户一种强烈的不协调感和不真实感。

下面再看一组对比图,明显大小一样的左图会有不适感,也缺少层次;而大小合理的右图则更有美感也更舒服。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

其实大小合理的最终目的是希望整体结构错落有致,就像右图一样,这种有高有低的组合才能体现韵律感和结构美。所以如果可以选择,那我们就选择一些尺寸差异较大的产品,尽量避免出现大小差不多的情况。

当然如果必须陈列大小一样的产品,那也可以通过透视或者辅助元素来改善,例如空间里的近大远小、立方体加高都能改变高度一样的情形。

三角构图

当我们选好不同大小的产品后,就要注意它们的组合形式,千万不能乱堆一气,不同的摆放会形成不同结构,而每种结构又会给人不同感受。我们在「图形分割」中讲过「正三角」具有很强的稳定性,因此当产品采用正三角构图时,会让人觉得版面平稳、视觉舒服。

如图所示,所谓三角构图,其实就是将尺寸大的产品放中间,而尺寸小的产品放两边,这样不但构图稳定,而且画面也有节奏和变化。可以说「三角构图」就是空间陈列里最常用的构图方式,而本节展示的所有案例中,大部分也都是三角构图。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

明确了产品的组合原则,知道了如何陈列才舒服,下面就正式讲讲空间陈列的4类场景。

2. 场景

盒子陈列

「盒子陈列」就是在盒子里面放产品,而盒子多以礼盒为主,使用场景和主题相对单一,基本用于送礼之意的专题页。创意虽然普通,但却不易出错,是种相对安全的表现方式。当然若能在盒里加些小心思,画面也会很出彩,像我之前看过一个新年Banner,就是礼盒里装着一个大家庭在吃年夜饭的温馨场景,这样的新组合便让人眼前一亮。

另外若能提升礼盒刻画的精致度,那画面也会有不错的设计感。而盒子外形也不只有方形,常用的还有圆形和异形。观察视角则以小角度俯视居多,因为这个视角最接近我们日常看礼盒的真实情形,盒内产品在俯视下能看的一清二楚,展现也立体。

盒子陈列的难点在于当盒内要摆放很多产品时,如何能让产品真实、自然的呈现,这需要我们既注意摆放的合理性,也能准确表现透视,还要刻画出产品的明暗变化,总之只有把握好产品的空间感、立体感以及光影感,画面才会舒服协调。

方形盒是最常用的盒子类型,毕竟也是生活中最常用的礼盒外形,结构感强而且易表现。如下图所示,礼盒都是成角透视,且左右灭点都在画面之外,这样结构最稳定,立体感也强。注意盒里的产品呈现,特别是俯视视角下,产品越多越要注意它们是否协调统一,透视、光影等细节一个都不能少,把控不到位就会显得凌乱,画面别扭。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

圆形盒比较少见,因为和立方体比起来,圆柱体的透视没那么强烈,结构感偏弱,但圆润的外形能使画面变的柔和,给人一种亲和力和温馨感,如图所示,由于圆形盒没有明显块面,所以不管透视还是光影,刻画起来都相对简单。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

异形盒是指外形为不规则形状的盒子,总体也很少见,但易出彩。形状用的好便能打破「盒子陈列」的常规感,使画面变的新颖有创意。

例如下方案例中,不管是心形、猫头轮廓还是圣诞树,都能成为画面焦点并引人注意。另外盒子呈现均用了「正俯视」视角,其实除了小角度俯视外,这种视角也很常见,因为该视角下的产品陈列清晰完整,盒子外形也能直观显示,的展现了其外形的特别之处。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

台面陈列

在空间陈列的4类场景中,「台面陈列」用的最多,适用范围也最广,可以说电商中的大部分主题和产品都能使用,算是一种真正白搭的表现方式。

「台面陈列」就是在空间里搭建一个「台面」,然后在上面放置相关产品。由于该手法还是以放大特写的小场景为主,元素形变不能太大,因此画面常用平行透视和成角透视,视角则很灵活,跟着构图走,3种(平视、俯视、仰视)都有。「台面陈列」上手简单,场景多变,其中的关键元素——台面需要根据主题、场景进行灵活变化,常见有2类:桌面和几何体。

桌面很好理解,就是桌子顶部的陈列面,所有产品都放置其上。由于桌子是家里常见家具之一,因此桌面陈列往往能传递一种「家」的温暖和温馨。

可能有人觉得「桌面」形式有些单一,其实远没那么简单,我们不要固化思维,要能灵活变化桌子的样式和装饰,例如方桌还是圆桌?木桌还是大理石桌?光面还是铺桌布?这些都是可变量,再加上视角和周围环境的变化,总之形式可以很丰富。

如图所示,桌面陈列尤其适合各类美食的组合呈现,这时整个场景贴近生活,颇有带入感。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

就是将各种几何形体作为陈列产品的台面,几何体相对抽象,表现场景更多元,因此比具象「桌面」更加常用。

如图所示,几何体一般都是组合出现,特别适合多产品陈列,简约大方,能烘托出产品的品质感。同时通过高高低低的大小排列也能表现出画面的结构美以及层次感,总之是一种 「上手简单、易出效果」的表现方式。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

常用几何体有「立方体」和「圆柱体」,它们适合陈列,高度调节方便,使用灵活。

如下图所示,整体表现并不复杂,就是将各种产品放在几何体上。但作为画面的核心元素,这时几何体的形态、排列、视角和透视就变的非常重要,我们要根据创意需求和产品气质选择最合适的展现方式,而这些展现本身就有不错的形式感。

几何体陈列既能营造空间关系和简约气质,也能让用户聚焦产品本身,因为它的外形简单,不抢产品,不像一些复杂元素或场景,虽然视觉丰富但最后却让产品淹没其中,这样就本末倒置。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

自然陈列

「自然陈列」需要先创建一个合适的自然环境,然后再将产品以合适方式融入其中。相对其他场景,自然环境显然复杂一些,呈现手法常以「合成」和「插画」为主。因为产品都是实物拍摄,为了风格统一,自然环境会偏向写实风格,这样2者结合才协调。

从下方案例能看到,「自然陈列」常用于季节感受或者产地溯源等主题,画面通过「自然场景」营造出天然健康的绿色氛围。而场景中的元素繁多,呈现复杂,这就需要我们具备优秀的整合能力。

对于「自然」塑造,视角以平视和小角度俯视居多,但画面由于没有太多的几何型物体,所以透视没那么严谨,核心是注意近、中、远景的层次区分,还有光影的合理添加。如果这些把控不到位,就很可能出现场景杂乱、缺少层次、没有带入感的粗糙画面,最终沦为各种素材的乱堆一气。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

以上列举的都是以花草树木为主的自然环境,确实绿色场景在「自然陈列」中用的也是最多,但除了绿色场景外,有时也会用到其他环境。如下图所示,像海底 ① 、沙滩 ② 、海面 ③ 、冰山 ④ 也是适合陈列的自然场景,特别是夏季主题会经常用到。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

舞台陈列

最后一类「舞台陈列」常用于大促主题的气氛营造,这类场景不挑类目,任何产品放在「舞台」上,灯光一打,色彩再斑斓些,都能营造出热闹的促销氛围。

如图所示,舞台外形以圆形居多,因为圆形的透视感较弱,构图灵活,而且也符合大家对舞台的第一印象。舞台视角则很灵活,3种均很常见,核心是和产品视角保持一致。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

关于「舞台」塑造,还有2处需要注意的地方:

舞台外形除了最常用的「圆形」外,还有半圆形、方形和六边形等等;舞台造型也可以很丰富,并不局限于常规的表演舞台,各种造型都可尝试,例如上方左四图就是现代感十足的三维舞台,总之我们要根据创意和风格塑造相匹配的陈列舞台。

另外就是灯光运用,可以说这是「舞台陈列」和其他场景的最大区别,但灯光也不是越多越好,太多反而显得眼花缭乱,其实能渲染出绚烂气氛即可。而有光就有影,在灯光照射下,产品一定要有准确的光影呼应,这样才不会显得突兀。例如上方案例中,仔细观察灯光下的产品呈现,能看到产品表面都产生了被灯光照射后的色彩、明暗等变化,这些细节刻画才让画面更真实,融合更自然。

3. 实战案例

本次案例会用胶原蛋白口服液作主体元素,然后用这4类场景(盒子、台面、自然、舞台)来设计4张不同视角、不同风格的Banner,让大家看看在不同场景下,如何将产品融入其中。先展示案例会用到的3种产品视角, 下方案例会根据不同的场景视角选择对应素材。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

总结

「空间陈列法」的内容量挺大,主要分成了「焦点透视」和「陈列场景」2大部分来介绍,其中焦点透视是立体「空间」的塑造基础;而陈列场景则是产品「陈列」的具体环境。

常用场景有4类:盒子陈列、台面陈列、自然陈列和舞台陈列,每种陈列都有各自适用的主题和氛围:「盒子」常用于温馨的送礼主题;「台面」则能根据不同主题灵活应变,属于百搭场景;而「自然」则适合季节或者溯源主题,体现天然清新感;最后的「舞台」则用于氛围浓烈的大促主题。不管哪种场景,都要确保产品和空间的视角、透视相一致,这样场景才会真实协调。另外多产品陈列时,还要注意它们之间的大小比例以及摆放结构,其中三角结构最常用。总之在手机时代,「空间陈列」是一种真正适合小屏竖构图的表现方式。

文章来源:优设    作者:贤辈

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

想提高设计转化率,按钮应该放在左边还是右边?

雪涛

任何一名设计师应该都会接触到运营活动页,产品落地页此类需求。而这些落地页设计需求的业务目标衡量标准都相当明确——即转化率。再进一步,与我们的设计输出直接相关的就是首页转化率/点击率。这些数据通过埋点能很轻易地获得,一般情况下,产品经理会提前在需求文档中标明需要埋点的地方(埋点简单说就是测量某个位置或者交互节点的具体数据,例如发生了多少次点击),获得数据用于验证产品最终是否符合预期,是否达到了理想的转化效果。

叮~ 讲到这我们应该明确了一件事,整个落地的设计其实最终都是为那个关键数据服务,无论是点击率还是转化率,达到预期甚至超出预期,那你的设计就完美地完成了任务,这也是验证设计有效性的主要方法,将设计与数据关联,用可量化的数据指标来验证偏感性的视觉工作。

就这样,设计与产品/运营的世纪大战开始了。因为我们都有了一个共同的目标,因此在产品的最终收益、期望效果方面互相都很明确。但在实现手段上,我们很轻易地产生了分歧。主要分歧点就是「按钮在左还是按钮在右」这个问题上。我们需要理解,这不是一个简单的交互问题,因为它其中掺杂了商业内容。如果这是一个交互问题,那我们很容易判断,例如弹窗的主次按钮应该主右副左,这既符合平台规范,也符合用户认知和操作习惯。

然而作为一个强商业属性的落地页,按钮在左或者按钮在右都有其合理性。我选择左,而运营同学代表他们团队要求右。 于是我败下阵来,当然,虽然表面上设计师输了,但我们怎么能服输,于是我想尽办法来验证左侧放置按钮才是更有利于转化的形式。下面我们来看看不同的倾向对应的设计原理。

左与右的矛盾

产生左与右的争执其实主要源于设计与需求方的两个判断方向。首先说一下我的判断逻辑,按照已知经过验证的理论,即 F 阅读顺序(尼尔森的用户阅读视线模型),用户浏览落地页的顺序应当是从左往右自上而下,因此左上角的信息最早触达用户。在当前主流的首图式落地页样式下,首图 banner 中的内容应当置于左侧,以使用户更快地获知产品的关键信息。

在落地页首图的体验文案本身就是一个设计的覆盖范围,因为它直接关系到首页的视觉传达效率,即用户需要花费多长时间、多少精力才能理解你的产品。我们往往在首页体验文案中采用主标题加副标题的形式,着重解释这个产品是个什么东西、用户能从这获得什么,往往通过主副文案搭配的形式,来完成整个大意的阐述。

基于此,核心内容置于左侧,用户在快速扫视时能够第一时间获知产品信息,了解产品利益点,这与我们精心准备整个网站,以及精心准备诱导力文案的方法相契合。这是我做出内容置于左侧的设计决策的主要思路。可以看出,我这里主要参考的是 F 阅读模型这一理论,根据这个经验我得到的结论是 重要的信息应当摆放在左侧以使用户立即触达核心信息,这将有利于接下来的引导或者转化。

另一方面,运营同学又是基于什么考虑决定将核心内容放在右侧的呢?答案是操作习惯,理论化的话可以用费茨定律概括,(目标距离用户距离越短,用户触达的效率越高)。考虑到大部分用户使用右手操作,鼠标也大都悬停在屏幕右侧,因此,按钮置于右侧,用户点击的路径变得更短,也就更容易触达和转化(纯体验角度或者说效率角度)。

你仔细阅读这部分内容,从分歧点到各自的理论支撑实际上都没有太大的漏洞,为什么没有漏洞?因为确实都没有错误,也都存在其合理性。例如我们常用的购物 APP 会把按钮置于右下角,用户操作起来必然比左上角的按钮更加容易。那么在这两种分析都合理的背景下,我们要对比或争论的其实不是哪个判断是错误的,而是哪个判断更有利,更合理,能够带来更多的数据转化。因此,这个问题最终由对错问题,转化为一个优劣问题。

左与右的妥协(一种结论)

有些人很机智,这个时候肯定会想,既然左边最容易触达信息,右边最容易触达按钮操作,那左边放置内容,右侧放置操作不就完美解决了吗?哎呀,读者真聪明。

由于 F 阅读的逻辑,将展示性质的「内容」放置于左侧,使用户更快触达关键信息,由于费茨定律,以及多年来养成的用户习惯(操作组件在右侧,当然现在很多放在中间的情况)将需要执行的操作置于右侧,使用户快速交互并完成任务。有一定道理,甚至在实际落地产品中我们也能看到一些类似的设计,例如豆瓣。 这是一种左与右的妥协

但需要注意的是,豆瓣产品的右侧放置的是较为复杂的交互模块,例如完整的登录注册模块。在该场景下,用户在交互路径更短的右侧区域执行交互效率要明显高于左侧区域。

那么下面开始论述按钮置于左侧的观点

论点一:排版的限制

豆瓣的形式对于落地页产品,可能并不适用。主要有两方面原因。我们都知道,产品落地页首屏的组成为体验文案,主 CTA,插画配图三部分。常规做法是插画作为一组信息置于一侧,文案加按钮作为一组信息置于一侧。因为,体验文案与按钮具有强关联性,同时按钮与文案作为一组信息,才能与另一侧的插画搭配构建平衡的布局,呈现比较优美的视觉效果。

请登录后查看原图,因此,豆瓣那种妥协方式并不适用于商业类落地页。因为内容和操作本身是一体的,这源于排版的规整性的限制,按钮和文案只能同时存在于一侧,如果刻意去追求左侧内容,右侧操作,效果就像下面这样。一方面,只靠文案和按钮无法撑起左右两个区域,一方面文案和按钮被割裂开,用户的视线由文案转到按钮的路径过长,体验较差。(文案与按钮成组后,用户可以在阅读内容产生动机后立即触达交互按钮并完成转化)

论点二:文案与配图孰轻孰重

如果你亲自体验这两种区别的落地页(左图右文/左文右图),你会发现有一个共同点,就是在某个区域的停留时长,没错就是内容区域。以下图的顶部卡片区域为例,在阅读时我的浏览情况是,大致地扫视左侧的插画,然后注视右侧文字区,了解文章的具体内容,并在此区域停留较长时间,毕竟仔细阅读需要花费时间。

这就涉及到一个问题,插画与内容哪个更重要?其实答案很明显,我们只需要舍弃掉其中一项来测试下,看看哪个内容的缺失会对用户理解设计传达的语义产生较大影响。OK,我觉得没必要测试了(虚晃一枪)。很明显,删除插画后,我们仍然可以通过文章的标题来获知文章概要等关键信息,就像落地页首屏的体验文案,即便没有插画我们也能通过首页文案来获知这个产品是什么,能够为我带来什么。

然而如果去掉关键信息,去掉标题与按钮,仅凭插画我们无法分辨当前页面到底在讲述什么东西。设计本身就像是人与人的交流,产品就是我们,而用户则是我们的交流对象,去掉核心的文案,相当于把我们自己变成了哑巴,而去掉插画,最多相当于我们交流时面无表情罢了。

因此,在商业落地页中,我们以转化为核心目标,而能够更快地触达最重要的信息显然是明智之举,因此我们希望将核心的文案内容置于左侧。

(另外,一图胜千言的原理只适用于个别场景,例如数据可视化。设计人员通过将数值数据转化为易于理解的柱状图扇形图,来传达数据结论。而视觉修饰性质的插画则无法做到准确表意,我们通常在产品设计中见到的插画更多的是在情感上和审美上给予我们一定的愉悦,但想要准确描述关键信息,还是需要文字作为核心角色)

论点三:用户会因为便于操作而产生动机?

另一点同样值得我们思考,即用户真的会因为某个按钮更容易点击而被转化吗?或者我们换个形式问,假设你是一名男性,你会因为按钮在鼠标附近而选择点击购买女士内衣吗?你会在自己财务状况较差的时候因为按钮在鼠标附近而点击购买品吗?在大多数理性场景下,我相信你不会这样做。

所以这时候要引入福格模型,用来阐述产生转化的整个路径。福格模型简单来讲就是一个公式:B=MAT。B(behavior) 代表行为,M(motivation) 代表动机也就是用户需求,A(ability) 代表用户使用的门槛,T(trigger) 代表触发。也就是用户行为的产生需要用户需求为基础,需要保证产品的易用性,但是这还不够,在这个基础上我们还需要在产品中通过设计触发用户。完成转化的三个关键要素是,动机、能力、触发,缺一不可。

福格模型帮助我们解决了这个疑问。用户的购买或者转化始于动机,就像我上面举的例子,如果一个用户根本对产品没有需求(男性对女性内衣),那就不会产生动机,在没有动机的情况下,后面两项内容,能力或者触发都没有意义,无法发挥作用。整个转化的流程可以参考下方的示意图。

实际上对于那些有强烈动机购买或使用产品的用户,你的一切设计都没有太大意义,因为用户有强烈诉求的情况下,他会发挥主观能动性去找到转化的入口,主动完成转化。同理,有些用户是完全不会产生动机的,不是目标用户群。

设计策略主要针对的是有动机但不强烈(某种程度上有需求或者被吸引),以及暂时没有动机的两类用户。通过我们的首屏及详细内容,痛点利益点的介绍,来放大用户动机,制造共鸣点,创造美好的想象空间,使用户涌现强烈动机。然后转化就自然而然的产生。

因此,在首屏我们的核心要义是通过内容设计来触发用户动机,而不是想方设法触发操作。走捷径的误触方案设计能保证百分百的触发率,但那种触发没有任何意义。到这里我们应该明确了,用户会因为好的内容所触发的动机而买单,但不会因为你把按钮放在我手边而产生购买冲动。

因此,我的结论是,用户更有可能因为左侧展示的强洞察力的文案而产生动机,而动机是整个转化的起始,也是最关键的一点,有了动机,触发(按钮位置)的效率即便低一点,但转化仍然很有可能继续(就像动机产生了惯性,有了强烈的动机会自发地去寻找触发器,去寻找按钮以自主完成转化,但触发器不会有惯性)

这个观点论述下来,主要涉及到 F 阅读模型,费茨定律以及福格模型,算是很基本的设计原则,也顺便帮大家重温一下。最后,我们再拿一些其他实证来进一步论述,例如国内一线公司的落地页设计。

1. 一线公司落地页布局

2. 全球独角兽企业落地页

文章来源:优设    作者:南山可

Banner设计指南

纯纯

近一年多接触到了插画 Banner 设计,算是自己边做边摸索,还在学习探索期,目前总结了一些做稿的思路,分享的目的是为了梳理完善自己的方法论,让自己继续向前进一步。

本篇文章分享内容:插画 Banner 的三个层次。

插画 Banner 的三个层次:文案层、画面元素、背景层。

文案层

  • 文案样式:左对齐、居中对齐、右对齐。
  • 文案组合设计形式:上下组合、上中下组合、一体组合。

画面元素层

  • 主体元素
  • 相关联元素
  • 点缀元素

相关联元素和点缀元素可以二选一,也可以同时使用,具体根据设计画面而定。


背景层

以下内容是我目前总结的背景层类型。选择背景时的注意事项:背景一定要和元素风格一致。我经常会出现这样的问题,主体物和背景不融合,导致设计看起来主体元素是贴上去的。

注:以上所用到的图片素材均来自于懒设计、稿定设计

Banner 设计画面千千万,套路来回就几样。希望大家能在框架的基础上进行思维发散,创作出好的作品。

定量的设计套路(不变)+百变的设计风格(变)=属于你的千变万化的 Banner 作品

(原文章地址:https://www.uisdc.com/banner-design-guide


移动端 Banner 设计指南

雪涛

根据遇到的问题,总结的一些小经验,个人的一点薄见,欢迎大家交流。

国内国外运营 Banner 设计

最近有小伙伴接到了国外的运营外包项目,发现国外和国内对于运营的需求是有差别的,这篇文章就谈谈国内外:中国、韩国、欧美,它们运营设计的各自特点和里面的门道。

主要从以下三方面来说:

1. 风格特点

三个地区文化差异大不相同。

中国从古到今讲究遵循传统,过年过节讲究气氛,营造一种氛围。用红包来表达祝福和心意;其次,就是社会环境,中国人喜欢「热闹」,逢年过节,一帮人聚到一起才热闹,别人都买、卖的火的肯定就是好的,所以就「跟风效仿」。

韩国建国很晚,历史相对比较短。所以文化氛围比较年轻,偶像文化在韩国盛行,传统的东西相对较少,都是比较年轻化的:年轻化的偶像,年轻化的文化,年轻化的价值观。

欧美整个文化环境受移民的影响,比较开放国际化,体现的文化也是比较多元的,包容性、简洁、时尚是这些它最直接的特点。

接下来分别谈一下三个地区运营推广的设计特点差异化:

中国

中国的运营突出的是优惠:送红包、满减、优惠券等;必须要喜庆,鲜艳的色彩:以红色、橙色、黄色居多,来刺激消费。就好像进了卖场「瞧一瞧看一看,季末打折满100减99」

韩国

韩国的文化里「社交」这一关键词体现的尤为重要,「Line」这款APP对韩国影响比较大,里面的矢量涂鸦风格的插画深入人心,Line 官方设计可爱且特色鲜明的「馒头人」、「可妮兔」、「布朗熊」和「詹姆士」四个形象也很有特点,所以Line的「IP属性」和「矢量涂鸦」就成为了韩国主流设计风格。

2. 整体构图

而韩国的偶像明星文化也颇具影响力,在推广时也会用到明星来制造效应。

我们从整体构图解析一下三个地区的设计细节。首先把一个运营 banner 按照组件层级进行拆分,分别来看一下。

分为:文字层、主体物层、装饰层、背景层

文字层

从文字层可以看出中国的文字层级划分更加清晰。运用「格式塔」原理,主文案和副标题的突出,能让用户对信息提取更加准确直观。

中文结构的复杂性,排版上必须严格区分,所以在层级划分上装饰线的运用也是比较常见的。(后面有针对性字体设计形式,详细解读,这里就不细说了)

韩文的本身的图形特质,为保证识别度,文案提炼精简,信息层级相对较少。文字层级一般分为两层。

有意思的是韩文由于字形结构的单一,排版上很多时候会搭配字体形式的变化来增加排版样式的变化,装饰线的运用也比较多变。

英文排版上本质上和韩文相同——符号化,通过字形的特点来特出主要信息。

排版的优势性,让其排版变化上自带韵律感,加上装饰线的运用,本身字形的符号特性视觉呈现很有设计感。

主体物层

为了辅助信息传达,往往采用图文结合,注意主体物的构图布局朝向,主题物对主要文字起到视觉引导作用,用户的聚焦点一定是主文案,而不是主体物。

下图里「手」作为整个画面的「支点」,把模特的脸部向主要文案指引,最终达到活动的最核心。

下图里「眼睛」为整个画面的「支点」,利用眼睛视线,把用户向文案核心指引。

利用周围的物体形成三个「支点」,把视觉中心聚焦到中间主文案。

装饰层

点线面是运用最多的元素,中国把平面设计的三大构成运用到了。

为了营造构图的稳定性,在设计里加入点和线的元素让画面占比更加平衡,同时弥补画面中空白的地方,减少负空间,让构图更加饱满。

同时点和线的元素也是为了辅助衬托主体元素,分布要合理,避免过多,造成使画面的拥挤。

面简单的理解成形状,用形状配合主体物,达到聚焦视觉中心,来突出主题,但是形状不易过于复杂,「格式塔原理」——「简单」原则(我们的眼睛在观看时,眼脑并不是在一开始就区分一个形象的各个单一的组成部分,而是将各个部分组合起来,使之成为一个更易于理解的统一体),用户更容易理解。

三角形——利用稳定的特点来达到视觉的平衡

圆形——最简单直接有效的图形元素,视觉聚焦更明确

多边形——丰富画面,多边形的边角多的特点也多用做突出设计的高逼格

形状流体在营销中突出了活动的促销感和气氛,在重大活动中经常看到,色彩上也比较鲜艳。相较欧美、韩国,中国电商运用比较多,这也侧面反映出出中国运营推广竞争的残酷性映射出来的「浮夸」。

背景层

中国设计里最多变的就属背景了。可以利用多彩渐变、放射的线、还有图案叠加,让画面迎合表达的主体基调

韩国的设计分为涂鸦放射背景和纯色背景简单几何形状

欧美撞色对比和性冷淡纯色底,也会运用视错觉,来吸引用户眼球

3. 营销推广层面

文案是营销第一要素,想办法突出运营信息,是所有运营必须要注意的,这就有了根据活动气氛进行字体设计。

中国字体的复杂和文化的久远特殊性,对于字体我们是有很深的研究和造诣,表现空间也很大。另外由于中文字形的复杂,导致字库设计成本比较大,字体种类相对较少,为了避免字体版权问题,多采用一些设计变形来达到营销推广目的。比如针对字形进行改变、针对笔画进行加工、针对体积和质感进行变化等。

层次叠加——提取等比重的笔画,变现字体的体积和空间感

笔画链接——让文字直接更紧凑,空间运用更整体合理

笔画装饰——增加文字设计感,突出表现风格

厚度层次——让字体突出,增加厚重感

字形改变设计——考虑到字体版权,对字体进行再设计,结合主题进行宣传

字体内部装饰——字体呼应主题的一种简单方式

韩国字形相对简单,变化不是很多,运用厚度体积和笔画装饰来表现字体

欧美的西文字体更多的是运用和主体物穿插、和字形搭配的变换,和复古风字体厚度设计

4. 小结

可以看到不同的国家地区根据本国习惯、审美、风格不同,都有各自不同的设计。中国营销快速简单直接出效果;韩国偶像路线,不管是对于模特的选择,还是网红形象的选择,把粉丝效应运用到了;而欧美则简单兼顾设计创意表现。

浅谈学习Banner

随着教育在大趋势下崛起,很多学习类产品开始出现。很多在做教育的小伙伴求助,学习类的运营 banner 无从下手,思路不清晰,那么我稍稍的屡了一下思路,浅谈一下学习 banner 的个人薄见。

在很多设计师刚开始缕思路的时候,总因为无从下手而着急盲目,下意识的认为「我不会啊」!那复杂的不会,就从简单的开始缕。从设计开始,我构图都没想好,设计啥设计?那再简单点,从构图开始吧,我思路都没想好,构啥图?继续再简单点,一步一步往前推,直到推到最简单的细节,从最初第一步开始做。你会发现,首先第一步就是先建立一个符合主题的思路。

谈到学习类 banner,光听一听就觉得头大甚至很讨厌的事情。因为本来学习就是让人很拒绝的,如何引导用户主动做一个不想做的事,就得用到一些特殊的手段了。

咱们这次主要从以下方面来多维度探讨:

1. 主题定位方向

K12教育

K12 也就是九年义务教育和三年高中,所以人群定位青少年,年龄 7-18 岁。这个年龄段非常单纯。

大家可以回想一下我们小时候,在这个年龄最享受的是什么?那就是「满足感」和「参与感」,我们小时候玩积木、做游戏,最重要的不是赢了能得到什么东西,而是参与到其中享受快乐。所以建立一种参与感,参与进来「一起玩」的感觉,就会得到满足。

我们看到下面这类 APP,为了能够吸引这一部分用户,大多都以有趣好玩为主,「游戏性」是最大的特点,所以情感化设计是非常好的选择,通过丰富的「体积感插画」用游戏的思路激发兴趣,让他们感觉有参与感,从而吸引他们「想看」并「点击」。

知识付费

而对于成年人来说,学习需求变成一种「插件思维」,能够快速学会,或者说是能够收获很多的干货,突出不枯燥、学会、能懂。这类的情感化设计相对于少儿学习插画,更多的突出主题所以,以更极简的设计形式。

有时候文字作为主视觉中心更加直观,整体设计风格可能更加简单,对于成年人来说,这种设计更能直达我们需求本身,更容易理解。

高端知识分享

对于这部分人来说,定位跟上面两类完全不同,从所处层级来说就不同。首先这类人,学习的可能就不只是干货了,更多的需求是职场环境带来的。比如,我怎么跟同事、朋友、下属更好的相处,如何具有更好的说服力,或者是想进修一下,就有了学习需求,基于「马斯洛金字塔」里的,这里学习需求可能也是更高层次的,为了体现自己的价值。

所以更关心的是,这是谁讲的课;通过设计情绪版,映射出当前课程的专业、严谨、课程的价值高,这些关键点。

课程的品质感的体现,颜色不能太多,插画设计元素少,更多的利用文字排版和少量图形来突出主题。

总之,根据所代表的用户来针对性设计。就好像剪头发,Tony 老师肯定不会给一个 20 多岁的年轻人理一个小平头;穿衣服也一样,你上班肯定不会穿个背心裤衩就去了,但在海边放松你也不可能穿个西装、牛仔,我相信大家都能明白这个道理。

2. 构图结构

良好的构图,目的是能够让用户易懂,首先结构要清晰、简单,主要构图比如:居中、左右。

居中结构

突出活动文案,居中构图是个很好的选择,不足就是体现不了有趣好玩的调性。直白说主要就是明确干什么。所以用户的视觉焦点会聚集在重心区域,忽略掉周围的东西,在设计的时候,周围元素主要是衬托,不能抢主视觉重心。

所以说运用插画风格的话,简单轮廓插画和剪影插画是最适合的。

设计的时候注意几点:一,主体物要突出饱满,太小容易画面太空;二,弱化辅助元素并不是要把它做的粗糙。

左右结构

左右结构分为两种,一种是左图右文,左文右图。两种构图的秘密在于,用户的浏览顺序是「从左至右」,如果图在左边,图在表意性不明显的情况下,我们需要看一遍文字,再看一遍图,这样图相当于重复浏览了两次;文字在左边就减少了重复阅读,提高了阅读效率,在运营推广「3秒原则」里,是首先要考虑的因素。而插画设计本身也是为了烘托气氛,表意性不是很明显,所以突出文案尤为重要。

所以,市面上大部分的学习知识类左右构图的,更倾向第二种左文右图。

左右构图受限于屏幕显示内容,所以,有一个明确的主体物至关重要。比如:像 VIPKID 和哒哒英语,会有一个自己的 IP 主形象,比较生动突出了品牌特征,还能让用户有代入感;还有像一些知识分享的,就会有一个明确的讲师或者人物,体现专业权威性,在设计上一切都以突出主人物来展开,就不要设计太过于复杂。

不同于电商的模特,主人物首先穿着上不能太花哨,要正式;周围装饰上不要太浮夸,要精简,甚至像高端知识分享的,背景就一个简单颜色来衬托。

衍生结构

还有以上面构图衍生的构图形式,比如倾斜构图,受限于 banner 尺寸高度,过大的倾斜角度会让画面失衡,负空间留白不均,会让画面不协调。

构图比例合理

注意画面整体构图比例,文案占比永远都是大的,不要让主要画面辅助元素过大抢了文案的风头,因为即使图形辅助再精彩,用户更关心的是「你能给他看什么」。

文案和辅助元素大概是六四开,黄金分割比例能让焦点更多的关注内容,有些小伙伴可能在做的时候过多的沉浸在放大的画布里,由于没有直观感受,错误的预估当前构图的合理性,所以做图的时候多缩小画布离远看是个非常不错的方法。还有一个就是,做完了 banner 导出图片,双击打开图片,把图拖小到无法拖动为止,再看当前实际尺寸大小,用实际尺寸来检查。

更多构图形式:《文案超多的海报设计该怎么排版?16个实用模板送给你!》

3. 文案文字

文案选字

文字的选择也是衡量当前产品用户定位的标准,首先文字结构不能太过于复杂,K12 教育因为本身用户年轻化的特点,字形简单而且饱满有趣,所以一些艺术手写可爱字体比较适合。

免费商用可爱字体推荐:沐瑶软笔手写体、站酷快乐体、郑庆科黄油体、站酷小薇 LOGO 体、锐字真言体。

其他可爱字体推荐:汉仪唐美人、汉仪糯米团、汉仪铸字童年体、汉仪小麦体、方正胖娃体、方正字迹新手书、造字工房童心、文悦方糖体。

如果是高端知识分享和知识付费,体现高端。文字就要简单,字形不要那么随意,一些黑体和简单的衬线体就比较合适。

免费商用黑体衬线体推荐:思源黑、思源宋、站酷文艺体、方正书宋简体。

其他黑体衬线体推荐:汉仪瑞意宋、方正清刻本悦宋、方正兰亭、造字工房朗宋、造字工房黄金时代体、造字工房尚雅体。

文案排版

当用户人群比较年轻,意味着所有的呈现方式都要直接,文案精简并且排版直观,提炼关键主标题,信息层级要拉开明显,如果信息层级不清楚,识别性是很差的,先看下面的案例:

看这两个,明显右边的对于我们识别,和对当前功能的认知更清晰,还有一个明显的视觉引导,突出了最主要的交互点;而左边的由于信息比较密集,导致我们无法短时间反应出关键信息是什么,这是比较糟糕的,运营同样如此,而运营比较尴尬的一点是,如果用户看不懂或不感兴趣,是根本不会点击、不予理睬的。那么流量入口的意义就没有了,设计的再精美,都是一个非常差的作品。

提炼文案是很有必要的,下面两个同样的设计,右边对于文案的认知就更明显。

有的时候往往文案的关键信息比较多,我们在排版的时候第一个重要点,就是排版怎么拉开信息对比,同时又让排版紧凑?有时需要增加一些特定图形,或按钮。但是又会考虑,加了这些特殊图形和文案又显得相对独立不整体;还有就是关键点该怎么取舍,强化那些文案、弱化哪些,或是主文案是重要的,同时关键的数字也要突出怎么办?

左图,左边主文案放大了关键点,由于右边文案文字比较粗,所以层级拉开还是不够突出,如果想拉开对比的话那就让他们截然不同。右图,字体选择上拉开强弱,让右边的文字比划选择细一些;左图的关键数字不够突出,通过提亮改变颜色,来强化;按钮在左边画面显得太独立,和文案没有形成统一关系,反而按钮看起来变得要比文案重要,那么把按钮插到里面。

现在所有的信息,一环插一环,并且突出的文案明显,关键数字也明显;最后让他们整体在画面构图中面积比例放大,改版后是不是舒服很多。

还有一些小伙伴可能觉得亲密性原则不就是距离相近么,然后没有把控好各个部分的文字距离,导致反而该拉开的没有拉开,该近的没有近。

上图这个案例里,主文案分为了两行,但左边由于主文案行距比较宽,而跟辅助信息的距离太近,导致亲密性不够,而由于副标题文案又比较孤立,上半部的信息和下半部信息太散,整体统一度不够。

右图改进后,调整合适行距,并且加装饰线,协调一下辅助信息比较短的问题,同时也起到分割的作用让上下文案有关联和统一。

文案排版的其他细节还有错位排版时,注意错位的大小,太大会丢失掉排版的平衡性;注意文案排版对齐,往往有的时候不注意,会让你的作品看起来不够精细;文案做倾斜处理的时候,一般情况都是往右边倾斜,第一,右边都是我们的主要习惯方向;第二,往右可以很好的把用户引导到关键信息上,这些也是做 banner 排版里经常犯的错也是要规避的一些坑。

4. 颜色技巧

颜色倾向

如果是代表年轻化,多用绿色和黄色,绿色代表活力、生机、积极向上;黄色系代表温暖、希望、舒服。

这两个颜色由于是临近色的关系所以也会搭配出现在画面中,色环 90° 角的颜色搭配所以是最舒服的配色,还有就是颜色对比非常和谐。

由于蓝色是绿色的邻近色、是黄色的对比色,红色是绿色的互补色、黄色的邻近色,所以绿、黄、蓝、红这些会在画面中组成主色、辅色、点缀色。

注意协调好每部分颜色之间占比,主色 60% 左右、辅色 30% 左右、剩下的辅助色 10% 左右。

如果是代表科技、互联网,就会以蓝色为主,颜色也不会像上面那样丰富,颜色体现的设计也没有那么活泼,代表冷静、自然、科技。

一般画面在2-3种颜色,以蓝色为主,再搭配紫色。因为紫色和蓝色是邻近色,不会像暖色调一样太冲撞,所以我们经常会看到蓝紫这种「好基友」的搭配。

知识分享类,分为普通的讲师分享和高端知识分享。讲师分享颜色要亮一些,颜色搭配大概是 1-2 种。

而高端知识分享,要体现知识的稀缺性和专属感,代表尊贵、品质、价值,颜色大多用暗色或消色(消色就是黑白灰),大概也是 1-2 种。

颜色方面我总结几点坑需要避开的:一,如果用插画表现,一定要避免颜色的灰和脏,因为学习代表着积极向上的,灰色不适合。颜色选取的时候大概要避开「颜色警示区」的位置。

二,插画风格避免选择紫和一些冷色调,以暖色调为主,才能贴合情绪版定位;三,同样的道理,颜色不要过于艳丽、过于刺激,反差明显了,反而阅读体验不好,影响观感;四,所有的颜色最终都要定位到主题上,做完后,反向推倒检查一下,颜色呈现符合当前文案定位吗?符合面向的用户人群吗?根据主题当前配色合适吗?

更多电商配色方法:《这是一篇不看会后悔的配色干货》

5. 小结

最后我想说的是,所做的东西把自己当成模拟用户自检一下,自己如果看到这个 banner 会点击么?会吸引到你么?能直观感受到么?会让你舒服么?如果连自己都无感,那是相当失败的。

如何使Banner中主体物更突出

运营专题在设计的时候,我们要考虑的是针对运营需求,给特定需求的用户传达零成本阅读体验,很多设计师做的 banner 画面特别乱,原因是画面中没有突出主体元素。

所以在 banner 设计上要考虑贴合当前传达的主题,所谓设计的「言之有物」。下面来详细的谈一下运营设计时如何突出主体元素,其中的言之有物。

运营活动最终想给用户快速传达文案信息,也就是「三秒阅读」体验,配合辅助文案的主体图形更能方便用户去理解。

可以看到下图左为了让画面丰富,设计师往往会加一些辅助元素或图形;而图右糟糕的元素添加反而会过度设计,干扰用户对于运营活动本身的理解和其表意性。

那么,如何突出视觉主体物,而达到最理想的设计作品的表意性呢?

我们从以下五方面细谈:

1. 图形化辅助元素

流畅线条的运用

我们在看音乐类运营 banner 的时候发现线条运用非常普遍,特别是利用 illustrator 里的「混合工具」来实现两条线之间的复制混合。

人物涂鸦剪影

往往为了表现特定的主题:比如年轻化、个性化,通过错位移动,添加亮色来使人物突出,往往更多的表现在:音乐、设计、嘻哈接头文化的电商运营宣传中。

这类设计个性鲜明,所以做之前考虑好,所要传达的特定的人群是不是符合当前的审美认知。

简单几何形状

有时候为了让传达主题更加明确,简洁化设计很有必要「少即是多」,所以比如学习和知识付费类的设计,干脆就用简单的圆形、方形、波浪曲线。

下面这个案例,设计者为了使这几个人物不会太散,用圆形包裹,目的也是为了更加整体,试想一下,如果把圆形去掉,人物不仅会显多,画面也显得既单调又乱。

立体几何载体

让风格调性显得品质高,同样让设计少而精。需要注意的是,品质感高逼格的设计所用的图形相对要规整一些,尽量不要显得太随意,多用方块形状和立体几何载体。

比如网易严选,为了突出「所卖东西都是精挑细选」,会采用立体几何载体衬托的方式,所表现的就是「隆重和百里挑一」,我们不一样~(会唱的朋友们一起唱)

多边图形

运用模特表现的时候,高品质感会用一些规则多边形,比如:四边形、多边形等。多边的形状会给我们带来稳重感,「尊贵感与众不同」往往是这类商品想传达给我们的。

不规则流体

促销类电商营造促销的氛围,激发购买欲,会用到多色彩的不规则流体,目的为了传达「降价、折扣、满减、超值、限时」等 ,往往会为围绕主体物四周,突出主体元素。

小结

图形化元素是最简单也是最实用的一种突出主体元素的表现方式,不管是用哪种,一定要想明白所表现的主题:符不符合当前主题;推广所属对应的用户群体:心理认知上能不能赞同;满足这两点,所加的图形才有意义。任何图形都是为了辅助突出主体元素,记住这一点,你就不会盲目的进行设计。

2. 文案装饰衬托

文字铺底

直接把相关文字铺底是最常见的一种方式,用当前所对应主题的人物名字、相关文案、对应英文等。

文字与主体穿插

利用文字与主体的穿插营造出空间感,也是在平面设计中经常用到的手法,同样也是在保证文字基本的识别度前提下。

注意文字颜色与主体颜色之间要拉开反差,不要糊成一坨,就适得其反了,适当的时候加一点点阴影还是很有必要的。

小结

不管是什么形式,所加的文字要有意义,跟主题相关。任何加的文案一定要能衬托主体物,也要有很强的表意性,毕竟文案才是最重要的。

3. 颜色对比的运用

主体物吸色衬托

从主体物上之间选取,作为背景颜色搭配,来衬托主体物简直不要太完美,前提是主体物的颜色相对够和谐舒服。需要衬托的背景颜色相对要弱一点,以突出主体。

颜色对比

我们一想到颜色对比,马上想到「红配绿赛狗屁」这句话,这句话的意思不是说红配绿不行,而是说错误的红配绿不行,听不懂啊?来,举个栗子…李子…梨子…例子!

左图的红绿颜色占比可以看到是比较平均的,大概1:1的比例,但是红色作为一个比较刺激的颜色,颜色很鲜艳,如果搭配的绿色也一样饱和度很高,两个撞到一起没有一个突出色,画面就不会那么和谐了。

右图如果我们把红色的占比相应的减少,饱和度不变,而绿色降低饱和度,从而面积占比增大,起到衬托的作用,画面之间是不是舒服很多。

下图其他的颜色对比同样如此。

小结

颜色对比的口诀是:主体如果是亮色,背景就用冷色;主体用重色,背景用亮色;主体用纯色,背景用灰色;不管哪种对比,主体物的颜色一定是面积最小的那一个,无论如何拉开颜色对比反差是王道。

4. 主体物局部打光

人物面部打光

人物面部是最容易辨识,也是视觉焦点部分,所以让面部从画面凸现出来尤为重要,让光源聚焦到脸部,主体人物显得更加有质感和饱满度。

物体亮部打光

物体和人物相比相对简单,亮部高光部分为视觉焦点,让物体显得有质感,只需要给亮部特殊光源即可。

小结

光线能在突出主体物的同时,让构图更加丰富和饱满,切记光线不要过亮,看起来会很不舒服。

5. 主体元素摆放技巧

人物截取范围

截取摆放人物的时候注意,为了让视觉焦点集中、有辨识度。具有代表性的人物和明星一般截取一半左右,大约胸部以上部位;而电商模特为了展示所卖衣服,一般露出大约三分之二。

万万不要切头部

让人物完美的呈现在画面之中,让画面能够看起来舒服些,构图也相对完整,反之把头部一刀切,会使画面负空间变小,构图拥挤,而观看者对于人物的识别度也随之降低,阅读成本变高。

多人物摆放要求

多人物组合时,整体人物处理要基本保持一致,特别是眼睛视线要尽量保持统一的视觉基准线,不然会显得杂乱不堪。

多物体的摆放

表现美食产品的时候,文字居中构图,物体散点摆放要注意,角度的统一,统一俯视角度,不要有俯视有平视,保证统一度。

6. 案例带练示例

案例分析

这是一个小伙伴做的医美类的运营 banner,当看到这个设计的时候我的内心是崩溃的,我们分析一下问题。

问题一,首先主体物没有突出,主体人物偏灰,背景也灰;问题二背景太乱,没有视觉焦点;问题三,文案识别度完全丢失掉了,排版也太乱;好下面我们来改一下。整体看下来,并没有表现出医美要体现的「变美」,用户完全没有视觉感受。

调整改动

前后对比

最后我们来看看对比效果,是不是好很多。

无论什么样的设计,加什么样的元素,目的只有一个就是要有理有据、有道理,所有的运营设计都是为了辅助主体文案。不要让你的设计无用,或者减分,把设计元素最大化发挥它的作用才是设计的最终目的,你就说是不是吧!

3招搞定数字元素在Banner及专题页设计中的运用!~

用心设计

做电商设计的人都知道,我们的文案里时常会出现类似“满200减100”/“5折”/“30%OFF”/“39元起”“4月1号预售”之类的带有数字利益点的文案,而数字比文字也显得更加直观更加吸引眼球,所以对于该如何合理利用这些数字做设计也是很值得研究的一个话题,接下来我就带大家看看咯!~

 3招搞定数字元素在Banner及专题页设计中的运用!~

浅谈banner风格与元素使用

用心设计

比如我们的很多电商Banner或专题页面里,经常会出现活动日期/抢购时间/商品价格/位数...浅谈banner风格与元素使用 浅析如何给作品配图!清晰度?合适性?统一性?

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档