《版式设计》教案

《版式设计》教案

授课班级授课形式讲授页码1

授课日期授课时数1课时

授课章节名称第一章版式设计概述

教学目的了解版面设计的概念、发展流程，掌握版面设计的程序。

教学重点版面设计的程序

教学难点传统版面设计、包豪斯时期的版面设计

更新、补充、

删节、内容无

教学手段多媒体演示（PPT）

课外作业无

课后体会

教学过程设计

一版面设计的概念

版面设计在平面设计领域是一个十分重要的环节，它既需要对相关设计软件和设计元素有一定的把握，

又需要能够综合的运用以上要素和艺术的表现力，针对设计需求，对图片和文字进行组织、整合、版式，

使画面产生新的面貌。优秀的版面设计其视觉传达效果更佳，信息更易吸收，能够提高读者的阅读兴趣，

帮助读者在获取信息的过程中轻松愉悦的了解内容。

图例

(名片设计)(宣传册设计)

（招贴设计）

所以可以这样理解版面设计：版面设计是运用平面设计要素进行有计划、有目的的平面展示，达到准

确、有效的传达效果。

二版面设计的历史

版面设计发展经历了漫长的过程。其出现的原因主要是随着文化和经济的发展，信息量的增加，早起的类

交流和传播模式已经无法满足文化和文明延续的需求。纸张的出现，使手稿记载历史成为现实，而印刷技

术的出现为信息的广泛传播提供的更广阔的渠道。这一点无论在东方还是西方都有相似性。

1在人类文明发展的早期阶段，无论是岩壁绘画还是兽骨刻写，都具有原始的排版意识。

2中国的版面设计从简册设计开始，简册背面标有篇名和篇次，将其卷起时，文字正好显示在外面，方便

阅读和查找。奠定了中国传统文字竖式排版，从右至左、从上至下的阅读方式，这一方式在日本和台湾地

区的信息传播媒介中至今可见。

3在欧洲，早期的手抄本奠定了西方版式设计的雏形，随着古藤堡金属印刷技术的发明以及工业革命的影

响，1845年，理查德.霍改良了印刷机器，垂直版式设计取得了主导地位。这种版式以竖栏为基本单位、

文字小、图片小、标题不跨栏。

420世纪60年代，人们对版面设计的重视程度达到了前所未有的水平。版面以色彩和图片为基础，文字

和图片灵活组合传递信息，并且出现了留白，这成为西方版面发展过程中的转折，也影响了东方的版面设

计。

二版式设计的概念

英文将板式（版式）设计称为Layout，意思是在一个平面上展开设计调度，其是将文字、插图、图片、标

记符号等构成要素，按照一定的审美规律，结合设计的具体特点，使之成为一个整体传达的设计方法．

三版式设计的程序

版式设计的最终目的是有效的传播信息，追求主题和形式的统一，设计的过程也是讲求从视觉到内容的

不断完善。版面设计的内容很多，书籍、包装、招贴、宣传单页等等，其所针对的受众从年龄、职业、性

别等各方面均有不同，这就要求版面设计最初要从定位读者群体入手，明确设计风格。版面设计的流程也

由此展开：

1定位读者群

在做排版的过程中，无任何思考的版式或为了追求形式美而将版面设计的过于花哨都是不可取的。一定要

以读者群体为核心。例如儿童书籍需要图多字少，年轻人看的书要色彩明快、个性、时尚，老年人看的书

字号选择上要稍大一些，版面规整，符合常规的阅读习惯即可。读者的定位是版面设计首要解决的问题，

根据读者不同而设计的版面风格和版面结构，才能够更好的、更有效的传达信息，树立版面风格形象，得

到读者的认可。

如图：

2明确具体设计对象

定位读者群后，设计师有时会发现虽然是同一种版面设计类型（例如都是为杂志排版），但是设计对象仍有

差别，那么就需要根据主题，选择适合的元素，最后再考虑采用什么样的表现形式，实现版式与色彩的完

美搭配。例如下面两则杂质内页，前者版面风格间接流畅明快大气，后者为某一品牌T恤设计的版面注重

个性化特征，自由的图形元素被穿插其中。

如图：

3明确信息主体

在版面中，图形、图片、文字、色彩在多数情况下是并存的，但是其主次轻重却有不同，招贴广告就以图

说话，儿童读物也是如此，而文学期刊以字为主，要突出的信息主体的不同要求设计师在排版过程中明确

