排版《玉女心经》之图版率
众爱妃，又见面啦！ 今天寡人又带来一篇十足的干货，安全无毒，放心食用！ 今个儿，咱继续修炼《玉女心经》，来唠嗑唠嗑【图版率】！1.下面俩海报，哪个更有亲和力？https://img.zcool.cn/community/0197bb5f69816d11013f3110c89cd2.jpg 这还用说嘛，当然是「楚楚动人B」了！ 毕竟「索然无味A」连个图都木得（déi），那么高冷，亲和力自然就弱。https://img.zcool.cn/community/01f82e5f69816d11013e45846ebc7a.gif 反观「楚楚动人B」，仅仅加了一个图就生机盎然，亲和力暴增。 简直惹人怜爱，当真楚楚动人。https://img.zcool.cn/community/0113bf5f69816d11013f3110cd032b.gif2.下面又俩海报，哪个更更有亲和力？
https://img.zcool.cn/community/01fa2f5f69816e11013e4584494eea.jpg 诶？这不是上面惹人怜爱的「楚楚动人B」嘛， 但跟「落落大方C」比起来，好像就没有那么惹人怜爱了呢，看来亲和力虽然可以，但还是不如C呀。 C为撒亲和力比B大呢？貌似是因为C的图比B大！（害，本猫果然喜欢大的~）https://img.zcool.cn/community/01329f5f69817a11013e4584096b0a.png ABC同样的内容、同样的图片，为啥给人不同的感觉？ 正是因为图片的大小不同。 而这，就回到我们今天的主题——图版率了。https://img.zcool.cn/community/013b7b5f69816e11013f311091bf1d.gif告诉本宫，图版率为何物？
图版率，乍一看好像是高深莫测东西，感觉有点意思，有点不明觉厉哟。 但说白了就是，图片在版面中所占的比例。 再直白点，就是图片大小。 嘿！朕讲的果然通俗易懂！https://img.zcool.cn/community/01a9615f69816f11013f3110fdda65.jpg 让寡人来举个例子来详细说道说道。https://img.zcool.cn/community/017fcb5f69816f11013e4584270275.jpg 上面版式，因为全是字而没有图，图版率就是0。https://img.zcool.cn/community/0144be5f69816f11013f3110ee1f49.jpg 这个版面，图所占的面积占整个版面的1/5左右，图版率就是20%。https://img.zcool.cn/community/01a67d5f69816f11013e45845abed1.jpg 这个版面，图片占比达到了整个版面的一半还多，那妥妥的图版率占了50%以上。https://img.zcool.cn/community/01329f5f69817a11013e4584096b0a.png注意：
图版率可不是指单个图片的占比哟， 而是指，所有图片加起来的占比。 比如下面这个作品，有好几张图片。https://img.zcool.cn/community/01993d5f69817011013e458426123c.png 图片加起来占整个版面的一半左右，那么图版率也是50%噢。（小声道：确实通俗易懂） 整挺好！（手动狗头）https://img.zcool.cn/community/01329f5f69817a11013e4584096b0a.png 知名设计师鲁迅曾说： 光知道图版率有啥用？ 大家伙儿得了解它怎么用才行！告诉本宫，图版率怎么用？
爱妃莫急，朕这就告诉你们（没错，朕佳丽三千~狗头保命~） 图版率既然是指图片占比的大小。 那自然不同的占比会传达不同的感觉。 而运用的关键就在于，要知道不同图版率所带来的后果。https://img.zcool.cn/community/019d375f69817011013e4584fc9f44.gif图版率有两条黄金规律：
1.图版率越大，表现力&亲和力就越强。 2.图版率越小，格调感&枯燥感就越强。 其实这两条，上面的例子已经能说明啦。 但咱这里，还是要详细说说。https://img.zcool.cn/community/0196d55f69817011013f311069db37.jpg 先来瞅瞅第一条。图版率越大，表现力&亲和力就越强。
有科学数据表明，人们对画面的好感，会随着图版率的增加而增加。（也对。全是字，谁吖会耐心看~） 不然朕的文章为撒子会放这么多表情包！还不是为了提高图版率咩~ (主要是给大家送欢乐，愉快的学习总是那么浪漫~)https://img.zcool.cn/community/01b3895f69817011013f31108695dd.gif图版率增加了， 好感度也就有了， 别人也就更喜欢了， 表现力自然就更强了， 亲和力自然就更更强了。
https://img.zcool.cn/community/01b5015f69817011013f3110a02bab.gif 图版率在50%左右时，好感度会急剧上升。 这里有爱妃就说了：既然图版率越大，亲和力就越大，那我要极致的亲和力，图版率调成100%不就行了？ 行吗？那自然是不行的。 虽然越大的图版率亲和力就越强，但也是有极值的。https://img.zcool.cn/community/01ba225f69817111013f31108fd5ef.jpg一旦图版率超过90%，好感度反而会降低。
不信咱看一看这个100%图版率的图~https://img.zcool.cn/community/01540a5f69817111013e4584f1cf12.jpg 只有图没有字，图占满了整个版面。当真妥妥的100%图版率。 虽然是极致的图版率，但是不是感觉很空洞，亲和力好感度反而低了。https://img.zcool.cn/community/0139cf5f69817111013e4584400671.gif 所以想要极致的亲和力，图版率100%是不行的。 不行的就是不行的，就算狗腿儿打断，也是万万不行的~https://img.zcool.cn/community/01d9195f69817111013f3110474f83.jpg 现在咱们要对这个版面做点不好的事情，https://img.zcool.cn/community/0150705f69817a11013e4584064ae9.png 那就是给它加点文字。https://img.zcool.cn/community/01f2af5f69817111013f311071aeb8.jpg 看吧，看吧！ 虽然只是在左上角稍微加了点文字，版面却比之前有生气了，亲和力也提高了一点哟！ 稍微加了一点文字，缓和了之前空洞、单调的感觉，版面的活力也比之前好了。https://img.zcool.cn/community/0134325f69817211013e458402d067.gif 再来瞅瞅第二条图版率越小，格调感&枯燥感就越强。
图占得比例越小，读的欲望就越低。 这种版面内心感受是这样的： 格老子的，爱咋咋地。老子就长这样，爱看不看！ 客官您看，这是不是特高冷，特有范儿！https://img.zcool.cn/community/01329f5f69817a11013e4584096b0a.png “喜欢老子的自然会看，不喜欢的咱也不强求。”这就是所谓的大佬吧。https://img.zcool.cn/community/0108665f69817211013e4584d40cee.gif 所以这种有格调的，高冷的，咱就可以用低图版率。 但图版率越低，版面的枯燥感就会越强，这个就比较负面了。 那么问题就来了： 图版率0%，怎么搞才能不枯燥呢？ 答案是通过不同文字层级、大小对比，不同字体来营造趣味性。https://img.zcool.cn/community/010b225f69817211013f3110d4aecc.gif 而这就引出下一篇《玉女心经》中的又一杀招——文字跳跃率了。 这一点，咱下期干货会重点讲，这里就仅放张图略过吧~https://img.zcool.cn/community/0177a95f69817311013f311065ed0c.jpg 俩图的图版率都是0， 但「大大小小B」相比「平平无奇A」来说， 用了不同的层级关系、不同字体来表现， 亲和力就比A好撒~https://img.zcool.cn/community/01c9485f69817311013e458455c1ca.gif 毕竟，人们还是喜欢多元的东西， 天天吃一个菜，再好吃也会腻撒！ （嘿！寡人就是喜新厌旧了~）https://img.zcool.cn/community/0111f55f69817311013f311098f307.jpg 有人就问了，低图版率和高图版率怎么去界定呢？ 其实我们可以参考40%这个值， 低于这个值的就是低图版率， 高于这个值的就是高图版率。 当然了，这个值是寡人定的（莫要打我，呜呜）， 所以只起到参考作用哟！https://img.zcool.cn/community/018d285f69817311013e458490e713.jpg 知道了图版率的多寡对版面带来的影响后。 朕就要举办科举考试，来反向测一下众爱卿的掌握情况。https://img.zcool.cn/community/01329f5f69817a11013e4584096b0a.png 来吧，请听题~1.要表现有格调、高冷的感觉，应该用高图版率还是低图版率？
低图版率！https://img.zcool.cn/community/01c3b35f69817311013e458490a17e.png 这个对页，图片只占了10%的版面，给人感觉就是有点格调咯， 当然，也有点乏味。 再来瞅瞅下面这个~https://img.zcool.cn/community/0124e95f69817311013f3110032115.png 这个因为文字的编排原因，格调感比上面的强多了！ 更重要的一点，是人家图版率非常低。 云的图片因为跟背景非常相似，可以不算到图版率中，有效图版率也就是最下面的小人。 所以格调感必须强呀。 再来看最后一个~https://img.zcool.cn/community/0108ae5f69817411013f31105c6ab4.png 这个网页，图片就只有下面的俩人，图版率就很低，10%都不到。 给人的感觉就是比较高冷，比较有格调的。2.要表现活泼和张力，应该用高图版率还是低图版率？
高图版率！https://img.zcool.cn/community/01ad0d5f69817411013e4584700ad3.png 超高的图版率加上少量文字，给人的感觉就非常的活泼！https://img.zcool.cn/community/01a7515f69817411013f311023f849.png 这个作品虽然是黑白的，但图版率占比很大，所以尽管是黑白的，给人的感觉也是比较有张力的！ 所以，版面率的多寡取决于你项目的调性。 内向的、安静的，咱就用低图版率。 外向的、奔放的，咱就用高图版率！ 见不得人的那就……那就别放呗！表现力&图版率有啥区别？
上篇咱说了表现力，那么表现力跟图版率有啥区别呢？ 咱就这么说吧， 图版率完全一样的版面，表现力可能不同。https://img.zcool.cn/community/012e5e5f69817411013e458451e32b.jpg 比如咱看一下这个版面，图版率和排版完全一致，但「含蓄的B」视觉表现力比「内敛的A」强多了。 这个就是表现力的不同。 根据寡人上篇干货中说的，表现力排序为：插图＞照片＞文字。 而插图与照片当中根据画面焦点则能排序为：人物＞动物＞物体＞没有焦点的图（如风景照）https://img.zcool.cn/community/01329f5f69817a11013e4584096b0a.png 这里寡人再捋一捋吧。 低图版率→→→版面安静、高冷，但也无趣。 低表现力→→→版面安静、高冷，也很无趣。 高图版率→→→版面亲和力强、更活泼。 高表现力→→→版面更活泼，更放荡（跟朕一样~）https://img.zcool.cn/community/0138855f69817411013f3110d44e46.gif 两者某种程度上传达的感觉是差不多的。但图版率更多的是图片占比的大小，而与图片本身的表现力无关。 况且，咱们说的排版《玉女心经》中的八奇技，设计时都要综合考虑。https://img.zcool.cn/community/018d605f69817511013e4584c0e9f1.jpg 咱现在八奇技学了俩了，就综合用他一用。https://img.zcool.cn/community/01329f5f69817a11013e4584096b0a.png 是时候让老夫传授传授组合拳了！低图版率+低表现力图片是什么感觉？
两个都是安静+高冷+无趣，强强相加，那必须是极致的高冷和无趣呗！https://img.zcool.cn/community/01cbab5f69817511013e4584ea3bbe.png 这个全是字， 那就是极低的图版率+极低的表现力，最后的结果就是很无聊、很正式。 只能在文字的编排上加点韵律活络一下版面。 虽如此，但还是杯水车薪，无聊的一批！https://img.zcool.cn/community/01ba445f69817511013f31108a9fca.jpghttps://img.zcool.cn/community/01d5635f69817511013f3110fe032a.png 这个主页，图版率低，图片也是风景之类的表现力不强的图。给人的感觉也是优雅、有格调的。https://img.zcool.cn/community/0148575f69817511013f31106d690e.gif高图版率+高表现力图片是什么感觉呢？
这还用说，两者都是亲和力+活泼+放荡，那组合起来必须是极致的活泼和放肆！https://img.zcool.cn/community/013bd65f69817511013e4584d47a7e.png 这个作品版面中除了到处都是图，还用了表现力超强插图类型。那自然是男上加男，更活泼了！https://img.zcool.cn/community/01cda65f69817611013e45848cc78d.jpg 再来看下面这个https://img.zcool.cn/community/0163485f69817711013f31101694c2.png 这个版面到处都是人物的图片，图版率自然就高。况且元素丰富饱满，表现力也很高！ 给人的感觉简直是放肆！https://img.zcool.cn/community/0143e15f69817711013e4584ba43a0.jpg 这俩组合都能理解，没有难度吧。 接下来就是有难度的了！也就是不同的图版率和表现力的组合，会是撒子感觉。https://img.zcool.cn/community/015d7e5f69817811013e4584d8eebd.gif低图版率+高表现力
其实低图版率就注定了翻不起大浪！ 所以一般低图版率+高表现力的形式也会很有格调感，但枯燥感会降低很多。https://img.zcool.cn/community/0156845f69817811013e45849c18f9.png 上面作品采用的就是低图版率+高表现力（人物照片）的形式，给人感觉比较优雅、有格调。 也不至于那么单调。https://img.zcool.cn/community/0188f75f69817811013e45845e0d3d.png 图版率低+人物照片（高表现力），给人的感觉也是比较优雅简约吧！https://img.zcool.cn/community/01adea5f69817811013f3110cc6182.png 同样低图版率（比上面俩稍微高些）+高表现力，同样是比较优雅有格调的。高图版率+低表现力
这个也比较有意思！ 高图版率但低表现力，给人的感觉会更有趣一点！而且虽然图版率高，但会给人简约+干净的感觉。https://img.zcool.cn/community/0115bd5f69817811013f3110eaf971.png 这个海报虽然是满版，但因为照片是风景照，比较开阔，表现力不高。给人的感觉就比较干净，没那么放荡！https://img.zcool.cn/community/01a5c45f69817911013e4584c2e6a7.png 这个嘛，跟上面的同理，高图版率+低表现力，给人很清新的感觉！ 再看这个https://img.zcool.cn/community/012da15f69817911013f3110004438.png 这里就有爱卿问了，这么多特写的手，这不应该是高表现力嘛？https://img.zcool.cn/community/018b875f69817a11013f31109553e1.png 本来应该是高表现力没错，但手的颜色跟背景太过接近，仿佛融为一体。 所以在这个版面中其实是算低表现力的。 高图版率+低表现力，造成的结果就是很有格调，同时也很有设计感。https://img.zcool.cn/community/01bdb25f69817911013e4584113ac1.jpg 再来看下面这个~https://img.zcool.cn/community/01edad5f69817911013f31105fdc35.png 这个就比较过分了，上面还是手，现在直接搞个人像上来！ 表现力和图版率都这么高，但给人感觉却并不是那么放肆，这不是打朕的脸嘛？https://img.zcool.cn/community/01d2115f69817a11013e4584d7c5cb.jpg 这到底是为啥呢？其实也是因为色彩。 人像的颜色跟背景很接近，所以表现力只能算中，并不是特别高。 勉为其难就算高图版率+中表现力。给人的感觉虽然简约，但已经比低表现力的强多了！https://img.zcool.cn/community/01103e5f69817a11013e45847dbd89.gif 其实大多数时候，图片表现力的大小是需要我们主观去判断的。毕竟理论是死的， 人是活的。 世界是向前发展的， 万物是在变化的。 而大猫， 是在不断变帅的！
以上~https://img.zcool.cn/community/0166915f69817a11013f3110cc4c32.jpg 唉~写干货上瘾了，一不小心就写了快4000字了呢。 虽写了这么多，但咱也不知道咱这套《玉女心经》有木有把图版率说清楚， 所以有木有说明白，各位大佬留言告诉我吧~ 这篇文风这么搞，咱就要这种不正经的，轻松愉快的氛围。所以，点个赞吧~
页:
[1]