編輯導(dǎo)語(yǔ)：出色的產(chǎn)品設(shè)計(jì)往往是吸引用戶(hù)注意力的好手段，其中，合理、有表現(xiàn)力的圖版率設(shè)計(jì)是吸引用戶(hù)目光的有效手段。本篇文章里，作者對(duì)圖版率概念進(jìn)行了分析，并總結(jié)了圖版率在設(shè)計(jì)中的應(yīng)用方式，一起來(lái)看一下。

如今的互聯(lián)網(wǎng)時(shí)代，幾乎所有產(chǎn)品都在想方設(shè)法得搶奪用戶(hù)的注意力，從各種吊足胃口的推送、到界面中吸引眼球的動(dòng)畫(huà)等等。

因?yàn)槲覀兩钪坏┇@取了用戶(hù)注意力，便讓產(chǎn)品有了機(jī)會(huì)去引發(fā)用戶(hù)后續(xù)的興趣、欲望和行為，完成最終的轉(zhuǎn)化，從而充實(shí)自己的錢(qián)袋子。

而今天所分享的圖版率的概念，便是吸引注意力的一把好手。只要熟悉并吃透這個(gè)概念，不僅能幫我們?cè)诒憩F(xiàn)層上更好地掌控用戶(hù)的注意力，而且能解決我們?cè)谝曈X(jué)表現(xiàn)上相當(dāng)多的疑惑~

一、什么是圖版率

圖版率的概念來(lái)自平面領(lǐng)域。日本視覺(jué)設(shè)計(jì)研究所在其編著的《七日掌握版面設(shè)計(jì)基礎(chǔ)》中，將圖版率定義為占據(jù)版面的圖片與文章的面積比例。

說(shuō)白了嘛，就是畫(huà)布上圖片占據(jù)的百分比。

比如新村則人為MUJI創(chuàng)作的「段ボール」和「四季の箱」海報(bào)，圖片占據(jù)了整個(gè)版面，它們的圖版率就是100%；

而當(dāng)畫(huà)面沒(méi)有任何圖片時(shí)，它的圖版率就是0。比如下面這些海報(bào)。

二、圖版率和表現(xiàn)力的關(guān)系

圖版率越高的版式，視覺(jué)表現(xiàn)力越高，越易吸引用戶(hù)的注意力。

可能一些朋友對(duì)表現(xiàn)力這個(gè)概念不是很清楚，這里再和大家嘮嘮～

視覺(jué)表現(xiàn)力啊，就是視覺(jué)元素的表現(xiàn)力。這可以類(lèi)比為一個(gè)舞臺(tái)上的演員，演員表現(xiàn)力越高，就越吸引觀眾的眼球。

同樣的，視覺(jué)表現(xiàn)力越高的設(shè)計(jì)，越容易吸引讀者的注意力。

而提升視覺(jué)表現(xiàn)力，最重要、最核心的方法之一就是，提升圖版率啦。

《七日掌握版面設(shè)計(jì)基礎(chǔ)》中曾提及一個(gè)調(diào)查研究，研究發(fā)現(xiàn)，讀者對(duì)畫(huà)面的好感度一般隨著圖版率的增加而提升。圖版率到50%左右時(shí)，好感度便急劇上升。

為什么會(huì)這樣呢？要深究這個(gè)問(wèn)題，還得從圖片本身的吸引力說(shuō)起。

三、為什么我們總是被圖片吸引

1984年至1994年之間，報(bào)紙中圖片的使用量就增加了足足142％。

相比密密麻麻的文字，人們總是傾向于被圖片所吸引，具體原因與這三方面相關(guān)。

1. 大腦生來(lái)擅長(zhǎng)圖片

人類(lèi)全身70%的感受器存在于眼部，而眼部處理視覺(jué)化信息平均用時(shí)不到0.1秒。

這主要與負(fù)責(zé)圖片處理的右腦擅長(zhǎng)自動(dòng)處理、快速記憶的牛批屬性相關(guān)，而這些統(tǒng)統(tǒng)是進(jìn)行文字信息處理時(shí)所用的左腦不具備的。

因此，相比于文字，大腦對(duì)圖片信息擁有與生俱來(lái)的Bug級(jí)處理能力，這讓大腦更擅長(zhǎng)處理圖片信息。

2. 圖片更易刺激大腦

相比純文字，圖片明顯更易刺激大腦，更容易調(diào)動(dòng)腦細(xì)胞的活躍。

拿公眾號(hào)的同一篇文章舉例，如果做選擇，沒(méi)有人會(huì)選擇閱讀一篇沒(méi)有任何配圖的文章，即便穿插給你講各種好玩的段子，大腦無(wú)法被有效刺激，也很容易視覺(jué)疲勞甚至昏昏欲睡。

（想起來(lái)之前失眠時(shí)就去讀通篇沒(méi)有圖片的書(shū)籍，確實(shí)有一定的效果- -）

