本文講述了版式設(shè)計(jì)中的三率一界的概念货矮。三率指的是版面率，圖版率和跳躍率斯够；而一界指的是視覺(jué)界限囚玫，簡(jiǎn)稱視界。
很久沒(méi)有動(dòng)筆更新文章了读规，之前寫過(guò)一篇《設(shè)計(jì)干貨：點(diǎn)抓督、線、面在版式設(shè)計(jì)中的作用》束亏，那么書(shū)接前文铃在，今天黑馬PM想和大家聊一聊版式設(shè)計(jì)中的三率一界的概念。相信絕大多數(shù)的朋友都沒(méi)有聽(tīng)說(shuō)過(guò)這個(gè)概念碍遍。三率指的是版面率定铜，圖版率和跳躍率；而一界指的是視覺(jué)界限怕敬，簡(jiǎn)稱視界揣炕。
版面是什么？
版面是指印刷好的頁(yè)張赖捌，包括圖文祝沸、余白整個(gè)部分。這個(gè)概念看下圖圖就很好理解了越庇。
上圖是一張書(shū)籍雜志的對(duì)頁(yè)文件demo罩锐，我們說(shuō)中間這片灰色的區(qū)域就是版面。也就是說(shuō)我們主要的設(shè)計(jì)內(nèi)容將要在版面中進(jìn)行排版設(shè)計(jì)卤唉。我們通常在排版軟件建立設(shè)計(jì)文件的時(shí)候先要規(guī)劃好版面的大小并畫出輔助線涩惑，因?yàn)榘婷婵梢约s束設(shè)計(jì)的內(nèi)容大小區(qū)域。
在版式設(shè)計(jì)中有天頭桑驱，地腳竭恬，訂口和切口的概念：
天頭，是指我們經(jīng)常說(shuō)的頁(yè)眉位置熬的。
地腳痊硕，是指我們經(jīng)常說(shuō)的頁(yè)腳位置。
訂口押框，是指靠近書(shū)脊側(cè)將要裝訂的一側(cè)岔绸。
切口，是指將來(lái)要被裁切的一側(cè)。也就是最外側(cè)一周盒揉。
這里需要特別注意的一個(gè)地方就是通常情況下晋被，天頭的部分要小于地腳的高度。
為什么呢刚盈？
因?yàn)榈啬_部分通常要設(shè)置頁(yè)碼羡洛，所以頁(yè)碼要占用一部分空間；而訂口和切口呢通撑菏可以設(shè)置成一樣寬度欲侮。
也有的書(shū)籍上認(rèn)為整個(gè)設(shè)計(jì)文件是一個(gè)版面，中間灰色的區(qū)域叫版心谴分，當(dāng)然也可以這么理解锈麸。其實(shí)無(wú)論是叫版面也好還是版心也好，其目的都是要規(guī)劃出設(shè)計(jì)信息的主視覺(jué)區(qū)域牺蹄。不光是印刷設(shè)計(jì)忘伞，網(wǎng)頁(yè)設(shè)計(jì)也有版面的概念。
一沙兰、版面率
版面大小在開(kāi)本中所占的比率叫版面率氓奈。版面率越小，頁(yè)面留白越大鼎天，給人的感覺(jué)是更高級(jí)雅致舀奶；版面率越大，頁(yè)面留白就相對(duì)越小斋射，版面給人呈現(xiàn)出的感覺(jué)是內(nèi)容很豐富熱鬧信息量大育勺。看下圖：
通常情況下罗岖，資訊類的雜志或者網(wǎng)站版面率都很大涧至。因?yàn)檫@種類型的產(chǎn)品本身要傳遞的信息量就很大，所以小版面是容納不下的桑包。比如超市的商品宣傳單等等（見(jiàn)上圖）南蓬。
而一些要求高品質(zhì)的產(chǎn)品，比如說(shuō)文摘類哑了，一些非常感性的產(chǎn)品（見(jiàn)上圖）赘方。就需要小版面，讓內(nèi)容更清新簡(jiǎn)約弱左，頁(yè)面大面積留白窄陡；讓主要信息內(nèi)聚之后看起來(lái)很精致高雅。
所以說(shuō)我們?cè)O(shè)計(jì)師在接到設(shè)計(jì)需求的時(shí)候通常先要給設(shè)計(jì)風(fēng)格定一個(gè)基調(diào)拆火。是更偏向?qū)嵱眯赃€是精神性跳夭，如果是實(shí)用性的設(shè)計(jì)那版面就可以大一些鳖悠，而精神性要求品質(zhì)的就可以將版面設(shè)置的小一些。這就開(kāi)始考驗(yàn)一個(gè)設(shè)計(jì)師對(duì)設(shè)計(jì)風(fēng)格的把控能力了优妙。
二、圖版率
圖版率從字面意思上我們也能大概猜出圖版率就是版面中所有圖片所占版面的比率叫圖版率憎账。
當(dāng)圖片尺寸及分辨率較小還想增加頁(yè)面圖版率可以通過(guò)重復(fù)及色塊來(lái)填充頁(yè)面套硼，見(jiàn)下圖：
上圖是一張汽車雜志內(nèi)頁(yè)的對(duì)頁(yè)文件。
首先我們說(shuō)這個(gè)頁(yè)面的圖版率已經(jīng)達(dá)到了100%胞皱，因?yàn)樗闹軟](méi)有留白邪意，是一整張滿地的超廣角圖片直接放在版面中。
這種大圖版率的圖片給人的感覺(jué)就是非常具有視覺(jué)沖擊力反砌，讓人第一印象就是視野很開(kāi)闊雾鬼；后面的背景建筑代表著靜態(tài)美，前面的寶馬車象征著動(dòng)態(tài)美宴树；這種一前一后一靜一動(dòng)的對(duì)比策菜，營(yíng)造出的視覺(jué)感受就是產(chǎn)品很大氣很高端。
我們?cè)賮?lái)看這張圖酒贬，這是一個(gè)居家產(chǎn)品的雜志內(nèi)頁(yè)又憨，圖版率也達(dá)到了100%，也是滿地的一張廚房一角的實(shí)景圖片锭吨。
通過(guò)運(yùn)用這張大圖版率的實(shí)景圖蠢莺，能夠給你一種仿佛你就靜靜的佇立在這面墻前面。一切景物都是靜態(tài)的零如，連一點(diǎn)風(fēng)都沒(méi)有躏将，給人一種寧?kù)o的美。讓你靜靜的思考著生活也許原本就應(yīng)該是這樣寧?kù)o安逸考蕾，不要太浮躁祸憋。
再配合這種質(zhì)樸的字體和少量的文字；垂直版面的圍裙和抹布讓整個(gè)畫面更加平衡辕翰，很有一種代入感夺衍。
這是一個(gè)家具的網(wǎng)站首頁(yè)。首先一開(kāi)屏喜命，就是一張圖版率100%的滿地圖沟沙。也很有視覺(jué)沖擊力和代入感，現(xiàn)在很多網(wǎng)站都這樣設(shè)計(jì)壁榕；因?yàn)橐郧拔覀兊碾娔X屏幕都很小矛紫，但是隨著屏幕越來(lái)越大，這種全屏的大圖越來(lái)越受設(shè)計(jì)師的青睞牌里。
這是一張手表的雜志內(nèi)頁(yè)颊咬，首頁(yè)我們來(lái)看這個(gè)頁(yè)面的圖版率大概有70%左右务甥，然后下面30%的留白，配上產(chǎn)品圖片和品牌LOGO喳篇。
這種大圖版率的圖片主要是向你講述一個(gè)故事敞临，my first love 我的初戀，然后男女主人公熱情相擁麸澜，仿佛是在傳達(dá)一段美好的愛(ài)情挺尿。
其實(shí)現(xiàn)在很多奢侈品你比如說(shuō)珠寶，手表炊邦，香包等等编矾，無(wú)論是電視廣告還是紙媒廣告，都采用這種大圖版率的有故事內(nèi)容的情境圖馁害。
產(chǎn)品本身在版面上占據(jù)的位置其實(shí)并不起眼窄俏，設(shè)計(jì)師主要是想通過(guò)一段故事讓你記住這個(gè)品牌，從而記住這個(gè)產(chǎn)品碘菜。
這張圖的圖版率是五五開(kāi)的凹蜈，顏色主要以黑白灰這種中性色搭配，讓頁(yè)面顯得很高雅忍啸。
有趣的是圖片中的人物仿佛是從墻后面探出身子來(lái)偷拍你踪区，人們都有一種心理就是有人在給你拍照的時(shí)候都會(huì)格外的注意。所以設(shè)計(jì)師也是通過(guò)人們的這種心理讓頁(yè)面抓住你的眼球吊骤。
這張圖的圖版率就更小了缎岗，估計(jì)也就10%吧。主要要宣傳的產(chǎn)品圖片位于版面的正中心白粉，我們可以抽象成是一個(gè)點(diǎn)传泊；讓視覺(jué)更加聚焦。
Less is more鸭巴，少即是多眷细，沒(méi)有太多的視覺(jué)干擾。
說(shuō)到這我想起郭德綱的一段相聲鹃祖。
郭德綱去一家公司面試溪椎，面試官說(shuō)：“讓我在1分鐘之內(nèi)記住你”! 郭德綱想了想，掄圓了胳膊給面試官一嘴巴之后扭頭就跑恬口；到家后接到公司電話：請(qǐng)你務(wù)必馬上到公司報(bào)道校读。
這段相聲其實(shí)就是在告訴我們簡(jiǎn)單粗暴的最能給人留下深刻的印象，版式設(shè)計(jì)也是如此祖能。
三歉秫、跳躍率
還有一種版式叫自由型版式，自由型版式會(huì)讓頁(yè)面看上去很跳躍养铸，很熱鬧雁芙！
要讓版面中所有的設(shè)計(jì)元素看上去很隨機(jī)但又條理清晰是很難的轧膘。看上去好像沒(méi)有什么規(guī)律兔甘，其實(shí)內(nèi)在的規(guī)律就隱藏其中。
所以說(shuō)自由型版式是最考驗(yàn)設(shè)計(jì)師對(duì)版面的把控能力的洞焙，沒(méi)有之一。
見(jiàn)下圖：
四、視界
什么是視界提岔？視是視力的視，不是大千世界的世碱蒙。
相傳在遠(yuǎn)古時(shí)代男人們負(fù)責(zé)外出打獵，通常會(huì)很專注的盯著獵物而忽視周圍的風(fēng)吹草動(dòng)哀墓；而女人們則負(fù)責(zé)四處尋找野果野菜喷兼，照顧亂跑的孩子。
所以經(jīng)過(guò)長(zhǎng)時(shí)間的進(jìn)化季惯，在視野上，女性會(huì)比男性更寬廣一些贾漏。
如上圖所示藕筋，人類眼睛上下的視野范圍是120度。而左右呢隐圾，是190度。最清楚的視野范圍是70度硕盹。30度就屬于非常專注的范圍了叨咖。
所以我們?cè)谶M(jìn)行書(shū)籍雜志排版的時(shí)候一定要注意行寬不能太寬啊胶，因?yàn)樘珜挄?huì)造成視覺(jué)串行，而且長(zhǎng)時(shí)間閱讀也很容易產(chǎn)生視覺(jué)疲勞焰坪。見(jiàn)下圖：
我們?cè)趯?shí)際設(shè)計(jì)工作中盡量避免這種排版形式聘惦，否則會(huì)讓讀者閱讀起來(lái)很疲憊。
以上是版式設(shè)計(jì)中的三率一界的概念及分析黔漂，希望正在從事設(shè)計(jì)或者想學(xué)設(shè)計(jì)的朋友對(duì)三率一界的概念有所了解。后續(xù)將繼續(xù)更新關(guān)于產(chǎn)品和設(shè)計(jì)的相關(guān)文章炬守，感謝您的支持！
更多關(guān)于版式設(shè)計(jì)精華請(qǐng)參閱：平面版式設(shè)計(jì)-黑馬帶你學(xué)設(shè)計(jì)
