网页设计基础.ppt

1、第8章 网页设计基础(1)认知时的组织原则本章目标 熟悉常见的认知组织原则：图形与背景、接近性、连续性、完整和闭合倾向、相似性、对称性和简化律。掌握4个基本设计原则：紧凑、对齐、重复、对比。掌握如何设计适合扫描的网页。掌握如何设计网站导航。掌握设计页面版式时需考虑的因素：页面比例、网页的分栏、版面率、图版面积和跳跃率。格式塔理论概述 格式塔（gestalt）理论：整体大于其各个部分之和。换句话说，人们把对象理解为一个完整单元，然后才意识到其各个组成部分。这种基本感知理论表明，人类的意识能够组织、简化和综合自己看到的事物。我们正是这样感知和理解身边的事物的。假设整体性是人们感知事物是所追寻的一种

2、方式，那么设计人员的主要目标就是建立统一性。认知时的组织原则 由于现实世界非常复杂，人们在认知时采取了一些通用的策略，或者说组织原则，以便更好的认识这个世界。图形与背景 接近性 连续性 完整和闭合倾向 相似性 对称性 简化律 认知时的组织原则图形与背景 在一个特定的场景中，有些对象突现出来形成图形，有些对象退居到衬托地位而成为背景。一般说来，图形与背景的区分度越大，图形就越可突出而成为我们的知觉对象。例如，我们在寂静中比较容易听到清脆的鸟鸣，在绿叶中比较容易发现红花，在一个静态的天空中容易感知到飞翔的鸟儿。反之，图形与背景的区分度越小，就越是难以把图形与背景分开，例如生物界的拟态和军事上的伪装

3、便是如此。认知时的组织原则图形与背景 要使图形成为知觉对象，不仅要具备突出的特点，而且应具有明确的轮廓、明暗度和统一性。需要指出的是，这些特征不是物理刺激物的特性，而是心理场的特性。一个物体，例如一块冰，就物理意义而言，具有轮廓、硬度、高度，以及其他一些特性，但如果此物没有成为注意的中心，它就不会成为图形，而只能成为背景，从而在观察者的心理场内缺乏轮廓、硬度、高度等。一旦它成为观察者的注意中心，便又成为图形，呈现轮廓、硬度、高度等等。认知时的组织原则图形与背景 但是，有时图形和背景是难以区分的，什么是图形，什么是背景往往取决于我们观察的角度。认知时的组织原则接近性 某些距离较短或互相接近的部分

4、，容易组成整体。认知时的组织原则连续性 连续性指对线条的一种知觉倾向，如图所示，尽管线条受其他线条阻断，却仍像未阻断或仍然连续着一样为人们所经验到。认知时的组织原则完整和闭合倾向 知觉印象会随环境而呈现成最为完善的形式。彼此相属的部分，容易组合成整体，反之，彼此不相属的部分，则容易被隔离开来。把一种不连贯的有缺口的图形尽可能在心理上使之趋合，这就是闭合倾向。认知时的组织原则完整和闭合倾向 完整和闭合倾向在所有感觉中都起作用，它为认知提供完善的定界、对称和形式。例如，对于某些说话很快的人，虽然每句话的最后一部分都被“吃掉”了，但并不影响听众的理解，就是因为听众自动将其“封闭”了。认知时的组织原则

5、 相似性 在认知时，相似的元素会被分为一组。例如，在下图中，人们很容易将其认知为X组和O组，而不是按照“接近性”原则将其分为左右两部分。认知时的组织原则 对称性 对称性是指具有对称边界的区域会被认知为完整的图形，如图所示。认知时的组织原则 简化律 简化律是指人们倾向于用最简单的方式来认知模糊的刺激。例如，在下图中，中图和右图往往会被认知为与左图一样的立方体。谢谢！第8章 网页设计基础(2)4个设计原则设计原则 设计要素是标志、图标、文本块、图片等的组合。设计要素必须合理组织起来，才能产生实际的含义。设计者把这些元素或形式进行组合时，一般要遵循一些基本的原则，以便符合人们的认识和审美习惯。4个基

