网页版式设计形式分析(潘辉)

网页版式 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 形式分析 华中师范大学美术学院艺术设计系潘辉 20041504 指导教师:辛艺华 内容 财务内部控制制度的内容财务内部控制制度的内容人员招聘与配置的内容项目成本控制的内容消防安全演练内容 摘要:网页设计是一个复杂的过程,网页版式设计是其中的最重点环节。本文从网页设计的本质出发,总结了各种网页显示技术,对网页的版式设计的各个方面做了详细的分析。并结合各种网页版式设计的案例,提出了网页版式设计的基础、方法和原则。从不同的角度对国外和国内的网页版式风格进行了对比,对网页版式设计的趋势做了预测。 关键词:网页版式设计平面设计 Abstract:Webpage design is a complex process, and page layout design is the 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 design, 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 - 1 - 在这个信息爆炸的时代,人们可以在互联网上找到几乎任何想要得到的信息,而得到各种信息的基本窗口就是网页。网页的设计是一个复杂的过程,但是抛开技术上繁琐,可以单独从美术设计上来讨论网页的设计。网页设计的好坏可以影响到网页传播信息的能力和效率,所以网页设计在网络信息传播的过程中是十分重要的。 一、网页设计的重中之重 1.1 网页设计发展历史和现状 互联网始于1969年,然而直到1989年World Wide Web 协议 离婚协议模板下载合伙人协议 下载渠道分销协议免费下载敬业协议下载授课协议下载 (简称WWW协议)中才被正式提出,不久之后基于这项协议的网页诞生了,其发展速度之快令人难以想象。基于权威的搜索引擎GOOGLE的统计,2001年其能检索到的网页数目为约14亿,2002年超过了20亿,2003年超过了30亿,2004年超过了42亿,至2008年已经超过了250亿了。①这只是单一引擎的精确统计数字,有人估计的不完全统计全球网页数目应该在4000亿以上,并以每天500万以上的速度递增。如此庞大的行业必定催生一个庞大的需求,网页设计师应运而生。 受电脑显示器技术的影响,我们能观赏到的网页是在一个电脑屏幕上的平面区域之中,故网页的设计也可算作一种平面设计。虽然网页设计还包含很多传统平面设计没有的东西,如动态内容、影像和声音等,但这些都是建立在平面设计的基础之上的。传统的平面设计已经有悠久的历史,所以相关的各种理论体系都十分完整。而网页设计是一门相对新兴的行业,因此尚未形成系统理论。正因为网页设计和传统平面设计有这样的关系,网页设计师大都会借鉴平面设计的经验和理论来进行网页设计。 纵观现在的网页设计和显示技术,可归纳为以下三个方面:基本的文字和图片显示技术,动态显示和用户互交技术,多媒体显示技术。基本的文字图片显示技术是最古老和传统的设计网页方法,多媒体显示技术可以在网页上显示各种影像和声音。动态显示和用户互交技术是网页设计最大的特点,主要由网页脚本语言和网页控件来实现。网页脚本语言可以在网页上运行一些程序,而网页控件可以实现各种复杂的功能,最出名的网页控件就是FLASH。 ①数据源自“网页数目”搜索结果。 1.2 网页版式设计——网页设计的重中之重 网页的目的是为了传播信息,网页设计的目的是为了人们更好的浏览这些信息。网页设计的过程,实质上就是对需要展示的信息在页面上进行编排和美化,以便信息有更好的展示效果。所以网页设计的重点就是如何编排信息了,尤其是网页的版式设计。网页版式设计是网页设计中最重要的部分,也是最基础的部分。 网页版式设计是版式设计的一种。《版式设计》一书中对版式设计有如下定义:版式设计又称编排设计,是平面设计的一个组成部分,为视觉传达设计的重要环节②。版式设计是调动各类视觉元素进行形式上的排列组合,突出版式上新颖的创意和个性化的表现,强化形式和内容的互动关系,以期产生全新的视觉效果。考虑到网页的特殊设计要求和设计环境,网页版式设计似也可如此定义:网页版式设计也称网页页面编排设计,是网页设计最重要的部分,是版式设计的一种。网页版式设计是利用各种网页显示技术把需要展示的信息加以处理、排列组合以及修饰,优化各个网页元素之间的关系,设置合适的动态效果和互交操作,以获得良好的视觉效果和用户体验。 二、网页版式设计的基础分析 2.1 网页的显示技术——网页的本质 没有这些网页的显示技术,便没有网页。网页的显示技术是网页技术中最核心的部分,正是这些技术才使得我们能够看到丰富多彩的网页,使得网页设计师们可以设计出各种精彩绝伦的网页。所以如果想要设计出好的网页,首先就必须了解这些技术。由于本文讨论的是网页版式设计的理论,所以这里并不讨论这些技术是如何实现的,而是讨论通过这些技术能够得到怎样的网页显示效果。 最基本的网页显示技术的是HTML超文本标记语言。通过编写这种简单的文本语言,我们可以在网页中显示文字和图片,并为各种文字和图片排版。显示的文字可以是各种语言、各种字体、各种字号、各种特效(倾斜、下划线、加粗等)及各种颜色的。显示的图片也可以是被缩放至指定的大小,或者平摊、折叠、拉伸、填满指定的区域。这项技术是网页显示技术中最基本的一项,单独利用它就可以搭建一个完整漂亮的简洁网页。在1996年以前的早期网页设计中差不多只用到这种简单的网页显 ②辛艺华著,《版式设计》,华中科技大学出版社,2006年,第7页。 示技术,网页几乎都是纯文字的③。如果想要设计比较丰富多彩且具有动态能力和互动性的网页,就得使用后文所涉及的网页显示技术了。 一种是网页脚本语言,以JA V ASCRIPT为最主要的代表,它是嵌入到网页HTML 代码中的脚本程序代码。当网页被显示的时候,它也能够同时自动运行。利用这项技术,能在网页上便利的实现动态效果。例如现在很多门户网站上的大幅广告会在用户打开首页之后几秒钟之内显示出来,占据网页窗口的一个区域,然后在数秒钟后自动消失,页面返回到本来的面目④,这就是利用JA V ASCRIPT制作出的变换效果。 另一种就是网页ACTIVE插件,能够实现复杂的特殊功能,但是需要用户先下载插件,然后才能在打开用到该插件的页面时显示出效果。最成功的插件就是FLASH。目前FLASH已经近乎成为一项网页互交动画的 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 ,利用它你可以在网页上显示绚丽的动画效果。这种效果可以是单独嵌在网页中,也可以是悬浮于页面其他内容之上。目前FLASH已经不仅仅是动画,用过它可以完成一个华丽的网页动态互交界面,如果是使用HTML+JA V ASCRIPT就会变得极其麻烦。 目前还有一种新的技术组合——AJAX比较流行。其主要用途是在不更新页面的情况下通过用户操作只向服务器请求需要部分的数据并及时更新到原来显示出的页面上。通过这项技术组合,可以让单一页面变得更像一个程序,当用户打开这个页面,他不需要刷新或者跳到其他页面就可以在当前页面上不断获得需要的信息。典型的例子就是GOOGLE网站开发的如Google讨论组、Google地图、Google搜索建议、Gmail 邮箱等产品的页面,通过这项技术组合,极大地提高了用户体验。 2.2 页面文字特征 网站上的信息90%以上均通过用文字表达,文字是网络信息最主要的载体。这个相当重要的网页元素在网页上有着十分丰富的表现手法。传统平面版式设计中能够实现的文字设计在网页上也都很容易实现。网页上文字的特点在于能实现许多在传统平面版式设计中不容易实现的特殊效果。 一方面是动态效果。通过网页语言可以使文字做简单的运动,而通过FLASH可以把文字做成精彩的动画。同时在文字上加上各种特效也是很容易的,例如发光、闪烁等。这样能够很好的达到如突出某些文字内容以及获得更大点击量的特殊目的。 ③梁景红著,《Web Designer Idea》,电子工业出版社,2006年,第1页。 ④3月24日的新浪首页(www.sina.com.cn)、搜狐首页(www.sohu.com)均有这种特效。 另一方面是互动效果。通过网页脚本和插件程序,文字的内容可以根据用户的操作而改变。例如新浪首页左边侧栏中的文字显示区域上部有四个文字标题:“教育、 培训 焊锡培训资料ppt免费下载焊接培训教程 ppt 下载特设培训下载班长管理培训下载培训时间表下载 、招生、出国”,当用户把鼠标移到其中的某个文字标题之上时,下方的文字显示区域中就会出现相应的信息。这使得同一个文字区域能够显示四倍的文字信息,用户可以根据自身喜好选择相应的信息浏览,这不仅增加了页面信息容量,更给客户带来了更多的浏览方式与乐趣。 2.3 页面图画特征 图画包括图片、动画、影像⑤。在网页中,这些是比文字更为直观的信息类型,优秀的网页设计都靠出色的图画设计取得成功的。相对于传统的平面版式设计,网页的图画具有其独特之处。 首先,传统的平面版式设计难以实现动画,无法显示影像。但是在网页上可以轻松的实现这些内容。网页上的动画制作已经发展成为一门单独的职业,称为网页动画设计师。打开各大网站的首页,其中的广告内容几乎都是动画制作的。 其次,网页的图画可以具有极强的互动性。不少网站的页面就是一个整体的FLASH,页面绚丽,互动性极强,时下流行的一种FLASH导航就是典型的例子。在这类导航条上,当用户的鼠标移到相应的导航项时,导航项的图标就会发生变化。这种变化可以是颜色或形状的变换,给用户新颖独特的体验。 2.4 页面声音特征 不少网页页面中都嵌有声音媒体,声音媒体是一种特殊的媒体,虽不可见,但是其辅助作用和感染力是很强的。页面可以直接将音频嵌入成为网页的背景音乐,也可以在页面中嵌入特殊的播放器控件,让用户可自主操作音乐的播放程序。许多FLASH 中就夹带了音屏。网页中加入音频后能够增加页面的浏览效果。网页的背景音乐能够给页面的浏览者在摄取信息时带来视听的完整感受,在对应用户的某个操作而产生的音频效果时,又增加了用户的操作乐趣。 三、网页版式的结构 3.1 网页的元素组合 ⑤这里的图画所指的内容包括静态的和动态的图画,网页上的图片、动画、影像都有可能是静态的或者动态的。 继续阅读