实用美术基础 课件 第8章　版式设计

实用美术基础八、版式设计8.1版式设计概述版式设计8版式设计是指在有限的版面空间内，将视觉元素——文本、图片（图形）、线条和颜色等内容，根据需要进行有序、有目的的排列组合设计。版式设计是艺术与技术的结合，应用范围广泛，涉及书籍（画册）、报纸、刊物、广告、宣传手册、企业形象、包装、网页、软件界面等各个领域。8.1.1版式设计的概念版式设计8.1版式设计概述8在现代版式设计中，常用一些专用名词来表示基本概念与度量，如视觉度、版心、出血边、分栏、栏宽、行高、字号等。视觉度是指文字和图版（插图、照片）在版面中产生的视觉强弱度。通常照片比插图的视觉度低，没有照片的版面比有照片的版面视觉度低。版心通常是页面正中位置，是指版面上除去周围白边，页面主要内容所在区域。8.1.2版式设计的专用名词版式设计8.1版式设计概述8出血边是指需要裁切的版面（如杂志、画册、书籍等）所预留的裁切空间。分栏是指因为版式或阅读的需要，将文本分为多列；栏宽是指分栏后的单栏的宽度。行高是指文字横排时，某行文字的顶端到下一行文字顶端的高度，是文字高度与行距的总和。字号是区别文字大小的度量标准。国际单位度量标准通常是点制也称为磅制，在微软系统中还有号制度量标准。8.1.2版式设计的专用名词专用名词版式设计8.1版式设计概述8版心文本分栏版式字号字号度量值之间的关系版式设计8.1版式设计概述8版式设计8.1版式设计概述8古籍版式主要是指古籍版刻的样式。造纸术发明之后，我国书籍印刷水平在宋朝达到新高度，线装刻本代替手抄本成为图书流传的主要形式。书籍的每一印页都有相对固定的格式和名称。通常版面四周围的黑线称为边栏或版框。边栏有单边、左右双边（俗称文武边）、四周双边和花边之分。版面的中心称为版心或版口，版心通常有用作对折准绳的黑线和鱼尾形图案，有的还印有书名、卷数、页码及本页字数。明代以前，版心下方往往还印有刻工姓名。8.1.3中文传统古籍版式古籍版式明前期刻书《元史》为例的古籍版式说明版式设计8.1版式设计概述8古籍版式鱼尾样式及名称版式设计8.1版式设计概述8象鼻样式及名称

（花边）竹节栏边栏与（花边）博古栏边栏版式设计8.1版式设计概述815世纪中期，约翰·古腾堡的金属活字印刷术的应用标志着西方图书批量生产的开始。到了15世纪下半叶，图文混排的排版方式开始从德国向其他欧洲国家传播。到了19世纪中期，摄影技术出现。摄影图片、字体和插画等元素一起成了现代版式设计的构成要素。20世纪初，艺术界充满了开创与改革。8.1.4西方版式发展西方版式版式设计8.1版式设计概述8

