淘宝banner设计经验分享 / 开普饭

网站或移动端的banner是这样。

banner也可能是这个样子。

上面的图广义上可以归纳为Banner，banner不局限于固定广告位的长条形广告，可以是长的、方的、必要时也是其他形状，侧边栏广告、焦点图、专题页的头图、都可以理解为banner，在设计方法上，都有共通性。可以大概分为两类：

1、促使点击

2、渲染气氛

促使点击是网站都能看到的广告banner或者焦点图，有大有小，可长可短，作用是通过各种方式引导点击。

渲染气氛可以在各种游戏网站，房地产网站，各种活动专题页中见到，也就是常说的头图，这种类型banner不是引导用户触发点击，是服务于内容，为整个页面做好气氛渲染。

几个banner设计小窍门，通过这些方法可以最短的时间完成banner设计。

字体和字形

图形解读信息能力大于单纯文字阅读，banner设计中，多数通过文字解信息，图片只是起到衬托作用，字形的处理能占到50%甚至更多时间。

1、钢笔造字

钢笔造字是讨巧的方法，十分有效。只要了解基本字形设计规律（笔画粗细，字体重心），可以快速让banner高大上起来。

2、笔画链接

没有时间完整设计banner字形时，笔画链接是好方法，做笔画链接时，合理安排需要链接笔画，做到不突兀，不影响易读性，都会出来一个比较好的视觉效果，推荐使用些笔画粗细比较统一的非衬线字体，如：雅黑、悦黑、幼圆。

3、随意变形

顾名思义就是根据文字的具体含义设计字形，只需要脑洞大开，了解文字的具体含义，用相应的图形在文字上加以体现就可以。

4、3D

如果想在banner中想突出文字，把文字做成3D效果是最“粗暴”方法，处理得当可以达到很好效果。3D文字配色是关键，不注意就会显得山寨和俗气。

简单字体使用

不破不立

同样简单的字体，打破了整段文字，做单个字体倾斜，整体看起来活泼很多，或者做单个字体叠加，凹凸效果同样可以让简单字体变得跳跃起来。

空间独立

设计banner时想突出文字，让文字和背景拉开空间，为文字做一个简单纯色底色是省事办法。

斜能压正

倾斜的文字排版不仅可以打破默认字体的沉默，还可以帮助整个画面构图。

长短粗细变换自如

根据段落中的关键字做相应加粗或者高亮，看似简单，实际操作过程中，稍有不当会导致整段字体看起来凌乱不堪，设计时把文字看作图形，注意整个字体排版走向，看是否有规律可循就容易很多。

近十天历史发布链接

淘宝banner设计经验分享