网页版式设计（精选七篇）
网页版式设计 篇1
1版式设计的审美法则
版式设计是视觉传达设计中的重要组成部分,是欣赏者与设计作品之间传递信息的视觉桥梁。版面设计就是对版面信息进行编排的各种形式,在有限的版面内将图形、文字、色彩等视觉要素按照一定的审美规律进行排列组合。自古以来,人们一直在追寻着对美的追求,人们对美的认识存在着共同的认知。版式设计的原则就是让人们在获取广告信息的同时,享受着视觉美感带给人们的快乐。版式设计的最终目的是将版面信息有条理的组织编排,突出作品的主题,得到很好的诉求效果。版式设计的审美法则与其它设计都是共通的,对比与调和、单纯与秩序、对称与均衡、节奏与韵律、虚实与留白。
2版式设计在网页与印刷作品之间的差异性
网页的版面设计与报纸杂志等印刷设计的版式设计有很多相通之处,但是网页与杂志样本的排版又有很大的差别。
2.1网页中的版式设计
网页设计中的版式设计有其自身特点,网页的版面是动态的界面,并且受浏览器尺寸的影响。网页的版面布局可以分为两种:一种是固定的版面宽度,不管在任何情况下浏览网页版面宽度是不变的, 但是每个页面高度不同,视觉效果相对固定;另外一种是可以自适应宽度的版面, 网页的版面宽度随着浏览器的宽度进行改变,因此这种版面效果是不固定的,与传统的印刷广告的版面设计有很大的区分。网页设计进行排版的软件通常使用Dreamweaver,所有视觉要素的尺寸都是以像素为单位,图片的分辨率72像素/英寸, 不能使用特殊字体,因为不能保证所有用户都具有这种字体,因此,网页中的文字大都采用系统默认的宋体字。文章字号通常使用12或14像素。随着科技的发展, 网页的版式设计对设计师要求越来越高, 现在浏览网页的工具很多,如,ipad、智能手机等,网页的版面要能够适应各种浏览设备,在任何情况下都应该是美观的,因此,网页版式效果具有不固定的特性,用户看到的网页显示效果具有不确定性。网页设计者不能精确定位页面的绝对尺寸和图片的位置。页面以纯色为主,尽量少用大面积的背景图像,这与传统的印刷设计有明显的区别。
2.2印刷中的版式设计
印刷作品都有固定的版面尺寸,例如,一本A4版面的杂志,每个页面都是固定相同的大小。设计者可以在固定的版面里进行设计要素的组织编排,印刷出来的作品在任何情况下视觉效果都是固定不变的。印刷中的版式设计主要运用Illustrator、Indesign、Coreldraw等矢量绘图软件, 版面设计中使用的字体可以有多种选择。例如,方正字库、文鼎字库等。 图片都是采用高清晰图片,版面的宽高尺寸是一致的,版式效果比较固定。文章字体一般控制在8—10号字,段落标题可以比文章字体大两号,字体行距在150%— 200% 左右。
3网页版式设计的重要性
网页的界面设计属于视觉传达的范畴,在设计网页的时候应保持视觉艺术的规律,充分运用视觉艺术语言进行网页设计。网页界面的视觉美感在网页设计中具有极其重要的地位。网页设计的美观程度直接影响到网站信息的传播,现在很多网站美观性非常差,或者是版面风格大同小异,没有自己的特色,网站布满大量的文字信息、不停闪动的图片、色彩运用过多, 直接影响网站信息的传递,给浏览者造成不好的视觉美感,浏览者可能会放弃再次光临此网站。优秀的网页设计作品可以给浏览者一种美的享受,让浏览者愿意阅读网站的信息。因此,网页版面要在不同时期进行适当的改版,以保持用户对网站的新鲜感,很多大型的综合门户网站经常进行网站的版面调整,改版的时候始终保持网站视觉效果的一致性,给用户带来全新的视觉享受的同时,对网站留下深刻的印象,给网站也带来了经济上的效应。
4结语
版式设计教案设计 篇2
教学目的：在变化与统一是设计的总法则的统领下，编排与版式设计有各种具体版面形式，初步理解每种类型的设计方法和特点，掌握主要的几种编排与版式设计版面类型。教学重点：骨格型、满版型、分割型、对称型版式类型的设计方法和特点。
教学难点：在版式设计的所有版面类型中，骨格型的版式设计最不易掌握；在大量信息文字图片处理上，怎样突出重点，让版面达到构成上的和谐与组织上的合理，传达上更条理清晰。教学时间：2课时
讲授内容：
上节课版式设计的形式法则复习3分钟 提问法
版式设计的形式法则有哪些以及特点？
学习版式设计的形式法则，既帮助我们克服在设计中的盲目性，又为设计前的思考提供了丰富的内涵。
1.单纯与秩序是求取有机的整体； 2.对比与调和是求取强调的效应； 3.对称与均衡是求取稳定的因素； 4.节奏与韵律是求取情调的悦意； 5.虚实与强弱是求取主次陈述。
版式设计的基本版面类型导入前讨论 7分钟 演示法结合讨论法
版式设计
1.老师演示少量电影海报，活跃上课氛围，并提问：“平时同学们看哪些电影，有留意海报有哪些不同编排形式？给人的感觉是什么？” 2.学生分组自由讨论三分钟后，每组派代表发言。
3.老师表扬发言同学后，引出今天上课主体：版式设计基本版面类型。
结和图片讲解每种版式设计类型的特点，帮助学生更好的理解和掌握，提高学生的设计感受能力。35 分钟 演示法（图文讲解版式的基本类型）
版式的基本类型有骨格型、满版型、上下分割型、左右分割型、中轴型、曲线型、倾斜型、对称型、重心型、三角型、并置型、自由型和四角型等13种。
重点讲解：骨格型、满版型、分割型、对称型版式类型的设计方法和特点。
一、骨格型
图形或文字在版面编排中，总是按照某种规律，在版面中作某种倾向性的排列，这种隐藏的规律性在平面的空间设计中即称为骨格。在编排与版式设计常以分栏的形式出现，如二分栏、三分栏的编排与版式设计。达到构成上的和谐与组织上的合理，传达上更条理清晰。
二、满版型
版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉，是商品广告常用的形式。
第2页，共7页
版式设计
三、上下分割型
把整个版面分为上下两个部分，在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。
四、左右分割型
把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。不过，倘若将分割线虚化处理，或用文字进行左右重复或穿插，左右图文则变得自然和谐。
五、中轴型
将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。
第3页，共7页
版式设计
六、曲线型
图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。
七、倾斜型
版面主体形象或多幅图版做倾斜编排，造成版面强烈的动感和不稳定因素，引人注目。
八、对称型
对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以避免过于严谨。对称一般以左右对称居多。
九、重心型
重心有三种楷念。
1、直接以独立而轮廓分明的形象占据版面中心。
2、向心：视觉元素向版面中心聚拢的运动。
3、离心：犹如将石子投入水中，产生一圈圈向外扩散的弧线运动。重心型版式产生视觉焦点，使强烈而突出。
第4页，共7页
版式设计 十、三角形
在圆形、矩形、三角形等基本图形中，正三角形（金字塔形）最具有安全稳定因素。
十一、并置型
将相同或不同的图片作大小相同而位置不同的重复排列。
并置构成的版面有比较、解说的意味，给予原本复杂喧闹的版面以秩序、安静、调和与节奏感。
十二、自由型
自由型结构是无规律的、随意的编排构成，有活泼、轻快之感。
第5页，共7页
版式设计 十三、四角型
版面四角以及连接四角的对角线结构上编排图形。
给人严谨、规范的感觉。
骨格型版式设计练习
分钟
练习法
1.骨骼型的版式特点和骨骼型优秀报纸版面设计欣赏
在编排设计方法上有两种倾向：
1.一种注重理性分析，运用数学和几何知识，达到构成上的和谐与组织上的合理； 2.另一种是注重感性的判断，编排审美依赖于设计者的感官知觉判断力。
在编排设计中有多种骨骼的分割形式，而各种风格给人的视觉效果各有不同，设计师根据设计的要求和性质来决定版面的设计风格，以打动读者心灵。
国外优秀报纸版面设计欣赏：让学生借鉴灵活的骨骼型编排方式，在大标题、小标题、正文、插图、及颜色搭配的细节处理。
第6页，共7页
版式设计
2．骨骼型版式设计练习
结合学院应用设计系系报
老师提供参考图片和文字。
作业要求：在编排设计中有多种骨骼的分割形式，学生要灵活运用，系报编排时参考国外优秀报纸版面设计。
老师编排示范：
1.版面设定A3竖版；
2.大标题、小标题、正文字体要求区分开，调理清楚； 3.注意边距、行间距、段落间距 4.分栏设计时图片要灵活结合
学生骨骼型版式设计练习，老师巡回指导点评。根据不足,课后完善系报设计。
总结 ： 提问法 3 分钟
1.编排与版式设计的基本类型有哪些？
骨格型、满版型、上下分割型、左右分割型、中轴型、曲线型、倾斜型、对称型、重心型、三角型、并置型、自由型和四角型等13种 2.骨格型版式版面设计特点？
图形或文字在版面编排中，总是按照某种规律，在版面中作某种倾向性的排列，这种隐藏的规律性在平面的空间设计中即称为骨格。在编排与版式设计常以分栏的形式出现，如二分栏、三分栏的编排与版式设计。达到构成上的和谐与组织上的合理，传达上更条理清晰。
课后作业布置 2分钟 1．完善骨骼型版式系报设计；
2．做一张A3尺寸的分割型版式设计海报，主题自定。
网页设计中的版式设计 篇3
关键词：网页设计；版式设计 CDIO教育模式；项目教学
近年来随着经济的高速发展，科技的日新月异，教育领域同样面临革新。引进新的教育理念和教学模式成为教育工作者的关注重心，此时，欧美成熟的工程教育理念慢慢地进入我们的视野之中，CDIO的教学模式（Conceive构思、Design设计、Implement实施、Operate运行），符合工程人才的培养，提高学生的实践能力、组织能力、创新能力。这一模式更适应当下的教育环境需求。
网页设计这门课程属于交叉学科范畴，兼顾艺术设计、计算机技术及交互设计等多门学科。另外，这门课程作为艺术与技术的结合体，要求学生具备较强实践动手能力与综合运用能力，因而在教学过程中我们依据CDIO的工程教育理念开展教学。
本文重点谈到的是网页设计中的版式设计过程，网页中的版式设计起到信息统一、分割区域和交互导引的作用，是在有限的空间界面内将文字、图形、背景色彩或图案及交互功能集成在方圆之间，根据设计的形式法则，利用艺术美学与科学技术相结合的方式来实现效果展示。下面以教学过程中的“xx艺术系网站”项目为例，以网页设计中的版式设计为内容，展示教学过程中的各个设计阶段。
1 构思阶段
（1）确立目标。
网页设计不是盲目的行为，不是简单使用软件的行为，它是构思由确立到实现的过程，是一种展示到体会的过程。因此，在设计之初，教师需要引导学生了解当前的课题，明确网站要做什么，网站的外观布局是什么样子，网站需要营造何种氛围。我们常见的网站根据用途分类为企业网站、电子商务网站、电子政务网站、文体娱乐网站、教育科学网站等，每种类型的网站都有自己需要传播的信息，根据所需文字与图片选择适合的排版方式，进而营造恰当的氛围。在“xx艺术系网站”项目中，学生会根据实际项目类型，理解项目设计目标为，该学院所属系部信息服务类网站，界面版式方面要求简洁大方，色彩明快，塑造清新、愉悦的氛围，学生可以根据以上内容展开进一步的设计工作。
（2）信息整理。
项目开展前期根据对项目的简单分析，要求学生对客户或相关人士展开访谈，对行业同类网站的资讯开展收集与调研。这一阶段学生会接触网页设计的需求方，在本项目中可以设定为系内行政人员、教师及系内学生，根据访谈或调研可以得到网站相关设计信息，如对整体风格的需求，导航的设计需求，网站类型为静态网站或动态网站，根据需求结果，要求学生设计多样的版式效果，以供客户参考。
（3）交互设计。
我们将网页中的交互分为视觉上的交互和行为功能上的交互设计。在这里我们更侧重说明交互在视觉上的应用。网页中我们常见的交互形态有按钮、导航条、搜索栏和表单等。这些交互形态都会出现在版式的突出及显著位置，这样更引发人们的视觉关注中心，因而，在进行版式设计时，需要考虑这些交互元素的设置，友好的版式也是一种界面与人的情感交互。在我们的项目中学生应该考虑交互按钮的外观设计，排放位置等因素；导航条的设置应在醒目位置，清晰明确发挥导引作用；搜索栏帮助浏览者快捷搜索，放置在易发现的位置，搜索一般出现在网页右上角；表单设计是学生所忽略的环节，因为可以使用插件添加，导致学生认为无须设计，在此建议信息表单设计时可考虑细节设计，提高友好度与舒适度等交互设计。
2 设计阶段
版式设计是网页设计中重要的设计引导规划环节，在这个过程中学生可以根据自己的项目主题展开艺术美感的设计。一般进行页面版式设计我们从以下几个方面入手。
（1）版式结构设计。
网页设计中的版式设计与传统媒介中的版式设计略有不同，前提是他们都遵循版式设计五原则，[1]内容与形式，简洁与简约，设计与艺术，趣味与独特，局部与整体。为了设计富有形式法则和艺术美感的网页作品，版式设计方面通常会采用黄金比例和三分法排列原则。黄金比例法是初学者易于掌控的方法，将视窗可用区域分成两个部分，也可以根据设计比例需求，将数字录入到相关计算网站，得出合适的黄金比例分配方案。三分法构图排版方式，是将排版界面分成三份，根据内容的不同，选择不同的三分法排列位置。
网页设计中由于要考虑显示器视窗显示水平不同，我们的总体版式设计会采用固定格式或非固定格式两种形式。固定格式的版面是固定的界面版式，而非固定格式的版面设计是变化的，这种变化的版式很难把握的，变化的视窗将改变既定的字体形式和图形排列位置，这个课题也是我们今后要深入探讨的方向。
（2）字体、图像、色彩设计。
版式设计是界面设计的骨架，字体设计是界面设计的血肉，富媒体技术的全面发展，网站这一综合载体也得到了极大的发展，版式与字体的结合构成了网页的不同风貌。在网页中常见字体分为中英文两类和图形化的艺术字体，字号一般选用12pt。在中文网页常常出现的字体为宋体或黑体，字号为12pt/14pt的文字展示，另外也会有些超大字体以图像的形态出现，并通过视觉效果的调整，创建三维空间的视觉展示效果。图形化的艺术字体，在诸多网站中得到应用。在设计中我们题材保有传统的文化性，中国元素的运用，如书法、图腾、建筑等富有中国色彩的艺术形态都应得到我们的思考与关注，中西文化的比较与融合也是我们要探索的方向。图形与色彩部分在排版中应适合主题，响应设计氛围，为整体版式服务。
（3）视频展示设计。
网页界面排版中还需考虑一种新兴的展示手段，视频信息展示，页面中利用大量的视频信息排版，减少文字、图片信息的输入，信息传达方式由静态转换为动态，提供有趣而新颖的排版展示方式。
3 技术实施
（1）界面版式视觉设计。
网页设计中对静态界面的布局，我们通常会使用Photoshop和Illustrator圖像处理软件开展设计，首先我们会根据思维导图绘制基础模板，然后根据设计需求在模板中添加设计好的文字、图形、视频、声音等设计元素。
（2）交互功能视觉设计。
在网页设计中我们会考虑将静态样稿转换为简单的静态网页，这种转换我们会使用Dreamweaver软件进行操作，由于网页展示设备的不同我们也会考虑采用一些相关的模型制作软件来处理交互设计部分。
4 运行阶段
将确定好的静态草稿通过切图生成为静态网站，测试效果及功能，当运行时根据需要和视觉效果进行调整直到理想状态。
5 小结
网页设计课程将实际项目导入课堂，根据CDIO工程教育模式教学，打造有效、有趣、实用的教学方式，使学生在学习操作中锻炼宏观思考的能力，获得团队合作的能力，养成终身学习的能力。学生对设计流程的掌握就是对知识体系的掌握和运用，达到理论与实践相结合，通过对版面的全面掌控，更好地为静态网页设计打下坚实的基础。
参考文献：
[1] 沈卓娅，王汀.字体与版式设计实训[M].中国出版集团东方出版中心，2011：74.
论网页设计中隐性要素之版式设计 篇4
关键词：网页设计,视觉要素,版式设计
一、网页版面设计的统一与变化
进行网页版式设计时, 既要有统一又要有变化, 只有这样的设计才能让浏览者看后视觉疲劳感降到最低, 统一与变化是网页版式设计中最基本的也是非常简单的形式美法则之一。网页版式的统一与变化相比较, 统一占据统治的地位;这里说的变化不是随意的变化, 是有序的变化, 是在统一中求变化。网页设计中的版式编排主要是指版面的整体统一、文字应用的统一、整体设计风格和均衡方式的统一、色彩色调方面的统一等。特征相同、形状相同的视觉要素让它们重复出现在页面的各处, 这样可以加强各个局部之间的一致性, 并且具有规律性, 可以实现统一的效果。当然, 也不能太过于强调统一性, 应该把握尺度, 否则会让人觉得页面呆板。设计时应该在版式方面、图片/图像方面、颜色方面、画面的线条方面等细节地方做些细小的调整, 让人看后觉得画面统一的同时还有变化, 也增添了网页的设计细节, 这样会很吸引人的眼光, 为设计加分。
二、网页版式设计的对比与调和
对比是造型上存在明显差异的视觉要素, 或者是两者处于相反地位或对立地位的视觉要素的并置。通过对比所产生的美感更具有鲜明的特点, 很容易成为视觉的焦点, 可以让视觉要素造型看起来更加活跃。经常运用的对比有色彩方面的对比、质感上的对比、元素方向上的对比、图形大小的对比、空间大小的对比、虚与实的对比以及表现手法方面的对比等。它们之间互相衬托, 彼此共存。对比越强烈, 视觉效果越鲜明, 但是我们应注意, 不仅要存在对比, 也不能缺少统一。对比中若有调和, 是实现整体风格统一的方式。调和, 是指在版式编排中在不同视觉要素寻找可以协调彼此关系的因素。大体有两种情况的调和:一种是把彼此相似的元素进行调和, 另一种则是通过渐变进行调和。形式美的法则中, 对比就是彼此之间有矛盾, 有冲突;调和, 讲究的是有共同点, 让矛盾得到缓和。好的版面应该是两者兼备的, 既有对比, 又应有调和, 让两者共同作用于页面中, 让页面充满美感。
三、网页版式设计中的均衡与对称
区别于物理上的重量平衡, 人们在视觉上接受某一事物的形体时, 在一定条件下也能产生一种心理上的平衡。此观点出自阿恩海姆视知觉理论。例如, 重量相同的两个杯子, 颜色不同, 白色的杯子与黑色的杯子相比, 心理上的重量应该是轻许多, 这样便得出了均衡的定义。均衡, 指的是视觉中心两侧不同形式的视觉要素看上去大体等量的关系, 也就是说视觉中心的两侧, 无论是色块的大小、形状大小在视觉效果上分量和体量都应该相应。追求均衡的设计, 让人在视觉上能产生稳定感, 当然, 最终还是要根据信息内容来决定是否运用均衡形式。本质上来讲, 对称属于最简单的均衡。现实生活中, 传统装饰艺术设计大量的应用对称的形式, 大部分都是1:1的形式出现。对称有两种形式, 一个是绝对对称, 另一个是相对对称。绝对对称的形式, 让人觉得平稳、庄重、严谨。但是若处理不得当, 会显得单调乏味。相对对称的形式与均衡的形式配合是网页版式设计常用的形式。
四、网页版式设计中的节奏与韵律
一提到节奏, 我们便会想到音乐, 提到韵律, 我们便不由自主地想到了诗歌。节奏是将很相近的一些形式因素, 按照某种秩序、某种规律把它们进行重复的排列并进行延续。这点无论是在音乐上还是在页面的版式编排中都具有共同的特点。在此基础上, 可以形成人的视知觉节奏通感。所以, 网页版式设计中, 也广泛地应用节奏和韵律, 也是网页版式编排的重要形式之一。
节奏与运动有关联, 是一种均匀的重复, 并且在重复中不断地产生频率节奏的变化。我们生活中所看到的潮起潮落、一年四季的更替、一年中的花开花落等等一系列自然变化都可视为一种节奏。产生节奏有以下两种基本条件, 首先是要具有对比因素或者是对立因素的存在, 也就是说应具有本质上的不同和对立关系的一些视觉因素并置呈现或者连续呈现, 并且在某一前提条件下数量上存在很大的差异和对立关系;其次是具有规律性的重复。节奏最终是体现事物连续变化的一种秩序。
韵律可以说是节奏简单的重复, 是那些不一样节奏的巧妙结合, 例如我们生活中的音乐、舞蹈以及诗歌等等。而在网页设计中如何体现, 可以说是当视觉要素的编排组合与某种规律相符合时, 用户在视觉和心理上的一些感受。想要让网页页面版面产生韵律, 我们应好好把握对比形式、反复、渐变形式以及轻重、缓急形式的应用。韵律的产生是由于节奏的变化, 但是在变化上也应该有个度, 变化过多便失去了秩序, 这样也就谈不上韵律之美了。
五、网页版式设计中的留白运用
网页版式设计中留白运用, 主要是为了使人的视觉集中在文字或图形那些较为重要信息内容的上面, 这样可以迅速的抓住浏览者的目光, 让他们很快找到网站的主题, 分清重要信息所在位置, 运用留白的手法可以达到增强视觉效果的作用。若整个页面没有留白, 会让画面看起来拥挤, 让读者觉得压抑、透不过气来。行间和段落衔接处运用留白会让浏览者的眼睛有片刻的休息, 空白在页面中可分隔段落之间的层次, 分隔图形之间的距离, 分隔页面上的其它视觉要素, 它是最有效的手段。留白的运用, 让整个页面保持一种视觉上的平衡, 页面上要素之间的留白, 让浏览者更加便利地理解要素间的相关联性, 并且能有效引导他们阅读等。
版式设计教案内容 篇5
课程名称： 第一章 版式设计的概述 教学目的：（1）了解版式设计的目的
（2）理解版式设计的相关原则（3）掌握版式设计的视觉流程
教学要求：理解黑、白、灰整体分区概念；点、线、面在版式设计中的运用；各种设计原则及表现；把握具体设计内容与形式表现之间的内在关系，熟练掌握文字与文字、文字与图形、整体与局部之间的构成关系。
教学重点：版式设计的视觉流程 教学难点：字体、行距、字距。
教学方法：理论讲授、图片分析并使学生展开对版式设计目的的讨论。教学用具：幻灯片，黑板 教学课时: 4课时
参考书目：
1、《版式设计原理》佐佐木刚土 著，武湛 译 中国青年出版社 2007年版
2、《版式设计》贺鹏等著 中国青年出版社 2012年9月第一版
教学过程：
一、首先介绍课程的性质，通过看一些设计图片来引申出版式设计的目的与概念。
二、深入教学，请学生从自身经验出发谈谈对版式设计的认识，并思版式设计的目的是什么。
三．在对版式设计的概念有一定了解的情况下，思考并总结版式设计的原则。
课程作业：上网搜索2个优秀的和2个不好的版式设计，并给予解释 教学内容：
备 课 纸
第一节 版式设计的目的
版式设计是一门特殊而关键的课程，更大程度上它又是一门专业基础课，它为以后的招贴设计、包装设计、书籍装帧设计以及一切需要通过平面来表达的设计课程打下基础。这就决定了这门课程主要是关于版式设计的基本原理、设计法则和审美把握，它是一门认识课程而不是技法课程。通过这门课程的学习，一是要理解版式设计的基本原则，掌握版式的设计法则；二是要培养和提高学生的审美能力，完善学生的审美结构；三是要训练学生和思维能力，开拓学生的思维意识，培养学生的创新思维；四是要养成学生的动手习惯，培养学生的实用技能。这就是版式设计的教学目标。
版式设计随着时代的进步，它能体现出文化传统、审美观念和时代精神风貌等，被广泛地应用于广告、书刊、包装、装潢、展机、机构视觉形象和网页等传播领域。
1、有效提高版面的注意值
当纷繁复杂的视觉信息展现在眼前的时候，哪些信息更能让我们愉快地去接受呢？哪些版式更能吸引人们的注意呢？很显然，那些美感突出，对比强烈的画面更引人注目。现代版式设计早已不是单纯的技术编排，而是技术与艺术的高度统一。人们的视觉习惯不断改变，设计师的观念也不断更新，新的版式效果不断呈现。那些形式独特、美轮美奂、现达完善的画面让人们过目不忘，注意值当然得到大大的提高。
2、有利于信息的有效传递
版式设计本身并不是设计师的最终目的，它只是为了更好地传递信息的手段。凡是成功的版面，首先必须明确表达目的和主题思想，还要有上佳的创意策划和表现手法，做到主题鲜明、形象突出、美感强烈。在若干复杂纷乱的信息，无法让我理解，如果通过版式的精心设计，把各种元素根据特定内容进行组合排列，既可以使画面形式更加服从内容，提高信息的传达效果和效率，使版面更加风趣，富有内涵。
3、强化传达效果的持续留存 当今视觉传达设计大多都带有商业色彩，主要宣传的是企业及品牌形象。因此如何让企业形象得到很好的传播和留存是许多设计师强调的重点。因此说优秀的版式设计，能够激发人们的兴趣，使画面生动、有趣、幽默，这样能够深度刺激大脑皮层，保持信息的持续留存。
备 课 纸
第二节 版式设计组版的原则
1、主题鲜明突出 按照主从关系的顺序，使放大形象成为视觉中心，以此来表达主题思想。将文案中的信息作整体编排设计，有助于主体形象的建立。在主体形象四周增加空白量，使被强调的主体形象更加鲜明突出。
2、形式与内容统一
只讲求完美的形式而脱离内容，或者只求内容而缺乏艺术的表现，版式设计都会变得空洞和刻板。
3、强化整体布局
即将版面各种编排要素在编排结构及色彩上作整体设计。把图片、文字整体编排，将文字中多种信息组合成块状，使版面具有条理性。
第三节 版式设计图文编排原理
任何版面都是由点、线、面这几个基本元素构成的，设计时应把握好相互间复杂的关系。
1、版面设计的基本要素
版式设计实际就是如何编排好点线面。一行文字可以看作一条线，一个字母可以看作点，几行文字可以看作面。
（1）点在版面构成上的作用。版面中的点是由形状、方向、大小、位置等形式构成。
（2）线的构成。线是点的移动轨迹，有实线，有虚线，也有流动线，将各种不同的线运用到版面中，就会获得不同的效果，在各种场合都能表现独特的个性和情感。能否善于运用线是判断设计师设计能力的强弱基本标准之一。方向性、流动性、延续性及远近感，使画面产生空间深度和广度，线的情感构成，线的力场和等量分割
（3）面的构成，主要研究空间层次感。
备 课 纸
2、文字的编排构成
（1）字体。字体的选用和设计是版式设计中文字编排的基础。在设计时，同一版面选择两到三种字体可组成最佳视觉效果，字体多了，会觉得零乱而缺乏整体感，（2）字号。字号表示字体的大小，计算机的字体通常采用号数制，点数制和级数制。点数制是国际流行的标准制，也称磅。建议同学们，把电脑字号按照由大到小编排好打印出来，作为设计排版的参考。尽量不要用5点以下的字，这对印刷的质量要求很高，而且不利于阅读。
（3）字距与行距。一般行距的常规比例为8：10，即字号大小为8点，行距则应达到10点的疏密度。但字距与行距不是绝对的，应根据实际情况而定。有些独特的设计，就是采用变换字距和行距得到的。
（4）文字编排的四种基本形式。A左右均齐B、齐中C、齐左或齐右D、文字绕图排列
（5）标题与文字的编排。（6）行首的处理。（7）引文的强调。
（8）图形与文字的组群排列。
第四节 版式设计的视觉流程
1、单向视觉流程：使版面的流动线更为简明，直接地诉求主题内容，具有简洁而强烈的视觉效果。
竖向视觉流程：给人坚定，直观之感 横向视觉流程：给人稳定，恬静之感 斜向视觉流程：给人运动，活泼之感
2、曲线视觉流程：随弧线或回旋线而运动变化。更具韵味，节奏感。主要可以备 课 纸
概括为C型和S型。S型中两个相反的弧度可产生矛盾回旋，在平面中增加深度和动感。
3、重心视觉流程：重心以其强烈的形象或文字独踞版面某个部位，是视觉心理的重心，位置因具体画面而定。
4、反复视觉流程：指相同或相似的视觉要素做规律性、秩序性、节奏性的逐次运动。其运动流程不如单向、曲线和重心流程运动强烈，但更有韵律美和秩序美。
5、导向视觉流程：通过诱导元素，主动引导读者视线向一定方向顺序运动，由主及次，把画面各构成要素依序串连起来，形成一个有机整体，使重点突出，条理清楚，发挥最大的信息传达功能。编排中的导线有实有虚，表现多样。如文字，、手势、形象、视线均可为导向。
6、散点视觉流程：指版式中图形与文字呈自由分散状态编排，强调感性，随机性，偶然性，强调空间感和动感，追求刺激，是一种较为随意的编排，这种编排方式在国外非常流行。
7、最佳视域：版式设计时，设计师应该考虑将重要信息或视觉流程的停留点安排在注目价值高的位置，这便是优选最佳视域。上部给人积极高昂、轻快、飘浮之感；下部给人压抑、沉重、消沉、限制、低矮和稳定的印象。左侧，感觉轻便、自由、舒展，富于活力；右侧：感觉紧促、局限却又庄重。
以上几种视觉流程均为理性的流程。在编排方向性视觉流程关系时，要注意各信息要素间隙大小的节奏感。而第六项散点视觉流程似乎与前五项相互矛盾，其实不然，它是前五项的一种突破与创新，体现了现低设计的气息和独特魅力。
备 课 纸
第一章 课 程 小 结
通过本章节的学习，使同学们了解的版式设计的相关基础概念，并通过寻找优秀的版式设计作品，结合现代版式设计趋势，进行点评，来增加学生对版式设计的敏感度。通过点评学生能较好的掌握版式设计目的、类型以及视觉流程等基本概念。
备 课 纸
课程名称：第二章版式设计形式法则 教学目的：了解版式设计的形式美法则及其规律。
教学要求：掌握版式设计的形式美法则及其规律，并能熟练运用这些形式美法则。教学重点：
版式设计的规律 教学难点： 版式设计的规律
教学方法：理论讲授、图片分析并使学生展开对版式设计形式法则的讨论。参考书目：
1、《版式设计原理》佐佐木刚土 著，武湛 译 中国青年出版社 2007年版
2、《版式设计》贺鹏等著 中国青年出版社 2012年9月第一版
教学用具：幻灯片，黑板 教学课时: 8课时 教学过程：
一、导言 复习上节课所学内容引出新课程的新内容。
二、深入教学
第一节 点线面的运用 第二节 对称与均衡
第三节 “对比,变化”与“调和,统一” 课程作业：
作业内容：对点、线、面进行排列组合练习作业要求：组合合理，具有创新性
教学内容：
第一节 点、线、面在版式设计中的运用
备 课 纸
形式美法则是形式美的基本规律,是民形态艺术设计的基本原则,它是人类千百年来从自然万特中总结出来的美的规律,具有普遍性。版式设计作为实用艺术的一部分必须遵循形式美法则。
点、线、面是最基本的形态元素,点、线、面的构成是平面设计的基础。作为版式设计当然不能例处,在版式设计中,点、线、面的应用主要有两个方面。
(1)以造型形态的应用。以造型形态来讲,点的构成应用：分割画面形成区域构图、辅助处理底纹增强装饰性。线的构成应用：分割画面形成区域构图、构成图案丰富画面美感,形成画面边框。而的构成应用：分割画面形成区域构图,强调画面中需要突出的部分。
(2)以构成要素的应用。版式的构成要素分：标志,主题文案,辅助说明文案,画面底的构成图案。以构成要素分析点,线, 面的构成是画面构图的需要。在一张完整的版式构图中,各个具体要素按照其形态,大小的不同,归纳出响应的点形,线形,面形,从点,线,面及其相互关系来调整其方位,比例等,从而丰富和完善画面的构图。也使得设计者在把握构图时易得其法。
第二节 对称与均衡在版式设计中的运用
(1)对称是完美形态
对称的视觉感受是庄严,秩序,安静,平和。对称是有机生命的完美的形式体现,如：人,各种动物大多都是对称的形态,普遍地存在于自然界当中,所以在设计时间中具有永久的生命力。对称具有完全对称和近似对称两种形式。所谓完全对称是指绝对的对称。所谓近似对称是指构图整体呈对称趋势,构成要素局部是有变化的。版式设计中所应用的对称方式大多是近似对称。因为版式设计的形式决定于版式的性格特征,所以一般政府机构,行业或企业领导者的版式采用对称式构图。
(2)均衡是形式美的重要因素
它来源于自然事物在力的状态下稳定存在的视觉感受,所以均衡是力与量的视觉平衡。在设计中是设计要素在总体配比中的平衡统一,是利用设计要素的虚实,气势,量感等 备 课 纸
相互呼应和协调的整体效果。它的形式体现主要是在有机的布局中掌握画面的重心。在版式设计中的整体构图方面均衡是首先思考的设计要素,因为它具有构成的完整趋向。
第三节 “对比,变化”与“调和,统一”
“对比,变化”与“调和,统一”,二者是同一问题的两个方面。世界上一切事物都处在矛盾统一体当中。正如毛泽东同志在《矛盾论》中论述的那样,“矛盾存在于一切客观事物和主观思维的过程中,矛盾贯穿于一切过程的始终,没有矛盾就没有世界”。在形式美的构成中,“对比,变化”和“调和,统一”是一对永不可分的矛盾统一体,把握和处理好这对这对矛盾统一体与局部的关系。设计者如果只注意局部的变化,而缺乏对全画面的考虑,画面就会凌乱,琐碎。反之如果只注意整体调和与统一,画面就会呆板,单调,乏味,枯燥。所以,每件作品都必须要有适度的变化,适度的对比,同时,又必须处理好各局部之间的关系,使之和谐统一,版式设计也无例外。
(1)版式设计的对比方法。各构成要素形的对比。
在版式的各构成要素中,存在着诸多的对比方法,如：空间对比与聚散对比,大小对比,曲直对比,方向对比等。空间对比与聚散对比在版式设计中主要应用于构成要素与版式底的空间对比,构成要素自身的排列构成。在中国的绘画理论中,“有疏能跑马,密不透风”的绘画原则。它形象地阐明了空间的对比关系。在版式设计作品中,画面留有一定的空间,构成要素有聚有散,才能增强其作品的深度,才能主题突出。在版式设计中强调大小对比会使画面层次分明,主题明确。运用曲直对比,方向对比的版式设计,会增强版式性格特征使版式的整体感受活泼,轻快。
色彩对比
色彩对比分析起来不过是色彩三要素的对比-色相对比,色度对比,冷暖对比。版式的设计色彩对比设计是不可缺的因素,无论是对比强烈还是对比微妙,都要把握色相,色度,冷暖的色阶变化,形成丰富的画面效果。设计者要注意使色彩的区域对比明确,又要使画面的色调协调统一。处理好版式的色彩对比关系,就能增强画面的视觉感染力。
备 课 纸
个性对比
这种对比存在于不同的版式之间,作为版式的设计者,在设计不同的版式时应了解版式持有者的工作单位性质和个人的职务特点,从而设计出符合其身份的版式。每个人的工作单位,植物特点各个相同,所持有的版式就应该存在着明显的个性差别。设计师依据持有者身份特点确定版式的构图,字体,色彩等。例如：一张政府官员的版式,一般采用对称式或集中式构图,字体简洁大方,主题明确清晰,色彩单纯,对比强烈,不需要更多的情节要素。而一张企业经理人的版式就有所不同,他可以有较灵活的构图,具有企业特点的色彩等。只有抓住个性对比才能设计出更具情节个性,更多更好的版式。
(2)版式设计的调和手法。
调和,就是画面各组成部分的关系能够和谐一致,形成视觉美感。达到调和的最基本条件是画面中必须有共同的因素存在。版式设计的调和手法有如下几种：字体的形象特征调和,色彩的统一,排版方向的统一等。
备 课 纸
第二章 课 程 小 结
形式美法则是形式美的基本规律,是民形态艺术设计的基本原则,它是人类千百年来从自然万特中总结出来的美的规律,具有普遍性。版式设计作为实用艺术的一部分必须遵循形式美法则，通过本章节的学习，让学生过对名片进行设计，可以更准确的掌握版式设计的形式美法则，掌握版式中的各要素对比关系。
备 课 纸
课程名称：第三章版式设计类型
教学目的：通过本章节的学习，让学生了解和掌握版式设计的14种类型，以及图形的编排构成。
教学要求：掌握版式设计的14种类型，以及图形的编排构成。教学重点：图形的编排构成，展开页的整体设计。教学难点：图形的编排构成，展开页的整体设计。
教学方法：理论讲授、图片分析并使学生展开对版式设计类型的讨论。
参考书目：
1、《版式设计原理》佐佐木刚土 著，武湛 译 中国青年出版社 2007年版
2、《版式设计》贺鹏等著 中国青年出版社 2012年9月第一版
教学用具：幻灯片，黑板 教学课时:4课时 教学过程：
一、导言 复习上节课所学内容引出新课程的新内容。
二、深入教学 第一节 版式设计的类型(1)骨骼型(2)满版型(3)上下分割型(4)左右分割型(5)······
第二节 图形的编排构成(1)四角与中轴四点(2)支配版面的中轴四点(3)······
备 课 纸
课程作业：
作业内容：为自己设计一张名片
作业要求：根据所学的视觉流程为自己设计一张名片，要求两个方案，四个面。
教学内容：
第一节 版式设计的类型
一、骨骼型
骨骼型是一种规范的理性的分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。在图片和文字的编排上则严格按照骨骼比例进行编排配置，给人以严谨、和谐、理性的美。骨骼经过相互混合后的版式，既理性、条理，又活泼而具弹性。
二、满版型
版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉，是商品广告常用的形式。
三、上下分割型
把整个版面分为上下两个部分，在上半部或下半部配置图片，另一部分则配置文案。配置有图片的部分感性而有活力，而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。
四、左右分割型
把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题，也自然不如上下分割的视觉流程自然。不过，倘若将分割线虚化处理，或用文字进行左右重复或穿插，左右图文则变得自然和谐。
五、中轴型
备 课 纸
将图形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。
六、曲线型
图片或文字在版面结构上作曲线的编排构成，产生节奏和韵律。
七、倾斜型
版面主体形象或多幅图版做倾斜编排，造成版面强烈的动感和不稳定因素，引人注目。
八、对称型
对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以避免过于严谨。对称一般以左右对称居多。
九、中心型
重心有三种楷念。
1、直接以独立而轮廓分明的形象占据版面中心。
2、向心：视觉元素向版面中心聚拢的运动。
3、离心：犹如将石子投入水中，产生一圈圈向外扩散的弧线运动。重心型版式产生视觉焦点，使强烈而突出。
十、三角形
在圆形、四方形、三角形等基本形态中，正三角形（金字塔形）是最具安全稳定因素的形态，而圆形和倒三角形则给人以动感和不稳定感。
十一、并置形
将相同或不同的图片作大小相同而位置不同的重复排列。并置构成的版面有比较、说解的意味，给予原本复杂喧嚣的版面以次序、安静、调和与节奏感。
十二、自由型
自由行结构是无规律的、随意的编排构成，有活泼、轻快之感。
十三、四角型
指在版面四角以及连接四角的对角线结构上编排的图形。这种结构的版面，给人以严谨，规范的感觉
备 课 纸
第二节 图形的编排构成 一、四角与中轴四点
1、支配版面的四角和对角线
在版面结构布局上，四角与对角线具有潜在的重要性。四角是表示版心边界的四个点，把四角连接起来的斜线即对角线。交叉点为几何中心。布局时，通过四角和对角线结构求得版面多样变化的结构形式。如图一组：
2、支配版面的中轴四点
中轴四点指经过版心的垂直和水平线的端点。中轴四点可产生横、竖居中的版面结构其四点（上、下、左、右）可略有移动。如图二组：
3、四角与中轴四点结构
将四角与中轴四点结构结合使用，其版面结构更为丰富完美。如图三组：
二、方形图、退底图、出血图
1、方形图
方形图，即图形以直线边框来规范和限制，是一种最常见、最简洁、最单纯的形态。方形图将主体形象与环境共融，完整的传达主题思想，富有情节性，善于渲染气氛。配置方形图的版面，有稳重、严谨和静止感。
2、退底图
退底图，即将图片中精选出来的图象沿图象边缘剪裁而保留轮廓分明的图形。退底图形自由而突出，更具个性，因而人印象深刻。配置退底图的版面，显得轻松、活泼、动态十足，3、出血图
即将图形充满版面，无边框，有向外扩张和舒展之势，出血版产生动感，有与人更接近之感，一般用于传达抒情或运动信息的版面。若图片采用出血版式，因不受边框限制，而使感情与动感得以更好的舒展与发挥。
三、图形面积
版面中，图形面积大小不仅影响版面视觉效果，而且直接影响感情的传达。
1、大图形情感强烈
备 课 纸
大图形面积注目程度高，感染力强，能给人舒服愉快感。大图形通常用来表现细部，如人物表情、手势某个对象的局部特写等，能在瞬间迅速传达其内涵，与人产生亲和感。
2、小图形精密
将小图形插入字群中显得简洁而精致，有点缀和呼应版面主题的作用。但同时也给人拘谨、静止，趣味弱的感觉。
在进行版式设计时，若只有大图形而无小图形或细部文字，版面就会显得空洞。但光有小图而无大图形，又会使版面缺乏生气而显得平板。只有大小、主次得当的穿插组合，才能获得最佳的搭配关系。
四、块状组合与散点组合1、块状组合
块状组合即将多幅图片通过水平，垂直线分割，图片在版面上整齐有序的排列成块状其组合方式具有强烈的整体感，严肃感、理性感和秩序感。
各图片相互自由叠置或分类叠置而构成的块状组合，具有轻快、活泼的特性，同时也不失整体感。
2、散点组合
将图片散点排列在版面各部位，版面即充满自由轻快之感。散点组合编排时，注意图片大小、主次的配置，方形图与退底图的配置，同时还应考虑疏密、均衡、视觉方向程序等。
五、展开页的整体设计
文字或图象成延续页面的设计，称为连页或展开页设计。当视线扫视版面时，首先是注意左右页或展开页的整体效果，然后才从左至右进行阅读，因此整体设计非常重要，它不仅是单页面的整体，而且是展开页的整体，如果只注意单页局部而忽视整体，或将左右单页分开来编排，都会造成散乱、不统一的视觉感受。建立展开页的手法很多，主要从以下几方面来把握：
1、展开页的整体设计建立在形象的对比关系上，左右页常以一大一小、一多一少、一动一静、一黑一白、一曲一直、局部和整体、文字与人物等形式构成，在对比中建立和谐的整体关系。
2、展开页的整体设计建立在同一视觉识别上。
备 课 纸
3、展开页的整体设计建立在形象的起承关系上，所延续的图象或文字有被分割的感觉。
装订的一般形式：
有鞍形针装订、侧面针装订、盒式线缝装订、无线胶粘装订、塑料蔑、螺旋金属线、可卸式封页等。
从大的方面来看版式设计涉及到平面、影视、网络等。作为最普通的平面设计‚又可细分为报纸、杂志、招贴、地产、商业和公益等不同类别。在这个日益被广告引领消费的时代 ‚版式设计已成为人们日常生活中不可缺少的重要内容‚同时也深刻影响着人们的生活品位和文化积淀。
版式设计的构成要素和平面广告的构成要素大致是一定的。属于造型方面的构成要素如下。
插图，不论是黑白还是彩色图形‚图像或照片‚插图设计者都要融合广告的主题并具有强烈的视觉个性‚以及可读性和视觉感染力。
商标 在广告编排中‚商标不仅仅是产品单纯的标识符号‚而且与表达的主题要关联‚要简洁易识、形式感强。
名称，商品名称是广告传达中的重要内容‚是产品信用的代表‚商品名的形意要连通‚它的发音和字形都构成视觉效果的重要因素。版式轮廓 版式轮廓在广告编排中的意义就在于引导读者的视觉范围‚区分与其他广告的不同‚强化读者对广告的注意范围等。
备 课 纸
第三章 课 程 小 结
在第三章的学习中，让学生们通过几种主要的版式设计类型的训练能够较准确的把版式设计类型运用在平面设计中，并能很好的掌握其特性。
备 课 纸
课程名称： 第四章现代版式设计的发展趋势
教学目的： 通过本章节的学习，让学生了解版式设计的发展趋势，把握最为前沿的设计。
教学要求： 了解版式设计发展趋势
教学重点：版式设计发展趋势的中的主要趋势 教学难点：版式设计发展趋势的特点
教学方法：理论讲授、图片分析并使学生展开对版式设计发展趋势的讨论。教学用具：幻灯片，黑板 教学课时: 4课时
参考书目：
1、《版式设计原理》佐佐木刚土 著，武湛 译 中国青年出版社 2007年版
2、《版式设计》贺鹏等著 中国青年出版社 2012年9月第一版
教学过程：
（1）强调创意（2）突出个性（3）注重情感
课程作业：
作业内容：为永州设计一张宣传海报
作业要求：要求两个方案，突出永州的地方文化特色，大小不得小于A4纸。
教学内容：
一、强调创意
平面设计中的创意为两种，一是针对主题思想的创意；二是版面编排设计的创意。将主题思想的创意与编排技巧相结合的表现，以成为现代编排设计的发展趋势。在编排 备 课 纸 的创意表现中，文字的编排具有强大的表现力，它生动、直观、富于艺术的表现与传达。文字与图形的配置，已不是简单的，平淡的组合关系，而是更具有积极的参与性和创意表现性，与图形达成最佳配置关系来共同表现思想及情感。这种手法，给设计注入了更深的内涵和情趣，是编排形式的深化，是形式与内容完美的体现。
二、突出个性
在版式设计中，追求新颖独特的个性表现，有意制造某种神秘、无规则、不理量的的空间，或者以追求幽默、风趣的表现形式来吸引读者，引起共鸣。乃是当今设计界在艺术风格上的流行趋势。这种风格，摆脱了陈旧与平庸，给设计注入了新的生命。，在编排中，除图片本身具有趣味外，再进行巧妙的编排和配置，可营造出一种妙不可言的空间环境。在很多情况下，图片平淡无奇，但经过巧妙组织后，即产生神奇美妙的视觉效果。
三、注重情感
“以情动人”是艺术创作中奉行的原则。在版面编排中，文字编排表述最富于情感的表现。如文字在“轻重缓急”的位置关系上，就体现了感情的因素，即“轻快、凝重、舒缓、激昂”。另外，在空间结构上，水平、对称，并置的结构表现严谨与理性；曲线与散点的结构表现自由、轻快、热情与浪漫。此外，出血版使感情舒展，框版是感情内蕴，留白富于抒情，黑白富于庄重、理性等等。合理运用编排的原理来准确传达情感，或清新淡雅，或热情奔放，或轻快活泼，或严谨凝重，这正是版式设计更高层次的艺术表现。
播放短片，优秀版式设计作品展。
备 课 纸
第四章 课 程 小 结
通大量的图片信息，使学生们了解当今版式设计发展的趋势和潮流，平面设计中的创意为两种，一是针对主题思想的创意；二是版面编排设计的创意。将主题思想的创意与编排技巧相结合的表现，以成为现代编排设计的发展趋势，所以在今后的版式设计中，希望学生们能够从强调创意、注重个性和情感出发，设计出具形式与内容相统一的版式设计。
备 课 纸
课程名称： 第五章版式设计指南
教学目的：通过具体的实例分析，较好地掌握版式设计实战技巧。教学要求：掌握版式设计实战技巧。教学重点：样式与造型的关系 教学难点：图版率与视觉度
教学方法：理论讲授、图片分析并使学生展开对版式设计技巧的讨论。教学用具：幻灯片，黑板 教学课时: 4课时
参考书目：
1、《版式设计原理》佐佐木刚土 著，武湛 译 中国青年出版社 2007年版
2、《版式设计》贺鹏等著 中国青年出版社 2012年9月第一版
教学过程：
复习前几章节的内容，然后通过讲解大量的实例，来总结版设设计具体的方法。
教学内容：
1、文中的概念“高贵”、“廉价”、“便宜”等都属于中性词，没有褒贬之分，请大家不要用日常的生活习惯来理解，“廉价”并不就比“高贵”差，适合就行；
2、文中所有的图例都采用黑白，目的是为了排除类似色彩、材质等的干扰，本文仅限于探讨“版式”的神奇力量；
3、任何事情都不是绝对的，共性与个性在这个世界并存，但是在你还不是专家或者强者以前，了解普遍意义上的规律是理所应当的！对于规则的突破依赖于我们长久的对已有规律的练习、积累和探索，然后再是打破。就如同同学们在做设计时，大量的人喜欢将元素没有理由的减少到极少，文案也回避长文案，并美名其曰“我喜欢简约的风格”。可是事实上一个优秀的设计师，并不会拒绝饱满、丰富、热闹甚至繁复，一个真正的“简约”设计其实是有很多细节和“看头”的“复杂”工程。之所以你的作品千篇 备 课 纸
一律的单调乏味，是因为你并不具备“控制力”，怕丰富，所以只能用减少元素来掩盖，可那并不是真正的“简约”，只是简陋而已。所以，请好好应用我们的版式设计技巧，让你的控制能力突飞猛进吧！
在一个特定的空间中，版面所呈现出来的样式，以及为了达到这样的样式而实施的手段。
在教学过程中，我们不乏听到同学们精彩的言论和绝妙的创意，可是当我带着无限的期待看到最终的效果图时，往往心底一凉——没有形式美感！同时，尽力开始帮助同学修改其作业，我的原则是尽量做到不更改学生的设计初衷，通过调整在版面空间中对文字、图形的位置、大小、排列方式以及对色彩的搭配来改善稿件给人的视觉感官。于是有很多疑问在学生心里出现：为什么文字内容没变、要传递的信息主题没变、甚至还是那张不怎么好看的图，经过一番调整就会气氛大变呢？从木纳变成活泼、从廉价变成高贵？ 这就是版式设计的力量！
研读了好些教材和书本，我觉得最实用的，往往是最简单的，我就从一本日本的版式设计书籍里获得不少启示，本课就在此书基础上进行分析讲解，希望最没有基础的同学也都能有几分收获！这些知识需熟记熟用，方能举一反三，自我创新！
以上这个基因树形图就是对版式设计中最基础的内容进行的归纳，排除了一些其他因素，比如色彩，就完全从布局上去考虑，如果将此知识熟记并擅用，再慢慢加入其他如色彩、材质、工艺等知识，那么我们的设计将变得成熟而精彩！
一、什么是“样式”？
我们用人来打比喻，以便我们很好理解上面所陈列的版式设计的知识点。我们首先将我们的设计对象比喻为我们人自己，一个人要出席不同的场合，那么就需要不同的打扮风格，因此“样式”就是我们首先要做的选择：如果是去面试工作，那么我们要干练的OL风格；如果我们要参加狂欢派对，那么我们可以前卫大胆的猫王风格；如果我们要参加婚礼，那么我们要正式又不抢新娘光彩的风格„„版式设计也是如此。因此，所谓“样式”就是要根据我们的目标对象的要求所要选择的一个整体的氛围，比如商场打折促销，我们就需要选择让人产生“亲和力强、刺激、价格便宜”等联想的“样式”；如果是高端产品上市，就需要选择“这玩意儿应该不便宜、高贵、不容易得到”等心理 备 课 纸
反应的“样式”。对一个不擅长打扮自己的人来说，要他确定一个正确的样式概念并不难，也许他清楚的知道参加面试应该是庄重又不失活力的，可是有可能他最后自己挑选和搭配出来的样子会很像去参加圣诞派对，要不就严肃到像是去参加葬礼。真正让我们头疼的并不是选不对样式的概念，而是怎样准确的达到我们想要的“样式”，难道真的只能凭感觉吗？我相信感觉很重要，但他依赖于经验的丰富和审美的高层次，可是对于初学者感觉往往是不准确的，就像一个未出校门的大二学生，你要他成熟高雅那是太残忍。可是在版式设计中，对于感觉没到位的人，我们依然可以教给大家一些超级实用又简单的原理，让大家也能像模像样的“选对样式”更“做对样式”。这就需要我们对“视觉度、图版率、文字跳跃率、图片跳跃率、网格拘束率、版面率、三类构成、文字印象”这个八个要素进行学习、理解、记忆和练习。这样我们就能选对“衣服”、“鞋子”等等。
二、什么是“造型”？
那么又怎么理解“造型八巧”呢？扩展说来是“造型的八个技巧原则”。就像同样的衣服，有的人可以穿对服装的味道，而有的人穿出来就不是那么好，这就是造型的重要。如果我们穿一条拖地晚礼服，我们却顶着一头没洗一样的油头发，或者是杂两个羊角辫，可能怎么都不能达到高雅的感觉（除非你是故意搞怪）；又如我们穿一身职业装准备去面试，却画一个超级魅惑的烟熏妆，一个爆炸头，估计没单位敢要你（也许夜总会或一些不入流的歌舞团）。更进一步说，造型可以让我们锦上添花，如虎添翼——不仅是让你穿对，更是让你面面俱到的完善细节，无懈可击。如同两个女人都穿着长尾晚礼服，都梳着高挑的发髻，但是为什么一个让人觉得是“没问题”，而另一个会让人觉得“很精致”？可能原因就在于一些非常琐碎的细节，比如头发的适当蓬松，眼影的搭配，或者粉底的质感等等。因此版式设计中的“造型”就是要运用相关的技巧，将我们之前选对的那些样式要素进行组合、搭配、修正、改善，让这些元素有机的融合，营造我们想要的气氛，完善所有的细节，形成正确的视觉感官效果和合理的阅读流程。而这八个技巧简单易记，他们是“明确主题、分开副主题、群化、取消暧昧、整理视觉流向、空白是主题的领地、抑制四角、利用版心线”。
三、“样式”和“造型”哪个更重要？
备 课 纸
按照中国人传统的中庸习惯，我们往往会说这些问题都很重要，当然的确他们都很重要。但是如果放在一起进行比较的话，我认为“样式”是最重要的。是否选对样式将决定我们版式设计效果成败。选择正确的样式，就像我们选对适合场合的打扮风格，假若我们连样式都没选对，那么无论怎么有技巧的、精良的造型都是白搭！极端的例子：去面试一份市场调查员的工作，我们却择了嘻哈风的打扮样式，那么后期无论怎么化妆，发型，着装都将是徒劳的，这就是同学们常常遇到的问题——作业盲目的追求电脑效果，堆砌，抑或删减„„费神费力却不能得到老师的认同，因为你连样式都选错了，所有的后期造型努力只是让你错的更远、更离谱而已。因此“样式”的知识是至关重要的。
四、进入分解讲解前，我们来做第一个实验吧！——在以后的讲解中，都是以对比试验和测试来论证观点，当然为了说明最基础的问题，我们都选择的是比较极端的例子，任何事情都有特殊的情况，但是请大家在学习本项类容时平和心态，先吃透普遍范围内的概念，等以后见多识广了再来分解、打破和提升。
Q:下面A、B两张广告中，哪一份看起来是比较便宜的化妆品？
当然显而易见的是B，它让我们觉得这个发胶很廉价。神奇吧？可是什么原因造成的呢？是女模特不够美吗？照片不够清晰吗？文字不够丰富、不够大吗？我们可以考虑造成这种结果的原因是因为“样式”的选择不同，那么不同的样式又是根据什么要素决定的呢？
正确的“样式选择”决定版式设计效果的大部分！
我们可以看出，充满生机活力的B广告表现出的样式和作品性格更适合于廉价的商 备 课 纸
品或者促销，因为它具备良好的亲和力，浅显易懂。因此若想强调化妆品的一种高级感，那么B的样式是很难成功的。即使选用最当红的影星，超特写的镜头那么也是徒劳的。因为他没办法达到高级感所呈现出的那种冷漠！因此要表现品质的优良，我们往往选用小文字、大面积的空白、低视觉度的照片。因此我们不难理解，为什么时尚杂志里那些高级化妆品总喜欢采用产品本身做主角，也不难理解为什么即使选用当红明星做模特，也会把明星的妆容画的极冷、表情也是冷漠的。就是为了极力降低其视觉度，达到一种冷漠、高贵、高品质的感觉。
Q2：下面同一个人的名片，哪一张看上去更有信赖感？ A—— B——
答案当然是下面B这张名片更让人有信赖感。它给人的印象比前面一张A更整洁有序，看起来能利落的解决问题，同时我们从名片上能更轻松的阅读和找到清晰的视觉流程。我们只需要调整文字的大小、位置和空间，就产生了巨大的差别，形成了B更有平衡感的版面设计。
调整形态能增加信赖感。只是选择了适合的样式并不能成为完善有效的版面设计。图A名片没有从细节调整形态，因此显得画面不平衡，总给人散乱、不专业、不能信赖的感觉。A的字体也显得较为幼稚和随便，因此更不能很好的取得人们的信赖。为了取得好的信赖感就要对形态加以调整，保持平衡感是必须的，调整形态就是我们将要讲解的“造型”原理。
备 课 纸
版式设计第一步——选择样式
选择适合的样式，版面设计就向成功迈出了一大步！只要你智商正常，从小生活在人类的社会环境，有判断力，就能选出适合的样式！虽说样式的内容里那“八大要素”看起来张牙舞爪很吓人的样子，其实他们很简单，只是把我们日常生活中得到的印象转换为专业术语而已。请按照一般的常识思考，就能做出正确的选择。
第一回合：样式的效果
在这一章节中，我们以视觉要素为中心来加深对样式选择的理解。视觉要素是指相对于文字要素的插图、照片、图标、图表等图像表现。在版式设计中增强视觉要素，能产生轻快、活力、易懂、有亲和力的印象。反之，如果以文字为中心，则给人理性、高格调、冷漠、坚硬的印象。然而，并不是说，视觉度越高效果越好，与要表现的内容相吻合的“度”是很重要的。例如，在一本法律典籍或者政府宣言等纯文字的对象中加入插图，虽然有活跃版式的感觉，但却形成了不和谐的版面。
1、错误的样式不能正确的传达信息
各种样式本身是没有对错之分的，就像西服和T恤，本身都是优秀的。但是场合不同我们就需要选择不同的样式，因此准确的说不符合目标对象的样式是不能正确传递信息的。我们来看一个列子：
A——
备 课 纸
这是日本学生制作的用于募集小组成员的传单（改作）。图A的专业性很强，作为学习设计的我们很容易理解也很喜欢这种“腔调”的设计，但是这个作品的目的是募集小组成员，每个周末年轻的孩子们一起出去郊游或者玩耍。因此A图的样式给人感觉过于深邃，虽然是很棒的设计作品却在表现形式上不适合募集对象，也不适合要传递的信息。人们看到这样的图像样式并没有想在一起玩的想法，甚或至于会产生信息的误读，搞不好人家会以为是“模型俱乐部”还是“玩具俱乐部”的宣传，或者更容易误解为“气球俱乐部”的宣传单。所以虽然设计的很专业、很富有设计感、很别致却没法正确的传递信息。所以它，是错的！
B——
这是最后真正使用的成稿。界面舒缓的插图，虽然不是很精炼，但是别有一番拙趣，给人以温柔的清新的亲和力。手写体的文字，让人感觉亲切而温暖，恭敬的写在画面中适当的位置，让我们感到募集者的诚意。整个设计轻松活泼，虽然显得有点点稚嫩，却恰好与接受信息的对象心态相符合——这是个好玩的俱乐部，里面一定都是些喜欢亲近大自然的同学，没有约束。
再举一例
大家看看下面这张杂志广告。你感觉是什么？是否觉得好像没错，但是又不那么舒服？风格不同的两幅广告被我们故意分解组合在一起形成了一种怪异的版面。样式差异竟能产生如此大的差异。不同的模特，不同的照片拍摄方式，不同的形态表情都必须要符合自己所要服务的产品，手表广告中原稿才能体现出手表中性的风格和高贵的品质感！而口红广告中灿烂的笑脸具有高视觉度，有极强的亲和力，明确得体现出其诉求的对象为充满活力的年轻人，很显然这个产品不会那么高不可攀。
2、效果通过样式得到表现
也许初学者对于创造优美的样式没有自信，但是我们现在可以从锻炼对样式的选择能力上开始。多多去看相关的书和杂志，已经各种类型的设计作品，边看边试着对自己提问：这个作品为什么会设计成这样？这种风格符合这个产品、符合传递信息的目的、符合受众的心理吗？为什么这个作品看起来会让人感觉好禅静？为什么这个作品让人感到热情？„„在问这些问题的同时，试着用版式设计里面的相关要素和原则的知识、技巧去回答，尝试着找出规律。
备 课 纸
例如下面有三张名片，为同一个人设计的。如果我们的目标是表现出精神十足的推销者形象，那么我们绝对不选哪种样式呢？如果我们的目标是要表现出追求个性、自由的艺术家那么哪一种样式更合适呢？如果我们想表现公司职员干练清爽的样子，又是哪个最适合呢？
A：让人感觉他可以利落的完成工作，感觉这个单位很井井有条，很有信赖感。这是一种突出重点的组合方式，并且视觉流程清晰简明。
B：扩大空白、缩小文字、笔画细腻的字体整体给人高品质的感觉。另外，文字的组合方法采用了“居中对齐”更给人感觉理性而高格调的印象。
C：扩大姓名文字并且选择加粗的字体，同时字体是横细竖粗的大宋体，虽然文字厚重却不显得笨拙，放大字的体积感可以增加版面的能量感，让人感觉信息丰富，表现出自信，给人有精神的感觉。文字组合方式采用纵向单边对齐，有活力又不失稳重。同时，插图（猫头鹰LOGO）的放大增加了版式的视觉度，增强了亲和力，符合一个促销员该有的精神面貌。
从对上面三张名片的分析我们看到，原来在同一个二维空间当中我们可以用相同的元素排列出不同的样式效果。而且每一种样式都有其优点。作为学习设计的我们，由于常年累月都在对自己的审美进行提升，追求的是一种个性和超脱，于是我们个人往往会亲睐高格调的设计风格。但是往往我们所服务的对象，来自各行各业，他们也有他们的行业审美原则，再加上终端消费者群体也在日积月累的过程中对不同的行业形成约定俗成的一些印象，因此作为设计师的我们一定要了解事情的真相，而不能一味做“自己喜欢的设计”。当然我们也看到，随着大众审美意识的加强、行业竞争的加剧，出现了很多模糊行业特征的、一味追求视觉效果的设计。但是我认为最伟大的设计，应该是形式和内容上的“相濡以沫”，在让人感叹“好个性的名片”的同时依然能从名片所体现的样式里获得正确的信息、感受出符合名片主人职业、身份、行业的气息。这才是正道！
从这个测试中我们也就能释然一些让我们头疼的事情：我们觉得很个性、高雅的设计，客户不喜欢，常听到客户大叫着：字那么小怎么看得清？我要企业标志放大点„„以后再遇到这种情况，请先检查自身是否忘记了服务对象的行业特质，看看是否为他选对了样式，穿对了衣服。如果是对的，那么就请你分别做几种不同的出来，让客户自己比较，并加以引导，相信能够让难题迎刃而解。
备 课 纸
这一讲，我们再次强调了选择样式的重要性！看到了样式不对即使设计的在美也不能正确传递信息的遗憾，也感悟到了视觉元素的格调统一才能形成完整有效的符合身份的版式，当然更知道我们想要的效果是可以通过样式的打造而呈现出来。
下一回合，我们就从视觉要素中的“视觉度”开始。样式的八要素之一„„>视觉度
在本文讨论的图像带给人的视觉强度是比较宽泛的，更多的是去研究最直接的、普遍的心理感受，仅从合乎常理的图像要素去研究（在后面我们会进一步说明）
1、从什么是视觉度开始。
从这里开始，我们正式进入样式的八要素的学习。首先我们要学的就是最神奇的“视觉度”。除了颜色以外，什么元素最吸引我们的视觉注意力呢？当然，那就是图像。因此图形的效果将对该版面所呈现出来的样式效果有着至关重要的作用。相对于文字，图像的要素（插图、照片等）产生的视觉强度我们在此称为“视觉度”。外观和影响力越强烈，视觉度就越高。明快夸张的插图给人的印象最强烈，视觉度就高。而宽广宁静的大海照片让人身心趋静，视觉度就低。所以，一般来说，照片的视觉度比插图低，尤其是云、海、草原等风景照，视觉度更低。举例来说，对象都是大象，可是一张是卡通大象，另一张是实拍的大象，那么后者的视觉度显然就比前者低的多，因为前者更夸张更让人印象深刻，甚至不可思议。
那么图像要素的视觉度究竟对我们的平面二维空间起到怎样的作用呢？我们来看第一例子，一个大学里某棒球组织募集会员的传单。
Q1：下面会有AB两张效果图，哪一个传递信息更快、更有效？让人阅读更容易？
备 课 纸
A——
这份传单如果发到你手里，你会有什么感觉呢？我觉得它看起来很理性，感觉很不热情，然后信息量很庞大，有点不太想仔细去读——那么多文字该多累！怎么办呢？我们对于这样的设计项目最基本的要求就是不能减少文字内容，这些文字虽然多但是他们的确都非常重要，谁来帮我们改善这个版面呢？看看B是怎么做的吧！
比较两者，视觉要素具有决定性的效果，B一目了然，我们能直接的快速的获得最重要的信息——这是关于棒球的俱乐部在招募会员而不是什么药品促销或者其他。像这样一种目的简单，内容直接的设计情况，视觉要素的合理应用可以极大的改变整体效果。
Q2：下面左右两张传单，哪一个更让你印象深刻？
（视觉度较高的图像是插页广告不可缺少的视觉要素！）
左边是原稿，手写的纯文字有非常独特的表现力。从文字内容上看的出这是个现代舞方面的招募或者表演的宣传，那么在加入一副跟文字的表情非常相似的剪影舞者插图后，整个效果更加生动活泼！这就是视觉度的魔力，加入插图后版面的视觉度增加，活力就增加了。另外从这幅传单的设计中我们可以看出，日本的学生们的设计非常具有生活的乐趣，也很擅用最直接的手绘方式，相对于我们自己可能要好好思考自己对生活的态度，丰富自己的阅历，更擅用除电脑以外的更多技法，为我们的作品创造更个性的效果。
2、平面设计中最小的设计单位名片，看看我们将名片视觉化后的效果。
备 课 纸
我们现在很常见这种类型的名片设计，同学们也很喜欢那么去做，因为名片上的元素只是文字所以只要稍微严谨的排一下的版便能呈现现在这样一种不痛不痒的效果。虽然看上去我们并不会有不合适的感觉，但这种样式的名片不会给人留下任何印象。那么我们看看将名片视觉化后有什么变化吧！
提高视觉度后的名片，能让人联想起名片主人的人品、企业属性甚至让人能回忆起交换名片时的场景。虽然不太记得实际上是怎样的一个人，但还是留下了更好、更深刻的印象。因此，我们发现在名片上加入插图，会增加它的趣味性。公司图标介于文字要素和视觉要素之间，视觉度较弱，但根据排列方式的不同，亦能呈现较好的效果。这里我们从上面加入的不同的插图当中的出另一种规律：越是趋向夸张的、卡通化的插图视觉度越高强，越是接近现实或趋向于文字的插图视觉度越弱。
3、设计主题的表现力
Q：哪张照片能留下印象？请用20秒时间看以下的照片，回答接下来的问题。看20秒：20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1！
下列照片中，有几张照片在前面那张图中有出现过，是哪几张？请自己将代码写下来。栏内字母为正确答案。将自己的答案和下表对照，有什么神奇的结果？请你和几位同学一起做（不要商量），最后再来看看你们的答案，看看有多少相同的呢！通常情况下，A组的正确答案最多，特别是孩子的笑脸给大多数人留下深刻的印象，那猫咪的傻表情也给大多数人留下深刻的印象。BC组的答案则反映出个人的兴趣。
反映观者的兴趣——个性
同样大小的照片，根据所照的内容给人留下不同的印象。这反映出观者自身的兴趣和志向，形成了一种交流。这就是制作广告时需要用心选择宣传点的原因。设计师也是人，往往我们也有独特的经验，比如小时候如果你可能曾经把洋葱当成水果去啃，从而在你的大脑里洋葱印象深刻！因此在选择的时候毫不犹豫先就能记住洋葱那个静物照片。但是这时候我们一定要问问自己，这仅仅是我个人的经验和兴趣，还是说有相当部分的人与我有共鸣？在广告设计中，我们常常看到同学们纠结于寻找独特的视觉元素，希望以此来获得视觉冲击力并达到共鸣，但结果往往是事与愿违——自己认为有趣的事观众毫无感觉！这就是没有考虑诉求对象的兴趣和经验。
表现力的强弱——注意人和脸
备 课 纸
一般来说，人类具有最强的表现力，尤其是脸部（怪不得出现那么多模特）。最弱的是云、海洋、草原等风景，它们能让人们的情绪平静下来。本来很有趣的描写对象，用很难看见的角度来构图的话，表现力就会下降。例如，婴儿纯真的笑脸我们通常是表现的重点，但是如果我们在画面中加入很多大人的脸的话，婴儿的表现力反而削弱！因此在表现类似对孩子关爱的信息时，我们往往更直接地应用孩子自身健康阳光的照片，大人往往成为非聚焦的“花瓶”。也就是说，版式中主题和想强调的部分要很清楚明显，应除去与其他物体的重合以及不必要的影像。
样式的八要素之二„„>图版率
1、什么是图版率？
在同一版面空间中，占据版面的图像（插图、照片等）和文章内容的面积比我们称之为“图版率”。这个比率是版面样式的重要要素。我们在设计作品的时候，通常可以事先估摸和计算一下自己想要传达的信息用百分之几的图版率，然后再进行实际的操作。图版率的高低，制约着版面所呈现出来的紧张和宽松，活跃与稳重。常常在我们版面遇到瓶颈时可以通过改变图版率来打破格局。
2、图版率和视觉度的区别？
图版率是指相对于版面中的文字内容，图像所占的面积比例，用___%来表示。视觉度强调图像的视觉强度，而图版率仅针对面积比。版面空间中全是文字的话，图版率为0%，相反如果全是图像没有文字，图版率为100%。一般来说，全部是文字的版面样式让人感觉拥挤和紧张，并让读者有恐惧心理——觉得杂乱、信息量大，不想读下去。因此就算是一些诗集、小说等纯文学的作品，我们尽量维持10%左右的图版率以便让人容易阅读。而大信息量的报纸，图版率为30%左右，当图版率低于这个数值，报纸没有生趣，让人厌烦不容易阅读。当图版率大大超过这个数值，报纸就变成了“画报”又会产生过于活跃、信息量不足和不够严肃等感受。因此图版率的设定也要求我们根据实际的设计需要和针对的对象来估计。我们很不愿意去阅读图版率为0%的紧张版面，但同时我们也很难接受一份图版率过高的经济类报纸。当然，在这里我还要告诫某些爱钻牛角尖的同学：图版率不需要真的去测量面积，大概目测估摸就行！
当然在后期的实际操作中我们会发现图版率和视觉度存在着共性，同等的视觉度照 备 课 纸
片，当它面积越大，图版率越大，而版面的活跃程度也就相对大起来。
3、文字所能传递的信息是设计不可或缺的！
对于设计师来讲，我们所探索的一个重要信息传递途径是“图形语言”，甚至希望完全能依靠图形去传递信息，这是无可厚非的。比如我们的一些纯粹的海报、影视广告等等，我们尽力的去追求图形语言的神奇效果。但是对于更多的商业性的、面对更广大的各种群体的受众的设计来说，想完全回避文字是不太可能，也是没有必要的。图文并茂始终是老百姓们喜闻乐见的一种形态。个性的图配上合适的文案内容会让我们的信息传递更加准确，让受众更加容易接收！
事实上，在版面设计中适当的添加文字并不会降低我们作品的品质，反而会使设计在视觉上、信息传递上更完整，可谓锦上添花，画龙点睛。
4、没有文字的版面显得空洞
下面两个设计，你更喜欢哪一幅呢？那么受众又更愿意看哪一幅呢？ A B A图用独特的图形传递这个协会（话剧表演研究之类的协会）的性质，很有创意，画面感觉很有设计感，这也是我们同学们常常乐于使用的版面——少文字，甚至不要文字。但是我们显然不能从这幅画面中获得更多详细的信息。所以B更加完整，更合理。所以说，画面的独特将抓住人们的眼球，更带给人深刻的印象，加入文字后发现，文字所能传递的信息是设计不可或缺的！
再看一个例子：一个大学里某组织的募集传单，显然是想表现这个组织会给你广阔的展示空间。滑翔翼简单地表现了安静无声的空间，但是„„似乎这更像一张艺术照片，谈不上广告的作用，而且也过于安静。稍微加入点点文字，变缓和了单调的气氛，让一张照片瞬间变成了具有信息语言的广告作品，交流变得饱满和流畅，也增添了图画的活力。
根据某研究所的调查，一般来说，图像增加的话，版面的好感度也会增加，图版率在50%左右时，好感度急剧上升。但是，一旦图版率过大，超过90%，好感度反而降低。没有文字的话，就形成了没有语言表达的空洞，给人单调的感觉。稍微加入点文字，图画反而更有生气！
视觉度和图版率的测试题
备 课 纸
Q1 图A和B的区别是什么？B（a视觉度 b图版率)增加了。
产生的效果（c高品质 d轻松可参与 e亲和力 f高格调）（A）（B）
A1：（a d e）A B的图版率是一样的，但B采用了简化、夸张了的插图，增强了视觉度，轻松和视觉度也就增加了，图B是最终采用的样式。
Q2 三幅汽车广告。哪一副的汽车看上去最方便？（不要考虑自己喜爱的车型和实际价格）（A）（B）(C)A2： C图只是展示汽车（商品），而不采用人物图像，适合重视汽车行走性能和车型的人。B图采用对称的中对齐，并且采用的模特较为商业和冷漠，所以适合重视汽 备 课 纸
车的身份品质的人；A图不仅加入了人物，还加入了插图作为背景，产生一种积极与人沟通的效果，看起来这辆车最方便，最有亲和力。
Q3 与图B比较，A图（a视觉度高 b图版率高）
产生的效果：（c单调 d易读 e高格调 f亲和力)（A）(B)A3：采用同样的照片，所以视觉度几乎没有变化，但照片的面积增加所以图版率增加。视觉要素中图的面积增加，就能相对提高亲和力。但是由于插图并不是视觉度强、并不是十分有趣，所以亲和力并没有大幅度提高。当然，图版率增大，也变得更易读。
Q4 下面是一本女性杂志的随笔版版面。与A图相比B图（a亲和力 b不想看下去 c无趣 d易读）
（A）（B）
A4：加入了大面积的插图，视觉的和图版率都有所提高，所以答案是a d。相反的，有极少数的人会选择bc，对于阅读文章，想加深自己理解、自己幻想的读者来说，过于强烈震撼的视觉元素反而是一种妨碍。但是按照我们这次版式知识的讲原则（只重普遍性），所以是最终答案。
备 课 纸
第五章 课程小结
浅谈网页艺术设计中的版式设计 篇6
1、什么是网页艺术设计
网页艺术设计是在INTERNET的发展和数字技术的发展中出现的新艺术形式。它以第四媒体——因特网为媒介, 以网页为载体, 以网络技术和数字技术为基础, 依照设计目的、遵循艺术设计规律, 艺术与科学相结合的艺术创造和视觉传达活动。它是网络视觉艺术的主要表现形式之一, 也是设计艺术的重要组成部分。
网页艺术设计具有媒体相关性、数字技术性和设计艺术性三大特点。
首先, 网页艺术是伴随着计算机互联网络的产生而形成的新媒体艺术, 并随着网络媒体的发展而发展, 网页艺术的载体为新的媒体形式——因特网。由于网页艺术设计的视觉信息是由网络媒体传达并完成的, 因此网页艺术设计具有媒体相关性。
其次, 网页艺术设计又是数字技术系统整合工程, 它具有很强的技术性。一个完整的网页艺术设计, 往往综合了多个设计软件的运用。
最后, 网页艺术在技术性以外同样具有艺术性, 它是科学与艺术相结合的产物, 它同样需要遵循艺术的一般规律。网页艺术设计是具有设计目的的创造性活动, 他必须达到使用者的信息传播要求, 所有的艺术设计都要围绕这一目的进行, 脱离了这一目的, 网页艺术设计也就成为了空中楼阁, 徒有其形式而已。
2、什么是网页版式设计
网页的版式设计同传统平面媒体的版式设计有很多类似之处, 在网页的艺术设计中占据着重要的地位。所谓网页的版式设计, 是指在有限的屏幕空间上将各种媒体元素进行有机的排列组合。网页的版式设计将设计师的理性个性化地表现出来, 是一种具有个人风格和艺术特色的视听传达方式。
二、网页版式设计的点、线、面
网页设计中运用艺术形式法则应包含多个方面, 比如, 点、线、面的构成, 视觉流程设计, 分割与编排设计, 动态设计等。其中, 运用各种构成规律对网页的各形态要素进行点线面的组合, 是网页版式设计的基本设计方法之一。
1、网页版式设计的点
点在网页的版式设计中非常活跃。每个独立的小面积的形象都可以看做是一个点。页面中的点又往往是页面的视觉中心。
2、网页版式设计的线
线产生于运动, 是点移动的轨迹。不同的线可以引发人们的各种心理效应, 具有不同的情感倾向。
3、网页版式设计的面
线能分割页面, 而面则可以承载视觉符号, 是容纳网页信息内容的造型载体。与点、线相比, 面引发的注意力更大, 视觉冲击力更强烈, 可以体现页面的层次感, 形成纵深感, 具有浑然一体的视觉效果。
4、点、线、面在网页设计中的综合运用
点、线、面在网页中的运用往往不是孤立的, 而是点、线、面各要素综合的运用。在确定网页主体形象的位置、动态时, 点线面是需要优先考虑的因素。合理安排好点、线、面的相互关系, 对于设计出具有良好视觉效果的页面, 合理表达出网页的最终诉求十分重要。
三、网页版式设计的视觉流程
网页的浏览是通过视觉元素实现信息传播的视觉传达过程, 为了达到最优的视觉传达效果, 网页的版式设计就必须依据人们在视觉上的心理和生理特点, 确定各种视觉构成元素之间的视觉关系和浏览秩序, 即安排好网页的视觉流程。所谓的视觉流程, 是指页面内容的一种视觉传达过程, 它是以人的生理和心理习惯的认知模式来进行的, 是将各种构成要素在视觉运动的规定下进行空间定位, 即从注意力的捕捉起, 通过视觉流向的诱导, 直至最后的印象留存, 体现出这一程序的规划和诱导性。合理的视觉流程应在与人们认识过程的心理顺序和思维发展的逻辑一致的基础上, 根据信息的主次 (即传达重点) 来确定各元素的顺序, 并通过精心安排从而影响、引导浏览者的视线移动。
1、网页视觉流程的三阶段
当我们浏览网页时, 视觉流程通常是首先在一瞬间迅速浏览页面, 形成第一印象, 接着视线就会从最吸引注意力的一点开始依次作有序的流动, 最后完成信息的传递。整个过程包括印象感知 (第一印象) 、运动感知 (感知过程) 、整体感知 (最终印象) 三个心理感知阶段, 而每一阶段各视觉要素发挥的作用都有所不同。在第一阶段印象感知中, 视线并没有集中在页面的某一点上, 而是对页面的总体认识, 在这一阶段主要是页面的布局和色彩起着形成浏览者第一印象的作用。在第二阶段运动感知过程中, 视线从视觉重点开始, 按一定顺序浏览页面, 当视线遇到较强烈的刺激时, 就会停留下来给予足够的关注。
2、视觉流程的设计要求
网页的视觉流程设计无特定的模式, 但无论采用何种视觉引导方式, 都应该注意以下基本设计要求:
(1) 符合人的视觉习惯。这是网页的视觉流程设计的基本要求, 做不到这一点, 就将大大降低信息的识别度。
(2) 有效传达信息。视觉流程要保证可靠的信息传达, 网页的主题表达就是视觉流程设计的最终目的。
(3) 突出主要信息。页面的编排要以突出主要信息为目标, 组织页面的设计元素, 合理引导视觉。一般情况下, 长页面的注意中心位于页面的中上部, 往往是视觉流程的起点, 设计中要传达的主要信息, 如主标题、重要内容等都可以放在注意中心上。保持视觉引导的节奏感和流畅感。
3、页面间的视觉流程
站点内部的信息传达是通过页面之间的链接和切换来实现的, 由于网页的多维性和抄链接性, 浏览者的浏览顺序也不是单线性的。浏览者依据自己的需要, 按照各自不同的流程获取信息。合理的站点地图和导航设计才是保持网站视觉连续性和信息传达有效性的着力点。
四、结论
网页设计是现代设计艺术中具有广泛性和前沿性的新媒体艺术形式之一。它伴随着媒体技术与媒体艺术的发展而发展, 是媒体艺术中具有广泛受众的艺术形式。作为新兴的设计门类, 网页设计正在随着科技文化的发展不断前进, 它的前景也是无限广阔。要让网站传达出应该有的信息, 又要让人们不断疲劳的审美眼前一亮, 版式设计是网页设计必不可少的重要元素。因此, 网页艺术设计的版式是在动中求静、在静中求美的一种艺术设计形式。
指导老师:李旸
摘要：网页艺术设计是在INTERNET的发展和数字技术的发展中出现的新艺术形式。所谓网页的版式设计, 是指在有限的屏幕空间上将各种媒体元素进行有机的排列组合。网页的版式设计将设计师的理性个性化地表现出来, 是一种具有个人风格和艺术特色的视听传达方式。
关键词：网页设计,版式设计,视觉流程
参考文献
[1]吴道义.网页设计[M].合肥工业大学出版社, 2006.
[2]徐洋.品牌与VI设计[M].上海人民美术出版社, 2008.
浅谈中、韩网页界面版式的呈现 篇7
(一) 版式设计的诠释
版式设计就是版面的样式设计, 又称之为版面设计、编排设计等。版式设计是平面设计中的一个最具代表性分支, 是视觉传达艺术的重要基础。即在版式空间里, 确定内容表达的需求, 运用造型要素及形式原理, 把特定的视觉信息要素——文字、图片、图形、色彩、线条线框等, 进行合理有序的排列组合, 理性的把计划和构思以视觉形式表达出来, 运用艺术设计手法让人感官上产生艺术形式美感。版式设计既是主观的意识活动又是客观的意识活动, 它是将更多的艺术直觉投入到其中, 是一种创造性活动。日野永一是日本设计理论家、教育家曾经说过:“根据目的, 把文字、插图、标志等视觉设计的构成要素作美观的功能性配置构成, 即为版面设计。”
(二) 网页界面与版式设计的内在联系
网页界面设计作为新型媒体下的新型设计, 是当前备受人瞩目的设计领域。网页界面设计虽然在视觉感受上体现出与其他视觉设计领域有所不同, 但是同时也吸取了其他视觉设计领域的一些优点, 具有很强的视觉效果、互动性、互相操作能力、使用的人群广泛等与其他平面媒体相比有不一样的特点。它与报纸、杂志等等传统平面媒体有所区别, 又拥有平面媒体的优点, 使得网页界面在传递信息时更为直接、有效。所谓网页界面版式设计是指在有限的显示空间内将视觉元素文字、图片、色彩、动态画面等构成传递信息的各种要素, 进行合理的组织与准确定位, 根据页面主题使网站整体有一种视觉的关联, 以获得内部版式上的统一。这样的网页界面会给人一种别样氛围, 从而有利于网页主题表达的信息增强和浏览者的视觉留存。
网页界面就其设计而言, 还在于它的版式, 网页界面设计是否优秀, 都要看版式设计是否合理编排。网页的版式设计表现形式是多种多样的, 在进行不同网页主题设计时网页会带给人们不一样的视觉感受, 例如:旅游类网站轻松舒服, 娱乐类网站活泼自由, 企业类网站严谨稳定, 艺术类网站个性特别。所以在进行网页界面版式设计前, 首先最关键问题是确定网页的主题。根据主题的定位设计网站首页内容, 首页要有特点个性, 视觉冲击力强, 也要与其他网页做好链接, 导航设计要清晰。
二、中国网页界面版式中文化的介入
文化对于艺术设计影响很大, 各国文化都不同程度的影响设计师的设计思维, 中国文化也不例外, 因此, 在浏览中国网页界面时会发现中国文化参与下所导致中国模式化设计。中国设计讲究规矩、大方、朴素、不拘小节, 为此中国网页界面也不只保守于中国设计理念, 还吸收着外国现代设计的精华。
中国网页界面版式设计常用以传统的理念设计, 布局十分规范, 不会打破和谐平衡之美。画面中喜欢用方形修饰, 中国古代认为天圆地方, 所以方形对中国来说影响重大尤其是建筑设计, 现在又融于了网页界面。中国网页界面会根据网页主题的需要在网页中添加传统元素, 使网页营造出中国的文化气息。
自古以来, 中国人就懂得通过艺术审美引导人的精神, 到了今天艺术已经在时代的变迁过程中发生着许多变化。现代表现手法能够使视觉传达设计形式更加完美, 网页界面版式设计则使中国传统文化及图形融入到“国际化”的视觉语言中, 显示了其不断地融合与交汇的发展趋势, 通过视觉传达设计让浏览者减轻审美疲劳。
三、韩国网页界面版式中文化的介入
在现代设计的今天, 传统的文化已经是被新设计蕴含在其中并加以继承和流传。文化和个性的内涵都包含在新设计之中, 文化的不同使得设计师的设计构思有着一定的差异, 表达的视觉效果千差万别。
韩国文化是在许多外来文化的基础上发展起来的, 在快速发展的后工业文明之后, 韩国的设计体现出自己国家的特别朝气。说起韩国设计, 不少人都会对韩国的网页设计赞不绝口, 田自秉先生曾经说过, 设计应该“经济、实用、美观”, 这样一个观点对于韩国的网页界面版式设计而言, 已经是完成了其本身的使用价值。
韩国网页界面版式设计中的韩国文化是通过文字、图绘形象及其色彩等这些基本构成要素来体现的, 这是用来修饰衬托网页界面的, 突出了网页中不仅有现代的西方设计理念, 韩国的本土文化也融入进了网页界面版式的设计当中。
韩国绘画历史悠久, 现代设计师都是科班出身, 绘画功底都相当成熟。韩国接受西方文化较早, 二战后经济发展较快, 所以韩国的设计都非常时尚。他们常常会在网页中用矢量图形进行设计, 这些矢量图不管是手绘还是软件绘制都不难看出设计师们的深厚扎实的技术, 这也体现出韩国文化潜藏在其背后。韩国人受儒家思想较深, 有独特的审美观念, 并且韩国人一向都很喜欢“曲线美”, 这样潜在的意识使韩国人设计网页界面时总是愿意将边框拐角设计为圆弧形。韩国设计近年来趋向时尚路线, 这种设计意识也带进了网页界面设计当中, 韩国网页界面中总会出现带有韵律的流线形, 让人产生轻松、活泼的感觉, 整体布局自由、温馨体现出人性化设计。
四、中、韩网页界面版式风格特征
网页界面版式风格是指网页艺术上的独特的格调, 或在某阶段较为流行的网页界面版式的艺术形式, 网页界面版式有其自身的特色。网页界面版式的风格通过页面上的视觉元素统一外观, 来传递出文化的气息。受文化的影响不同国家网页界面版式的风格不同, 就韩国和中国而言:韩国的网页界面版式设计水平已经发展速度很快, 网页优美绚丽, 色彩丰富美观, 韩国文化潜藏在网页中恰到好处, 韩国网页最大特点就是细节的处理, 网页中会将文字或图片加有阴影效果, 使网页看上去有层次感;中国网页界面版式的风格较为典雅, 在吸收着外来的设计形式外, 中国网页也运用了一些传统具有中国特色的元素和构图方式, 进而形成了一种蕴含丰富文化特色的网站风格, 中国网页气势磅礴, 高贵大方地表现出了中国文化的介入, 网页中唯美细腻的将中国文化特色元素更趋于多元化, 丰富地体现出了中国网页的风格。
摘要：新媒体的出现将版式设计带进新的媒介中, 网页界面版式设计与传统的平面版式设计既有区别又有联系。然而, 中国和韩国网页界面受不同文化背景的影响, 都发展出各自的风格特点。本文从文化角度介入, 通过文化来了解两国网页界面版式到底呈现出怎样的视觉感受。
关键词：网页界面,网页界面版式,文化,风格
参考文献
[1]张鹏.王志敏.版式编排设计[M].印刷工业出版社.2009.2.
[2]鲁晓波.詹炳宏.数字图形界面艺术设计[M].清华大学出版社.2006.4.
[3]侯慧俊、前永宁.网页界面设计创意指南[M].上海科学技术文献出版社.2009.4.
[4]谭坤.从“韩流”热看韩国现代设计[J].艺术与设计 (理论) .2007.7.
[5]攀美筠.中国传统美学的当代阐释[M].北京大学出版社.2006.1