banner设计要点总结(三):细节设计—背景、文案、点缀物、配色
本文整理总结各方bannner设计要点,理清banner设计思路,为自己和许多新手设计师整理提供一份较完整的基础性参考建议。
接下来将继续按以下几个方面的内容展开总结:
1.需求及定位
2.风格、色调与素材
3.排版与构图
4.细节设计:背景填充、文案设计、点缀物设计、配色
5.提升表达力和关注率
6.提升设计感
四、细节设计
(一)背景填充
1.纯色填充
纯色填充的背景显得比较简洁、干净、素雅、有意境或者由高端感等。

2.渐变填充
渐变填充的背景因为色彩丰富或富有变化,呈现出一种梦幻感、时尚感,青春活力,较有感染力。

3.切割型背景
色块和图片的分割背景设计,能增强文案的表达力,对文案有突出表现作用。


4.摄影照片背景
文案配合照片画面,文案与背景能较好融入在一起,有意境,引人入胜。但要注意照片的版权问题。

5.合成场景背景
合成场景虚实结合,有代入感、设计感,能更好的烘托主体,增强表现力。

6.舞台效果背景
光束起到聚焦效果,能较好的凸显主体商品。

7.肌理纹理背景
肌理纹理的背景,显得画面有质感,避免单调,有感染力。

8、自由形状背景
自由形状搭配渲染的背景使人感觉自由、个性。

(二)文案设计
1.字体类型
(1)衬线字体
这类字体在笔画开始和结束的地方都会有修饰的部分,总体笔画的粗细不同,如宋体。这类字体适合体现出文艺感、古典感、品质感、传统文化感等。

(2)非衬线字体
这类字体于衬线字体相反,没有修饰部分,且总体壁画粗细差不多。这类字体比较通用常见,适应性很强,可以用于任何风格,比较简洁、大气、时尚。

2.文案设计思路
(1)标题图处、层次分明
主标题要醒目、易识别,字体要相对大,颜色要更鲜明,不能主次颠倒。
(2)灵活应用对齐方案

一般人的阅读习惯市从左到右,所以一般市遵循左对齐原则;
但据情况调整,右对齐有时更能起到平衡画面的左右,还能增强一定的设计感;
居中对齐则有一定的对称美,能突出中心;
两端对齐能使大段文字显得规整,提高阅读体验
无规律排版做不好容易显得杂乱,所以要根据版面特点灵活设计。
(3)字体的混排
多种字体的搭配可以拉开不同层级文案的差异,体现出层次感,突出主题,但最好总体字体不超过3种,且在选择字体时要选择识别度较高的字体,提高用户阅读体验。
(4)中英文混排
英文的大牌能起到丰富文案层次的作用,一般可提取人名、主标题、关键词等转化成英文进行辅助排版,在主标题很短时加入英文还能达到平衡画面的效果。

(5)不同大小、颜色字体的混排
这类混排能丰富画面层次,使画面更灵动有层次感。

(6)字距与行距的排版
太平均的间距容易显得画面四班,太近显得拘谨,太远又容易显得分散,但太过不平均也容易显得凌乱,所以要主题调整把握尺度。
(7)字体的特殊处理
如加粗、倾斜、斜切、3D等,这能强调重要信息,增强氛围,提升空间感。

(8)将文案单独放置在一个区域
这能达到对文案的聚焦作用,突出文案内容。

(9)实用个性化字体效果
如毛笔字、粉笔字体、自创字体、结合内容主题的字体效果处理等,更具个性化,更能直接贴近文案主题。







(三)点缀物设计
点缀物并不是一定要有,但许多banner都会用到点缀物,用对了点缀物可能取得画龙点睛的效果。
1.添加阴影
增强立体感、空间感,更有身临其境的感觉,拉近商品和用户的距离。

2.添加插图
生动有趣,提高画面丰富度。


3.点元素
这类方法的运用比较常见,点元素的加入可以丰富画面,制造氛围。


4.线元素
线元素的加入能起到分割、强调的作用,形式感强。有时在适当位置加入先后元素还能填补画面空白,起到平衡画面的作用。


5.面元素
面元素的加入能对主体或内容起到着重突出的作用,丰富画面,或使画面达到一定的平衡。


(四)配色
配色要考虑如色彩心理学、色彩搭配等相关的知识信息,如红色代表热情,具有促进用户购买欲望的作用,蓝色让人觉得安静平静或有神秘感等,如冷色调、暖色调的运用,对比色、互补色、相近色的运用等。
1.背景色从配图中主要商品或者主要人物的衣物等元素上提取相同色、相近色,或进行变深变淡处理,或进行饱和度和明度调整处理。

2.运用互补色

3.运用渐变色

4.冷暖色

5.色彩叠加
单色化处理,个性鲜明,对比度强,能较好突出主题。


6.黑白灰处理
对主体进行黑白画处理,然后与其他色彩进行搭配,可起到调节、过渡的作用。对比鲜明,比较有视觉冲击力。



7.多色彩搭配
使画面感觉丰富、活泼生动,感染力强,比较有时尚感。

(文中图片选自花瓣网)
参考网页:
https://www.chinaz.com/web/2018/0211/857631.shtml
https://sc.chinaz.com/info/170117108400.htm?qq-pf-to=pcqq.c2c






































