世界看脸，网站看Banner，门面当然要漂亮，不过很多同学以为做Banner是门技术活儿，自己学艺不精做不了。如果你看了今天这篇文，就会明白，技术于Banner，就像刀法于人，虽有招式，但无内功支撑，久战必败。而这篇好文，就是Banner的内功修炼心法，按6个步骤来，速成可待。

    @Heidixie（阿里巴巴资深交互设计师） ：团队小伙伴问到这个问题，发了一封邮件分享自己的思路，顺便贴过来。

    适用前提：

    非专业视觉设计师 没太多空闲时间去做。 为什么要做banner？banner是用来传达信息的。一切不以传达有效信息、有效传达信息的banner都是yy. baner是用来促使用户行动的，也即Call To Action。无法让用户产生你所期望的banner都是无效的。

    所以，先摆脱一个错误的认识：banner仅仅是用来装饰用的，仅仅是为了吸引人注意啥的想法。

    所以，我们既然是非专业设计师，就要回归到做banner的本源，为了达到以上效果，同时兼顾美观、大方、好看。

    大方和好看的banner未必需要高深的视觉技巧，和繁琐的PS功能，但是要兼顾视觉的几个原则，我稍后会列出。

    第一步：定义要传达什么信息

    这一步，和视觉、审美什么的都没关系。

    比如，半月谈，我们要传达的信息有：

    品牌LOGO，让用户一眼就知道哪里出品，下次形成条件反射，所谓的视觉认知是需要一定的重复的，只有不断重复才能加深用户印象。 子品牌LOGO，让用户知道我们出了什么东西，并且有系列感。

    以上就是我们要传达的核心信息了。你也可以认为这就是一个BANNER，只是——看起来没那么好看而已。

    但是，我们发现信息还不够，我们还想要传达：

    我们的内容大概是什么，从而让用户形成期待 既然是系列，我们希望用户能够知道这是第几期，从而当他们想要从某一期有兴趣时点击到全部，也有地方去。

    所以，我们把信息又放出来。现在我们有4类信息。

    第二步：定义信息的优先级

    虽然我们有4类信息，但是优先级肯定不一样的，所以对应到设计上，我们给它放的版块的大小、颜色的突出是不一样的。

    第三步：考虑用户视觉路径

    也即你想引导用户先看哪里，再看哪里，然后再做什么。

    通常，用户的阅读从上到下，从左到右边，所以一般重要的内容会放到左上角。

    不过这个规则可以用醒目的图片、刺眼的颜色轻易打破，但是我建议你不要轻易这么做，所有的图片和颜色都要有意义，为什么要用这个图片为什么要用这个颜色。

确保用户一开始有视觉中心，如果用户一眼不知道先看什么，那么这个banner就是失败的。

    有了视觉焦点后，你可以从视觉焦点引申开来，使用视觉里的亲密性原则，引导用户从视觉焦点进而关注到其他细节、或者促使行动的东西。

    第四步：考虑标准识别颜色

    既然我们要传达品牌形象，请确保用色从我们的标准VI色盘中选择，而不要随便用。

    我是配色弱怎么办？有这3个板斧打遍天下，记住，品牌传达，重复性很重要。就像我们看到红、黄、白配色会想到麦当劳，看到绿和黑就想到星巴克一样。

    第五步：做视觉的排版

    排版上，信息已经完整，优先级已经出来，无非就是把它变得好看一些而已。