3. 圖片更易傳遞情緒

有個(gè)微博的研究數(shù)據(jù)，提出有圖像的微博比沒(méi)有圖像的微博多出近150％的轉(zhuǎn)發(fā)。轉(zhuǎn)發(fā)意味著內(nèi)容消費(fèi)者被引發(fā)了情緒共鳴。一圖勝千言，加入圖片后所引起的情緒波瀾比我們想象的還要大。

比如我現(xiàn)在打出了”貓“這個(gè)字，你可能并不會(huì)有什么情緒波動(dòng)。

但是，加入一張可愛(ài)的圖片，效果是不是完全不一樣了呢？

四、圖版率在設(shè)計(jì)中的運(yùn)用

正是由于以上這三點(diǎn)內(nèi)在因素，才讓我們總是下意識(shí)地被圖片所吸引。

而圖版率越高，圖片占比越大。因此越容易制造吸引力，從設(shè)計(jì)的維度說(shuō)，它的視覺(jué)表現(xiàn)力也就越高。

1. 舉個(gè)?

下面分別是圖版率20%、50%、70%和100%的海報(bào)。它們的視覺(jué)表現(xiàn)力，對(duì)讀者的吸引力也就隨圖版率的提升而不斷放大。

圖版率的概念并非平面專(zhuān)享，它同樣可以延伸到app和網(wǎng)頁(yè)的UI設(shè)計(jì)上！

2. 再舉個(gè)UI上的?

當(dāng)你在淘寶搜索衣服、鞋子這類(lèi)外觀性產(chǎn)品時(shí)，由于這些產(chǎn)品的外觀是影響用戶(hù)點(diǎn)擊決策的重要因素，因此搜索結(jié)果會(huì)默認(rèn)以雙列大圖的布局呈現(xiàn)。其中一個(gè)重要目的就是通過(guò)提升圖版率加強(qiáng)商品表現(xiàn)力，吸引注意力、促進(jìn)用戶(hù)的點(diǎn)擊決策。

五、無(wú)圖情況該如何提升表現(xiàn)力

一個(gè)尷尬的事實(shí)是，頁(yè)面中承載圖片的場(chǎng)景在app和網(wǎng)頁(yè)的設(shè)計(jì)中并不常見(jiàn)。

更多時(shí)候我們所面對(duì)的是一堆密密麻麻的文字。這時(shí)該如何實(shí)現(xiàn)與提高圖版率類(lèi)似的效果？

其實(shí)要達(dá)到類(lèi)似效果，那就得，嘮嘮圖版率的本質(zhì)。

咳咳，要探究本質(zhì)，就得回歸到所有元素的初始形態(tài)——點(diǎn)、線、面上。

大家想下，圖片對(duì)應(yīng)了什么形態(tài)？

沒(méi)錯(cuò)，忽略掉圖片本身的內(nèi)容，所有圖片的形態(tài)都可以看做面。

比如下面這些海報(bào)的圖片，它們都是面形態(tài)。

而相比點(diǎn)、線的形態(tài)，面形態(tài)最明顯的一個(gè)特征之一就是，極具張力、富有高度的表現(xiàn)力。并且表現(xiàn)力跟隨面的尺寸的增大而不斷提升！

因此，高圖版率所帶來(lái)的表現(xiàn)力提升，一定程度上也與面形態(tài)的先天優(yōu)勢(shì)有重要關(guān)聯(lián)。

——關(guān)于面的具體特質(zhì)及運(yùn)用，在之前文章有過(guò)詳細(xì)的探索：「一套理論為你解決90%的困惑（下）」，有需要的同學(xué)可以往回翻下~

由此，在圖片不夠的情況下，想要達(dá)到與提升圖版率類(lèi)似的效果，即可通過(guò)在畫(huà)面中增加面的形態(tài)，來(lái)曲線救國(guó)~

下面，基于這個(gè)本質(zhì)來(lái)給大家介紹四個(gè)我常用的辦法。

1. 圖片不夠色塊湊

為頁(yè)面增加色塊，即可以通過(guò)面形態(tài)的張力，來(lái)迅速實(shí)現(xiàn)和提升圖版率一樣的效果。

這里的色塊可以是背景、也可以是某個(gè)形狀。

比如之前文章的這個(gè)封面案例，就是通過(guò)在畫(huà)面中加入圓形色塊來(lái)提升畫(huà)面的表現(xiàn)力。

再比如電商產(chǎn)品，在一些促銷(xiāo)、搶購(gòu)頁(yè)面中，經(jīng)常會(huì)在背景層上添加一層色塊（結(jié)構(gòu)上為氛圍層），目的就是為了提升頁(yè)面的表現(xiàn)力，強(qiáng)迫用戶(hù)將注意力全部聚焦到這里！管你買(mǎi)不買(mǎi)，先進(jìn)來(lái)再說(shuō)！

