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

Homepage recommendation
1年前Publish
继续修炼排版神功!

众爱卿,许久不贱,又见面啦!


今儿个,在朕的皮鞭下,

咱继续修炼排版神功!



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

这回,咱就说道说道,撒子是网格拘束率!





照例,先来看俩问题~



下面俩版面,哪个感觉更理性?



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





所以呀所以,


想更理性庄重,咱就用高拘束率!

想更亲和有趣,咱就用低拘束率!


想彬彬有礼,咱就要舍弃自由,低自由度!

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




咱们设计师,

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

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



毕竟,

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


你只会一种风格,

那就得苦守寂寞,

这风格再被淘汰,

那定要独孤必败,

对不对?



除非,像大猫一样帅~(此句忽略~



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

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

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



所以众爱卿,与朕共勉,

共创这山河社稷吧!


以上~



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


所以有木有说明白,留言告诉寡人吧!



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

原文链接:https://mp.weixin.qq.com/s/GaPuDeBs8rh80a6NUMnxcw
2078
Statement: all the content and comments made by netizens in ZCOOL only represent themselves, and do not reflect any opinions and opinions of ZCOOL.
Report
Share
Collect
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
All Comments0
成都 | 设计爱好者
Article information
文章标签
收录收藏夹
更多收录此文章的收藏夹