网页版式设计形式分析(潘辉)
网页版式设计形式分析
华中师范大学美术学院艺术设计系潘辉 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 网页设计发展历史和现状
互联网始于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年以前的早期网页设计中差不多只用到这种简单的网页显
示技术，网页几乎都是纯文字的③。如果想要设计比较丰富多彩且具有动态能力和互动性的网页，就得使用后文所涉及的网页显示技术了。
一种是网页脚本语言，以JA V ASCRIPT为最主要的代表，它是嵌入到网页HTML 代码中的脚本程序代码。当网页被显示的时候，它也能够同时自动运行。利用这项技术，能在网页上便利的实现动态效果。例如现在很多门户网站上的大幅广告会在用户打开首页之后几秒钟之内显示出来，占据网页窗口的一个区域，然后在数秒钟后自动消失，页面返回到本来的面目④，这就是利用JA V ASCRIPT制作出的变换效果。
另一种就是网页ACTIVE插件，能够实现复杂的特殊功能，但是需要用户先下载插件，然后才能在打开用到该插件的页面时显示出效果。最成功的插件就是FLASH。目前FLASH已经近乎成为一项网页互交动画的标准，利用它你可以在网页上显示绚丽的动画效果。这种效果可以是单独嵌在网页中，也可以是悬浮于页面其他内容之上。目前FLASH已经不仅仅是动画，用过它可以完成一个华丽的网页动态互交界面，如果是使用HTML+JA V ASCRIPT就会变得极其麻烦。
目前还有一种新的技术组合——AJAX比较流行。其主要用途是在不更新页面的情况下通过用户操作只向服务器请求需要部分的数据并及时更新到原来显示出的页面上。通过这项技术组合，可以让单一页面变得更像一个程序，当用户打开这个页面，他不需要刷新或者跳到其他页面就可以在当前页面上不断获得需要的信息。典型的例子就是GOOGLE网站开发的如Google讨论组、Google地图、Google搜索建议、Gmail 邮箱等产品的页面，通过这项技术组合，极大地提高了用户体验。
2.2 页面文字特征
网站上的信息90%以上均通过用文字表达，文字是网络信息最主要的载体。这个相当重要的网页元素在网页上有着十分丰富的表现手法。传统平面版式设计中能够实现的文字设计在网页上也都很容易实现。网页上文字的特点在于能实现许多在传统平面版式设计中不容易实现的特殊效果。
一方面是动态效果。通过网页语言可以使文字做简单的运动，而通过FLASH可以把文字做成精彩的动画。同时在文字上加上各种特效也是很容易的，例如发光、闪烁等。这样能够很好的达到如突出某些文字内容以及获得更大点击量的特殊目的。
③梁景红著，《Web Designer Idea》，电子工业出版社，2006年，第1页。
另一方面是互动效果。通过网页脚本和插件程序，文字的内容可以根据用户的操作而改变。例如新浪首页左边侧栏中的文字显示区域上部有四个文字标题：“教育、培训、招生、出国”，当用户把鼠标移到其中的某个文字标题之上时，下方的文字显示区域中就会出现相应的信息。这使得同一个文字区域能够显示四倍的文字信息，用户可以根据自身喜好选择相应的信息浏览，这不仅增加了页面信息容量，更给客户带来了更多的浏览方式与乐趣。
2.3 页面图画特征
图画包括图片、动画、影像⑤。在网页中，这些是比文字更为直观的信息类型，优秀的网页设计都靠出色的图画设计取得成功的。相对于传统的平面版式设计，网页的图画具有其独特之处。
首先，传统的平面版式设计难以实现动画，无法显示影像。但是在网页上可以轻松的实现这些内容。网页上的动画制作已经发展成为一门单独的职业，称为网页动画设计师。打开各大网站的首页，其中的广告内容几乎都是动画制作的。
其次，网页的图画可以具有极强的互动性。不少网站的页面就是一个整体的FLASH，页面绚丽，互动性极强，时下流行的一种FLASH导航就是典型的例子。在这类导航条上，当用户的鼠标移到相应的导航项时，导航项的图标就会发生变化。这种变化可以是颜色或形状的变换，给用户新颖独特的体验。
2.4 页面声音特征
不少网页页面中都嵌有声音媒体，声音媒体是一种特殊的媒体，虽不可见，但是其辅助作用和感染力是很强的。页面可以直接将音频嵌入成为网页的背景音乐，也可以在页面中嵌入特殊的播放器控件，让用户可自主操作音乐的播放程序。许多FLASH 中就夹带了音屏。网页中加入音频后能够增加页面的浏览效果。网页的背景音乐能够给页面的浏览者在摄取信息时带来视听的完整感受，在对应用户的某个操作而产生的音频效果时，又增加了用户的操作乐趣。
三、网页版式的结构
3.1 网页的元素组合
对于用户而言，网页是由文字、图片、动画、音乐、影像等元素组成，这些是用户可以直观感受到的。对于设计师，如何组合这些元素就是最关键的问题，元素的组合须遵从以下几条规则。
要保持相邻元素的一致性。不同的元素放在一起会相互影响，这种影响必须是积极的，使其更像一个整体，而并非不协调或者格格不入。并且这种一致性不仅在两个个体的元素之间体现出来，在元素组合与元素组合之间也要遵守，甚至整个网页页面都要保证一致性，成为一个完整的系列作品。
元素与元素之间必须强调出主从关系，多个元素组合在一起时，必须突出某个主要元素，否则会导致一种过于平衡的不协调。这种不协调会使得用户初看网页时找不到重点，这是网页设计的忌讳。
元素堆砌的数量必须合理，如果元素过于繁琐反而会达不到预期的效果，过于繁琐的内容只会让人看得眼花缭乱，找不到重点，反而不能更好的达到传递信息的作用。
3.2 基本版式结构分析
由于网页显示技术的特殊性和网页浏览操作的独特性，网页的版式结构是有一定的规律的，通常都要用到一个导航栏。常用到的网页版式结构归纳如下：
3.2.1 两栏式
两栏分为横排两栏和竖排两栏两种，竖排两栏较少见，横排两栏则使用较多。横排两栏即是顶部或者底部有一个面积相对较小的导航栏。竖排两栏的导航栏则在侧边。如标致307两厢的汽车官方网站⑥就采用的这种结构，导航连接在最下面，上面的主体部分为FLASH动画。
3.2.2 三栏式
三栏式分为三种：左导航栏式、右导航栏式和三栏导航式。这种格式中，它们的顶部都可能保留有横向导航栏，顾名思义，左栏导航即左侧有一窄栏为导航栏，右侧为宽内容栏；右栏导航则为右侧有一窄导航栏，左侧为宽内容栏；三栏导航为左右各一个窄导航栏，中间仍为宽内容栏。这三种结构各有优缺点。
左栏导航式是至今为止使用得最多、最广泛的网页版式结构。目前超过半数的网页是这种版式结构。左栏导航式的优点是美观大方而且实用。正是因为它被如此广泛的使用，它也有了一个致命的弱点——缺乏新意。
右栏导航式和左栏导航式一样是一种很鲜明的结构，但是大多数人还是偏向于左栏导航式，主要原因是因为左栏导航式已经被大家接受为一种结构标准，所以右栏导航式很少见到。右栏导航式的优点就是比较有新意，但也存在被被用户接受的缺点。
三栏导航在许多国外的大门户网站中用得比较多，因为它能够提供更多的信息板块，也就是能够提供更多的信息容量，或者能提供更多的广告位置，这就是它的优势。而缺点也是很明显的，三栏导航容易导致网页页面内容混乱繁冗。
3.2.3复合式
复合式网页版式结构。国内的几大门户网站的首页均采用的复合式的网页版式结构设计。这种设计通常把详细的分类导航放在页面顶端，把剩余页面横切成很多段，每个段又是单独的一块版式风格，在一段中顶部会有一个标题提示这段的内容，然后端可能是两栏也可能是三栏或者四栏结构。以新浪网首页⑦为例，最上面横栏为大导航栏；下面接着的段落块是导航广告块，广告块采用左侧栏式；再下面是博客于新闻段落块
，其中为左侧栏式，左侧栏式中的内容栏又嵌套着上下栏，其中的下栏又为左右平分的两栏；再下为娱乐与体育的段落块，为三栏结构；再下为社会与直播段落块，同样是三栏结构；再下为游戏与经济块，其中嵌套了左栏结构，左栏结构中又嵌套了左右平分式的三栏结构。再经过5个段落块后为页面最下面的新浪版权块。
可见复合式是在分段基础上复杂的套用各种两栏、三栏甚至更多栏的网页版式结构。这种结构可载信息量极大，所以通常被中文门户网站采用。其缺点为死板、内容过多过繁。
3.2.4自由式
自由式即除了以上这些常用形式外的其他形式。这里以实例讨论几种比较有个性的网页版式结构。在此引例说明两种。
郭启睿的个人网站⑧是一个不错的FLASH网站。这个网站的页面是一个整FLASH，也几乎没有具体的网页版式结构，网页窗口固定大小的显示一个FLASH，整个页面都是在展示这个FLASH。这是走的一种偏向FLASH极端的路，也是很多网站的个性发展风格。
⑦网址为https://www.360docs.net/doc/c13171949.html,。
搜索引擎的版式结构。著名的两个搜索引擎的首页版式结构是极其相似的。都是几种在网页正中间的上中下小三栏结构。上栏为搜索引擎LOGO，中栏为简要栏目选项连接和搜索框，下栏为版权相关。这三栏都很小，页面没有多余的不相干的东西。这种页面版式结构是适合于搜索引擎的特殊结构。优点是页面文件小，页面打开迅速，没有其他内容，主旨直观突出，页面清新。在激烈的网络竞争中能最大程度的针对提供的服务给用户良好的感受印象和使用体验。
3.3 国内外流行的网页版式结构分析
国内外的流行网页版式大多是不一样，这和国内外的文化差异、网络发展都有一定的关系。
国外流行的一般是较小版面的网页版式。无论是内容丰富的门户网站还是简单的个人网站，通常的页面版式面积都不超过两个电脑屏幕。而且网页结果一般比较简单，在三栏式的基础上稍微扩展。如雅虎首页⑨将近两页，三栏式设计，导航清晰。又如MSN首页⑩也是两页，同样类似三栏设计，导航清晰。再如某学院网站11，只有一页长，横截三栏设计，中间大图片很有特色。这样的网页版式结果风格有利于页面层次分明，页面信息层次清晰。
而国内流行的多为复杂的复合式和十分绚丽的整体网页。新浪、搜狐和网易三大门户首页12均为5页或者6页长，页面为复杂的复合式。网页的内容特别多，广告也多。中文的门户网站几乎都是这样设计的，因为其信息容量大，可设计广告位多。而大多数的小网站偏向于整体的绚丽风格，如各个汽车厂商的网站，几乎都为整页面的FLASH动画。这类网页互交能力强，各种效果显得比较时尚。
四、网页版式设计方法
4.1 网页版式设计的基本思路
网页版式的设计需要分析、思考、实施、修改这样一个过程，对应每个过程做如下讨论。
4.1.1 整理需要显示的内容和分析设计目的
⑨网址为https://www.360docs.net/doc/c13171949.html,。
⑩网址为https://www.360docs.net/doc/c13171949.html,。
11网址为https://www.360docs.net/doc/c13171949.html,。
第一步应该整理出所设计网页上需要显示或者表达的内容。这些内容可能包括文字、图片、影像或者声音。然后对这些内容进行分类，确定其优先级。对于优先级高的网页内容，应放在醒目度高的位置。按照优先度排序好的网页内容还要考虑内容之间的相关性，以保证哪两种内容放在一起更加合适。
了解了网页的内容，还需要明确所要求的网页风格。根据需求的风格来构架网页的框架、色彩、排列等版式内容。如果要做到完美符合要求的网页，则要仔细分析风格要求，逐项列出可行的解决办法。对设计要求有了透彻的了解，才能明确网页版式的设计目的。
4.1.2 构建网页版式框架
明确了设计目的和设计内容之后，需要开始考虑网页版式的框架结构。框架结构的设计需要配合整体效果的设想，为建筑内容支架和呈现预想效果而服务。以下各举例说明。
如果需要设计的网页要呈现大量的文字内容，则需要构架大块的主体框架，然后考虑其他附属框架结构。读书网站逐浪中的某个书籍页面13，网页的主体框架为书籍介绍，其大体选用的右栏式结构。页面最上方为横条导航，其下为横栏广告，下面为左主栏书籍内容，右侧栏为广告和其他连接。这样的设计突出了网页的主体内容，同时兼顾其他如广告、连接等需要放上页面的内容。
如果页面需要放置比较多的文字和图片广告内容，则可以考虑选比较复杂的复合框架结构，把网页内容和预设广告位置合理的安排穿插在一起，达到预期的效果。再来说新浪首页，细心观察可以发现其中首先在用户屏幕上显示出来的内容超过70%的区域为广告，它采用复杂复合结构，巧妙地把用户使用较多的导航栏放在最显著的位置，剩下的显著位置全部留给了广告，而且复合的嵌套结构显得比较美观，最大化了其页面的广告收益能力。
如果网页是以图片为主的页面，则应该考虑使用大板块均匀组合框架，并且一定注意突出一个主体内容。例如天极图片站14，首页上几乎都是图片，只配有少数文字。打开其页面在页面的中间醒目位置为最大的一幅图片。其他图片的尺寸几乎只有这幅图片的四分之一，故这幅图片是页面的重点。其余图片地位几乎相等，这样主次突出
13例如：https://www.360docs.net/doc/c13171949.html,/29063。
使得页面有了重心。
如果网页的互交性极其强，则要考虑结构上更加利与用户鼠标操作和显示操作结果。利于人机互交的版式结构没有特定的形式，需要结合互交程序来设计。如广州丰田汽车网站的产品页面15，为了显示新车的全方位性能，页面上提供了一个互交式的FLASH动画，用户可以更好的了解新产品的各种性能，故页面上顶部的细横条和底部的细横条外，把中间绝大部分的区域给了这个FLASH，是一种横切三栏的设计。又如百度地图16首页，页面主要提供地图服务，页面除了留下了百度风格的简易导航栏外，其他区域全为地图操作和信息显示。由于地图操作为主，信息栏可以相对较少，故页面应该采用三栏结构。而该页面采用的是右栏式的三栏结构，可见是考虑为了突出地图互交部分并且方便用户操作而把地图的操作部分放在了更能吸引人第一注意力的左边。
4.1.3 放置网站内容
已经大体规划好的页面版式结构需要将内容填入，在页面设计的过程中，通常采用仿实料填充的方法。比如需要留下一个区域显示10条文字连接，则在设计中可随便找10句话填入这个区域，而不是把这个区域留成空白的或者用单一颜色填充。需要放置图片的地方可以在最便捷的地方（通常是网络上）随便取一张可以适用的图片调整到需要大小填充到指定区域。动画或者影像的区域在设计时通常用图片代为填充。
在这种填充过程中，需要不断修改和评审填入元素的版式设计。比如文字的字体、颜色、字号、背景和特效，图片的大小、边框，还有按钮等可操作元素的外观等。
4.1.4对版式进行修改
首先是要考虑用户视觉流程。所谓视觉流程，就是用户打开某个页面后视觉浏览的顺序过程。一个优秀的网页版式设计，可以引导浏览者的视觉流程，而对于一个失败的页面，用户看到后会不知道从哪看起或者往哪看下去。这就需要页面有重点突出的部分，当用户打开页面后，用户的视觉会先被吸引到这个部分。不过到这里只成功了一半，优秀的网页能够在视觉上引导浏览者浏览网页剩下的部分。这就需要页面中各个部分之间合理的衔接，层次分明，能够逐步引导浏览者的视觉，在视觉上起到导
15网址为https://www.360docs.net/doc/c13171949.html,/product。
航作用。
其次要重新调整网页的风格。对各个部分进行调整后再进行组合后来看整体效果。例如左栏式的三栏结构，把三块分别调整完后应该把下部的左侧栏和右主栏组合起来看效果并加以调整，再把上面或者下面的横栏加进去看整体效果并继续微调。
最后便是配色上的修改和其他需要的修饰了。
4.2 网页版式设计法则
经过对各种设计经验的总结，网页版式设计必须注意如下几条原则。
4.2.1 网页上不要出现令人费神理解的设计
网页版式设计需要尽量适合用户的浏览，而不应该需要人去过多的思考或者理解。例如天极图片站首页，首先浏览者的目光会被大幅主图片吸引，然后会转移到右边的小图片上，接下来会查阅下面栏目的各种图片。这个过程是完全自然顺畅的，并不需要过多的思考，所以这是一个成功的设计。而打开老古开发网17的首页，你会艰难的去寻找你需要的某些内容，因为你看到的都是杂乱无章的广告，有用的连接都夹杂在其中或者网页的最下面，这就是一个失败的作品。
4.2.2 避免视觉疲劳
视觉疲劳是某些网站的诟病，是网页的致命伤。如果用户打开一个网站浏览感觉到视觉疲劳，他肯定会中断浏览关掉这个网站，如果是有需求必须在这个网站上寻找某种信息，这个网站也会给用户留下非常不好的印象。通常某个网页是很难给用户留下版式设计上的深刻印象的，除非这个页面很完美，或者很糟，而通常很多情况是后者。这就会导致网页的浏览者越来越少。视觉疲劳不一定是网页设计时安排的内容所造成的，也可能是后期某些没有想到的内容组合造成的。这里有一个典型的视觉疲劳例子：老古开发网首页。打开这个首页第一眼会看到的是眼前的区域被十多个长方形的广告塞满，不到一秒的时间用户就会感到头疼，接下来要么就是关掉网页，要么就是急需某些信息马上拉到底部去寻找。这些泛滥繁琐的广告被浏览的几率其实是很小的，这也说明这个页面设计得很失败。
4.2.3 保持网页上不同内容的一致性
网页上的内容可能有很多种分类，但是在设计网页版式的时候，一定要注意不同内容之间的联系，保持在某个方面的一致性。
例如在天极图片站首页中，页面大部分内容为图片，页面上的广告也都设置为图片形式的广告，这样保证了不同网页内容的一致性，更加突出了网站强调的主旨——图片网站。而对于老古开发网，可以看到页面混乱，过多杂乱的广告已经造成页面内容非常不协调，显得内容松散，难以感受到主旨。
五、网页版式设计形式的趋势
5.1从花哨视觉转向以内容为主的版式设计趋势
曾几何时，一个好的页面被认为应该是一个漂亮的页面，设计师们通常在页面版式设计上就如何修饰大做文章。而目前的发展趋势是页面为内容服务。现在无论是最大众化的门户网站，还是需要高雅气息的汽车展示网站，虽然设计的定位不同，但是都是朝着为内容服务的目的进行设计的。花哨的页面、绚丽的色彩的时代已经一去不返。以内容为主也是十分符合“网页应该便于浏览”这种思想的，对应于现在信息量爆炸的趋势，人们需要在有限的精力中获得更多的信息，则会更加愿意去浏览更便于获得信息的网页。
5.2 WEB2.0的流行
WEB1.0时代是一个“一小撮人”为大众撰写网页的时代，而WEB2.0时代是一个每个人都是创作者的时代，而WEB是一个平台18。在这个时代里，网页的版式风格发生了巨大的改变。
最明显的趋势是网页的风格和结构的分离，即页面的外观和内容结构是分开设计的，因为已经无法预知某些页面将会出现的内容。这变使得设计师在网页版式设计的过程中考虑得更加周密，需要参与设计的人员之间配合更加默契。一个页面可能需要经过多个人之手。
另外一个趋势是页面的内容会随着时间的后移而增加。这需要设计版式时留下一定可膨胀空间的页面，以保护内容增加后的页面在版式上不会变形。
5.3 页面部分版式由浏览者决定
不少网站推出了这样一项服务，用户可以选择在首页上显示所需要的内容何及版式结构。用户设定完成之后，服务器会记住用户使用的电脑或者其登陆帐号，用户以后每次打开页面，都能看到自己设定好的内容板块。现在GOOGLE等大型网站都相
继推出了这项服务。
参考文献：
[1]辛艺华：《版式设计》，华中科技大学出版社2006年版。
[2]劳光辉等：《版式设计》，中南大学出版社2005年版。
[3][英]加文·安布罗斯等：《版式设计》，中国青年出版社2006年版。
[4]梁景红编著：《Web Designer Idea》，电子工业出版社2006年版。
[5][美]Jason Beaird：《完美网页设计艺术》，人民邮电出版2008年版。
[6]吴娇娇等：《论网页的版式设计》，《装饰》2004年第9期。
[7]彭辉：《网页艺术设计中的版式设计原则》，《光盘技术》2007年第2期。
13种典型网页版式设计介绍
13种典型网页版式设计介绍 一、骨骼型 骨骼型是一种规范的理性的分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。在图片和文字的编排上则严格按照骨骼比例进行编排配置，给人以严谨、和谐、理性的美。骨骼经过相互混合后的版式，既理性、条理，又活泼而具弹性。二、满版型 版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉，是商品广告常用的形式。 三、上下分割型 把整个版面分为上下两个部分，在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。 四、左右分割型 把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。不过，倘若将分割线虚化处理，或用文字进行
左右重复或穿插。 左右图文则变得自然和谐。 五、中轴型 将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。 六、曲线型 图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。 七、倾斜型 版面主体形象或多幅图版做倾斜编排，造成版面强烈的动感和不稳定因素，引人注目。 八、对称型 对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以避免过于严谨。对称一般以左右对称居多。 九、中心型 重心有三种楷念。1、直接以独立而轮廓分明的形象占据版 面中心。2、向心：视觉元素向版面中心聚拢的运动。3、离心：犹如将石子投入水中，产生一圈圈向外扩散的弧线运动。重心型版式产生视觉焦点，使强烈而突出。
版式设计学习心得
版式设计学习心得 导读：我根据大家的需要整理了一份关于《版式设计学习心得》的内容，具体内容：学习了版式设计的课程后，怎样写好学习心得体会呢?下面我收集了体会的范文，希望对你有帮助篇一在没有学习版式设计之前，我完全不知道一本杂志，或者一张海报的设计有这么多讲...学习了版式设计的课程后，怎样写好学习心得体会呢?下面我收集了体会的范文，希望对你有帮助 篇一 在没有学习版式设计之前，我完全不知道一本杂志，或者一张海报的设计有这么多讲究，还以为只要把元素都摆上去看着舒服就行。我记忆最深的两个大的概念是一开始老师说的黑白灰层次和分栏线。版式设计和素描一样要分出黑白灰，同时不同等级的信息还要分成不同等级的灰，这样画面才会层次丰富。分栏线是相对理性的概念，在版式设计中至关重要，信息元素要按栏线排放才会井然有序，不会给人杂乱无章的感觉。这是我需要加强学习的方面。 在版式设计中有几大原则，一是整体性原则，二是简洁性原则，三是重复原则。任何版面都要注重整体，同时也不能忽略细节，细节体现品质。老师经常提到的一点很重要的是不能为了形式而形式，形式是服务于功能的，不要为了形式而忽略功能，要实现美观与功能的统一。 在学习中发现了很多问题，首先第一大问题就是软件操作不熟悉，
这点需要我们在以后的学习中加强。二是整体的观念不够强，容易出现杂或散的画面，这也要在以后的学习中多加注意，多分析好的作品。三是细节关注度不够，经常容易忽略细节，要多加注意。 设计的时候，如果设计者随意地进行处理而不考虑当中的原则方法及对象规律的话，那么很多时候都会出现一些不太好的结果。虽然感性是一种相当重要的因素，设计中一定要带有情感，但并不代表简单地依靠情感就能做出好的设计。相反，如果设计的时 候能够考虑到各方面的因素并运用恰当的方法的话，那么作品将更加得体和出色。在网页设计中，版式设计占的比重非常大，可以说版式的好坏直接决定页面的成败，也可以说它是网页视觉识别的基础。那么在具体视觉设计的时候，版式上有哪些原则及方法的? 为设计对象建立一个合适的网格。排版网格是由一些垂直和水平的线构成的结构，可以用来帮助内容结构化，它能够让对象产生秩序感。有些人说网格太过于呆板，影响设计创意，我个人觉得可以把网格当做一个整体大的框架，也可以作为设计师组织文字、图片的支架，它相当于是设计的基础，没有好的基础怎么能够谈得上出色的设计呢?所以网格不仅不影响创意的发挥，反而能使设计师思路得到理性地梳理。网格地使用，能较好地解决设计师关于页面中各元素定位的问题，在这基础之下可以做科学的精准的版式的规划。同时使用网格也是一个令您的设计变得高效的方法之一，在把草图转化为设计稿的过程中，在版式方面主要的难点是如何精确地安排各个元素，如果这时候呢够选择合适的网格进行设计，那么这个起点的意义是不可小看的。
排版设计分析
排版设计分析 在这里，我们将对排版设计的几个实例进行过程分析。 1．案例一 案例一是一本宣传册的设计。宣传册的设计不同于其他排版设计，它要求视觉精美、档次高。在排版设计中尤其强调整体布局，连同内页的文字、图片、小标题等都要表现独特。经常是两页的的视觉空间共为一个整体，没有界线，使前后一致、互相呼应。 依照前面所讲的排版设计的程序，我们来逐步进行分析。 a.为宣传册画的概念草图。图片位置的变化旨在表现整体中的丰富。
b.更为精致的设计稿，文字、标题与图片的布局已一目了然。 c.最后的成品，大面积的深浅咖啡两色单纯典雅，与图片的色调融为一体，整体风格十分高档，精致却不失大气。 2、案例二 案例二是为一种酒所作的招贴。招帖是海报、宣传画的统称，属于户外广告。招帖的艺术表现力丰富，可连续张贴、重复宣传。因此招帖的灵魂在于创意，能够使大众过目不忘。 招帖是一种视觉传达的表现形式，要想通过你的版面构成把人们在几秒钟之内吸引住，并获得瞬间的刺激，就要求设计师做到既准确到位，又具有独特的版面创意形式。一张招贴广告往往涉及到构思构图、图片图形、文字色彩、空间层次等一系列问题，而设计师的任务就是要做到这一切的完美结合，用恰如其分的形式把信息传达给人们。
a.为海报画的最初的铅笔图，使用了独特的透视画法，把酒瓶作为主要物件，图的四边加上了粗犷的写有字的正方形框，因为设计师欣赏那些不仅包括一个物品来吸引观众的设计作品。 b.认可构图后的深入描绘，相近内容的诸多表现形式，颜色的基本稿。
c.最后的成品，颜色、构图和远视效果都十分醒目。 3．案例三 案例三是请柬的设计实例。请柬之功用在于人与人之间的沟通，在特定的日子里问候朋友，邀请社团或个人出席各种社交场合。如集会、观光、生日、结婚、展览开幕等，已成为社交礼仪中常见的媒体形式。 a.这是设计者为自己的简略构想所画的几个铅笔草图。大体设定图案与文字的相关位置，哄托出整体的风格。
版式设计的应用分析
版式设计的应用分析 摘要： 视觉是人们获取信息最重要最直接的感觉，人们的衣、食、住、行，方方面面都很 难脱离视觉而完成。版式设计是视觉传达体系的一部分，是作为具有实用价值和艺术价 值的造型而存在和被感知的。将有限的视觉元素进行合理的排列组合，将理性思维个性 化地表现出来，在传达信息的同时，也给人视觉上的享受，这是版式设计的最终目的。 版式设计的历史虽然并不久远，但在广大学者的探索与研究下变的越来越有据可依。本 论文主要是结合普通心理学、视觉心理学、艺术心理学和视觉艺术心理学等相关的理论 知识对版式设计的原则、方法进行分析和研究。将版式设计的原则、方法与心理学的相 关理论结合起来，通过使用案例分析的方法，分析版式设计中存在的心理体验，站在受 众心理的角度审视版式设计的原则与方法，从而指导设计者在设计实践中有效传达主题 信息，并使读者产生阅读兴趣，获得阅读享受。 第一部分版式设计的应用范围 版式设计主要应用在包括报纸、刊物、书籍（画册）、产品样本、挂历、招贴画、唱片封套和网页页面等平面设计的各个领域。 随着人类生活水平的提高，人类更加注重精神生活的发展，比如书籍的出现，为人类精神生活的满足提供了更丰富的想象空间。后来随之出现的报纸、刊物等更是丰富了人的阅读需求。所以版式设计作为这些读物的基本设计基础被广泛的应用。 随着经济的发展和科技水平的提高，新媒体的出现使人类获取信息的渠道不仅局限于平面领域，还会运用科技的平台应用到影视和网页方面。
第二部分版式设计的个性 由于人类审美的需求，还有各个领域不同的行业需求，版式需要有一定的个性去更好的诠释传统媒体艺术以及新媒体艺术的特性。我们从以下方面来体现版式设计的个性：主题的思想性与传播信息的单一性；版面的艺术性与装饰性；形式的趣味性与独创性；思想内容的整体性与协调性。 2.1 根据版式设计的特征寻求个性 1、思想性与单一性 排版设计本身并不是目的，设计是为了更好地传播客户信息的手段。设计师以往中意自我陶醉于个人风格以及与主题不相符的字体和图形中，这往往是造成设计平庸失败的主要原因。一个成功的排版设计，首先必须明确客户的目的，并深入了解、观察、研究与设计有关的方方面面，简要的咨询是设计良好的开端。版面离不开内容，更要体现内容的主题思想，用以增强读者的注目力与理解力。只有做到主题鲜明突出，一目了然，才能达到版面构成的最终目标。 2、艺术性与装饰性 为了使排版设计更好地为版面内容服务，寻求合乎情理的版面视觉语言则显得非常重要，也是达到最佳诉求的体现。构思立意是设计的第一步，也是设计作品中所进行的思维活动。主题明确后，版面构图布局和表现形式等则成为版面设计艺术的核心，也是一个艰难的创作过程。怎样才能达到意新、形美、变化而又统一，并具有审美情趣，这就要取决于设计者文化的涵养。所以说，排版设计是对设计者的思想境界、艺术修养、技术知识的全面检验。
浅谈网页设计中的版式设计
浅谈网页设计中的版式设计 【摘要】网页设计包含视听元素与版式设计两项内容,而网页的版式设计在整个网页设计中具有重要的作用。它决定了网页的艺术风格 和个性特征,形成了网页整体视觉印象,本文拟就网页设计的版式设计谈谈自己的看法。 【关键词】网页设计;版式设计;布局 1.概念 1.1网页设计网页设计是在Internet的发展和数字技术的发展中出现的新艺术形式。它是以Internet为载体,以网络技术和数字技术为基础,依照设计目的、遵循艺术设计规律,实现设计目的与功能,强调艺术与科学密切结合的一种艺术创造化视觉传达活动。它是网络视觉艺术的主要表现形式,也是设计艺术的重要组成部分,它具有媒体相关性、数字技术性和设计艺术性三大基本内涵。 1.2网页版式设计网页版式设计是指在有限的屏幕空间内,按照设计师的想法、意图将网页的形态要数按照一定的艺术规律进行组织和布局,使其形成整体视觉印象,最终达到有效传达信息的视觉设计。它以有效传达信息为目标,利用视觉艺术规律,将网页的文字、图像、动画、音频、视频等元素组织起来,产生感官上的美感和精神上的享受,充分体现了设计师的艺术风格。 2.网页版式设计的作用 网页版式设计是设计师理性思维与感性表达的产物。它决定了网页的艺术风格和个性特征,并以视觉配置为手段影响着网页页面之间导航的方向性,以吸引浏览者注意力,增强网页内容的表达效果。网页版式设计在整个网页的设计中占有很重要的作用。 3.网页版式设计与传统印刷版式设计的差异网页的版式设计同报纸杂志等平面媒体的版式设计有很多共同之处,但网页的排版与书籍杂志的排版又有很大差异。印刷品都有固定的规格尺寸,网页则不然,它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且,网页的组织 结构不像印刷品那样为线性组合,这给网页的版式设计带来了一定的难度。具体表现如下:
论网页的版式设计
论网页的版式设计 吴娇娇／彭纲 我们都知道，浏览者进行网页浏览时的时间顺序通常是：由版式——艺术性，至导航——技术性，至网页内容——信息性或有用性，直至浏览过程的结束，产生评价结果。可以看出，网页设计的三个关键就是：版面设计、导航设计、网页内容。 版面的设计至关重要。在互联网上大量的产品和服务网页中，怎样才能使自己的网页从其他同类产品或服务中脱颖而出，成为浏览者的首选呢？仅仅有好的内容是远远不够的，网站的外观同样重要。内容再好，没有一个赏心悦目并具一定视觉冲击力的外观，必定会影响浏览者的阅读兴趣。人们称互联网经济为注意力经济，如何吸引大众的注意力、增强画面的视觉效果则成为设计的首要工作。 一、网页版面设计的含义 网页的版面设计同报纸杂志等平面媒体的版面设计有很多相通之处。所谓网页的版面设计，是在有限的屏幕空间上将多媒体元素进行有机组合，将传达内容所必要的各种构成要素的均衡、调和、律动的视觉导向以及空白等，根据主题的要求予以必要的关系设计，进行一种视觉的关联和合理配置。 一个成功的网页版面设计不仅能提高版面的注意价值，而且有利于该网页主题的信息传达并加强对浏览者的视觉留存。 二、网页版面的形式与内容的统一 网页的版式和传统印刷品的版式编排一样多种多样。 采用哪种版式并不是设计者的想当然，不同的网站主题（个人宣传、产品销售、提供服务等）对网页构成元素编排方式的要求是不同的，要依据受众的需求、市场的状况、版主的自身情况进行综合分析，还要明确建立该网站的目的、为谁提供产品或服务、能提供什么样的产品或服务、该网站的目标受众以及受众的特点等一系列定位之后才能决定的。如商务类版式的平易近人、娱乐类版式的生动活泼、科技类版式的严谨周密都是根据网站的个性特点来确定的。那些只讲花哨的表现形式或者过于强调独特的设计形式而脱离内容，只重视网页形式上的美感而淡化了主题思想的逻辑，将削弱网页主题的诉求效果，是不足取的。版式始终应为内容服务，设计者只有深入领会主题内容的精神，再融汇自己的思想，找到一个较完美的表现方式，才能真正体现出网站独具的分量和特有价值。 从视觉符号方面来看，视觉符号是相对于语言符号的点、线、面、色彩等视觉性记号。形式法则和构成规律是视觉语言的语法和句法，要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。可以运用对比与调和、对称与平衡、节奏以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感以及新鲜的个性。 三、网页版面的尺寸和构成要素 一般的印刷品都有固定的规格尺寸，而网页的尺寸则是由浏览者来控制的。网页版面指的是在浏览器上看到的完整的一个页面（可以包含框架和层）。网页页面会根据当前浏览窗口的大小自动格式化输出；不同种类、版本的浏览器观察同一个网页页面时，其效果会有所不同；而且用户浏览器的工作环境不同，显示效果也不一样。这就使网页设计者不能精确控制页面的每个元素的尺寸和位置，一般折中为６００×８００像素。网页的构成要素主要有：
版式设计赏析
机电工程系 1003班 卫素娟 2010090319 版式 设 计 论 文
版式设计论文 作者：卫素娟 摘要：本论文介绍了本人对于排版方面专业知识的认识以及对第一次排版的经历和排版后的心得体会。 关键词：版式设计的定义；表达方式方法；排版经历；运用版式设计的几个关键因素 我对版式设计的认识 版式设计是一种区别于文字艺术的视觉艺术，他对于我们的视觉有着更大的冲击力，而且可以跟文字艺术设计一样，对我们的听觉、感觉都造成很大程度上的影响。我认为版式设计是独立于文字艺术表达之外一种更为直接，更为形象的艺术创作。它通过文字的搭配，颜色的调和，几何形状的重组，美术图形的合理运用，甚至是摄影等影视资料的恰如其分的应用，乃至各种组成要素的和谐搭配更会必要、重要……版式设计需要与文字创作一样的灵感一样的东西去支撑它。也就是说版式设计需要有它自己的灵魂，作为一个创作人员更应该这样，要把自己的情感或者把需要反应的感情抑或是把要表达的东西本身的内在的思想韵味挖掘出来，显露出来。在版式设计上，有时是需要留白的方式、比兴等文字表达技巧一样的东西去充实自身的设计作品，但是有时又必须既要显山又要显水。都要因时而异、因环境而异。它所具有的机要部分我们在我们的文字作品、图画雕塑作品里都可以找到共同想通的地方。它们都是美的表达形式，都是以美为基本评价标准。而且他们从来都没有被武断的分开讨论过。版式设计，所以也不可以例外，也必须是以美学原理，美学标准，美学思想为度量评价准则的。爱美之心，人皆有之。这也是我们都渴望了解它的魅力的原因。
排版书前的构想 当老师布置下要我们自己排版书的任务时，确实有点小激动，而且从来没排过，不知道排版书的各种注意事项与排版中会遇见的各种问题。所以就想当然的觉得那是一件很简单的事情。而事实上去做的时候却发现那不是一件易事。我的书名是《最后的单纯——我的大学》这是我深思熟虑后决定用的名字，我的想法是，这是我第一次排版书，我一定要在这书上留点我自己值得纪念的东西，于是我就把书的主题围绕着我自己开始构想。我把自己喜欢的歌手、作者、书籍确定为我书内容的三大部分。又根据我书的名字，“单纯”二字，我把书的整体风格确定为清新淡雅，以便能够给人一种“单纯”的感觉。然后好像也没有想很多关于专业排版方面的问题，就按着自己平时对书本的印象和自己确立好的主题开始上网搜资料，我的构想便开始实施。 排版过程中遇见的问题 首先是不能灵活的运用已经学过的软件（photoshop、coredrawl、pagemaker）对排版需要的文字、图像进行很好的处理。例如，刚开始排书的时候就不知道如何将文字和图片导入、导出，因为涉及到图片的像素、格式以及文字的格式大小等问题，所以只这个过程的摸索我用了一节课的时间。而且有些文字和图片达不到自己想要的效果。然后就是图片文字差不多排好了，又遇到目录、页码、应用主业的问题，慢慢的一步步的这些问题在我排书的过程中遇见然后又解决。对排版的零感受、零经验由这些小问题一点点打破。 本人排版的书的优缺点 优点： （1）我对自己书的封皮和封底挺满意的，这两页我都选了蓝色为主色调，因为蓝色是大海和天空的颜色，一眼看上去给人一种清新、纯洁的感觉，这首先就符合了我的书的主题。然后我的封皮上有一个人拿着磁带看向阳光，就像是用磁带记录下我们如阳光一般的青春，点点滴滴的青春。再说封底，我选的图上有
网页设计的特点
网页设计的特点 技术与艺术的紧密结合在网页艺术设计中体现得尤为突出。 1. 交互性与持续性 就在于信息的动态更新和即时交互性。即时的交互性是 Web 成为热点的主要原因，网页不同于传统媒体之处。也是网页设计时必须考虑的问题。激进媒体（如广播、电视节目、报刊杂志等）都以线性方式提供信息，即按照信息提供者的感觉、体验和事先确定的格式来传播。而在 Web 环境下，人们不再是一个传统媒体方式的主动接受者，而是以一个主动参与者的身份加入到信息的加工处置和发布之中。这种继续的交互，使网页艺术设计不像印刷品设计那样，发表之后就意味着设计的结束。网页设计人员必需根据网站各个阶段的经营目标，配合网站不同时期的经营战略，以及用户的反馈信息，经常地对网页进行调整和修改。例如，为了坚持浏览者对网站的新鲜感，很多大型网站总是定期或不定期的进行改版，这就需要设计者在坚持网站视觉形象一贯性的基础上，不时创作出新的网页设计作品。 2. 多维性 主要体现在网页设计中对导航的设计上。由于超级链接的呈现，多维性源于超级链接。网页的组织结构更加丰富，浏览者可以在各种主题之间自由跳转，从而打破了以前人们接收信息的线性方式。例如，可将页面的组织结构分为序列结构、层次结构、网状结构、复合结构等。但页面之间的关系过于复杂，不只使浏览者检索和查找信息增加了难度，也给设计者带来了更大的困难。为了让浏览者在网页上迅速
找到所需的信息，设计者必需考虑快捷而完善的导航设计。 如果一个句子在页尾突然终止，印刷品中导航问题不是那么突出。读者会很自然地翻到下一页查找剩余部分，为了协助读者找到要找的信息，出版者提供了目录、索引或脚注。如果文章从期刊中的一页跳到后面的非顺序页时，读者会看到类似于 " 续 68 页 " 这样的指引语句。然而，作为一名网页设计者，以前所学的导航技术没有一种完全适合于网页导航。替浏览者考虑得很周到网页中，导航提供了足够的不同角度的链接，协助读者在网页的各个局部之间跳转，并告知浏览者现在所在位置、当前页面和其他页面之间的关系等。而且，每页都有一个返回主页的按钮或链接，如果页面是按层次结构组织的通常还有一个返回上级页面的链接。对于网页设计者来说，面对的不是按顺序排列的印刷页面，而是自由分散的网页，因此必需考虑更多的问题。如：怎样构建合理的页面组织结构，让浏览者对你提供的巨量信息感到条理怎样建立包括站点索引、协助页面、查询功能在内的导航系统这一切从哪儿开始，哪儿结束 3. 多种媒体的综合性 随着网络带宽的增加、芯片处置速度的提高以及跨平台的多媒体文件格式的推广，目前网页中使用的多媒体视听元素主要有文字、图像、声音、视频等。必将促使设计者综合运用多种媒体元素来设计网页，以满足和丰富浏览者对网络信息传输质量提出的更高要求。目前国内网页已经呈现了模拟三维的操作界面，数据压缩技术的改进和流（ Stream 技术的推动下， Internet 网上出现实时的音频
网页的版式设计
网页设计 网页的版式设计 在网页设计中根据特定的主题和内容，把文字、图形图像、动画、视频、色彩等信息传达要素界定在一个范围内，有机的、秩序的、艺术性的组织在一起，形成美观的页面并不是容易的事。由于多数专业的计算机技术人员缺乏艺术设计的能力，致使许多网页一直都是按固定的格式来完成，只是在文字内容上有所变化，所以使很多网页看起来千篇一律，缺乏个性。为了让网页更具艺术魅力，必须加强制作人员的艺术素养，将艺术与技术有机的结合起来，使网络呈现更绚丽的色彩。 网页的版面设计应从造型、视觉心理及版式构成几方面入手。 一、版式设计的造型 在版式空间中标题、内容、主体图形、色调、视觉中心、背景和留白都是造型的最基本元素，将这些基本元素在800*600像素或1024*768像素的版面中有机的结合起来就是设计的过程。网页版式设计常常借助多种形式的框架（骨骼），规则的框架与不规则的框架，可见的框架与不可见的框架，同时还要与文字样式、色调等因素紧密联系起来。 网页界面设计不同于报纸、杂志等版面的设计，它是动态的、变化的版面。多数人的显示器分辨率为800*600像素或1024*768像素，我们设计版面时就应以800*600像素为标准，除去滚动条所占的20像素，安全宽度应控制在780像素以内，这样才能浏览到全部的横向页面内容，垂直方向上，页面是可滚动的，版面的长度一般不作限制，但是一些较正规的网站要求滚动不超过3屏，针对这样动态的版面空间，设计起来就要存在较大的难度。为此，网页设计师应采取一些相应的对策： 1．运用自适应宽度技术。即在版面宽度超出800像素时，页面内容自动伸缩，充满整个版面，这样的技术就要求版面设计也要具有适应性。
第二节 网页的版式设计
第二节网页的版式设计 在网页设计中根据特定的主题和内容，把文字、图形图像、动画、视频、色彩等信息传达要素界定在一个范围内，有机的、秩序的、艺术性的组织在一起，形成美观的页面并不是容易的事。由于多数专业的计算机技术人员缺乏艺术设计的能力，致使许多网页一直都是按固定的格式来完成，只是在文字内容上有所变化，所以使很多网页看起来千篇一律，缺乏个性。为了让网页更具艺术魅力，必须加强制作人员的艺术素养，将艺术与技术有机的结合起来，使网络呈现更绚丽的色彩。 网页的版面设计应从造型、视觉心理及版式构成几方面入手。 一、版式设计的造型 在版式空间中标题、内容、主体图形、色调、视觉中心、背景和留白都是造型的最基本元素，将这些基本元素在800*600像素或1024*768像素的版面中有机的结合起来就是设计的过程。网页版式设计常常借助多种形式的框架（骨骼），规则的框架与不规则的框架，可见的框架与不可见的框架，同时还要与文字样式、色调等因素紧密联系起来。 网页界面设计不同于报纸、杂志等版面的设计，它是动态的、变化的版面。多数人的显示器分辨率为800*600像素或1024*768像素，我们设计版面时就应以800*600像素为标准，除去滚动条所占的20像素，安全宽度应控制在780像素以内，这样才能浏览到全部的横向页面内容，垂直方向上，页面是可滚动的，版面的长度一般不作限制，但是一些较正规的网站要求滚动不超过3屏，针对这样动态的版面空间，设计起来就要存在较大的难度。为此，网页设计师应采取一些相应的对策： 1．运用自适应宽度技术。即在版面宽度超出800像素时，页面内容自动伸缩，充满整个版面，这样的技术就要求版面设计也要具有适应性。 1024*768像素环境下的页面效果
海报版式设计分析
海报版式设计由图形、色彩、文字三大编排元素组成，图文编排在海报设计中尤为重要，它是海报设计语言、设计风格的重要体现。 在平面海报设计的发展历史上，随着工业化的进步，特别是印刷产业的革新，出版业的繁荣，在工业发达的欧洲国家，特别是德国、和瑞士和法国出现了许多有代表性的平面设计大师，设计出了经典传世佳作，并呈现出不同的设计风格和特点。 我们运用感性的对称、均衡、方向、中心、空白、分割、韵律、点线面等编排设计原理或理性网格编排设计原理，对大师的作品进行系统分析研究，来感悟海报编排设计的规律。 【案例一】德国平面设计大师作品分析 早在15世纪的德国，得力于古藤堡在金属活字印刷术上的发明与革新，人们已将文字与插图混合排版并运用于印刷媒体 ■ “青年风格”运动最重要的设计家彼得贝伦斯是德国现代设计的鼻祖，被誉为“德国现代设计之父”。贝伦斯在字体设计上进行了大胆的改革和创新，将繁琐的装饰字体设计为“无饰线”字体，他为德国电气公司所设计的海报运用简洁无装饰字体和几何形体对称的组合，通过视觉中心点状渐变的光感,表现了德国工业化时代的企业特征（图1）。 主持人提示： 现代设计经历半个多世纪的探索和实践后，1919年沃尔特格多佩斯在德国的魏玛建立“国立包豪斯学院”，强调技术与艺术的和谐统一，通过不断完善形成了 自己的体系。战后的国际主义平面设计风格在很大程度上是在包豪斯体系基础上发展起来的，后来影响了整个欧洲、美国、日本和二十世纪的中国。
德国在二战以后,涌现出了一大批对世界平面设计发展产生重大影响的设计师， 贡特尔基泽，皮埃尔门德尔，格特冯德利希，冈特兰博都是大师级的代表人物。 ■ 贡特尔基泽是“欧洲视觉诗人”派代表人物，作品具有丰富的想象力与激扬的创造力，讲 究比例和尺寸、色彩和明暗的对比关系，具有超现实主义风格特征。《和平运动》海报（图2）将文字嵌入图形之中，强调方向的版式编排，使版式中的文字与图形形成运动感。 ■ 皮埃尔门德尔用理性的哲学思想处理图形、表现主题。慕尼黑巴伐利亚国家剧院戏剧海报（图3）以简洁的图形、文字、色彩来表现主题思想，以中轴线为依据，对称的版式结构， 给人庄严、稳重、典雅之感，在文字编排上增加了一定的不对称因素，既庄重又活泼。黑色与高纯度色彩的对比，给人留下了深刻的印象。 ■ 格特冯德利希的海报设计几乎全部由文字元素组成。这与他早年从事字体设计以及长期 以来研究字体与版式的视觉语言分不开。他善于发现字母形式美的感染力，强调大与小，细与粗的强烈对比，在字母与版式的组合上寻找游戏般的快乐，他的海报充满力量，主体明确，构图严谨，成为我们今天学习和研究的典范。
网页的版式设计与色彩设计论文
网页的版式设计与色彩设计论文 一、网页的版式设计 1.针对平面设计刊物所需的内容而实行的体例、结构、标题等的艺术 设计。网页的版式是基于造型和视觉两大因素的基础上创建出的页面 形式，它同样要有版面的造型要素和形式，在适当的动画和背景音乐 的衬托下让受众得到视觉和听觉的享受。网页版式的构成一般有水平 分割、垂直分割、水平垂直交叉分割，中轴型、倾斜型、曲线型、重 心型、反复型和散点型等。 2.网页版式的艺术性与装饰性。版面布局和表现形式是版式设计艺术 的核心。按照美的需要，带有强烈的理想化倾向，以象征和装饰的手 法去概括和表现，使设计更好地为版面内容服务，以达到最佳的艺术 效果，使受众获得一种特定的情绪感染，领悟到个中传达的深刻意图，让客观效果得到充分地显现和表达，全方位体现传达信息的特殊功能。 3.网页版式的趣味性与独创性。排版设计中的趣味性，主要是指形式 的情趣。不受束缚，大胆、浪漫地表现一种理想的境界和情趣，以获 得一种活泼的版面视觉语言，从而更吸引人和打动人；独创性就是突 出个性化特征。鲜明的个性是版式设计的创意精神，别出心裁、独树 一帜的设计一定会赢得受众的青睐和广泛好评。 二、网页的色彩设计 1.色彩。色彩是沐浴于日光下的不同性质的物体，经过不同水准的吸 收而反射即视觉上所显现出来的一种复杂的现象。写实色彩要求客观、科学地观察、分析和表现客观世界的色彩规律；装饰色彩则是在自然 色彩的基础上概括、提炼、想象和夸张后所形成的色彩。写实色彩和 装饰色彩在网页设计中具有各自的舞台，分别扮演着不同的角色。 2.网页的配色。色彩知识和色彩工具是塑造网页艺术形象的条件，赋 予人们对网络文化生活的无限憧憬。维系明度、纯度和色相的三个基 本要素。明度、纯度和色相的合理对比处理是建构网页色彩设计的基
版式设计实训报告
《版式设计》实训报告 一、内容摘要 本学期通过对《版式设计》的学习，进行了为期两周的实训，对本学期学习的总结和延伸。这次版式设计实训主要完成两个项目，一是校报的排版，另一个是完成《2009中国保定敬老健身节暨京津市民与保定农家旅馆招商项目册》的设计。利用学过的软件对两个项目进行设计，熟悉设计流程，熟练软件的使用，将理论应用于实践。在实训后期修改以前做的精装书，主要是对封面和正文添加的装饰的修改，将二者融合，精致大方。这次实训主要是分组完成，增强了团队精神，同时对两个项目的设计，增强了对设计流程的认识，提高了设计水平，让我受益匪浅。 二、xx关键词 版式设计排版设计流程 目录 绪论： ....................................................................1实训项目认识： ............................................................1项目完成过程： (1) （一）项目要求： (1) （二）项目实施计划： (1) （三）项目完成过程： ......................................................2作品效果分析：
............................................................2心得体会： ................................................................3参考文献： ................................................................3实训作品： (3) 《版式设计》实训报告 一、绪论 《版式设计》课程结束后进行了为期两周的实训，将理论与实际相结合，加强对设计的认识，熟悉设计流程。本次实训主要完成两个项目，一是校报的排版，另一个是完成《2009中国保定敬老健身节暨京津市民与保定农家旅馆招商项目册》的设计。这次实训主要是分组完成，增强了团队精神，同时对两个项目的设计，增强了对设计流程的认识，提高了设计水平，让我受益匪浅。 二、实训课程的认识 对实训课程的认识包括： 课程理论、课程的性质、训练重点等内容进行阐述。 三、项目完成过程： （一）项目要求 1.校报排版要求： 1)4人一组排一份校报，四开报纸幅面尺寸为540mm×390mm，版心尺寸为490mm×350mm,版心字数为（小五号）86行×71字（6106字），中缝（小五号）86行×12字（1032字），一般分八栏，正文部分字号一般为8号。 2)用CorelDRAW软件排版时，首先要流出血线，拉参考线，方便报纸排版。
网页的版式设计风格
版式设计精品课程 网页的版式设计风格 很多从事网页设计的计算机专业人员，对于网页的制作技术驾轻就熟，但对于网页富有艺术性和个性的设计却感到力不从心。特别是没有经过艺术设计专业训练的网页制作者，在掌握了网页制作技术的情况下，都渴望将自己的网页制作得更具创意和美感。目前关于网页制作的讨论和介绍，多以讲解软件的技术性操作为主要内容，侧重艺术方面的非常之少。经过作者同意，从这一期开始，我们选载《网页艺术设计》一书的部分章节，从最基本的内容讲起，希望对广大网页制作者有所助益。 1、文字的格式化 1）字号、字体、行距 字号大小可以用不同的方式来计算，例如磅（point）或像素（pixel）。因为以计算机的像素技术为基础的单位需要在打印时转换为磅，所以，建议采用磅为单位。 最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。 网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。 粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多采。关键是如何根据页面内容来掌握这个比例关系。 从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器
版式设计精品课程 是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。解决问题的办法是：在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。 行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。这主要是出于以下考虑：适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。 除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。 行距可以用行高（line-height）属性来设置，建议以磅或默认行高的百分数为单位。例如：｛line-height：20pt｝、｛line-height：150%｝。 2）文字的整体编排 页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲，所有的设计元素都可以理解为图形。 ①文字的图形化 字体具有两方面的作用：一是实现字意与语义的功能，二是美学效应。所谓文字的图形化，即是强调它的美学效应，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。无论怎样，一切都应围绕如何更出色地实现自
《版式设计》教案
(此文档为word格式，下载后您可任意编辑修改！) 《版式设计》课程教学大纲 一、本课程教学的目的与原则 通过本课程教学，明确版式设计原理在设计活动中至关重要的作用，对学生艺术潜质、思维方式、创造能力等综合素质的全面开发和培养，帮助学生掌握科学的思维方法、搭建完备的设计理念构架、构建合理的设计知识体系，自觉地运用版式设计原理进行艺术设计。 二、学习方法指导 1、以案例分析为主，通过对优秀版式设计作品剖析和模仿，引导学生建立版式设计的整体概念。 2、强调研究性学习的方法，确定专题性课题设计及组织讨论，从而引导学生在实战训练中熟练掌握设计原则。 三、本课程的重点与难点 本课程的重点是在案例教学中，培养学生整体把握版式设计中文字、图形、色彩三要素的构成关系，通过课题设计理解黑、白、灰整体分区概念；点、线、面在版式设计中的运用；各种设计原则及表现。 难点是把握具体设计内容与形式表现之间的关系；文字与文字、文字与图形之间整体与局部的构成关系。 四、本课程教学基本内容 第一章版式设计概念 [知识点提示] 版式设计概念 [重、难点提示] 建立对版式构成元素进行整体设计的概念 第一节版式设计概念导入 第二节传统中国书籍的版式 1、传统中国书籍的版面术语名称 2、传统中国书籍的版式设计特征
第二章版式设计原则 [知识点提示] 版式设计整体概念理解 [重、难点提示] 建立对版式整体设计的意识 第一节整体性原则 1、主次分明 2、分类编排 3、设计元素处理 第一节简洁性原则 第三章版式设计原理 [知识点提示] 设计原理 [重、难点提示] 黑、白、灰与点、线、面的整体布局关系，协调性与空间 第一节分类 1、同类合并原则 2、确定中心内容 3、邻近原则 第二节分区 1、黑、白、灰关系 2、面的构成 3、空白空间 第三节分栏 1、网格构成 2、版式设计中的线 3、重复原则 阶段性小结与讲评
网页设计 视觉流程及版式类型
视觉流程及版式类型(一) 2006-08-0708:52:53 大中小 在视觉心理学家的研究中，视觉运动规律是其成果之一。一条垂直线在页面上，会引导视线作上下的视觉流动；水平线会引导视线向左右的视觉流动；斜线比垂直线、水平线有更强的视觉诉求力；矩形的视线流动是向四方发射的；圆形的视线流动是辐射状的；三角形则随着顶角之方向使视线产生流动；各种图形从大到小渐层排列时，视线会强烈地按照排列方向流动。 视觉流程，是视线在观赏物上的移动过程，是二维或三维空间中的运动。这种视觉的流动线极为重要，同时又是很容易被网页设计者忽视的因素。经验丰富的设计者都对此非常重视，他们善于运用这条贯穿页面的主线，设计易于浏览的页面。从某个角度讲，视觉流程的设计结果就是版式。本章也将对网页设计的版式设计进行总结和阐述。 1.视觉流程的筹划 视觉流程是网页版式设计的重要内容，可以说，视觉流程运用的好坏，是设计者技巧成熟与否的表现。视觉流程的筹划包括几个重要的因素，下面就对它们作具体的归纳与分析。 页面中不同的视域，注目程度不同，给人心理上的感受也不同。一般而言，上部给人轻快、漂浮、积极、高昂之感；下部给人压抑、沉重、限制、稳定的印象；左侧，感觉轻便、自由、舒展，富于活力；右侧，感觉局促却显得庄重。网页中最重要的信息，应安排在注目率最高的页面位置，这个位置便是页面的最佳视域。
图1 页面的设计轻松而具均衡的形式感，把最佳视域留给了横贯页面的大Banner
图 2 作为个性化的视觉元素，拼贴剪纸式的文字分别占据了三个点，吸引视线在它们之间流动 人们阅读材料时习惯按照从左到右，从上到下的顺序进行。浏览者的眼睛首先看到的是页面的左上角，然后逐渐往下看。根据这一习惯，设计时可以把重要信息放在页面的左上角或页面顶部，如公司的标志、最新消息等，然后按重要性依次放置其他内容。 重要的信息应该让浏览者最容易发现，而不是深藏在多层链接之后。
13种典型网页版式设计介绍
一、骨骼型 骨骼型是一种规范的理性的分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。在图片和文字的编排上则严格按照骨骼比例进行编排配置，给人以严谨、和谐、理性的美。骨骼经过相互混合后的版式，既理性、条理，又活泼而具弹性。 二、满版型 版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉，是商品广告常用的形式。 三、上下分割型 把整个版面分为上下两个部分，在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。 四、左右分割型 把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。不过，倘若将分割线虚化处理，或用文字进行左右重复或穿插，
左右图文则变得自然和谐。 五、中轴型 将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。 六、曲线型 图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。 七、倾斜型 版面主体形象或多幅图版做倾斜编排，造成版面强烈的动感和不稳定因素，引人注目。 八、对称型 对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以避免过于严谨。对称一般以左右对称居多。 九、中心型 重心有三种楷念。1、直接以独立而轮廓分明的形象占据版
版式设计的应用分析
版式设计的应用分析
版式设计的应用分析 摘要： 视觉是人们获取信息最重要最直接的感觉，人们的衣、食、住、行，方方面面都很 难脱离视觉而完成。版式设计是视觉传达体系的一部分，是作为具有实用价值和艺术价 值的造型而存在和被感知的。将有限的视觉元素进行合理的排列组合，将理性思维个性 化地表现出来，在传达信息的同时，也给人视觉上的享受，这是版式设计的最终目的。 版式设计的历史虽然并不久远，但在广大学者的探索与研究下变的越来越有据可依。本 论文主要是结合普通心理学、视觉心理学、艺术心理学和视觉艺术心理学等相关的理论
知识对版式设计的原则、方法进行分析和研究。将版式设计的原则、方法与心理学的相 关理论结合起来，通过使用案例分析的方法，分析版式设计中存在的心理体验，站在受 众心理的角度审视版式设计的原则与方法，从而指导设计者在设计实践中有效传达主题 信息，并使读者产生阅读兴趣，获得阅读享受。 第一部分版式设计的应用范围 版式设计主要应用在包括报纸、刊物、书籍（画册）、产品样本、挂历、招贴画、唱片封套和网页页面等平面设计的各个领域。 随着人类生活水平的提高，人类更加注重精神生活的发展，比如书籍的出现，为人类精神生活的满足提供了更丰富的想象空间。后来
随之出现的报纸、刊物等更是丰富了人的阅读需求。所以版式设计作为这些读物的基本设计基础被广泛的应用。 随着经济的发展和科技水平的提高，新媒体的出现使人类获取信息的渠道不仅局限于平面领域，还会运用科技的平台应用到影视和网页方面。 第二部分版式设计的个性 由于人类审美的需求，还有各个领域不同的行业需求，版式需要有一定的个性去更好的诠释传统媒体艺术以及新媒体艺术的特性。我们从以下方面来体现版式设计的个性：主题的思想性与传播信息的单一性；版面的艺术性与装饰性；形式的趣味性与独创性；思想内容的整体性与协调性。
网页版式设计形式分析(潘辉)
网页版式设计形式分析 华中师范大学美术学院艺术设计系潘辉 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