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