400-0731-172

网站首页 关于我们 成功案例 服务范围 移动终端 解决方案 新闻资讯 联系我们

怎么快速设计好Banner?

发布时间:2014-08-21

  国际看脸,网站看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。

友情链接: