网页规划设计

《网页规划设计》由会员分享，可在线阅读，更多相关《网页规划设计（27页珍藏版）》请在金锄头文库上搜索。

1、1第 3 章 网页规划设计本章要点本章要点 网页的规划设计是网站开发的重点，它直接影响到网站的运转。网页的规 划设计除直接与网页的版面和多媒体设计有关之外，还与网页的开发设计技术密切相关。目 前网站中的内容不仅是一些静态网页，更多的是以交互方式出现的动态网页。本章着重论述 网页规划设计的基本知识、原则和应注意的问题。本章内容的学习可结合对一些不同结构布 局、不同风格网页的鉴赏、分析来进行。3.1 网页的设计原则3.1.1 网页设计的基本原则通过第 2 章的学习，我们已经了解了网站设计的一些基本原则，这些原则也是我们在网 页设计时应该遵循的原则。特别是总体设计原则和突出主题原则，以及风格一致性问

2、题和链 接设计问题是我们在网页设计中应该注意的。 (1) 网页命名要简洁由于一个网站不可能就是由一个网页组成，它有许多子页面，为了能使这些页面有效地 被链接起来，网页开发者最好给这些页面起一些有代表性的而且简洁易记的网页名称。这样 既会有助于以后方便地管理网页，又会在向搜索引擎提交网页时更容易被别人检索到。 (2) 主页设计主页作为网页文件的第一页，在整个网页文件中具有举足轻重的作用。主页要能体现网 页文件的总体概念，使人一目了然，而且应该集中以下各级的链接，使用户可以迅速转入感 兴趣的网页。主页的设计应力求布局合理、美观大方，又不失生动活泼，能够吸引浏览者的 注意力。 (3) 网页要易读这就

3、意味着需要规划文字与背景颜色的搭配方案，不要使背景的颜色冲淡了文字的视觉 效果，也不要用复杂的色彩组合，让用户很费劲地浏览网页。此外，网页的字体、大小也是 需要考虑的因素。 (4) 合理设计视觉效果视觉效果对于网页来说是很重要的，它主要体现在网页结构和排版上。要善用表格来布 局网页，不要把一个网站的内容像做报告似地罗列出来，要注意多用表格把每个网页内容的 层次性和空间性突出显示出来，使人一眼就能看出网页的重点所在。3.1.2 网页设计中应注意的问题在设计网页时要注意下面的一些事项： (1) 控制页面的总规模 以 28.8Kbps 的 Modem 为例，按每秒 3KB 的速度下载，如果整页有 5

4、KB 的 HTML 代 码和 30KB 的图像，下载该页大约需要 12 秒，这一般能满足访问者的要求。所以，在设计 时应充分考虑这种情况，把网页文件尽量做小。 (2) 考虑用户终端用户可能通过各种设备访问网页，如掌上电脑、手机。由于无法确定用户屏幕的分辨率，2所以需要设计出与分辨率无关的网页。 (3) 分解大型表格 尽可能避免用大型表格，因为浏览器必须等待整个表格的内容全部到达客户端，才能显 示这个表格的内容，而文本或图像则是一边下载一边显示。如果页面中必须使用表格，可将 大表格分解成若干小表格，浏览器下载后面的表格时，客户可以阅读已经下载完的前一个表 格。用客户浏览信息的时间去代替等待下载的

5、时间，这一技巧在任何时候都适用。 (4) 尽量少用图片来叙述内容 为了解决不同的语言平台上不能正常显示本国文字的问题（比如简体中文平台不能显示 BIG5 码的文字信息） ，有些设计者将本国文字的叙述内容用图像来表示，而不用文本，这样 虽然解决了因内码不同导致的乱码问题，但却给页面增加了负担，因为同样的文字内容，用 文本存储比用图片小得多。另外，一些文字性的图像按钮也应尽量少用，如果必须要用，也 应包含 Alt 解释文本，这样即使客户关闭了浏览器的图像显示功能，也可以明白按钮的意思。(5) 标记图像的大小 在 HTML 代码中，最好标记出图像的显示高度和宽度，在下载页面时，浏览器会按这 个高度和

