排版《玉女心经》之网格拘束率
众爱卿，许久不贱，又见面啦！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/01a39a5fa0cd6c11013fdcc7b0335d.gif 照例，先来看俩问题~下面俩版面，哪个感觉更理性？https://img.zcool.cn/community/0156c95fa0cd6c11013fdcc72db19f.jpg 那还用说，肯定是「彬彬有礼A」呀！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 毕竟彬彬有礼，好话自然都向着他~https://img.zcool.cn/community/010f5b5fa0cd6c11013fdcc7e3a077.jpg 别打别打，有话好好说， 寡人认真点就是啦~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/0158f55fa0cd6c11013ee04d9c9be4.jpg 「A」更理性，是因为「A」排版上整整齐齐， 有秩序，自然就严谨理性一些。https://img.zcool.cn/community/01d7195fa0cd6d11013ee04ddbda87.jpg 「A」的网格贴合度非常高，也是其整齐的原因之一。https://img.zcool.cn/community/01782a5fa0cd6d11013fdcc783cf8a.jpg 而「C」呢，排版相对随意， 狂放不羁，给人感觉就大大咧咧！理性感就差~ 爱卿问「C」的网格？https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01fc805fa0cd6d11013ee04d5c24f1.jpg 网格贴合度很低，甚至可以说， 除了上面的文字，下面的图完全没按网格来。https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 自由吧，不羁吧！ 所以给人感觉很活泼，很快乐，更有亲和力！https://img.zcool.cn/community/018f2f5fa0cd6e11013ee04d5510bc.gif 到这里，寡人知道， 又有爱卿要争论，哪一版更好了~ 这……明明没有高低贵贱， 他们是平等滴，社会是和谐滴~https://img.zcool.cn/community/01b5065fa0cd7011013ee04d85803a.jpg 两稿只是侧重表现的风格不同罢鸟~ 一个更正式，一个更活泼，仅此而已~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 要问寡人更倾向哪个？ 寡人这么阳（fang）光（dang）滴娃儿， 自然更喜欢活泼快乐的啦！https://img.zcool.cn/community/01bc1f5f72971e11013e458434eb0b.pnghttps://img.zcool.cn/community/01bc1f5f72971e11013e458434eb0b.png又是俩版面，哪个感觉更活泼？
https://img.zcool.cn/community/01c30d5fa0cd7211013fdcc755688b.jpg 那肯定是「调皮活力C」了， 寡人名字写成这样，都算是开卷考试了！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 毕竟，开卷有益~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01b5515fa0cd7411013ee04deb7595.gif 为撒「C」更活泼呢？ 其实原因跟上个问题差不多。https://img.zcool.cn/community/0112eb5fa0cd7711013fdcc7dd4d5e.jpg 「安静优雅 A」很明显， 用的是没有边距的3栏网格。 一家人嘛，整整齐齐，https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 每个元素都紧贴网格， 很严谨，但是活泼感和亲和力就差一点。https://img.zcool.cn/community/017e5c5fa0cd7a11013ee04dea5973.jpg 而「调皮活力 C」压根没用网格，排版更自由，自然就更活泼。 当然啦，跟「A」相比的话， 「C」廉价感更强，所以亲和力更高，更亲民！ Ps：寡人几分钟搞的（毕竟快~），抠图和细节都差点火候，众爱卿能看懂就可~重在理解！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01458c5fa0cd7b11013fdcc7cf10fe.gif 上面俩例子，虽然版面内容差不多， 但风格差异是真~滴~大！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 为撒子呢？ 除了跟咱前面修炼的图版率、跳跃率、版面率、留白相关， 还有很大一部分原因在于网格拘束率！ 而只要掌握了网格拘束率， 那排版就可就6了！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01c8005fa0cd7d11013ee04de3f821.jpg 想活泼就活泼， 想理性就理性， 想表现啥子风格，就在一念之间咯！https://img.zcool.cn/community/01f0d35fa0cd7f11013fdcc751e0f1.jpg 你一听这么这招这么厉害！立马就挥起了鞭子：告诉本宫，何为网格拘束率！
https://img.zcool.cn/community/019f2d5fa0cd8111013ee04d8428c5.png 网格拘束率，看似很学术化的一个词， 但说白了就是，版面的自由度！
https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 一般来讲，我们运用网格时， 会严谨的卡着网格来做设计， 使版面达到严谨有秩序的感觉~ 这种类型的版面， 就可以视为高网格拘束率，低自由度，如下https://img.zcool.cn/community/01e63e5fa0cd8311013fdcc7b015a3.jpg 分栏网格，这里的元素紧贴网格~https://img.zcool.cn/community/01657c5fa0cd8511013ee04deddd9a.jpg 模块网格，这里的元素也紧贴网格~ 但实际上，我们排版时， 是可以无视网格，形成脱离网格约束的设计。 这种类型，就是低网格拘束率，高自由度，如下https://img.zcool.cn/community/01f4f15fa0cd8711013ee04dd3f389.jpg 虽然是3栏网格，但并没有严格贴合网格， 网格只拘束了左对齐关系，那么拘束率就稍微低一些。https://img.zcool.cn/community/01a6c65fa0cd8911013fdcc7169739.jpg 虽然用了模块网格，但没有绝对贴合， 只遵循了左对齐的关系，拘束率也较低。https://img.zcool.cn/community/0125fd5fa0cd8b11013fdcc7304e5d.jpg 同样是模块网格，但这个版面图片和文字， 完全没有遵循网格结构，网格拘束率就更低了。 所以感觉更灵活，版面自由度更高~ 跟本猫一样，身在牢笼，向往自由，演绎一出《大猫ker的救赎》~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png
所以说，网格拘束率，就是版面的 自~由~度~
https://img.zcool.cn/community/0153c45fa0cd8d11013ee04d0d742d.jpg 好，到这儿，相信众爱卿认识「网格拘束率」了， 但更为重要的事来啦！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 辣就是：网格拘束率怎么用？
这个问题，还是要回到版面的气质和调性上来！ 毕竟，咱做设计，可不能自嗨哟！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 理解了气质和调性，才能做出合适的设计哟~https://img.zcool.cn/community/01ecea5fa0cd8f11013fdcc7bae68a.gif 网格拘束率的调性说白了就两点！1.高拘束率，版面理性庄重、有格调，同时也有距离感。 2.低拘束率，版面自由活泼、亲和力强，容易营造有趣的感觉。
https://img.zcool.cn/community/01fbc55fa0cd9111013fdcc7580870.jpg 咱先来看第一点！1.高拘束率，版面理性庄重、有格调，同时也有距离感。
https://img.zcool.cn/community/012cf75fa0cd9311013ee04db04ce0.jpg 这个册子采用的是5栏网格， 网格拘束率比较高，给人感觉也是理性和严谨的！https://img.zcool.cn/community/0178ba5fa0cd9511013ee04d2d40ab.jpg 同样的内容，用高拘束率的模块网格来排，一样很严谨理性。https://img.zcool.cn/community/018c4f5fa0cd9611013fdcc7fca93a.jpg 这个网页用的是高拘束率的3栏网格，同样很有格调！ （大猫儿也是有格调的哟~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png）https://img.zcool.cn/community/0121815fa0cd9711013ee04dd02c13.jpg 这个版面看上去是比较灵活的， 但实际上也是用了网格来拘束！https://img.zcool.cn/community/01401b5fa0cd9711013ee04d57f444.jpg 看上去灵活，是因为在网格中做了很多通栏变化~ 就算他比较灵活，但用了这种网格也是透出一股秩序和格调， 亲和力虽然有，但也不是特别高。https://img.zcool.cn/community/01c2885fa0cd9711013fdcc781e4fb.jpg 这个网页，网格拘束率也比较高， 看上去比较灵活，原因也是网格变化比较多~ 给人感觉典雅、简约，有格调， 但活泼感和亲和力一般~https://img.zcool.cn/community/01465a5fa0cd9711013fdcc710e742.jpg 下面咱再来看看第二条~2.低拘束率，版面自由活泼、亲和力强，容易营造有趣的感觉。
https://img.zcool.cn/community/0181835fa0cd9711013ee04d5300cc.jpg 这个海报用了退底图（也叫挖版图，就是透明背景的PNG），网格拘束率也比较低。 相较于四四方方的矩形图片，退底图不规则， 更灵活，也更能为版面带来活力！https://img.zcool.cn/community/01a4715fa0cd9711013ee04d5b883b.jpg （Design by Shih Wen TAN） 这个海报，用的就全是退底图了，网格拘束率非常低。 退底图作为元素，散落在版面中，自由度非常高！ 给人的感觉就活泼，就很有活力，亲和力也是相当强的哟！ 话说大猫亲和力也很强哟，毕竟走亲民路线，哈哈~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/0143265fa0cd9811013fdcc7c59c71.jpg 继续~https://img.zcool.cn/community/010c8a5fa0cd9811013fdcc704c930.jpg 这个案例，简直把自由度玩到了极致！ 也就是网格拘束率非常低， 另外这版面留白也少，版面率和图版率高，跳跃率大， 所以，一看就是老实惠了！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 我等P民绝对买得起，而且又有趣又亲民，对吧！https://img.zcool.cn/community/0176445fa0cd9811013ee04d5d3f11.gif 所以呀所以， 想更理性庄重，咱就用高拘束率！ 想更亲和有趣，咱就用低拘束率！ 想彬彬有礼，咱就要舍弃自由，低自由度！ 想放荡不羁，咱就要突破束缚，高自由度！
https://img.zcool.cn/community/01d8ba5fa0cd9811013ee04d6b5a3f.gif 咱们设计师， 既要玩得来高端，又要玩得来亲民。 既能九天揽月，又能五湖捉鳖。https://img.zcool.cn/community/01867e5fa0cd9811013fdcc7f0234a.gif 毕竟， 风格是多样滴，市场是变化滴~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 你只会一种风格， 那就得苦守寂寞， 这风格再被淘汰， 那定要独孤必败， 对不对？https://img.zcool.cn/community/017b2a5fa0d66511013ee04df929e4.png 除非，像大猫一样帅~（此句忽略~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png） 我们这个系列功法的意义， 就是让大家了解各种风格的底层逻辑~ 才能更好的适应这多变的市场~https://img.zcool.cn/community/017a825fa0d69e11013fdcc78d56bd.png 所以众爱卿，与朕共勉， 共创这山河社稷吧！ 以上~https://img.zcool.cn/community/011f205f71f7ba11013f3110c3d7cc.jpg 虽写了这么多，但咱也不知道咱这套《玉女心经》有木有把网格拘束的基础说清楚， 所以有木有说明白，留言告诉寡人吧！
这篇文风这么搞，咱就要这种不正经的，轻松愉快的氛围。所以，点个赞吧~
页:
[1]