“版式設計”的英文是“Layout”，有“規劃”和“區域劃分”的含義。

版式設計是指設計師根據設計主題和視覺需求，在設定好的版面内遵循形式美法則，将文字、圖形和色彩等設計元素有組織、有目的地排列組合起來。

優秀的版式設計能給人帶來視覺上的美感和精神上的愉悅，而粗劣的版式設計則不符合美學規律，甚至毫無美感可言。将感性的設計進行理性的歸納和表達，有助于設計師在實際工作中設計出更優秀的作品。

今天數藝君給大家分享的是，版式設計中最重要的概念“三率一例”。“三率”是指版面率、圖版率和跳躍率，“一例”是指黃金比例。

在具體介紹和分析“三率一例”這一概念之前，先來介紹什麼是版面。

版面是指在頁面中主要呈現圖文信息的區域。

在印刷設計中，大家可以将版面理解為去除天頭、地腳、切口和訂口後的中間區域。在版式設計中，版面的地位非常重要，因為無論大家設計哪一類作品都需要先規劃好版面的大小。

版式設計是在有限的版面内進行有目的、有規劃的設計，使版面内的圖文信息編排得更加科學、合理，并符合美學規律，這也是版式設計的基本前提。

天頭：頁面中頂部頁眉留白區域。

地腳：頁面中底部頁腳留白區域。通常将頁碼和腳注設置在地腳區域。

訂口：頁面靠近書脊将要裝訂的留白區域。

切口：頁面最外側将來要被裁切的留白區域。

在網頁設計中，版面可以理解為網頁的主視覺區域。一般網站主視覺區域的寬度範圍為1000px~1200px，而垂直方向上的内容可以是無限長的，因此不限制網站界面的高度。

在設計網站界面時，隻需要将圖文信息排布在主視覺區域内，而超出主視覺區域的信息則不易被人重視。

版面率

版面在開本中所占的比例叫作版面率。版面率越小，頁面留白越大，這樣會令人感到高級、雅緻；

版面率越大，頁面留白越小，給人的感覺是内容豐富、信息量大。

增大版面率可以讓版面更實用一般資訊類、工具類、産品宣傳類和購物網站的版面率比較大，因為這些類型的版面設計要傳遞很多信息，如果版面太小則不能容納較多的圖文信息。

這裡需要強調，版面所承載的信息量與版面率沒有絕對關系，大版面率的版面所承載的信息可能是一張滿底的圖片和少量的文字，而小版面率的版面所承載的信息可能是很多圖片和文字。

在這個購物網站的産品界面中，其版面率幾乎達到100%。與印刷刊物相比，網站的界面展示受到多種因素的限制，因此每一個像素都很珍貴。一般電商類網站會充分利用版面， 以傳遞更多的商品信息。

減小版面率可以讓版面更精緻

高品質刊物一般采用小版面率，将主要信息内聚，并且頁面中有大面積的留白，使整個頁面看起來清新、簡約、高雅和精緻。

雖然前面講到版面率與信息量沒有絕對關系，但通常小版面率的版面可展示的信息較少，這避免了信息過度擁擠，不會破壞版面的設計風格和定位。

這是一張雜志内文頁面，通過大面積的留白和簡短的文字降低版面率，從而在視覺上營造出一種簡約、高雅的效果。

版面率是否合理，可直接考驗設計師對刊物内容的理解是否到位，以及把控設計風格的能力是否夠強。

在實際工作中，設計師接到設計需求後，通常先對設計風格進行明确定位，确定設計風格是實用性的還是藝術性的。一般實用性的版面可以采用較大的版面率，而藝術性的版面可以采用較小的版面率。

圖版率

在版面中，圖片所占版面的比例叫作圖版率。

圖片數量越多，圖片尺寸越大，圖版率越大；圖片數量越少，圖片尺寸越小，圖版率越小。圖版率大的版面令人感到豐富、熱鬧，圖版率小的版面則令人感到低調、沉穩。