知乎會(huì)員入口和微信讀書(shū)的會(huì)員日抽獎(jiǎng)板塊，也加入了明顯的底色，同樣的目的，搶奪注意力，提升入口CTR點(diǎn)擊及內(nèi)頁(yè)的曝光。

2. 圖片不夠圖標(biāo)湊

圖標(biāo)在表意上能跨越文字和語(yǔ)言，可用來(lái)指代冗長(zhǎng)的文字，引到用戶(hù)迅速辨識(shí)和理解。而且形態(tài)上來(lái)說(shuō)屬于面形態(tài)，這兩種優(yōu)勢(shì)讓它能夠起到和圖片類(lèi)似的作用。

比如web著陸頁(yè)，會(huì)為產(chǎn)品的feature加入圖標(biāo)，提升表現(xiàn)力的同時(shí)，也可以迅速傳達(dá)含義。

從圖標(biāo)本身的形態(tài)上，面性圖標(biāo)得益面的優(yōu)勢(shì)，讓其表現(xiàn)力勝于線性圖標(biāo)。所以，底tab選中態(tài)、金剛區(qū)的icon基本都使用了面性icon的形式，目的就是為了提升表現(xiàn)力，繼而抓取注意，告知用戶(hù)當(dāng)前位置或者吸引用戶(hù)點(diǎn)擊。

3. 圖片不夠字重湊

每個(gè)字體都是由一個(gè)一個(gè)比劃構(gòu)成。字重較低時(shí)，這些比劃形似一條條線形態(tài)。

而當(dāng)我們?cè)黾幼煮w的字重后，即通過(guò)增加字體每個(gè)比劃的線寬，讓線趨向于面，從而提升文字本身的表現(xiàn)力。（比如ios11中讓人印象深刻的大標(biāo)題，便是增加筆畫(huà)的線寬來(lái)趨向于面以來(lái)營(yíng)造出這種感覺(jué)。）

比如知乎的會(huì)員卡片累計(jì)節(jié)省的數(shù)字、qq瀏覽器的卡片標(biāo)題，都通過(guò)增加字重的方式來(lái)提升表現(xiàn)力。

4. 圖片不夠英數(shù)湊

英文、數(shù)字存在的意義并非為了傳達(dá)信息，而是通過(guò)圖形化處理，讓原本線形態(tài)的單行標(biāo)題擴(kuò)增至面形態(tài)，來(lái)達(dá)到和提升圖版率類(lèi)似的效果。

比如我們的標(biāo)題包裝。一行普通的文字實(shí)在掀不起大風(fēng)大浪，索然無(wú)味。

這時(shí)候我們加入數(shù)字、加入對(duì)應(yīng)的英文，就可以大幅提升標(biāo)題的表現(xiàn)力。

比如我們想要對(duì)作品集的大標(biāo)題進(jìn)行包裝，就可以加入序號(hào)和英文翻譯來(lái)提升其表現(xiàn)力。可以結(jié)合鏤空、色塊、漸變、明度等一系列手段來(lái)實(shí)現(xiàn)不同的效果！

六、最后

讓我們做個(gè)小總結(jié)！

1. 大腦擅長(zhǎng)處理圖片、易受圖片刺激和情緒引導(dǎo)，所以圖片總是更吸引我們！
2. 圖片占據(jù)版面的比例越高，圖版率就越高，版面的表現(xiàn)力和吸引力越強(qiáng)！越抓注意力！
3. 沒(méi)有圖片時(shí)，我們可以通過(guò)色塊、圖標(biāo)、字重和英數(shù)的手段，去實(shí)現(xiàn)和提升圖版率類(lèi)似的效果！

最后的碎碎念

之前追《山河令》的時(shí)候，容炫這個(gè)綠葉角色倒是讓我印象頗深。印象深刻的點(diǎn)不在于他前期為追求秘籍屆的共享經(jīng)濟(jì)，用各種蜜汁操作讓后輩給他擦屁股，而在于他鼓勵(lì)江湖放下門(mén)派之見(jiàn)，集各門(mén)派武學(xué)之長(zhǎng)的思路。

然后我的腦洞又開(kāi)始了：設(shè)計(jì)中是不是也存在這樣的情況，集百家之長(zhǎng)來(lái)融會(huì)貫通、搭建自己的知識(shí)體系？

這次的文章借平面領(lǐng)域概念的福，第一次結(jié)合了平面和UI，估摸著也算是一次打破“門(mén)派之見(jiàn)”的嘗試吧。

但愿今日份好不容易憋出的長(zhǎng)文能幫到你。

我是Andrew，下期見(jiàn)。

#專(zhuān)欄作家#

Andrewchen；微信公眾號(hào)：轉(zhuǎn)行人的設(shè)計(jì)筆記，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。中科院碩士自學(xué)轉(zhuǎn)行，擅長(zhǎng)通過(guò)文字幫助年輕設(shè)計(jì)師成長(zhǎng)和提效。延遲滿(mǎn)足、長(zhǎng)期主義。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。