世界看脸，网站看Banner，门面当然要漂亮 ， 不过很多同学以为做Banner是门技术活儿，自己学艺不精做不了 。如果你看了今天这篇文，就会明白，技术于Banner ， 就像刀法于人，虽有招式，但无内功支撑，久战必败 。而这篇好文，就是Banner的内功修炼心法 ， 按6个步骤来 ， 速成可待 。
适用前提：
非专业视觉设计师没太多空闲时间去做 。为什么要做banner？banner是用来传达信息的 。一切不以传达有效信息、有效传达信息的banner都是yy.baner是用来促使用户行动的，也即CallToAction 。无法让用户产生你所期望的banner都是无效的 。
所以 ， 先摆脱一个错误的认识：banner仅仅是用来装饰用的，仅仅是为了吸引人注意啥的想法 。
所以，我们既然是非专业设计师，就要回归到做banner的本源，为了达到以上效果，同时兼顾美观、大方、好看 。
大方和好看的banner未必需要高深的视觉技巧，和繁琐的PS功能，但是要兼顾视觉的几个原则，我稍后会列出 。
第一步：定义要传达什么信息
这一步，和视觉、审美什么的都没关系 。
比如，半月谈，我们要传达的信息有：
品牌LOGO，让用户一眼就知道哪里出品，下次形成条件反射 ， 所谓的视觉认知是需要一定的重复的，只有不断重复才能加深用户印象 。子品牌LOGO，让用户知道我们出了什么东西，并且有系列感 。
以上就是我们要传达的核心信息了 。你也可以认为这就是一个BANNER，只是——看起来没那么好看而已 。
但是，我们发现信息还不够 ， 我们还想要传达：
我们的内容大概是什么 ， 从而让用户形成期待既然是系列，我们希望用户能够知道这是第几期，从而当他们想要从某一期有兴趣时点击到全部，也有地方去 。
所以，我们把信息又放出来 。现在我们有4类信息 。
第二步：定义信息的优先级
虽然我们有4类信息，但是优先级肯定不一样的，所以对应到设计上，我们给它放的版块的大小、颜色的突出是不一样的 。
第三步：考虑用户视觉路径
也即你想引导用户先看哪里，再看哪里，然后再做什么 。
通常，用户的阅读从上到下 ， 从左到右边 ， 所以一般重要的内容会放到左上角 。
不过这个规则可以用醒目的图片、刺眼的颜色轻易打破 ， 但是我建议你不要轻易这么做，所有的图片和颜色都要有意义，为什么要用这个图片为什么要用这个颜色 。
确保用户一开始有视觉中心，如果用户一眼不知道先看什么 ， 那么这个banner就是失败的 。
有了视觉焦点后 ， 你可以从视觉焦点引申开来，使用视觉里的亲密性原则（把内容相近的地理位置靠近一些、对比原则等等） ， 引导用户从视觉焦点进而关注到其他细节、或者促使行动的东西 。
第四步：考虑标准识别颜色
既然我们要传达品牌形象，请确保用色从我们的标准VI色盘中选择，而不要随便用 。
我是配色弱怎么办？有这3个板斧打遍天下，记?。?品牌传达 ， 重复性很重要 。就像我们看到红、黄、白配色会想到麦当劳，看到绿和黑就想到星巴克一样 。
第五步：做视觉的排版
?。ú灰悸翘嗌杓萍寄埽裨蚓拖萑氲剑何也皇亲ㄒ档模晕也换嶙錾杓粕希?
排版上，信息已经完整，优先级已经出来，无非就是把它变得好看一些而已 。
让banner好看的几个要诀：
1.对齐
很好办吧，让内容纵向、横向都有一条线，可以对齐 。要么居中，要么底部 。尽量确保页面上不要有一个元素 ， 没有任何元素和它能够形成对齐的关系 。
2.亲密
不要让所有内容都没有聚集地堆在一起 ， 让那些关系比较亲密的内容聚合成一个区域 ， 不要让一个banner上的区域超过4个 。
3.简单质感：
千万不要加任何PS的滤镜、阴影、能不渐变就不渐变，因为已经不流行了，不要盲目使用各种样式 。
4.如果要用图标 ， 尽量选择样式统一，且能够保持你的优先级次序的图表 。比如我们引导用户先看左边，再看右边，结果你在右边的图标里选择了一个血红的，可能用户的视线立马被吸引过来了 。
5.不要让字体超过3种 。尽量用宋体、黑体、方正黑体，不要用什么魏碑体、行楷等，一看就比较山寨 。
第六步：做更多的美化
如果你不想做，其实上面也可以了 。
想做的话，我们可以：
比如花点时间去做一个流行的扁平化背景装饰——还是要强调一点，不要为了装饰而装饰，所有的装饰都要有意义、让背景更加有质感 。比如加点磨砂感觉 。比如 ， 你还可以适当变换下别的排版，比如：居中的排版，更容易引导用户从上到下的阅读视角，也是很多人偷懒比较喜欢的排版风格 。
综上所述，做banner有一大半的精力是梳理信息、设定优先级、设定用户浏览次序，和PS的技能没有太多关系 ， 所以，每个人都可以去尝试做好一张看似很有设计感，但是实际上又没花什么精力的banner 。
【6个步骤帮你速成设计好Banner】
