众爱卿，许久不贱，又见面啦！

今儿个，在朕的皮鞭下，

咱继续修炼排版神功！

上回，众爱卿了解了网格的基本用法~

这回，咱就说道说道，撒子是网格拘束率！

照例，先来看俩问题~

下面俩版面，哪个感觉更理性？

那还用说，肯定是「彬彬有礼A」呀！

毕竟彬彬有礼，好话自然都向着他~

别打别打，有话好好说，

寡人认真点就是啦~

「A」更理性，是因为「A」排版上整整齐齐，

有秩序，自然就严谨理性一些。

「A」的网格贴合度非常高，也是其整齐的原因之一。

而「C」呢，排版相对随意，

狂放不羁，给人感觉就大大咧咧！理性感就差~

爱卿问「C」的网格？

网格贴合度很低，甚至可以说，

除了上面的文字，下面的图完全没按网格来。

自由吧，不羁吧！

所以给人感觉很活泼，很快乐，更有亲和力！

到这里，寡人知道，

又有爱卿要争论，哪一版更好了~

这……明明没有高低贵贱，

他们是平等滴，社会是和谐滴~

两稿只是侧重表现的风格不同罢鸟~

一个更正式，一个更活泼，仅此而已~

要问寡人更倾向哪个？

寡人这么阳（fang）光（dang）滴娃儿，

自然更喜欢活泼快乐的啦！

又是俩版面，哪个感觉更活泼？

那肯定是「调皮活力C」了，

寡人名字写成这样，都算是开卷考试了！

毕竟，开卷有益~

为撒「C」更活泼呢？

其实原因跟上个问题差不多。

「安静优雅 A」很明显，

用的是没有边距的3栏网格。

一家人嘛，整整齐齐，

每个元素都紧贴网格，

很严谨，但是活泼感和亲和力就差一点。

而「调皮活力 C」压根没用网格，排版更自由，自然就更活泼。

当然啦，跟「A」相比的话，

「C」廉价感更强，所以亲和力更高，更亲民！

Ps：寡人几分钟搞的（毕竟快~），抠图和细节都差点火候，众爱卿能看懂就可~重在理解！

上面俩例子，虽然版面内容差不多，

但风格差异是真~滴~大！

为撒子呢？

除了跟咱前面修炼的图版率、跳跃率、版面率、留白相关，

还有很大一部分原因在于网格拘束率！

而只要掌握了网格拘束率，

那排版就可就6了！

想活泼就活泼，

想理性就理性，

想表现啥子风格，就在一念之间咯！

你一听这么这招这么厉害！立马就挥起了鞭子：

告诉本宫，何为网格拘束率！

网格拘束率，看似很学术化的一个词，

但说白了就是，版面的自由度！

一般来讲，我们运用网格时，

会严谨的卡着网格来做设计，

使版面达到严谨有秩序的感觉~

这种类型的版面，

就可以视为高网格拘束率，低自由度，如下

分栏网格，这里的元素紧贴网格~

模块网格，这里的元素也紧贴网格~

但实际上，我们排版时，

是可以无视网格，形成脱离网格约束的设计。

这种类型，就是低网格拘束率，高自由度，如下

虽然是3栏网格，但并没有严格贴合网格，

网格只拘束了左对齐关系，那么拘束率就稍微低一些。

虽然用了模块网格，但没有绝对贴合，

只遵循了左对齐的关系，拘束率也较低。

同样是模块网格，但这个版面图片和文字，

完全没有遵循网格结构，网格拘束率就更低了。

所以感觉更灵活，版面自由度更高~

跟本猫一样，身在牢笼，向往自由，演绎一出《大猫ker的救赎》~

所以说，网格拘束率，就是版面的 自~由~度~

好，到这儿，相信众爱卿认识「网格拘束率」了，

但更为重要的事来啦！

辣就是：

网格拘束率怎么用？

这个问题，还是要回到版面的气质和调性上来！

毕竟，咱做设计，可不能自嗨哟！

理解了气质和调性，才能做出合适的设计哟~

网格拘束率的调性说白了就两点！

1.高拘束率，版面理性庄重、有格调，同时也有距离感。

2.低拘束率，版面自由活泼、亲和力强，容易营造有趣的感觉。

咱先来看第一点！

1.高拘束率，版面理性庄重、有格调，同时也有距离感。

这个册子采用的是5栏网格，

网格拘束率比较高，给人感觉也是理性和严谨的！

同样的内容，用高拘束率的模块网格来排，一样很严谨理性。

这个网页用的是高拘束率的3栏网格，同样很有格调！

（大猫儿也是有格调的哟~）

这个版面看上去是比较灵活的，

但实际上也是用了网格来拘束！

看上去灵活，是因为在网格中做了很多通栏变化~

就算他比较灵活，但用了这种网格也是透出一股秩序和格调，

亲和力虽然有，但也不是特别高。

这个网页，网格拘束率也比较高，

看上去比较灵活，原因也是网格变化比较多~

给人感觉典雅、简约，有格调，

但活泼感和亲和力一般~

下面咱再来看看第二条~

2.低拘束率，版面自由活泼、亲和力强，容易营造有趣的感觉。

这个海报用了退底图（也叫挖版图，就是透明背景的PNG），网格拘束率也比较低。

相较于四四方方的矩形图片，退底图不规则，

更灵活，也更能为版面带来活力！

（Design by Shih Wen TAN）

这个海报，用的就全是退底图了，网格拘束率非常低。

退底图作为元素，散落在版面中，自由度非常高！

给人的感觉就活泼，就很有活力，亲和力也是相当强的哟！

话说大猫亲和力也很强哟，毕竟走亲民路线，哈哈~

继续~

这个案例，简直把自由度玩到了极致！

也就是网格拘束率非常低，

另外这版面留白也少，版面率和图版率高，跳跃率大，

所以，一看就是老实惠了！

我等P民绝对买得起，而且又有趣又亲民，对吧！

所以呀所以，

想更理性庄重，咱就用高拘束率！

想更亲和有趣，咱就用低拘束率！

想彬彬有礼，咱就要舍弃自由，低自由度！

想放荡不羁，咱就要突破束缚，高自由度！

咱们设计师，

既要玩得来高端，又要玩得来亲民。

既能九天揽月，又能五湖捉鳖。

毕竟，

风格是多样滴，市场是变化滴~

你只会一种风格，

那就得苦守寂寞，

这风格再被淘汰，

那定要独孤必败，

对不对？

除非，像大猫一样帅~（此句忽略~）

我们这个系列功法的意义，

就是让大家了解各种风格的底层逻辑~

才能更好的适应这多变的市场~

所以众爱卿，与朕共勉，

共创这山河社稷吧！

以上~

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

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

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