版式設計是平面設計的一部分，是視覺傳達設計的重要環節。版式設計可以通過合理的空間視覺元素最大限度地發揮表現力，從而增強對版面主題的表達。讓我們來學習一下版式設計的基礎吧~

一、Concept / 什么是版式設計

版式設計又稱編排設計，是平面設計的一個組成部分，是視覺傳達設計的重要環節。版式設計通過調動各類視覺元素進行形式上的排列組合，突出版式上新穎的創意和個性化的表現，強化形式和內容的互動關系，以期產生全新的視覺效果。

簡而言之，即是指設計人員根據設計主題和視覺需求，在預先設定的有限版面內，運用造型要素和形式原則，根據特定主題與內容的需要， 將文字、圖片（圖形）及色彩等視覺傳達信息要素，進行有組織、有目的的組合排列的設計行為與過程。

二、Meaning / 為什么要版式設計

將版面上所需要的設計元素進行必要的編排組合，使之成為直觀動人、簡明易讀、主次分明、概念清楚的美的構成，使其在傳達信息的同時，也傳達設計者的藝術追求和文化理念，從而給讀者提供一個優美的閱讀“空間”。

版式設計可以通過合理的空間視覺元素最大限度地發揮表現力，從而增強對版面主題的表達，并以版面特有的藝術感染力來吸引讀者的目光。

三、Principle / 版式設計基本原則

1. 基本原則有什么

版式設計的 4 大原則是對比、對齊、分組和重復的實際運用。版式設計遵循4大原則的目的是為了讓界面看起來更加整潔、美觀，提高用戶體驗，遵循這四個原則可以幫助用戶理解和接受信息。

由美國設計師 Robin Wulliams（羅賓·威廉姆斯）在《寫給大家看的設計書》中首次提出，準確講這 4條 原則更側重排版設計，可以說幾乎所有排版中，都要用到該原則，它是排版“心法”，更是需要遵循的基礎準則，并且 4 條原則都不是孤立存在，通常會結合使用，很少有作品只用其中某條原則。

2. 對比原則

對比所指的基本思想是，要避免版式頁面上的應用元素太過相似。若元素（顏色、字體、形狀、大小、空間、線寬等）不相同，那么就直接讓它們完全不同。

想讓頁面引人注意，對比原則通常是重要的一個表現方法，對比原則最能引起閱讀者的注意力。在的海報中，常通過方向、顏色、大小、位置等對比方式，突出內容重點，有效傳遞關鍵信息，也讓版式更有變化，不至于平淡乏味。

vivo錢包會員中，頭部會員權益介紹卡片，通過對比的方式，拉開了“vip會員”與“超級會員”的等級差異。vivo權益頁中，則通過顏色的對比，對同頁面中不同平臺的權益券作了區分展示，提高了清晰度與識別性。

3. 對齊原則

任何頁面設計內容都不是在頁面上任意擺放的。每個頁面上的元素都應當和版面上的某一個元素相對應，有某種視覺上的相互聯系。這樣做可以表現出一種視覺清晰、邏輯嚴謹的外觀。不管什么樣的環境，只要有各種各樣的事物存在，它就需要一個秩序，人類的環境如此，設計元素的環境照樣如此。左下圖設計元素參差不齊，畫面顯得雜亂無章，沒有美感，影響閱讀；而右下圖運用合理的對齊可以帶來秩序感，看起來更加嚴謹、專業，信息傳達效果更好。

對齊方式

文字編排常用的對齊方式有：左對齊、兩端對齊末行左對齊、右對齊、居中對齊、兩端對齊、頂對齊和底對齊等。在進行設計時要根據構圖形式選擇合理的對齊方式，每種對齊形式所傳達的視覺感受也不一樣。

錢包頁面設計的過程中，嚴格遵守對齊原則，通過左對齊，居中對齊，兩端對齊等對齊方式，使得頁面整體統一，簡潔且便于閱讀。

像素對齊和視覺對齊

在UI設計中，說到對齊，就不得聊下“像素對齊與視覺對齊”。在實際工作中，往往會遇到明明顏色遵守規范，將頁面的相關元素對齊了，可是看著就是不舒服的時候。我們先用以下例子解釋下“像素對齊與視覺對齊”有什么不同呢？

有的時候，有一些元素由于形狀的因素會導致我們視覺重心的偏移，因此需要照顧視覺對齊。說得很對，但我們需要找一個有理有據的解釋。人的眼睛很神奇，喜歡找平衡。比如看到黑色或者白色的屏幕，比起看灰色的，壓力要大?；疑C合了黑色和白色，不刺眼。那…什么是平衡？這里我們要引入一個概念“體量級”，我們需要體量級平衡。那如何理解體量級？我們換個思維來理解，叫“面積”。再舉個例子，觀察一下：

這兩對圖形，哪一對看起來體量級平衡一點？明顯是左邊的，是不是？這是因為當兩個圖形的面積上看起來相等，我們稱之為視覺平衡，因為體量級（面積）平衡。

有時候不能簡單的使用像素對齊來處理設計中的對齊問題，應根據實際情況，有時候也要相信自己的視覺感受，做到規范與視覺感知的平衡，為用戶呈現最佳的設計效果。

錢包app中，也有類似的圖標，單純像素對齊，會使得視覺上看著并沒有真實的居中，還是需要視覺對齊才能使得圖標看上去是整體居中。

4. 分組原則（接近效果）

要制作出向人們明確傳達信息的設計，要在整理信息的基礎上，把相同群組的信息湊近進行排版。