6、宽度留出图像的位置，在图像下载完毕之前及时地显示其周围的文字内容。否则， 让浏览器按图像本身的高度和宽度显示，那么只能等待图像全部下载完毕后，才显示图像及 其周围的其他文字信息，这将造成客户的等待。 (6) 重用图像 如果多次使用同一图像文件，客户端浏览器的 Cache 对此有所帮助。浏览器将从它的 Cache 中找出先前下载的那个图像文件并调入显示，而无需再从 Web 站点上下载，即使它 们不在同一页面中，这样调入图像就不受带宽的约束。因此各页面的背景图案可使用同一图 像文件，既统一了页面的风格，又可节省图像下载的时间。如果再次调入的图像文件只在尺 寸上有点变化，那么使用图像高度和宽度标记（

7、Tags）即可改变图像的尺寸。 (7) 充分考虑用户的浏览器必须考虑用户的浏览器软件，最好使用所有浏览器都可以阅读的格式，这样能使大多数 人都可以无障碍地浏览网页。不要采用只有部分浏览器可以支持的 HTML 格式或技巧。若 想要展示自己高超的技术又不想放弃用户，可考虑在主页上设置几种不同的查看模式选项， 供浏览者自行选择。 (8) 选择合适的格式 JPEG 格式是网上非常流行的图像格式，它对于大型图像的压缩率特别高，而 GIF 格式 更适合小图像和艺术线条一类的图像。通常情况下，对于同样内容的 4KB 以下的图像文件， GIF 格式比 JPEG 格式效果更好。 (9) 减少图像的数目不要使用太

8、多的图像文件。图像文件的数量和大小对页面是很重要的，因为每下载一个 图像文件，浏览器都将向 Web 服务器请求一次连接，所以图像文件越多意味着页面下载的 时间越长。可以尝试用一个图像代替多个分散的小图形（如多个按钮） ，从而尽可能地减少 图像文件的数目。 (10) 对大型图像的处理 当页面必须有大型图像时，有两种处理方案可供参考：其一，建立一个缩略图图像文件 置于主页中，将它链接到原始的大型图像；其二，先创建一个同原始图像一样大小的但降低 了色彩和分辨率的低品质图像文件，让该图像文件首先下载。这种方法的优点是使客户不需 下载大型图像文件，就能快速地了解到图像的大概内容。 (11) 使用 JAV

9、Ascript 3能用 HTML 和 JAVAscript 完成的事情，最好不用 JavaApplet 和 ActiveX 来做。很少的 JAVAscript 代码就可在 4.0 以上版本的 Internet Explorer 和 Navigator 浏览器上做出惊人的效 果来，它比同样大小的 Java/ActiveX 或动态 GIF 文件要节省更多的下载时间。 (12) 尽量少用背景音乐 虽然目前版本的 HTML 语言具有在网页中加入背景音乐的功能，但它会降低网页下载 到客户端的速度。如果一定要加入背景音乐，那么音乐文件最好选用 MIDI 格式，而不用 WAV 格式。 总之，网页设计者应该对

10、自己的页面精雕细刻，尽可能减少每一个字节，以提高网页下 载的速度，千万不要用庞大的网页去考验客户的耐性。3.2 网页的视觉体现网页的设计就是对各构成要素进行视觉的关联与配置，使这些要素和谐地出现在一个网 页中，相辅相成，使其在构成上形成具有活力的有机组合；同时根据视觉心理的特点，合理 安排信息的视觉流程顺序，使各构成要素保持合理的秩序性，创造一种统一的视觉效果，吸 引访问者的注意力并引导他们正确而有效地浏览信息。3.2.1 网页的视觉构成(1) 视觉流程与视觉的形成视觉的形成是由人类的视觉特性所决定的。因为人眼的生理构造晶体，只能产生一个 焦点，而不能同时把视线停留在两处或两处以上的地方，依照

11、先看什么、后看什么、再看什 么的顺序进行。 人们在阅读一种信息载体时，视线总有一种自然的流动习惯，普遍都是从左到右，由上 到下，由左上方沿着弧形线向右下方流动，其注意值随着下移逐渐递减。在此流动线上的任 何点，都会比流动线外的任何点明显。我们把这种对作品视觉顺序感受的无形流动线称为 “视觉流程” 。 视觉流程的运用是平面设计广泛涉及的一个重要课题。就整个网页而言，这就要求在页 面的设计上，能够巧妙运用视觉流程对视觉进行导向作用，对不同性质的信息作有序处理， 从而引导人们的视线按照设计意图更有效地接受信息。 心理学的研究表明，在一个平面上，上半部让人轻松和自在，下半部则使人稳定和压抑。 同样，平

