网页设计理论

网页外观

1.不要先决定网页的外观，然後强迫自已去适应它，应该从你的访客对像，你要传达的讯息以及你的制网目标推导出一个最适合的网页架构。 

2. 每页排版不要太疏或用太大的字，尽量避免看你的网页时 要作很大的卷动，要知道在一页的上部分是显眼而宝贵的地方，不要只放著几个粗大的字或图片。

3. 切勿以 1024*768 以上的解像度设计网页。明智的网页设计者是处处照顾浏览者，绝不会炫耀自己有专线、有 19 寸的显示器 等。

4. 不要於每页插入太多的广告牌。相信你亦不喜欢浏览一些贴满广告的网页吧，你要考虑到该页内容与广告的比例，摆放的位置亦很重要，不妨多参考别人的做 法。广告太多，只会令人烦厌。 

5. 不要每页都采用不同的墙纸，以免每次转页都要花时间去下载，采用相同的底色 或墙纸还可增加网页一致性，树立风格。

     6. 底色或墙纸必须与文字对比强烈，易於阅读，这并不是要求你永远使用鲜亮的背景配搭深色的文字，但深色背景常要求与主题配合，有较多的顾虑，若你的网页 是文章式或包含大量文字，不妨在底色与文字的配搭上下些工夫，力求让访者能 舒适阅读你的文章。 

7. 不要把图片白色当透明，要知道别人的作业系统不一定把内定底色设为白色，解 决方法除了真的把该网页的底色设为白色之外，最好还是以图片编辑工具为图片 设好透明颜色。 

8. 太长的一页要使用内部连结，明智的网页设计者是不会让浏览者看网页时作太大的卷动。

一、目标明确、定位正确 

网页站点的设计是企业或机构发展战略的重要组成部分。要将企业站点作为在因特网－－这个新媒体上展示企业形象、企业文化的信息空间，领导一定要给予足够的重视，明确设计站点的目的和用户需求，从而作出切实可行的计划。 

挑选与锤炼企业的关键信息，利用一个逻辑结构有序地组织起来，开发一个页面设计原型，选择用户代表来进行测试，并逐步精炼这个原型，形成创意。 

分析有些网站的效果不如预想的好，主要原因是对用户的需求理解有偏差，缺少用户的检验造成的。设计者常常将企业的市场营销和商业目标放在首位，而对用户和潜在的用户的真正需求了解不多。所以，企业或机构应清楚地了解本网站的受众群体的基本情况，如受教育程度、收入水平、需要信息的范围及深度等，从而能够有的放矢。 
二、主题鲜明、富有特色 

在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。 

网页站点应针对所服务对象（机构或人）不同而具有不同的形式。有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。最好的网页站点将把图形图像表现手法与有效的组织与通信结合起来。 

要做到主题鲜明突出，力求简洁，要点明确，以简单明确的语言和画面告诉大家本站点的主题，吸引对本站点有需求的人的视线，对无关的人员也能留下一定的印象。对于一些行业标志和公司的标志应充分加以利用。 

调动一切手段充分表现网站的个性和情趣，突出个性，办出网站的特色。 

网页站点主页应具备的基本成分包括：

页头：准确无误地标识你的站点和企业标志；  E-mail地址：用来接收用户垂询；  联系信息：如普通邮件地址或电话；  版权信息。 

注意重复利用已有信息，如客户手册、公共关系文档、技术手册和数据库等可以轻而易举地用到企业的网页站点中。 

三、版式编排布局合理 

网页设计作为一种视觉语言，当然要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。 

版式设计通过文字图形的空间组合，表达出和谐与美。版式设计通过视觉要素的理性分析，和严格的形式构成训练，培养对整体画面的把握能力和审美能力。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。 

努力做到整体布局合理化、有序化、整体化。优秀之作，善于以巧妙、合理的视觉方式使一些语言无法表达的思想得以阐述，做到丰富多样而又简洁明了。 

多页面站点页面的编排设计要求把页面之间的有机联系反映出来，这里主要的问题是页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，应讲究整体布局的合理性。特别是关系十分紧密的有上下文关系的页面，一定设计有向前和向后的按钮，便于浏览者仔细研读。 

站点设计简单有序，主次关系分明，将零乱页面的组织过程混杂的内容依整体布局的需要进行分组归纳，经过进行具有内在联系的组织排列，反复推敲文字、图形与空间的关系，使浏览者有一个流畅的视觉体验。 

四、色彩和谐重点突出 

色调及黑、白、灰的三色空间关系不论在设计还是在绘画方面都起着重要的作用。在页面上一定得明确调性，而其它有色或无色的内容均属黑、白、灰的三色空间关系，从而构成它们的空间层次。 

色彩是艺术表现的要素之一，它是光刺激眼睛再传导到大脑中枢而产生的一种感觉。在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。 

