排版《玉女心经》之网格基础

龙傲天

　　今日，寡人御剑而来~

　　又带来一篇欢乐干货！

　　今儿个，咱们本来想修炼 网格&网格拘束率！

　　但内容有些多，所以咱分为上下两篇~

　　上篇，咱给大家扫扫盲，也就是修炼一下网格~

　　到下篇，咱再讲网格拘束率~

网格是撒子？

　　说到网格，众爱卿面露难色，

　　总觉得她很神秘，完全属于搞不懂系列！

　　比如网格系统中就分各种：分栏网格、模块网格、复合网格、基线网格等等~

　　总之，看名字就觉得高深。

　　但其实鸭，网格就只是个建立秩序的工具！

　　下面是一个版面~

　　现在寡人要给他竖向划分3栏。

　　那么他就是一个3栏的分栏网格~

　　

　　简单做个3栏网格的例子吧。

　　元素基本都卡着网格的边来放的，

　　这就是网格加强秩序和对齐的作用！

　　3栏其实挺不错！

　　但寡人欲望太强了，

　　只是竖着划分怎能满足朕？

　　于是寡人在这基础上又横向划分了5栏。

　　出现了一个小格一个小格的感觉，

　　这就是模块网格了。

　　模块网格其实就是，

　　在分栏网格的基础上又加了横向的划分！

　　真·通俗易懂！

　　花几分钟，也搞一个模块网格的案例8~

　　可以看到，现在画面里的图片和文字，

　　在横向上也有了约束和单元格的比例关系！

　　这时候有爱卿跳出来说：

　　“大猫大猫，我更喜欢上一版！这个模块网格看来不如分栏好用！”

　　老夫怒了，一鞭子就抽了下去~

　　如上篇文章说的那样，网格的形式也木有好坏之分，

　　就看你怎么去用啦！

　　这个用法呢，跟网格本身的关系不大，

　　倒是跟咱之前修炼的：图版率、跳跃率、版面率、留白那些关系密切！

　　这个后面会详细说道说道~

　　扯远了扯远了~

　　咱回到网格的形式上来~

　　刚才说了分栏网格、模块网格，

　　下面说一说复合网格~

　　不过咱还是先回到，刚才的3栏网格，

　　还是刚才的3栏网格，

　　但寡人觉得，多点花样才会更好耍！

　　只有皮鞭和蜡烛，就太没劲了~

　　所以又在版面上划分了2栏~

　　所以现在，

　　这个网格就是由2栏+3栏组合而成的，

　　既然里面不止用了1个网格，

　　那自然就是复合网格咯~

　　（扫噶扫噶，原来复合网格就是同时用了多个网格的版面！~）

　　老夫也花个几分钟做一个复合网格的案例~

　　毕竟，能加深大家的印象！

　　上面两张图，用的是2栏网格对齐。

　　下面的三张图，用的是3栏网格对齐~

　　这就是一个版面中用了两个网格的复合网格!

　　那基线网格是什么嘞？

　　基线网格就相当于我们小时候用的横线本~

　　目的呢，

　　就是防止设计的时候，行与行之间对不齐~

　　以及细致的处理文字关系~

　　像这个例子，不管是标题还是正文，都是跟横线对齐的~

　　这就是基线网格啦！

　　除了这些，还有一些其他类型的网格，比如带有大小比例的网格、三角形网格等…

　　小可爱惊呼：还有这种网格？

　　寡人：是呀，不过网格本质都是一样的！

网格的本质，就是一个建立秩序和对齐关系的工具。

　　理解了这一点，

　　万物皆可为网格！

　　

　　像这个，就是以三角形网格为基准排的，也是挺酷哒8~

　　虽是如此，但平常所说的网格，

　　还是以我所说的这几种为主~

　　好啦，相信经过寡人的一通鞭打，

　　众爱卿都晓得网格是撒子了~

但更重要的是，网格要怎么用？

　　这个嘛，说白了就3条！

1.根据项目和内容设置网格！ 2.网格在秩序中做变化！ 3.网格不可独立用，要根据前几篇的功法格式综合考虑！

　　咱先来看第一条

1.根据项目和内容设置网格！

　　这条肯定是大家首先要问的。

　　也就是这个问题：

　　“我这个版面的网格该用2栏，还是3栏或4栏？”

　　

　　猫说：

　　这个嘛，随意就好~