6、本的设计原则是：紧凑、对齐、重复、对比。设计原则紧凑 紧凑原则指出：应将相关项目成组地摆放在一起，让它们彼此靠近，以便相关的项目看起来更像是一个整体，而非一堆无关的东西。当几个信息彼此相邻时，它们就会成为一个视觉整体而非数个独立的个体单元。在日常生活中也是如此，紧凑，往往意味着关联。设计原则紧凑 紧凑的概念并非意味着所有的信息都要相互靠近。它的基本含义是：逻辑意义上相关联的元素，在视觉上也应该关联。而其他单独的元素或元素组则不应紧凑摆放。项目之间的紧凑或稀疏说明了它们之间相互的关系。紧凑原则在网页设计中的最基本应用就是将信息合理分组，从而使得网页内容更容易被查找到。查看任何一个阅读方便的网站，

7、我们会发现其中的信息往往被分成了若干个合理的板块。设计原则紧凑 使用紧凑原则时的一个技巧是：扫视整个页面，并数一下页面上的视觉单元，即视线停留的次数。如果页面上的单元超过了三至五个（当然这取决于作品），那么某些单独的元素可能可以被编排至一个更为紧凑的组以作为一个视觉单元。设计原则紧凑应该避免的错误：不要因为有空间就把东西堆放在角落或者堆放在中间；避免在同一页上放置过多的独立单元；避免在各个元素之间使用等量的留白，除非每个组都是某个子集的一部分；避免出现让人无法判断其与周围内容关系的大标题、子标题、图片说明文字、图形等，而应通过紧凑感建立元素间的关系。不要为那些不属于同一组的元素创建联系。也就是

8、说，如果它们不相关，应将它们分离开来。设计原则对齐 对齐原则：页面上不能随意放置东西，每一个项目都应当与页面上的其他各项目建立视觉上的联系。在页面上对齐之后，各元素会形成一个更具有凝聚力的单元。即便这些对齐的元素貌似相互分离的，但是实际上会存在一条不可见的线将它们连接在一起，从视觉和意识上给浏览者一个整体的感觉。设计原则对齐 如果在页面上放置了多个元素，必须确保每一元素均与页面上的其他元素存在视觉上的对齐效果。如果有文本行水平地跨越了几个元素，那么应将这几个元素的基线对齐。如果文本有多个单独的块，那么应将它们左对齐或者右对齐。如果有多个图形，那么需要参照页面的其他图形边缘进行对齐。设计原则对齐

9、 页面元素的不对齐是导致文档看起来不舒适的最大因素。人们喜欢观看有次序的东西，有次序的东西给人一种平静、安全的感觉。另外，这也有助于信息的沟通。在任何一幅设计良好的作品中，都可以为对齐的元素绘制对齐线，哪怕页面中包含非常多的视觉分块。设计原则对齐 在设计中，统一是一个重要的概念。想要让页面上所有的元素看上去统一、相关联，就需要在分离的元素之间建立一些视觉联系。即便是这些分离的元素在页面上并不是靠得很近，但是通过它们本身的布局也可以给人以相连、相关，并与其他信息相统一的感觉。任意找到一个设计良好的网页，无论看上去有多杂乱无章，我们都可以在其中找到里面的对齐点。设计原则对齐使用对齐原则进行设计的一

10、个简单技巧就是使用栅格系统。通过让页面元素与栅格对齐，可以确保元素之间的对齐。如果要评价他人的网页，可以延长每条可见或不可见的线条，看是否对齐。设计原则对齐应当避免的错误：避免在页面上使用多种对齐方式，除非有明确的理由。换句话说，不要将一部分文本居中，同时又将另一部分文本右对齐。尽力避免使用居中对齐方式，除非是有意要创建一种更为正式、稳重的外观。设计原则重复 重复原则：请在整个作品中重复设计某些部分。该重复元素可以是粗体字、水平线、特定的项目符号、颜色、设计元素、特定的格式以及空间关系等等它可以是阅读者能从视觉上感知的任何东西。实际上，我们在日常生活中已经见过很多重复原则的应用了。例如，一本书

