版式設(shè)計又稱編排設(shè)計，是平面設(shè)計的一個組成部分，是視覺傳達(dá)設(shè)計的重要環(huán)節(jié)。版式設(shè)計通過調(diào)動各類視覺元素進(jìn)行形式上的排列組合，突出版式上新穎的創(chuàng)意和個性化的表現(xiàn)，強(qiáng)化形式和內(nèi)容的互動關(guān)系，以期產(chǎn)生全新的視覺效果。
簡而言之，即是指設(shè)計人員根據(jù)設(shè)計主題和視覺需求，在預(yù)先設(shè)定的有限版面內(nèi)，運(yùn)用造型要素和形式原則，根據(jù)特定主題與內(nèi)容的需要， 將文字、圖片（圖形）及色彩等視覺傳達(dá)信息要素，進(jìn)行有組織、有目的的組合排列的設(shè)計行為與過程。
將版面上所需要的設(shè)計元素進(jìn)行必要的編排組合，使之成為直觀動人、簡明易讀、主次分明、概念清楚的美的構(gòu)成，使其在傳達(dá)信息的同時，也傳達(dá)設(shè)計者的藝術(shù)追求和文化理念，從而給讀者提供一個優(yōu)美的閱讀“空間”。
版式設(shè)計可以通過合理的空間視覺元素最大限度地發(fā)揮表現(xiàn)力，從而增強(qiáng)對版面主題的表達(dá)，并以版面特有的藝術(shù)感染力來吸引讀者的目光。
1. 基本原則有什么
版式設(shè)計的 4 大原則是對比、對齊、分組和重復(fù)的實際運(yùn)用。版式設(shè)計遵循 4 大原則的目的是為了讓界面看起來更加整潔、美觀，提高用戶體驗，遵循這四個原則可以幫助用戶理解和接受信息。
由美國設(shè)計師 Robin Wulliams（羅賓·威廉姆斯）在《寫給大家看的設(shè)計書》中首次提出，準(zhǔn)確講這 4 條 原則更側(cè)重排版設(shè)計，可以說幾乎所有排版中，都要用到該原則，它是排版“心法”，更是需要遵循的基礎(chǔ)準(zhǔn)則，并且 4 條原則都不是孤立存在，通常會結(jié)合使用，很少有作品只用其中某條原則。
2. 對比原則
對比所指的基本思想是，要避免版式頁面上的應(yīng)用元素太過相似。若元素（顏色、字體、形狀、大小、空間、線寬等）不相同，那么就直接讓它們完全不同。
想讓頁面引人注意，對比原則通常是重要的一個表現(xiàn)方法，對比原則最能引起閱讀者的注意力。在的海報中，常通過方向、顏色、大小、位置等對比方式，突出內(nèi)容重點，有效傳遞關(guān)鍵信息，也讓版式更有變化，不至于平淡乏味。
錢包會員頁
vivo 錢包會員中，頭部會員權(quán)益介紹卡片，通過對比的方式，拉開了“vip 會員”與“超級會員”的等級差異。vivo 權(quán)益頁中，則通過顏色的對比，對同頁面中不同平臺的權(quán)益券作了區(qū)分展示，提高了清晰度與識別性。
3. 對齊原則
任何頁面設(shè)計內(nèi)容都不是在頁面上任意擺放的。每個頁面上的元素都應(yīng)當(dāng)和版面上的某一個元素相對應(yīng)，有某種視覺上的相互聯(lián)系。這樣做可以表現(xiàn)出一種視覺清晰、邏輯嚴(yán)謹(jǐn)?shù)耐庥^。不管什么樣的環(huán)境，只要有各種各樣的事物存在，它就需要一個秩序，人類的環(huán)境如此，設(shè)計元素的環(huán)境照樣如此。左下圖設(shè)計元素參差不齊，畫面顯得雜亂無章，沒有美感，影響閱讀；而右下圖運(yùn)用合理的對齊可以帶來秩序感，看起來更加嚴(yán)謹(jǐn)、專業(yè)，信息傳達(dá)效果更好。
①對齊方式
文字編排常用的對齊方式有：左對齊、兩端對齊末行左對齊、右對齊、居中對齊、兩端對齊、頂對齊和底對齊等。在進(jìn)行設(shè)計時要根據(jù)構(gòu)圖形式選擇合理的對齊方式，每種對齊形式所傳達(dá)的視覺感受也不一樣。
錢包頁面設(shè)計的過程中，嚴(yán)格遵守對齊原則，通過左對齊，居中對齊，兩端對齊等對齊方式，使得頁面整體統(tǒng)一，簡潔且便于閱讀。
錢包借錢頁、首頁、卡包頁、賬號頁
②像素對齊和視覺對齊
在 UI 設(shè)計中，說到對齊，就不得聊下“像素對齊與視覺對齊”。在實際工作中，往往會遇到明明顏色遵守規(guī)范，將頁面的相關(guān)元素對齊了，可是看著就是不舒服的時候。我們先用以下例子解釋下“像素對齊與視覺對齊”有什么不同呢？
有的時候，有一些元素由于形狀的因素會導(dǎo)致我們視覺重心的偏移，因此需要照顧視覺對齊。說得很對，但我們需要找一個有理有據(jù)的解釋。
人的眼睛很神奇，喜歡找平衡。比如看到黑色或者白色的屏幕，比起看灰色的，壓力要大?；疑C合了黑色和白色，不刺眼。
那…什么是平衡？這里我們要引入一個概念“體量級”，我們需要體量級平衡。那如何理解體量級？我們換個思維來理解，叫“面積”。再舉個例子，觀察一下：
這兩對圖形，哪一對看起來體量級平衡一點？明顯是左邊的，是不是？
這是因為當(dāng)兩個圖形的面積上看起來相等，我們稱之為視覺平衡，因為體量級（面積）平衡。
有時候不能簡單的使用像素對齊來處理設(shè)計中的對齊問題，應(yīng)根據(jù)實際情況，有時候也要相信自己的視覺感受，做到規(guī)范與視覺感知的平衡，為用戶呈現(xiàn)最佳的設(shè)計效果。
錢包 app 中，也有類似的圖標(biāo)，單純像素對齊，會使得視覺上看著并沒有真實的居中，還是需要視覺對齊才能使得圖標(biāo)看上去是整體居中。
4. 分組原則（接近效果）
要制作出向人們明確傳達(dá)信息的設(shè)計，要在整理信息的基礎(chǔ)上，把相同群組的信息湊近進(jìn)行排版。
要素之間的距離--格式塔原理
人類在無意識之中，會把同樣形狀物品或形狀接近的物品作為一個“整體”來認(rèn)識，這種現(xiàn)象被稱作“格式塔”（Gestalt）原理。這是對大多數(shù)人都奏效且非?；镜脑碇?。
在設(shè)計制作中熟練掌握這個原理，可以把信息迅速且準(zhǔn)確地傳達(dá)給第三者。
具體的方法就是，只要把一個要素、類似要素靠近放置，把關(guān)聯(lián)性低的要素分開放置，就可以達(dá)到這種效果。
另外， 如果需要把一個要素從整體中突出，就可以將它放在遠(yuǎn)離整體的地方，效果就會更明顯。根據(jù)不同信息的內(nèi)容，可以進(jìn)行群組化（接近），也可以進(jìn)行獨立化（分離）。
在設(shè)計中進(jìn)行明確的分組，會產(chǎn)生整體感，人們就可以更直觀地理解內(nèi)容。反過來，如果沒有分組，就很難準(zhǔn)確傳達(dá)信息。
“格式塔”原理的主要法則有：接近法則、連續(xù)法則、相似法則、封閉法則、主體-背景法則、熟悉法則、知覺恒常法則 (包括明度/顏色/大小/形狀的恒常)、共同命運(yùn)法則。
在版式設(shè)計中，對要素進(jìn)行分組，就主要可以使用其中的接近、相似、封閉法則。
①接近性法則
物體之間相對距離會影響我們感知它們是否以及如何組織在一起。相互靠近的物體看起來屬于一組，而那些距離較遠(yuǎn)的就不是。
利用這個原則，調(diào)整距離或者用分割線等來分開不同設(shè)計模式的構(gòu)建。會使設(shè)計界面層次有序，視覺清晰，減少視覺噪音。
相互關(guān)聯(lián)的控件和內(nèi)容之間距離越近，用戶越能感知它們的相關(guān)性。反之，如果距離太遠(yuǎn)，用戶很難感知到它們是相關(guān)的，產(chǎn)品在體驗上就更加難用。
錢包、游戲中心頁面
屬性相同、場景相似的信息應(yīng)該放在一起，降低閱讀成本，提高用戶感知效率；不相關(guān)的信息盡量區(qū)分開，不要放在一起模糊不清引起不必要的誤解。
②相似法則
有共同視覺元素的物體看起來更有關(guān)聯(lián)性。我們傾向于將看起來相似的對象視為一組或者一個模式，并且將它們與特定含義或者功能聯(lián)系在一起。
相似性表達(dá)的是元素形式和內(nèi)容上的接近，包括形狀、顏色、大小、運(yùn)動狀態(tài)等等。如果在一堆元素中有一些具有某種相同的特征，那么在我們的認(rèn)知中這些元素具有更強(qiáng)的相關(guān)性。在 UI 設(shè)計中，我們經(jīng)常用到這個原則，主要有以下 3 個方面：
界面內(nèi)相同功能的組件保持樣式統(tǒng)一，擁有相同功能、含義、層次結(jié)構(gòu)的組件保持樣式上的統(tǒng)一可以使用戶快速理解這個組件的操作方式，降低用戶學(xué)習(xí)成本。
APP 內(nèi)部風(fēng)格保持統(tǒng)一；統(tǒng)一的風(fēng)格能夠讓用戶清晰地感知到自己處在同一個 app/網(wǎng)站中，這不僅僅是用戶體驗的要求，也是視覺上的需求。
特異點更易獲得視覺焦；反過來思考，在相似的元素中，突然躥出一個截然不同的東西，你立馬就會被其吸引，這其實也是相似性原理的一種逆向應(yīng)用的方法。很多 app 的 tab 選中狀態(tài)會比較突出。
看起來和接近性非常類似，但是他們卻是不同的兩個概念。接近性強(qiáng)調(diào)額位置，相似性則強(qiáng)調(diào)內(nèi)容。通常把有明顯特征的事物（形狀、顏色、大小）組合在一起。多用于表單與導(dǎo)航。
③閉合性法則
人們在觀察熟悉的視覺形象時，會把不完整的局部形象當(dāng)作一個整體的形象來感知，這種知覺上的結(jié)束，稱之為閉合。如果局部形象過于陌生或者簡略，則不會產(chǎn)生整體閉合聯(lián)想。
閉合是一種完成某種圖形(完形)的行動。就算沒有外形的約束，我們也會自動把圖形腦補(bǔ)完全。比如半個形狀或者有缺口的形狀我們不會認(rèn)為是一條線或各種零碎的圖形，而是完整的形狀。閉合是指一種完形的認(rèn)知規(guī)律。
這個原則也非常適用于界面設(shè)計中，運(yùn)用省略或者減法處理圖形，不僅可以節(jié)省空間，同時也讓用戶產(chǎn)生聯(lián)想，產(chǎn)生趣味性。比如 UI 界面中的導(dǎo)航欄，卡片模式等。
淘票票、網(wǎng)易云音樂截圖
5. 重復(fù)原則
重復(fù)原則是指：版面中的視覺要素要重復(fù)出現(xiàn)，可以重復(fù)顏色、字體、圖形、形狀、材質(zhì)、空間關(guān)系等。使用重復(fù)原則既能增加畫面的條理性，還可以加強(qiáng)統(tǒng)一性，讓版面更富有層次感、邏輯性，可以提高閱讀效率和信息的傳達(dá)。有規(guī)律的重復(fù)可以產(chǎn)生節(jié)奏感和韻律美。仔細(xì)觀察，生活中隨處都有重復(fù)之美。
①文字樣式的重復(fù)
同一級別的文字信息需采用相同的文字樣式，也就是說，在字體、字號、字重以及特殊效果等方面都要保持一致，方便閱讀和信息的傳達(dá)。
錢包、游戲中心頁面
②文字樣式的重復(fù)
色彩的重復(fù)在版面設(shè)計中尤為重要，當(dāng)一個版面中出現(xiàn)太多顏色，控制不好版面便會出現(xiàn)雜亂花哨等問題，因此使用重復(fù)的顏色，控制好色彩的種類、純度和明度，讓版面更和諧統(tǒng)一是最常用的方法。
錢包頁面
③圖片使用的重復(fù)
有多張圖片需要出現(xiàn)在同一版面，需統(tǒng)一圖片的大小、色調(diào)、比例、裁切方式等，這樣可以使版面美觀整齊。
錢包頁面