　　没辣么多条条框框，最重要的是根据项目和内容来。

　　

　　内容很多，设置2栏放不下，

　　那设置个3-4栏，都木得问题~

　　内容少，划分那么多栏也没撒子意义~

　　同样，网格间的栏间距也没有一个固定值，合适能区分就好！

　　当然啦，也有没有间距的网格~

　　所以这是非常灵活哒！

　　虽然很灵活，但有些物料还是有常用设置，这些可以参考一哈~

　　像画册，一般设置2栏、3栏就够了。

　　这是3栏画册网格的一些，版面变化形式~

　　仅仅是3栏，也可以变化出很多花样~

　　2栏网格应用案例~（寡人皮鞭下的——家明 · 作品）

　　2栏网格应用案例~（寡人皮鞭下的——阿来 · 作品）

　　而网页，一般要设置12栏、20栏等~

　　究其原因是，网页是多版块的~

　　有些板块可能一行排3栏，有些版块需要一行4栏。所以选得栏数能被越多数整除越好咯~

　　像这个12栏的，能被1、2、3、4、6整除，用起来就很方便~

　　因为方便才会高效，才会快嘛！（像猫儿一样~）

　　这个网页就是用了12栏网格划分~

　　网格如下

　　再看下面这个AMG网页的作品~

　　（（寡人皮鞭下的——楠楠 · 作品））

　　这个网页也是用12栏网格设计的，网格如下~

2.网格在秩序中做变化！

　　这个就是说，

　　根据层级，咱们是可以在网格中改变各元素大小的！

　　最终做到有秩序就阔以啦！

　　这里有个模块网格，里面有三张图片和几句话！

　　现在三张图片一样大，每个图片都只占了1格，但如果我想强调女孩的特写。

　　咱就可以让她多占几格单元格，如下~

　　现在女孩的照片占了4格，是不是一下子就突出来了！

　　如果还要继续强调嘞？

　　那就可以占得更多，如下~

　　从一开始只占1格，到现在占了9格！

　　这个爱寡人的女孩，在版面中的占比是越来越多了~

　　所以网格应用的关键就是在秩序中做变化！

　　且网格是比较灵活的~咱还可以再调整几个变化出来~

　　调整个元素的网格占比~

　　还是那个网格和内容，

　　稍微调整了一哈，又是一个和而不同的版面~

　　咱还可以玩点形式感，把标题字做成描边等形式~

　　不管怎么整，目的达到了，最终版面也很有秩序，

　　那就必须木得问题~

　　不过要记住一点哟！

　　网格始终只是工具~

　　不需要所有的元素都遵循网格。

　　像寡人上面例子中的手写英文，基本没遵循网格来排~

　　毕竟如果全部按网格来排，画面就会比较呆，不灵动！

　　（关于如何突破网格，咱们下篇中会讲哟！）

　　咱再来看第三个问题~

3.网格不可独立用，要根据前几篇的功法格式综合考虑！

　　第三条很重要，因为~

　　网格始终只是辅助工具，

　　重要的当然还是，咱们的思维和要表现的内容了！

　　比如用这个分栏网格排版，

　　表现高冷典雅与表现亲和力，排版上是一定有区别的~

　　高冷典雅，根据前几篇功法中的设置，

　　通常应该是：低跳跃率、低表现力、低版面率、低图版率、大留白~

　　就算用网格规范排版，也应该把这几个要素都表现到位，如下

　　虽然是寡人快速弄的，但也很契合高冷典雅的气质~

　　反之，如果表现亲和力，

　　那么就算用网格来排，

　　也应该设置成：高跳跃率、高表现力、高版面率、高图版率、少留白，如下~

　　跳跃率比上一版大不少吧！

　　并且图版率和图片的表现力，都比之前的高！

　　留白也比之前少了不少~

　　那么，最终结果就是比之前的活泼亲和~

　　所以，这才是核心！

　　网格，只是让给我们版面更有秩序的工具！

　　所以呀所以，

　　不要把网格看的太过神圣！

　　说到底只是一辅助工具，

　　莫要让它成为你排版的束缚和牢笼！

　　以上~

　　虽写了这么多，但咱也不知道咱这套《玉女心经》有木有把网格的基础说清楚，

　　所以有木有说明白，留言告诉寡人吧！

　　

　　这篇文风这么搞，咱就要这种不正经的，轻松愉快的氛围。所以，点个赞吧~

---