《网页版面及编排艺术》第6 7章辅导.doc

第6章 网页中的版式设计一、要点解析1版式设计版式设计是在版面上将有限的视觉元素进行有机的排列组合。版式设计是让观看者在享受美感的同时，接受作者想要传达的信息。2版式设计的原则一般遵循效果清晰和定位准确的原则。设计的主题内容简单明了、形式与内容统一、注意整体上的视觉统一感。3版式设计的组织方法版式构成原理的视线流程规律是从左向右流动，从上到下流动，或是以斜线进行有序组织画面的流动。根据此原理组织画面，一般有5种组织方法：主题与背景形象的对比、大与小的对比、亮与暗的对比、重复与节奏、虚实空白。4版式设计的基本步骤第一步：确定所需要传达的信息。第二步：寻找、收集表达主题所需要的素材含文字、图形、图像等。第三步：确定版面视觉元素的分布形式。第四步：使用图形图像处理软件进行制作。5版式设计的造型元素点、线、面；框架。 点的基本形态点通常指一些小而集中的物体。点大体分为规则点和不规则点，规则点是具有规则外形的圆点、方形点、三角形点、星形点等，不规则点是指任何自由形态的点。在相同的视觉环境下，相对面积越小，点的感觉越强。 点的作用当画面上仅存在一个点时，人们的视线自然而然集中到这个点上。当有两个相同大小的点时，人们的视线会从其中一点开始，然后再移到另一点，最后在两点之间来回移动。不同大小的两点，视线会首先放在大点上，然后再移动到小点上。点的外形不同，给人的视觉和心理的反映也不一样，一个外形凸出的点，其视觉力量由凸起的方向向外扩张，其凸起的部位越大，向外扩张的力量也就越大：一个外形向内凹陷的点，其视觉力量也随凹陷向内收缩，有受到外力压迫的感觉。 线的特性直线简洁抽象，有力度。粗线条具有男性强有力的感觉；细线锐利、敏感。垂直线庄重、明确，分割左右，连接上下。水平线令人产生开阔、平静、安定的感觉，表现的是向两侧拓展的张力。斜线活跃、不安定，富于变化，有活力。曲线柔和、优美、富有旋律感，具有女性特征。几何曲线精密、严谨，富有理性和现代感。自由曲线具有很强的偶然性，是一种带有丰富情绪的线条，颇具人情味。 面的种类四类：几何形、有机形、偶然形、不规则形。几何形是用数学方法完成的最为标准的形。包括三角形、四边形、圆形和椭圆形，一般是由直线和几何曲线构成。有机形是不能用数学方法求得，而是靠自然的外力而形成的自然形。用手轻松自然地画出的自由曲线所围成的形也具有有机形的特点：自然、流畅、淳朴和柔和。偶然形是偶然产生的形。偶然形虽不能完全控制其产生的过程，但如果能有效地选择其产生的结果，利用自然生动的外形特征，可以创造出大量的富于个性、新颖、怪异的艺术造型。不规则形是不受任何限制、没有任何规律的造型。不规则形与几何形的性格完全相反，不具有秩序美和机械的冷漠感，而是最具人情味的形。6网页版式的基本类型骨骼型、满版型、曲线型、倾斜型、对称型、焦点型、三角型、自由型等。 骨骼型将文字和图片分布在网页的骨骼中进行分栏排版。这种版式设计需要严格按照骨骼比例对文字和图片进行编排，能体现和谐、理性的美。 满版型运用特定的图片进行整个版面的设计，图像充满整版，形成强烈的视觉效果，也可将部分文字放置于图像之上。这种版式视觉传达效果直观而强烈，物体比较突出，给人舒展大方的感觉。 曲线型将图形与文字的排列呈曲线型。这种形式轻松，具有节奏美感，结合内容来设计，更能达到好的视觉效果。 倾斜型通过文字、图片或者设计的外轮廓形象的倾斜编排呈现一种运动的效果，达到一种指示和活跃的运动感，也是一种很好的吸引视线的方法。 对称型对称的版式，给人稳定、理性的感受。对称依靠轴放置元素，版面中有中轴、横轴、纵轴等，此设计形式通常具有版式的平衡感。对称的手法有两种：绝对对称和相对对称。绝对对称是指左右或上下对称的图形是完全一样的。相对对称是指左右上下对称的图形是比较近似的，这个近似可以是形体上的近似，也可以是内容上具有关联。四角型也是对称型的一种，是在页面四角安排相应的视觉元素。 焦点型使用中心、向心、离心三种手法，通过对视线的引导，使页面具有强烈的视觉效果。中心：将对比强烈的图片或文字置于页面的视觉中心，达到效果。向心：以视觉中的设计元素来引导浏览者的视线向页面中心靠拢，形成一个向心的版式。向心版式是集中的、稳定的，是一种传统手法。离心：让视觉元素引导浏览者的视线向外辐射，形成一个离心的版式。这种方法效果很现代、外向、活泼，但是也很容易形成花哨的效果。 三角型将图形（图片）与文字摆放在三角形中，视觉中呈现一个三角形，或者呈现一个倒三角型、倾斜三角形。正三角形最具稳定性，倒三角形则产生动感，侧三角形构成一种均衡版式，既安定又有动感。这种形式结合内容来做，可以使版面既有活泼、动态感，又不失版面的均衡感。 自由型自由型的页面具有活泼、轻快的风格。7页面的空间分割方式横向分割、纵向分割、中轴型分割、复合型分割等。二、典型例题1网页版式设计属于（ ）研究领域。A色彩设计 B构成设计 C媒体设计 D视觉传达设计答案：D2在视觉传达设计中，点的属性包括（ ）。A位置、大小 B位置、形状 C位置、大小、形状 D位置、大小、形状、色彩答案：C3在视觉传达设计中，线的属性包括（ ）。A位置、长度 B位置、厚度C位置、长度、厚度 D位置、长度、宽度、厚度答案：D4在视觉传达设计中，面的种类分为（ ）。A规则形、不规则形 B几何形、自然形、不规则形C几何形、偶然形、不规则形 D几何形、有机形、偶然形、不规则形答案：D5网页设计中将文字和图片分布在网页中进行分栏排版属于（ ）版式。A骨骼型 B满版型 C对称型 D自由型答案：A6网页设计中图片充满整个版面，形成直观而强烈的视觉效果属于（ ）版式。A骨骼型 B满版型 C对称型 D焦点型答案：B第7章 网页中的动画设计一、要点解析1动画动画是由多张静态画面组成，在一定的时间内使一幅幅静止的画面连续播放，串联在一起就产生了动画效果。计算机动画是采用连续播放静止图像的方法产生景物运动的效果，即使用计算机产生图形、图像运动的技术。2网页动画设计网页动画设计是在网页中加入一定数量的动画元素，使网页看起来更具生气，更容易吸引浏览者的视线。3网页动画设计基本要求做好计划、内容与形式的统一、信息符号的选择、体现创意、注意文件大小、动画为网页整体服务。4网页动画布局特点 动画与内容的搭配动态图像可以是网页的动态图标、按钮、广告，许多网站将自己的宣传标语或标志性图案（LOGO）设计成动画形式。某些页面为了突出某些栏目的重要性或独特性，将栏目的标题以动画形式出现，从而达到吸引浏览者的目的，同时也起到活跃页面的作用。 动静结合人的视觉总是处在一个不断运动的状态中，即便视觉主体是静止不动的，视线也在不断搜索发现视觉焦点的过程中。网页上放置的动画应少而精，一张网页上一般不要超过三幅动画，多幅会相互影响，反而失去了吸引力。如果在页面上必须出现不止一个动画，也应给予较大的区别，运用视觉传达的规律，有意识地使观众的视线关注区域有个流动过程。 动画的位置动画的位置一般是在页面的页眉处，有的是多个动画放在广告位置处。在页面构图的布局中，动画作为特殊元素，在处理时候应和其他静态元素有机地融合，协调一致，为页面的整体布局服务，不能脱离整体的风格而成为独立的个体。5网页动画常见类型GIF动画（逐帧动画）、FLASH动画（矢量动画）、JAVA动画（JAVA特效）。6常见的网页动画效果色彩循环动画、文字与图片动画。其中，文字与图片动画包括：滚动、淡入和淡出、飞行、旋转、闪烁和灯光效果、变形、交互。二、典型例题1人类眼睛的视觉暂留现象是指两个视觉印象之间的间隔不超过（ ），两个视觉印象便会连接在一起。A0.1秒 B0.5秒C0.8秒D1秒答案：A2一般情况，浏览者可以接受的网页动画下载时间最多（ ）。A5秒 B10秒 C20秒 D30秒答案：D3关于GIF动画的描述错误的是（ ）。AGIF动画属于逐帧动画BGIF动画能够支持256种色彩CGIF动画能够集成声音DGIF动画制作比较简单答案：C4网页图片文件中以“.gif”为后缀