在排版中若何装备网格？

瑞星卡卡卡卫

来历：知乎
看到过很多作品和文章议论网格排版的方便，可是一向不清楚若何设备一个可以利用的网格，网格间距多大？以什么为基准设备横线和竖线呢？怎样的网格才是合适自己正在建造的内容的？
原文地址：https://www.zhihu.com/question/46781778
免责声明：本帖内容由机械人自动收集于互联网，如加害了您的权益，请联系我们【E-Mail:cb@yoyodoc.com】 我们会实时删除侵权内容，给您带来未便，深感歉意！

尔己乡变她

俗语说，没有规矩，不成方圆。设想也需要凭借一定的法则，在这个法则框定的范围内，才是你肆意挥晒才能的六合。这些法则就是网格系统。它帮助我们更完善地了解设想，停止设想。


栅格系统英文为“grid systems”，也有人翻译为“网格系统”，应用牢固的格子设想版面结构，其气概工整简洁，在二战后大受接待，已成为本日出书物设想的支流气概之一。
网格系统，以及其背后的模数思惟在设想史上由来已久，在修建、平面设想等范畴都可见分歧的表示形式。而具体到网页设想上，常用的 Column + Gutter (包括内容的宽栏+较窄的间距空间) 源自上世纪 50 年月成熟的瑞士气概平面设想（或称国际气概，International Typographic Style）。
那简单的来说，网格是设想的帮助工具，就是在版面上依照预先肯定好的格子，分派笔墨和图片的一种版面设想方式。




调理版面氛围:增强版面凝聚力使版面更同一化、整体化，也可使版面内容更规整，使网格在版面中的应用加倍灵活。
构造版面信息：网格对版面中的组成元素，笔墨、 图片等停止有的、有序的编排，使版面中的内容信息更清楚的显现，使组成元素的编排位置加倍的切确，有结构感、节奏感。
提升阅读的关联性:网格系统使版面结构加倍清楚简洁，可以有用的保证内容的.关联性，使视觉在阅读时有一个清楚清朗的流程。
肯定信息位置:对各项元素的位置停止有用的构造、编排，能使版面内容具有鲜明的条理性、而且可以使版面元素显现出更加完善的整体结果。
网格的感化可简单的总结以下几点：
1、肯定版心位置；
2、快速朋分版面；
3、快速结构结构的感化；
4、可以理性、整洁地放置版面元素；
那若何建立网格系统呢？
首先，翻开我们的PS软件，点击菜单里的视图下的新建参考线版面；


其次，在弹出的新建参考线版面的弹窗中，按照比例分别版面，将文图形停止比例的综合计划，（横着的线为行数，竖着的线为列数），一般情况下可设备为2的倍数；
装订线我这边是设备的5mm，可按照我设备的数值停止适当调剂；
边距则是天头，地脚以及左右页边距，通常是5的倍数；


当设备完成今后，便可以依照网格停止散布排版啦。最初要给大师说，网格只是设想的帮助，在依靠网格设想的根本上一定要要灵活利用哦～让你的设想今后今后具有一定的理论根据支持！
接下来，我们来欣赏一下用网格系统设想的作品，学会网格设想，你也能设想出优异的作品哦～








若有帮助，接待一键三连！

凡尘莲花1

谢邀，
网格系统能使版面变得更整洁、清楚，且有一定的平衡感，网格存在的意义就是约束版面，将原本复杂的版式编排变得加倍简单易懂、有纪律可循。
具体说来，在平面、界面等设想中网格的感化首要有以下4点：

• 调理版面氛围。增强版面凝聚力，使版面加倍同一，还可以让版面在标准中制造灵活感。
  
• 构造版面信息。网格对版面中的笔墨，图片等组成元素停止有序的编排，使信息得以清楚表达，版面也更有节奏感。
  
• 提升阅读的关联性。在网格系统的框架内，可以有用保证元素之间的关联性，在版面中欧构成有序、流利的视觉流程。
  
• 肯定信息位置。对各项元素停止有用的构造、编排，快速高效地肯定信息的位置，使版面具有鲜明条理性。
  

下面康石石以图书为例，简单先容一下若何设备一个可以利用的网格，网格间距、设备基准、及配合内容设备网格：
我们在做一本书的时辰，为了阅读方便，书的四边和版心的间隔是分歧的，凡是上边距比下边距宽，外边距比内边距宽，这样在掀开书的时辰比力方便阅读。
用Indesign来建造一本书籍：书籍制品尺寸：16开纸张：185mm×260mm为例：
1. 新建文件

翻开indesign新建尺寸：185mm×260mm，页面偏向：竖向。


2.设备边距和分栏：

上边距30mm，下边距25mm，左侧距15mm，右侧距20mm。分栏数3，栏间距6mm


3.设备完后，肯定版心

版心尺寸：（185mm-上、下边距）×（260mm-左、右侧距）=（185mm-15mm-20mm）×（260mm-30mm-25mm）=150mm×205mm


版心尺寸肯定好以后，我们再肯定栏宽的尺寸：（150mm-2×6mm）÷3=138÷3=46mm，所以每个栏宽度是46mm。


4. 字号的设定

