版式版式•版式设计又被称为版面设计、编排设计概述•版面设计并非只用于书刊的排版当中,网页、广告、海报等涉及到平面及影像的众多领域都会用到版面设计。好的版面设计可以更好的传达作者想要传达的信息,或者加强信息传达的效果,并能增强可读性,使经过版面设计的内容更加醒目、美观。版面设计是艺术构思与编排技术相结合的工作,是艺术与技术的统一体。版式设计的应用类别•1.出版物版面设计•如报纸版面,杂志版面,书籍版面。•2.广告版面设计•如报纸广告,杂志广告,灯箱广告,路牌广告。•3.促销道具设计•如包装,折叠广告,POP广告,产品目录。•4.产品形象应用识别设计•如名片,年报,画册。•5.多媒体网页版面设计VI设计,全称为“视觉形象识别系统设计”,分为企业形象设计和品牌形象设计。网页设计•版式设计对于平面设计是一门相对具有独立性的设计艺术,研究平面设计的视觉语言和艺术风格,是现代设计艺术的重要组成部分,是视觉传达的重要手段。版式设计的流程•1.信息的收集•2.信息的提炼•3.确定主风格•4.图文处理与编排•版式设计是按照一定的视觉表达内容的需要和审美的规律,结合各种平面设计的具体特点运用各种视觉要素,将各种文字、图形及其他视觉形象元素加以组合编排,进行表现的一种视觉传达的设计方法。优秀版面的评价标准•优秀版面设计的核心标准——传播力•1.版面设计的功能性•主要通过把握视觉流程达到准确传达,快速传达.•2.版面设计的艺术性•可利用形式感法则与图文的视觉情感达到定位传达的目的.•3.版面设计的统一性•可利用网格系统达到印象传达,增强品牌记忆.•版式设计三大视觉要素–文字–图形–色彩•1、文字•主题内容(标题、正文、注解等)离不开文字,通过文字获得主要信息。•设计者需掌握中外字体的一般常识,不同的字体给人的心理感受不一样,美的字体能使读者感到愉悦,帮助阅读和理解。•图片在版面设计中,占有很大的比重,视觉冲击力比文字强85%。•但这并非语言或文字表现力减弱了,而是说图片在视觉传达上能辅助文字,帮助理解,更可以使版面立体、真实。2、图形或图像•文字版中加入图形图片立即引起视觉流程的变化•图形的形式、大小、数量——影响读者注意力•主题借助图形、图片来增强文字说服力,提高阅读兴趣。特写图像视觉冲击力强以符号为图形以装饰画或油画为图形•色彩较之图文对人的心理影响更为直接,具有更感性的识别性能。现代商业设计对色彩的应用更上升至“色彩行销”的策略,成为商品促销、品牌塑造的重要手段。3、色彩各种色调给人的感觉不同,要做到色调与内容的统一色彩的渐变使版面和谐统一运用调和色来统一版面夺目的色彩配以活泼的编排,让人耳目一新•版式设计的基本原则有以下四个方面•主题与导读•内容与形式•强化整体布局•技术与艺术版式设计原则•鲜明主题的诱导力目的:清晰的条理性,最佳形式感,最佳诉求效果。价值:吸引注意力,易解。•形式与内容统一•前提:形式符合主题思想内容。•错误现象:形式脱离内容,缺乏艺术表现,空洞和刻板。•强化整体布局•(图与图、图与文)在编排结构及色彩上做整体设计。•获得整体性的方法:•1、加强整体的结构组织方向视觉秩序,如水平结构、垂直结构、倾斜结构、曲线结构等。•2、加强文案的集合性,将文案中多种信息组合成块状,增强版面文字的条理性和清晰的导读性。•3、加强展开页的整体设计。无论是连页、跨页、折页,或是展开页的设计,均为同一视线下展示的版面,因此加强整体性可以获得更加良好的视觉效果。•技术与艺术的统一•设计者应结合现代各种工艺,进行作品的创作,否则设计作品将会在现行技术下无法实施。版式设计的编排构成版式编排设计的基本要素:点、线、面的编排构成任何一种版式设计,在空间原理上均归于点、线、面的分类。点、线、面是几何概念,亦是版式设计的基本元素和主要的视觉语言形式。•点的编排构成•版面中的点由于大小、形态、位置不同,所产生的视觉效果也不同。•线的编排构成•线的编排构成分为:实线、虚线、空间视觉流动线。人们对线的概念都仅仅停留在版面中形态明确的线,对空间的视觉流动线则忽略。线构成的招贴线构成的包装1、线具有分割作用2、线具有引导视线的作用•3、线框的约束与强调–线框的限定,即使主体产生空间“场”的作用,同时也具有相对约束的功能。线框的约束与强调•面的编排构成•点的放大、点的密集或线的重复构成面。另外,线的分割产生各种比例的空间,同时也形成各种比例关系的面。•面在版面中具有平衡,丰富空间层次,烘托及深化主题的作用。点的密集成面由文字组成面,与图片形成对比错落的面与线构成版面的节奏•三维空间的编排构成•生活中的三维空间是立体空间,看得见,摸得着,能深入。•而在平面编排中的三维空间,是在二维空间的平面上建立的近、中、远、立体的看见关系,可见摸不着,是假想空间,是通过借助多方面的看见关系来表现的,即:比例、动静图象、肌理等看见因素。•1.比例关系的空间层次•面积大小的比例,既近大远小,产生近、中、远的空间层次,在编排中主题形象或标题文字放大,次要形象缩小,来建立良好的主次,强调的空间层次关系,以增强版面的节奏和明快。比例关系的空间层次•2.位置关系的空间层次•前后叠压的位置关系所构成的空间层次。将图像或文字做前后叠压排列,产生强节奏的三度空间层次。•版面上、下、左、右中位置产生的空间层次,最佳视域为视觉中心位置,并产生视觉焦点。疏密的位置关系产生空间层次,在前后叠压关系或版面上下左右位置关系中,做疏密、轻重、缓急的位置编排,所产生的空间层次富于弹性,同时也产生紧张或舒适的心理感受。最佳视觉:视觉中心位置其次:上部、左侧、右侧、下部•无论是有色或无色设计的版面,均为黑、白、灰的三色空间层次。黑与白为对比极色,最单纯,最强烈,醒目,最能保持远距离视觉效果;灰色能概括一切中间色,且柔和而协调。•三色近中远空间位置,依版面具体的明暗调关系而定,版式设计强调色彩的调性,一幅优秀的作品,色调应该非常明快,或高调、低调、灰调,或对比强烈,或对比柔和,反之则乱糊不清。3、黑、白、灰关系的空间层次•动使版面充满活力,获得更高的注目度,静使版面冷静,含蓄,具有稳定的因素,两者在版面的组织上,以动为静,动为前,静为后,彼此以动静的对比关系建立空间感。4、动静关系,图象肌理关系产生空间层次•自由构成•图或文字、点或线的构成关系都充斥着随机无序、无主次、无中心、相互矛盾、相互排斥,以及极端的耗散编排。•这种风格带给我们更轻松、自由、活力的人性化设计,也是时尚前卫的标志。图形的编排构成•图版率•图版率是指版面相对于文字,图(图片或照片)所占据的面积比叫做图版率,即:图所占版面的比例。•用%表示,如版面全是文字,图版率为0%,相反全是图形画面,图版率为100%。•图版率低,减少阅读兴趣•图版率高,增强阅读活力•5.2角版、挖版、出血版•1、角版•角版也称为方形版,即画面被直线方框所切割,这是最常见、最简洁大方的形态。•角版图有庄重、沉静与良好的品质感,在较正式文版或宣传页设计中应用较多。•角版理性,使版面紧凑。•2、挖版•挖版图也称退底图,即将图片中精彩的图像部分按需要剪裁下来。•挖版图形自由而生动,动态十足,亲切感人,给人印象深刻。•借简洁、单纯形态,去追求鲜明而强烈甚至是张扬到极致的艺术效果。•挖版打破约束,活泼自由。•3、出血版•出血版,即图形充满或超出版页,无边框的限制,有向外扩张和舒展之势。•出血版由于图形的放大,局部图形的扩张性使人产生紧迫感,并有很高的图版率,一般用于传达抒情或运动的版面。•情感得以更好地宣泄,动态得到更好地舒展。•4、角版、挖版、出血版的组合运用•角版沉静,挖版活泼,出血版舒展、大气。设计中,图形的三种处理方式都可以穿插灵活运用,单一的编排方式,版面显得呆板而松散无序。•视觉度•视觉度是指文字和图版在版面中产生的视觉强弱度。•版面的视觉度和图版率一样关系到版面的生动性、记忆性和阅读性。•图形的面积与张力•版面中,图形面积的大小不仅影响版面的视觉效果,而且直接影响情感的传达。•1、大图形产生量感和张力•量感是指图片放大后版面即产生一种饱满的心理量感,以及增强图片的扩张力度。•大图形面积注目度高,感染力强,能给人舒服愉快之感。•大图形引导版面中心,成为视觉焦点。•2、小图形精密而沉静•将小图形插入字群中,显得简洁而精致,有点缀和呼应版面的作用。但同时也给人拘谨、静止、趣味弱的感觉。•3、大小图形比,增强对比度•版面如果只有相似的大图或完全是相似的小图构成,版面会显得平淡。•只有加强图片的大小比例,增强对比度,版面才有张力与活力。•图片跳跃率:版面中,最大图片的面积与最小图片的面积比率称为图片跳跃率。•延续页面的整体设计•1、左右页的整体设计。•展开页的整体设计建立在形象的对比关系上。左右页常以一大一小、一多一少、一动一静、一黑一白、一曲一直、局部与整体对比构成,在对比中建立和谐的整体关系。•2、延续页面的整体设计•除左右页面的整体考虑外,还有整个折页、整本手册页与页之间、页与整体之间的节奏关系、对比关系以及整本册子风格性等都得进行整体设计把握。整体节奏的把握•(2)文字、图片的整体设计•(3)延续页面色调的整体设计•(4)主要版式风格的延续版面设计的编排形式法则单纯与秩序对称与均衡对比与调和节奏与韵律虚实与留白•单纯与秩序•单纯化的概念•1、基本形的简练•2、编排结构的简明、单纯。•运用理性和逻辑思维,对图文资料进行大胆取舍,创建清晰的形式感。•单纯化可使版面获得完整、秩序、明了感和良好的视觉效果;反之,则杂乱不堪,造成视觉传达的障碍。•对比与调和•1、对比•对比是将相同或相异的视觉元素作强弱对照编排所运用的形式手法。•简洁明快的对比关系是获得强烈视觉效果的重要手段。•2、调和•(1)内容与形式的调和•(2)版面各部位、各视觉元素之间寻求相互协调的因素,也是在对比的同时寻求调和。•对比强调差异,产生冲突;•调和寻求共同点,缓和矛盾。明暗对比疏密对比面积对比用统一的色线调和用统一元素调和用相似的形象和方向调和•对称与均衡•对称与均衡是一对统一体,常表现为既对称又均衡,实质上都是求取视觉心理上的静止和稳定感。•关于对称与均衡可以从两方面来分析,即:对称均衡与非对称均衡。绝对对称•1、对称均衡•对称均衡是指版面中心两边或四周的形态具有相同的公约量而形成的静止状态,也称为绝对对称均衡。•上下或左右基本相等而略有变化,又称相对对称均衡。绝对对称•绝对对称均衡给人庄重、严肃之感,是高格调的表现,是古典主义版面设计风格的表现,但处理不好容易单调、呆板。相对对称•2、非对称均衡•非对称均衡是指版面中等量不等形,而求取心理上“量”的均衡状态。•非对称均衡比对称均衡更灵活生动,富于变化,是较为流行的均衡手段,具有现代感的特征。•节奏与韵律•“所有的艺术都在不断地向着音乐的境界努力。”——沃尔特.佩特•节奏与韵律来自音乐的概念,也是版式设计常用的形式。•节奏是均匀的重复,是在不断重复中产生频率节奏的变化,节奏是延续轻快的感觉。如舒缓的小夜曲,又如激烈的摇滚乐。•无论图形、文字或色彩等视觉要素,在组织上合乎某种规律时所给予视觉和心理上的节奏感觉,即是韵律。•主要建立在以比例、轻重、缓急或反复、渐变为基础的规律形式上。画面中的韵律感节奏使版面生动、活泼•虚实与留白•版面中的“虚”,可为空白,也可为细弱的文字、图形或色彩,主要依具体版面而定。•为了强调主体,可有意将其它部分削弱为虚,甚至以留白来衬托主体的“实”,所以留白是版面“虚”处理中一种特殊的手法。•版面中的虚实关系为以虚衬实,实由虚托。虚实层次使版面丰富,空间使形象或内容更突出版面的设计观念强调创意多维空间的复合构成强调个性风格表现逆向视觉角度网页版面的互动性•强调创意•平面设计中的创意表现为两种:一是针对主题思想的象征、明喻、暗喻等思想创意;二是版面编排的设计创意。•将主题思想的设计创意与编排技巧结合表现,使创意思想得到更大的发挥,更佳的表现。•多维空间的复合构成•多维空间表达为:在二维平面空间上表现立体的、矛盾的、时间的、虚幻的复合空间