利用色彩对人们心理的影响的成果，合理地加以运用。按照色彩的记忆性原则，一般暖色较冷色的记忆性强。色彩还具有联想与象征的特质，如：红色象征火、血、太阳；蓝色象征大海、天空和水面等。所以设计出售冷食的虚拟店面，应使用消极而沉静的颜色，使人心理上感觉凉爽一些。 

在色彩的运用过程中，还应注意的一个问题是：由于国家和种族的不同，宗教和信仰的不同，生活的地理位置、文化修养的差异，不同的人群对色彩的喜恶程度有着很大差异。如：儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在沙漠中的人喜欢绿色。在设计中要考虑主要读者群的背景和构成。 

五、形式内容和谐统一 

形式服务于内容，内容又为目的服务，形式与内容的统一是设计网页的基本原则之一。  画面的组织原则中，将丰富的意义和多样的形式组织在一个统一的结构里，形式语言必须符合页面的内容，体现内容的丰富含义。 

运用对比与调和，对称与平衡，节奏与韵律以及留白等手段，如通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些动感的的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。 

点、线、面是视觉语言中的基本元素，使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。 

点是所有空间形态中最简洁的元素，也可以说是最活跃、最不安分的元素。设计中，一个点就可以包罗万象，体现设计者的无限心思，网页中的图标，单个图片，按钮或一团文字等都可以说是点。点是灵活多变的，我们可以将一排文字视为一个点，将一个图形视为一个点。在网页设计中的点，由于大小、形态、位置的不同而给人不同的心理感受。 

线是点移动的轨迹，线在编排设计中有强调、分割、导线，视觉线的作用。线会因方向、形态的不同而产生不同的视觉感受，例如垂直的线给人平稳、挺立的感觉，弧线使人感到流畅、轻盈；曲线使人跳动、不安。在页面中内容较多时，就需进行版面分割，通过线的分割保证页面良好的视觉秩序，页面在直线的分割下，产生和谐统一的美感；通过不同比例的空间分割，有时会产生空间层次韵律感。 

面的形态除了规则的几何形体外，还有其它一些不规则的形态，可以说表现形式是多种多样的。面在平面设计中是点的扩大，线的重复形成的。面状给人以整体美感，使空间层次丰富，使单一的空间多元化，在表达较含蓄。 

网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。 

六、三维空间指置有方 

网络上的三维空间是一个假想空间，这种空间关系需借助动静变化、图像的比例关系等空间因素表现出来。 

在页面中图片、文字位置前后叠压，或位置疏密或页面上、左、右、中、下位置所产生的视觉效果都各不相同。在网页上，图片、文字前后叠压所构成的空间层次目前还不多见，网上更多的是一些设计得比较规范化、简明化的页面，这种叠压排列能产生强节奏的空间层次，视觉效果强烈。网页上常见的是页面上、左、右、下、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使视觉流程生动而清晰，视觉注目程度高。疏密的位置关系使产生的空间层次富有弹性，同时也让人产生轻松或紧迫的心理感受。 

需指出，随着网页的普及和计算机技术的迅猛发展，人们对网页语言的要求也日益增长。人们已不满足于HTML语言编制的二维网页页面，三维世界的诱惑开始吸引更多的人，虚拟现实要在网页网上展示其迷人的风采，于是VRML语言出现了。VRML是一种面向对象一种语言，它类似网页超级链接所使用的HTML语言，也是一种基于文本的语言，并可以运行在多种平台之上，只不过能够更多的为虚拟现实环境服务。VRML只是一种语言，对于三维环境的艺术设计仍需要理论和实践指导。 

七、多媒体功能的利用 

最大资源优势在于多媒体功能，因而要尽一切努力挖掘它，吸引浏览者保持注意力。因而画面的内容应当有一定的实用性，如产品的介绍甚至可以用三维动画来表现。 

这里需要注意的问题是，由于网络带宽的限制，在使用多媒体的形式表现网页的内容时应考虑客户端的传输速度，或者说将多媒体的内容控制在用户可接收的下载时间内是十分必要的。 

专业网页设计理论

⒈ 网页设计理念

⑴ 内容决定形式
    先把内容充实上，再分区块，再定色调，再处理细节。

⑵ 先整体，后局部，最后回归到整体。
全局考虑，把能填上的都填上，占位置。然后定基调，分模块设计。最后调整不满意的几个局部细节。

⑶ 功能决定设计方向
    看网站的用途，决定设计思路.商业性的就要突出赢利目的；政府型的就要突出形象和权威性的文章；教育性的，就要突出师资和课程。
⒉ 网页配色基本概念

⑴ 白纸黑字是永远的主题，谁都说不出不好来。

⑵ 网页最常用流行色

兰色——蓝天白云，沉静整洁的颜色。

绿色——绿白相间，雅致而有生气。

橙色——活泼热烈，标准商业色调。

