排版《玉女心经》之图片跳跃率
寡人又来了！ 还带来了大家都喜欢修炼的排版神功，《玉女心经》的第4章。https://img.zcool.cn/community/01bc1f5f72971e11013e458434eb0b.png 上回，咱说完了文字跳跃率，今个儿，咱就来说道说道图片跳跃率。https://img.zcool.cn/community/01e6aa5f81422611013f3110332ac4.gif 秋天的第一杯奶茶，送给大家~ 说道之前，咱照例还是先来看俩问题。下面俩版式，哪个给人更安静、更精致的感觉？https://img.zcool.cn/community/01b7be5f81422711013e4584fb8817.jpg 那必须是「小家碧玉A」呀，毕竟小家碧玉贤良淑德，自然就精致了。https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01e68e5f81422711013e45848263df.jpg 好吧，寡人认真点。https://img.zcool.cn/community/011ad45f81422711013f311010a517.jpg 其实是因为「小家碧玉A」图片的大小对比小，图版率也小，自然就会传达传达安静、精致的感觉。https://img.zcool.cn/community/01c1885f81422711013f3110eb495b.jpg 反观「大家糙玉B」呢，虽然图片内容与表现力跟「A」一样， 但图片大小对比强烈，图版率也高，大大咧咧的，哪有小「A」温情脉脉？https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 要我选，我肯定无耻的选择大家糙玉B。https://img.zcool.cn/community/01bc1f5f72971e11013e458434eb0b.png 没错，不管温不温柔，朕就是喜欢大的，来咬我鸭~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01cee25f81422711013e45846e97ad.gif下面俩版式，哪个感觉更有亲和力？
https://img.zcool.cn/community/0134f15f81422711013e45844ebd4c.jpg 那肯定是「亲亲热热B」嘛，毕竟君子之交呀，淡~如~水~https://img.zcool.cn/community/01f5ce5f81422711013f311022219c.jpg 同样咱把「A」、「B」当成俩买菜的小伙。https://img.zcool.cn/community/0147f45f81422811013e45840ab2eb.jpg 「A」的菜品图片都一样大， 就好比客官问：“你这里那个菜卖得最好？” “都一样，都好，都卖得好。”https://img.zcool.cn/community/01cbd65f81422811013f3110fdbff2.gif 我信你个鬼，拜拜了您呐~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 客官转头就去了「B」小伙的摊位。https://img.zcool.cn/community/01ee415f81422811013e4584d4fac3.jpg 客官大老远的就听到「B」在吆喝， “我们的招牌菜——剧毒草，已经售出2000份！今日免费试吃，不毒死，不收钱！”https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 瞧，「亲亲热热B」图片有大小对比，人家就有重点，有主推产品，给人亲和力就大。https://img.zcool.cn/community/0150705f69817a11013e4584064ae9.png 造成上面两个问题的影响是啥呢？自然就是图片跳跃率了。https://img.zcool.cn/community/019a085f81422811013f3110e15717.jpg告诉寡人，何为图片跳跃率？
上回说到跳跃率就是大小比。 文字跳跃率是大标题与正文的大小比， 图片跳跃率自然就是，最大图片与最小图片的大小比。 （真·通俗易懂https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png）https://img.zcool.cn/community/0191e15f81422811013f3110fffb53.jpg 这个版面几张图片大小一样，那么图片跳跃率就为1。https://img.zcool.cn/community/0199215f81422811013e4584831af9.jpg 这个版面最大的图片是最小图片面积的2倍，那么跳跃率就是200%。 （哇，真好理解，简直So Easy！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png）https://img.zcool.cn/community/0115e65f81422811013f3110394355.jpg 图片跳跃率相信大家都造（知道）了， 那酱紫（这样子）， 咱就去看一下图片跳跃率怎么用吧！https://img.zcool.cn/community/01c5d25f81422911013e45846c3b95.jpg告诉寡人，图片跳跃率怎么用？
运用图片跳跃率， 必须得知道， 不同图片跳跃率所造成的感觉！https://img.zcool.cn/community/01bc1f5f72971e11013e458434eb0b.png 你扯着寡人的领子： “快告诉本宫，不同的跳跃率是什么感觉！” 唉~别猴急嘛https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png，春宵一刻，当然得娓娓道来。https://img.zcool.cn/community/01e15e5f81422911013e458476c7de.jpg 图片跳跃率运用上只有两条黄金原则： 降低图片跳跃率使版面更精致、更稳定！ 这条没啥问题。https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 提高图片跳跃率使版面亲和力更强！ 但是，但是，但是！ 这条得考虑到图片本身的所传达的感觉！为什么呢？ 先吊一下大家胃口，后面详细说道说道。https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/016f325f81422911013f31103bacdd.gif 咱先来说道说道第一点。降低图片跳跃率使版面更精致、更稳定！
降低跳跃率仅仅是使版面更精致、更稳定嘛？ 那自然是不的，除了更精致、更稳定，还有更安静、更典雅！当然，可能也会更无趣。https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01dc6d5f81422911013f31104acf75.png 两个一样大的人像，跳跃率自然就是1了，是比较安静、比较典雅的吧！https://img.zcool.cn/community/01cc465f81422911013e45847fec6e.png 图片虽然有大小区别，但是差别很小，也就是图片跳跃率很小，所以给人感觉画面是稳定的，典雅的。https://img.zcool.cn/community/01ae585f81422a11013e45847784ac.png 这个版面图片虽然比较多，但是整体整体跳跃率也不高。 给人感觉就比较有格调，有气质。 （不得不说，有气质这点跟大猫是一样一样滴~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png）https://img.zcool.cn/community/013d275f81422a11013f3110a11785.jpg 好，咱接着来看第二条。提高图片跳跃率使版面亲和力更强！
但刚才咱对这条说了「但是」。https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 并说了这条得考虑到，图片本身所传达的感觉。为什么呢？ 因为鸭，提高图片的跳跃率的本身，就是一面放大镜，或者一台扩音器！https://img.zcool.cn/community/0127f45f81422a11013f3110508e85.jpg 如果我提高了一张特别安静的图片占比，就会造成版面更安静的感觉。https://img.zcool.cn/community/0100fc5f81422a11013e458445226b.png 这2P画册，图片跳跃率在2倍左右，但放大的图是没有动感的。 所以就算图片跳跃率比较大，但活力也不强，传达的更是一种雅致、安静质感。https://img.zcool.cn/community/01d6be5f81422a11013f311022a91d.jpghttps://img.zcool.cn/community/0174a75f81422b11013e4584256fec.png 这2p，图片跳跃率非常大，但放大的图片是一个静物，给人的感觉也是比较安静的环境，所以也没啥动感~https://img.zcool.cn/community/01267a5f81422b11013e45847e3d15.png 这个网页图片跳跃率蛮大的，但由于都是静态的图片， 虽然更易阅读（亲和力更强），但并没有传达出活泼的感觉。https://img.zcool.cn/community/01541b5f81422b11013f3110ad426d.jpg So， 图片本身就是比较静态的，那么即便把他放大，也不能不体现活泼的感觉。https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 这就又回到咱们第一讲——表现力了。 静态的、风景的图片表现力都是比较低的~ 所以排版，《玉女心经》的八奇技都要考虑到哦~ 虽然静态图片表现力低，无法体现活泼、动感。但增加图片跳跃率，还是会增加版面亲和力，使人更容易阅读。https://img.zcool.cn/community/0185b45f81422b11013f31105a63d9.gif 如果本身是比较活泼的图片，那么提高他的图片占比， 造成的结果必须是，放浪+放肆，变得更为活泼！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/0102d95f81422b11013e458463c08b.png 这个作品中的图片本身表现力就比较强，所以提高图片跳跃率会让版面变得更为活泼。https://img.zcool.cn/community/011ca95f81422c11013e458487410a.png 这个作品图片跳跃率非常大，而且图片表现力和动感都比较强，也比较有张力。 虽然都是黑白图片，但依然有很强的动感。https://img.zcool.cn/community/0162fc5f81422c11013f3110634b0b.gifhttps://img.zcool.cn/community/01acce5f81422c11013f31105ddc0d.png 这个网页图片跳跃率挺大，用的图和版面风格表现力也很强， 整体就活泼！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01ce375f81422c11013e4584d40b69.gif 相信到此，众爱卿在朕的敲打之下已经掌握图片跳跃率了。 但以为这就结束了？ NO，朕还要补充一点！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 图片跳跃率与图片表现力的关系 https://img.zcool.cn/community/0154165f81422d11013e4584e873ec.jpghttps://img.zcool.cn/community/0121a15f81422d11013f311071639f.jpg 寡人花了1分钟（别问，问就是寡人比较快~）做了2P画册，还是很不错滴！（自我满足https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png） 左边的全身照，和右边的人物特写，都属于强表现力。 但人物特写因为更聚焦，表现力要比空旷的全身照强不少。 现在如果把两个图的位置调换一下会发生什么？https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/0143755f81422d11013f3110adce3b.jpg 卧槽，整个版面给人的冲击力竟然更大了！（大，不同凡响~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png） 这两个版面，图片跳跃率、内容和版面完全一样，只是大图的表现力不同。 用表现力更高的大图，会给人产生更强的视觉刺激，空间感会更强！ 而原先的大图表现力小，视觉刺激就会小，就显得安静一些~https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.pnghttps://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 这也再一次说明了增加跳跃率，要考虑好用图。 是让版面更宁静呢，还是让他更放肆呢？ 生杀大权在众爱卿手里~https://img.zcool.cn/community/01ff7d5f81422d11013e4584a0a5d1.gif 所以所以， 跳跃率大法好， 图片、文字要跳好， 精致感咱就跳低一点， 亲和力强咱就跳高一点， 也莫忘记图版率、表现力。 活用他们，假以时日， 玉女心经，神功必成！ 到那时，就可以慢慢追上，追上本猫吹上天的牛啦！https://img.zcool.cn/community/01a0b65f72971e11013f3110514eb3.png 以上~https://img.zcool.cn/community/012cf45f81422d11013e4584cbd7fe.jpg 虽写了这么多，但咱也不知道咱这套《玉女心经》有木有把图片跳跃率说清楚， 所以有木有说明白，各位大佬留言告诉我吧~ 这篇文风这么搞，咱就要这种不正经的，轻松愉快的氛围。所以，点个赞吧~
页:
[1]