原创 | 排版《玉女心经》之网格拘束率！

·······这是大猫设计第111篇原创文章······

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

Ps：文末送书活动，海棠依旧！
今儿个，在朕的皮鞭下，
咱继续修炼排版神功！
上回，众爱卿了解了网格的基本用法~
这回，咱就说道说道，撒子是网格拘束率！
照例，先来看俩问题~

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

那还用说，肯定是「彬彬有礼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民绝对买得起，而且又有趣又亲民，对吧！
所以呀所以，就网格拘束率来说
想更理性庄重，咱就用高拘束率！
想更亲和有趣，咱就用低拘束率！
想彬彬有礼，咱就用高拘束率！
想放荡不羁，咱就用低拘束率！
想搞事情见不得人？
那就用见不得人的拘束率呗~

最后多说一句~
咱们设计师，
既要玩得来高端，
又要玩得来亲民，
既能九天揽月，
又能五湖捉鳖。
毕竟，
需求是多类的，
风格是多样的，
市场是变化的，
你只会一种风格，
那就得苦守寂寞，
这一种风格再被发展淘汰，
那你也要独孤必败，
对不对？
除非，
像大猫一样帅~（此句忽略

）

我们这个系列功法的意义，
就是让大家了解各种风格的底层逻辑~
才能更好的适应这多变的市场~
所以众爱卿，
与朕共勉，
共创这山河社稷吧！
以上~
唉，咱也不知道咱这套《玉女心经》有木有把网格拘束率说清楚，
所以各位大佬，留言告诉寡人吧！
下一篇原创，咱继续传授《玉女心经》第八篇——字我感受，准备着，时刻准备着~
“送书活动来啦！”
今日送书

价值59，每个人都应该看的设计书

   获取方式  
点亮“在看”和“赞”
转发本文章至朋友圈
截图朋友圈发送至后台
揪1个幸运鹅赠书一本
活动截止时间
11月2日下午17点
获奖名单公布时间
获奖名单在活动截止后的文章推送公布
赞 (0)

相关推荐