1. 首页
  2. 网页设计
  3. 正文

网页设计师:原来Banner设计还有这么多套路!

  Banner 广告是快速高效的吸引用户的重要手段。通常在网站中都占据着不错的位置,它们的转化率和它本身的设计优秀与否息息相关,最重要的是,它要能迅速的吸引用户的注意力,通过优秀的文案和视觉让用户立刻马上点击。

  那么,作为网页设计师我们应该如何制作一张能快速抓住人眼球的banner呢?

  一、分 析


  1、结构


  banner的结构大致分为三层:背景层、装饰层、文案层。背景层会确立整体banner的风格或配色;装饰层起到点缀作用,并可以控制整体版式的平衡;文案层是核心内容的展示,以展示主要文字为主。三层级互相组合搭配,从而支撑起整个banner。

  2、版式banner的常见版式:


       ①左右排版、

       ②居中排版。

  受到文案字数限制、所选搭配元素、产品的属性等原因,版式的选择需要根据实际情况进行判断。

  3、样式


    常见的banner构图样式组合有:平铺样式、环绕样式、倾斜样式、斜切样式、放射样式、isometric样式、三角样式等。

  4、关联


       背景层、装饰层、文案层,三者之间有着密切的关系。

  比如:背景层设计的过于复杂,那么内容文字的处理就要倾向于简洁,反之亦然;而装饰层也并不是必须要存在于每一个banner当中。当背景层中内容已经很丰富的时候,装饰的内容可以删去。

  banner中背景是图片,而且细节丰富,那么文案就可以做简洁化处理。

  当背景为纯色时,需要适当的添加点缀物。而且可以对文字进行处理增加吸引力,避免整体的单调。

  5、背景


  背景的种类大致分为适量图形、字体、颜色和图片四种。

  图片包括写实图片和卡通图片等;颜色分为纯色或渐变;字体放大也可以当做背景;矢量图包含的组合有很多。简单的圆形、方形。甚至是点、线的组合都可以运用在背景中。每当节日临近,也可以匹配一些节日风格的适量图形进行设计。

  6、装饰


      装饰的点缀应该是锦上添花的。适当的点缀和修饰,可以让页面避免单调;也可以使banner的元素之间达到平衡,视觉效果更加和谐。同时,文字的运用也是装饰点缀的关键。根据产品属性的不同,举例说明:金融类的banner可以使用较小或较细的字体进行搭配。同时,使用点状分布排列营造高端感;电商类的banner可以使用渐变的圆形或线条进行修饰。目的是搭建出欢快的、促销的感觉,吸引用户点击。

  7、文案


      ① banner的设计当中,文案字数的多少也至关重要。过多字数或复杂的内容非但不能让用户清楚文案要表达的事情,反而会让用户感到麻烦。因此,当我们接收到的文案字数过多的话,要第一时间果断提出自己的想法。文案中的卖点和痛点是最重要的两个部分,其他内容都可以省略。

  ② 字体方面主要分为衬线字体和非衬线字体。衬线字体的笔画有修饰,且粗细不同,参考宋体;而非衬线字体就比较横平竖直,笔画粗细相同。衬线字体大多用在古典风格或民族风格的banner设计当中。非衬线字体适用的范围就比较广,可以说绝大多数的banner中都可以运用。


  ③ 文案分为主标题和副标题。主标题自然是最精简也是最抢眼的部分,而副标题可以是主标题的解释说明,也可以是接主标题的新文案。区别搭配有助于用户第一时间分辨出文案的主次,让页面更加协调。

  8、配色

       好的配色需要一定的配色基础以及日常练习的积累。但是当遇到特殊状况时,显然并不会在颜色上留给我们有太多的时间。所以,我们就需要一些辅助的方式来完成颜色的搭配工作。


  这里我推荐两个网站:

  

  第一个网站会推荐许多不错的颜色搭配,其中有不少是我个人比较喜欢的;第二个网站是material design官网中的color部分。其中的Color palettes在我们输入颜色之后自动生成搭配。有了这两个网站的配色加持,会大大缩短我们设计banner的时间。

  二、方 法


  1、搜集

  要在极短的时间内设计出效果不错的banner,除非能力强悍或是胸有成竹,我能想到的方法就在于平日的“积累”。

  文中提到的背景、装饰,都是碎片化可拼接的内容。我们在工作或平日里可以设计出足够的素材,那么在时间紧迫的时候进行拼接就好。

  文字字体方面我们可以分析出平时所给文案中的一些“套路”;分析里面总是会提到的几个字或者是相似度很高的标题,来进行字体的设计。

  无论是简单也好、复杂也好,把平日里制作的元素素材进行整理归纳,建立自己的素材库。这样,在面对措手不及的任务时才不至于慌乱。花瓣或者Eagle就是两个不错的素材整理工具。

  2、临摹

  提到临摹,我们就不得不提到另一个词“抄袭”。其实,抄袭的认定是见仁见智的。每个人都有自己的认定界限。而我能想到的避免抄袭的方法,就是“刻意改变”。以下面的小人为例。


  作为设计师而言,我相信都不愿意碰到要求临时出图的情况出现。但我们也需要为这种情况而做准备,以确保在时间紧迫的时候来保证自己设计产出物的质量。因此,日常的收集和积累就尤为重要。

    延伸阅读

  • 如何才能成为一名专业的网页设计师?

    一个专业网站设计,自然需要找到专业的设计师来对网站进行设计,这样才能设计出让企业满意的网站,对网站的后期运营也是很有利的。可是作为一名专业的网站设计师,是需要满足一些条件的。到...

  • 青岛网页设计(青岛网页设计师)

    作为一个极富活力和开放性的城市,青岛有着非常优秀的网页设计团队和资源。优秀的网页设计不仅可以为企业带来更好的用户体验,更是提高企业形象和知名度的重要方式。本文将为读者介绍青岛网...

  • 三水网页设计(佛山网页设计师

    三水网页设计三水是一个拥有丰富历史文化底蕴的城市,网页设计也是这座城市不可或缺的一部分。在网络时代,网页设计功不可没,当今世界的信息交流,基本都是通过互联网来实现的,网页设计的...

  • 应聘网页设计师的(应聘网页设计师的自我介绍

    应聘网页设计师作为一个网页设计师,创建一个成功的网页是一个繁琐的过程。然而,无论是为了展示您的最新成就还是推广最新产品,一个有品味的网页总是具有良好的用户体验和卓越的设计。如果...

  • 网页设计师导航(网页设计与制作导航栏)

    网页设计师导航随着互联网技术的快速发展,网页设计日益成为人们关注的焦点。而对于初入行业的网页设计师来说,要快速了解和掌握关键信息是必不可少的。因此,今天我们为大家介绍一些常用的...

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.lnbdc.com/article/4160.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();