如何设计漂亮的网页.doc

http:/3704./ 广州漫游职业学校 如何设计漂亮的网页最好的设计往往就是最简单的设计：一个中心思想，一幅图片，少量的文字，开放的空间。这种风格的设计清晰、漂亮，让人印象深刻。但真实的生活并不经常是如此的简单，更多的是杂事缠身。在设计一个项目时，往往需要将很多不同的信息同时放上去，一个都不能少，就象现在很多的网站一样，信息密集，显得非常拥挤复杂。在本文中，我们将介绍迈阿密大学的艺术科学学院网站的版面，它之所以吸引我们的注意，是因为该网站虽然有很多信息，但却给我们留下美好的印象。该网站通过两个途径实现这种效果：一，它尽可能地减少各种元素，只保留最重要的部分（其实仍然是“简单的设计”思想在起作用），二，就是在处理各种细节时都经过精心处理。这种设计手法在技术上其实一点不难，让我们进去看看： 主页虽然多达二十多个链接，但整体却显得温和，协调一致。结构：网站的页面尺寸并没有走极端，不会太长，大多数页面上的内容不需要拖动就可以轻易浏览，是一种方便人们阅读的屏幕尺寸。每个页面由三个区域构成，每一个区域负责不同的信息，最上方及最下方的区域内容是固定的，改变的只是中间区域的内容。不同的颜色定义了不同的区域：白色区域是中心舞台，这个区域通过上方颜色较深的页眉与下方较浅的页脚而得到确定。固定内容的区域包含了各种最基本的元素：标志，链接，搜索等诸如此类的内容。中间白色区域的内容则是变化的，主要展示不同的事件信息、新闻简讯等内容。从下方示意图可以看出，这个页面结构相当紧凑，可以有效组织各种内容，比起那种需要拖动滚动条的页面更容易阅读。紧凑，是其中的关键。页眉：此外由两个色带构成：绿色及棕色。这两种颜色构成了一个简单坚实的页眉并统领着这个网站。标志及链接文字则反转成白色字体。为了柔和视觉效果，左方还使用了象是阳光照射所呈现的一个非常微弱的渐变面。页眉右方远处有四个固定的链接，文字的颜色显得相当低调，但由于处于页眉的区域内，没有人会忽视它的存在。主链接：第一级链接处于页眉的标色色带区域内。链接的字体、颜色及阴影与上方的标志呼应，使两者之间产生视觉上的联系。绿色及棕色当然是两种不同的颜色，但如果你将这两种颜色变成灰度显示，你可以发现他们的相同之处，其灰度色值是基本一样的，这个隐藏的共同点使两者在视觉上既有区别，又有联系。下图中，字母的间距比较宽松，与普通的字母间距相比，呈现一种轻松气息，也传达了一种从容及尊严。在屏幕显示时，字母间距较大也更容易阅读。次级链接：当浏览者深入这个网站时，字体字母及颜色在细节上的变化都在暗示读者这是另外的一些信息。但字体及尺寸仍然与主链接相同。 中心舞台：在页眉与页脚之间的白色区域是我们的中心区域，也是这个网站的视觉焦点所在。在每一个页面中的文章，都显得相当简短，而且象印刷的书本那样的文字排版，行距非常大，采用衬线字体，整个页面显得清爽而不窒息。其书本气息让人能够舒适阅读。页脚：有效设计的页脚是可以发挥很大的作用的。不要将页脚想象成一条多出来的“尾巴”，而应该将它看作是一个支撑点，支撑着上述所有内容的一个区域。页脚区域中放置的也是一些固定不变的内容，如链接、联系信息及标志等。 在设计中，层次感是非常重要的。上图左，如果将页眉与页脚设计成相同的份量，给人的感觉就象奥利奥夹心曲奇饼，它分散了读者的注意力，弱化了版面的力量感。相反，三个区域呈现层次感使到每个区域都能够正确承担起自己的任务。在脑海中一定要记住的是，读者的眼睛永远会集中在中心区域内，所以这里要放置最重要的信息。周围所放置是支持性的内容。字体：这个网页中，正文的字体全部采用Georgia字体，可以说是一种在屏幕上显示的最佳衬线字体，当样，Georgia作为印刷字体同样表现良好。中国设计者在使用英文字体时更多会采用默认的Times字体。让我们看看Georgia字体与Times字体的区别，从这种区别中，也可以知道为什么在屏幕上显示时，Georgia字体会赢了这一回合。 点击上图看大图字母的间距与字母形状一样重要， Georgia字体用于正文时，整体显得平滑、重复及具有节奏感。试比较以下两者的观看感觉。综上所述，Georgia字体是一种在线观看时表现突出的字体。Times字体当初设计时还没有迎来电子时代，所以它主要是用于印刷。而Georgia字体则是专门为屏幕观看而设计的字体，就算在低分辨率的情况下，仍然表现出众。在上图中，当Times字体在