寫給新手的版式設計基礎指南（四）：圖片跳躍率

上回，咱說完了文字跳躍率，今個兒，咱就來說道說道圖片跳躍率。

說道之前，咱照例還是先來看倆問題。

下面倆版式，哪個給人更安靜、更精致的感覺？

那必須是「小家碧玉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畫冊，左邊的全身照，和右邊的人物特寫，都屬于強表現力。

但人物特寫因為更聚焦，表現力要比空曠的全身照強不少。

現在如果把兩個圖的位置調換一下會發生什么？

臥槽，整個版面給人的沖擊力竟然更大了！

這兩個版面，圖片跳躍率、內容和版面完全一樣，只是大圖的表現力不同。

用表現力更高的大圖，會給人產生更強的視覺刺激，空間感會更強！

而原先的大圖表現力小，視覺刺激就會小，就顯得安靜一些~

這也再一次說明了增加跳躍率，要考慮好用圖。

是讓版面更寧靜呢，還是讓他更放肆呢？

生殺大權在眾愛卿手里~所以所以，跳躍率大法好，圖片、文字要跳好，精致感咱就跳低一點，親和力強咱就跳高一點，也莫忘記圖版率、表現力。

以上~

往期回顧：

歡迎關注作者的微信公眾號：「大貓設計」