要素之間的距離–格式塔原理

人類在無意識之中，會把同樣形狀物品或形狀接近的物品作為一個“整體”來認識，這種現象被稱作“格式塔”（Gestalt）原理。這是對大多數人都奏效且非?；镜脑碇?。在設計制作中熟練掌握這個原理，可以把信息迅速且準確地傳達給第三者。具體的方法就是，只要把一個要素、類似要素靠近放置，把關聯性低的要素分開放置，就可以達到這種效果。另外， 如果需要把一個要素從整體中突出，就可以將它放在遠離整體的地方，效果就會更明顯。根據不同信息的內容，可以進行群組化（接近），也可以進行獨立化（分離）。在設計中進行明確的分組，會產生整體感，人們就可以更直觀地理解內容。反過來，如果沒有分組，就很難準確傳達信息。

“格式塔”原理的主要法則有：接近法則、連續法則、相似法則、封閉法則、主體-背景法則、熟悉法則、知覺恒常法則 (包括明度/顏色/大小/形狀的恒常)、共同命運法則。在版式設計中，對要素進行分組，就主要可以使用其中的接近、相似、封閉法則。

1、接近性法則

物體之間相對距離會影響我們感知它們是否以及如何組織在一起。相互靠近的物體看起來屬于一組，而那些距離較遠的就不是。利用這個原則，調整距離或者用分割線等來分開不同設計模式的構建。會使設計界面層次有序，視覺清晰，減少視覺噪音。

相互關聯的控件和內容之間距離越近，用戶越能感知它們的相關性。反之，如果距離太遠，用戶很難感知到它們是相關的，產品在體驗上就更加難用。

屬性相同、場景相似的信息應該放在一起，降低閱讀成本，提高用戶感知效率；不相關的信息盡量區分開，不要放在一起模糊不清引起不必要的誤解。

2、相似法則

有共同視覺元素的物體看起來更有關聯性。我們傾向于將看起來相似的對象視為一組或者一個模式，并且將它們與特定含義或者功能聯系在一起。

相似性表達的是元素形式和內容上的接近，包括形狀、顏色、大小、運動狀態等等。如果在一堆元素中有一些具有某種相同的特征，那么在我們的認知中這些元素具有更強的相關性。在UI設計中，我們經常用到這個原則，主要有以下3個方面：

1. 界面內相同功能的組件保持樣式統一，擁有相同功能、含義、層次結構的組件保持樣式上的統一可以使用戶快速理解這個組件的操作方式，降低用戶學習成本。
2. APP內部風格保持統一；統一的風格能夠讓用戶清晰地感知到自己處在同一個app/網站中，這不僅僅是用戶體驗的要求，也是視覺上的需求。
3. 特異點更易獲得視覺焦；反過來思考，在相似的元素中，突然躥出一個截然不同的東西，你立馬就會被其吸引，這其實也是相似性原理的一種逆向應用的方法。很多app的tab選中狀態會比較突出。

看起來和接近性非常類似，但是他們卻是不同的兩個概念。接近性強調額位置，相似性則強調內容。通常把有明顯特征的事物（形狀、顏色、大?。┙M合在一起。多用于表單與導航。

3、閉合性法則

人們在觀察熟悉的視覺形象時，會把不完整的局部形象當作一個整體的形象來感知，這種知覺上的結束，稱之為閉合。如果局部形象過于陌生或者簡略，則不會產生整體閉合聯想。閉合是一種完成某種圖形(完形)的行動。就算沒有外形的約束，我們也會自動把圖形腦補完全。比如半個形狀或者有缺口的形狀我們不會認為是一條線或各種零碎的圖形，而是完整的形狀。閉合是指一種完形的認知規律。

這個原則也非常適用于界面設計中，運用省略或者減法處理圖形，不僅可以節省空間，同時也讓用戶產生聯想，產生趣味性。比如UI界面中的導航欄，卡片模式等。

5. 重復原則

重復原則是指：版面中的視覺要素要重復出現，可以重復顏色、字體、圖形、形狀、材質、空間關系等。使用重復原則既能增加畫面的條理性，還可以加強統一性，讓版面更富有層次感、邏輯性，可以提高閱讀效率和信息的傳達。有規律的重復可以產生節奏感和韻律美。仔細觀察，生活中隨處都有重復之美。

文字樣式的重復

同一級別的文字信息需采用相同的文字樣式，也就是說，在字體、字號、字重以及特殊效果等方面都要保持一致，方便閱讀和信息的傳達。

文字樣式的重復

色彩的重復在版面設計中尤為重要，當一個版面中出現太多顏色，控制不好版面便會出現雜亂花哨等問題，因此使用重復的顏色，控制好色彩的種類、純度和明度，讓版面更和諧統一是最常用的方法。

圖片使用的重復

有多張圖片需要出現在同一版面，需統一圖片的大小、色調、比例、裁切方式等，這樣可以使版面美觀整齊。

四、summarize / 結語

至此版式設計 4 原則（對齊、親密性、對比、重復）就全部講完了，正是這些原則為我們解決排版問題，避免畫面中的內容和元素過于雜亂。能夠更加清晰、快速的表現出產品的功能特點，幫助我們設計出更好的畫面，提高視覺層次感，科學嚴謹的表達出我們想呈現的元素。再回看每條原則所展示的案例，會發現所有案例其實都是幾條原則的綜合使用，它們無法獨立存在，排版時要同時考慮、綜合使用。

感謝你的閱讀，希望對你的設計工作有所幫助～