《御用天文学》首页及内页版式西方版式版式设计8.1版式设计概述8摄影图片成为现代版式设计的构成要素之一阿波利奈尔写给爱人的情诗图设计讨论版式设计原则通过搜集资料、分析案例、比较分析等步骤，从设计目的、需求审美、设计作用、设计价值等方面，总结版式设计需遵守的基本原则。讨论成果：学习笔记讨论建议：在讨论过程中要结合具体案例有理有据地阐述相关观点。设计实践杂志版式案例临摹从时尚类、设计类、摄影类等杂志中选择图文并茂的优秀版式页面，自行拟定作品内容与配图，进行版面空间分配、构图布局、色彩搭配的临摹学习。设计成果：版式临摹作品设计要求：①建议计算机软件辅助绘制，可根据实际情况更改作品尺寸；②所选杂志页面版式内容丰富且富有设计性与创意性；③建议在临摹基础之上，根据个人的审美与所选内容进行版式再设计。8.2版式设计流程版式设计8在深刻理解主题内容与传递需求的基础上，才能更好地筛选内容与展示信息。在进行编排之前，先要理解设计主题与需求，版式的内容与排列要服务于主题。用什么字体？用多大字号？横排还是竖排？版式风格趋向？这些都是由主题和需求所决定的。8.2.1明确需求版式设计8.2版式设计流程8分级是根据信息传递的重要程度将内容分为不同层级。通常第一层级是需要突出显示的文字或图片，如主标题、广告语、关键词、主要图片等；第二层级是对第一层级的辅助说明或次级信息，如内文、配图、需要特别强调的信息等；第三层级是最次要的，如通栏、页码、注释等。特别说明的是，这种分级并不是绝对的，是根据主题内容而定的，需要根据文本内容、图片类型的不同而灵活设计，其目的是帮助我们了解编排对象在版面中的功能和意义。8.2.2内容分级内容分级版式设计8.2版式设计流程8版面中的通栏（红色框选部分）版面中的注释版式设计8.2版式设计流程8版面设计过程就是将视觉元素进行空间分配的过程。在分配过程中，需要从版面美感、视觉流程、内容展示、阅读习惯等多方面去考虑，以达到合理、舒适、美观的视觉效果。8.2.3空间分配版式设计8.2版式设计流程8篇幅拆分版面设计过程就是将视觉元素进行空间分配的过程。在分配过程中，需要从版面美感、视觉流程、内容展示、阅读习惯等多方面去考虑，以达到合理、舒适、美观的视觉效果。篇幅拆分版式设计8.2版式设计流程8中文文字分栏效果版式设计8.2版式设计流程8字号确定需要基本确定每个层级字号大小，通过各层级间的字号比例与对比关系体现层级的主次关系。通常第一层级的字号与第二层级的字号大小对比强烈，而第二层级与第三层级的字号差异要小一点。字号确定版式设计8.2版式设计流程8同字号不同字体的视觉大小差异《生动》海报版式设计8.2版式设计流程8间距设定影响阅读体验的因素不仅有字号，还有间距。每一个字、每一行字、每一段字的上下左右的空间间隔是否合理也关系着阅读的清晰与流畅。间距设定版式设计8.2版式设计流程8《世博会博物馆十周年图像展》海报(作者：世博会博物馆林倩蝶)《金陵小巷人物志》目录（设计：周伟伟）《金陵小巷人物志》（设计：周伟伟）版式设计8.2版式设计流程8网格设计在进行空间分配时，还可以借助网格系统进行空间设计。在确定版心尺寸、设计内容、图片尺寸等的基础上，将版心面积划分为统一的网格，其网格数量无固定限制，网格数量越多可组合出的版式样式越多，可放置的图片尺寸越灵活。网格设计版式设计8.2版式设计流程8网格划分与版式变化版式设计8.2版式设计流程8页面留白留白也是构成页面版式必不可少的因素。所有的白都是“有目的的留白”。常见的手法有以下几种:通过留白减轻页面给人的负担;通过留白有目的地突出表达重点;通过留白区分元素的存在，弱化元素与元素之间的阻隔。留白设计版式设计8.2版式设计流程8通过留白减轻页面给人的负担 通过留白有目的地突出表达重点通过留白区分元素的存在版式设计8.2版式设计流程8版面设计过程就是在版式设计中，为了强化版面信息，优化结构布局、引导视觉流程，提升阅读体验，需要对其色彩调配进行有序的设计。先要确定主色调，主色调在营造版面氛围与意境方面可以发挥主导作用。多种颜色共同使用时还需要进行色彩调配。通常色彩的明度、纯度和面积是影响配色视觉的主要因素。8.2.4色彩调配色彩调配版式设计8.2版式设计流程8夜光博物馆活动海报（作者：正佳自然科学博物馆胡涵）红黑色调版式效果对比色彩版式效果色彩调配版式设计8.2版式设计流程8有彩色与无彩色对比的版式效果色块分割版式效果利用色彩差异烘托主次关系,加强版面表现力。设计讨论中、英文版式的编排差异从字形、字号、篇幅、阅读方式、编排规律等方面对比分析中英文文本的编排特点。通过搜集案例、比较分析、互相讨论等步骤归纳总结中文文本和英文文本版式的编排差异。讨论成果：学习笔记讨论建议：在讨论过程中要结合具体案例有理有据地阐述相关观点。设计实践迎新晚会节目单在新学期到来之际，校园迎来了新一届的学生。以师生欢聚一堂，共同展示自我风采为目的，设计迎新晚会节目单。从实际问题出发，结合晚会宗旨、迎新特色、演出信息、节目内容等方面筛选素材，并转化为视觉元素，最终完成节目单的设计制作。设计成果：晚会节目单设计要求：①节目单需包括活动标题、活动信息及相关配图；②文字清晰、信息完整、图片选取合理；③版面用色与主题相符，视觉美观、效果突出。8.3传统媒体的版式设计与趋势版式设计8目前，常见的书籍版式包括封面、扉页、书脊、版权页、目录、内文等。虽然目前我国没有出台图书版式设计的标准，但在设计过程中还需要遵守出版社的要求。书籍排版的发展越来越个性化。在当今时代，纸质书籍想要占据市场就必须挖掘自身特点，让读者享受舒适、独特的阅读体验。8.3.1书籍的版式设计及趋势书籍版式内容与要求版式设计8.3传统媒体的版式设计与趋势8封面与书脊丛书标题小于书名且标注朝代用方括号版权页书籍版式内容与要求版式设计8.3传统媒体的版式设计与趋势8《博物》图文混排版式《中国国家地理·能源山西》特辑页眉设计书籍版式内容与要求版式设计8.3传统媒体的版式设计与趋势8左右页面的版式协调书籍版式个性化版式设计8.3传统媒体的版式设计与趋势8个性化的书籍版式 趣味立体儿童读物书籍版式个性化版式设计8.3传统媒体的版式设计与趋势8书籍内页版式设计（书籍设计：尹琳琳）版式设计8与书籍相比，杂志的出版周期短、发行区域固定、内容广泛，同时兼具时效性、新颖性与知识性。在具体设计时，杂志的版式与读者定位、主题内容、发行区域有着密切的关系。杂志内页的版式内容与书籍相似，同样包括文本、图片、书眉、页码等内容。8.3.2杂志的版式设计及趋势杂志版式版式设计8.3传统媒体的版式设计与趋势8《nature》杂志《青年视觉》杂志《中国国家地理》杂志杂志版式版式设计8.3传统媒体的版式设计与趋势8杂志内页的文字、图片、书眉、页码《环球少年地理》内页版式设计8招贴是当今主要的户外广告形式。在国际教科书出版公司出版的广告词典里，招贴则是指张贴于纸板、墙、大木板或车辆上的印刷广告，或者以其他方式展示的印刷广告。目前，招贴上的内容主要包括文字与图片两大元素。新媒体时代下，招贴设计会更加人性化，更具个性化及互动性，要更多地关注用户的需求与喜好，使信息的传播更加快捷与高效。8.4.3招贴的版式设计及趋势招贴版式版式设计8.3传统媒体的版式设计与趋势82010年南非世界杯招贴华为麦芒6发布会倒计时招贴2014年巴西世界杯招贴设计讨论纸媒发展之我谈结合案例谈谈你对新时代下纸媒发展的看法。通过阅读文献、市场调查、案例分析等研究方法，提出对传统纸媒发展远景的见解，探讨纸媒发展的新方向，并阐述其可行性。讨论成果：研究报告（图文并茂）讨论建议：辩证地看待未来纸媒的发展，至少提出三种发展方向，并结合具体案例有理有据地陈述观点。设计实践学生会纳新招贴设计为了给学院学生会吸纳更多的人才,给同学们提供一个展示自我的平台,学院学生会准备举行纳新活动，为相关宣传活动设计一幅招贴。从实际需求出发，将纳新口号、学生会特色、活动地点等信息转化为设计元素，并结合相关图片与色彩进行招贴版式设计。设计成果：招贴作品设计要求：①招贴尺寸不小于A3；②招贴内容包括但不限于活动标题、纳新口号、学生会特色、活动地点和相关图片；③文字与图片布局合理，信息完整且具有可读性；④版面配色与内容相一致，整体美观且富有设计感，具有强烈的视觉吸引力。8.4新媒体的版式设计与趋势版式设计8近年来，数字媒体逐渐成为大众生活中的重要部分，其中网站成为企业和机构对外宣传与服务的重要窗口。网页的版面中主要包括文字、图片、符号、动画、菜单、按钮等内容，其中文字、图片、符号、动画是对信息的表达与展示，而菜单和按钮则是网页跳转和交互操作的必备条件。同时，受显示设备和阅读习惯的影响，网页版式通常采用纵向分割的方式将页面进行划分。8.4.1网页的版式设计及趋势网页版式版式设计8.4新媒体的版式设计与趋势8央视网教育版块首页央视网熊猫版块页面视频版式设计8.4新媒体的版式设计与趋势8简约化在简约化版式中，一般没有装饰性元素或边框，弱化了材质、渐变、阴影等效果，仅保留必要的信息和内容。简约化版式页面信息层级明确，方便用户快速寻找目标，可以节约用户的时间成本。简约化版式版式设计8.4新媒体的版式设计与趋势8

