网页的通栏设计
很多时候，我们对一个网站或博客网页的第一印象都来源于上方的网页横幅。
漂亮、整
洁、协调的网页横幅设计会令我们对其顿生好感。本章将会介绍网页通栏的概
念和轻松设计
漂亮网页通栏的技巧。不需要过度依赖于Flash的动态效果，静态的平面设计
也能发挥强大
的力量。
14.1网页通栏概述
在传统的平面设计中，通栏是指和一个整版宽度相同、但是面积不到半个版的
平面广告。
例如我们经常看的报纸《北京晚报》，一个整版的宽度是28厘米左右，在上
面发布一个8
通栏的广告，就是指宽度为28厘米，高度为8厘米的平面广告，如图14-1
所示。
图14-1报纸的通栏
14.1.1网页中的通栏
在网页中的通栏通常以横贯页面的形式出现，并且位于页面的顶端。由于尺寸
较大，视
觉冲击力强，能给网络浏览者留下深刻印象。其特点是吸引力更强，表现更突
出，倍受来访
者关注，如图14-2所示为黄建翔的新浪博客首页通栏部分截图。
图14-2黄建翔的新浪博客首页通栏部分截图
在网页通栏上写满文字是一种吃力不讨好的设计，也没有一个浏览者能够记住
你上面的
那些网址及文字。而用图像来进行展示能够达到更好的沟通效果，也能够产生
更大的视觉冲
击力，如图14-3所示。
图14-3图片比文字有更强的视觉冲击力
在网页的通栏中，图像比图表及文字更能让浏览者与网站的内容产生更加密切
的联系。
从产品宣传的角度来说，图像能够与浏览者产生多渠道的联系，如图14-4所
示。图像能够
无声但却非常有力地将浏览者的注意力引入到网页的内容中来，产生一种情绪
上的共鸣，也
让浏览者对网站的内容有一个心理上的准备。
图14-4网页通栏图像的作用
14.1.2网页通栏的设计形式
通栏的表现形式一般都是静态的图像，可以说通栏设计也能够理解为图像设
计，或者类
似于海报设计。无论是传统平面设计中的通栏还是网页中的通栏，其设计形式
包括两类，一
是设计成广告，起到宣传和推广的作用；二是设计成壁纸，对页面的整体效果
进行修饰和美
化。
14.1.2.1通栏广告
很多商业性的网站会在页面的顶部添加通栏广告，如图14-5所示为淘宝网
（www.taobao.com）的某个店铺页面截图。在这个页面中，通栏广告起到了宣
传和推广的作
用。
图14-5淘宝网的某个店铺页面截图
如图14-6所示，为亿房房产网站的页面部分截图。在页面最顶端的通栏部
分，直接放
置了相关的产品广告，这种通栏广告的设计就是以纯粹的赢利性为目的。
图14-6亿房房产网站的页面部分截图
14.1.2.2通栏壁纸
通栏壁纸在博客类网站或者是不以营销为主要目的的网站中常常可以见到，如
图14-7
所示为中华人民共和国农业部官方网站（http://www.agri.gov.cn/）的顶部
截图。在这里使用
了一张绿色的农田照片作为整个通栏壁纸的背景，让浏览者产生亲近大自然的
感受，对网站
起到了很好的修饰作用。
图14-7中华人民共和国农业部官方网站的顶部截图
如图14-8所示，为魔兽世界官方网站（http://www.wowchina.com/）页面顶
部截图，页
面中的通栏壁纸采用了大幅的游戏人物形象，给人以强烈的视觉冲击。
图14-8魔兽世界官方网站页面顶部截图
14.1.3网页通栏的尺寸
不同网站中的通栏尺寸都是不同的，网页通栏一般和整个页面中的内容宽度保
持一致，
而高度则可以根据实际的需要进行调整。下面列举一些常见的网页通栏的尺
寸，以供读者设
计时进行参考。
1、标准通栏尺寸为：760X100像素。
2、新浪博客的通栏尺寸为：770X135像素。
3、淘宝网通栏的尺寸为：760X60像素。
14.2图像素材的选择
对于通栏设计甚至是网页效果图设计而言，图像素材的选择都是至关重要的，
选择最恰
当的图像，能够牢牢吸引浏览者的视线，它具有宁静的、决定性的力量。
图像直接表现了主题，并且凭借故事性，使浏览者产生共鸣。缺少了图像而只
有色彩和
文字的设计，给人的印象是应该没有信息性的空虚画面。去掉图像，它所引导
的感情通道也
会随之关闭，这就需要浏览者花费很大的力气投入到画面中去。如果把网页或
者通栏中的图
像去掉，如图14-9所示，这样就能明白为什么图像那么重要了。
-----------------------Page5-----------------------
图14-9没有图像的网页设计
下面列举了选择图像素材时的注意事项，可以作为参考。
14.2.1说服力的强弱
在图像素材的选择上，说服力的强弱是按照如下的顺序排列的，如图14-10所
示。
图14-10图像素材的说服力
在所有的图像素材中，人物脸部的图像说服力是最强的，而在脸部中又以人的
瞳孔为最
强，动物的图像也是如此，如图14-11所示。
图14-11说服力最高的是人物或动物的瞳孔
同样的人物，如果面朝后或者面朝侧面，目光的强度就会消失，说服力也就降
低；而从
正面看你，看着你的人物说服力就强，如图14-12所示。同时，笑脸表达了对
对方的好意，
传达了“欢迎”和“友善”的信息，由其是弱小的孩子的笑容特别具有好感。
图14-12目光的方向控制说服力的强弱
其次就是人们生活中使用的物品，和人的生活关系越密切，其说服力就越强，
例如我们
天天要使用的鼠标，由于天天接触，所以说服力是最强的；然后是汽车，使用
的频率也相对
较高；而说服力最弱的是飞机，因为并不是所有人都会天天乘坐飞机出行，如
图14-13所示。
图14-13与生活关系的密切程度控制说服力的强弱
主题与人的瞳孔距离越远，说服力越低。天空和大海之类的风景距离最远，说
服力最低。
同样的手机图像，与放在桌子上的手机相比，拿在人手里的，离人稍稍近一点
的手机的说服
力就强一些，如图14-14所示。
图14-14距离控制说服力的强弱
然后就是植物，它是人性化的隐蔽的，静态的存在，温和地欢迎着浏览者，如
图14-15
所示。
图14-15植物的素材图像
说服力最差的是风景、建筑，这是因为建筑总是离人视线的距离很远。
同一个建筑，如果离的近了，心情也会更加贴近。作为风景中的一部分建筑，
走近了，
就可以清楚地看见墙壁、楼梯，似乎连人的脚步声和交谈声也能听见了，对于
一个物品长时
间的观察可以做到客观，而近距离的观察则可以使人产生共鸣，其说服力也就
越强。如图
14-16所示。
图14-16距离远近控制说服力的强弱
14.2.2内容的相关度
图像素材的选择，一定要紧密结合网站的主题内容，或者通栏的设计需要。这
是因为图
像能够直接传达内容，浏览者仅仅通过观看图像，就能了解设计的主题，图像
是最亲切最有
力量的表现形式。
例如设计以女性服饰为主要内容的通栏，可以选择模特照片、服饰照片和产品
照片等素
材进行设计，如图14-17所示。
图14-17导航的文本设计
对于通栏广告，一定要能通过图像来让浏览者对所要介绍的产品有个大概的了
解，而不
需要太多的细节。因为通栏广告的尺寸是有限制的，在有限的空间内不可能包
含太多的信息，
抓住重点即可，如图14-18所示。
图14-18通栏广告的图像
14.2.3发掘图像背后的故事
无论何时，在我们的记忆深处总会残留着一些画面。当图像背后的故事与我们
脑海中的
记忆产生共鸣时，那幅图像可在记忆中燃烧起来。故事性不同于抽象的色彩和
形状，它依照
具体的情景，能够更直接地刻在我们的记忆之中。这是因为与自己的某种兴趣
或从前的记忆
有共鸣的主题能够唤醒心中的故事。在选择图像素材的时候，如果能够把图像
所表达的故事
性和设计主题相结合，就能达到最好的效果。
如图14-19所示，这是一张整体亮度较暗的照片素材，较暗的图像首先就給人
以郁闷、
失落的心情。其次，从图像中可以看出这是一个建筑工地，位于画面中心的建
筑物遮挡住了
天空中的太阳。读者可以想像一下如果自己的家始终有一个建筑物遮挡着阳光
是一种什么样
的感受，就像梦想无法实现，或是遇到了无法逾越的阻力一样。所以这张图像
素材体现的是
一种郁闷、压抑、沮丧、没有未来的感受。
图14-19图像素材
如图14-20所示，这是一群年轻人拥抱在一起的照片素材，他们的动作给人一
种亲密无
间的感受，这是朋友之间的，坚定不移的信任感。每个人的表情都是非常的开
心，似乎在庆
祝着什么，是谁的生日？又或是谁通过了考试？这种喜悦的感受能够传递到每
个人的心里。
这张图像素材体现的是团结、友爱、乐观、幸福、欢乐的感受。
图14-20图像素材
14.2.4色彩的层次
谈起美味的食物，大家还是以“色、香、味”为主要出发点，“色”为什么在
第一位？
如图14-21所示为两张食物图像的对比，不言而喻，相信大家都会觉得左侧的
这张图像给人
以强烈的食欲。因为这张图像色彩丰富、鲜艳，变化明显，层次感和立体感
强，而右侧的图
像色彩昏暗。
图14-21两张食物图像的对比
并不是所有的图像素材拿来就能用，因为所有的图像素材都是通过相机或者扫
描仪输入
到计算机中的，由于在摄影或扫描过程中的一些问题，有可能会造成图像素材
的偏色或者不
清晰。这时可以在图像软件中给图像素材进行颜色的调整，从而达到满意的效
果。
14.2.5与众不同
我们的思维受到惯性的束缚，经验往往成为我们认知某一个事物的准则。而与
众不同的
图像，其实就是打破这种惯性，重塑浏览者对某一个物品的认知，往往能够产
生强烈的印象，
如图14-22所示。
图14-22与众不同的图像
14.2.6幽默诙谐
每个人都喜欢笑，在选择幽默的图像素材就能够达到这种效果，人生中最令人
绝望的事
可能是在你进去厕所几分钟后，当你准备心满意足站起来时，却看到卫生纸已
经用完了。或
许也只有这种情景才能表达出我们此时此刻那种欲哭无泪的心情。精心挑选的
图像素材，既
表达出“存货量不足”这个含义，同时也展现出一种“故事”情节，如图14-
23所示。
图14-23幽默诙谐的图像
可以想象，而这样一张图像，能够在哄堂大笑中让人长久回味。更重要的是，
由于其有
趣，你更能获得浏览者的认同感，这样传递信息的方式也更有效。
14.2.7唯美主义
美会触发我们内心深外的渴望，一张漂亮的照片可以让观众摆脱日常的单调而
引起他们
的注意力，也可以将他们带进一个丰富多彩的世界。无论你的主题是什么，都
要学会发掘美。
根据调查，美丽的风景，漂亮的女孩，更能吸引男性的注意力，如图14-24所
示。
图14-24唯美的图像图14-25戏剧化的图像
14.2.8戏剧化
戏剧就是电影院。指的是一张图片创造出某一种效果，如兴奋、期待、深刻
等。戏剧化
的图像就是突出强调某一种感受：将动作变得更夸张，让对比显得更强烈，让
差异显得更突
出，如图14-25所示。
14.2.9强调脸部
脸部是我们人类在所有图片中最熟悉的画面，脸部的表情特写也往往最容易触
动我们的
心扉。采用脸部图像作为素材，你已经不需要再用另外的强调了。脸部表情可
以多种多样：
高兴的，悲伤的，紧张的，焦虑的等等，如图14-26所示。
图14-26强调脸部的图像
如何能够找到最适合的图像素材？除了审美能力以外，寻找图片的技巧也很重
要。作为
一个通栏或网页效果图所用的图像，有时需要找一些有部分平实背景的图片，
以便能够在上
面加上文字。以下就是一些适合用于通栏背景的图片，他们都有一个特点：图
片的主要元素
在其中一边，而且留有大部分的空位，如图4-27所示。
图4-27搜索图像素材
当然，也不一定能够刚好找到你非常满意的照片，这时就需要使用Fireworks
或
Photoshop适当对图片进行编辑。但无论如何，善于发掘图片的含义，加上一
点创意，让文
字与图片产生更有趣的联系，这才是更重要的技巧。
|
|
