@Heidixie(阿里巴巴资厚交互设计师) :团队小伙伴问到这个问题,发了一封邮件分享自己的思路,顺便贴过来。
适用条件:
为什么要做banner?

以是,先摆脱一个缺点的认识:banner仅仅是用来装饰用的,仅仅是为了吸引人把稳啥的想法。
以是,我们既然是非专业设计师,就要回归到做banner的本源,为了达到以上效果,同时兼顾都雅、大方、好看。
大方和好看的banner未必需要博识的视觉技巧,和繁琐的PS功能,但是要兼顾视觉的几个原则,我稍后会列出。
第一步:定义要传达什么信息
这一步,和视觉、审美什么的都没紧要。
比如,半月谈,我们要传达的信息有:
品牌LOGO,让用户一眼就知道哪里出品,下次形成条件反射,所谓的视觉认知是须要一定的重复的,只有不断重复才能加深用户印象。子品牌LOGO,让用户知道我们出了什么东西,并且有系列感。以上便是我们要传达的核心信息了。你也可以认为这便是一个BANNER,只是——看起来没那么好看而已。
但是,我们创造信息还不足,我们还想要传达:
我们的内容大概是什么,从而让用户形成期待既然是系列,我们希望用户能够知道这是第几期,从而当他们想要从某一期有兴趣时点击到全部,也有地方去。以是,我们把信息又放出来。现在我们有4类信息。
第二步:定义信息的优先级
虽然我们有4类信息,但是优先级肯定不一样的,以是对应到设计上,我们给它放的版块的大小、颜色的突出是不一样的。
第三步:考虑用户视觉路径
也即你想勾引用户先看哪里,再看哪里,然后再做什么。
常日,用户的阅读从上到下,从左到右边,以是一样平常主要的内容会放到左上角。
不过这个规则可以用能干的图片、刺眼的颜色轻易冲破,但是我建议你不要轻易这么做,所有的图片和颜色都要故意义,为什么要用这个图片为什么要用这个颜色。
确保用户一开始有视觉中央,如果用户一眼不知道先看什么,那么这个banner便是失落败的。
有了视觉焦点后,你可以从视觉焦点引申开来,利用视觉里的亲密性原则(把内容附近的地理位置靠近一些、比拟原则等等),勾引用户从视觉焦点进而关注到其他细节、或者匆匆使行动的东西。
第四步:考虑标准识别颜色
既然我们要传达品牌形象,请确保用色从我们的标准VI色盘中选择,而不要随便用。
记住,品牌传达,重复性很主要。就像我们看到红、黄、白配色会想到麦当劳,看到绿和黑就想到星巴克一样。
第五步:做视觉的排版
(不要考虑太多设计技能,否则就陷入到:我不是专业的,以是我不会做设计上)
排版上,信息已经完全,优先级已经出来,无非便是把它变得好看一些而已。
让banner好看的几个要诀:
1. 对齐
很好办吧,让内容纵向、横向都有一条线,可以对齐。要么居中,要么底部。只管即便确保页面上不要有一个元素,没有任何元素和它能够形成对齐的关系。
2. 亲密
不要让所有内容都没有聚拢地堆在一起,让那些关系比较亲密的内容聚合成一个区域,不要让一个banner上的区域超过4个。
3. 大略质感:
千万不要加任何PS的滤镜、阴影、能不渐变就不渐变,由于已经不盛行了,不要盲目利用各种样式。
4.如果要用图标,只管即便选择样式统一,且能够保持你的优先级次序的图表。比如我们勾引用户先看左边,再看右边,结果你在右边的图标里选择了一个血红的,可能用户的视线立马被吸引过来了。
5.不要让字体超过3种。只管即便用宋体、黑体、方正黑体,不要用什么魏碑体、行楷等,一看就比较山寨。
第六步:做更多的美化
如果你不想做,实在上面也可以了。
想做的话,我们可以:
比如花点韶光去做一个盛行的扁平化背景装饰——还是要强调一点,不要为了装饰而装饰,所有的装饰都要故意义~让背景更加有质感。比如加点磨砂觉得。比如,你还可以适当变换下别的排版,比如:居中的排版,更随意马虎勾引用户从上到下的阅读视角,也是很多人偷