提高圖版率可以增加版面的可視性和跳躍率，但一味增加圖版率就會忽視文字的作用，使版面顯得空洞、乏味。總之，設計師應該根據版面的風格定位來靈活調整圖版率。

版面左側直接使用一張滿底圖，其圖版率為100%，而版面右側是裁剪後的圖片，其圖版率為30%。将左右兩側的圖版率進行對比，形成視覺差異，使版面張弛有度，具有視覺張力。

這是一張食品宣傳海報。版面采用标準的滿版型構圖，沒有留白，其圖版率達到了100%。通過大面積紅色激發人們的食欲，同時紅色是極具穿透力的顔色，識别度較高，容易吸引人們的視線。

這張海報的圖版率約為50%，将圖片和文字進行組合設計，圖片能夠向外界傳達情感和故事，文字能夠對主題進行輔助說明。在日常生活中，這類圖文結合的海報設計非常多。

這張藝術海報的圖版率約為20%，重要的藝術圖案位于版面右上方的黃金分割處，使人們的視線能夠聚焦。另外，版面中沒有過多的文字幹擾視線，起到了“Less is more（少即是多）”的效果，給人留下深刻的視覺印象。

這個文摘類雜志頁面沒有運用任何圖形或圖片，因此圖版率為0%。整個版面顯得非常單調、乏味，長時間閱讀容易給讀者造成視覺疲勞和厭倦感。

觀察上面4 張圖例可以發現，在版面中圖片所占的比例直接影響版面的設計風格。在實際工作中，要根據版面的基調和定位靈活調整圖片的數量和大小，使版面在視覺上富有變化。

通過墊色處理增大圖版率

在實際設計工作中，有時會遇到圖片素材數量有限，但又必須提高圖版率的情況。這時可以增加色塊或給圖文信息進行墊色，使版面更加具有層次感。

這是一個産品雜志頁面。在版面中，通過墊色增大圖版率，不同的色塊構成了大小不同的塊面，這些塊面既能分割版面和劃分區域，又能豐富版面，使版面輕松、活潑，并且更加年輕化。

通過重複圖片素材增大圖版率

在實際工作中，經常會遇到素材尺寸小和畫質低的情況。這時可以用重複圖像的方法來解決。這種重複變化不僅可以增大圖版率，使版面看上去更加靈活、富有節奏和韻律變化，還可以使版面不再空洞、呆闆。

在這張産品宣傳海報中，設計師将不同大小和質感的圓進行随機分布，從而增大圖版率，使版面更加豐富、飽滿，具有時尚的藝術氣息。

跳躍率

跳躍率是指版面中的設計元素通過大小和位置變化在視覺上營造出的一種對比關系。跳躍率大的版面令人感到生動、活潑，并且富有節奏感和韻律感；而跳躍率小的版面則令人感到沉穩、甯靜和高雅。

在實際工作中，跳躍率應該根據版面的設計風格和定位進行靈活調整，以營造出更好的視覺效果。在版式設計中，跳躍率主要分為文字跳躍率和圖片跳躍率。接下來根據影響版面跳躍率的3個主要因素，綜合介紹文字和圖片的跳躍率。

第1個因素——大小對比形成跳躍感

在設計版面時，調節文字或圖片的大小可以增大或減小跳躍率。

跳躍率大的版面，文字有明顯的大小、粗細和角度變化，整個版面看起來更加豐富、活潑，并且親和力更強；

跳躍率小的版面，文字基本上大小相同，并按照一定的次序分欄排列，整個版面顯得安靜、典雅，令人感到穩重，但又略顯呆闆。

在這個以文字為主的版面中，文字跳躍率較大。設計師刻意将标題文字加大、加粗，并将角度進行傾斜變化，從而與正文文字形成鮮明的對比。

在這個以文字為主的版面中，文字的跳躍率較小。雖然标題文字的字号和正文文字有大小變化，但差異不明顯，版面整體看上去略顯呆闆，視覺表現力不強，難以激發讀者的閱讀興趣。

