本文講述了版式設計中的三率一界的概念。三率指的是版面率，圖版率和跳躍率；而一界指的是視覺界限，簡稱視界。

很久沒有動筆更新文章了，之前寫過一篇《設計干貨：點、線、面在版式設計中的作用》，那么書接前文，今天黑馬PM想和大家聊一聊版式設計中的三率一界的概念。相信絕大多數的朋友都沒有聽說過這個概念。三率指的是版面率，圖版率和跳躍率；而一界指的是視覺界限，簡稱視界。

版面是什么？

版面是指印刷好的頁張，包括圖文、余白整個部分。這個概念看下圖圖就很好理解了。

上圖是一張書籍雜志的對頁文件demo，我們說中間這片灰色的區域就是版面。也就是說我們主要的設計內容將要在版面中進行排版設計。我們通常在排版軟件建立設計文件的時候先要規劃好版面的大小并畫出輔助線，因為版面可以約束設計的內容大小區域。

在版式設計中有天頭，地腳，訂口和切口的概念：

• 天頭，是指我們經常說的頁眉位置。
• 地腳，是指我們經常說的頁腳位置。
• 訂口，是指靠近書脊側將要裝訂的一側。
• 切口，是指將來要被裁切的一側。也就是最外側一周。

這里需要特別注意的一個地方就是通常情況下，天頭的部分要小于地腳的高度。

為什么呢？

因為地腳部分通常要設置頁碼，所以頁碼要占用一部分空間；而訂口和切口呢通?？梢栽O置成一樣寬度。

也有的書籍上認為整個設計文件是一個版面，中間灰色的區域叫版心，當然也可以這么理解。其實無論是叫版面也好還是版心也好，其目的都是要規劃出設計信息的主視覺區域。不光是印刷設計，網頁設計也有版面的概念。

一、版面率

版面大小在開本中所占的比率叫版面率。版面率越小，頁面留白越大，給人的感覺是更高級雅致；版面率越大，頁面留白就相對越小，版面給人呈現出的感覺是內容很豐富熱鬧信息量大?？聪聢D：

通常情況下，資訊類的雜志或者網站版面率都很大。因為這種類型的產品本身要傳遞的信息量就很大，所以小版面是容納不下的。比如超市的商品宣傳單等等（見上圖）。

而一些要求高品質的產品，比如說文摘類，一些非常感性的產品（見上圖）。就需要小版面，讓內容更清新簡約，頁面大面積留白；讓主要信息內聚之后看起來很精致高雅。

所以說我們設計師在接到設計需求的時候通常先要給設計風格定一個基調。是更偏向實用性還是精神性，如果是實用性的設計那版面就可以大一些，而精神性要求品質的就可以將版面設置的小一些。這就開始考驗一個設計師對設計風格的把控能力了。

二、圖版率

圖版率從字面意思上我們也能大概猜出圖版率就是版面中所有圖片所占版面的比率叫圖版率。

當圖片尺寸及分辨率較小還想增加頁面圖版率可以通過重復及色塊來填充頁面，見下圖：

上圖是一張汽車雜志內頁的對頁文件。

首先我們說這個頁面的圖版率已經達到了100%，因為四周沒有留白，是一整張滿地的超廣角圖片直接放在版面中。

這種大圖版率的圖片給人的感覺就是非常具有視覺沖擊力，讓人第一印象就是視野很開闊；后面的背景建筑代表著靜態美，前面的寶馬車象征著動態美；這種一前一后一靜一動的對比，營造出的視覺感受就是產品很大氣很高端。

我們再來看這張圖，這是一個居家產品的雜志內頁，圖版率也達到了100%，也是滿地的一張廚房一角的實景圖片。

通過運用這張大圖版率的實景圖，能夠給你一種仿佛你就靜靜的佇立在這面墻前面。一切景物都是靜態的，連一點風都沒有，給人一種寧靜的美。讓你靜靜的思考著生活也許原本就應該是這樣寧靜安逸，不要太浮躁。