暗红——宁重、严肃、高贵，需要配黑和灰来压制刺激的红色，

⑶ 颜色的忌讳

忌脏——背景与文字内容对比不强烈，灰暗的背景令人沮丧！

忌纯——艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。

忌跳——再好看的颜色，也不能脱离整体。脱离群众是自取其辱！

忌花——要有一种主色贯穿其中，主色并不时面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就象领导者一样，虽然在人数上居少数，但起决定作用。

忌粉——颜色浅固然显的干净，但如果对比过弱，整得苍白无力了，就象病夫一样无可救药。
蓝色忌纯，绿色忌黄，红色忌艳

⑷ 几种固定搭配

蓝白橙——蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。

绿白兰——绿为主调。白底，绿标题栏，兰色或橙色按钮或ICON做点缀。

橙白红——橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。

暗红黑——暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。

网页制作界面美观与协调性细则：

1. 长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。

2. 布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间。

3. 按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。

4. 按钮的大小要与界面的大小和空间要协调。

5. 避免空旷的界面上放置很大的按钮。

6. 放置完控件后界面不应有很大的空缺位置。

7. 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观，很少使用超过12号的字体。

8. 前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。常用色考虑使用Windows界面色调。

9. 如果使用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。

10.大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。

11. 界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。

12. 如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。

13. 对于含有按钮的界面一般不应该支持缩放，即右上角只有关闭功能。

14. 通常父窗体支持缩放时，子窗体没有必要缩放。

15. 如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。

16. 设计具有自己独特风格的界面尤为重要。

17. 界面上应有自己的图标。

18. 主界面，最好是大多数界面上要有公司图标。

19. 保持一直的界面风格，如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

三，那么现在到底各种分辨的显示器分别有多少人在使用呢？

我们下面分别列出2008年9月和2007年9月，访问“前沿视频教室”的所有访问者的屏幕分辨统计数据，既可以看出现状，也可以通过比较时隔一年的比较，看出一些发展的趋势。

当然不同的网站一定会有不同的结果，也欢迎其它朋友统计一下你的情况，在留言中贴出来，供大家参考，当然如果网站的访问量太小，数据的准确性也就小一些。下表中统计的两列总访问者数量分别大于两万和三万人。

 
前沿视频教室 2008.9 访问者屏幕分辨率统计

从中可以看出：

1：第一名的1024*768分辨率的显示器目前占55.63%，说明他仍然是我们目前在设计网页时，考虑的主要目标，同时可以看看出，一年时间从73.57%降至55.63%，说明新买显示其的人，已经不会购买这么小的显示了，只是这些现存的大量显示器，在很长的时间内，仍然会占据着很大的比例，因此在未来很长时间内，我们都需要照顾到这些显示器的存在。

2：更大分辨率的显示器增长非常迅猛，显然与现在液晶显示器的价格飞降、以及笔记本电脑的迅速增加有关。目前位居第二的1280*800就是14吋宽屏笔记本的显示分辨率，第三位的1440*900则是19吋宽屏台式液晶显示器的标准分辨率。这二者都在一年间占有率大涨，增长了1~2倍。

3：排名第4、5的分别是1280×1024和1152×864，他们的比例已经很小了，前者是17吋和19寸非宽平液晶显示的标准分辨率，后者通常是17寸等不太大的CRT显示器的分辨率。二者所占比例都较去年稍有增长，说明他们并不像宽屏显示那么受欢迎，但是还有一些偏好者的喜爱。

4：排名第6名的1680*1050则是2008年的新潮流，它是20、21、22寸的宽屏显示器的标准分辨率，可以看出所占比例虽然不大，但是增长一定是非常迅速的。

5：排名第7名的则是古董级的800*600了，相信它会很快离开我们的视野。

6：排名第8名的是1280*960分辨率，他是19寸CRT的通常使用的分辨率。对于19寸显示，普通消费者一般不会选择CRT显示器，但是一些对颜色要求比较高的设计师，坚持使用CRT的显示，他们会选择19寸或更大的CRT显示器。

四、总结

1：1024*768 目前以及未来相当长的时间，将是主流的或不可忽视的分辨率。

2：使用CSS进行页面布局，可以用变宽的布局方式，灵活地适应浏览器的宽度，在《CSS设计彻底研究》里有一章专门深入分析如何制作变宽布局。可以参考我们视频教程，一看就明白了。甚至可以使用特殊的“魔术布局”方式，使页面的板块排版方式都随宽度变化，不过这种比较复杂的方式，并不常见。

3：大多数专业的网站，仍然是使用固定宽度布局，因为变宽布局虽然有优势，但是也有缺点，一行文字很宽再折行，读者阅读很不舒服。因此，变宽布局常见于网上商店这类卖东西的网站，希望充分利用空间，而对于内容网站，大多数仍然使用固定宽度布局，比如几大门户网站，没有使用变宽布局的。