各部分要素的主次，无论在版面位置上、比例上还是色彩上均要做出调整，这样才能更好的体现信息传达

的意图。

如图：

4制定计划和设计流程

在做设计之前，要求对设计背景进行了解，是为公司作产品宣传，还是设计一套个人画册，收集资料、进

行分析，确定自己的设计方案，最后根据自己的设计方案安排设计内容，这是行之有效的版面设计过程。

手绘草图是实现版面构思的第一步，可以帮助构思的完整性。最后再上电脑完成制作稿。在确定设计内容

后，设计师可以对版式设计上的基本步骤做简单分析。首先是建立空白页面，然后在版面上划分整个版面

结构，最后根据信息主次按照一定顺序将文字、图形排列。

四版式设计作品案例分析

五小结与作业

1版式设计的概念是什么？

2版式设计经历了哪几个阶段？

3版式设计为什么要首先了解主题、熟悉设计背景？

4版式设计的程序包括哪几步？

5请搜集10张各种类型的版式设计(海报设计、UI设计、包装设计、书籍设计）作品并分析他们的优缺

点

多媒体演示

授课班级授课形式(PPT)案例页码2

教学

授课日期授课时数4课时

授课章节名称第二章版面设计要）

教学目的版面设计的抽象要素与具象要素之间的转换关系

教学重点版面设计的抽象要素与具象要素之间的转换关系

教学难点版面设计的抽象要素与具象要素之间的转换关系

更新、补充、

删节、内容无

教学手段多媒体演示(PPT)案例教学、课堂讲授

课外作业个性名片设计

课后体会

教学过程设计

一版面设计要素

版面设计要新颖、美观、大气，符合阅读受众的阅读需要，关键在于如何把握版面构成而引导人们的

视觉感受。视觉构成的基本要素是点、线、面。点线面的不同组合方式会产生不同的视觉效果，而具体到

版面设计，是如何把握点线面的具象变化，也就是如何将文字、图片、图形归结到点线面的组合上，这是

对版面整体布局的把握，十分重要。

1点的版式构成

点是最基本的形。版面设计意义上的点，必须是可视的，点可以是一个形，也可以是一块色彩，一张小

小的照片或图像，点可以以任何一种形态呈现。点在空间的大小上可以与线和面区分开来，但它们之间的

界限是相对的、可变的。联系具象的版面设计要素，点可以是一个字，一个符号，一个色点，一个形状，

甚至一张图片。

点的重复可以成为线。文字的排列也是一条线。

如图：

点的横向纵向重复延伸可以成为不同形态的面。

点在版面设计中有许多作用:

点能够成为画面中心，成为画龙点睛之“点”。

点能够点缀和活跃画面气氛点可以和其他形态组合，起着平衡画面轻重，填补一定空间的作用。

点还能够成为画面主体，形成不同的画面肌理效果。

2线的版式构成

线是点的发展和延伸。线的性质在版式设计中是多样性的。线有形状、色彩、肌理等多种变化，线是有性

格的。

线可表达飞动和静止的感受，具有长短、粗细、深浅、正负等变化。组合起来线的变化与性格及其表达力

更是倍增。

线在版面设计中可以构成各种装饰元素，以及各种形态，起到分隔画面形象的作用。在版面设计中比点的

形式和作用更大。现在视觉上要占一定的空间，它的延伸带来一种活力，它能够串联各种设计要素，可以

分开图像和文字，可以使画面动感增强，也可以起到稳定画面平衡的作用。

如图：

线的作用主要体现在：界定分隔画面各种形象。

通过其自身粗细、曲直、色彩的变化形成不一样的肌理效果，达到烘托主题的目的。

线的穿插还可以组合成面。结合具体的版面设计要素，线可以是一行文字，一条变化的图案或图形。

3面的版式构成

面是线的发展延续。从平面设计的意义上讲，面也就形，面就是在平面上展开的形。面是各种基本形态中

最富于变化的视觉要素。它包括了点和线，如果有空间大小等条件的存在，面也可以转化为点和线。

可以把面理解为线重复密集移动的轨迹，也可以理解为点的放大、集中或重复。另外，在线的分割下，形

成各种比例的面的。面在版面中具有平衡、丰富空间层次以及烘托和深化主题的作用。

同样，落实到具象的版面设计，面可以是一个字，一张图片，一个图形，一个符号，也可是一组文字，一

组图片或图形。

总之，版面设计中有显性和隐性两大块要素，所谓显性要素就是图片、图形、文字、符号、色彩（后面会

提到），隐性要素及点、线、面、色彩。在版面设计的过程中要能够灵活运用隐性要素的特点，将其转化为

显性要素，在画面中布局运用。

二作业及思考

下面以一则简单的练习，完成版面设计基本要素的转化。

课堂练习：请以“2014”为内容做点线面的版面训练

自主练习：请以其他文字为内容做点线面的版面训练

请结合自己的名字或其他相关信息临摹下面8则案例，制作两张海报

1A4300dpiRGB

2能够体现点线面的构成特点（每张海报均可以综合表现或者只体现

一个要素）

多媒体演示

授课班级授课形式(PPT)案例页码3

教学

授课日期授课时数6课时

授课章节名称第三章版面设计的视觉流向和基本类型

教学目的基本的版面流向、版面分割、版面视觉重点调整的方法

教学重点版面分割、版面视觉重点调整的方法

教学难点版面视觉重点调整的方法

更新、补充、

删节、内容无

教学手段多媒体演示(PPT)案例教学、课堂讲授

课外作业版面视觉流向规划设计

课后体会

教学过程设计

三版面设计的视觉流程

由于受到长期以来阅读习惯的影响，受众在阅读版面的过程中会不自然的从左至右、从上而下的看。大多

数版面的整体视觉流向也是按照这样的一个顺序安排的。所谓的视觉流程就是设计是再版式的过程中，特

意采用某种形式来引导人们的视觉流向。要取得视觉上的突破，就必须在不同的版面设计要素的主次、先

后关系上做文章。

下面就来认识主要的版面视觉流向：

1单向视觉流程

单向视觉流程是按照常规的视觉流程规律，引导读者阅读。包括：直线式视觉流程，横线式视觉流程，倾

斜式视觉流程。

前两种稳定简洁有力。后一种会给人不稳定的感受，增强受众的关注度。

2重心式视觉流程

版面设计中，视觉中心是指整个版面最吸引人的位置，不同版面效果，视觉中心的位置也不一样。视觉中

心偏向画面的右边，给人局限、拥挤的感觉。视觉中心偏向左边，给人自由舒适轻松的感觉。视觉中心靠

下方，给人下坠、压抑、稳定的感觉。

3反复视觉流程

反复视觉流程就是相同或相近的元素反复排列在画面中，给人视觉上的重复感受。重复图案的使用能够增

强图片的效果，给人统一和连续的感觉，增加版面的节奏与韵律。需要注意的是用此种视觉流程时，要有

不同的表现方式，在相同中找差异，在整齐中求变化，稍微的变化不但能够吸引读者的眼球，还能生动版

面。

4导向式视觉流程

采用特定的符号或其他要素贯穿在版面中，也能够起到引导视觉流向的作用，并且在连续的版面版式中十

分受用。

5散点式视觉流程

散点组合是指将版面构成要素打散排列在版面各个部位，使整体效果自由轻快。版式散点时，也要注意主

次的搭配，疏密、均衡、视觉流向等，并非随心所欲的散。

在上面五种视觉流程的使用中，也可以穿插一些小的方法达到局部视觉流向的引导：

6版面大小比例的调整

现代的排版要求主次明确，或者说信息层次明确，无论是图片、文字，还是色彩、图形，均追求主次、强

弱的空间关系，增强版面的节奏感。

7小结与练习

题目:

根据提供的珠宝图片素材，选择一张素材组织构图，形成一种视觉流向。为“福缘珠宝”设计一张商

业招贴。

设计思路:

1选择哪张图，图的最好流向是上下、左

右、倾斜？

2图片选定后，文字如何搭配，简明而到

位，能够与图形成统一的版面流向。

3图片处理，背景处理，文字处理，层次

清晰，主次分明。

8提升思考练习

题目:

请使用"分享share"和"设计design"两组信息完成四组简单的视觉流向设计。

要求：

1两组使用常规视觉流向

2两组使用不常规视觉流向

3制作四张A4300dpiRGB颜色模式

的图像（案例如下）

多媒体演示

授课班级授课形式（PPT）案页码4

例教学

授课日期授课时数6课时

授课章节名称第四章版式设计中文字的处理和表现

教学目的掌握文字的特点、字体的磅值和行距的关系、文字的网格分割和布局、文字的

层次性

教学重点文字的网格分割和布局、文字的层次性

教学难点文字的信息层次表现方法

更新、补充、

删节、内容无

教学手段多媒体演示（PPT）案例教学

课外作业文字排版制作、文字海报设计

课后体会

教学过程设计

一版面设计中的文字

文字是版面设计中的重要构成要素，是人们交流和传递信息的重要手段。版式设计中，易读性是对文

字进行设计的一条重要原则,而设计师承担了最终呈现的责任。

1字体样式和字体性格

中文字体最常见的有黑体、宋体、楷体，英文字体也同样有常规使用的几种样式，字体选择样式不同，

产生的版式效果则不同，在版面中所承担的信息传达的作用也不同。比如黑体粗壮、鲜明、大众化，适合

做标题海报的大字等，宋体纤细、风骨、精致，适合做正文和段落，而楷体有书写的效果，如果想使版面

更生动、亲切，则可用该样式。随着在版面设计中字库样式选择的扩大，设计师应更加分析各种字体的个

性特点，斟酌使用，达到好的视觉效果。

如图：

字体在版面设计中能够根据版面设计的内容不断变化，但一般较正式的版面设计，如企业宣传、文学读物

在版式文字时不会做过多的字体变化，而是运用规整严肃的字符，给人稳定、信赖的感受。整齐，明确地

块面是此种字体设计最常用的表现方式。

如图：

而一些娱乐传单、招贴、封面设计，则要求文字尽可能的个性条约一些，增加版面活跃的效果。

如图:

设计过程中最常接触的中文字体，其主要以字块的形式出现，中文每个字占的字符空间都一样，非常的规

整，在排版时不如英文灵活。英文字体则以流线型的方式存在，在版面上的运用更加灵活一些，可以以曲

线方式排列，也可以直线排列或块面排列。

在中英文混排的过程中，通常读者会把字体样式相同的文字看成一个整体，因此，在排版过程中应该尽量

选择粗细和字形相似的字体排版，并且重视字体组合过程中的整体性。

2字体磅值、字距与行距的设置

文字的排版需要符合人的阅读习惯，方便阅读。掌握字体的字距和行距也十分重要。字的磅值是指从笔画

的最顶端到最低端的距离。常规排版中一般使用9-12磅的字体，而标题的字体设置可以大于14磅，字的

磅数调整可以很好的在页面中营造信息的层次关系。

一篇文章的大标题一般采用大磅值的或较粗的字符表示。然后根据阅读的需要依次缩小。实现阅读信息层

次清晰的效果。

如图：

文字的版式疏密直接影响着阅读者的阅读心情和阅读速度，掌握文字行间距与字间距的关系十分重要。行

间距与字间距相同会产生横向纵向均可阅读的错觉，行间距大于字符4磅让人感觉文字信息群松散，一般

情况下如果正常的字符选择在9-12磅的范围，行间距一般在12-15磅的范围，此种比例在阅读引导过程中

是最适宜的。

3文字的排列

文字的排列效果决定了阅读的效果，在版式设计中，常见的有将文字排列成行或块面，或者不同轮廓效果

的面。常见的文字版式方式有以下几种。

左右对齐式：是指文字从左端到右端的长度统一，使文字段显得端正、严谨、美观。

如图：

齐中式：是指以中轴线为轴心，其主要特点是使视线更集中，整体性加强，突出中心。这种排列方式适合

招贴设计或者标题的设计。

如图：

齐左或齐右式：是指左对齐或右对齐的排列方式。这样的版式使得文字的一端能够自由的张弛，具有节奏

感。其中左边对齐的阅读方式较常见，符合受众的阅读习惯，右边对齐的阅读在版面设计中不常见，可以

使版面具有新颖的视觉效果。

如图：

倾斜式：是指将文字整体或局部排列成倾斜，构成非对称的画面效果，版式动感、方向感较强。这种排列

方式一般用于招贴设计中，但是随着个性化版面设计的出现，在书籍版面设计和DM单的版面设计中也常见。

如图：

4文字网格分割过程

5文字应用的技巧

提高文字的层次性

首先，文字的磅值调整层次.

其次，文字的颜色调整层次。

再次，文字的字重调整层次。

6小结与练习：

了解了排版过程中针对文字需要注意的事项，根据提供的素材制作常规的文字排版。

练习一：常规文字的排版

注意事项:字符/字号/文字块面/文字色彩/水平垂直/单向

练习二：根据提供的素材完成一张体现个性效果的文字招贴-个性文字效果版式。注意事项:倾斜/强烈的节

奏变化/拆分与组合/文字色彩。

练习三：尝试非常规文字的表现

多媒体演示

授课班级授课形式(PPT)案例页码5

教学

授课日期授课时数6课时

授课章节名称第五章版式设计中图片图形的处理和表现

教学目的掌握图片的分类选择方法、掌握图片的调整方法、掌握图文的组合方法。

教学重点图片的分类选择方法

教学难点图片的调整方法

更新、补充、

删节、内容无

教学手段多媒体演示(PPT)案例教学

课外作业汽车杂志页面设计

课后体会学生知识点掌握情况较好，但是软件技术上有欠缺，需要加强

教学过程设计

图形源于人们对事物的认识，相对于文字，能够更加直接的传递信息，给人留下深刻的印象，接受程度

也更广泛。因此，学习图的版式（图形和图片）很重要。

一对于图的一般认识

图片在版面设计中是有着记录功能、艺术功能、交流功能的信息载体。

如图：

二排版中图的处理方式

1图片的选择

在排版过程图片不是拿来即用的，在排版之前对提供的图做适当的思考和筛选是十分必要的，以便能够更

好的在设计过程中使用。

首先，根据图片的功能和意味来分。委托方需要什么样的页面结构，根据这些具体的内容和要求，图片各

自的功能和呈现方式也不同。例如：按照场景分类（山川，河流，花草，建筑……），按照季节分类（春，

夏，秋，冬……），按照地域分类（乡村，城市……），按照图片远近特写分类，按照图片质量分类等。

其次，按照图片的色调分，可以为后面的排版设计中制定好图片的前后层次关系和图底关系。例如色彩明

亮或暖色调的图片可以事先归为一类，用于版面需要设计的前景内容。色彩深成或冷色调的图片也可以归

为一类，用于版面需要设计的背景内容。当然，想调整同一色调的图片之间的层次，也可以通过增加中间

色的方式。

再次，根据图片的构图或拍摄角度进行分类，正式、俯视、仰视、朝左、朝右、特写、远景等不同图片可

以在排版过程中分配在版面相应的不同位置。

2图片的信息层次调整

对于在版面中图片顺序和大小的调整首先是需要对页面结构的基本脉络和文章意图有所把握，然后做主次

大小的排列，需要注意的是图形大小的比例在设计排版过程中要大一些，过多的大小变化容易造成版面的

杂乱。

避免此种效果出现的最好方式就是整合和拼贴图片素材。

3巧用图片的动势效果

在一些图像中本身就存在着动态效果，这些效果可以在排版过程中巧妙的采用到。

4自由边形图片的使用

自由边形图片是指沿着图像中形象地轮廓裁减出来的图形，由于没有规则直线或曲线的束缚，这些图像在

版面中采用会显得自由亲切。

5图片和文字关系的调整

版面中图文组合十分频繁，因此处理好图文的关系十分重要。常规排版中需要注意统一好文字和图形的边

线，不能使用图片随意切断文字的阅读方向，误导受众的阅读。

灵活的版面设计中也需要注意图文在叠加过程中的效果处理，不能以图盖文，也不能够以文盖图。

6图片和图片的关系把握

在图与图组合的过程中，需要注意图片中的内部边线的对齐，注意图片在页面中的朝向，以及图片裁减的

问题等。

三小结与练习

1版式设计中对于以个体为主的图片处理表现的练习

练习重点：恰当剪裁图片、巧用自由边缘图片、正确的划分页面、正确运用图片在画面中构图、图片与文

字的关系、图片与背景的关系、图标logo的恰当使用

2版式设计中对于多张的图片排版练习

练习重点：如何整合版面中的图片、如何调控图片的分布与节奏、如何调整图片的层次

以上布局过程中需要注意的问题：

1图片排版前需要根据文本或设计内容分类（黑白彩色室内室外视角图片质量)