12、面的左半部让人轻松和自在，右半部会让人稳定和压抑。所以平面上方的视觉诉求 力强于下方，左侧的视觉诉求力强于右侧。这样平面在上部和中上部被称为“最佳视域” ， 也就是最优选的方位。在页面设计中突出的信息，如主标题或标志一般安排在这些方位上。 在一个纵向长方形片的中心线上，水平画出三条等距离的平行线，使中心线上出现三个 等距离的“焦点” ，当人们的视线在这三个焦点上来回移动时，便发现第一个焦点（中心线 上部分处）最为引人注目。这就是片面最佳的“焦点”方位，即视觉中心。而围绕这个最佳 焦点，人的注意力将放射状地由中心向外围平缓递减，这就是片面的最佳视域区。在设计中， 这一最佳视域区用来摆放大量信息中

13、最具说服力、最需要传达的信息，以便在视觉流程的一 开始就能吸引观察者的视线。当然除了位置的关系外，形成视觉中心的原因还有很多，如： 大面积聚集设计（包括文字、图形、色彩）容易成为视觉中心；各种对比关系强烈的图形颜 色容易成为视觉中心，三个以上图形中的特异形和完整形也容易成为视觉中心等。 视觉中心是一种感觉而非数学公式，只要符合人们认识过程的心理顺序和思维发展的逻 辑顺序，就可以灵活多变地运用。通过各种巧妙设计，又可以自行改变其视线流向。如平行4线可使视线左右流动；垂直线可使视线上下流动；倾斜线可使视线不稳定流动。当相同或相 近的基本形状重复以相同方向组合设计时，视觉流程会统一有序地按节奏流动。

14、如果在一行 标题或图形上添加一至两根线或色块，此标题或图形会醒目，视觉流程便加速。因此在进行 网页的设计时，应遵循以下构成原则： 1)内容与形式表现必须统一和有序，形式表现必须服从内容要求，在造型上各构成要素 规格化的设计样式要统一。 2)必须考虑网页上各构成要素之间的视觉流程，能自然有序地达到信息诉求重点的位置， 突出主题。 3)突出主题要素。必须在众多构成要素中突出一个清楚的主体，它应尽可能是阅读时视 线流动的起点。如果没有这个主体要素，浏览者的视线将会无所适从，或者导致视线流动偏 离设计的诱导路线。此外在设计中还要以种种标示来引导阅读。当然这些引导很多是隐讳含 蓄的暗示，有“从这里开始看

15、起”的含义，逐步诱导访问者按视觉流程的设计进行视线流动。4)注意网页设计中的空白处理。空白的处理对提高网页的视觉效果有极为重要的意义。 所谓布局实际上就是对于空白的精心策划，传统布局理论中的“谋篇布局” 、 “计白守黑” ， 说明布局的要旨在于“计白” ，也就是对空白的规划。它不仅能使网页设计流畅明快，疏密 有序，布局清晰，而且在视觉上有强烈的集中效果，有利于突出要表现的重点。 5)注重整体的对比因素，设计中各构成要素在组合时，要注意其结构形态的轻重、大小、 虚实、多少等对比因素，加强视觉力度，以强化页面的整体吸引力。 6)在视觉上着力强调网页的诉求重点。在设计中，从大小、位置、虚实、形态上予

16、以突 出，能引起人的兴趣，从而产生愿意继续看下去的效果。 7)注意提高网页信息内容的视读性。设计中要注意主要信息内容的视觉效果。对信息文 字的字体形态、大小变化及字距行间的排列及字的高度作出适当的处理，使其集中紧凑，流 动有序而不松散杂乱。 8)创造一定的韵律感。它反映在网页设计中利用有力的线条、形体及色彩形成一种有节 奏性的律动感，能引导人的视觉以一种流畅而有停顿的方式运动。既有视觉的连续性又有间 歇性，使人能够抑扬起落地浏览整个网页，阅读时感到轻松而又富于韵味。 (2) 点、线、面的认识和使用点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本设计语言。网页设计实 际上就是如何经营好三者的关系，因为不管是任何视觉形象或者版式构成，归结到底，都可 以归纳为点、线和面。因此，网页的设计，从某个意义上讲是经营点、线、面。当内容或形 态庞杂时，必须把其简化成点、线、面。文字、图形、色彩是构成网页设计的三大要素。三 大要素的抽象就是点、线、面。它们彼此交织、互相烘托、有序地构成了缤纷的网页世界。 1) 点 在几何学里，点只有位置而无大小，是线的开端和终结或两线的相交处。