版式設(shè)計(jì)是平面設(shè)計(jì)的一部分，是視覺(jué)傳達(dá)設(shè)計(jì)的重要環(huán)節(jié)。版式設(shè)計(jì)可以通過(guò)合理的空間視覺(jué)元素最大限度地發(fā)揮表現(xiàn)力，從而增強(qiáng)對(duì)版面主題的表達(dá)。讓我們來(lái)學(xué)習(xí)一下版式設(shè)計(jì)的基礎(chǔ)吧~

一、Concept / 什么是版式設(shè)計(jì)

版式設(shè)計(jì)又稱編排設(shè)計(jì)，是平面設(shè)計(jì)的一個(gè)組成部分，是視覺(jué)傳達(dá)設(shè)計(jì)的重要環(huán)節(jié)。版式設(shè)計(jì)通過(guò)調(diào)動(dòng)各類視覺(jué)元素進(jìn)行形式上的排列組合，突出版式上新穎的創(chuàng)意和個(gè)性化的表現(xiàn)，強(qiáng)化形式和內(nèi)容的互動(dòng)關(guān)系，以期產(chǎn)生全新的視覺(jué)效果。

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

二、Meaning / 為什么要版式設(shè)計(jì)

將版面上所需要的設(shè)計(jì)元素進(jìn)行必要的編排組合，使之成為直觀動(dòng)人、簡(jiǎn)明易讀、主次分明、概念清楚的美的構(gòu)成，使其在傳達(dá)信息的同時(shí)，也傳達(dá)設(shè)計(jì)者的藝術(shù)追求和文化理念，從而給讀者提供一個(gè)優(yōu)美的閱讀“空間”。

版式設(shè)計(jì)可以通過(guò)合理的空間視覺(jué)元素最大限度地發(fā)揮表現(xiàn)力，從而增強(qiáng)對(duì)版面主題的表達(dá)，并以版面特有的藝術(shù)感染力來(lái)吸引讀者的目光。

三、Principle / 版式設(shè)計(jì)基本原則

1. 基本原則有什么

版式設(shè)計(jì)的 4 大原則是對(duì)比、對(duì)齊、分組和重復(fù)的實(shí)際運(yùn)用。版式設(shè)計(jì)遵循4大原則的目的是為了讓界面看起來(lái)更加整潔、美觀，提高用戶體驗(yàn)，遵循這四個(gè)原則可以幫助用戶理解和接受信息。

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

2. 對(duì)比原則

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

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

vivo錢包會(huì)員中，頭部會(huì)員權(quán)益介紹卡片，通過(guò)對(duì)比的方式，拉開了“vip會(huì)員”與“超級(jí)會(huì)員”的等級(jí)差異。vivo權(quán)益頁(yè)中，則通過(guò)顏色的對(duì)比，對(duì)同頁(yè)面中不同平臺(tái)的權(quán)益券作了區(qū)分展示，提高了清晰度與識(shí)別性。

3. 對(duì)齊原則

任何頁(yè)面設(shè)計(jì)內(nèi)容都不是在頁(yè)面上任意擺放的。每個(gè)頁(yè)面上的元素都應(yīng)當(dāng)和版面上的某一個(gè)元素相對(duì)應(yīng)，有某種視覺(jué)上的相互聯(lián)系。這樣做可以表現(xiàn)出一種視覺(jué)清晰、邏輯嚴(yán)謹(jǐn)?shù)耐庥^。不管什么樣的環(huán)境，只要有各種各樣的事物存在，它就需要一個(gè)秩序，人類的環(huán)境如此，設(shè)計(jì)元素的環(huán)境照樣如此。左下圖設(shè)計(jì)元素參差不齊，畫面顯得雜亂無(wú)章，沒(méi)有美感，影響閱讀；而右下圖運(yùn)用合理的對(duì)齊可以帶來(lái)秩序感，看起來(lái)更加嚴(yán)謹(jǐn)、專業(yè)，信息傳達(dá)效果更好。

對(duì)齊方式