再配合這種質樸的字體和少量的文字；垂直版面的圍裙和抹布讓整個畫面更加平衡，很有一種代入感。

這是一個家具的網站首頁。首先一開屏，就是一張圖版率100%的滿地圖。也很有視覺沖擊力和代入感，現在很多網站都這樣設計；因為以前我們的電腦屏幕都很小，但是隨著屏幕越來越大，這種全屏的大圖越來越受設計師的青睞。

這是一張手表的雜志內頁，首頁我們來看這個頁面的圖版率大概有70%左右，然后下面30%的留白，配上產品圖片和品牌LOGO。

這種大圖版率的圖片主要是向你講述一個故事，my first love 我的初戀，然后男女主人公熱情相擁，仿佛是在傳達一段美好的愛情。

其實現在很多奢侈品你比如說珠寶，手表，香包等等，無論是電視廣告還是紙媒廣告，都采用這種大圖版率的有故事內容的情境圖。

產品本身在版面上占據的位置其實并不起眼，設計師主要是想通過一段故事讓你記住這個品牌，從而記住這個產品。

這張圖的圖版率是五五開的，顏色主要以黑白灰這種中性色搭配，讓頁面顯得很高雅。

有趣的是圖片中的人物仿佛是從墻后面探出身子來偷拍你，人們都有一種心理就是有人在給你拍照的時候都會格外的注意。所以設計師也是通過人們的這種心理讓頁面抓住你的眼球。

這張圖的圖版率就更小了，估計也就10%吧。主要要宣傳的產品圖片位于版面的正中心，我們可以抽象成是一個點；讓視覺更加聚焦。

Less is more，少即是多，沒有太多的視覺干擾。

說到這我想起郭德綱的一段相聲。

郭德綱去一家公司面試，面試官說：“讓我在1分鐘之內記住你”! 郭德綱想了想，掄圓了胳膊給面試官一嘴巴之后扭頭就跑；到家后接到公司電話：請你務必馬上到公司報道。

這段相聲其實就是在告訴我們簡單粗暴的最能給人留下深刻的印象，版式設計也是如此。

三、跳躍率

還有一種版式叫自由型版式，自由型版式會讓頁面看上去很跳躍，很熱鬧！

要讓版面中所有的設計元素看上去很隨機但又條理清晰是很難的?？瓷先ズ孟駴]有什么規律，其實內在的規律就隱藏其中。

所以說自由型版式是最考驗設計師對版面的把控能力的，沒有之一。

見下圖：

四、視界

什么是視界？視是視力的視，不是大千世界的世。

相傳在遠古時代男人們負責外出打獵，通常會很專注的盯著獵物而忽視周圍的風吹草動；而女人們則負責四處尋找野果野菜，照顧亂跑的孩子。

所以經過長時間的進化，在視野上，女性會比男性更寬廣一些。

如上圖所示，人類眼睛上下的視野范圍是120度。而左右呢，是190度。最清楚的視野范圍是70度。30度就屬于非常專注的范圍了。

所以我們在進行書籍雜志排版的時候一定要注意行寬不能太寬，因為太寬會造成視覺串行，而且長時間閱讀也很容易產生視覺疲勞。見下圖：

我們在實際設計工作中盡量避免這種排版形式，否則會讓讀者閱讀起來很疲憊。

以上是版式設計中的三率一界的概念及分析，希望正在從事設計或者想學設計的朋友對三率一界的概念有所了解。后續將繼續更新關于產品和設計的相關文章，感謝您的支持！

#專欄作家#

黑馬PM，公眾號：黑馬UI，人人都是產品經理專欄作家。從事產品設計9年，先后擔任國內多家上市企業的產品視覺總監，曾在外企擔任主案產品設計師，并獨立負責美洲、歐洲和亞洲等地區的產品設計工作。對產品設計領域有較強的項目實戰指導能力和項目管理能力。

本文原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議