如何快速设计一款好BANNER?

 

  世界看脸,网站看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个板斧打遍天下:《秒变配色高手!怎么都不会错的6条网页设计配色原则》

  记住,品牌传达,重复性很重要。就像我们看到红、黄、白配色会想到麦当劳,看到绿和黑就想到星巴克一样。

  第五步:做视觉的排版

  (不要考虑太多设计技能,否则就陷入到:我不是专业的,所以我不会做设计上)

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

  让banner好看的几个要诀:

  1. 对齐

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

  2. 亲密

  不要让所有内容都没有聚集地堆在一起,让那些关系比较亲密的内容聚合成一个区域,不要让一个banner上的区域超过4个。

  3. 简单质感:

  千万不要加任何PS的滤镜、阴影、能不渐变就不渐变,因为已经不流行了,不要盲目使用各种样式。

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

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

  第六步:做更多的美化

  如果你不想做,其实上面也可以了。

  想做的话,我们可以:

  比如花点时间去做一个流行的扁平化背景装饰——还是要强调一点,不要为了装饰而装饰,所有的装饰都要有意义~

  让背景更加有质感。比如加点磨砂感觉。

  比如,你还可以适当变换下别的排版,比如:居中的排版,更容易引导用户从上到下的阅读视角,也是很多人偷懒比较喜欢的排版风格。

  综上所述,做banner有一大半的精力是梳理信息、设定优先级、设定用户浏览次序,和PS的技能没有太多关系,所以,每个人都可以去尝试做好一张看似很有设计感,但是实际上又没花什么精力的banner。

时间: 2016-08-18

如何快速设计一款好BANNER?的相关文章

10款经典快速设计网页的自动生成工具

随着许多优秀的网页http://www.aliyun.com/zixun/aggregation/6993.html">设计工具和大量资源的出现,今天网页设计比起十年前要简便得多.本文收集了28款可以帮助你快速设计网页的自动生成工具,包括了logo,banner生成器,域名推荐. 1. Lorem Ipsum Generator 文本排版生成器 2. Stripe Generator 条纹背景 3. Mycoolbutton 按钮生成器

快速设计专题:营销类节日专题设计案例分析

文章描述:快速制作专题!利用颜色查找快速制造大感觉. 当接到一个紧急需求的时候,设计师脑子里一定在抱怨不爽了.因为设计要用"赶出来"的话,是很难有优秀的作品的.但有时候不得不面对现实,需求方急着要,我们也只能加快速度设计.把脑子里有的设计形式全都翻出来,全用在页面上. 有时候可能会有意想不到的结果!有时候又会出现那种连自己都不愿意承认是自己做的尴尬处境. 这种快速设计没有经过前期的精细推敲,总有站不住脚的地方,但是时间有限,能达到一眼望去,让各位爷能心里感叹一声"哇"

Illustrator快速设计酷炫的时尚美女海报制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下快速设计酷炫的时尚美女海报的制作教程. 教程分享:                   好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的快速设计酷炫的时尚美女海报的制作教程解析分享的全部内容了,各位看到这里的使用者们小编相信大家现在是非常的清楚了绘制方法了吧,那么各位就快去按照小编的教程自己去尝试着绘制一下吧.

Illustrator快速设计出商业名片制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下快速设计出商业名片的制作教程. 教程分享:   图 1 在本文中我们将介绍在 ILLUSTRATOR CS 中,如何利用简单的工具快速制作出这些漂亮的商业名片 当你使用多功能画笔及蒙板你就可以创造出很酷的名片.在本文中我们向你展示如何通过调整画笔的尺寸及距离,再通过蒙板剪切来设计名片,同时,你也可以了解设计名片时全出血位的设置. 一.所有这些名片都是由 ILLUSTRATOR 里的商业名片( BUSINESS CARD 2 BLANK

photoshop快速设计描边小图标制作教程

给各位photoshop软件的使用者们来详细的解析分享一下快速设计描边小图标的制作教程. 教程分享: 描边图标是追波上MBE大神开始设计的图标风格,然后就掀起了一股时尚风潮 下面是一些截图:   <点图片看大图>www.16xx8.com 在绘制之前,我们先分析并总结一下上面图标的特点: 1.图形外观围绕着深色描线,也可以叫描边,描线与图形偶尔错位开. 2.描边有断线 3.图形线条简单,比较圆润,基本上都是圆角,图形容易绘制,也很可爱,十分的萌萌哒. 4.色泽比较鲜艳大胆,几乎都是明亮色,明黄

photoshop快速设计一个IOS应用图标制作教程

给各位photoshop软件的使用者们来详细的解析分享一下快速设计一个IOS应用图标的制作教程. 教程分享: 开始前,请先准备一个iOS 应用图标模板,可以从iOS Icon Template或者App IconTemplate下载(我用的就是后者的素材). 我的电脑屏幕上只显示了 1024px 的大图标,我觉得用这个模板做参考就可以了. 你可以将应用图标模板进行裁剪,只保留 1024px 的图标,或者处理模板上的其余元素.   下面我们正式开始. 步骤 1:创建 iOS应用图标的基本形状 首先

Photoshop快速设计Wifi无线图标教程

给各位Photoshop软件的使用者们来分享一下快速设计Wifi无线图标教程. 教程分享: 1.新建一个500*500的画布,填充背景颜色#2b2b2b.     2.然后选择     形状工具快捷键:U.右键单击选择椭圆工具     . 之后单击操作区域弹出     ,点击确定. 变成     .名称默认为椭圆1.     3.选中图层1,按住Alt(Alt是减去操作,Shift是合并形状操作),在操作区域单击一次. 出现     (这时候就不用按住Alt了)然后点击确定.生成一个     .

Illustrator快速设计眼球制作教程分享

给各位Illustrator软件的使用者们来详细的解析分享一下快速设计眼球的制作教程. 教程分享: 首先建立4个大小不一的圆,颜色根据个人喜好来定吧,(呵呵,看你喜欢什么颜色的眼球了)   2.将中间两个圆用效果里象素化的点状化,数值设置为10(也可以自己试试别的数值)   再用径向模糊,数值设置100,选择缩放   得到这样的效果,并把最后的小圆高斯模糊,数值在12左右     最后加上高光,眼球完成   这就是完成的效果   好了,以上的信息就是小编给各位Illustrator的这一款软件的

Illustrator快速设计超简约海报制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下快速设计超简约海报的制作教程. 教程分享:               好了,以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的快速设计超简约海报的制作教程解析分享的全部内容了,各位看到这里的使用者们,小编相信大家现在是很去了解了制作方法了吧,就是如此的简单,各位现在就快去自己尝试下吧.