写给新手的版式设计基础指南（四）：图片跳跃率

上回，咱说完了文字跳跃率，今个儿，咱就来说道说道图片跳跃率。

说道之前，咱照例还是先来看俩问题。

下面俩版式，哪个给人更安静、更精致的感觉？

那必须是「小家碧玉A」呀

其实是因为「小家碧玉A」图片的大小对比小，图版率也小，自然就会传达传达安静、精致的感觉。

反观「大家糙玉B」呢，虽然图片内容与表现力跟「A」一样，

但图片大小对比强烈，图版率也高，大大咧咧的，哪有小「A」温情脉脉？

下面俩版式，哪个感觉更有亲和力？

那肯定是「亲亲热热B」嘛，毕竟君子之交呀，淡~如~水~

同样咱把「A」、「B」当成俩买菜的小伙。

「A」的菜品图片都一样大，就好比客官问：“你这里那个菜卖得最好？”“都一样，都好，都卖得好。”

我信你个鬼，拜拜了您呐~客官转头就去了「B」小伙的摊位。

客官大老远的就听到「B」在吆喝，

“我们的招牌菜——剧毒草，已经售出2000份！今日免费试吃，不收钱！”

瞧，「亲亲热热B」图片有大小对比，人家就有重点，有主推产品，给人亲和力就大。

造成上面两个问题的影响是啥呢？自然就是图片跳跃率了。

告诉寡人，何为图片跳跃率？

上回说到跳跃率就是大小比。

文字跳跃率是大标题与正文的大小比，

图片跳跃率自然就是，最大图片与最小图片的大小比。（真·通俗易懂）

这个版面几张图片大小一样，那么图片跳跃率就为1。

这个版面最大的图片是最小图片面积的2倍，那么跳跃率就是200%。

图片跳跃率相信大家都知道了，那这样子，咱就去看一下图片跳跃率怎么用吧！

图片跳跃率怎么用？

运用图片跳跃率，必须得知道，不同图片跳跃率所造成的感觉！

图片跳跃率运用上只有两条黄金原则：降低图片跳跃率使版面更精致、更稳定！

提高图片跳跃率使版面亲和力更强！但是，但是，但是！这条得考虑到图片本身的所传达的感觉！为什么呢？

先吊一下大家胃口，后面详细说道说道。

咱先来说道说道第一点。

1. 降低图片跳跃率使版面更精致、更稳定！

降低跳跃率仅仅是使版面更精致、更稳定嘛？

那自然是不的，除了更精致、更稳定，还有更安静、更典雅！当然，可能也会更无趣。

两个一样大的人像，跳跃率自然就是1了，是比较安静、比较典雅的吧！

图片虽然有大小区别，但是差别很小，也就是图片跳跃率很小，所以给人感觉画面是稳定的，典雅的。

这个版面图片虽然比较多，但是整体整体跳跃率也不高。

给人感觉就比较有格调，有气质。

好，咱接着来看第二条。

2. 提高图片跳跃率使版面亲和力更强！

但刚才咱对这条说了「但是」。并说了这条得考虑到，图片本身所传达的感觉。为什么呢？

因为提高图片的跳跃率的本身，就是一面放大镜，或者一台扩音器！

如果我提高了一张特别安静的图片占比，就会造成版面更安静的感觉。

这2P画册，图片跳跃率在2倍左右，但放大的图是没有动感的。

所以就算图片跳跃率比较大，但活力也不强，传达的更是一种雅致、安静质感。

这2p，图片跳跃率非常大，但放大的图片是一个静物，给人的感觉也是比较安静的环境，所以也没啥动感~

这个网页图片跳跃率蛮大的，但由于都是静态的图片，虽然更易阅读（亲和力更强），但并没有传达出活泼的感觉。

So，图片本身就是比较静态的，那么即便把他放大，也不能不体现活泼的感觉。

这就又回到咱们第一讲——表现力了。

静态的、风景的图片表现力都是比较低的~

虽然静态图片表现力低，无法体现活泼、动感。但增加图片跳跃率，还是会增加版面亲和力，使人更容易阅读。

如果本身是比较活泼的图片，那么提高他的图片占比，

造成的结果必须是，放浪+放肆，变得更为活泼！

这个作品中的图片本身表现力就比较强，所以提高图片跳跃率会让版面变得更为活泼。

这个作品图片跳跃率非常大，而且图片表现力和动感都比较强，也比较有张力。

虽然都是黑白图片，但依然有很强的动感。

这个网页图片跳跃率挺大，用的图和版面风格表现力也很强，整体就活泼！

相信到此，大家已经掌握图片跳跃率了。

但以为这就结束了？

NO，朕还要补充一点！

图片跳跃率与图片表现力的关系

我花了一分钟做了2P画册，左边的全身照，和右边的人物特写，都属于强表现力。

但人物特写因为更聚焦，表现力要比空旷的全身照强不少。

现在如果把两个图的位置调换一下会发生什么？

卧槽，整个版面给人的冲击力竟然更大了！

这两个版面，图片跳跃率、内容和版面完全一样，只是大图的表现力不同。

用表现力更高的大图，会给人产生更强的视觉刺激，空间感会更强！

而原先的大图表现力小，视觉刺激就会小，就显得安静一些~

这也再一次说明了增加跳跃率，要考虑好用图。

是让版面更宁静呢，还是让他更放肆呢？

生杀大权在众爱卿手里~所以所以，跳跃率大法好，图片、文字要跳好，精致感咱就跳低一点，亲和力强咱就跳高一点，也莫忘记图版率、表现力。

以上~

往期回顾：

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