了解banner概念及应用

http://www.maiziedu.com/wiki/ui/banner/

了解banner概念及应用

1.什么是banner?

Banner可以作为网站页面的横幅广告，也可以作为游行活动时用的旗帜，还可以是报纸杂志上的大标题。Banner主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。

2.banner的具体形式

一般是比较长的放在网页抬头的图片形式。比较高的图片。长短不一的各种图形形状。不管是侧边栏广告、焦点图、专题页的头图，我们都可以理解为师banner，在设计方法上，其实都是共通的。

3.banner的用途

1）大家经常在各种大大小小的网站都能看到的广告banner或者焦点图，它们都有大有小、可长可短，但是他们共同的作用就是通过各种方式引导你去点击、渲染气氛。

2）大家通常可以在各种游戏网站，房地产网站，各种活动专题页中见到，也就是大家常说的头图，这种类型的banner通常并不是引导用户去触发点击，而是服务于内容，为整个页面做好气氛的渲染。

Banner包含的三个部分

1.文字（占主导地位）

大家都知道我们从图形上解读信息的能力是要大于单纯的阅读文字，但是在banner的设计中，大多数情况下我们都是通过文字来了解信息，图片知识起到一个衬托的作用，做banner的时间分配里对字形的处理可能要占到50%甚至更多的时间。

1）需要对文案内容负进行处理

使内容更符合信息传递，如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行强调，突出主要的信息，弱化非关键词。整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。如加点英文、域名、频道名等。

2）需要考虑到字形

文本主要包含标题和辅助性的文本。标题部分一般需要进行些设计处理，提高画面的艺术感和吸引力。钢笔造字是在做字形设计上一个比较讨巧的方法，但却又十分有效。笔画连接，做笔画连接时只有合理的安排需要连接的笔画，在笔画收尾和边缘做一些简单造型处理，那么都会出来一个比较好的视觉效果。在做笔画连接时推荐使用一些笔画粗细比较统一的非衬线字体。

形状替换：根据文字的具体含义来设计字形的一种方法。比如把卖表的文案中出现“时间”把日字旁换成钟表。卖服装，把“装”字的衣字底改成衣服的团等，这种设计往往带来新奇的视觉效果。

3D设计：如果要在banner中想突出文字，把文字做成3D效果可谓是最“粗暴”的一种解决方法，只要处理方法得当也可以达到很好的效果。可以通过对多个文字副本移动，或重复变形，做出简单的立体效果。

介绍性文本或者次要信息部分，一般是低调处理，一般使用一些通用字体。字体两种作呕即可，太多会使画面失和如果使用一些商业字体，需要注意使用授权的问题，避免产生一些法律纠纷。

普通字体可以通过一些简单方法焕发活力。

字体处理：

1）给字添加背景，以达到突出文本，拉开字语背景的层次的目的。

2）对字体倾斜处理，整体看起来就活泼跳动了很多。

3）对文本进行斜切处理，打破沉闷的版面布局，可以说是百试不爽。

2.主视觉图

主视觉部分一般放置产品图、任务模特等。产品图的选用要切合题义，不过这部分，大多一般都会有素材提供，不需要我们过多花费精力。需要注意的是，在使用补充素材时，要保证图片清晰，部分图片不清时，可以使用如花滤镜处理一下。一些扣图，调整图片色彩灯操作，这些都是通用技术。

3.背景

背景部分可以烘托出整体气氛。

三种类型的背景：

第一种使用的是纯色的背景，通常这种设计使整个画面显得很清新、简洁。

第二种是渐变型的，可以增加设计的效果，使整个画面更加绚丽，一般一些科幻类可以用到。

第三种是带有复杂背景的，一般用在特殊的专题当中，用于烘托出主题的特点。

背景的选择需要根据网站和主题的风格来予以确定。比如历史专题频道，则会选择复杂的背景图片来烘托气氛。而清新现代风格的网站可能会选择浅色背景。对比不足的时候，可以对文字后背景虚化处理、减淡背景色。