热评 柚子

太棒啦!超喜欢这个系列的文章

今天又带来一篇十足的干货,安全无毒,放心食用!

今个儿,咱来唠嗑唠嗑「图版率」!

下面俩海报,哪个更有亲和力?

写给新手的版式设计基础指南(二):图版率

这还用说嘛,当然是「楚楚动人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」强多了。

这个就是表现力的不同。

根据上篇干货中说的,表现力排序为:插图>照片>文字。

上篇回顾:

而插图与照片当中根据画面焦点则能排序为:人物>动物>物体>没有焦点的图(如风景照)

这里寡人再捋一捋吧。

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

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

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

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

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

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

写给新手的版式设计基础指南(二):图版率

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

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

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

写给新手的版式设计基础指南(二):图版率

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

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

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

写给新手的版式设计基础指南(二):图版率

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

再来看下面这个

写给新手的版式设计基础指南(二):图版率

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

给人的感觉简直是放肆!

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

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

低图版率+高表现力

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

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

写给新手的版式设计基础指南(二):图版率

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

写给新手的版式设计基础指南(二):图版率

图版率低+人物照片(高表现力),给人的感觉也是比较优雅简约吧!

写给新手的版式设计基础指南(二):图版率

同样低图版率(比上面俩稍微高些)+高表现力,同样是比较优雅有格调的。

高图版率+低表现力

这个也比较有意思!

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

写给新手的版式设计基础指南(二):图版率

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

写给新手的版式设计基础指南(二):图版率

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

再看这个

写给新手的版式设计基础指南(二):图版率

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

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

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

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

再来看下面这个~

写给新手的版式设计基础指南(二):图版率

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

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

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

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

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

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

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

以上~

欢迎关注作者的微信公众号:「大猫设计」

写给新手的版式设计基础指南(二):图版率

收藏 683
点赞 149

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。