美文网首页
版式设计中的实用小方法

版式设计中的实用小方法

作者: 晨的平方 | 来源:发表于2015-06-14 00:39 被阅读183次

    无论是街上各式各样的印刷品,web以及移动端上精致的页面布局,平面设计其实都在传递着各种各样的情绪,可能是“趣味”,是“美感”,是“愉悦”,或是“创新”。事实上,在阅读这本书之前,我也时常能感受到设计中微妙的情绪传递。但是这种莫名的冲击究竟从何而来,我却没有办法准确地描述。如何用一个设计师的眼光去审视平面设计,是《版面设计的原理》这本书从始至终的核心。

    日式设计大师原研哉会告诉你,“设计不是一种技能,而是捕捉事物本质的感觉能力和洞察能力。”可是,我无意成为大师。作为一个热衷追求终极奥义的理科生,我似乎对“究竟留白多少更加合适”,以及”字体的大小和间距的比例多少更加适宜阅读“诸如此类的问题更加好奇。

    我相信任何优秀的平面作品都不是偶然。而这本书中恰好就有很多关于我心中疑惑的解释,也纠正了很多从以前开始就一直在犯的错误。

    正文

    -------------------------------------------

    1.信息的整理是设计的第一步

    我们时常会看到这样的设计,明明是严肃的讲座却使用可爱的字体,明明应该重点强调的讲座日期却因为盲目追求美观而用小字显示,或是海报中的要素信息只是一股脑地进行罗列而没有妥善地布局。这是因为很多的业余设计者(包括我自己),在打开ps等设计软件之前,并没有对设计对象的信息进行有效的梳理。该如何正确理解设计目的,理顺设计作品的信息呢?我们举个例子。

    图片仅用于解释说明,较匆忙请见谅

    总结起来,就是归纳信息,提取重点,妥善布局这三个步骤。

    2.设计的基本原则

    设计类经典入门书《写给大家看的设计书》中就详细阐述了设计的四大基本原则:亲密性,对齐,重复,对比。这本书中也有类似的阐述。

    tips:贴近和远离

    要提升作品中要素的亲密性,显得整体很有条理,增加可读性,贴近和远离是最好的方法。

    贴近很好理解,把相关的内容贴近放置。比如把图片和相关解释的文字间的间隔缩小到1mm的程度,自然就能看出他们密切相关,是一个整体。再比如,一张名片中,地址电话和传真等重要性一般,相关度高的信息可以用相同的字号贴近放置,如果四散在名片的角落,那么视线就会到处飘,产生迷惑。

    那么远离呢?为什么把元素远离反而会使画面更有条理呢?内在原因是人类的“完形心理”作祟。1955年意大利心理学家Gaetano Kanizsa发现了卡尼萨三角和卡尼萨矩形。人总是习惯性的把引入眼帘的事物作为整体去认识,而不是单独的要素。因此虽然卡尼萨三角的要素都远离着放置,但是整体却非常有条理,因为人脑里已经自动形成了三角形的错觉。

    卡尼萨三角

    tips:排列与对齐

    左右对齐是最不容易出错的对齐方式,对齐的位置呈现出一种直线的状态,正是这条假想的直线让画面更有条理,这条直线我们称其为:假想标准线。画面中除了假想标准线之外,还有一个假想框,也叫版心。如果你希望制作一个十分有条理的画面,把要素统统安排在版心里,会是非常保险的选择。

    版心是需要设定的,通常是编排杂志等多画面作品前的必要工作,这样可以增加杂志整体的一致性。版心的面积占整个版面面积的比例叫做版心率。版心率越高,信息越多,留白越少,画面就越欢快热闹或是拘束紧迫;版心率越低,留白越多,就越显得奢华高级或是冷清。

    对待版心还有一个妙用,那就是如果你运用出血的方式,也就是把图片等要素的一部分设置在版心之外,或许能够给平淡的页面带来一丝灵动与变化,也时常在需要展现魄力的时候使用。

    tips:重复与节奏感

    重复可以是要素的重复,可以是版式整体风格的重复,也可以是文字的字形间距的重复。元素的重复可以让页面整体风格更加一致,突出主题,也可以用于引导读者视线,例如每段段头放置一个小图形,让段头有了焦点,吸引读者视线令阅读更加流畅。

    重复有时也可以增加作品本身的节奏感,比如把相同形状的要素按不同角度大小不同透明度配置,或是多种形状要素重复形成管弦乐合奏般复杂的节奏感,表达出页面欢快和谐的氛围。但要注意,元素添加过度非常容易给人厌烦的感觉。

    tips:对比与强调

    对比有各种手法,明暗的对比(如昏暗的背景,明亮的文字),尺寸大小对比,密度的对比,颜色的对比等。可以是图片与图片的对比,也可以是图片与文字的对比等等。对比也需要有的放失,如果同时强调很多,那么整体的对比反差就会被弱化。

    明暗对比和尺寸对比

    在一个页面中,如果你要单独强调一个内容或元素,你可以采用加框包围,涂满颜色,隔线区分,增加点缀要素等任何一个可以制造差异的法子,除了上述,还可以通过改变形状,尺寸,粗细度,颜色以及留白等等来寻求差异。

    3.易读的版式设计

    字体是版式中最重要的元素之一。英文字体分成称线体和非称线体两大类,称线体显得古典柔和,非称线体则显得清新活泼有力度。中文字体中也有类似的划分,宋体等笔画末尾有顿钩凸起装饰的字体就类似英文中的衬线体,黑体更有棱角感和力度感,和非衬线体类似。字体搭配中也是宋体和衬线体,黑体和非衬线体配合更加协调。

    字体与排版是一门完整的学问,文中列的较为琐碎,并没有完整系统的阐述,同系列的还有一本《文字设计的原理》,等过段时间读过再来整理。

    虽然内容不系统,但还是有一些非常实用的技巧。

    对字体选择的建议:

    • 粗体字不能应用于磅值小的字体,可能导致笔画交错,细节不清晰;

    • 文字除了粗细,还有斜体宽体等变体,隶属于一个字族。同族字构成版面会更加协调;

    • 标题字号较大,文字间隔松散就会影响阅读。应配合版式适当缩小字间距;

    • 同样的字号英文会比中文小,需要把英文的字号设定得比中文字号稍大一些。

    • 频繁使用设计新奇的字体会让人产生厌烦;

    对排版的建议:

    • 标点符号放在行头或行尾都会影响阅读,必须进行避头尾的设置;

    • 若把图片或插画当作重点突出(占据较大版面),文字就要密集集中不宜占据过大版面;

    • 每行的长度太长,就会让视线移动很长距离,使得阅读困难。行长太短, 频繁换行,阅读就变得断断续续。因此,秘诀是把行长设定成不需要改变脸的方向的程度。

    • 文章通俗易懂适宜快速换行,例如杂志;研究类书籍则要有足够的行长便于人集中精力阅读内容。通常通过分栏调整行长。

    • 间隔的设置:栏间隔>行间隔>字间距>文字中的留白。这样设置的版面是易于阅读的文字版面。

    相关文章

      网友评论

          本文标题:版式设计中的实用小方法

          本文链接:https://www.haomeiwen.com/subject/mwidqttx.html