设备正笔墨号为7点（一点约即是0.35mm）；行高为10.5点。那末本书籍的的所占的行数就出来了：(版心高度÷0.35mm/点)÷正文行高=（205mm÷0.35mm/点）÷10.5=55.7，取整数，即56


5. 朋分网格

为了方便放入图片和笔墨，我们将版心分为21个单元格，那末每一个分栏就有7个单元格。每一个单元格的高度为8行正文（以正笔墨号7点：56÷7=8）


在分别网格参考线的时辰，始终以一行正文高度为根本单元，数到第八行的时辰，拉一条参考线即可。此时，我们再在单元格中，分别出1行正文高度的「垂直间隔预留」，用来放置图注笔墨。那末，终极获得的21格网格系统以下。


在停止版式设想之前，应领先肯定版心，对笔墨、图片以及内外页边距的地区停止明白界定后，再斟酌版面的分栏。别的，帮助线对于控制全部版面起侧重要的感化，帮助线越多，排版时的参考标准也就越多。

网格建好后，我们可以在响应的框架内放入图片和笔墨，让图片和图片始终连结底部，顶部和文本对齐状态，分歧栏与栏之间笔墨基线在同一水平上，让全部版面视觉上连结同一。以下图所示：图的面积分歧，所占的网格面积也分歧，可以按照具体的版面来放置。


在版式编排的进程中，由于网格形式的多样化，所以可以编排挤丰富的版式结构。应用网格可以保证版面的整洁和同一，使内容结构加倍松散，但用得欠好会很轻易让版面显得呆板，所以在现实应用网格时，要适当打破网格的约束，增加版面的节奏感和吸引力。常用的方式有留白处置，可以增加版面透气感；大概让图片出血，增加版面的活泼感和灵活性；还可以拖跨页，增加版面的视觉冲击力。
以上望有启发
——————————————————
接待关注我的小我公众号（kang-shishi）


若有艺术留学&保研、院校、专业、作品集方面的题目，可私信康石石征询。

真好210

1.必看网格简介：
首先来说，网格设想是平面设想理论中关于版式设想的经历总结，很是有需方法会和进修。发生于二十世纪初叶的西欧诸国，完善则于五十年月的瑞士。其气概特点是应用数字的比例关系，经过严酷的计较，把版心分别为无数同一尺寸的网格，普遍利用于杂志、画册、门户网站、UI设想等平面设想范畴。
2.若何设备：
关于具体改怎样设备网格可供利用，我来简单分享一下我的鄙见。假如现在你要排版一个画册210x285mm的页面，首先你要肯定版心，设备上边距15mm，右侧距10mm，下鸿沟30mm，左侧距20mm。然后计较得出盛放内容的版心宽度为：210-10-20=180mm；高度为：285-15-30=240mm；现在你要将版心分为3栏，你可以尝试着将栏与栏之间的间隔设为6mm，设栏宽为w，时列方程180=2x6+3w；解得每一栏宽度：w=56mm。
至此数据计较终了，然后用你的PS、大概CDR软件拉出参考线，来排版。固然以上数据应当按照具体情况去渐渐斟酌，不能生吞活剥。你也可以引入黄金比例、黄金螺旋线、大概斐波那契数列之类的经历数据比例，来作参考具体设备。
3.拓展阅读
前段时候我上站酷进修，看到一篇关于版式设想，网格理论的文章，谈及总结得很是周全，在这里就repost，供大师参考阅读。
原文作者：文两道以下图片来自：版式设想到底应当怎样排？




最初，再保举大师看看我写的这篇文章：
实例讲授：平面设想中的网格系统，怎样用？（完）

婚庆中国掌

grid system是平面排版里的概念，任何一本排版书里都能看到若何操纵。一般来说类似大段文本（如报纸杂志）这类需要严酷遵照底线（baseline）的排版才会用到很是周全的网格系统，做宣传海报不会这么松散。固然也有人在海报上界说了一套标准,不外相对来说就比力死板了。
在网页设想上也可以利用grid system，甚至能和做平面一样精准。我已经阅读过mailchimp团队的设想文章，他们就利用了6px的基线（以下图），字号可变通，其他元素遵守6的倍数来获得条理感和次序感。





具体对若何利用网格可以参照ux团队的这篇文章：
MailChimp UX Issue 14
强行翻译一下重要内容：

正如Richard Rutter于2006年颁发在24 Ways的文章所说，网页设想的垂直韵律感需要仔细应用line height、margin和padding。技能在于找到合适的line height，这规定了计较margin和padding的根本。
虽然MailChimp内容很多，唯一少少内容由笔墨段落组成；几近一切信息显现为list，form，tables,charts或data blocks。是以，我们没有益用大尺寸line height，这会致使大margin和padding。我们按照app里的一切元素利用了最小能够值6px。6px底线网格由此而来。
你能够想晓得我们为什么利用6px作为网格和排版的根本单元。我们测试了一系列根本单元，终极发现6px能翻倍为12px,18px,24px等尺寸，均为合适的尺寸和margin。它在按钮、表格区等小元件上也很好用。这使我们建立任何UI都能获得变通和文雅。

我强行翻译过这篇文章  
Issue 14 \\ Rhythm & Grid 节奏与网格，不外里面关于前真个术语我是真不懂怎样翻。。有需要可以凑活看。