文字編排常用的對(duì)齊方式有：左對(duì)齊、兩端對(duì)齊末行左對(duì)齊、右對(duì)齊、居中對(duì)齊、兩端對(duì)齊、頂對(duì)齊和底對(duì)齊等。在進(jìn)行設(shè)計(jì)時(shí)要根據(jù)構(gòu)圖形式選擇合理的對(duì)齊方式，每種對(duì)齊形式所傳達(dá)的視覺(jué)感受也不一樣。

錢包頁(yè)面設(shè)計(jì)的過(guò)程中，嚴(yán)格遵守對(duì)齊原則，通過(guò)左對(duì)齊，居中對(duì)齊，兩端對(duì)齊等對(duì)齊方式，使得頁(yè)面整體統(tǒng)一，簡(jiǎn)潔且便于閱讀。

像素對(duì)齊和視覺(jué)對(duì)齊

在UI設(shè)計(jì)中，說(shuō)到對(duì)齊，就不得聊下“像素對(duì)齊與視覺(jué)對(duì)齊”。在實(shí)際工作中，往往會(huì)遇到明明顏色遵守規(guī)范，將頁(yè)面的相關(guān)元素對(duì)齊了，可是看著就是不舒服的時(shí)候。我們先用以下例子解釋下“像素對(duì)齊與視覺(jué)對(duì)齊”有什么不同呢？

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

這兩對(duì)圖形，哪一對(duì)看起來(lái)體量級(jí)平衡一點(diǎn)？明顯是左邊的，是不是？這是因?yàn)楫?dāng)兩個(gè)圖形的面積上看起來(lái)相等，我們稱之為視覺(jué)平衡，因?yàn)轶w量級(jí)（面積）平衡。

有時(shí)候不能簡(jiǎn)單的使用像素對(duì)齊來(lái)處理設(shè)計(jì)中的對(duì)齊問(wèn)題，應(yīng)根據(jù)實(shí)際情況，有時(shí)候也要相信自己的視覺(jué)感受，做到規(guī)范與視覺(jué)感知的平衡，為用戶呈現(xiàn)最佳的設(shè)計(jì)效果。

錢包app中，也有類似的圖標(biāo)，單純像素對(duì)齊，會(huì)使得視覺(jué)上看著并沒(méi)有真實(shí)的居中，還是需要視覺(jué)對(duì)齊才能使得圖標(biāo)看上去是整體居中。

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

要制作出向人們明確傳達(dá)信息的設(shè)計(jì)，要在整理信息的基礎(chǔ)上，把相同群組的信息湊近進(jìn)行排版。

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

人類在無(wú)意識(shí)之中，會(huì)把同樣形狀物品或形狀接近的物品作為一個(gè)“整體”來(lái)認(rèn)識(shí)，這種現(xiàn)象被稱作“格式塔”（Gestalt）原理。這是對(duì)大多數(shù)人都奏效且非常基本的原理之一。在設(shè)計(jì)制作中熟練掌握這個(gè)原理，可以把信息迅速且準(zhǔn)確地傳達(dá)給第三者。具體的方法就是，只要把一個(gè)要素、類似要素靠近放置，把關(guān)聯(lián)性低的要素分開放置，就可以達(dá)到這種效果。另外， 如果需要把一個(gè)要素從整體中突出，就可以將它放在遠(yuǎn)離整體的地方，效果就會(huì)更明顯。根據(jù)不同信息的內(nèi)容，可以進(jìn)行群組化（接近），也可以進(jìn)行獨(dú)立化（分離）。在設(shè)計(jì)中進(jìn)行明確的分組，會(huì)產(chǎn)生整體感，人們就可以更直觀地理解內(nèi)容。反過(guò)來(lái)，如果沒(méi)有分組，就很難準(zhǔn)確傳達(dá)信息。

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

1、接近性法則

物體之間相對(duì)距離會(huì)影響我們感知它們是否以及如何組織在一起。相互靠近的物體看起來(lái)屬于一組，而那些距離較遠(yuǎn)的就不是。利用這個(gè)原則，調(diào)整距離或者用分割線等來(lái)分開不同設(shè)計(jì)模式的構(gòu)建。會(huì)使設(shè)計(jì)界面層次有序，視覺(jué)清晰，減少視覺(jué)噪音。

相互關(guān)聯(lián)的控件和內(nèi)容之間距離越近，用戶越能感知它們的相關(guān)性。反之，如果距離太遠(yuǎn)，用戶很難感知到它們是相關(guān)的，產(chǎn)品在體驗(yàn)上就更加難用。

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