2图片需要去除水印和标注

3图片色调需要根据整体设计效果调整

4图片布局尽量在网格的基础上多样化

5图文排版完成后需要加入适当的底色或者辅助色调整

6图片必须等比例缩放不需要的部分可以裁切

思考与提升：

1请结合上面的参考案例进一步完善优化图片布局

2图片色调需要根据整体设计效果调整

3结合文字排版的知识将文字部分与网格和图片结合完成整体的图文一体化排版

4可以在完成效果的基础上添加细节（页眉页脚页码等）

3版式设计中对于多张的图片排版练习

练习重点：如何整合版面中的图片、如何调控图片的分布与节奏、如何调整自由边图片和非自由边图案在

版面中的层次。

多媒体演示

授课班级授课形式(PPT)案例页码6

教学

授课日期授课时数4学时

授课章节名称第六章版式设计中色彩的处理和表现

教学目的复习色彩的基本原理，掌握排版过程中配色的思路和步骤。

教学重点排版过程中配色的思路和步骤

教学难点排版过程中配色的思路和步骤

更新、补充、

删节、内容无

教学手段辅导练习

课外作业数码产品版面色彩搭配练习

课后体会

教学过程设计

色彩是版面上必不可少的要素,整体色彩的把握直接关系到版面的视觉效果.合理的使用色彩能够使画面丰

