今天讲讲为什么很多版面看起来很有高级感,背后的系统是怎么样排的呢?其实那种高级感是经过精确计算的结果。在排版中很有名的一个设计方法是参考《平面设计中的网格系统》,该书帮助平面设计师及该领域的学生们掌握网格设计的系统性方法。*《平面设计中的网格系统》—约瑟夫·米勒—布罗克曼网格系统的出现其是为了解决图文混排的效率及美观问题。特别是在针对大篇幅的书籍、画册编排,这时运用网格系统来排版可以大大增加效率且保证排版的整体性和篇幅的严谨,这样可以保持整个画面的节奏感,排出”理性之美“的高级感。这里我们看一下基于黄金比例的页边距计算,我们按照 单面右:「左：上：右：下＝1：1：2：3」单面左:「右：上：左：下＝1：1：2：3」的比例计算。这样分割出来的中心画面就是版心,版心的横版还是竖版都可以按照这个比例去设置。没错,设计更多的是精确计算后的结果。精确计算后的版面是理性美,高级感的背后隐藏的是系统、清晰化的节奏感。版面排版中,少不了分栏数,栏间距,以及栏宽这三个数据。这里的分栏数量可根据自己需要去设计(横向和纵向分栏数可自己根据排版需求定),要设多少分栏确定后,再计算平均的栏宽和栏间距即可。接下来再计算每一个分栏里可以放的内容行数即可。我们往版面里面填字的时候,不是一段字扒上去就完了,而是要根据版心的高度去计算合适的字行数量。在印刷中,我们的字号是以点作为单位,那么1点的字高大小是(0.33-0.35mm之间,这里我们取0.35大一点的值,不然字行之间会粘在一起);这里预设标题字号为:18pt,正文字号为10pt,行距设为15pt(假如正文字号是6pt,那么行距就是8pt)这个根据字体大小去选择合适的行距计算,那么版心高度能放下的行数=[版心高度(286mm)÷0.35mm(1pt的高度)]÷15(行距点数)=54.47(取整数54行)。就会得到下面的文本行数。以上这里是基于没有分割单元格的计算方法,算出整个行高可以放下多少行字即可,但是如果我们的画面上有划分好几个版块的内容,这时候就要去除垂直间隔的高度后再计算每个版块可以放多少行。我们做版面排版的时候不可能全都是通篇一个版块排版的,所以肯定得划分几个单元格。划分单元格的计算方法: 每个单元格行数=[版心高度(286mm)-两个垂直间隔预留(12mm)]÷0.35mm(1pt的高度)÷15(行距点数)=52.1(取整数52行),那么比如说现在总纵向被划分为了三个单元格,那么每个单元格能放下的行数就是: 52÷3=17行。*这里是有横向间隔留白和纵向间隔留白划分的分栏(按照以上方法计算)按照这样算,那么每个版面的字体大小和能放下的行数就不会乱,排出来就是有规律的美感。经过黄金分割后的画面比较规整有规律,如果按照自己的感觉去排版的话,可能很难把握字号放进去画面中是否合适,最后会反复修改,我们用网格系统的方法去计算的话大概率不会有太大的问题,预定好正文字号,标题字号,注释文字字号等,网格划分好之后往里面填计算好的内容就行。
我把很早之前做的简历页排版按照网格系统划分重新排版了一下,肉眼可见内容版块会清晰很多,画面分布也会相对较平均,视觉效果还是蛮明显的。我们来看一些案例画面拆解,会发现画面中有规律的字体和网格划分的比例。线下印刷的版心可以根据黄金比例去划分,但如果是线上手机端的页面排版的话用等比的上下左右页边距会更适合手机屏幕观看。
正文字号可根据自己需要设置,再计算相应的行数即可,尽量保证字号为偶数。上面案例相同比例大小的板块我用一样的颜色表示,可以看到按照网格系统划分,一个正文字体的高度刚好是一个垂直间隔的距离,图形物体的大小比重也刚好是一个单元格的大小比例,图形的占比和文字的占比对比在整个画面中看起来就很精致,有种细致的高级感,理性美。按照上面的版心高度算出的此大小字号可以放下的字行数,标题字体大小也是右边划分出的1个单元格的高度。在谷歌的Material Design和苹果的Ios设计规范中，都有对栅格系统的设计方法，各手机型号设备系统中的原生软件也都是严格按照规范去设计的,包括我们现在用的手机系统界面和PC端的APP界面都是按照严格系统规范执行的。而在Web端的设计中，各互联网大厂也有制作相应的设计规范来统一各家产品的设计,就像是各家品牌中的每一个品牌规范。我们通过4个基本概念对PC端的栅格系统展开设计:1.栅格的最小单位：栅格系统基础，定义栅格的步进距离; 2.栏目：栅格系统的容器，盛放文本、图片等元素；3.水槽：相邻两栏之间的间距，控制整体页面的留白 4.安全边距：内容区域与屏幕两端留出的间距。这里我们设的最小单位/栏目宽度/水槽的距离最好设为偶数倍,画面的栅格会更好计算和调整。12等分和24等分,确定好界面的最小单位后,把页面可分成24等分,可以看到画面中文字的排版和图片面积的占比都是有一定的栅格数的,这种等倍划分也是为了保证视觉层面的一个舒适感,避免内容和图片乱放造成的混乱效果。*无特殊情况下(用户群体电脑屏幕宽度都设为1440)24等分更适合复杂场景下的布局排版,当然我们尽量设为偶数倍会更好控制画面,今天主要讲讲印刷中的网格系统,PC端的网格系统放到下篇具体讲讲案例~印刷的网格系统跟PC端的网格系统还是有一定差别的,毕竟传播媒体介质不一样,造成的视觉效果也是不一样的。都看到这里,觉得有帮助就点个“👍🏻”、“转发”和“🧡”吧。想第一时间收到推送,欢迎给我“⭐️”标哦,谢谢你的阅读,让我们一起更好。
優(yōu)網科技，優(yōu)秀企業(yè)首選的互聯網供應服務商
優(yōu)網科技秉承"專業(yè)團隊、品質服務" 的經營理念，誠信務實的服務了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優(yōu)網科技成立于2001年，擅長網站建設、網站與各類業(yè)務系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯網解決方案。優(yōu)網科技提供PC端網站建設（品牌展示型、官方門戶型、營銷商務型、電子商務型、信息門戶型、微信小程序定制開發(fā)、移動端應用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網、微信商城、企業(yè)微信）等一系列互聯網應用服務。
專屬顧問
公安局備案號：