上面隻說到文字對跳躍率的影響。實際上，圖片對版面跳躍率的影響也很大，甚至在某種情況下比文字對跳躍率的影響更大。總之，可以通過調整圖片的大小、位置和方向改變版面的跳躍率。

在這張招貼中，設計師将圖片的大小、位置和方向進行調整，形成強烈的視覺對比，令人感到設計理念大膽、前衛。

這是一張建築宣傳海報，版面以滿版型為主。設計師将版面劃分成若幹個方格，并作為填充背景。在視覺上，圖片沒有主次之分，這使版面的跳躍率大大減小，從而給人帶來一種平穩、安定的心理感受。

第2個因素——位置對比形成跳躍感

在版面設計中，調整圖片或文字的位置可以使版面具有跳躍感。例如，調整設計元素的遠近、疏密和方向。總之，靈活調整設計元素的位置，可以使版面更具有活力，并提高了版面的閱讀趣味性。

這是一個汽車配件宣傳冊内頁。設計師将部分圖片素材進行去底處理，并将圖片的位置、大小和方向進行調整，使其具有跳躍感。另外，成組的文字通過前後、遠近和疏密處理，使版面具有層次感。

在這張雜志頁面中，圖片的跳躍率較小。圖片大小相同并進行規則排列，圖片在版面中的跳躍率幾乎為零，這使版面看上去與圖中的自然環境一樣安穩、平靜。

第3個因素——顔色對比形成跳躍感

在版式設計中，顔色與圖片、文字共同構成了版面的主視覺元素。不同的色彩被人們賦予了不同的情感，例如，紅色象征着熱情、恐懼，綠色象征着生命、和平，藍色象征着純潔、科技等。

顔色對版面的跳躍率有很大的影響，大家可以通過對不同色相、明度和純度的顔色進行搭配，使版面看起來生動、活潑或沉穩、高雅。

這是一個時尚購物網站的首頁，通過顔色對比形成很強的跳躍感。設計師運用大面積的留白、随機的色塊造型和撞色，增大界面跳躍率，彰顯年輕時尚的設計風格。

這是一個建築材料招貼設計，版面的整體色調以灰色為主，跳躍率幾乎為零，在視覺上顯得沉穩、高雅。

黃金比例

黃金比例這一概念源自畢達哥拉斯學派。黃金比例具有比例性、藝術性和和諧性三大特點。

黃金比例蘊藏着豐富的美學，也是一種古老的數學方法。黃金比例揭示了自然界中的一種美學規律，在藝術和設計中也非常受人青睐，大家可以在大量的藝術作品中找到黃金比例的身影。

下圖AC線段與AB線段的比值等于CB線段與AC線段的比值，比例約為0.618∶1或1∶1.618，這一比例被稱為黃金比例。黃金矩形的長寬之比為黃金分割率，一個黃金矩形可以無限生成等比例的黃金矩形。

這是一家馬戲團的官方網站首頁。3個男人連成的豎線在整個版面的黃金分割線上，使整個版面非常協調。

在這張音樂海報中，最突出的設計元素是漸變圓環。漸變圓環是版面的視覺重心，在黃金分割點處，再通過黑色背景的烘托，使版面更加醒目，可充分表達出音樂能夠帶給人們豐富的視覺享受。

九宮格是黃金比例的經典體現。我國古代有九宮格構圖法，主要用于皇家園林布局。九宮格構圖也叫井字格構圖，運用橫向的兩條線和豎向的兩條線将版面平均分成9塊，4條線相互交叉的4個點就是版面的黃金比例分割點。

在國外的攝影理論中，這4個黃金比例分割點也作“趣味重心”，因為在這4個黃金分割點上排布設計元素會使版面更加優美。

這是一張燈具招貼，采用了标準九宮格構圖，使版面看起來井然有序，猶如陳列于商場的櫥窗中，設計元素彼此獨立又互不影響。

這是一個旅遊雜志内頁，版面構圖采用了标準的九宮格構圖。在視覺上，格與格之間沒有大小、主次之分，因此使用序号引導閱讀順序。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!