富而有活力,同时不同基调的色彩能够准确的表现不同的设计风格,画面的色彩关系直接引导了版式风格的

表达。如果说图形和文字人本身，那么色彩就好比穿着的外衣，各式各样的色彩点缀和妆扮的人们，形成

不同的风格效果。

一色彩概念和基本理论

色彩是可视的，对人有情感影响的，客观存在的颜色状态。

色彩的三要素包括色相、明度、纯度。

色相是每种色彩的相貌，是区分色彩的主要依据，是色彩的最大特征。在色相搭配中，同类色的搭配及色

相环中相邻色彩的搭配给人统一整体的感觉。对比色搭配及色相环中相对着的色彩组合在活跃画面的同时

给人不安定感。

明度是色彩的明暗差别，即深浅差别。明度高的色彩组合的版面轻松、明快，明度低的色彩组合的版面深

沉、稳重。

纯度是各种色彩中包含的单种标准色的成分的多少，纯度越高，色彩

感觉越强。儿童类读物往往采用纯度高的色彩展示，其鲜亮、饱满的色泽往往是孩子的最爱。文学书籍、

画册的设计在色彩选择上往往适于采用纯度低的色彩，能够体现其品位和稳重感。

二版面色彩设计的方法

仔细观察每一个版面，会发现其中均有贯穿的主色调和变化的复制色彩存在。

