第6章网页中的版式设计 一、要点解析 1.版式设计 版式设计是在藏面上将有限的视觉元素进行有机的排列组合。版式设计是让观看者在享受美感 的问时，接受作者想要传达的信息。 2.版式设计的原则 一般遵循效果清晰和定位准确的原则。设计的主思内容简单明了、形式与内容统一、注意整体 上的祝觉统一感. 3。版式设计的组织方法 版式构成原理的视线流程规律是从左向右流动，从上到下流动，或是以斜线进行有序组织画面 的流动。根据此原理组织面面，一般有5种组织方法：主题与背景形象的对比，大与小的对比、亮 与暗的对比，重复与节奏、虚实空白。 4。版式设计的基本步骤 第一步：确定所需要传达的信息， 第二步：寻找、收集表达主愿所需要的素材一含文字、图形、图像等。 第三步：确定版面视境元素的分布形式， 第四步：使用图形图像处理软件进行制作。 5。版式设计的造型元素 点、线、面：框架。 ()点的基本形态 点通常指一些小而集中的物体。点大体分为线则点和不规则点，规则点是具有规则外形的圆点、 方形点、三角形点、星形点等，不规则点是指任何白由形态的点。在相同的视凳环境下，相对面积 越小，点的感觉越强。 (购点的作用 当画面面上仅存在一个点时，人们的视线自然而然集中到这个点上，当有两个相同大小的点时， 人们的视线会从其中一点开始，然后再移到另一点。最后在两点之间来具移动。不同大小的两点， 视线会首先放在大点上，然后再移动到小点上，点的外形不同，给人的视觉和心理的反职也不一样， 一个外形凸出的点，其视凭力量由凸起的方向向外扩张，其凸起的部位越大，白外扩张的力量也就 越大：一个外形向内凹陷的点，其视觉力量也随凹陷向内数缩。有受到外力压迫的感觉。 (固线的特性 直线简洁抽象，有力度。粗线条具有男性强有力的感觉：细线悦利、敏感。垂直线庄重、明确。 分割左右，连接上下。，水平线令人产生开国、平静、安定的感觉，表现的是向两侧拓展的张力。斜 线活跃、不安定，富于变化。有活力
1 第 6 章 网页中的版式设计 一、要点解析 1．版式设计 版式设计是在版面上将有限的视觉元素进行有机的排列组合。版式设计是让观看者在享受美感 的同时，接受作者想要传达的信息。 2．版式设计的原则 一般遵循效果清晰和定位准确的原则。设计的主题内容简单明了、形式与内容统一、注意整体 上的视觉统一感。 3．版式设计的组织方法 版式构成原理的视线流程规律是从左向右流动，从上到下流动，或是以斜线进行有序组织画面 的流动。根据此原理组织画面，一般有 5 种组织方法：主题与背景形象的对比、大与小的对比、亮 与暗的对比、重复与节奏、虚实空白。 4．版式设计的基本步骤 第一步：确定所需要传达的信息。 第二步：寻找、收集表达主题所需要的素材——含文字、图形、图像等。 第三步：确定版面视觉元素的分布形式。 第四步：使用图形图像处理软件进行制作。 5．版式设计的造型元素 点、线、面；框架。 ⑴ 点的基本形态 点通常指一些小而集中的物体。点大体分为规则点和不规则点，规则点是具有规则外形的圆点、 方形点、三角形点、星形点等，不规则点是指任何自由形态的点。在相同的视觉环境下，相对面积 越小，点的感觉越强。 ⑵ 点的作用 当画面上仅存在一个点时，人们的视线自然而然集中到这个点上。当有两个相同大小的点时， 人们的视线会从其中一点开始，然后再移到另一点，最后在两点之间来回移动。不同大小的两点， 视线会首先放在大点上，然后再移动到小点上。点的外形不同，给人的视觉和心理的反映也不一样， 一个外形凸出的点，其视觉力量由凸起的方向向外扩张，其凸起的部位越大，向外扩张的力量也就 越大：一个外形向内凹陷的点，其视觉力量也随凹陷向内收缩，有受到外力压迫的感觉。 ⑶ 线的特性 直线简洁抽象，有力度。粗线条具有男性强有力的感觉；细线锐利、敏感。垂直线庄重、明确， 分割左右，连接上下。水平线令人产生开阔、平静、安定的感觉，表现的是向两侧拓展的张力。斜 线活跃、不安定，富于变化，有活力
曲线柔和、促美，富有能律感。具有女性转狂。几何曲线精密、严谨。富有理性和现代感。自 由由线具有很强的偶然性，是一种带有市富情绪的线条。颜具人情味。 (0面的种类 四类：几何形、有机形、偶然形、不规则形。 几何形是用数学方法完成的最为标准的形。包括三角形、四边形、圆形和桶圆形，一般是由直 线和几何由线构成。 有机形是不能用数学方法求得。而是靠自然的外力而形成的自然形。用手轻松自然地面出的自 由由线所围成的形也风有有机形的特点：自然、流畅、掉朴和柔和。 偶然形是偶松产生的形。偶燃形虽不能完全控制其产生的过程，但如果能有效地选释其产生的 结果，利用自然生动的外形特征，可以创适出大量的富于个性、新颗、怪异的艺术造型。 不规则形是不受任何限制，没有任何规律的造型。不规则形与几何形的性格完全相反，不具有 供序美和机械的冷滇感，而是最具人情味的形。 6,网页版式的基本类型 骨格型、满版型、曲线型、顿料型、对称型，焦点型、三角型、自由型等。 ()骨整型 将文字和图片分布在网页的骨路中进行分栏排版。这种版式设计需要严格按组骨格比例财文字 和图片进行编排，修体现和藩，理性的美。 (☑满板型 运用特定的图片进行整个版面的设计，图像充满整版，形成强烈的视觉效果，也可将部分文字 放置于图像之上。这种版式视觉传达效果直观面强烈，物体比较突出，命人舒展大方的感觉。 (因自线型 将图形与文字的排列星曲线型。这种形式轻松。具有节奏美感。结合内容米设计，更能达到好 的视觉效果。 (0顿斜型 通过文字、图片或者设计的外轮佛形象的镜斜编排星现一种运动的效果，达到一种指示和话跃 的运动感，也是一种很好的吸引视线的方法 (句对称型 对称的版式，给人稳定、理性的感受。对称依靠轴成置元素，版面中有中轴、横轴、城轴等， 此设计形式通常具有版式的平衡感。 对称的手法有两种：绝对对称和相对对称，她对对称是指左右或上下对称的图形是完全一样的。 相对对称是指左右上下对称的图形是比较运制的，这个近似可以是形体上的近似，也可以是内容上 具有关联。周角型也是对称型的一种，是在页面四角安排相应的视觉元素。 焗焦点型 使用中心、向心，离心三种手法，通过对视线的引导，使页面具有强烈的视觉效果。 中心：将对比强烈的图片成文字置于页面的视觉中心，达到效果。 2
2 曲线柔和、优美、富有旋律感，具有女性特征。几何曲线精密、严谨，富有理性和现代感。自 由曲线具有很强的偶然性，是一种带有丰富情绪的线条，颇具人情味。 ⑷ 面的种类 四类：几何形、有机形、偶然形、不规则形。 几何形是用数学方法完成的最为标准的形。包括三角形、四边形、圆形和椭圆形，一般是由直 线和几何曲线构成。 有机形是不能用数学方法求得，而是靠自然的外力而形成的自然形。用手轻松自然地画出的自 由曲线所围成的形也具有有机形的特点：自然、流畅、淳朴和柔和。 偶然形是偶然产生的形。偶然形虽不能完全控制其产生的过程，但如果能有效地选择其产生的 结果，利用自然生动的外形特征，可以创造出大量的富于个性、新颖、怪异的艺术造型。 不规则形是不受任何限制、没有任何规律的造型。不规则形与几何形的性格完全相反，不具有 秩序美和机械的冷漠感，而是最具人情味的形。 6．网页版式的基本类型 骨骼型、满版型、曲线型、倾斜型、对称型、焦点型、三角型、自由型等。 ⑴ 骨骼型 将文字和图片分布在网页的骨骼中进行分栏排版。这种版式设计需要严格按照骨骼比例对文字 和图片进行编排，能体现和谐、理性的美。 ⑵ 满版型 运用特定的图片进行整个版面的设计，图像充满整版，形成强烈的视觉效果，也可将部分文字 放置于图像之上。这种版式视觉传达效果直观而强烈，物体比较突出，给人舒展大方的感觉。 ⑶ 曲线型 将图形与文字的排列呈曲线型。这种形式轻松，具有节奏美感，结合内容来设计，更能达到好 的视觉效果。 ⑷ 倾斜型 通过文字、图片或者设计的外轮廓形象的倾斜编排呈现一种运动的效果，达到一种指示和活跃 的运动感，也是一种很好的吸引视线的方法。 ⑸ 对称型 对称的版式，给人稳定、理性的感受。对称依靠轴放置元素，版面中有中轴、横轴、纵轴等， 此设计形式通常具有版式的平衡感。 对称的手法有两种：绝对对称和相对对称。绝对对称是指左右或上下对称的图形是完全一样的。 相对对称是指左右上下对称的图形是比较近似的，这个近似可以是形体上的近似，也可以是内容上 具有关联。四角型也是对称型的一种，是在页面四角安排相应的视觉元素。 ⑹ 焦点型 使用中心、向心、离心三种手法，通过对视线的引导，使页面具有强烈的视觉效果。 中心：将对比强烈的图片或文字置于页面的视觉中心，达到效果
向心：以视觉中的设计元素来引导测览者的视线向页面中心章，形成一个向心的版式。向心 版式是集中的、稳定的，是一种传饶于法。 离心：让视觉元素引导测莫者的视线向外辐射。形成一个离心的版式。这种方法效果根现代、 外向，活漫，国是也很容易形成花喃的效果。 (们三角型 将图形（图片）与文字摆做在三角形中，视觉中显现一个三角形，或者呈现一个倒三角型、倾 斜三角形。正三角形最具稳定性，倒三角形则产生动感，侧三角形构成一种均衡版式，既安定又有 动感。这种形式结合内容米做，可以使版面既有活藏，动态感。又不失版面的均衡感。 (圈自由型 自由型的页面具有话泼、轻快的风格。 7.页面的空向分割方式 横向分制、飙向分割、中轴重分割、复合重分割等。 二、典型例题 1,网真版式设计属于()研究领域， A.色彩设计B.构成设计C.媒体设计D.视凭传达设计 容案：D 2.在祝竟传达设计中，点的属性包括()。 A:位置、大小 B。位置、形状 C.位置、大小，形状D.位置、大小形状，色彩 答案：C 3.在提觉传达设计中，线的属性包括《)， A.位置、长度 B.位置、厚度 C.位置、长度、厚度 D.位置、长度、定度、厚度 答案：D 4,在钱觉传达设计中，面的种类分为《)。 A。规则形，不规则形 B,几何形，自然形、不规则形 C,几何形、偶然形、不规则形D.几何形、有机形、偶然形、不规则形 答案：D 5.网页设计中将文字和图片分布在网页中进行分栏排版属于()版式。 A,骨路型B.满版型C,对称型D.白由型 答案：A 6,网页设计中图片充满整个版面。形成直观而强烈的视觉效果属于()版式。 A。骨路型B。满版型C.对称型D.焦点型 答案：B
3 向心：以视觉中的设计元素来引导浏览者的视线向页面中心靠拢，形成一个向心的版式。向心 版式是集中的、稳定的，是一种传统手法。 离心：让视觉元素引导浏览者的视线向外辐射，形成一个离心的版式。这种方法效果很现代、 外向、活泼，但是也很容易形成花哨的效果。 ⑺ 三角型 将图形（图片）与文字摆放在三角形中，视觉中呈现一个三角形，或者呈现一个倒三角型、倾 斜三角形。正三角形最具稳定性，倒三角形则产生动感，侧三角形构成一种均衡版式，既安定又有 动感。这种形式结合内容来做，可以使版面既有活泼、动态感，又不失版面的均衡感。 ⑻ 自由型 自由型的页面具有活泼、轻快的风格。 7．页面的空间分割方式 横向分割、纵向分割、中轴型分割、复合型分割等。 二、典型例题 1．网页版式设计属于（ ）研究领域。 A．色彩设计 B．构成设计 C．媒体设计 D．视觉传达设计 答案：D 2．在视觉传达设计中，点的属性包括（ ）。 A．位置、大小 B．位置、形状 C．位置、大小、形状 D．位置、大小、形状、色彩 答案：C 3．在视觉传达设计中，线的属性包括（ ）。 A．位置、长度 B．位置、厚度 C．位置、长度、厚度 D．位置、长度、宽度、厚度 答案：D 4．在视觉传达设计中，面的种类分为（ ）。 A．规则形、不规则形 B．几何形、自然形、不规则形 C．几何形、偶然形、不规则形 D．几何形、有机形、偶然形、不规则形 答案：D 5．网页设计中将文字和图片分布在网页中进行分栏排版属于（ ）版式。 A．骨骼型 B．满版型 C．对称型 D．自由型 答案：A 6．网页设计中图片充满整个版面，形成直观而强烈的视觉效果属于（ ）版式。 A．骨骼型 B．满版型 C．对称型 D．焦点型 答案：B