2018-5-28 資深UI設(shè)計(jì)者
我們都知道一個(gè)版面中必定有版心的概念。何為版心呢？版心就是除去天頭、地腳和左右頁(yè)邊距余下的區(qū)域，也是我們頁(yè)面內(nèi)容的擺放空間。下圖中灰色塊的區(qū)域就是此頁(yè)面的版心。
知道了版心，那么何為版面率呢？版面率就是版心所占頁(yè)面的比例，通俗一點(diǎn)講就是版面的利用率。
上面左圖中版心的面積非常大，四周的余白少，版面的利用率高，所以版面率就高。右圖版心面積小，版面利用率比左圖低，所以版面率就低一些。
版面中也有滿版與空版的概念。如上圖，滿版就是沒(méi)有天頭地腳與左右頁(yè)邊距的，此時(shí)版心即整個(gè)版面，版面利用率為100%?？瞻婢褪前婷胬寐蕿?%的。從滿版到空版之間的版面率是遞減的關(guān)系。
說(shuō)完版面率的概念我們?cè)賮?lái)說(shuō)一說(shuō)版面率對(duì)畫面氣質(zhì)的影響。
一般來(lái)說(shuō)版面率越高，視覺(jué)張力就越大，版面也會(huì)更活潑與熱鬧；反之，版面率越小，給人感覺(jué)就越典雅與寧?kù)o，版面也會(huì)更有格調(diào)。
上圖中高版面率的海報(bào)相對(duì)于低版面率的更熱鬧與活潑；低版面率的則更典雅。
畫冊(cè)中也是一樣的，上圖是我早些年做的一個(gè)案例。同樣的內(nèi)容跟圖片，只是版面的利用率不同，我們可以發(fā)現(xiàn)右邊低版面率的作品更安靜和典雅。
版面率的高低能夠影響版面的氣質(zhì)，所以我們實(shí)際工作中也要根據(jù)項(xiàng)目的氣質(zhì)分配合適的版面率。比方說(shuō)典雅氣質(zhì)的項(xiàng)目我們就要用低版面率版面，如果用高版面率顯然是與項(xiàng)目本身的氣質(zhì)相悖的。
說(shuō)完版面率我們?cè)賮?lái)說(shuō)一下留白，留白的概念大家都懂。而這里所說(shuō)的留白更多的是指頁(yè)面的負(fù)空間。
頁(yè)面中去除內(nèi)容后的空間就是負(fù)空間，如下面這個(gè)頁(yè)面。
圖中灰色塊代表圖和文字信息等內(nèi)容，除去這些圖片和文字后，頁(yè)面中的其他空間都可以看作是負(fù)空間，也就是留白。當(dāng)然，留白并不一定是白色，所有除去頁(yè)面內(nèi)容后的空間都是負(fù)空間，如上圖右側(cè)案例，黑色部分即此頁(yè)面的留白。
負(fù)空間的多少即是留白的多少。留白的多少我們可以用留白率來(lái)表示，如上圖，負(fù)空間小的留白肯定少，留白率就低。負(fù)空間大的的留白肯定多，留白率就高。
留白率就是版面留白的多少，實(shí)際上與版面率的概念差不多，如下。
空版留白最多，滿版留白最少。當(dāng)然這也不是絕對(duì)的，有的作品中雖然是滿版，但空間廣闊，比如天空什么的，都可以當(dāng)作留白來(lái)看待。
上面說(shuō)來(lái)留白率跟版面率也有一定的關(guān)聯(lián)，所以他們對(duì)畫面氣質(zhì)的影響也是如出一轍的。我們可以先來(lái)看一下低留白率與高留白率的幾個(gè)作品。
通過(guò)這幾個(gè)作品我們可以看出留白少的信息更豐富，版面更有活力，也更熱鬧，親和力也更強(qiáng)。而留白多的更雅致，更安靜典雅，更有格調(diào)跟品質(zhì)感，但親和力稍弱。
下面進(jìn)行案例演示吧，首先看一看文案。
這一步我們需要把文案的層級(jí)關(guān)系拉開(kāi)，大中小區(qū)分的明顯一點(diǎn)。這個(gè)文案的層級(jí)關(guān)系肯定是 欲望の森林 ＞ 英文 ＞ 欲望是無(wú)盡的森林 ＞ 小文字信息的。
首先我們做一個(gè)有張力的版面，那么我們可以想一想什么樣的版面是有張力的呢？
首先版面率要大，其次留白要小，讓版面中的信息緊湊一點(diǎn)。
上圖就是對(duì)版面的布局，可以看到圖片是出血版的，沒(méi)留天頭與左右頁(yè)邊距。這樣做的目的也是使版面率更大。
布局做好之后我們把圖片與編排好的文字放置上去就可以了，如下。
上圖可以看到留白比較少，符合留白率低的理論，雖然具備張力，但不是很明顯。這種情況下我們可以改變一下底色使之感覺(jué)留白率更低，如下。
做完了留白少版面率高的，我們?cè)賮?lái)做一個(gè)典雅一點(diǎn)的。
根據(jù)本篇文章的內(nèi)容思考一下什么典雅與安靜的的排版版面率與留白率分別是什么樣的？
一定是低版面率和較多留白的版面更能體現(xiàn)典雅與安靜感。所以我們?cè)诎婷姘才派弦蛊淞舭赘啵瑫r(shí)版面率要小一點(diǎn)。下圖就是一個(gè)基本布局。
最后我們?cè)俑鶕?jù)版面布局置入圖片微調(diào)一下就可以了，如下。
版面率跟留白率都能夠影響版面的氣質(zhì)，我們做項(xiàng)目的時(shí)候具體問(wèn)題具體分析，根據(jù)項(xiàng)目氣質(zhì)去設(shè)定版面率跟留白率的大小。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com