1确定主色调

因此，在版面色彩设计的过程中，根据设计内容定位设计风格后，首先要定位版面的主色调，为了避免杂

乱,增强视觉效果,一般版式设计都应该根据所表现的内容确定一种起支配作用的主色,从而获得统一整体

的色彩效果。

2确定色彩搭配可视度（注重版面中色不过三的原则）

在主色调定位的前提下，根据主色调和设计主题可以选择搭配色彩运用到版面中，搭配色与主色调色相、

明度、纯度接近，整个画面的可视度柔和，搭配色与主色调差异大，整个画面的可视度强烈。

3最终调整整和。

以上利用色彩基本原理搭配进行版面设计可以使版面产生胀缩感，进退感，轻重感等，这些都有利于更好

的完善构图。

三小结与练习

练习一：同样苹果产品宣传单页，如何形成两个不同的版面色彩风格。

练习二：请给一下一则海报色彩重新搭配颜色（至少两种方案）。（photoshop软件辅助）

多媒体演示

授课班级授课形式(PPT)案例页码7

教学

授课日期授课时数12课时

授课章节名称第七章版式设计的基本版型

教学目的掌握网格版式的概念和特点，掌握级数和网格布局的关系，掌握网格排版的步

骤。掌握自由版式的四大特点，能够通过图文的自由组合调整版面节奏。

