排版《玉女心经》之网格基础
今日，寡人御剑而来~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 又带来一篇欢乐干货！https://img.zcool.cn/community/01bc1f5f72971e11013e458434eb0b.pnghttps://img.zcool.cn/community/01bc1f5f72971e11013e458434eb0b.png 今儿个，咱们本来想修炼 网格&网格拘束率！ 但内容有些多，所以咱分为上下两篇~ 上篇，咱给大家扫扫盲，也就是修炼一下网格~ 到下篇，咱再讲网格拘束率~网格是撒子？说到网格，众爱卿面露难色， 总觉得她很神秘，完全属于搞不懂系列！https://img.zcool.cn/community/01215f5f9796a511013fdcc7347952.gif 比如网格系统中就分各种：分栏网格、模块网格、复合网格、基线网格等等~https://img.zcool.cn/community/01818e5f9796a511013fdcc715f491.jpg 总之，看名字就觉得高深。https://img.zcool.cn/community/017c765f9796a511013ee04d71bd70.jpg 但其实鸭，网格就只是个建立秩序的工具！ 下面是一个版面~https://img.zcool.cn/community/0177f05f9796a611013ee04dfe9446.jpg 现在寡人要给他竖向划分3栏。https://img.zcool.cn/community/01dcc95f9796a611013fdcc7e2139c.jpg 那么他就是一个3栏的分栏网格~ 简单做个3栏网格的例子吧。https://img.zcool.cn/community/0178b45f9796a611013fdcc78410d3.jpg 元素基本都卡着网格的边来放的， 这就是网格加强秩序和对齐的作用！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 3栏其实挺不错！ 但寡人欲望太强了， 只是竖着划分怎能满足朕？ 于是寡人在这基础上又横向划分了5栏。https://img.zcool.cn/community/01d0d35f9796a611013ee04df42587.jpg 出现了一个小格一个小格的感觉， 这就是模块网格了。 模块网格其实就是， 在分栏网格的基础上又加了横向的划分！ 真·通俗易懂！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 花几分钟，也搞一个模块网格的案例8~https://img.zcool.cn/community/01b2ad5f9796a611013fdcc716824e.jpg 可以看到，现在画面里的图片和文字， 在横向上也有了约束和单元格的比例关系！https://img.zcool.cn/community/01bc1f5f72971e11013e458434eb0b.pnghttps://img.zcool.cn/community/01bc1f5f72971e11013e458434eb0b.png 这时候有爱卿跳出来说： “大猫大猫，我更喜欢上一版！这个模块网格看来不如分栏好用！”https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 老夫怒了，一鞭子就抽了下去~https://img.zcool.cn/community/017b0b5f9796a611013ee04d464483.png 如上篇文章说的那样，网格的形式也木有好坏之分， 就看你怎么去用啦！ 这个用法呢，跟网格本身的关系不大， 倒是跟咱之前修炼的：图版率、跳跃率、版面率、留白那些关系密切！ 这个后面会详细说道说道~https://img.zcool.cn/community/0122845f9796a611013ee04d7c7367.jpg 扯远了扯远了~ 咱回到网格的形式上来~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 刚才说了分栏网格、模块网格， 下面说一说复合网格~ 不过咱还是先回到，刚才的3栏网格，https://img.zcool.cn/community/0125145f9796a711013fdcc73b09c1.jpg 还是刚才的3栏网格， 但寡人觉得，多点花样才会更好耍！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 只有皮鞭和蜡烛，就太没劲了~ 所以又在版面上划分了2栏~https://img.zcool.cn/community/0185c25f9796a711013fdcc7cbe034.jpg 所以现在， 这个网格就是由2栏+3栏组合而成的， 既然里面不止用了1个网格， 那自然就是复合网格咯~https://img.zcool.cn/community/01ca435f59deb511013f1a64bc9bbb.gif （扫噶扫噶，原来复合网格就是同时用了多个网格的版面！~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png）https://img.zcool.cn/community/0184105f9796a711013ee04d4d0aa2.jpg 老夫也花个几分钟做一个复合网格的案例~ 毕竟，能加深大家的印象！https://img.zcool.cn/community/01a7c45f9796a711013ee04dd64a33.jpg 上面两张图，用的是2栏网格对齐。 下面的三张图，用的是3栏网格对齐~ 这就是一个版面中用了两个网格的复合网格! https://img.zcool.cn/community/0111cf5f9796a711013fdcc74c3a25.png 那基线网格是什么嘞？ 基线网格就相当于我们小时候用的横线本~https://img.zcool.cn/community/017f175f9796a711013fdcc7c66b16.jpg 目的呢， 就是防止设计的时候，行与行之间对不齐~ 以及细致的处理文字关系~https://img.zcool.cn/community/01a3455f9796a711013ee04d9f9f31.jpg 像这个例子，不管是标题还是正文，都是跟横线对齐的~ 这就是基线网格啦！https://img.zcool.cn/community/01bc1f5f72971e11013e458434eb0b.pnghttps://img.zcool.cn/community/01bc1f5f72971e11013e458434eb0b.pnghttps://img.zcool.cn/community/0134a25f9796a711013ee04da26510.jpg 除了这些，还有一些其他类型的网格，比如带有大小比例的网格、三角形网格等…https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 小可爱惊呼：还有这种网格？ 寡人：是呀，不过网格本质都是一样的！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png网格的本质，就是一个建立秩序和对齐关系的工具。
理解了这一点， 万物皆可为网格！ https://img.zcool.cn/community/0139a15f97996411013ee04d76aebe.png 像这个，就是以三角形网格为基准排的，也是挺酷哒8~https://img.zcool.cn/community/0149555f9796a811013fdcc7033e7c.gif 虽是如此，但平常所说的网格， 还是以我所说的这几种为主~https://img.zcool.cn/community/01daa95f9796a811013ee04d19c966.jpg 好啦，相信经过寡人的一通鞭打， 众爱卿都晓得网格是撒子了~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png但更重要的是，网格要怎么用？
这个嘛，说白了就3条！1.根据项目和内容设置网格！ 2.网格在秩序中做变化！ 3.网格不可独立用，要根据前几篇的功法格式综合考虑！
https://img.zcool.cn/community/011ddf5f9796a811013ee04d390a40.jpg 咱先来看第一条1.根据项目和内容设置网格！
这条肯定是大家首先要问的。 也就是这个问题： “我这个版面的网格该用2栏，还是3栏或4栏？” https://img.zcool.cn/community/017e235f9796a811013fdcc7d45ed6.pnghttps://img.zcool.cn/community/017e235f9796a811013fdcc7d45ed6.png 猫说： 这个嘛，随意就好~ 没辣么多条条框框，最重要的是根据项目和内容来。 内容很多，设置2栏放不下， 那设置个3-4栏，都木得问题~ 内容少，划分那么多栏也没撒子意义~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/0109105f9796a811013fdcc75b8773.jpg 同样，网格间的栏间距也没有一个固定值，合适能区分就好！ 当然啦，也有没有间距的网格~ 所以这是非常灵活哒！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/0121ae5f979b5011013ee04db6563a.gif 虽然很灵活，但有些物料还是有常用设置，这些可以参考一哈~ 像画册，一般设置2栏、3栏就够了。https://img.zcool.cn/community/01e61c5f9796a811013ee04dd81b6e.jpg 这是3栏画册网格的一些，版面变化形式~ 仅仅是3栏，也可以变化出很多花样~https://img.zcool.cn/community/0194055f9796a911013ee04de7274d.png 2栏网格应用案例~（寡人皮鞭下的——家明 · 作品）https://img.zcool.cn/community/0163fc5f9796a911013fdcc79fed2e.png 2栏网格应用案例~（寡人皮鞭下的——阿来 · 作品） 而网页，一般要设置12栏、20栏等~ 究其原因是，网页是多版块的~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 有些板块可能一行排3栏，有些版块需要一行4栏。所以选得栏数能被越多数整除越好咯~https://img.zcool.cn/community/0106605f9796a911013fdcc740b090.jpg 像这个12栏的，能被1、2、3、4、6整除，用起来就很方便~ 因为方便才会高效，才会快嘛！（像猫儿一样~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png）https://img.zcool.cn/community/0119345f9796a911013ee04d31574a.jpg 这个网页就是用了12栏网格划分~ 网格如下https://img.zcool.cn/community/01cf8f5f9796a911013ee04d5db7c2.jpg 再看下面这个AMG网页的作品~https://img.zcool.cn/community/01ced75f9796ab11013fdcc74b0019.jpg （（寡人皮鞭下的——楠楠 · 作品）） 这个网页也是用12栏网格设计的，网格如下~https://img.zcool.cn/community/01dbb05f9796ac11013fdcc740ca35.jpg2.网格在秩序中做变化！
这个就是说， 根据层级，咱们是可以在网格中改变各元素大小的！ 最终做到有秩序就阔以啦！https://img.zcool.cn/community/011ab45f9796ad11013ee04d049a09.jpg 这里有个模块网格，里面有三张图片和几句话！https://img.zcool.cn/community/01e5b75f9796ad11013ee04dab5d05.jpg 现在三张图片一样大，每个图片都只占了1格，但如果我想强调女孩的特写。 咱就可以让她多占几格单元格，如下~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01cb365f9796ad11013fdcc7079c22.jpg 现在女孩的照片占了4格，是不是一下子就突出来了！https://img.zcool.cn/community/013dd55f9796ad11013fdcc732b312.jpg 如果还要继续强调嘞？ 那就可以占得更多，如下~https://img.zcool.cn/community/0181dd5f9796ae11013ee04d1493a6.jpg 从一开始只占1格，到现在占了9格！https://img.zcool.cn/community/0193165f9796ae11013ee04dcf44fb.jpg 这个爱寡人的女孩，在版面中的占比是越来越多了~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 所以网格应用的关键就是在秩序中做变化！https://img.zcool.cn/community/0157465f9796ae11013fdcc70b8743.jpg 且网格是比较灵活的~咱还可以再调整几个变化出来~https://img.zcool.cn/community/01b1625f9796ae11013fdcc7ddc4ef.jpg 调整个元素的网格占比~https://img.zcool.cn/community/01b0085f9796ae11013ee04db020be.jpg 还是那个网格和内容， 稍微调整了一哈，又是一个和而不同的版面~https://img.zcool.cn/community/018dc05f9796ae11013ee04d482fb5.jpg 咱还可以玩点形式感，把标题字做成描边等形式~https://img.zcool.cn/community/010a535f9796af11013fdcc795cd3f.jpg 不管怎么整，目的达到了，最终版面也很有秩序， 那就必须木得问题~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 不过要记住一点哟！ 网格始终只是工具~ 不需要所有的元素都遵循网格。 像寡人上面例子中的手写英文，基本没遵循网格来排~ 毕竟如果全部按网格来排，画面就会比较呆，不灵动！ （关于如何突破网格，咱们下篇中会讲哟！https://img.zcool.cn/community/01bc1f5f72971e11013e458434eb0b.pnghttps://img.zcool.cn/community/01bc1f5f72971e11013e458434eb0b.png） 咱再来看第三个问题~3.网格不可独立用，要根据前几篇的功法格式综合考虑！
第三条很重要，因为~ 网格始终只是辅助工具， 重要的当然还是，咱们的思维和要表现的内容了！https://img.zcool.cn/community/01c1395f9796af11013fdcc7e909a7.jpg 比如用这个分栏网格排版，https://img.zcool.cn/community/01dbcc5f9796af11013ee04d62f6c9.jpg 表现高冷典雅与表现亲和力，排版上是一定有区别的~ 高冷典雅，根据前几篇功法中的设置， 通常应该是：低跳跃率、低表现力、低版面率、低图版率、大留白~ 就算用网格规范排版，也应该把这几个要素都表现到位，如下https://img.zcool.cn/community/0195665f9796af11013ee04dedb855.jpg 虽然是寡人快速弄的，但也很契合高冷典雅的气质~https://img.zcool.cn/community/013f7d5f9796af11013fdcc79da64f.jpg 反之，如果表现亲和力， 那么就算用网格来排， 也应该设置成：高跳跃率、高表现力、高版面率、高图版率、少留白，如下~https://img.zcool.cn/community/01009a5f9796af11013ee04d0a7e85.jpg 跳跃率比上一版大不少吧！ 并且图版率和图片的表现力，都比之前的高！ 留白也比之前少了不少~https://img.zcool.cn/community/018a655f9796b011013fdcc71a3c77.jpg 那么，最终结果就是比之前的活泼亲和~ 所以，这才是核心！ 网格，只是让给我们版面更有秩序的工具！https://img.zcool.cn/community/01a28c5f979e4411013ee04dacd610.gif 所以呀所以， 不要把网格看的太过神圣！ 说到底只是一辅助工具， 莫要让它成为你排版的束缚和牢笼！ 以上~https://img.zcool.cn/community/011f205f71f7ba11013f3110c3d7cc.jpg 虽写了这么多，但咱也不知道咱这套《玉女心经》有木有把网格的基础说清楚， 所以有木有说明白，留言告诉寡人吧！ 这篇文风这么搞，咱就要这种不正经的，轻松愉快的氛围。所以，点个赞吧~
页:
[1]