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