教学重点级数和网格布局的关系、网格排版的步骤、自由版式的特点

教学难点级数和网格布局的关系、网格排版的步骤、自由版式版心的定位和节奏调整

更新、补充、

删节、内容无

教学手段多媒体演示(PPT)案例教学

课外作业网格宣传折页设计

课后体会无

教学过程设计

网格版式设计

一）网格版面设计的概念

网格是用来设计版面元素的一种方法，主要目的是帮助设计师在设计版面时有明确的设计思路，创建系

统化的版面。网格的采用能够让设计师在设计过程中考虑的更全面，更精细地版式设计元素，更好的调整

页面的节奏。

网格的设计规则起源于北欧，起初是通过采用数学中的级数关系在页面中设置成比例变化的块面，并调

整组合。

如图：

后来转化为栏的分割来体现这种关系。设计师可以将页面分为一栏、两栏、三栏、多栏，然后将文字和图

片版式在栏中。网格在版面设中的使用是严谨、简洁、规则、朴实的。

二）网格版面设计的类型

在版式设计中主要有对称式网格和非对称式网格两种。

1对称式网格

对称式网格是指版面中左右两个页面结构完全相同。

如图：

对称式栏状网格的主要作用是对左右页面的平衡。栏是文字排版的区域，栏的宽窄直接影响到文字和图片

