排版《玉女心经》之网格拘束率

龙傲天

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

　　今儿个，在朕的皮鞭下，

　　咱继续修炼排版神功！

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

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

　　照例，先来看俩问题~

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

　　那还用说，肯定是「彬彬有礼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民绝对买得起，而且又有趣又亲民，对吧！

　　所以呀所以，

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

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

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

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

　　咱们设计师，

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

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

　　毕竟，

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

　　你只会一种风格，

　　那就得苦守寂寞，

　　这风格再被淘汰，

　　那定要独孤必败，

　　对不对？

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

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

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

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

　　所以众爱卿，与朕共勉，

　　共创这山河社稷吧！

　　以上~

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

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

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

---