11、的标题、页眉页脚等都是重复的实例。设计原则重复 重复可以理解为“保持一致性”。重复可以让信息更加条理化，可以为阅读者提供指引，统一设计中各不相同的部分。即便是在单页文档上，重复元素也能创建出精细的连贯性，并将所有元素连成一个整体。如果正在创建的是多个单页文档，且同属于一个综合的整体，那么重复元素的使用就更加关键了。设计原则重复 重复赋予了作品专业感和权威感。重复可以让阅读者感受到有人在进行操控，因为重复很明显是经过深思熟虑之后所做出的设计决定。重复的基本用途是为了统一并增加视觉吸引力。如果一个页面看上去很有吸引力，那么阅读者会更有兴趣进行阅读。实现站点统一的重要元素包括字体大小与样式、页面背景

12、颜色、导航元素位置、超链接样式和布局格式的一致性等。设计原则重复 要避免：过多地重复某一元素，以免使人有厌烦之感或者喧宾夺主之感。应当注意对比的价值。设计原则对比 对比的基本目的是在构图中引入视觉变化，增加总体视觉效果，同时能在不同的元素中构建起一个有组织的层级关系。对比可以在元素之间建立深度与张力，并可以产生戏剧效果和增加可读性。建立简单的对比非常容易。纸上或屏幕上的任何标记都会打破空白空间，从而产生对比。但是，要建立和谐、统一的设计，成功的设计师就要知道如何操纵对比，以便在不同情形中进行不同处理。设计原则对比 将两个不同的元素放在一起就产生了对比。如果两个元素只是稍有不同，那么就不存在对比

13、和冲突。对比原则：如果两个元素不是完全相似，那么请让它们变得不同，真正的不同。在设计中，对比可以表示相反的两个方面，如黑与白、厚与薄、大与小。简单地说，设计中的对比就是视觉反差：对点、线、面或形、色、纹理、空间、质量、容量之类的设计要素，在一个构图中进行不同处理。设计原则对比 可以通过很多种方式来实现对比。例如，大、小字体之间的对比；细线条和粗线条之间的对比；冷色和暖色之间的对比；平滑纹理和粗糙纹理之间的对比；水平元素（诸如很长一行的文本）与垂直元素（诸如长而窄的一列文本）之间的对比；宽间距的行与窄间距之间的对比；小图形与大图形之间的对比；等等。在网页设计时，建立适当的对比是实现设计目标的重要

14、手段。例如，在下面的网页中，综合应用了大小、颜色、动静等对比手段，起到了想要的效果。谢谢！第8章 网页设计基础(3)设计适于扫描的网页设计适于扫描的网页 在信息爆炸的今天，已经没有人会去“阅读”网页了，几乎所有人都是在“扫描”网页。因此网页设计者需要为扫描而设计，而不是为阅读而设计。为扫描而设计需要遵循以下原则：在每个页面上建立清楚的视觉层次尽量利用习惯用法把页面划分成明确定义的区域最大限度降低干扰设计适于扫描的网页建立清楚的视觉层次 如果想让页面快速让人理解，最好的方法就是让页面上所有内容的外观都清清楚楚，而且能准确地表述页面内容之间的关系。哪些内容是相关的？哪些内容是其他内容的组成部分？换

