写给新手的版式设计基础指南（二）：图版率

下面俩海报，哪个更有亲和力？

这还用说嘛，当然是「楚楚动人B」了！

毕竟「索然无味A」连个图都木得（déi），那么高冷，亲和力自然就弱。

反观「楚楚动人B」，仅仅加了一个图就生机盎然，亲和力暴增。

简直惹人怜爱，当真楚楚动人。

下面又俩海报，哪个更更有亲和力？

诶？这不是上面惹人怜爱的「楚楚动人B」嘛，

但跟「落落大方C」比起来，好像就没有那么惹人怜爱了呢，看来亲和力虽然可以，但还是不如C呀。

C为撒亲和力比B大呢？貌似是因为C的图比B大！

ABC同样的内容、同样的图片，为啥给人不同的感觉？

正是因为图片的大小不同。而这，就回到我们今天的主题——图版率了。

图版率为何物？

图版率，乍一看好像是高深莫测东西，感觉有点意思，有点不明觉厉哟。

但说白了就是，图片在版面中所占的比例。再直白点，就是图片大小。

让寡人来举个例子来详细说道说道。

上面版式，因为全是字而没有图，图版率就是0。

这个版面，图所占的面积占整个版面的1/5左右，图版率就是20%。

这个版面，图片占比达到了整个版面的一半还多，那妥妥的图版率占了50%以上。

注意：

图版率可不是指单个图片的占比哟，而是指，所有图片加起来的占比。

比如下面这个作品，有好几张图片。

图片加起来占整个版面的一半左右，那么图版率也是50%噢。

整挺好！（手动狗头）

知名设计师鲁迅曾说：

光知道图版率有啥用？大家伙儿得了解它怎么用才行！

图版率怎么用？

图版率既然是指图片占比的大小。那自然不同的占比会传达不同的感觉。

而运用的关键就在于，要知道不同图版率所带来的后果。

图版率有两条黄金规律

• 图版率越大，表现力&亲和力就越强。
• 图版率越小，格调感&枯燥感就越强。

其实这两条，上面的例子已经能说明啦。

但咱这里，还是要详细说说。

先来瞅瞅第一条。

1. 图版率越大，表现力&亲和力就越强。

有科学数据表明，人们对画面的好感，会随着图版率的增加而增加。（也对。全是字，谁吖会耐心看~）

图版率增加了，好感度也就有了，别人也就更喜欢了，表现力自然就更强了，亲和力自然就更更强了。

图版率在50%左右时，好感度会急剧上升。

既然图版率越大，亲和力就越大，那我要极致的亲和力，图版率调成100%不就行了？

行吗？那自然是不行的。

虽然越大的图版率亲和力就越强，但也是有极值的。

一旦图版率超过90%，好感度反而会降低。

不信咱看一看这个100%图版率的图~

只有图没有字，图占满了整个版面。当真妥妥的100%图版率。

虽然是极致的图版率，但是不是感觉很空洞，亲和力好感度反而低了。

所以想要极致的亲和力，图版率100%是不行的。

不行的就是不行的，就算狗腿儿打断，也是万万不行的~

现在咱们要对这个版面做点不好的事情，那就是给它加点文字。

看吧，看吧！

虽然只是在左上角稍微加了点文字，版面却比之前有生气了，亲和力也提高了一点哟！

稍微加了一点文字，缓和了之前空洞、单调的感觉，版面的活力也比之前好了。

再来瞅瞅第二条

图版率越小，格调感&枯燥感就越强。

图占得比例越小，读的欲望就越低。

这种版面内心感受是这样的：

老子就长这样，爱看不看！

客官您看，这是不是特高冷，特有范儿！

“喜欢老子的自然会看，不喜欢的咱也不强求。”这就是所谓的大佬吧。

所以这种有格调的，高冷的，咱就可以用低图版率。

但图版率越低，版面的枯燥感就会越强，这个就比较负面了。

那么问题就来了：图版率0%，怎么搞才能不枯燥呢？

答案是通过不同文字层级、大小对比，不同字体来营造趣味性。

而这就引出下一篇的又一杀招——文字跳跃率了。

这一点，咱下期干货会重点讲，这里就仅放张图略过吧~

俩图的图版率都是0，但「大大小小B」相比「平平无奇A」来说，用了不同的层级关系、不同字体来表现，亲和力就比A好撒~

毕竟，人们还是喜欢多元的东西，天天吃一个菜，再好吃也会腻撒！

有人就问了，低图版率和高图版率怎么去界定呢？

其实我们可以参考40%这个值，低于这个值的就是低图版率，高于这个值的就是高图版率。

当然了，这个值是我定的，所以只起到参考作用哟！

知道了图版率的多寡对版面带来的影响后。就要举办科举考试，来反向测一下大家的掌握情况。

来吧，请听题~

1. 要表现有格调、高冷的感觉，应该用高图版率还是低图版率？

低图版率！

