Banner设计手册文档格式.docx

Banner设计手册文档格式.docx

《Banner设计手册文档格式.docx》由会员分享，可在线阅读，更多相关《Banner设计手册文档格式.docx（32页珍藏版）》请在冰豆网上搜索。

但在表达可读性上不值得推荐。

我建议在BANNER上用BoldSansSerif字体。

第2页设计广告条内容的正确方向

让你的广告更有效地被浏览者从一个方向来读到。

让浏览者从一个方向上看文字：

不要让文字排列成这样：

这样的排列也可以，仍是从左向右：

按钮要放在右边：

让浏览者的视线从左到右。

这样做会更快更有效。

因为习惯是从左到右地看，不要认为浏览者会在看广告条内容（左）前点击按钮（右）。

第3页人物和图片

把美女放在BANNER的左边：

如果你的BANNER上不是一个女人，也同样适用。

学会用女人的图片比用男人的更有吸引力这一点。

?

理由是：

女人会让男性注目。

是视线的第一焦点，然后你会随着她看过去，所以图片应该放在左边。

面孔的局部图片会对女性浏览者更有效：

如果你不是一个电脑设计狂的话，你应该会把目光注意到这个女性的面部图片上。

这种方法对美容、保健和化妆类的，网站会用得上的。

修整你的图片，BANNER将会下载得更快：

这一点相当很重要和有价值，值得花时间去做。

可以在PHOTOSHOP中用钢笔工具进行修整。

广告条的体积将会减小很多。

它会去掉背景上的不必要的东西。

第4页避开广告条的边缘

文字紧靠边缘的广告条让人看起来很不专业，但你也可以在设计中按我们的方法避免这一点。

广告条的边缘不是一个休息场所，也不是一个可以让你跑出去的空房间。

它是一个内容与边缘保持适当距离的区域。

文字的旁边要留有一定的空间。

这样能使它们更明显。

避免广告条的每一个角都有文字。

不要以为你这样做会使它们很分散，因为你可以逐个地调整它们。

让浏览者更好地理解。

第5页激起点击的欲望

让浏览者点击的理由是什么？

点击后他们将能看到什么？

免费的东西，而并非开玩笑。

将它们设计得富有乐趣，那它们则能让浏览者产生兴趣。

向消费者显示出你的质量、建立起你的信用。

避免广告条有“我们想赚你的钱”这样的意思。

试试以下的方法。

这是一个很好的方法，来介绍你的网站给个人用户某些东西或能让他们做什么。

通过给新用户一定的益处来欢迎他们是很重要的，然后再开始用做广告来向他们销售产品。

你们是要做长期打算的，不是吗？

离丝织手套仅有三步：

如果浏览者相信你说的三个简单步骤，也许他们会考虑购买你的丝织手套。

从你的广告条开始，慢慢将消费者自然地引导到购买的欲望中。

第6页文字的间距

些微的调整能产生很大的不同。

小字的间距也小的话，会使浏览非常困难：

当然我不希望你用如此小的文字，这只是个例子。

越小的文字需要越大的间距来提高它们的可读性。

下面是一个同样大小的字体，但间距调大了，是不是更容易看清？

对于大的文字，我们对应地这样做：

大字体要粗壮扁平。

减小大号文字的间距：

第7页文字的数量和复杂性

不要放一些没用的东西，除非你想赶走你的客户。

我将解释为什么……

吸引注意力很重要，但当你的BANNER上满是吸引点，那很它将只会被注意，而不会有点击。

这是自负的表现。

自负不能卖钱。

复杂型BANNER的优点：

1看上去很酷！

所以可能会得到点击！

2客户希望你能做10个以上！

复杂型BANNER的缺点：

3可能不被浏览到

4杂乱而造成难以正确看到

5下载时间长

468x60是一个大的空间。

你可以找一些好的来对照。

你看到那些广告条整个地空白，只除了中间有几个字？

这就是对比：

对比型BANNER的优点（首选的）：

6浏览者会自然地被吸引。

7简单

8下载非常快

对比型BANNER的缺点：

9客户将认为你做得太简陋（你会问我为什么恨客户吗？

）

10有时目标群体会有问题？

如果你只想获得点击量，那你需要很有创意。

第8页较长文字的处理

当你要用一个长句子，而这个长句子不能适合广告条时该怎么办？

这样做并不令人讨厌，但人们不喜欢读这样的长句。

浏览者浏览时，他们是懒惰的。

如果你要用一个长句，那么在排版上你应该让它变得令人喜欢：

当你设计一个广告条，你应该假设自己在和一个浏览者对话，就是他而且仅有他，而不是整个互联网用户。

还要注意前面我讲到的大号字用小间距，而小号字用大间距的方法，千万不要忘记！

第9页留空

不只是大型的设计需要留空，广告条也同样需要它来使效果更佳。

让图形和文字呼吸（作者很幽默^o^）

我们为什么需要这么多的空，我将解释：

我的意思不是说要硬套上面的例子，有很多有效应用留空的方法。

只要你试着去做，会找到更好的方法的。

这个动画的广告条很有效，因为它也应用了留空。

观察它的每一帧：

第10页文件的大小

不要忘记你的广告条必须能很快地被下载！

只用一种颜色的背景：

迅速下载的绝对最佳的选择是只用一种颜色的背景。

这也有得于形成强烈对比。

当你用单一色背景和使用纯文本时，你可以使用Photoshop或ImageReady对它进行最优化。