15、句话说，每个页面都应该有清楚的视觉层次。设计适于扫描的网页建立清楚的视觉层次一个视觉层次清楚的页面有三个特点：越重要的部分越突出。逻辑上相关的部分在视觉上也相关。逻辑上的包含关系在视觉上应进行嵌套。设计适于扫描的网页使用习惯用法 在我们阅读报纸的时候，会发现每张报纸都用突出、分组和嵌套的方式为读者提供关于报纸内容的有用信息。比如说，这张图片和这个新闻内容是一起的，因为它们位于同一个标题的覆盖范围之下；而那条新闻的内容最重要，因为它采用了最大的标题，最宽的栏目，并占用页面上最突出的位置。日久天长，这些东西都形成了惯例，成为我们生活中自然而然的一部分。例如，在以下纸质报纸的版式中，我们可以很清楚地

16、体会到各种视觉要素的组织原则。设计适于扫描的网页使用习惯用法 我们知道，了解报纸版面的布局和格式的不同用法能让我们更快、更容易地扫描报纸，找到我们感兴趣的新闻故事。还有，当我们在别的城市旅行时，我们知道所有报纸都是采用差不多的习惯用法，因此，了解这些习惯用法可以很容易地阅读任何报纸。实际上，每一种出版媒体都在发展自己的习惯用法，并不断改进这些用法，形成新的习惯用法。Web上已经有很多的习惯用法，大部分是从报纸和杂志中延续过来的，而新的习惯用法也在不断涌现。设计适于扫描的网页使用习惯用法 所有的习惯用法都是从某个人灵光一现的想法开始的，如果这个想法相当不错，其他站点就会效仿，最终，会有足够多的人

17、在足够多的地方见到它，让它变得不言而喻。这个采用过程需要时间，但是和其他事物一样，放在因特网上，它会发展得非常快。例如，现在很多人都很熟悉电子商务站点上的购物车及其使用方法，因此，设计师们可以放心地使用一个购物车图标，而不必加上“购物车”的文字说明。设计适于扫描的网页使用习惯用法关于Web 上的习惯用法，有两点非常重要：它们非常有用。通常，习惯用法因为有用才会成为习惯用法。适当应用习惯用法会使用户在网站之间的访问更容易，不需要花费额外的努力来得到背后的工作原理。这样保证了一种熟悉感，例如，在看到页面左边直达底部彩色背景区域上，有着网站分类清单的链接时，哪怕有时这种熟悉感也会让你感觉到某种似曾相

18、识的单调乏味。设计师通常不愿意利用它们。和使用习惯用法相比，设计师们都面临着很大的诱惑，想要打破习惯用法很大程度上是因为他们觉得网站是请他们来做一些崭新的、与众不同的设计，而不是使用那些原有的东西。设计适于扫描的网页使用习惯用法如果不打算使用一种已有的 Web 习惯用法，设计者必须确认以下两点：这种方法同样清楚，同样的不言而喻，不需要多少学习代价这样就跟习惯用法一样好了。带来很大的价值，因此值得用户付出一点努力来学习这种新方法。如果打算创新，那么必须理解准备换用的方法的价值，而很多设计师都低估了习惯用法提供的价值。一般的建议是，在清楚自己有一个更好的想法（每个人都会叫好）时进行创新，否则请尽量

19、利用习惯用法。设计适于扫描的网页划分明确的页面区域任何一个设计良好的网页都应该能做到这一点：在网页上四处扫视之后，浏览者应该能指着页面上的不同区域说出：“这是我在网站能进行的活动”“这是到今日头条的链接”“这是这个公司销售的产品”“这是他们正在向我们推销的东西”“这是到网站其它部分的导航”设计适于扫描的网页划分明确的页面区域 把页面划分成明确的区域很重要，因为这可以让用户很快决定关注页面的哪些区域，或者放心地跳过哪些区域。对网页扫描所进行的几项初始眼动研究表明，用户很快就会确定页面哪些部分包含有用的信息，然后对其他部分看都不看就像他们根本不曾来过一样。谢谢！第8章 网页设计基础(4)设计导航设

