版式设计基础:建立条理 2(3)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

假想边框其实可以简单理解为“边框”或“边界线”,是指版心周围的边框与文字相同重量的边框。文字的边框是字体构成的知识点,汉字中称“边框”为“围框”,日文中称“边框”为“假想边框”,英文字体结构不是以方框的形式构成的,因此英文中没有边框的概念。简单了解一下就行了,以后会讲到的。

5.1 版面

相信很多设计师都分不清“平面”、“空间”、“正负形”、“版面”、“空白”、“留白”他们之间的差别。今天简要概述一下什么是版面的,以后会讲到这些知识点。

我觉得对于初学者而言,就把版面理解为纸张的规格就行了,纸张规格多大,版面就多大。例如A4纸的规格是210mm×297mm,那相对应的版面就是这么大。同理App的设计中,iphone6的设计尺寸是750×1334像素,那么相对于的版面就是750×1334像素。

undefined

或者你可以把版面理解为画板,画板有多大版面就有多大。

5.2 版心

基本上所有文字或图片等要素都不会摆放在版心的边界线之外。版心是使整个页面具有条理性的重点。如果没有设定版心就进行排版,不仅版面整体上显得松散、杂乱无章、而且会使文章难以阅读。

undefined

5.3 版心的计算方法(针对书籍设计)

版心的计算方法是针对于书籍设计的,在这里就不多提了,以后我讲到版面、版心、订口时会讲如何设计书籍,选择规格等等。这里大家就先了解一下版心的计算方法吧。(磅值指的是书籍设计所采用的字符度量单位)

【计算公式】(文字的磅值+行间距)x 行数 – 行间距 = 版心的上下尺寸。

undefined

5.4 设置版心 与 没有设置版心 的对比

一般可能看不出来有什么改动。左面那张图没有设置版心,文字没有一定的规则约束,上下左右之间的留白也没有一定的关联性,会显得有些杂乱。而右面那张设置版心后,文字得到了一定的约束,留白之间有一定的关联性,存在着一定的比例关系,这样的平面看上去就更和谐一些。

undefined

5.5 关于版心的 其他知识点

【打破规则】设定好版心后,就可以将正文或配图编排在版心中。但是,也不是绝对禁止把要素设置在版心之外的,有时候将图片或插画的一部分设置在边界之外,可以给平淡死板的版面带来变化。

【针对单页的设计】使用共同的版心有助于显示整书的条理性。若是单页的作品设计,就不用像多页那样严格。特别是编排要素较少的海报,设定版心几乎没有意义。

undefined

* 要点

版面:把版面想象成规格。

版心:版心基于版面,版心能让要素变得有约束性,整齐而和谐。

版心的计算公式(针对书籍设计):(文字的磅值+行间距)x 行数 – 行间距 = 版心的上下尺寸。

版心的其他知识点:有时候不一定非要遵循版心来进行设计,适当打破规则使平面具有节奏和活力。在要素较少的情况下可以不做版心,直接进行设计。

6. 网格的运用

以后我打算单独做一期关于网格的概念和用法的文章。这篇文章篇幅有点长了,就不再过多的去细说了。今天就简要概述一下网格的定义与划分方法。“网格”是提升页面条理性的设计方法。

【网格的历史】这种方法早在大约1950年的时候开始在欧洲使用了。网格系统的基本形状是“矩形”。把文字或图片都摆放在矩形里,视觉上能创造出条理分明,整齐的美感。

undefined

【网格的划分】

[2×3的网格] 网格数越少,设计上越容易使版面整齐固定,但自由度相对随之下降。

[3×4的网格] 是比较常用的网格手法。

[3×5的网格] 这种划分方式也使得设计变得更加的灵活,更多用于信息量比较大的版式设计中。

[4×6的网格] 网格数越多,配置的自由度就越高,但是要注意文字的折回距离变短,也会变得难以阅读。

谢谢阅读

感谢支持

在此文章中,我还是将“版面”写为“平面”,当讲完“版面”的知识点时,会把口语“平面”改为“版面”。专业术语与理解力虽有差异,但这样写最容易让大家理解。如有大神发现此写法有误,也请多多海涵。

本文是将《版式设计的原理》- 伊达千代(日)这本书的理念为基础,大多数都是我个人的观点,根据自己对书中知识的理解写出来的,有些知识点书中也没有提及,如果有写的不对的地方,也请大家多多指点。同时也感谢伊达千代前辈的知识分享。

最后,我们要以正确的态度和积极的心态来学习和分享知识,而不是崇拜和风或崇尚日本生活理念,这一点大家一定要搞清楚,要竖立正确的人生观,要勿忘国耻。

 收藏