这个对页，图片只占了10%的版面，给人感觉就是有点格调咯，

当然，也有点乏味。

再来瞅瞅下面这个~

这个因为文字的编排原因，格调感比上面的强多了！

更重要的一点，是人家图版率非常低。

云的图片因为跟背景非常相似，可以不算到图版率中，有效图版率也就是最下面的小人。

所以格调感必须强呀。再来看最后一个~

这个网页，图片就只有下面的俩人，图版率就很低，10%都不到。

给人的感觉就是比较高冷，比较有格调的。

2. 要表现活泼和张力，应该用高图版率还是低图版率？

高图版率！

超高的图版率加上少量文字，给人的感觉就非常的活泼！

这个作品虽然是黑白的，但图版率占比很大，所以尽管是黑白的，给人的感觉也是比较有张力的！

所以，版面率的多寡取决于你项目的调性。

• 内向的、安静的，咱就用低图版率。
• 外向的、奔放的，咱就用高图版率！
• 见不得人的那就……那就别放呗！

表现力&图版率有啥区别？

上篇咱说了表现力，那么表现力跟图版率有啥区别呢？

咱就这么说吧，图版率完全一样的版面，表现力可能不同。

比如咱看一下这个版面，图版率和排版完全一致，但「含蓄的B」视觉表现力比「内敛的A」强多了。

这个就是表现力的不同。

根据上篇干货中说的，表现力排序为：插图＞照片＞文字。

上篇回顾：

 

 

而插图与照片当中根据画面焦点则能排序为：人物＞动物＞物体＞没有焦点的图（如风景照）

这里寡人再捋一捋吧。

• 低图版率→→→版面安静、高冷，但也无趣。
• 低表现力→→→版面安静、高冷，也很无趣。
• 高图版率→→→版面亲和力强、更活泼。
• 高表现力→→→版面更活泼

两者某种程度上传达的感觉是差不多的。但图版率更多的是图片占比的大小，而与图片本身的表现力无关。

况且设计时都要综合考虑，咱现在八奇技学了俩了，就综合用他一用。

是时候让老夫传授传授组合拳了！

低图版率 低表现力图片是什么感觉？

两个都是安静 高冷 无趣，强强相加，那必须是极致的高冷和无趣呗！

这个全是字， 那就是极低的图版率 极低的表现力，最后的结果就是很无聊、很正式。

只能在文字的编排上加点韵律活络一下版面。

虽如此，但还是杯水车薪。

这个主页，图版率低，图片也是风景之类的表现力不强的图。给人的感觉也是优雅、有格调的。

高图版率 高表现力图片是什么感觉呢？

这还用说，两者都是亲和力 活泼 放荡，那组合起来必须是极致的活泼和放肆！

这个作品版面中除了到处都是图，还用了表现力超强插图类型。那自然是男上加男，更活泼了！

再来看下面这个

这个版面到处都是人物的图片，图版率自然就高。况且元素丰富饱满，表现力也很高！

给人的感觉简直是放肆！

这俩组合都能理解，没有难度吧。

接下来就是有难度的了！也就是不同的图版率和表现力的组合，会是撒子感觉。

低图版率 高表现力

其实低图版率就注定了翻不起大浪！

所以一般低图版率 高表现力的形式也会很有格调感，但枯燥感会降低很多。

上面作品采用的就是低图版率 高表现力（人物照片）的形式，给人感觉比较优雅、有格调。也不至于那么单调。

图版率低 人物照片（高表现力），给人的感觉也是比较优雅简约吧！

同样低图版率（比上面俩稍微高些） 高表现力，同样是比较优雅有格调的。

高图版率 低表现力

这个也比较有意思！

高图版率但低表现力，给人的感觉会更有趣一点！而且虽然图版率高，但会给人简约 干净的感觉。

这个海报虽然是满版，但因为照片是风景照，比较开阔，表现力不高。给人的感觉就比较干净，没那么放荡！

这个嘛，跟上面的同理，高图版率 低表现力，给人很清新的感觉！

再看这个

这里就有人问了，这么多特写的手，这不应该是高表现力嘛？

本来应该是高表现力没错，但手的颜色跟背景太过接近，仿佛融为一体。

所以在这个版面中其实是算低表现力的。

高图版率 低表现力，造成的结果就是很有格调，同时也很有设计感。

再来看下面这个~

这个就比较过分了，上面还是手，现在直接搞个人像上来！

表现力和图版率都这么高，但给人感觉却并不是那么放肆，这不是打脸嘛？

这到底是为啥呢？其实也是因为色彩。

人像的颜色跟背景很接近，所以表现力只能算中，并不是特别高。

勉为其难就算高图版率 中表现力。给人的感觉虽然简约，但已经比低表现力的强多了！

其实大多数时候，图片表现力的大小是需要我们主观去判断的。

毕竟理论是死的，人是活的。世界是向前发展的，万物是在变化的。

以上~

转载声明：文章来源于网络，不作任何商业用途。