20、计导航网页导航惯例 导航系统实际上是我们日常生活中重要的一部分。不论是一个城市，还是一个建筑物，或者是一本杂志，都有自己的导航系统，有它们自己随着时间发展起来的习惯用法，比如街头指示牌、页码、章节标题等。这些习惯用法指出导航元素的外观和位置，因此我们知道该寻找什么，以及在需要的时候如何找到。把导航元素放在标准的位置可以让我们快速定位，而将它们的外观标准化让我们更容易把它们与别的东西区分开来。52设计导航网页导航惯例 例如，我们总是希望能在街角处找到街头指示牌，而且希望它们是按照常规的指示牌那样工作的。我们也想当然地认为建筑物的名字应该在前门的上方或旁边；在超市里，我们希望能在商品通道的尽头看见

21、标志；在杂志上，我们知道前几页会有目录，在页边的某个地方会有页码，它们看起来也会像目录和页码的样子。设计导航网页导航惯例网站上的导航形成了很多习惯用法（大部分来自已有的印刷品习惯用法）。在一个设计合理的网站中，可能包含以下导航元素：网站ID栏目实用工具“你在这里”指示器下一级栏目页面名称页面导航小字体页脚导航设计导航全局导航 术语“全局导航”是指出现在网站每个页面上的一组导航元素。如果设计得当，全局导航应该始终传达以下信息：“导航部分在这里，其中一些可能会根据您所处的位置有所变化，但它总会出现在这里，也会总是以同样的方式为您服务。”让导航部分在每一页以一致的外观出现在同样的位置，会让浏览者立即

22、确定自己仍然在这个网站上。而且，让导航在整个网站保持一致性也就意味着浏览者只需要了解它一次。设计导航全局导航全局导航“每一页都一样”有以下两个例外：主页。主页和其他页面不一样，它要承担一些不同的任务，所以主页上可以不必使用全局导航。不过，主页上使用与其他页面一致的全局导航也是一种很常见的做法。表单。需要填写表单的页面，全局导航可能会成为不必要的干扰。例如，当用户在一个电子商务站点付费时，设计者可能并不希望用户去做除了填写表单之外的任何事情。对表单页面来说，只要站点 ID、一个回到主页的链接和任何有助于填写表单的实用工具就可以了。设计导航站点标志 网站的站点ID 或标志（Logo）相当于建筑物的

23、名字。在进入一家商场之前，用户只需要在进来的路上看见它的名称就可以了。一旦进入商场，我们就知道自己还待在里面，直到离开为止。但在 Web 上在这里我们的移动方式主要是瞬移我们需要在每个页面上见到网站的名称。57设计导航站点标志 我们希望在页面的上方见到站点ID通常是在左上角，或者至少应靠近左上角。因为站点ID代表了整个网站，也就是说，它在当前站点结构中层次最高。设计导航导航条 主导航条是到达站点主要栏目的链接，也就是站点层次结构的最顶层。它通常位于站点顶部或者左端，偶尔也可能出现在右端。在很多情况下，主导航条中也可以直接包括二级导航，这种菜单式的二级导航在内容比较多的网站上用的很普遍。设计导航

24、实用工具 实用工具是到达网站中不属于内容层次的重要元素的链接，它要么能帮助我们使用站点（例如帮助、站点地图或购物车），要么提供网站发布者的信息（例如“关于我们”、“联系我们”）。设计导航实用工具 对于不同类型的网站，实用工具也有所不同。对于公司网站或电子商务网站，它们可能包括任何以下内容：关于我们 下载 如何购物 注册档案 目录 招聘 搜索结账 论坛 我的 购物车公司信息 常见问题 新闻 登录联系我们 帮助 订单跟踪 站点地图客户服务 主页 新闻稿 店面位置讨论板 投资者关系 隐私声明 你的帐户设计导航实用工具 实用工具一般都位于页面的顶部区域，不同站点的实用工具可能大不相同。设计导航返回主页