AR页面极简化页面版式设计8.4新媒体的版式设计与趋势8矢量插画化矢量插画化版式中，设计者通常使用矢量画作为元素或内容，使网页看起来清新有趣，加强网站本身的独特性。矢量插画版式版式设计8.4新媒体的版式设计与趋势8

2.5D插画页面矢量化页面版式设计8.4新媒体的版式设计与趋势8头版化网页中的头版头条版式是源自传统纸媒中对重要新闻的设计。在具体设计时，通过使用尺寸超大的图片与简洁醒目的标题传递网站的主旨与精华，吸引人注意。头版版式版式设计8.4新媒体的版式设计与趋势8标题与图片结合的头版化页面 头版化网页效果 版式设计8当下，移动程序已经成为大众生活、工作必不可少的工具，也是大家获取信息的主要渠道。程序界面看似只是几种元素的排列组合，但其内涵却是信息传递与交互规划的构架，是移动版的网站。8.4.2程序界面的版式设计及趋势版式设计8.4新媒体的版式设计与趋势8界面信息的布局首先，要掌握对齐、重复、亲密、对比四大设计原则。其次，在有限的界面中，需要通过合理的信息布局帮助用户快速读取信息，降低出错率。在信息可视化方面，适当使用图表代替文字可以增强页面的易读性与设计感。界面信息的布局版式设计8.4新媒体的版式设计与趋势8手机界面对齐排版中国海军博物馆小程序界面版式设计8.4新媒体的版式设计与趋势8界面常见布局随着信息化程度的提高，移动程序的综合性越来越强，版式变化也越来越快。界面布局设计中，主要表现为以下几种：列表式布局版式设计8.4新媒体的版式设计与趋势8微信公众号界面布局天气预报界面布局列表式布局适用于含信息量或文字较多的界面，便于在一个界面上展示同一个级别的分类模块。宫格式布局版式设计8.4新媒体的版式设计与趋势8九宫格布局微信服务界面 宫格在展现形式上表现为以矩阵排列的大小相等、形状一致的几何网格。通过点击宫格，可跳转到下一级页面。卡片式布局版式设计