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

 

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

 

适用前提：

 

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

 

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

 

所以，我们既然是非专业设计师，就要回归到做Banner的根源，为了到达以上效果，同时统筹美观、大方、美观。

 

大方和美观的banner一定需求深邃的视觉技巧，和繁琐的PS功用，但是要统筹视觉的几个准绳，我稍后会列出。

 

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

 

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

 

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

 

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

 

以上就是我们要传达的中心信息了。你也能够以为这就是一个Banner，只是——看起来没那么美观而已。

 

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

 

我们的内容大约是什么，从而让用户构成等待既然是系列，我们希望用户可以晓得这是第几期，从而当他们想要从某一期有兴味时点击到全部，也有中央去。

 

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

 

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

 

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

 

第三步：思索规范辨认颜色

 

既然我们要传达品牌形象，请确保用色从我们的规范VI色盘当选择，而不要随意用。

 

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

 

第四步：思索用户视觉途径

 

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

 

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

 

不过这个规则能够用醒目的图片、扎眼的颜色随便突破，但是我倡议你不要随便这么做，一切的图片和颜色都要有意义，为什么要用这个图片为什么要用这个颜色。

 

确保用户一开端有视觉中心，假如用户一眼不晓得先看什么，那么这个Banner就是失败的。

 

有了视觉焦点后，你能够从视觉焦点引申开来，运用视觉里的密切性准绳（把内容相近的天文位置靠近一些、比照准绳等等），引导用户从视觉焦点进而关注到其他细节、或者促使行动的东西。

 

第五步：做视觉的排版

 

（不要思索太多设计技艺，否则就堕入到：我不是专业的，所以我不会做设计上）

 

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

 

让Banner美观的几个要诀：

 

1.对齐

 

很好办吧，让内容纵向、横向都有一条线，能够对齐。要么居中，要么底部。尽量确保页面上不要有一个元素，没有任何元素和它可以构成对齐的关系。

 

2.密切

 

不要让一切内容都没有汇集地堆在一同，让那些关系比拟密切的内容聚合成一个区域，不要让一个Banner上的区域超越4个。

 

3.简单质感：

 

千万不要加任何PS的滤镜、阴影、能不突变就不突变，由于曾经不盛行了，不要自觉运用各种款式。

 

4.假如要用图标，尽量选择款式统一，且可以坚持你的优先级次序的图表。比方我们引导用户先看左边，再看右边，结果你在右边的图标里选择了一个血红的，可能用户的视野立马被吸收过来了。

 

5.不要让字体超越3种。尽量用宋体、黑体、方正黑体，不要用什么魏碑体、行楷等，一看就比拟山寨。

 

第六步：做更多的美化

 

假如你不想做，其实上面也能够了。

 

想做的话，我们能够：

 

比方花点时间去做一个盛行的扁平化背景装饰——还是要强调一点，不要为了装饰而装饰，一切的装饰都要有意义、让背景愈加有质感。比方加点磨砂觉得。比方，你还能够恰当变换下别的排版，比方：居中的排版，更容易引导用户从上到下的阅读视角，也是很多人偷懒比拟喜欢的排版作风。

 

综上所述，做Banner有一大半的精神是梳理信息、设定优先级、设定用户阅读次序，和PS的技艺没有太多关系，所以，每个人都能够去尝试做好一张看似很有设计感，但是实践上又没花什么精神的Banner。