25、 全局导航中最重要的元素之一是把我们送回主页的按钮或链接。这使浏览者感到很安全，因为不论迷路到了何种地步，也都能重新开始，就像按一下“重启”按钮一样。有一种惯用法，就是让站点ID同时也作为一个回到主页的按钮。实际上，有经验的上网者在看到站点ID时都会认为它应该带我们返回首页。也可以在主导航或实用工具中包含一个回到主页的链接。设计导航搜索功能 由于搜索的巨大威力和喜欢搜索的用户比喜欢浏览的用户更多，因此除非站点规模非常小而且组织得很好，否则每个页面都应该有一个搜索框或一个链接到搜索页面的链接。而且，除非网站真的不太需要搜索，否则它应该是一个搜索框。记住，大多数用户访问一个新站点时，第一件事就是扫

26、描页面，看有没有一个基本的搜索框。设计导航搜索功能 设计导航页面名称无论是自驾车，还是在一个陌生的城市乘坐公共交通工具，路牌都是给我们指路的最重要元素。好的路牌都有以下特点：路牌标志很大。当你在一个十字路口停下来时，能看清楚下一个十字路口的街牌标志。它们在适合的位置。它们悬挂在你正在行驶的道路上方，所以你只要抬头看一眼就可以了。页面名称就是Web上的路牌。和路牌一样，如果一切顺利，浏览者可能根本不会注意页面名称，但一旦觉得自己可能方向不对时，就需要毫不费劲地看到页面名称来确定方向。设计导航页面名称关于页面名称，需要注意以下四点：每个页面都需要一个名称。和每个拐角都应该有一个路牌一样，每个页面应

27、该有一个名称。页面名称要出现在合适的位置。在页面的可视层次上，页面名称应该出现在涵盖该页内容的位置。名称要吸引人注目。需要结合位置、字体大小、颜色和留白体现出“这就是整个页面的标题”。在大多数情况下，它应是该页面最大的文字。名称要和点击的链接一致。尽管几乎没有人注意到，但每个站点同访问者有着隐含的约定：页面的名称将和我点击并来到这里的链接相匹配。设计导航页面名称设计导航当前位置标志 要抵消网络固有的空间迷失感，其中一种有效的导航方式就是告诉浏览者当前在什么位置，这和购物广场或者公园地图上的“你在这里”指示器作用一样。设计导航当前位置标志 在网页上，这可以用突出浏览者当前的位置来做到。不管是在页

28、面的导航条、列表还是菜单上，通过特殊的显示方式可以快速告诉浏览者当前位置。设计导航当前位置标志设计导航面包屑 实际上，在该网页中还有另外一个告诉浏览者当前位置的导航元素面包屑。和“你在这里”指示器一样，面包屑也告诉了用户当前的位置。有时候它们甚至会包含“你在这里”的字样。设计导航面包屑如果设计得好，面包屑的优越性是不言而喻的。一方面它们不会占用太多空间，另一方面，它们也提供了一种方便，一致的方式让用户可以做最常做的两件事：回退一个层次，或者去主页。设计面包屑时应注意以下原则：把它们放在页面顶端。使用“”对层级进行分隔，因为它在视觉上暗示了沿着层级向前移动的动作。设计导航面包屑 使用小字体，表明

29、它是补充机制。使用了文字“你在这里”，让没有经验的浏览者知道它是什么。将最后一个元素加粗。层级清单中的最后一个元素应该是当前页面的名称，将它加粗正好得到了应有的突出。设计导航网站导航测试 “后备箱”测试 如果这个页面设计良好，当你除去眼罩时，应该能毫不犹豫地回答出以下问题：设计导航网站导航测试 这是什么网站？（站点ID）我在哪个网页上？（网页名称）这个网站的主要栏目有哪些？（主导航）在这个层次上我有哪些选择？（本页导航）我在导航系统的什么位置？（“你在这里”指示器和面包屑）我怎么搜索？（搜索框）设计导航网站导航测试谢谢！第8章 网页设计基础(5)设计版式设计版式 所谓页面版式就是各种页面元素如

