ui设计：流行的几种banner的处理类型

ui设计：流行的几种banner的处理类型

banner是我们接触工作后在制作品牌和内容宣传上最常见的工作，它的展示起到着非常重要的引导性作用，一个界面的第一视觉往往会被优秀的banner所吸引。这两天抽空整理分析了一些常用的类型，对设计banner头疼的小伙伴们要仔细看看哦～

一般来说，一个好的Banner首先是要保证信息传达准确，然后再需要保证画面的协调感和氛围，可以看到，一张Banner，不仅仅由点或者不仅仅由线组成，而是点、线、面相互组合，相互平衡，最终形成一个版式丰富的Banner图。

以下素材部分源自学员作品，部分源自花瓣（感谢设计师们的分享，如果看到自己的作品，介意的请联系删除～）

色块分割

以上banner采用不同比例大小的色块组成Banner的背景，加上人物与文案，这种表现形式适用于突出产品，如家居，服装，电子产品等。界面感简而不白，能快速提取到有价值的信息，注意选色的时候要注意整体的色感。

几何边框

简约，常常会给人以冷酷、干净、现代的感觉。设计中使用的形状、元素简洁；使用的配色方案统一、整体，用色克制。质感体现上较为细腻；结构上经常使用留白、简短／准确／有核心价值、有“气质”的留白，框起来的是焦点，几何图形是永恒的装饰品哦～.～

2.5D

空间几何这种风格，通过建造一个空间体，用几何来营造氛围，空间感代入感强。这类稍微研究一下还是可以做出来的，关键是创意想法的表达，这个就要多费心思了

2.5D风格在电商设计中很流行，其风格新颖、实用，可以放置很多内容，有动有静，可以很好的与二屏三屏连贯起来，受到一些大型促销活动的青睐，经常能看到这种风格的首屏海报。

扁平插画

简洁而不简单，去掉繁琐的装饰效果，展现主体的核心表达。用文字以外的图形或者人物等来帮助banner带来更直观的感受，文字稍微处理变形一下加图形或人物可以让banner更有活力更有感觉。这种类型的banner，金融、教育、旅游用的偏多，当然插画能力OK的话，各个行业运用起来都不是问题

色彩叠加

较为流行、多变，整体视觉会相对年轻，使用的元素相对更直接、明确、结构直白；整体有给人干净、明朗、和谐的感觉。突出文字，用简单的图形装饰烘托气氛。可用纯色，渐变色来进行背景色彩叠加处理，选大图的时候要注意哦，整体的意境要靠色调和明暗调出来，当然最简单的还是选用干净不杂乱的底图。

色彩是有情感的，不同的配色会带给人完全不同的心里感受。所以我们在做图的时候需要根据主题来进行配色，合理、舒适，让banner图整体和谐。所以我们需要考虑想要表达什么样的情感，想让用户看的时候有什么样的感受，所表达的情感与主题是否相符合，基于这些点来做配色就更加的有目的性了。

渐变纹理

微妙的渐变已经作为已经设计趋势回归了。渐变的背景，甚至渐变的叠加，都能让你的Banner设计风格化，搭配图片、纹理和文字，渐变能给人多种多样的体验。色彩浓郁是其特点

和UI设计不同，在电商和广告Banner 的设计当中，纹理一直都存在，甚至是非常常用的元素。纹理能够很好的提升整个Banner 的信息量和整体的质感。当然，在使用纹理的时候千万不要让纹理喧宾夺主。

当我们在做一个banner的时候，如果没有特别的要求，其实我们是有很多个方向选择的，首先问下自己你是想要突出什么信息呢？是突出商品呢？还是突出文字呢？还是突出整体的氛围呢？还是强调整体的协调感呢？还是说强调品牌呢？这个可以通过体会用户心理来判断方向。

好了今天就先到这里，讲了这么多小伙伴们get到了几点呢？

如何打造高点击率BANNER

如何打造高点击率BANNER

网站BANNER是互联网中非常常见的一个东西，基本上所有的网站上都有BANNER图片，有的为了推广品牌、有的突出产品、有的做广告，企业选择BANNER主要是因为便宜、效果可监测、行之有效。并且BANNER图片不仅能概括网页还且还能为网站增加色彩，所以一直到现在BANNER一直是站长们青睐的一种形式。既然BANNER是用来展现的，那么我们如何利用BANNER的优势提高BANNER的点击率呢？下面是199it给出的建议。

1.Banner尺寸

理想情况下，如果不限空间，那么Banner可以按照以上的尺寸进行设计。

2.务求简约

设计越简约，内容越清晰，用户便能更迅速的看到Banner广告，用简单的搭配突出核心文字，不要做得非常复杂，用户半天看不懂什么意思。我们要的就是第一眼就知道。同时Banner需要与整个站点协调，不要显得格格不入。

3.层级分明

Banner设计首先要了解的、也是最重要的便是：设计的目的是为了提升品牌知名度，提高网站流量。所以我们在做Banner的时候要注意层次的分配。并且设计一定要和品牌形象一致，不要纯粹为了美观。

公司 logo: Logo设计必须能够提升品牌知名度。在视觉上，要让Logo在Banner众多元素中脱颖而出。

价值主导:通俗的讲，通过产品或服务的卖点来吸引用户消费，这一部分一般占据了Banner的大部分空间，而且要引起用户的注意。比如特价998.

行为召唤:一般由文本或者按钮构成，比如”点我”、”了解更多”、”现在注册”。行为召唤是Banner广告中的视觉焦点，支持浏览者点击深入。

4.清晰的边框

从左到右: Android, Netflix,Bing，人眼会自然的观察框架中的物体，Banner广告的边缘最好有清晰的边框。

5.恰当利用按钮

按钮能够提高点击率，有效的引起因为召唤。一般在右下角，采用对照感比较强烈的色彩。

6.文本清晰可见

Banner中的文字非常重要，能直接传递给用户信息，帮助用户决策，一般情况不要使用非主流字体、潦草的字体、过于纤细的字体、全大写字体、小于10pt的字体。

7.正确的文件格式

.JPG, .PNG, .GIF, 或者 Adobe Flash格式都可以，能够让你的广告有效的传递。如果是FlashBanner，记得要转换成.GIF格式，这样就能获取全设备支持，也便会有更多的人浏览Banner。并且在展现清晰的同时，文件越小越好，最好小于150kb，因为用户一般登陆一个网站会直接向下翻动，因此，如果能够迅速载入，就能第一时间让用户看到Banner广告。不要指望用户等加载。

8.打造一种紧迫感

通过使用粗重、对照分明的字体，打造一种视觉上的紧迫感。让用户迫不及待的购买、点击。不过这招偶尔试一下还行，不能总用。

9.合适的色彩

谈到网站搭配色彩，不妨多看看优设网的一些文章，这里就不详谈了。还有，设计Banner时要用RGB色彩模式，因为一般都是在屏幕上看广告的。

10.尝试一下动效

动态广告总比静态广告更醒目，能有效引起行为召唤，但一定要确保动效设计清晰、直接、不偏题。不超过15s、简约的动效最好，一般不要重复播放超过10次。

版权声明：本站所有文章皆为原创，欢迎转载或转发，请保留网站地址和作者信息。

很赞哦！ ()