佛山市希立科技有限公司

FOSHAN CITY HEALY TECHNOLOGY CO. LTD.

营销型网站建设、微信公众平台

一站式顾问服务商

  • 服务热线:
    400-998-3556

您当前的位置: 希立首页 > 新闻资讯 > 微信营销

NEWS INFORMATION

新闻资讯

希立动态 微信营销 网络推广 建站问题 常见问题

阿里巴巴资深交互设计师简述的banner设计思路[必看] - 佛山网站建设

更新时间  2015-06-09 09:27:59 希立科技 阅读


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

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

适用前提:
非专业视觉设计师 没太多空闲时间去做。

为什么要做banner?

banner是用来传达信息的。

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

所以,先摆脱一个错误的认识:banner仅仅是用来装饰用的,仅仅是为了吸引人注意啥的想法。
所以,我们既然是非专业设计师,就要回归到做banner的本源,为了达到以?#38386;?#26524;,同时兼顾美观、大方、好看。
大方和好看的banner未必需要高深的视觉技巧,和繁琐的PS功能,但是要兼顾视觉的几个原则,我稍后会列出。

第一步:定义要传达什么信息
这一步,和视觉、审美什么的都没关系。

比如,半月谈,我们要传达的信息有:
    品牌LOGO,让用户一眼就知道哪里出品,下次形成条件反射,所谓的视觉认知是需要一定的重复的,只有不断重复才能加深用户印象。子品牌LOGO,让用户知道我们出了什么东西,并且有系列?#23567;?br /> 以上就是我们要传达的核心信息了。你也可以认为这就是一个BANNER,只是——看起来没那么好看而已。

但是,我们发现信息还不够,我们还想要传达:
我们的内容大概是什么,从而让用户形成期待 既然是系列,我们希望用户能够知道这是第几期,从而当他们想要从某一期有兴趣时点击到全部,也有地方去。
所以,我?#21069;?#20449;息又放出来。现在我们有4类信息。

第二步:定义信息的优先级
虽然我们有4类信息,但是优先级肯定不一样的,所以对应到设计?#24076;?#25105;们给它放的版块的大小、颜色的突出是不一样的。

第三步:考虑用户视觉路径
也即你想引导用户先看哪里,再看哪里,然后再做什么。
通常,用户的阅读从上到下,从左到右边,所以一般重要的内容会放到左上角。
不过这个规则可以用醒目的?#35745;?#21050;眼的颜色轻易打破,但是我建议你不要轻易这么做,所有的?#35745;脱?#33394;都要有意义,为什么要用这个?#35745;?#20026;什么要用这个颜色。

?#32321;?#29992;户一开始有视觉中心,如果用户一眼不知道先看什么,那么这个banner就是失败的。
有了视觉焦点后,你可以?#37038;?#35273;焦点引申开来,使用视觉里的亲密性原则(把内容相近的地理位置靠近一些、对比原则等等),引导用户?#37038;?#35273;焦点进而关注到其他细节、或者促使行动的东西。

第四步:考虑标准识别颜色
既然我们要传达品牌形象,请?#32321;?#29992;色从我们的标准VI色盘?#37266;?#25321;,而不要随便用。
我是配色弱怎么办?有这3个板斧打遍天下,?#20146;。?#21697;牌传达,重复性很重要。就像我们看到红、黄、白配色会想到麦当劳,看到绿和黑就想到星巴克一样。

第五步:做视觉的排版
(不要考虑太多设计技能,否则就陷入到:我不是专业的,所以我不会做设计?#24076;?br /> 排版?#24076;?#20449;息已经完整,优先级已经出来,无非就是把它变得好看一些而已。


让banner好看的几个要诀:
1. 对齐
很好办吧,让内容纵向、横向都有一条线,可以对齐。要么?#21448;校?#35201;么底部。尽量?#32321;?#39029;面上不要有一个元素,没有任何元素和它能够形成对齐的关系。
2. 亲密
不要让所有内容都没有聚集地堆在一起,让?#20999;?#20851;?#24403;?#36739;亲密的内容聚合成一个区域,不要让一个banner上的区域超过4个。
3. 简单质感:
千万不要加任何PS的?#21496;怠?#38452;影、能不渐变就不渐变,因为已经不流行了,不要盲目使用各种样式。
4. 如果要用图标,尽量选择样式统一,且能够保持你的优先级次序的图表。比如我们引导用户先看左边,再看右边,结果你在右边的图标里选择了一个血红的,可能用户的视线立马被吸引过来了。
5. 不要让字体超过3种。尽量用宋体、黑体、方正黑体,不要用什么魏碑体、行楷等,一看就比较山寨。

第六步:做更多的美化
如果你不想做,其实上面也可以了。

想做的话,我们可以:
比如花点时间去做一个流行的扁?#20132;?#32972;?#30333;?#39280;——还是要强调一点,不要为了装饰而装饰,所有的装饰都要有意义、让背?#26696;?#21152;有质?#23567;?#27604;如加点磨?#26696;?#35273;。 比如,你还可以适当变换下别的排版,比如:?#21448;?#30340;排版,更容易引导用户从上到下的阅读视角,也是很多人?#36947;?#27604;较?#19981;?#30340;排版风格。

综上所述,做banner有一大半的精力是梳理信息、设定优先级、设定用户浏?#26469;?#24207;,和PS的技能没有太多关系,所以,每个人都可以去尝试做好一张看似很有设计感,但是?#23548;?#19978;?#32622;?#33457;什么精力的banner。

 

Copyright ? 2017希立科技(HEALY.CN)All Rights Reserved 版权所有 ICP/许可证编号:粤ICP备10226596号  公安备案图标粤公网安备 44060402001191号

在线客服
官方微信
客服电话
沃尔夫斯堡官网
云南时时下载 3码2期计划 体云南时时开奖号码百度一下你就知道 辽宁35选7开奖公告 票老时时 百胜彩票8887787 江西快三开奖结果 下载新疆11选5走势图 北京赛pk10官方网站 陕西快乐十分出号走势图 2005年的3d带线走势图 福建时时几点开始 体彩走势图综合版 北京赛pk10统计 云南快乐十分最大遗漏查询 时时彩看计划稳赢