如何快速设计一款好Banner?6个步骤帮你速成! - 优设-UISDC

如何快速设计一款好Banner?6个步骤帮你速成!

2014/08/16 44649

如何快速设计一款好Banner?6个步骤帮你速成!

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

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

适用前提:

  1. 非专业视觉设计师
  2. 没太多空闲时间去做。

为什么要做banner?

  1. banner是用来传达信息的。一切不以传达有效信息、有效传达信息的banner都是yy.
  2. baner是用来促使用户行动的,也即Call To Action。无法让用户产生你所期望的banner都是无效的。

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

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

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

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

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

比如,半月谈,我们要传达的信息有:

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

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

但是,我们发现信息还不够,我们还想要传达:

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

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

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

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

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

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

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

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

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

有了视觉焦点后,你可以从视觉焦点引申开来,使用视觉里的亲密性原则(把内容相近的地理位置靠近一些、对比原则等等),引导用户从视觉焦点进而关注到其他细节、或者促使行动的东西。

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

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

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

第五步:做视觉的排版

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

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

让banner好看的几个要诀:

1. 对齐

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

2. 亲密

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

3. 简单质感:

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

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

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

第六步:做更多的美化

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

想做的话,我们可以:

  1. 比如花点时间去做一个流行的扁平化背景装饰——还是要强调一点,不要为了装饰而装饰,所有的装饰都要有意义~
  2. 让背景更加有质感。比如加点磨砂感觉。
  3. 比如,你还可以适当变换下别的排版,比如:居中的排版,更容易引导用户从上到下的阅读视角,也是很多人偷懒比较喜欢的排版风格。

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

Banner设计武功秘笈:

打好基础功,先看几点要素:
《BANNER设计“点横竖撇捺”》

跟对名师,省力省时!
《高手教你做Banner!如何把banner做得传情达意》

武林为之变色!Banner大杀器!
《经典干货!让大神传授你BANNER设计中的“辟邪剑谱”》

5

原文地址:zhihu
作者:@Heidixie

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量75万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/design-great-banner-quickly

sketch UI 界面设计 转场动效 平面设计 交互设计师 设计师 扁平化设计 设计师专访 排版布局 职场 视觉设计 用户体验设计 设计流程 素材下载 配色 web前端开发 海报设计 AI教程 设计理论 产品设计 设计规范 字体下载 神器下载 设计趋势 动效设计 psd下载 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里