网页设计--页面元素

弹出新的窗口。这样的站点也很有特色，如图10所示。
页面元素
图10 无导航的网站
页面元素
1.2 Logo网站标志 Logo的中文涵义是标志、标识。作为独特的传媒
符号，标识(Logo)一直是传播特殊信息的视觉文化语
言。网站Logo设计在传统的CI标志设计上有一定的突 破，进而有一些属于网站标志的规律产生。Logo的设
页面元素
4. 缩略图的边角修饰
做过网站的人，对缩略图绝对不会陌生。一般情 况下，缩略图是在保证原图完整性的情况下，将原图
全尺寸wenku.baidu.com缩小。很多人使用软件生成缩略图。软件生
成的图片，原图的风貌是表现出来了，但却不十分清 楚，甚至扭曲，无法突出原图的个性特征，会直接影 响浏览者的感观。最糟糕的情况是，浏览者看过缩略 图后就不愿向下一级页面点击了。为了保证页面的视 觉效果，缩略图应尽量手工完成，还可以挑选原图中 较为精彩的部分并截取和裁减为缩略图，这样的缩略 图才会给访客留下更多的想象空间。
如果这类站点把导航设计成竖多排，搭配合适的插图，
页面会别有一番风味，如图5所示。
页面元素
图5 分块导航
页面元素
● 双排导航(或者多排导航)未必要挨在一起。依
导航信息内容不同，完全可以利用插图或者框架把它 们分开。页面设计可以自由一些，亦张亦弛，灵活排 版。 ● 图片式导航都很漂亮(如图6所示)，这类导航占 用页面空间比较大，形式多样。适学校欢迎界面，笔 者根据页面内容较少等因素，选择了圆形导航设计， 解决了页面空间稀疏、导航栏目名称个数不同等问题。
● 在导航栏目种类不超过6个的情况下，通常选择
一排放置，横竖都可以。导航超过了6个就可以考虑用 双排。
页面元素
图1 多排导航
页面元素
● 导航栏目非常多的情况下，可以选择多排。大 多数网站把栏目个数折半，分成两排。很少有网站设 计导航条的时候，选择不规则的多排。如果两排导航 长度设计得不同，肯定别有风味。利用短排导航的多 余空间，放一些功能模块，比如搜索，邮件列表等，
页面元素
页面元素
1 页面元素 2 网络广告(Banner) 3 整体规划 4 功能易用性
页面元素
1 页面元素
根据不同网站的信息存储和不同页面的信息内容， 每个页面不可能放置相同固定的元素，这是很容易理 解的。但是大多数网页，都包含下列页面元素中的一 项或几项，它们对页面设计都有着举足轻重的意义。 这些页面元素则是我们本章的要点。
导航围绕网站标志，有利于树立学校的形象。
页面元素
图6 图片式导航
页面元素
图7 经济贸易学校网站
页面元素
● 导航可以直接用文字、图片或者利用动态网页
编程来实现，也可以用Flash动画导航条。Flash导航非 常漂亮、体积小、变化多，引人入胜，还可以加深理解。 ● 内容丰富的站点可以考虑使用快捷导航条(见图 8)，也就是将页面分Frame制作，即导航居一边，内容 居另一边。浏览时，内容页面不断翻动，导航却一直存 在。
页面元素
图3 四排导航28个导航栏目
页面元素
● 竖排导航按人们的习惯，大多放置在页面的左边。 导航在右边不符合人们的习惯，但是并非完全不被接受。
虽然不能作为主流设计，但只要安排得体，完全可以体
现独创性，并且受到人们喜爱，如图4所示。
页面元素
图4 置右的导航
页面元素
● 信息少，使用区域排版的站点可能没有明确的 栏目分类，站点内就包含了如导航的几个部分的内容。
页面元素
图8 快捷导航条、竖两排右置
页面元素
● 利用DHTML动态网页技术实现的导航，一定要 考虑到访客的浏览器是否支持，下载速度是否会受到 影响等问题。动态导航都很精美、眩目，可以反映数 码时代的科技感，但不要太过推崇或迷信，因为这类 导航并不是所有类别的网站都适用。鉴于门户类站点 流量大、浏览者的知识层次不同等情况，尽量不要使 用DHTML的导航。
际设计中，该主页把具有和Flash动画一样风格的花纹
作为背景充填到空白区，这不仅起到了修饰作用，而 且弥补了框架设计的漏洞，强化了Flash设计的风格，
使得整个站点个性分明。
页面元素
图18 ping pong
页面元素
3. 整张图片作为背景
为了突出网页设计的个性化，很多网站甚至用整张 图片作为背景。如此一来，就比单调的重复性花纹显得 更有味道和特点。在使用整张图片做背景时，一方面一 定要把下载速度考虑进去，网页不能承受大于100 KB 的背景图片；另一方面，不能因顾忌到下载速度，而太 过火地压缩图片，图片模糊会影响页面效果。
页面元素
我们先来看看导航栏的分类：横排导航、竖排导 航、多排导航、图片式导航、Frame框架快捷导航、 Jump Menu下拉菜单、隐藏式导航，甚至还可以是动态 效果的Flash导航等等。有时大的导航里面还有小的导 航，在某些情况下，大导航和小导航需要设计在同一
个页面内。
页面元素
导航样式非常多，怎样选用适合网页风格的导航呢？ 选用导航的先决条件有两个：是否符合页面风格； 是否符合信息类别要求。 以下讨论不同导航的优点和缺点，以此作为选择导 航的根据。
页面元素
对缩略图也可以加一些修饰，例如使用不规则图 形，填加边线，进行一些特殊边角处理等等(见图26)。
页面元素
图26 mayto.com
页面元素
5. 图片的排版 图片较多的情况下，将数张图片以整齐有序的形
式排列在版面上，称为块状组合；相反，将图片分散
于版面的各个部位，使版面成为自由的不呆板的形式， 称为分散组合。
页面元素
为了不违反原设计意图，在保证图片清晰的情况下，
可以从制作上优化网页： ● 把大的背景分割，不需要的部分省去，另一部 分可以换成表格背景，分开插入页面当中。 ● 注意到页面的长度，考虑好是否可以重复使用
图片，以及是以x、y哪个轴重复图片。
● 单色的地方，可以使用表格背景色填充。有文 字的地方，可以考虑不做在图片里，这样压缩图片的
蓝色渐变到乳白，加以适当的高空跳伞插图，直截了
当地展现了高空的魅力，突出了网站的主题。
页面元素
图16 MONSON滑雪板设计
页面元素
图17 The jump plane club跳伞俱乐部
页面元素
2. 花纹背景 如图18中ping pong个人主页。这个站点的特点在 于使用了一个长方形的Flash动画作为网站的主要信息 区域。由于信息区很小，就给画面带来大面积的空白， 而过多的空白会强烈地影响到网站的整体效果。在实
胆尝试。也许现在很多商业站点无法使用太前卫的形
式，但人们接受事物总是要有一定的过程，没有尝试 和演示，人们是永远都不可能接受的。
如图12所示，笔者粗略绘制了一张Logo位置图，
表示出几种较为常见的情况。
页面元素
图12 Logo位置图
页面元素
图13 idn2002年会议
页面元素
图14 菲律宾网站halfproject.com
计会在第6章提及，本章着重讨论标志设计在网页设计
中的应用。 网络发展至今，标志应用还有很多误区。
页面元素
图11 百事可乐标志变迁
页面元素
Logo的形状设计上也有一些误区。中国大部分网 站Logo根据习惯都设计成横长方形的，担心竖长的标 志难以在网页设计中进行排版。 Logo的位置通常在页面的左上角。但它不是一成 不变的。页面设计的个性化发展，需要设计师们的大
或文字背景亦可。
页面元素
1.4 插图 1. 图片的文字 若图片上含有文字，这些文字一定要清晰。模糊的 文字会降低视觉效果。含有文字的图片，尽量保存 为.gif格式和.png格式，或者高质量的 .jpg格式(见图
24)。
页面元素
图24 图片上的文字
页面元素
2. 图片的色彩
人们在设计页面的时候，往往只注意到页面框架和 底图的色彩，而忽略了插图的色彩。实际上，插图中的 色彩倾向直接干扰到网页的整体配色。如图25所示nike 鞋的页面，蓝绿色和灰色是它的主体配色，而这些色彩 的来源则是插图。 要选择适宜的插图，首先就要注意图片上反应出来 的信息内容，其次才是图片本身的色彩是否符合页面的
页面元素
块状组合具有鲜明的理性感，我们把一些图片很 整齐地排列在同一版式内时，就像街区一样。把相邻
地图片排列在一起，自然强调出垂直与水平的效果。
按照这样的编排，文字与图片混编的情况就很少，往 往是文字与图片分别编排，因此看上去有理智和冷静
页面元素
● 导航 ● 网站标志(Logo)
● 广告条(Banner)
● 图片 ● 文字 ● 动画 ● 装饰物
● 超级链接
页面元素
1.1 导航
导航是最早出现在网页上的页面元素之一。导航 就好像一本书的目录，先有章，而后是节，再就是小 节。如果把导航比作图书馆里的标签分类也很形象， 文学的书这边走，艺术的书那边走。没有导航，那么 浏览者在站点内穿梭，岂不是要到处撞壁了么？
整体配色风格，不太符合的图片必须进行色彩上的处理。
页面元素
图25 nike.com -snow
页面元素
3. 图片的清晰度、亮度 图片的清晰度直接影响视觉感观。为了某种特殊
效果，偶尔也会出现模糊的图片。但是一定不能因为
制作上的失误，使得图片压缩过火而导致图片模糊。 另外，同样需要注意到显示器亮度对图片的影响。 假如使用较暗的显示器制作了黑色网页，到他人机器 上显示可能变成了灰色，同时页面整体效果被破坏得 一塌糊涂。
页面元素
图20 HALFPROJECT
页面元素
4. 分辨率问题
页面的分辨率一直都是设计师处理页面布局时感到 比较头疼的一个环节。背景图的应用可以帮助我们解决 一部分有关分辨率的问题。 以图21～23为例，我们可以看到当显示器分辨率不
同的情况下，竖条色块在重复使用的时候，把空白的区
域填充完整，使得整个页面即使在分辨率很大的情况下， 依然能保证页面整体风格和页面布局的完整性。
页面元素
● 下拉菜单式的导航设计(见图9)是时下最流行的 导航设计之一。如果把它作为整个站点的导航，会让 人有不开放感。导航也有属于它的表情，把导航的位 置摆正确，让导航的风格明了化，是非常重要的。
页面元素
图9 下拉菜单式
页面元素
● 另外，不是所有的网站都需要导航。一些区域 排版的网站把内容放置在小的区域内，点击该区域即
页面元素
导航既是网站路标，又是分类名称，是十分重要 的。导航栏应放置到明显的页面位置，让浏览者在第 一时间内看到它并作出判断，确定要进入哪个栏目中 去搜索他们所要的信息。导航栏的设计根据具体情况 可以有多种变化，它的设计风格决定了页面设计的风
格。反过来，设计师已经大致上有了网页设计的模式，
也可以按照模式的方向去把握导航的风格。
或者把新闻信息区挪上，这样便可以打破网页结构模
式，设计出与众不同的页面来。如图2的导航，不规则 长宽，颜色各异，充分利用了页面设计的结构，页面
格局精巧漂亮。
页面元素
图2 不规则导航
页面元素
● 门户类、商业类站点，通常会有很多频道，加 起来十几个，足够双排。横排导航和竖排导航比较起 来，横排给人感觉上占页面空间较小，所以此类站点 多选择横排导航。灵活处理导航的位置，可以是置顶， 也可以位于广告条之下，如图3所示。
页面元素
图21 li-li.net 800×600
页面元素
图22 li-li.net 1024×768
页面元素
图23 li-li.net 1152×864
页面元素
5. 有信息内容的页面上的背景图
在含有信息内容的页面上要加背景图片时应注意： ● 背景与主体明度对比为3:1到5:1之间为宜。 ● 淡色系列的背景有助于整体和谐。 ● 淡色材质背景为佳，能与主题分离之浅色标志
页面元素
图15 U74 v2
页面元素
1.3 背景图
1. 渐变色背景 图16所示是著名的MONSON国际滑雪板设计比赛 的官方站点，页面设计十分柔和，不落俗套。这当中， 很大功劳来自网站背景图。该背景图是由“蓝天”渐 变到“白雪覆盖的大地”，不仅紧扣主题，色彩也十 分鲜亮，使人感觉清爽，感官愉悦。再如图17中的 “The jump plane club”跳伞俱乐部的网站，背景是由深
时候，就能选择.jpg格式，不用担心文字压缩时会模糊，
图片的字节数应该会小一些。
页面元素
图19 srf.stn…2002版
页面元素
● 使用CSS来控制背景图，在制作上会比较规范。
把整张背景图处理得比较好的网站是： HALFPROJECT (http://www.halfproject.com/ )，在优化 大张背景图的制作上，我们可以借鉴它(见图20)。