的最小块面效果。

单栏式对称网格设计一般用于文字性书籍如小说的排版中，版面篇幅小。比较单调，所以在控制每行文字

上尽量不超过60个。

双栏式对称网格较单栏能够使版面效果更加灵活流畅，在杂志、企业宣传册的设计中使用较多，形成的版

面效果较为严肃。

三栏式或多栏式对称网格可以进一步活跃版式，减轻视觉疲劳，在篇幅较大的报纸、图表说明的内容上使

用较多。

很多设计师为了进一步追求排版的严谨，在栏和网格的基础上，会运用基线将网格进一步划分，甚至可以

细节到把每一个字符的面积作为一个单元格进行排版。

2成角式网格

成角网格的原理和普通的网格设计一样，但由于成角网格是倾斜的，形成的版面效果可以打破常规。在设

置成角网格角度的时候，还是要注意版面的可读性。一般在一个设计体系中（例如一本杂志、一份宣传册、

一则系列海报中）只选用一个或两个角度（45度或60度），从而体现整体性和系统性。

三）网格版面设计的应用

1首先在设置网格之前要设定好出血线。

出血线是用来界定图片或色地的哪些部分需要被裁切掉的线。（出血线以外的部分会在印刷品装订前被裁

切掉。所以也叫裁切线。出血就是出血线以外的图片或色地，也就是会被裁切掉的部分。

出血线的宽度一般是3mm，设定出血线主要是考虑到排版在后期印刷裁切过程中不留白边的效果。

2设定好单元格，单元格可以细节到以字符为单位。

3嵌入图片和文字

4调整整体的节奏效果。这包括在画面中增加余白。减少画面的压迫感。

添加边框或底色，增加信息的层次感。

通过视觉符号引导页面。

添加页码、页头等细节元素。

四）手绘网格草图稿的制作

主题：制作企业文化宣传册草图

要求：手绘部分——

25P扉页1P章节页3P后记1P正文20P

绘制标准合理而有变化的网格布局

电脑制作部分——

单面16K300dpi

25P扉页1P章节页3P后记1P正文20P

绘制标准合理而有变化的网格布局

文字用横线标注图片用灰色快标注

注明各个层级文字的字体字符行间距

注明栏间距版心位置页眉页脚位置和字符

二自由版式设计

一）自由版式的概念

字面理解就是无任何限制的设计，它是通过版式版式中自身元素自由组合排列的设计方式。

自由版式设计的特点

1版心的无疆界性

需要注意的是自由不等于漫无目的的瞎涂乱画，也须遵守合理安排视觉元素以及内在的基本原则：色彩搭

配、肌理、空间等。

2字图一体性

使字体成为图形的一部分；运用虚实相结合的手法达到字图融为一体的目的；运用叠加法创造层次，增加

画面的空间厚度。

3解构性

解构就是对原有古典和以数理为基础的排版秩序结构的肢解，是对正统版面的解散和破坏。它运用了不和

谐的点线面等元素与破碎的文化符号去重组新型的版面形式。

4局部不可读性

“可读”设计者在安排版式过程中认为读者应该读的部分，包括字体的大小和清晰度。“不可读”是无需

读的部分，在处理手法上常常把字体缩小、虚化、重叠、复加、拆分等等，使增强视觉冲击力的有效方式

之一.

三网格与自由版式设计练习

1网格版式设计练习

2自由版式设计练习

思考

1网格版式设计的基本原理是什么？

2网格版式设计的基本步骤是什么？

3留白对于网格版式设计布局起到什么样的作用？

4什么是自由版式？

5自由版式的特点有哪些？

多媒体演示

授课班级授课形式(PPT)案例页码8

教学

授课日期授课时数2课时

授课章节名称第八章版式细节设计与印刷尺寸

教学目的掌握版面页边设计、装订线区域设计方法，掌握网格版式和自由版式的划分方

式