世界看脸,网站看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就是失败的。
有了视觉焦点后,你可以从视觉焦点引申开来,使用视觉里的亲密性原则(把内容相近的地理位置靠近一些、对比原则等等),引导用户从视觉点进而关注到其他细节、或者促使行动的东西。