30、何布局，从而获得需要的设计效果。页面比例网页的分栏版面率图版面积跳跃率 设计版式页面比例 在设计页面版式时，页面分块的比例是需要考虑的基本因素。黄金分割 对称比 设计版式页面比例“黄金分割”是众所周知的有关比例的概念，这个神奇的比例是“1:0.618”。这个数字在自然界和人们生活中到处可见：人们的肚脐是人体总长的黄金分割点，人的膝盖是肚脐到脚跟的黄金分割点；大多数门窗的宽长之比也是0.618；金字塔、巴黎圣母院、埃菲尔铁塔等著名建筑都有与0.618有关的数据；一些名画、雕塑、摄影作品的主题，大多在画面的0.618处。设计版式页面比例 黄金分割的简化就是所谓的“三分法”原理。由于被黄金分割分成两

31、部分的线条，其中一部分大概是另一部分的两倍，因此将一个整体分成三等份是一种应用黄金分割原理而不需要详细计算的简单方法。在进行页面版式设计时，可以在纸上绘制一个三等分正方形，然后在每个小方形内再三等分，从而得到一张栅格纸。在放置页面元素时，应将其边缘与栅格线对齐，从而获得合理的比例关系。设计版式页面比例 对称广泛存在于自然界和我们的生活中。人在生理上、心理上都习惯喜欢这种和谐的美。对称往往给人以庄严、稳重、典雅之感。设计师们往往在绝对对称的设计中加入一定的不对称因素，或者在不对称的设计中加入对称的因素，集活泼与庄重于一体，从而给人们留下深刻的印象。设计版式网页的分栏 网页的分栏是划分页面区域最基

32、本的手段，页面的版式变化主要通过“栏”的变化来体现的。受计算机显示屏和网站浏览习惯的影响，网站的宽度相对固定，而高度是不固定的，因此网站“栏”的设计主要集中在竖栏的区分上。设计版式网页的分栏 一栏版式是指网页纵向只有一个竖栏的版面结构。这种版式最简单，用户视觉流程就是从上到下，但如果页面要同时传达两项以上内容，这种版式就很难实现了。因此，单栏版式较多用在目的较为单一的页面中。设计版式网页的分栏 二栏版式是指页面纵向有两个竖栏的版面结构。由于其结构简单清晰，又能够解决内容并置的问题，在实际网站中应用非常广泛。设计版式网页的分栏 三栏的版式是指网站纵向有三个竖栏的版面结构，其结构相对复杂一些，但由

33、于能够同时呈现较多的内容，因此是大网站最常用的结构。设计版式版面率 版面率是指页面中文字的面积与版面总面积之比，它主要受文字、图片和留白之间关系的影响。版面率低的网页的给人高雅感，版面率高的网页则信息量大、通俗性强。版面率过低，会带来空间的浪费；而版面率过高则使页面杂乱拥挤。设计者必须要根据网页的功能、内容和性质确定适当的版面率。设计版式图版面积 页面中的图形应广义理解为除了文字外一切有形的部分。图版面积大的页面感觉活泼，适用于艺术性或娱乐性强的网页；反之，则用于更严肃的场合。在一个页面中，图版面积占总面积越多，一般就越吸引人，尤其是那些大图与小图面积对比强烈的页面。在一个页面中，图版面积占总面积越少，图的面积对比越小，则越古典与平稳。设计版式跳跃率 在版面中，单个点面积大小的差异，称为跳跃率。如果从文字大小的角度考虑，跳跃率就是正文和最大的文字标题之比。通过控制页面的跳跃率，可以控制网页的风格。一般情况下，跳跃率低的页面适用于高格调、古典风格的网站，跳跃率高的页面适用于活泼或现代感强的网站。谢谢！