2、相似法則

有共同視覺(jué)元素的物體看起來(lái)更有關(guān)聯(lián)性。我們傾向于將看起來(lái)相似的對(duì)象視為一組或者一個(gè)模式，并且將它們與特定含義或者功能聯(lián)系在一起。

相似性表達(dá)的是元素形式和內(nèi)容上的接近，包括形狀、顏色、大小、運(yùn)動(dòng)狀態(tài)等等。如果在一堆元素中有一些具有某種相同的特征，那么在我們的認(rèn)知中這些元素具有更強(qiáng)的相關(guān)性。在UI設(shè)計(jì)中，我們經(jīng)常用到這個(gè)原則，主要有以下3個(gè)方面：

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

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

3、閉合性法則

人們?cè)谟^察熟悉的視覺(jué)形象時(shí)，會(huì)把不完整的局部形象當(dāng)作一個(gè)整體的形象來(lái)感知，這種知覺(jué)上的結(jié)束，稱之為閉合。如果局部形象過(guò)于陌生或者簡(jiǎn)略，則不會(huì)產(chǎn)生整體閉合聯(lián)想。閉合是一種完成某種圖形(完形)的行動(dòng)。就算沒(méi)有外形的約束，我們也會(huì)自動(dòng)把圖形腦補(bǔ)完全。比如半個(gè)形狀或者有缺口的形狀我們不會(huì)認(rèn)為是一條線或各種零碎的圖形，而是完整的形狀。閉合是指一種完形的認(rèn)知規(guī)律。

這個(gè)原則也非常適用于界面設(shè)計(jì)中，運(yùn)用省略或者減法處理圖形，不僅可以節(jié)省空間，同時(shí)也讓用戶產(chǎn)生聯(lián)想，產(chǎn)生趣味性。比如UI界面中的導(dǎo)航欄，卡片模式等。

5. 重復(fù)原則

重復(fù)原則是指：版面中的視覺(jué)要素要重復(fù)出現(xiàn)，可以重復(fù)顏色、字體、圖形、形狀、材質(zhì)、空間關(guān)系等。使用重復(fù)原則既能增加畫面的條理性，還可以加強(qiáng)統(tǒng)一性，讓版面更富有層次感、邏輯性，可以提高閱讀效率和信息的傳達(dá)。有規(guī)律的重復(fù)可以產(chǎn)生節(jié)奏感和韻律美。仔細(xì)觀察，生活中隨處都有重復(fù)之美。

文字樣式的重復(fù)

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

文字樣式的重復(fù)

色彩的重復(fù)在版面設(shè)計(jì)中尤為重要，當(dāng)一個(gè)版面中出現(xiàn)太多顏色，控制不好版面便會(huì)出現(xiàn)雜亂花哨等問(wèn)題，因此使用重復(fù)的顏色，控制好色彩的種類、純度和明度，讓版面更和諧統(tǒng)一是最常用的方法。

圖片使用的重復(fù)

有多張圖片需要出現(xiàn)在同一版面，需統(tǒng)一圖片的大小、色調(diào)、比例、裁切方式等，這樣可以使版面美觀整齊。

四、summarize / 結(jié)語(yǔ)

至此版式設(shè)計(jì) 4 原則（對(duì)齊、親密性、對(duì)比、重復(fù)）就全部講完了，正是這些原則為我們解決排版問(wèn)題，避免畫面中的內(nèi)容和元素過(guò)于雜亂。能夠更加清晰、快速的表現(xiàn)出產(chǎn)品的功能特點(diǎn)，幫助我們?cè)O(shè)計(jì)出更好的畫面，提高視覺(jué)層次感，科學(xué)嚴(yán)謹(jǐn)?shù)谋磉_(dá)出我們想呈現(xiàn)的元素。再回看每條原則所展示的案例，會(huì)發(fā)現(xiàn)所有案例其實(shí)都是幾條原則的綜合使用，它們無(wú)法獨(dú)立存在，排版時(shí)要同時(shí)考慮、綜合使用。

感謝你的閱讀，希望對(duì)你的設(shè)計(jì)工作有所幫助～