《网页版本式形式研究(潘辉)》由会员分享，可在线阅读，更多相关《网页版本式形式研究(潘辉)（14页珍藏版）》请在金锄头文库上搜索。
1、网页版式设计形式分析华中师范大学美术学院 艺术设计系 潘辉 20041504指导教师：辛艺华内容摘要：网页设计是一个复杂的过程，网页版式设计是其中的最重点环节。本文从网页设计的本质出发，总结了各种网页显示技术，对网页的版式设计的各个方面做了详细的分析。并结合各种网页版式设计的案例，提出了网页版式设计的基础、方法和原则。从不同的角度对国外和国内的网页版式风格进行了对比，对网页版式设计的趋势做了预测。矚慫润厲钐瘗睞枥庑赖。关键词：网页版式设计平面设计Abstract：Webpage design is a complex process,and page layout design is the
2、most important part in the process. In this paper, it shows the nature of web design with summed up the various web display technology, meets the layout of the webpage design in all aspects of a detailed analysis. Combination of page layout design cases it puts forward the basis of page layout desig
3、n, methods and principles. From different perspectives on the foreign and domestic webpage layout styles are compared and do a trend forecast on the webpage layout design.聞創沟燴鐺險爱氇谴净。Key words：Web Page Format Design Graphic Design在这个信息爆炸的时代，人们可以在互联网上找到几乎任何想要得到的信息，而得到各种信息的基本窗口就是网页。网页的设计是一个复杂的过程，但是抛开技术
4、上繁琐，可以单独从美术设计上来讨论网页的设计。网页设计的好坏可以影响到网页传播信息的能力和效率，所以网页设计在网络信息传播的过程中是十分重要的。残骛楼諍锩瀨濟溆塹籟。一、网页设计的重中之重1.1 网页设计发展历史和现状互联网始于1969年，然而直到1989年World Wide Web协议（简称WWW协议）中才被正式提出，不久之后基于这项协议的网页诞生了，其发展速度之快令人难以想象。基于权威的搜索引擎GOOGLE的统计，2001年其能检索到的网页数目为约14亿，2002年超过了20亿，2003年超过了30亿，2004年超过了42亿，至2008年已经超过了250亿了。 数据源自“http:/ 辛
5、艺华著，版式设计，华中科技大学出版社，2006年，第7页。版式设计是调动各类视觉元素进行形式上的排列组合，突出版式上新颖的创意和个性化的表现，强化形式和内容的互动关系，以期产生全新的视觉效果。考虑到网页的特殊设计要求和设计环境，网页版式设计似也可如此定义：网页版式设计也称网页页面编排设计，是网页设计最重要的部分，是版式设计的一种。网页版式设计是利用各种网页显示技术把需要展示的信息加以处理、排列组合以及修饰，优化各个网页元素之间的关系，设置合适的动态效果和互交操作，以获得良好的视觉效果和用户体验。茕桢广鳓鯡选块网羈泪。二、网页版式设计的基础分析2.1网页的显示技术网页的本质没有这些网页的显示技术
6、，便没有网页。网页的显示技术是网页技术中最核心的部分，正是这些技术才使得我们能够看到丰富多彩的网页，使得网页设计师们可以设计出各种精彩绝伦的网页。所以如果想要设计出好的网页，首先就必须了解这些技术。由于本文讨论的是网页版式设计的理论，所以这里并不讨论这些技术是如何实现的，而是讨论通过这些技术能够得到怎样的网页显示效果。鹅娅尽損鹌惨歷茏鴛賴。最基本的网页显示技术的是HTML超文本标记语言。通过编写这种简单的文本语言，我们可以在网页中显示文字和图片，并为各种文字和图片排版。显示的文字可以是各种语言、各种字体、各种字号、各种特效（倾斜、下划线、加粗等）及各种颜色的。显示的图片也可以是被缩放至指定的大
7、小，或者平摊、折叠、拉伸、填满指定的区域。这项技术是网页显示技术中最基本的一项，单独利用它就可以搭建一个完整漂亮的简洁网页。在1996年以前的早期网页设计中差不多只用到这种简单的网页显示技术，网页几乎都是纯文字的 梁景红著，Web Designer Idea，电子工业出版社，2006年，第1页。如果想要设计比较丰富多彩且具有动态能力和互动性的网页，就得使用后文所涉及的网页显示技术了。籟丛妈羥为贍偾蛏练淨。一种是网页脚本语言，以JAVASCRIPT为最主要的代表，它是嵌入到网页HTML代码中的脚本程序代码。当网页被显示的时候，它也能够同时自动运行。利用这项技术，能在网页上便利的实现动态效果。例如
8、现在很多门户网站上的大幅广告会在用户打开首页之后几秒钟之内显示出来，占据网页窗口的一个区域，然后在数秒钟后自动消失，页面返回到本来的面目 3月24日的新浪首页（）、搜狐首页（）均有这种特效。，这就是利用JAVASCRIPT制作出的变换效果。預頌圣鉉儐歲龈讶骅籴。另一种就是网页ACTIVE插件，能够实现复杂的特殊功能，但是需要用户先下载插件，然后才能在打开用到该插件的页面时显示出效果。最成功的插件就是FLASH。目前FLASH已经近乎成为一项网页互交动画的标准，利用它你可以在网页上显示绚丽的动画效果。这种效果可以是单独嵌在网页中，也可以是悬浮于页面其他内容之上。目前FLASH已经不仅仅是动画，用
9、过它可以完成一个华丽的网页动态互交界面，如果是使用HTML+JAVASCRIPT就会变得极其麻烦。渗釤呛俨匀谔鱉调硯錦。目前还有一种新的技术组合AJAX比较流行。其主要用途是在不更新页面的情况下通过用户操作只向服务器请求需要部分的数据并及时更新到原来显示出的页面上。通过这项技术组合，可以让单一页面变得更像一个程序，当用户打开这个页面，他不需要刷新或者跳到其他页面就可以在当前页面上不断获得需要的信息。典型的例子就是GOOGLE网站开发的如Google讨论组、Google地图、Google搜索建议、Gmail邮箱等产品的页面，通过这项技术组合，极大地提高了用户体验。铙誅卧泻噦圣骋贶頂廡。2.2页面
10、文字特征网站上的信息90%以上均通过用文字表达，文字是网络信息最主要的载体。这个相当重要的网页元素在网页上有着十分丰富的表现手法。传统平面版式设计中能够实现的文字设计在网页上也都很容易实现。网页上文字的特点在于能实现许多在传统平面版式设计中不容易实现的特殊效果。擁締凤袜备訊顎轮烂蔷。一方面是动态效果。通过网页语言可以使文字做简单的运动，而通过FLASH可以把文字做成精彩的动画。同时在文字上加上各种特效也是很容易的，例如发光、闪烁等。这样能够很好的达到如突出某些文字内容以及获得更大点击量的特殊目的。贓熱俣阃歲匱阊邺镓騷。另一方面是互动效果。通过网页脚本和插件程序，文字的内容可以根据用户的操作而改
11、变。例如新浪首页左边侧栏中的文字显示区域上部有四个文字标题：“教育、培训、招生、出国”，当用户把鼠标移到其中的某个文字标题之上时，下方的文字显示区域中就会出现相应的信息。这使得同一个文字区域能够显示四倍的文字信息，用户可以根据自身喜好选择相应的信息浏览，这不仅增加了页面信息容量，更给客户带来了更多的浏览方式与乐趣。坛摶乡囂忏蒌鍥铃氈淚。2.3页面图画特征图画包括图片、动画、影像 这里的图画所指的内容包括静态的和动态的图画，网页上的图片、动画、影像都有可能是静态的或者动态的。在网页中，这些是比文字更为直观的信息类型，优秀的网页设计都靠出色的图画设计取得成功的。相对于传统的平面版式设计，网页的图画
12、具有其独特之处。蜡變黲癟報伥铉锚鈰赘。首先，传统的平面版式设计难以实现动画，无法显示影像。但是在网页上可以轻松的实现这些内容。网页上的动画制作已经发展成为一门单独的职业，称为网页动画设计师。打开各大网站的首页，其中的广告内容几乎都是动画制作的。買鲷鴯譖昙膚遙闫撷凄。其次，网页的图画可以具有极强的互动性。不少网站的页面就是一个整体的FLASH，页面绚丽，互动性极强，时下流行的一种FLASH导航就是典型的例子。在这类导航条上，当用户的鼠标移到相应的导航项时，导航项的图标就会发生变化。这种变化可以是颜色或形状的变换，给用户新颖独特的体验。綾镝鯛駕櫬鹕踪韦辚糴。2.4页面声音特征不少网页页面中都嵌有声
13、音媒体，声音媒体是一种特殊的媒体，虽不可见，但是其辅助作用和感染力是很强的。页面可以直接将音频嵌入成为网页的背景音乐，也可以在页面中嵌入特殊的播放器控件，让用户可自主操作音乐的播放程序。许多FLASH中就夹带了音屏。网页中加入音频后能够增加页面的浏览效果。网页的背景音乐能够给页面的浏览者在摄取信息时带来视听的完整感受，在对应用户的某个操作而产生的音频效果时，又增加了用户的操作乐趣。驅踬髏彦浃绥譎饴憂锦。三、网页版式的结构3.1网页的元素组合对于用户而言，网页是由文字、图片、动画、音乐、影像等元素组成，这些是用户可以直观感受到的。对于设计师，如何组合这些元素就是最关键的问题，元素的组合须遵从以下几条规则。猫虿驢绘燈鮒诛髅貺庑。要保持相邻元素的一致性。不同的元素放在一起会相互影响，这种影响必须是积极的，使其更像一个整体，而并非不协调或者格格不入。并且这种一致性不仅在两个个体的元素之间体现出来，在元素组合与元素组合之间也要遵守，甚至整