将Lossy设为15和50，去掉dither（抖动），文件将变小很多！

只使用这些设置，我能使下面的BANNER减小999字节！

看这个，酷吗？

记得前面讲过的不要自负吗？

如果不记得，

请从这一节开始读。

我们通常在抖动的BANNER中添加Effects效果，让它们看起来更漂亮。

但它在不同环境下显示并不一样，这是因为它的细节问题。

所以它并没有什么实用性。

不仅仅是Effects特效缺少实用性，它还让你的文件变得很大。

3DBevel和Glows看起来很酷，但我建议你把它们用在网页的其它地方，而不是你的广告条上。

再看这个，这样会让图片变大。

DropShadows（阴影效果）需要抖动图片才能正确看到效果，因为它包含了不同的阴影色。

那我们就必须加大颜色数。

我认为应该尽可能避免使用它。

浅析Banner构成与创意设计

　　当用户访问一个网站的时候，第一屏的信息展示是非常重要的，很大程度上影响了用户是否决定停留，然而光靠文字大面积的堆积，很难直观而迅速的告诉用户来到这里会得到什么有用的信息，因此网页Banner设计在这里起到了至关重要的展示作用，特别是对于首页Banner，有效的信息传达让用户和文字之间的互动变得生动而有趣，下面就让我们通过大量优秀的设计案例走进Banner设计，走进设计师们的灵感挥洒空间。

一.Banner的构成与设计形态分解

　　自然界的万物形态构成都离不开点、线、面。

它们是视觉构成的基本元素，具有不同的情感特征，因此要善于采用不同的组合去体现不同Banner的情感诉求。

a.点的聚合

　　点的排列所引起的视觉流动，引入了时间的因素,利用点的大小、形状与距离的变化，可以设计出富于节奏韵律的画面。

点的连续排列构成线，点与点之间的距离越近，线的特性就越显著。

点的密集排列构成面，同样，点的距离越近，面的特性就越显著。

无数图形的点聚合在一起，增强画面的韵律感

b.线的流动

　　线分为四类：

直线、曲线、折线以及三者的混合。

直线又有水平线、垂直线、斜线三种形式。

其中，水平线给人平静、开阔、安逸的感受；

垂直线给人崇高、挺拔、严肃的感受；

曲、折、弧线具有强烈的动感，更容易引起视线的前进、后退或摆动。

严谨的线条，使页面稳重富有理性

c.面的分割

　　面在设计中的概念，可以理解为点的放大，点的密集或线的重复。

Banner元素在不同大小色块元素的风格对比下，能获得清晰、条理的秩序，同时在整体上也显得和谐统一

清晰突出的图片所产生的第一视觉点

色块与线条间不同比例的分隔画面，使页面具有形式美感

二.Banner设计的形式美法则

　　在banner设计中采用特殊的形式结构，会使网页变得个性十足并很好的区别于同类产品，让人记忆深刻。

a.有机形的柔和与美

　　有机形是由一定数量的曲线组合而成，是自然物外力与内力相抗衡而形成的形态。

有机形富有内在的张力，给人以纯朴、温暖而富有生命力的感觉。

曲线与个性化的插图形成强烈的对比。

b.偶然形的独特魅力

　　偶然形是力的作用下随机形成的图形，它具有天然成趣的效果，利用偶然因素提炼美的方法，让Banner设计更加与众不同。

偶然形使页面产生趣味性

三.有效的设计创意方法

a.预留大面积的Banner空间创作

　　Banner设计占用很大的空间，且占用的空间是重要而有价值的面积，那么你需要万分小心的去处理，但是如果处理的好的话，它将会事倍功半，而且信息传达非常有效。

b.有效的措辞与行为导向按钮

　　在banner设计中通过真实产品的展示，并配以鼓动人心的措辞口号及醒目的可以直接诱导用户点击的行为导向按钮，让网页获得更多的用户点击和关注目光。

c.插图及清新手绘让页面倍感亲切

d.引入肢体语言让画面变得生动

e.丰富的产品展示组合效果

　　用堆积这种效布局特效来展示不同的作品示例，并附上一条介绍性质的口号，网页变得更有说服力，丰富而富有层次感。

f.特殊肌理的组合

　　适当的运用肌理以及拼贴效果，让画面变得有质感且意味深长，是让Banner与众不同的好办法之一。

g.让资讯循环动起来

　　使用滑动效果来将更多信息填进到Banner区域。

这对于有很多特性和丰富产品线的网站很有用，通过一些很有用的Javascript库及其插件，让这类效果更加活灵活现。

　　通过以上大量的案例对比，希望能给您带来更多灵感碰撞，感谢您的阅读^_^

如何设计网页小广告（banner）

【译者的话】网页上的小广告（banner）已经成为一种宣传推广的重要形式，但这些小广告除了版面细小外，图象的表现还受到象素较低等其它因素影响，给传统的平面设计师带来了新挑战。

如何让你的小广告在混乱无章的网页中脱颖而出？

本文介绍了几种解决的思路。

原文出处：

如何在细小的空间设计出视觉效果吸此人的广告（banner）？

第一步：

使用简单的照片

对付一些区域狭窄的空间需要涉及一些特别的要求，第一步，就是采用一张简单但又能传达很多信息的照片。

一般的广告总是采用整张图片加上文字配合，而网页上一个标准的小广告的尺寸