图文版：

什么是图片跳跃率呢？

我们先来看几个海报的案例

第一张海报，我们把所有图片调整到几乎一样大，布置在版面上

第二张海报，我们把其中一张照片放大，其他的照片缩小，让它们的大小形成差异

第三张海报，我们继续调整图片的大小，让图片之间的大小比例差异更大

这几张海报，图片之间的大小比例不同，

这种图片的大小差异程度就叫做图片跳跃率。

图片之间大小差异越大，跳跃率就越大。

使用不同的图片跳跃率，会产生不同的页面效果，
图片跳跃率就是关于该如何设置图片大小比例的理论。

如果页面上的图片大小十分接近，图片跳跃率就很小

跳跃率小的页面有什么特点？

小的图片跳跃率，会让页面显得安静和精致，但是却没有活力。
因为图片越小，视觉度就越弱，当页面上的图片都很小的时候，页面就会失去表现力。

在同等的页面空间下，如果什么都想表现，给予平均的机会，结果却是平平无奇，没有视觉焦点。

跳跃率小的页面，给人的感觉更平淡，稳定

比如这两个展览海报，左边的跳跃率大，更有表现力，但是只突出了一个物品。

右边的跳跃率小，画面比较平淡，但是每个物品都能看清晰。

小的跳跃率可以给人稳定可靠的印象，因为图片越小视觉度越低，情绪性会减弱，理性就会增加，因此会造成实用性的形象。

图片跳跃率小的页面，图文率一般也比较低，文字越多，页面就越理性。

如果图片统一大小，并且对齐排列，会继续增加理性的形象。

页面上的图片大小差异越大，跳跃率就越大。

跳跃率大的页面有什么特点？

大的跳跃率，会更有活力和热情。
图片变大之后，视觉度和表现力会增加。图片的对比增加，会让画面不平衡，更有张力。

因为图片之间大小差异巨大，视线会被大的图片吸引过去，成为主要信息，

缩小的图片会成为次要信息，明显的大小对比会让页面的信息层级更加明确。

图片的大小不同，会导致空间距离的差异，

会让画面有纵深感，因此也能形成远近的对比关系。

图片本身的视觉度也会对画面有很大的影响，

左边的图片视觉度更高，就算是图片大小一致，但是画面感觉上已经有很大的跳跃率

如果把视觉度高的图片继续放大，会继续增加页面的不平衡。

比如这两个页面使用相同的图片跳跃率，只是选择放大的图片不同，左边的表现力明显更好。

所以，考虑跳跃率的时候，同时也要考虑到图片的视觉度造成的影响。

那么究竟该使用多大的图片跳跃率呢？

下面我们用三种页面风格和一些实例来说明

首先是实用性的页面，这种页面的信息量很大，文字也很多

实用性的页面最先考虑的是内容是否清晰，

在同等版面下，如果放大一些图片，就意味着其他图片需要缩小，虽然页面的视觉度提高了，但是有些内容就无法看清楚，因此，实用性的页面适合中等或偏小的图片跳跃率。

我们常用的应用界面，包括网页，信息流的图片大小几乎都是一致的，这就是实用性的体现

实用性的页面，也可以有一定的跳跃率。

比如在网页和UI中，经常会在重要位置使用比较大的横幅，突出重要信息，会提高视觉度，增加页面的亲和力。

第二种是随意性的页面，
这种页面需要呈现的信息量较少，文字数量也比较少，排版比较随意。

（这是一个关于茶的网站的局部截图，完整效果请看本文的视频版）

随意性的页面，需要用比较高的视觉度来吸引注意力，因此需要放大图片，
在网页中也可以用视频替代图片，这种页面文字内容较少，图文率比较高，可以使用比较大的图片跳跃率。

第三种是精神性的页面，这种页面首先考虑的是视觉效果，不适合放置过多的图片，会破坏画面的整体性，最好只用一张图片覆盖整个版面。