第5章网页可视化设 计 从视觉上看,每个网页都是由若干计算机屏幕组成的,而把众多的文字、图像、动画等多 媒体元素合理地编排在一个个屏幕上,就是版面布局的任务。同时,作为一个有内涵的视觉 产品,页面的色彩搭配和艺术设计也是非常重要的环节。从实践中归纳得到的原则有助于 我们少走弯路,当然也要注意与时俱进。 5.网页的版面布局 1 网页的版面布局是网页设计最基本、最重要的工作。虽然网页内容很重要,但只有当网 页布局和网页内容成功结合,并将文字、图片等网页元素按照一定的次序合理编排和布局, 使它们组成一个有机的整体后,网页才会受人喜欢。 5.1 网页版面布局概述 1. 1. 网页版面布局的基本概念 版面指从浏览器看到的一个完整的页面。布局是指以最适合浏览的方式将图片和文字 等网页元素排放在页面的不同位置。版面布局也是一种创意,但要比站点整体的创意容易, 也有一定的规律可循。可以按约定俗成的标准或大多数访问者的浏览习惯进行设计,也可 以创造出自己的设计方案,对于初学者,最好先了解以下概念。 1)页面尺寸 页面尺寸由高度和宽度构成,它会受到显示器大小、分辨率及浏览器的影响。高度是可 以向下延展的,它是能给网页增加更多内容(尺寸)的唯一方法。一般对高度无限制,原则 上,内容少则尽量控制在一屏以内,内容多则尽量不超过三屏。即使是一屏,高度也没有固 定值,因为每个人的浏览器的工具栏不同,有的浏览器的工具栏被插件占了很多空间。 网页的宽度主要分两种:自适应宽度和固定宽度。自适应宽度是指内容区域宽度跟随 浏览器变化;固定宽度是指内容区域宽度固定。自适应宽度的设计方法会成为潮流,它的优 点是:根据用户窗口大小的不同做出改变,在一定宽度范围内提供稳定的视觉体验,比较适 合以图片为主的网页。缺点是:对老旧和非标准浏览器的兼容性较差,对产品定义和设计 能力的要求较高,对页面做出调整时需要同时改变多种尺寸下的布局;另外,自适应宽度的 设计方法不适合初学者,它要求对前端架构和CSS 有一定的了解。固定宽度的设计方法可 以提高开发速度与效率,同时在浏览器兼容方面表现得更好,比较适合以文字为主的网页。 如果采用固定宽度的设计方法,不仅要考虑显示器分辨率的发展,还要考虑目标客户的 终端分辨率的使用情况,可以以网站主流用户群使用的分辨率的百分比决定。目前,分辨率 在1024 像素以下的设备已经很少了,重点考虑1024 像素×768 像素、1920 像素×1080 像 素的情况。下面给出一些常见的做法。 第5章网页可视化设计 (1)分辨率为1024 像素×768 像素,将网页宽度设置在1002 像素以内就不会出现水平 滚动条。也可以将宽度设成960 像素,这时两侧留点空白,视觉上更舒服。 (2)分辨率为1920 像素×1080 像素,将网页宽度设置在1200 像素以内时两侧空白更 大,视觉上更舒服,也方便做一些浮动层的设计。 2)整体造型 造型就是创造出来的物体形象,这里指页面的整体形象,这种形象应该是一个整体,图 形与文本的接合应该是层叠有序的。虽然显示器和浏览器都是矩形,但页面的造型可以充 分运用自然界中的其他形状以及它们的组合,如矩形、圆形、三角形、菱形等。 对于不同的形状,它们代表的意义是不同的。比如矩形代表正式、规则,很多互联网服 务提供者和政府网页都以矩形作为整体造型;圆形代表柔和、团结、温暖、安全等,许多时尚 站点喜欢以圆形作为页面整体造型;三角形代表力量、权威、牢固等,许多大型的商业站点为 显示它的权威性,常以三角形作为页面整体造型;菱形代表平衡、协调、公平,一些交友网站 常运用菱形作为页面整体造型。虽然不同的形状代表不同的意义,但目前的网页制作多数 是融合了多个图形设计的,只是某种图形的构图占比多一些而已。图5-1所示为庐山网的 设计,它融合了矩形、曲形、圆形等多种图形。 图5- 1 多种图形的融合设计 3)网页结构 一个页面通常由页头、页体和页脚三部分组成,如图5-2所示。 115 网页设计与制作教程(第4版) 图5-2网页结构 (1)页头:页头也叫页眉,作用是定义页面的主题。页头是整个页面设计的关键,它涉 及下方的更多设计和整个页面的协调性。页头常用来放置站点名字的图片、公司标志以及 旗帜广告。 (2)页体:页体是网页的核心部分,由各种网页元素(包括文本、图片和多媒体等)按照 一定的布局方式组合而成。 .文本:文本在页面中都是以行或者块(段落)的形式出现的,它们的摆放位置决定了 整个页面布局的可视性。 .图片:图片和文本已成为网页的两大主要构成元素,不可或缺。如何处理图片和文 本的位置成了整个页面布局的关键。 .多媒体:除了文本和图片,还有声音、动画、视频等其他网页元素。随着用户对网页 效果的不断追求,它们在网页布局中起到的作用越来越大。 (3)页脚:页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制作者或 者公司信息以及版权声明的地方。 2. 网页版面布局技术 网页布局的常用技术有表格布局、框架布局以及Div+CSS 布局。 (1)表格布局:表格布局已经成为一个标准,随便浏览任一站点,它们绝大多数是用表 格布局的。表格布局的优势在于它能对不同对象加以不同处理,而又不用担心不同对象之 间的影响。表格在定位图片和文本上比CSS 更加方便。表格布局的缺点是当用了过多表 格时,页面下载速度会受到影响。对于表格布局,可以随便找到一个站点的首页,然后将其 116 第5章网页可视化设计 保存为HTML 文件,利用网页编辑工具Dreamweaver打开它,就可以看到这个页面是如何 利用表格进行布局的。 (2)框架布局:可能是因为兼容性问题,框架结构的页面在一开始并不被人喜欢。但 从布局上考虑,框架结构不失为一个好的布局方法,它如同表格布局一样,可以把不同对象 放置到不同页面加以处理,还可以在各个页面之间建立一定的联系,这是表格布局不能实现 的。因为框架可以取消边框,所以一般来说不会影响整体美观。 (3)Div+CSS 布局:Div+CSS 是指提倡使用Div代替表格布局,然后利用CSS 单独 控制各种布局元素的显示样式。CSS 对于初学者来说显得有些复杂,但它的确是一个好的 布局方法,曾经无法实现的想法利用CSS 都能实现。Div+CSS 布局具有很多优点:大大缩 减页面代码量;实现表现和内容相分离;方便修改与维护;页面加载速度更快。 3. 网页版面布局的原则 (1)主次分明,中心突出。在一个页面上,必须考虑视觉的中心,这个中心一般在屏幕 的中央或者中间偏上的部位。因此,一些重要的文章和图片一般可以放置在这个部位,视觉中 心以外的地方就可以安排稍微次要的内容,这样在页面上就突出了重点,做到了主次有别。 (2)大小搭配,相互呼应。较长的文章或标题不要编排在一起,要有一定的距离;同样, 较短的文章也尽量不要编排在一起。对待图片的安排也是这样,要互相错开,造成大小之间 有一定的间隔,这样可以使页面错落有致,避免重心的偏离。 (3)图文并茂,相得益彰。文字和图片具有相互补充的视觉关系,页面上文字太多,就 会显得沉闷,缺乏生气;页面上图片太多,缺少文字,必然会减少页面的信息容量。因此,最 理想的效果是文字与图片密切配合,互为衬托,既能活跃页面,又能使主页有丰富的内容。 4. 网页版面布局的步骤 网页版面布局分为以下几个步骤。 (1)构思并绘制草案:根据网站内容的整体风格设计版面布局。新建的页面就像一张 白纸,可以尽可能地发挥想象力,将想到的“景象”画上去,可以用一张白纸和一支铅笔,也可 以用作图软件Photoshop等工具实现。这个阶段不要讲究细节,只要有一个轮廓即可。当 然也可能有多种想法,尽量把它们都画出来,然后进行比较,采用一种比较满意的方案。 (2)初步填充网页内容:这一步就是将确定需要放置的功能模块放到网页中,例如网 站标志、广告条、菜单、导航条、友情链接、计数器、版权信息等。这里必须遵循上述版面布局 的原则,将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置,然后再考虑次要模 块的摆放。 (3)细化:在上一步的基础上精细化、具体化内容。设计者可以利用网页编辑工具把草 案做成一个简略的网页,当然,对每种元素所占的比例也要有一个详细的数字,以便以后修改。 经过以上3步,网页布局已经初具规模了,让其他人员观看并提出建议,再不断修改,一 个网页的版面布局就完成了。 5.2 网页版面布局的方法 1. 网页版面布局大致可分为“国”字型、拐角型、“三”型、对称对比型、标题正文型、框架型、 封面型、Flash型等,下面分别介绍。 (1)“ 国”字型:也称“同”字型或“口”字型,是一些大型网站喜欢的类型,布局结构如 117 网页设计与制作教程(第4版) 图5-3所示。最上面是网站标志以及横幅广告条,接下来就是网站的主要内容,左右分列两 小条内容,有时左面是主菜单,右面放友情链接等;中间是主要部分,与左右一起罗列到底, 最下面是网站的一些基本信息、联系方式、版权声明、广告等。这种结构在网上最常见,其优 点是能充分利用版面,信息量大,缺点是页面拥挤,不够灵活。 图5- 3 “国”字型的布局结构 “国”字型布局结构的网页效果如图5-4所示。 图5-4“国”字型布局结构的网页效果 图5-5拐角型的布局结构 (2)拐角型:也称“厂”字型,这种结构类型与“国”字型其实只有形式上的区别,非常相 似,上面也是“横条网站标志+广告条”,左侧是一个窄列链接等, 右侧是很宽的正文,下面也是一些网站的辅助信息,布局结构如 图5-5所示。拐角型是网页设计中用得最广泛的一种布局方式, 这种布局的优点是页面结构清晰,主次分明,是初学者最容易上 手的布局方法。缺点是规矩呆板,如果不注意细节色彩,那么很 容易让人“看之无味”。如果没有下面的网站辅助信息栏的结构, 拐角型有时又称T形。拐角型布局结构的网页效果如图5-6 所示。 118 第5章网页可视化设计 图5- 6 拐角型布局结构的网页效果 (3)“ 三”型:“ 三”型结构的特点是使用横向的两条色块将页面整体分割为三部分,色 块中大多放广告条,网页效果如图5-7所示。 (4)对称对比型:对称对比型是左右对称或者上下对称的一种布局方法,一半深色,一 半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是不易将两部分有机结合,网页 效果如图5-8所示。 (5)标题正文型:标题正文型的最上面是标题或类 似的一些内容,下面是正文,比如一些文章页面、通知文 件或注册页面等,网页效果如图5-9所示。 (6)框架型:框架型又分为左右框架型、上下框架 型、综合框架型,如图5-10 所示。 左右框架型是指左右分别为两页的框架结构,一般 左面是导航链接,有时最上面会有一个小的标题或标志, 右面是正文,大部分大型论坛都喜欢采用这种结构,一些 企业网站也喜欢采用这种结构。这种类型结构非常清 晰,一目了然,网页效果如图5-11 所示。 上下框架型与左右框架型类似,区别仅在于上下框 架型是一种上下分为两页的框架结构。 综合框架型是左右框架型和上下框架型两种结构的 结合,是相对复杂的一种框架结构,较为常见的是类似于 拐角型的结构,只是额外采用了框架结构。图5- 7 “三”型布局结构的页面效果 119 网页设计与制作教程(第4版) 图5- 8 对称对比型布局结构的网页效果 120 图5- 9 标题正文型布局结构的网页效果 第5章网页可视化设计 图5-10 框架型的布局结构 图5-11左右框架型布局结构的网页效果 (7)封面型:也称POP 型。这种结构常用于时尚类站点和个人网站的首页,大部分为 一些精美的平面设计结合一些小动画,放置几个简单的链接或者仅是一个“进入”的链接,甚 至直接在首页的图片上放置栏目链接,网页效果如图5-12 所示。这种结构的优点是美观、 吸引人,缺点是加载速度有时比较慢。 图5-12 封面型布局结构的网页效果 121 网页设计与制作教程(第4版) (8)动画型:动画型与封面型类似,与封面型不同的是,动画型的动画功能强大,页面 表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体,网页效 果如图5-13 所示。 图5-13动画型布局结构的网页效果 以上总结了一些常见的网页版面布局方式,其实还有许多别具一格的布局结构,关键在 于创意和设计。还可以结合自己的需求综合各种布局模式,创建符合自己想法的版面,例如 图5-14 是一个首页布局的草图,它的版面设计过程是先根据具体需要确定在首页上放置的 内容模块,然后在纸上画出首页布局的草图,设计完成后再根据实际情况进行调整并最终 定案。 122 图5-14 首页布局规划的草图 第5章网页可视化设计 5.网页的色彩运用 2 色彩是艺术表现的要素之一。在网页设计中,网站给人的第一印象来自于视觉,因此, 确定网站的色彩相当重要。不同的色彩搭配会产生不同的效果,从而使网站给人以不同的 视觉效果,吸引访问者的注意力。色彩的心理效应发生在不同层次中,有些属于直接刺激, 有些需要通过间接的联想,更高层次则涉及人的观念、信仰。总之,要根据和谐、均衡和重点 突出的原则将不同的色彩进行组合,搭配出美丽的页面。 2.网页色彩概述 5.1 1. 色彩的基础知识 颜色是因光的折射而产生的。红、黄、蓝是三原色,其他色彩都可以用这3种色彩调和 而成。任何色彩都有饱和度和透明度的属性,属性的变化会产生不同的色相,所以可以制作 出上百万种色彩。 颜色分为非彩色和彩色两类。非彩色是指黑、白、灰这3种系统色。彩色是指除了非彩 色以外的所有色彩。网页制作是用彩色好还是非彩色好呢? 研究表明:彩色的记忆效果是 黑白色的3.5倍。也就是说,在一般情况下,彩色页面较完全黑白的页面更加吸引人。 在长期的生活实践中,自然界的各种色彩会给人留下不同的印象,产生不同的心理感 觉。下面介绍常见色彩的含义。 (1)红色是暖色调,性格刚烈而外向,是一种对人刺激性很强的颜色,是最引人注目的 色彩,具有强烈的感染力。红色容易引起人的视觉注意,也容易造成视觉疲劳,它不仅能使 人兴奋、激动、紧张、冲动,也常伴随着灾害、事故、战争、流血、伤亡。在我国,红色具有特殊 的象征意义,所以经常被用在学校、党、团等网站中。 红色适合与多种颜色搭配,例如,在红色中加入少量的黄色可以使页面给人以强烈的热 力,趋于躁动、不安;在红色中加入少量的蓝色可以使红色的热度稍微减弱,趋于文雅、柔和; 在红色中加入少量的黑色可以使页面色彩的性格变得沉稳,趋于厚重、朴实;而在红色中加 入少量的白色可以使页面色彩的性格变得温柔,给人含蓄、羞涩、娇嫩的感觉。 (2)橙色是暖色调中给人温暖感觉最强烈的一种颜色,其性格活泼,使人兴奋,并具有 富丽、辉煌、炽热的感情意味。橙色只有在发冷、深沉的蓝色中才能充分发挥出其具有的太 阳般的光辉。 在橙色中混入少量的蓝色能够形成强烈的对比,有一种紧张的气氛;而在橙色中混入少 量的白色可以反映出焦虑、无力的感觉。 (3)黄色也是暖色调,由于过于明亮,容易给人以冷漠、高傲、敏感的感觉,具有扩张和 不安的视觉印象。黄色是各种色彩中最容易受其他辅助配色影响的颜色,只要在纯黄中混 入少量的其他颜色,就将大幅改变其给人的感觉。黄色能给人带来勇气,还能增强人的食 欲,许多大型快餐店的网站会大量使用黄色。 黄色与其他色彩的搭配性不如红色。在黄色中加入少量的蓝色可以使其高傲的性格趋 向于平和、温润;在黄色中加入少量的红色可以使其转化为有限的热情和温暖;在黄色中加 入少量的黑色可以使其变得成熟、随和又不失刺激。 123