1 . 版式的認(rèn)知和發(fā)展
版式設(shè)計(jì)是指設(shè)計(jì)師根據(jù)設(shè)計(jì)主題和視覺需求，在版面中對字體和元素的編排藝術(shù)和技巧。版式設(shè)計(jì)是信息媒介和接收者之間溝通的橋梁，是傳遞信息的特殊語言和手法。
1.1 版式設(shè)計(jì)的概念
在日常的設(shè)計(jì)應(yīng)用中，版式的設(shè)計(jì)是無處不在的，也是做好設(shè)計(jì)的基礎(chǔ)，所以我們打好平面中版式設(shè)計(jì)的基礎(chǔ)就顯得尤為重要。
為什么說版式設(shè)計(jì)是做好設(shè)計(jì)的基礎(chǔ)呢，因?yàn)樵谠O(shè)計(jì)工作中，版式設(shè)計(jì)的應(yīng)用非常的廣泛，比如在雜志、書籍、網(wǎng)站、海報(bào)、畫冊、UI設(shè)計(jì)等領(lǐng)域都離不開版式知識(shí)的支撐。隨著人們物質(zhì)生活水平的提升，人們的精神需求也在不斷的提升，早期，書籍報(bào)紙和雜志等紙媒出版物已經(jīng)可以滿足人們的閱讀需求，如今隨著科技水平的提升和新媒體的快速崛起，人們獲取信息的渠道也變得更多了，版式設(shè)計(jì)作為傳遞信息的媒介，也相應(yīng)的被應(yīng)用到各行各業(yè)。
優(yōu)秀的版式能喚起讀者審美性和閱讀下去的耐心，且有助于內(nèi)容的傳遞的有效性和藝術(shù)性。
1.2 版式設(shè)計(jì)的起源與發(fā)展
早在194年前，攝像技術(shù)的精進(jìn)和人們對畫面感的追求，在印刷工人不斷的探索和研制下。在1871年照相制版技術(shù)被引入到印刷中。
在1917~1928年，蒙德里安等人在荷蘭創(chuàng)立了荷蘭風(fēng)格派。荷蘭風(fēng)格派又稱新造型主義畫派，荷蘭風(fēng)格派對非對稱字體、簡潔性以及空間的動(dòng)態(tài)分割進(jìn)行了探索，并對結(jié)構(gòu)主義和包豪斯產(chǎn)生了影響。
時(shí)間轉(zhuǎn)眼來到1907法國，也就是距離現(xiàn)在101年前，立體主義的藝術(shù)家追求碎裂、解析、重新組合的形式，形成分離的畫面，讓立體主義的畫面創(chuàng)造出一個(gè)二維空間的繪畫特色。
時(shí)間再次來到1916年至1923年間出現(xiàn)于藝術(shù)流派的一種藝術(shù)運(yùn)動(dòng)。在距離現(xiàn)在97年前，一群年輕的藝術(shù)家和反戰(zhàn)人士領(lǐng)導(dǎo)，通過反美學(xué)的作品和抗議活動(dòng)，來表達(dá)了他們對資產(chǎn)階級價(jià)值觀和第一次世界大戰(zhàn)的絕望。
達(dá)達(dá)主義藝術(shù)家通過對排版的實(shí)驗(yàn)，嘗試用隨意的布局進(jìn)行版式設(shè)計(jì)，探索視覺的沖擊力。
在20世紀(jì)20年代，李西斯基跟達(dá)達(dá)主義藝術(shù)家讓·阿普（ARP）一起合著了一本書《論藝術(shù)主義》，這本書的無論是目錄還是排版，都主次分明，在加上每頁上面都有章節(jié)名稱，易于查找，閱讀體驗(yàn)遠(yuǎn)勝于當(dāng)時(shí)的任何一本書，構(gòu)成主義手法在這本書中體現(xiàn)得淋漓盡致，也解釋了一切技法都是為視覺傳達(dá)目的服務(wù)。
1919/4/1—1933/7，也即是距今93年前，德國包豪斯設(shè)計(jì)學(xué)院正式宣布成立，對現(xiàn)在的設(shè)計(jì)來說，包豪斯它既是一所學(xué)校，更是一種理念，它作為一種新式的教育模式在德國創(chuàng)建，并促成了平面設(shè)計(jì)的誕生。
72年前，1948年，萊斯特·比爾（Lester Beall）為強(qiáng)普制藥公司制作的《瞭望》（Scope）雜志，開啟了紐約的現(xiàn)代運(yùn)動(dòng)。
63年前，源于包豪斯的國際風(fēng)格，或稱為“瑞士風(fēng)格”，其中就包括大師阿明·霍夫曼，他的作品具有鮮明的瑞士風(fēng)格，精密，有效，經(jīng)得起時(shí)間檢驗(yàn)，堪稱典范。他認(rèn)為，海報(bào)是最好和最有效的溝通形式之一。他也在海報(bào)設(shè)計(jì)當(dāng)中運(yùn)用了網(wǎng)格、非對稱、最低限度的排版對比。
28年前，在印刷術(shù)專家奈維爾·布羅迪（Neville Brody）的引領(lǐng)下，很多人開始探索排版的信息傳達(dá)的準(zhǔn)確性與最大視覺沖擊之間的沖突性的問題。
他的設(shè)計(jì)作品在各大知名媒體中頻頻出現(xiàn)，并以其在著名時(shí)尚雜志《The face》和《Arena Magazine》的作品以及他為80年代深具影響力的樂隊(duì)設(shè)計(jì)的唱片封面而廣為人知。他還是世界最暢銷的圖像設(shè)計(jì)圖書的作者，還設(shè)計(jì)了諸多極受歡迎的字體。
22年前，網(wǎng)格設(shè)計(jì)在90年代成了為熱門學(xué)科，在很大程度上說這是一種數(shù)字化的印刷設(shè)計(jì)表達(dá)。另外根據(jù)文章“Information Architects JapanWeb design is 95% typography”的研究表明，網(wǎng)頁設(shè)計(jì)中95%用到的都是版式設(shè)計(jì)。
18年前，計(jì)算機(jī)可以使設(shè)計(jì)回到任何一個(gè)時(shí)代，如用老式金屬字體，又或者使用哥特字體做設(shè)計(jì)等等，這也說明了設(shè)計(jì)由紙質(zhì)信息媒介向數(shù)字化信息媒介的轉(zhuǎn)變。
2 . 設(shè)計(jì)三元素與版式初識(shí)
在版式設(shè)計(jì)中，點(diǎn)、線、面又被稱作為設(shè)計(jì)三要素。在日常生活中，我們所看到的所以具象的物體都可以細(xì)化成點(diǎn)、線、面的元素。點(diǎn)、線、面在版面中不僅僅是抽象符號(hào)，還蘊(yùn)含了豐富的設(shè)計(jì)語言，而設(shè)計(jì)師的職責(zé)就是在版面中處理好它們的位置關(guān)系。
在版式設(shè)計(jì)中，點(diǎn)、線、面之間既是相互獨(dú)立的，又是相互影響的。在版面中，大家可以將一個(gè)文字看作是一個(gè)點(diǎn)，將一行文字看作一條線，將一段文字或一張圖片看作是一個(gè)面，總而言之，設(shè)計(jì)師可以靈活運(yùn)用點(diǎn)、線、面三大元素的大小、比例和位置變化，設(shè)計(jì)出獨(dú)具匠心的作品。
2.1 點(diǎn)
在版面元素的定義中，點(diǎn)是構(gòu)成圖形的最小單位，其實(shí)，點(diǎn)、線、面的關(guān)系是一個(gè)遞進(jìn)的關(guān)系，點(diǎn)是相對于線和面更小的面積，點(diǎn)可以是一個(gè)文字，也可以是一個(gè)色塊，具體看版面中的參照物而定的。而點(diǎn)則是一個(gè)圖像構(gòu)成的最小單位，任何圖形都可以看作是一個(gè)個(gè)的點(diǎn)構(gòu)成的。
之前風(fēng)靡一時(shí)的網(wǎng)絡(luò)游戲“我的世界”，相信大家肯定玩過，沒玩過的可能也在網(wǎng)上看過一些截圖或者視頻，我的世界里的每個(gè)地圖都是由一個(gè)個(gè)小方塊構(gòu)成的，構(gòu)成我的世界的小方塊，就可以理解為我們設(shè)計(jì)構(gòu)成中的點(diǎn)元素。
2.1.1 點(diǎn)的作用
在日常的設(shè)計(jì)中，我們通過改變點(diǎn)的數(shù)量和位置，可以起到聚焦或分散視線的作用。當(dāng)版面中點(diǎn)的數(shù)量比較少的時(shí)候，點(diǎn)能起到聚焦視線的作用，提高和引導(dǎo)人們注意力與視線；而大量的分散的點(diǎn)在畫面中可以起到烘托版面氣氛的作用，使版面內(nèi)容看起來更加豐富、熱鬧。
（1）聚焦視線
與線相比，點(diǎn)不具備方向性和延展性，與面相比，點(diǎn)的視覺體量會(huì)比較小。點(diǎn)的數(shù)量的不同，可使人的視覺焦點(diǎn)發(fā)生變化。當(dāng)版面中空無一物的時(shí)，人們的視線沒有落地點(diǎn)，如果當(dāng)版面出現(xiàn)一個(gè)點(diǎn)的時(shí)候，人的視線會(huì)不自覺地聚焦在這個(gè)點(diǎn)上，當(dāng)版面中出現(xiàn)兩個(gè)點(diǎn)的時(shí)候，人們的視覺落地點(diǎn)會(huì)在這兩點(diǎn)之間轉(zhuǎn)換，當(dāng)版面中出現(xiàn)三個(gè)點(diǎn)的時(shí)候，人們的視覺落地點(diǎn)通常會(huì)在中間的那個(gè)點(diǎn)上，這個(gè)點(diǎn)就是平衡視覺的中心點(diǎn)。
所以，我們就可以知道，我們app的底部tap欄的圖標(biāo)一般是奇數(shù)，而重要且常用的功能會(huì)放在中間，因?yàn)槟鞘侨藗円曈X的落地點(diǎn)。而數(shù)量選用奇數(shù)是可以起到平衡視覺和聚焦視線的作用。
（2）分散視線
點(diǎn)除了可以有聚焦視線的作用，也可以起到分散注意力和烘托氣氛的作用。在版式設(shè)計(jì)中，設(shè)計(jì)師經(jīng)常運(yùn)用散點(diǎn)排布的設(shè)計(jì)手法分散人的注意力。這種設(shè)計(jì)手法不僅僅豐富了版面，還可以讓版面看起來充滿活力，讓版面看起來更加熱鬧，并讓人感到放松、心情愉快。
2.2 線
在版面元素的定義中，線是由一個(gè)點(diǎn)任意移動(dòng)所構(gòu)成的圖形，線只有長度，沒有寬度和厚度。在版式設(shè)計(jì)中，線扮演著至關(guān)重要的角色，人們賦予了線條情感和屬性。在平時(shí)的設(shè)計(jì)中，線具有長度、粗細(xì)、形式和肌理的變化，有時(shí)候在表達(dá)方式和表達(dá)情感上變化上比點(diǎn)要更加合適一些。
比如，我們在地上看飛機(jī)飛過，我們看飛機(jī)它只是一個(gè)點(diǎn)，但是它移動(dòng)的軌跡被尾氣記錄下來，會(huì)形成一條線，所以，點(diǎn)經(jīng)過移動(dòng)和排列，便可以形成線。
2.2.1 線的作用
在版式設(shè)計(jì)中，線具有非常重要的作用。線不僅僅可以將版面劃分成不同的區(qū)域，增強(qiáng)信息之前的邏輯關(guān)系，還可以引導(dǎo)讀者的視線，提升閱讀者的效率，可以起到支撐版面的作用。
（1）分割版面
在版式設(shè)計(jì)中，線可以用來分割版面。我們在設(shè)計(jì)的時(shí)候，在信息比較多或者沒有規(guī)律的時(shí)候，設(shè)計(jì)師通常會(huì)用線將版面進(jìn)行合理的劃分，形成不同的信息區(qū)域，使版面更加的合理、規(guī)范。將版面進(jìn)行合理劃分可以構(gòu)建良好的閱讀秩序，方便讀者閱讀，并且豐富版面層次，使版面更富有變化。
（2）引導(dǎo)視線
線本身具有視覺延展性，因此在版面設(shè)計(jì)中，設(shè)計(jì)師經(jīng)常會(huì)使用線來引導(dǎo)人們的視線。合理的運(yùn)用線條的指引性可以使版面信息更具有關(guān)聯(lián)性，不僅方便人們的閱讀，還可以提高閱讀的效率。
（3）支撐版面
水平的線或者垂直的線給人筆直硬朗的視覺感受。在版式設(shè)計(jì)中，設(shè)計(jì)師經(jīng)常運(yùn)用線的特性，使版面更加豐富飽滿并富有視覺的張力。
2.3 面
線動(dòng)成面，面在版面中所占的空間是很大的，也是設(shè)計(jì)師最花時(shí)間去排版的地方。面具有長度和寬度，但是沒有厚度。面不僅僅代表區(qū)域，還可以將同類信息聚在一起。面的形狀多種多樣，在版式設(shè)計(jì)中，除了點(diǎn)和線構(gòu)成的視覺元素，其他的元素都可以看作是面。面可以是放大后的點(diǎn)和線，也可以是一張圖片或一個(gè)圖形，其形態(tài)可以是規(guī)則，也可以是不規(guī)則的。在版式設(shè)計(jì)中，與點(diǎn)和線相比，面更具有表現(xiàn)力和實(shí)體感，也是最常用的視覺元素?？傊刹煌笮〉拿娼M合而成的畫面具有非常強(qiáng)的視覺沖擊力。
面我們可以看作是線的移動(dòng)軌跡，當(dāng)它平移的時(shí)候是矩形，旋轉(zhuǎn)的時(shí)候則形成圓形，我們生活中比較常見的卷簾門，當(dāng)它緩緩拉下的時(shí)候，就可以線到面的移動(dòng)過程。
2.3.1 面的作用
在版式設(shè)計(jì)中，調(diào)整面的大小、遠(yuǎn)近和前后關(guān)系，可以起到劃分版面區(qū)域、豐富版面層次的作用，使整個(gè)版面信息條理清晰，并且具有層次感和縱深感。
（1）劃分區(qū)域
在版式設(shè)計(jì)中，面的區(qū)域性表達(dá)很有力。通過色塊將版面進(jìn)行區(qū)域劃分，可以使信息內(nèi)容更加內(nèi)斂，并且有規(guī)律可循。圖片和文字段落都可以看作面的形態(tài)，圖片是實(shí)面，文字段落是虛面。
（2）豐富頁面層次
在視覺上，面能起到醒目、平衡和豐富空間的作用。面可以通過前后疊體出版面的空間感和縱深感，其視覺變現(xiàn)力更強(qiáng)，使二維空間看起來更加立體，并有層次感。
2.4 版式設(shè)計(jì)中的“三率一版”
在通常的版式設(shè)計(jì)中，設(shè)計(jì)師對點(diǎn)、線、面設(shè)計(jì)元素進(jìn)行大小、比例和位置關(guān)系的處理，這就是版式設(shè)計(jì)。版式設(shè)計(jì)中有“三率”，通常說的“三率”是版面率、圖版率和跳躍率，“一例”是指的是黃金比例。優(yōu)秀的版式設(shè)計(jì)能給人帶來視覺上的美感和精神上的愉悅，而不好的版式設(shè)計(jì)則不符合美學(xué)的規(guī)律，甚至毫無美感可言。將感性的設(shè)計(jì)進(jìn)行理性的歸納和表達(dá)，有助于設(shè)計(jì)師在實(shí)際工作中設(shè)計(jì)出更優(yōu)秀的作品。
在具體介紹和分析“三率一版”之前，我們先來看看什么是版面。
版面是指在頁面中主要呈現(xiàn)圖文信息的區(qū)域。在印刷設(shè)計(jì)中，大家可以將版面理解為去除天頭、地腳、切口和訂口后的中間區(qū)域。
- 天頭：頁面中頂部頁眉留白區(qū)域。
- 地腳：頁面中底部頁腳留白區(qū)域。通常將頁碼和腳注設(shè)置在地腳區(qū)域。
- 訂口：頁面中靠近書脊要裝訂的留白區(qū)域。
- 切口：頁面最外側(cè)將來要被裁切的留白區(qū)域
在版式設(shè)計(jì)中，版面的地位非常重要，無論大家設(shè)計(jì)哪一類作品都需要先規(guī)劃好版面的大小。版式設(shè)計(jì)是在有限的版面內(nèi)進(jìn)行有目的、有規(guī)劃的設(shè)計(jì)，使版面內(nèi)的圖文信息編排得更加科學(xué)、合理，并符合美學(xué)規(guī)律，這也是版式設(shè)計(jì)的基本前提。
而在網(wǎng)頁設(shè)計(jì)中，版面可以理解為網(wǎng)頁的主視覺區(qū)域。一般網(wǎng)站主視覺區(qū)域的寬度范圍為1000PX-1200PX，而垂直方向上內(nèi)容是無限長的，因此，網(wǎng)頁設(shè)計(jì)是不會(huì)限制高度的。在設(shè)計(jì)網(wǎng)頁時(shí)，只需要在圖文信息排布在安全區(qū)域內(nèi)即可，超出安全區(qū)域的內(nèi)容都是不會(huì)是特別和主題相關(guān)的重復(fù)信息或者背景。
2.4.1 版面率
在版面開本中所占的比例叫做版面率。版面率越小，頁面留白就越大，這樣會(huì)令人感覺到高級、雅致；版面率越大，頁面留白越小，給人的感覺是內(nèi)容越豐富、信息量大。
（1）增大版面率可以讓版面更實(shí)用
一般的資訊類、工具類、產(chǎn)品宣傳類和購物網(wǎng)站的版面率比較大，因?yàn)檫@些類型的版面需要傳達(dá)的信息會(huì)比較多，如果版面太小則不能容納較多的圖文信息。這里需要注意的是，版面所承載的信息量與版面率沒有絕對關(guān)系，大版面率的版面所承載的信息可能是一張滿底的圖片和少量的文字，而小版面率的版面所承載的信息可能是很多圖片和文字。
（2）減小版面率可以讓版面更精致
高品質(zhì)刊物一般采用小版面率，將主要信息內(nèi)聚，并且頁面中有大面積的留白，使整個(gè)頁面看起來清新、簡約、高雅和精致。雖然前面講到版面率和信息量沒有絕對關(guān)系，但通常小版面率的版面可展示的信息較少，這避免了信息過度擁擠，不會(huì)破壞版面的設(shè)計(jì)風(fēng)格和定位。
2.4.2 圖面率
在版面中，圖片所占版面的比例叫作圖版率。圖片數(shù)量越多，圖片的尺寸越大，圖版率越大，圖片的數(shù)量越少，圖片尺寸越小，圖版率越小。圖版率大的版面令人感到豐富、熱鬧，圖版率小的版面令人感到低調(diào)、沉穩(wěn)。提高圖版率可以增加版面的可視性和跳躍率，但一味增加圖版率就會(huì)忽視文字的作用，使版面顯得空洞、乏味?？傊O(shè)計(jì)師應(yīng)該根據(jù)版面的風(fēng)格定位來靈活調(diào)整圖版率。
（1）通過墊色處理增大圖版率
在實(shí)際設(shè)計(jì)工作中，有時(shí)會(huì)遇到圖片素材有限，但又必須提高圖版率的情況。這時(shí)可以增加色塊或圖文信息進(jìn)行墊色，使版面更具有層次感。
（2）通過重復(fù)圖片素材增大圖版率
在實(shí)際工作中，經(jīng)常會(huì)遇到素材尺寸小和畫質(zhì)低的情況。這時(shí)，可以用重復(fù)圖像和方法來解決。這種重復(fù)變化不僅可以增大圖版率，使版面看上去更加靈活、富有節(jié)奏和韻律變化，還可以使版面不在空洞、呆板。
2.4.3 跳躍率
跳躍率是指版面中的設(shè)計(jì)元素通過大小和位置變化在視覺上營造出的一種對比關(guān)系。跳躍率大的版面令人感到生動(dòng)、活潑并且富有節(jié)奏感和韻律感；而跳躍率小的版面則令人感到沉穩(wěn)、寧靜和高雅。
在實(shí)際工作中，跳躍率應(yīng)該根據(jù)版面的設(shè)計(jì)風(fēng)格和定位進(jìn)行靈活調(diào)整，以營造出更好的視覺效果。在版式設(shè)計(jì)中，跳躍率主要分為文字跳躍率和圖片跳躍率。接下來根據(jù)影響版面跳躍率的三個(gè)主要因素，結(jié)合介紹文字和圖片的跳躍率。
（1）大小對比形成跳躍感
在版面設(shè)計(jì)時(shí)，調(diào)節(jié)文字或圖片的大小可以增大或減小跳躍率。跳躍率大的版面，文字有明顯的大小、粗細(xì)和角度變化，整個(gè)版面看起來更加豐富、活潑，并且親和力更強(qiáng)；跳躍率小的版面，文字基本上大小相同，并按照一定的次序分欄排列，整個(gè)版面顯得安靜、典雅，令人感到穩(wěn)住，但又略顯呆板。
上面只說到文字對跳躍率的影響。實(shí)際上，圖片對版面跳躍率的影響也是很大的，甚至在某種情況下比文字對跳躍率的的影響更大。總之，可以調(diào)整圖片的大小、位置和方向改變版面的跳躍率。
（2）位置對比形成跳躍感
在版面設(shè)計(jì)中，調(diào)整圖片和文字的位置可以使版面具有跳躍感。例如，調(diào)整設(shè)計(jì)元素的遠(yuǎn)近、疏密和方向?？傊?，靈活調(diào)整設(shè)計(jì)元素的位置，可以使版面更具有活力，并提高了版面的閱讀趣味性。
（3）顏色對比形成跳躍感
在版面設(shè)計(jì)中，顏色與圖片、文字共同構(gòu)成了版面的主視覺元素。不同的色彩被人們賦予了不同的情感，例如，紅色象征熱情、恐懼，綠色象征生命、和平，藍(lán)色象征純潔、科技等。顏色對版面的跳躍率有很大的影響，大家可以通過不同色相、明度和純度的顏色進(jìn)行搭配，使版面看起來生動(dòng)、活潑或沉穩(wěn)、高雅。
2.4.4 黃金比例
黃金比例這一概念源自于畢達(dá)哥拉斯學(xué)派。黃金比例具有比例性、藝術(shù)性、和諧性三大特點(diǎn)。黃金比例蘊(yùn)藏著豐富的美學(xué)，也是一種古老的數(shù)學(xué)方法。黃金比例揭示了自然界中的一種美學(xué)規(guī)律，在藝術(shù)和設(shè)計(jì)中也受眾比較廣，我們可以發(fā)現(xiàn)，在大量的藝術(shù)作品中都可以找到黃金比例的身影。
比如，AC線段與AB線段的比值等于CB線段與AC線段的比值，比例約為0.618：1或者1：1.618，這一比例被稱為黃金比例。
黃金矩形的長寬之比為黃金分割率，一個(gè)黃金矩形可以無限生成等比例的黃金矩形。
黃金比例的用法也是比較多，例如我們字體需要對比的時(shí)候，可以先設(shè)定一個(gè)比較小的字體，在乘以0.618進(jìn)行對比。
3 . 排版的基礎(chǔ)規(guī)則
在我們的現(xiàn)實(shí)生活中，基礎(chǔ)的規(guī)則構(gòu)成了我們這個(gè)世界的正常運(yùn)行，在上班的時(shí)候，我們需要遵守公司的規(guī)章制度，在社會(huì)我們需要遵紀(jì)守法，在排版設(shè)計(jì)中，也會(huì)有屬于它的基礎(chǔ)規(guī)則來保證基礎(chǔ)的版面不會(huì)出現(xiàn)大的問題。
CRAP是羅賓·威廉斯提出的四項(xiàng)基本設(shè)計(jì)原理，在《寫給大家看的設(shè)計(jì)書》中凝煉為親密性、對齊、重復(fù)和對比4個(gè)基本原則。
3.1 對齊原則
在排版設(shè)計(jì)中，對齊原則是比較重要的。版面中的任何元素都不能隨意的去擺放，每一個(gè)元素都應(yīng)該與頁面上的另一個(gè)元素有某種視覺關(guān)系，而這種視覺關(guān)系雖然看不到，但是我們可以感覺的到。
對齊在版面中能讓我們的版面看起來更有秩序感，從而使頁面看起來美觀舒適，提升我們用戶的閱讀體驗(yàn)和觀感
我們常用的對齊方式有：左對齊、右對齊、居中對齊、兩端對齊、頂部對齊、底部對齊。
（1）左對齊
左對齊，是排版設(shè)計(jì)中最常見的方式，也是閱讀最舒服的對齊方式之一，一般大段的文字編排都會(huì)首選左對齊的形式。因?yàn)楦鶕?jù)中國人的閱讀習(xí)慣，人的瀏覽視線都是從左往右移，因此大段需要閱讀的文案，最好采用左對齊的方式排版。
但是由于左對齊的特殊性，容易造成右端留白過多，整體視覺失衡，所以，我們需要采用左對齊方式的情況下，要考慮到各種極端情況下的問題，這樣才能保證較好的閱讀體驗(yàn)。
（2）右對齊
右對齊，這種對齊方式與人們的閱讀習(xí)慣與視線移動(dòng)方向相反，會(huì)給人不自然的感受，但是在合適的場景下與合理的編排下，這樣的對齊形式可以給人一種有個(gè)性的錯(cuò)覺，所以，右對齊的應(yīng)用場景想多來說會(huì)少一點(diǎn)，多數(shù)的情況下，都是為了整體版面的和諧采用使用，當(dāng)版面的構(gòu)圖為左右式時(shí)，且視覺重心在右邊時(shí)，左邊的文字采用右對齊，與右邊的視覺中心（圖片或圖形）相互平衡。
（3）居中對齊
居中對齊，是用的比較多的一種對齊形式，也是屬于萬金油的對齊形式。通常居中對齊會(huì)讓排版感覺很正式、嚴(yán)肅。一種搶奪注意力的對齊方式，閱讀性上可以牢牢抓住用戶眼球，因?yàn)檫@種特性，所以在大促海報(bào)、新品發(fā)售的時(shí)候，居中對齊也是運(yùn)用的比較多的一種形式。
（4）兩端對齊
兩端對齊的排版方式多用于畫冊的排版，適合于多行文字。在面對大段英文進(jìn)行排版時(shí)經(jīng)常會(huì)因?yàn)樽止?jié)/符號(hào)的原因?qū)е挛淖謨啥撕茈y絕對對齊，導(dǎo)致視覺效果顯得比較粗糙，這時(shí)候就是用強(qiáng)制兩端對齊或者強(qiáng)制兩端對齊末行左對齊去運(yùn)用于排版。這樣可以使版式更加嚴(yán)謹(jǐn)、工整，提高閱讀的效率和增強(qiáng)視覺文字帶來的美感。
除了對文本的處理，也可以對設(shè)計(jì)元素進(jìn)行對齊，通過兩端對齊的設(shè)計(jì)手法，可以使得畫面更有秩序美，形式上也更加舒服美觀。
（5）頂部對齊
頂端對齊顧名思義就是縱向橫排的對齊方式，這種對齊形式在我國古代的書法和書簡中是比較常見的，所以，這樣排版形式可以營造一些中國的古代文化的特色，在藝術(shù)展覽或者中國的傳統(tǒng)佳節(jié)都是比較常用的，雖然它的閱讀性不如其他的對齊形式，但是，能營造一些文藝范和中國風(fēng)的氛圍。
（6）底部對齊
底對齊也同樣是使用縱向排版，可閱讀性相對來講是所有排列方式中體驗(yàn)感最差的，一般在設(shè)計(jì)排版的過程中不會(huì)單獨(dú)使用，會(huì)用于少量文字或者做裝飾修飾版面使用。也可用于電影海報(bào)或人物海報(bào)的排版方式使用。
3.1.1 對齊原則：視覺對齊
什么是視覺對齊呢？一般我們的對齊形式，都是通過軟件將兩個(gè)元素進(jìn)行物理上的對齊，這種對齊形式，可以解決99%的對齊問題，但是，剩下1%是比較特殊的情況，就是我們實(shí)際上對齊了，但是我們?nèi)搜劭瓷先ジ杏X沒有對齊，這種情況就需要我們?nèi)ナ謩?dòng)調(diào)整，也就是視覺對齊。
比如：這兩行字，左邊對齊了嗎？雖然我們用輔助線去測量，但是仍然會(huì)感覺第一行偏右了一點(diǎn)的感覺。
這個(gè)時(shí)候，我們就需要手動(dòng)的去調(diào)整視覺對齊形式，讓第一行的文字稍微出來點(diǎn)，形成視覺上的對齊。
雖然說上面的例子有點(diǎn)小眾，也不會(huì)經(jīng)常用到，但是我們畫了一組圖標(biāo)，我們按照輔助線的高度將他們調(diào)整為以后，會(huì)發(fā)現(xiàn)他們看起來有的大有的小，但是，他們在輔助線上去量，它們是一條高的，這個(gè)時(shí)候，我們就需要手動(dòng)去調(diào)整他們的視覺對齊和視覺大小關(guān)系。
調(diào)整之后，我們讓它在視覺上看起來比較統(tǒng)一，大小是一致的。
3.2 對比原則
對比，是我們在設(shè)計(jì)中提升設(shè)計(jì)感所最常用的設(shè)計(jì)手法，通常對比原則的設(shè)計(jì)思路是為了避免頁面中的元素太過的相似，如果字體、顏色、大小、線寬、形狀和空間等不相同，那就干脆讓他們截然不同。版面讓用戶能在第一時(shí)間分清頁面的主次關(guān)系，形成對比通常是最重要的方式之一。
在版式中，對比最常用的就是區(qū)分一個(gè)元素與另一個(gè)元素截然不同的，我們都看過武打片，怎么能突出主角特別厲害呢？那就需要一群人去和主角對打，然后都被主角一一打敗，這樣，就是運(yùn)用對比的手法突出主角的過人之處。
常用的對比手法有：大小對比、顏色對比、虛實(shí)對比、疏密對比。
（1）大小對比
大小對比，容易表現(xiàn)出畫面的主次關(guān)系。在設(shè)計(jì)中，經(jīng)常把主要的內(nèi)容和比較突出的形象，處理的較大些。通過大小來區(qū)分層級，視覺讓信息區(qū)分為重要和不重要的。
（2）色彩對比
色彩對比也是我們在做設(shè)計(jì)的時(shí)候想突出某些重點(diǎn)時(shí)常用的設(shè)計(jì)手法。相比于其他對比來說，顏色對比的分類也比較復(fù)雜一點(diǎn)，常見的色彩屬性中能運(yùn)用的對比的有：色相對比、明度對比、冷暖對比等。
例如，我們想在突出一些重點(diǎn)，讓用戶一眼能看清的時(shí)候，我們可以使用色相對比。
除了突出主體外，顏色對比還可以烘托氣氛，例如常見的冷暖對比，可以讓人有更有視覺沖擊力，更加吸引人的眼球。
（3）虛實(shí)對比
“虛實(shí)”和“對比”本質(zhì)上是對主次關(guān)系的取舍與調(diào)控。最?？吹教搶?shí)對比的地方是合成海報(bào)中，為了突出主體，可以將周圍一些元素按照一定關(guān)系進(jìn)行虛化。其次就是為了營造空間關(guān)系，將頁面中的元素進(jìn)行虛實(shí)的對比，讓畫面更有層次感。
（4）疏密對比
疏密對比，也可以理解為是密集圖形和空白空間，在版面中所占的比例關(guān)系，在版式中可以是圖形、標(biāo)題、正文等的分布方式，可以在某個(gè)位置密度分布，或者在其它區(qū)域少量的散落。疏密對比同時(shí)也具有大小形態(tài)的對比，明暗對比的效果，可以用空白和主體進(jìn)行不規(guī)則或規(guī)則的分布，也可以在特定領(lǐng)域集中擺放。
疏密對比可以很好的營造我們版式設(shè)計(jì)中的節(jié)奏感，讓畫面更具設(shè)計(jì)力，版面設(shè)計(jì)中，疏會(huì)產(chǎn)生秩序感，讓人感到輕松自在，而“密”給人急迫緊張的感覺，當(dāng)疏密配置在同一版面中，畫面才能產(chǎn)生節(jié)奏感，提升閱讀舒適度。
對于版式的設(shè)計(jì)來說，處理好疏密對比關(guān)系，才能平衡好讀者的視覺心理。
3.3 重復(fù)原則
重復(fù)原則，讓設(shè)計(jì)中的視覺要素在畫面中重復(fù)出現(xiàn)，比如：重復(fù)的字體、顏色、形狀、線條、大小和圖片等，這樣，可以為版面增加理性和統(tǒng)一性。
當(dāng)然，我們版式中常用的重復(fù)設(shè)計(jì)手法不是毫無目標(biāo)的去復(fù)制重復(fù)，而是將需要重點(diǎn)傳遞的元素按照一定的規(guī)律去排列，在版式中形成一個(gè)規(guī)則的秩序美。
我們生活中也有很多重復(fù)，比如我們地板上的瓷磚，還有密集的寫字樓。這些都是利用重復(fù)的統(tǒng)一的特性將空間最大化，所以，重復(fù)在設(shè)計(jì)中主要有兩個(gè)作用：一、統(tǒng)一形式 二、加深記憶。
（1）統(tǒng)一形式
在我們版面中，肯定會(huì)有主次關(guān)系，不能全部都是大小不一樣的元素，所以，我們需要統(tǒng)一設(shè)計(jì)元素和大小，來保證畫面的統(tǒng)一美。
（2）加深記憶
我們都知道，謠言重復(fù)的足夠廣，范圍足夠大，那么就會(huì)有很多人去信，這便是量變產(chǎn)生質(zhì)變，做設(shè)計(jì)的也是一樣的，我們想要加深用戶對品牌的感知，我們只需要不停的重復(fù)即可，比如，我們小時(shí)候在背誦課文的時(shí)候，一般在規(guī)定的時(shí)候內(nèi)背不下，老師都會(huì)讓我們抄幾遍，然后再抄的過程中，我們便不知不覺的背下來了，這個(gè)抄的過程也和設(shè)計(jì)的中的重復(fù)是一樣的道理。
而在實(shí)際設(shè)計(jì)工作中，我們重復(fù)的應(yīng)用也是比較廣泛的，應(yīng)用場景也是比較多的，通?？梢苑譃椋夯A(chǔ)形重復(fù)、主視覺重復(fù)、絕對重復(fù)和相對重復(fù)。
3.3.1 基礎(chǔ)形重復(fù)
在版式設(shè)計(jì)中，任何基礎(chǔ)單一構(gòu)成的形狀都是可以做重復(fù)的，單一基本形的重復(fù)構(gòu)成：在同一畫面內(nèi)只有一種正形，在此基礎(chǔ)上，通過將基本形進(jìn)行空間距離的反復(fù)排列而構(gòu)成的重復(fù)。但是任何基礎(chǔ)的形狀我們都可以歸納為點(diǎn)線面。
（1）點(diǎn)的重復(fù)
有規(guī)則的點(diǎn)的重復(fù)，可以讓我們的畫面看起來更有秩序感，讓我們的視覺感受更加舒服，但是太過于統(tǒng)一的點(diǎn)元素的重復(fù)也會(huì)過于單調(diào)，所以，我們可以通過調(diào)節(jié)形狀或者色彩來給畫面調(diào)節(jié)單調(diào)，避免畫面空乏。
不太規(guī)則點(diǎn)的重復(fù)，可以給畫面?zhèn)鬟f空間的變化，增加版面設(shè)計(jì)中的運(yùn)動(dòng)感，讓畫面看起來更有活力。
（2）線的重復(fù)
線的重復(fù)，可以是元素的線，一行文字也可以看作是線，所以在我們在做banner或者做海報(bào)的時(shí)候，會(huì)經(jīng)?？吹截Q著排版的文字，我們可以將它看作是線。
（3）面的重復(fù)
面的重復(fù)，不一定是完全相同，只要構(gòu)成的形式差不多，我們都可以將它看作的是一個(gè)面，可能上面的顏色或者紋理了有差異，我們的都可看作是面的重復(fù)。面的重復(fù)在UI和網(wǎng)頁中的應(yīng)用是比較廣泛的。
3.3.2 主視覺重復(fù)
主視覺的重復(fù)，我們說的是一個(gè)比較復(fù)雜的組合的形狀，比如場景的是品牌LOGO或者傳播比較廣的圖標(biāo)或者圖形，我們在將它復(fù)用到我們的設(shè)計(jì)中，所以，我們可以看到很多大牌的產(chǎn)品的外包裝上會(huì)印滿自家的LOGO，這些都是有規(guī)律的骨格重復(fù)，還有就是形狀是沒有規(guī)律的骨骼重復(fù)，例如一些比較不規(guī)律的形狀，我們只需要運(yùn)用的合適，也可以產(chǎn)品韻律美。
3.3.3 有序重復(fù)與隨機(jī)重復(fù)
按照重用的重復(fù)手法，我們可以將重復(fù)分為絕對重復(fù)與相對重復(fù)兩種形式，我們在設(shè)計(jì)中，可以根據(jù)實(shí)際的情況去靈活的使用和變通。
（1）有序重復(fù)
有序重復(fù)重復(fù)就是對原始的元素進(jìn)行一成不變的復(fù)制和粘貼，通常讓畫面看起來比較整齊有秩序，讓用戶在秩序美中得到舒適感。
（2）隨機(jī)重復(fù)
隨機(jī)重復(fù)則是在原來圖形的大小位置和形狀都做了一定形式的更改和處理。通過適當(dāng)改變形狀的顏色、大小和位置，讓畫面有一定的運(yùn)動(dòng)感，讓版面更加充滿活力。
3.4 親密性原則（組合）
親密性原則是將相關(guān)的項(xiàng)組織在一起，移動(dòng)這些項(xiàng)，使它們的物理位置相互靠近，
這樣一來，相關(guān)的項(xiàng)將被看作凝聚為一體的一個(gè)組，而不再是一堆彼此無關(guān)的片段。如果多個(gè)項(xiàng)目相互之間存在很近的距離，它們就會(huì)成為一個(gè)視覺單位，而不是多個(gè)孤立的元素。這樣有助于組織信息，減少混亂，為讀者提供清晰的結(jié)構(gòu)。
在我們?nèi)粘５纳钪校材芸吹胶芏嗬糜H密性原則讓我們生活更加便利的案例，比如，我們?nèi)粘Ｈス涑械臅r(shí)候，超市商品的擺放原則也是按照親密性原則，將相同的品類放在一個(gè)區(qū)域或者一個(gè)貨架，讓用戶挑選的時(shí)候更加方便，節(jié)省用戶的時(shí)間。
而在設(shè)計(jì)中，親密性的運(yùn)用而是非常廣泛的，通常我們可以分為：間距形成組合、分割形成組合、色彩形成組合、視線形成組合
3.4.1 間距形成組合
我們的潛意識(shí)里，在電梯或者馬路上，看到一對男女離的比較近，我們會(huì)默認(rèn)他們要么是情侶關(guān)系，要么是認(rèn)識(shí)的同事，又或者是其他的關(guān)系。
在版式設(shè)計(jì)中也是一樣的，我們需要將有關(guān)聯(lián)的信息進(jìn)行歸類和整理，將意思相近的的文字或者元素離的比較近，無關(guān)的可以用間距隔開，這樣，我們的用戶閱讀起來也會(huì)清晰和方便很多。
3.4.2 分割形成組合
分割形成組合其實(shí)是留白的加強(qiáng)版，因?yàn)橛袝r(shí)候我們的信息層級太多，單純的留白無法區(qū)別彼此的親密關(guān)系，我們可以通過線條或者其他的形式將版面進(jìn)行分割，讓彼此的關(guān)系能看的更加清晰明確。
3.4.3 色彩形成組合
我們都聽過一句古話，叫“近朱者赤，近墨者黑”，版式中，以相同的色彩去決定親密關(guān)系形成組合也是比較直觀的，例如我們通過相同顏色的校服便可以分辨哪些學(xué)生是一個(gè)學(xué)校的，所以，我們版面中顏色一樣的元素肯定具備親密關(guān)系。
3.4.4 視線形成組合
視線也是就是元素排列的角度，就像我們生活中，一個(gè)團(tuán)隊(duì)一起朝著一個(gè)方向去努力一樣，它也是比較直觀反應(yīng)在我們版式中的一種親密關(guān)系，如果視線的角度一樣，那么元素間肯定有某種聯(lián)系。
4 . 格式塔原理助力版式的合理性
格式塔（Gestalt）理論是心理學(xué)中的理性主義理論之一，強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性。
格式塔心理學(xué)研究認(rèn)為，人類具有不需要學(xué)習(xí)的組織傾向，使我們能夠在視覺環(huán)境中組織排列事物的位置，感受和知覺出環(huán)境的整體與連續(xù)。研究人員在觀察了很多重要的視覺現(xiàn)象后，其中最基礎(chǔ)的發(fā)現(xiàn)是人類視覺是整體的。人類的視覺系統(tǒng)自動(dòng)對視覺輸入構(gòu)建結(jié)構(gòu)，并在神經(jīng)系統(tǒng)層上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區(qū)域。格式塔原理的4項(xiàng)基本法則分別為：簡單、相似、接近、閉合。
4.1 簡單
“我們的眼睛在觀看時(shí)，眼和腦并不是在一開始就區(qū)分一個(gè)個(gè)的形象的、各個(gè)單一的組成部分，而是將各個(gè)部分組合起來，使之成為一個(gè)更易于理解的統(tǒng)一體“
簡單原理包含了常見的構(gòu)圖法則，比如，最常見的三角形構(gòu)圖、均衡構(gòu)圖法則、對陣構(gòu)圖、向心式構(gòu)圖（圓形）、對角線構(gòu)圖和X形構(gòu)圖法則，其目的都是在復(fù)雜的信息環(huán)境中構(gòu)建更易懂的整體。三角形構(gòu)圖、X形構(gòu)圖、斜線構(gòu)圖在運(yùn)動(dòng)廣告中經(jīng)常用到。
（1） 向心構(gòu)圖
向心式構(gòu)圖，是讓四周的元素呈現(xiàn)中心集中，而主體位于集中點(diǎn)的構(gòu)圖形式。簡單的說，向心式構(gòu)圖就是讓主體被四周物體共同所指，為了便于大家理解，可以腦補(bǔ)一個(gè)位于敵軍中央的將軍被包圍的場景。
它最大的特點(diǎn)，就是能夠引起強(qiáng)烈的聚焦效果，就像是對畫面主體的加成一樣，直接人的視線引導(dǎo)到畫面的主體。
（2） 均衡構(gòu)圖
均衡是視覺藝術(shù)上的一種量比關(guān)系。攝影家維利·奎克指出：“每一幅照片都應(yīng)保持一定的均衡?！币环嬅嬷挥凶龅搅司猓拍苓_(dá)到藝術(shù)審美與視覺心理上的基本要求。
均衡式構(gòu)圖也稱為平衡式構(gòu)圖，它給人以寧靜、平穩(wěn)的感覺，但又沒有對稱式構(gòu)圖的那種呆板、無變化。均衡式構(gòu)圖可分為對稱平衡和非對稱平衡兩種。
均衡式構(gòu)圖區(qū)別于對稱式構(gòu)圖，因?yàn)檫@種形式構(gòu)圖的畫面不是左右兩邊的元素、數(shù)量、大小、排列的—一對應(yīng)，而是相等或相近形狀、數(shù)量、大小的不同排列，給人以視覺上的穩(wěn)定，是一種異形、異量的呼應(yīng)均衡，是利用近重遠(yuǎn)輕、近大遠(yuǎn)小、深重淺輕等透視規(guī)則和視覺習(xí)慣的藝術(shù)均衡。如下圖中，左右不一樣，但視覺上仍對稱。當(dāng)然，均衡中也包括對稱式的均衡。
均衡構(gòu)圖的特點(diǎn)是通常這種構(gòu)圖給人以滿足的感覺，畫面結(jié)構(gòu)完美無缺，安排巧妙，對應(yīng)而平衡。常用于月夜、湖面、夜景、新聞等題材。
（3） 垂直構(gòu)圖
垂直線構(gòu)圖，是指畫面主體元素成垂直線分布，畫面具有明顯的垂直線構(gòu)成的圖案形象。
垂直線構(gòu)圖源于左右方向力的均衡狀態(tài)，因此垂直線構(gòu)圖可用來展現(xiàn)挺拔的視覺感，是展現(xiàn)力的美感的構(gòu)圖形式。通常用矩形或者線條等元素作為承載容器來展示垂直線的力度及形式感。
垂直線構(gòu)圖法的特點(diǎn)是會(huì)給人一種挺拔、纖細(xì)、向上生長、充滿無限活力、莊嚴(yán)、強(qiáng)有力的感覺。
（4） 對角線構(gòu)圖
對角線構(gòu)圖其實(shí)是引導(dǎo)線構(gòu)圖的一個(gè)分支，將視覺引導(dǎo)線沿畫面對角線方向展布，就成了對角線構(gòu)圖。
引導(dǎo)線可以是直線，也可以是曲線甚至是折線，只要整體延伸方向與畫面對角線方向接近，就可以視為對角線構(gòu)圖。
當(dāng)畫面出現(xiàn)對角線時(shí)，必定會(huì)給畫面帶來動(dòng)感。因?yàn)椴黄胶鈽?gòu)圖會(huì)讓畫面產(chǎn)生不穩(wěn)定感，并且用戶的視線方向也會(huì)受對角線的方向牽引。
對角線的特點(diǎn)，通常版式中會(huì)有最長的直線作為引導(dǎo)性。引導(dǎo)觀眾視線的能力很強(qiáng)，能帶著觀眾視線“走”遍整個(gè)畫面。
（5） X型構(gòu)圖
X形構(gòu)圖，使畫面產(chǎn)生豐滿的感覺，有的豐富而深邃的X形構(gòu)圖與設(shè)計(jì)創(chuàng)意密切配合，用來傳遞富有哲理的意味。還有一些設(shè)計(jì)按X形布局，透視感強(qiáng)烈。
X型構(gòu)圖，通常以線條、影調(diào)、元素等，按X形布局透視感強(qiáng)，有利于把人們視線由四周引向中心，或具有從中心向四周逐漸放大的特點(diǎn)。
4.2 相似
“我們的眼睛容易關(guān)注那些外表相似的物體，且不管它們的位置是不是相鄰，總是可以將他們聯(lián)系起來?！备鶕?jù)我們潛意識(shí)的分類，顏色和形狀相似會(huì)自動(dòng)歸類為一組，盡管它們可能沒有放在一起，但是，仍然不會(huì)影響我們的視覺感知。我們可以將相似原則分為三類：形狀、大小、色彩。
4.2.1 形狀
不同形狀的信息組，多用于處理信息的重要程度平均的信息，不強(qiáng)調(diào)也不弱化不同的信息組，僅區(qū)別不同。
4.2.2 大小
不同大小的信息組，多用于區(qū)分信息的重要程度。
4.2.3 色彩
如果相鄰元素色彩差異足夠大，信息組很容易用作強(qiáng)調(diào)和區(qū)分。
4.2.4 相似性原則在設(shè)計(jì)中的應(yīng)用
相似性原則在實(shí)際設(shè)計(jì)中的應(yīng)用也是比較廣泛的，我們可能在有意或者無意中會(huì)使用到，那讓我們一起來看看相似性原則是怎么提升我們設(shè)計(jì)的質(zhì)量的吧。
（1） 相似元素容易識(shí)別為一個(gè)整體
在我們設(shè)計(jì)版面或者界面的時(shí)候，我們可以把大致相同的元素看為是一個(gè)整體，例如，我們看下圖，雖然定位和車的圖標(biāo)是不同的圖標(biāo)，但是他們使用的顏色、大小和線的粗細(xì)是一致的，使得內(nèi)容看起來是一個(gè)整體，其次是文字部分，使用了相同層級的文字的字體和字號(hào)，使內(nèi)容看起來是并列的層級。
（2） 相似顏色容易識(shí)別為一個(gè)整體
我們想要不同的數(shù)據(jù)或者元素看起來有聯(lián)系，我們可以將他們的顏色改為一樣的，這樣用戶更容易分別。比如，我們在入住酒店在選擇日期的時(shí)候，我們?yōu)榱俗層脩裟芸焖俜直鏋樽约旱娜胱r(shí)候，我們可以將用戶選擇的時(shí)間段的顏色設(shè)置為一致的，這樣，使它們既有聯(lián)系又有區(qū)分。
4.3 接近
“單個(gè)視覺元素之間無限接近，視覺上會(huì)形成一個(gè)較大的整體。距離近的單個(gè)視覺元素會(huì)融為一個(gè)整體，而單個(gè)視覺元素的個(gè)性會(huì)減弱”。比如，我們只要稍微改變元素的間距，我們便可以看出不同，例如，圖中的藍(lán)色的圓點(diǎn)相互之前水平方向比垂直方向的距離更近一點(diǎn)，那么，我們可以看到4排圓點(diǎn)，而右圖我們則可以看作是4列圓點(diǎn)。
簡單的來說，便是：
- 行間距<列間距，視覺呈“列”排布，縱向關(guān)系密切形成整體
- 行間距>列間距，視覺呈“行”排布，橫向關(guān)系密切形成整體
4.3.1 鄰近性原則在設(shè)計(jì)中的應(yīng)用
間距處理降低用戶認(rèn)知
我們都知道，我們在設(shè)計(jì)版面或者APP的時(shí)候，一般會(huì)涉及到很多信息的處理，我們?yōu)榱俗層脩粼诘谝粫r(shí)間里可以區(qū)分不同信息的層級，我們可以用間距來幫助用戶來區(qū)分，比如，當(dāng)列表信息都平均分布的時(shí)候，我們大腦試圖分組簡化信息的時(shí)候，大致位置和間距都相同的列表解讀的時(shí)候，我們會(huì)花費(fèi)更多的精力，所以我們需要人為的做出差異，幫助用戶的大腦去識(shí)別。
比如，我們設(shè)置中心的列表，可以根據(jù)跟功能屬性的不同來劃分間距，讓用戶能比較直觀的判斷那些不同的功能。
4.4 閉合
人們在觀察熟悉的視覺形象時(shí)，會(huì)把不完整的局部形象當(dāng)做一個(gè)整體的形象來感知，這種知覺上的結(jié)束成為閉合。如果局部形象過于陌生或簡略，則不會(huì)產(chǎn)生整體閉合聯(lián)想。能夠讓用戶自主的產(chǎn)生閉合的圖形必定是生活中比較常見的，如：正方形、三角形、圓形、狗、車輛（這也是為什么我們能在經(jīng)常把天上云朵想象成各種不同的動(dòng)物的原因）。
4.4.1 閉合性原則在設(shè)計(jì)中的應(yīng)用
（1） 規(guī)矩的版式提升易讀性
我們在設(shè)計(jì)文字編排或者在做信息編排處理的時(shí)候，我們將信息按照簡單且常見的圖形輪廓來處理信息，這樣能提升用戶在閱讀信息中的輕松和安全感。
比如我們常見的國家反詐中心的APP的啟動(dòng)頁，便是按三角形構(gòu)圖來處理，因?yàn)樗且粋€(gè)正三角，所以會(huì)給與人一種安全穩(wěn)定的感覺，我們在APP上閱讀最多的信息列表，也都是基本上按照規(guī)矩的形狀來排版，使得版面看起來會(huì)更整潔。
（2） 不完整更具設(shè)計(jì)感
我們在日常生活中，完整且閉合的事物見過多，偶爾看到一些缺少筆畫的字體或者斷口的圖標(biāo)會(huì)覺得更具有新鮮感，會(huì)讓用戶覺得比較藝術(shù)性。但是我們在缺少筆畫和斷口的時(shí)候，要保證字體和圖形的可識(shí)別性，不能讓大腦無法產(chǎn)生完整的聯(lián)想。
5 . 常用的九個(gè)排版技巧
前面我們了解很多排版的基礎(chǔ)知識(shí)，那么，我們怎么能用到自己的工作中，這里我總結(jié)了九個(gè)常用的排版小技巧，希望對大家有所幫助。
5.1 對比產(chǎn)生設(shè)計(jì)美感
我們在設(shè)計(jì)版面的時(shí)候，一般處理的信息會(huì)比較多，我們想讓用戶能快速的讀懂版面?zhèn)鬟f的信息，我們首要的便是要大膽的對信息區(qū)分。我們的排版便是一次一次的進(jìn)行對比，通過不斷調(diào)整對比程度來讓版面閱讀起來更舒適，視覺更具張力。
對于版式的對比，我們可以有以下兩點(diǎn)需要注意：1.多段文本不要使用粗體字、2.表意不同的文字必有對比。
5.1.1 多段文本不要使用粗體字
我們在排版的時(shí)候，肯定會(huì)遇到大量文本的情況，這個(gè)時(shí)候，我們?yōu)榱俗層脩粲斜容^好的閱讀體驗(yàn)，文本的正文盡量不要去使用比較粗的字體，因?yàn)楸容^粗的文本會(huì)讓用戶感覺視覺層級比較重，體驗(yàn)會(huì)有點(diǎn)不適，其次是因?yàn)橛械奈谋居袠?biāo)題和正文，如果都用比較粗的字體，區(qū)別不是很明顯，不能形成信息層級的對比。
5.1.2 表意不同的文字必有對比
我們在處理大段信息的時(shí)候，為了能讓用戶快速分清信息的層次，對于傳遞信息不同的文本，我們需要字重上讓用戶一眼可以區(qū)分，在細(xì)節(jié)處給與用戶良好的閱讀體驗(yàn)，可以提升版式的質(zhì)量。
5.2 間距處理是閱讀體驗(yàn)的核心
前面我們了解到“格式塔原理”的“接近性原則”，用戶在閱讀版面信息的時(shí)候，第一眼便會(huì)根據(jù)元素的間距來進(jìn)行視覺心理上分類，如果版面上的間距都一樣，且間距的處理沒有邏輯，會(huì)給用戶的閱讀體驗(yàn)造成障礙，如果用戶無法主觀的區(qū)分信息的分類，那么，這個(gè)閱讀體驗(yàn)必定是不好的。
所以在排版的時(shí)候，我們需要注意將相關(guān)的元素靠近，無關(guān)的元素間距拉開，讓用戶能主觀的區(qū)分版式的層級。
我們間距的處理也不會(huì)是隨便給的，在版面中的間距也需要有一定的規(guī)律。在我們給客戶或者領(lǐng)導(dǎo)講方案的時(shí)候會(huì)具專業(yè)性。
想要給與用戶良好的閱讀體驗(yàn)，我們在處理版式中的間距問題有兩個(gè)需要注意的細(xì)節(jié)：1.行高根據(jù)文本行數(shù)制定、2.常規(guī)文本刪除字間距。
5.2.1 行高根據(jù)文本行數(shù)制定
用戶的閱讀版面信息的時(shí)候，讀兩行字和讀10行字所需要的時(shí)間成本都是不一樣的，所以，我們文本的行數(shù)的疏密程度也會(huì)大大決定用戶的閱讀時(shí)間，通常情況下，我們對多行文本的行高處理是根據(jù)文本的行數(shù)來定義的，通常是文本的行數(shù)越多，文本的行高也會(huì)越高，設(shè)置的值也在1.2-1.5倍之間，按照視覺感受可以自行的調(diào)節(jié)。
5.2.2 常規(guī)文本需注意字間距
字距大設(shè)定也對人的閱讀也會(huì)有影響，字距過大的時(shí)候像樹懶說話一樣慢，字距小的時(shí)候感覺說話比較快。
當(dāng)字距是800時(shí)候的感受，感覺像動(dòng)漫里的樹懶一樣，說起話來慢吞吞的。
當(dāng)字距是-100時(shí)候的感受，感覺像和人在吵架一樣，說話的語速比較急切。
在一般的平面設(shè)計(jì)中字距設(shè)定為正負(fù)40-70之間去選擇，但是在UI設(shè)計(jì)中，字距一般為0。
5.3 版式節(jié)奏控制用戶視覺感受
我們用戶在瀏覽任何版面的時(shí)候，都會(huì)有自己主觀的瀏覽順序，我們設(shè)計(jì)者需要通過版式去引導(dǎo)用戶的瀏覽節(jié)奏，一個(gè)好的版式可以讓用戶根據(jù)我們的內(nèi)容去自主的由上自下或從左到右的瀏覽，在瀏覽過程中就像看電影一樣，有前奏的鋪墊，有高潮有起伏，讓用戶對接下來的內(nèi)容有所期待，好的版式可以給用戶帶來一場像電影一樣的視覺盛宴。
如果我們整個(gè)頁面比較平，或者全部是比較炸的視覺，會(huì)讓用戶覺得平淡或者不舒服，所以，好的版式是有鋪墊有比較吸引人的設(shè)計(jì)點(diǎn)（例如強(qiáng)對比之類的），我們設(shè)計(jì)者要學(xué)會(huì)控制版式的節(jié)奏，
為了控制用戶的閱讀節(jié)奏，我們可以從以下兩個(gè)角度來入手：1.版式需要有始有終、2.適當(dāng)?shù)耐ｎD跟變化讓版面更豐富、3.通過版式讓用戶無意識(shí)的給內(nèi)容編號(hào)。
5.3.1 版式需要有始有終
在排版網(wǎng)頁或者多頁面的作品集及UI的時(shí)候，我們每一個(gè)頁面不會(huì)是孤單的存在，上一個(gè)頁面背景顏色可以復(fù)用到這個(gè)頁面的字體上面，上一個(gè)頁面的的點(diǎn)綴元素可以復(fù)用到其他頁面，這樣，可以讓我們的每個(gè)頁看起來更加整體，也不是每個(gè)頁面都是單獨(dú)的風(fēng)格。
5.3.2 適當(dāng)?shù)耐ｎD跟變化讓版面更豐富
國家修建高速公路為我們省下了寶貴時(shí)間，經(jīng)常走高速的人會(huì)發(fā)現(xiàn)，在我國的高速公路中沒有哪條公路是直行。也許在某一段路上你會(huì)走的很舒服不用打反向。但是走一段就會(huì)有轉(zhuǎn)彎，為什么不修建成直的，如果修成直可以省下成本，而我們也不會(huì)增加里程，非得這么修嗎？
在不改變車速的情況下連續(xù)高速行駛。眼睛、思維和身體始終保持一種不變的狀態(tài)，司機(jī)很快就會(huì)感到疲勞，注意力自然就很難集中，甚至看不清遠(yuǎn)處的物體。不用說，這很容易發(fā)生交通事故。另外長期直線行駛也會(huì)讓駕駛員產(chǎn)生困意，如果真的睡著了，后果不敢想象！
所以我們對于排版也是一樣的道理，如果在排版作品集或者網(wǎng)頁的時(shí)候，用戶在一順看下來的時(shí)候，版面的變化比較小的時(shí)候，用戶會(huì)感覺版式是比較無聊的，我們需要對用戶當(dāng)頭棒喝，在版式上的形式上作出變化，給與新鮮感。例如當(dāng)用戶看了2頁白色的版面后，下一頁我們可以適當(dāng)給點(diǎn)彩色頁面，讓用戶感覺到變化。
關(guān)于版式的變化，我們可以從以下角度入手：1.色彩的變化、2.疏密變化、3.瀏覽路線變化。
（1）色彩的變化
用戶在瀏覽一個(gè)頁面的時(shí)候，對頁面的背景色彩的感知是最強(qiáng)烈的，這樣刺激也是最大的，頁面間的不同，用顏色背景提醒用戶，已經(jīng)進(jìn)入了第二屏，是最直接的。
彩色頁面過多的時(shí)候，我們可以在中間插入消色（黑白灰），當(dāng)深色的頁面過多的時(shí)候，我們可以在中間加入淺色的頁面來進(jìn)行過渡，來平衡用戶的視覺。
（2）疏密變化
我們坐過長途汽車都知道，在高速上跑一段時(shí)間，會(huì)遇到一個(gè)服務(wù)區(qū)，方便司機(jī)乘客休息和喝水，緩解疲勞，讓大家在一段長途中不需要長時(shí)間的神經(jīng)緊繃著。
用戶在瀏覽信息密度比較大的版式的時(shí)候，我們在下一版塊或者在后面的某處需要給視覺休息，視覺休息區(qū)可以是留白、指引圖標(biāo)或者是小段的文本，在頁面中穿插，讓用戶瀏覽起來沒那么累。
（3）瀏覽路線的變化
控制版式節(jié)奏除了在色彩和疏密外，我們還可以在用戶的瀏覽路線上做改變，來提示用戶，進(jìn)了新的版塊了，這一點(diǎn)在UI和網(wǎng)頁中用的比較多，當(dāng)用戶瀏覽瀑布流或者縱向單一的版式過多的時(shí)候，我們在用戶進(jìn)入下一屏的時(shí)候可以插入橫向的排版形式，來保證用戶，瀏覽視線角度沒那么單一。
5.3.3 通過版式讓用戶無意識(shí)的給內(nèi)容編號(hào)
好的版式，應(yīng)該能讓用戶第一眼知道第一眼能看哪里，主次分明，通過版式本身來引導(dǎo)用戶的視覺走向，讓用戶主觀的知道從哪里開始到哪里結(jié)束。
一般人的正常瀏覽順序是從左自右、自上而下，由標(biāo)題到正文，這都是比較基礎(chǔ)的瀏覽順序，如果在人們視覺心理層級來說的話，有色相元素的會(huì)優(yōu)先，沒有色相的元素會(huì)次之。飽和度高的元素視覺層級會(huì)優(yōu)先，飽和度元素低的元素次之。在白色背景下，顏色越深，視覺層級越高，而黑色則相反。大的元素視覺層級優(yōu)先，小的元素視覺層級則次之。復(fù)雜的元素視覺層級優(yōu)選，簡單的視覺元素次之。
從選字體的角度來說，襯線字體的視覺層級會(huì)優(yōu)先，無襯線則次之。毛筆字和其他美術(shù)字體優(yōu)于常規(guī)黑體，
按照留白的層面來說，留白越多的元素視覺層級越高，留白少的次之。
我們在設(shè)計(jì)版面的時(shí)候，遵循這些基本的視覺規(guī)則，可以讓版式更有韻律感，讓版式自動(dòng)的使用戶觀看的時(shí)候去編號(hào)。
5.4 版式中的銜接尤為重要
在排網(wǎng)頁、作品集和長圖的時(shí)候，每一版塊與另一版塊過渡的地方就是銜接處，一個(gè)好的作品需要讓銜接做的極其自然，才能在視覺上讓用戶感覺整個(gè)作品是成套系的，沒有拼湊感。銜接自然我們可以從以下兩個(gè)角度入手：1.無關(guān)版塊需切斷、2.兩圖之間增加文字協(xié)助銜接、3.不同版塊底色區(qū)分過渡、4.版塊之間元素破柵格銜接。
5.4.1 無關(guān)版塊需切斷
老話說過“剪不斷，理還亂”，如果是不相關(guān)的頁面，我們在設(shè)計(jì)的銜接處，應(yīng)該干脆的切斷，避免造成版式的視覺錯(cuò)亂，這樣干脆利索的過渡能讓銜接更自然，用戶在視覺上的理解，會(huì)比較直觀，看起來會(huì)沒那么吃力。
5.4.2 兩圖直接增加文字協(xié)助銜接
我們都知道，圖片和圖片之間都是面，他們的切斷感是比較強(qiáng)的，在切斷的過程中有點(diǎn)生硬，我們需要在中間加上視覺緩沖區(qū)，讓中間的隔斷沒那么突兀，通常的手法是在圖片和圖片之間加上說明文字，這樣可以讓過渡更加清晰。
5.4.3 不同版塊底色區(qū)分過渡
我們?yōu)榱藚^(qū)分頁面之間的不同，提示用戶進(jìn)入了新的頁面，也可以通過底色去區(qū)分，通過色彩之間的不同，可以讓區(qū)分更加明顯，在視覺上的隔斷比較果斷，避免用戶在視覺上產(chǎn)生錯(cuò)覺，能讓用戶在視覺心理上區(qū)分頁面與頁面之間的差異。
一般我們用顏色去區(qū)分過渡也是有規(guī)律的，最常用的顏色便是，黑、白、淺灰和主色，這樣的分割可以讓版式更加整體。
5.4.4 版塊之間元素破柵格銜接
我們讓版式銜接自然除了需要將無關(guān)的版式果斷的切斷外，如果版式直接有承接關(guān)系的話，我們可以使一個(gè)元素跨越兩個(gè)版塊讓版式的銜接更加自然，且版式相關(guān)的話，在視覺心理上也給與用戶呈上啟下的作用，讓用戶能在視覺上讓版式關(guān)聯(lián)起來。
5.5 版式中元素都有隱形基線
版式中每個(gè)元素都有其放置在其位置的意義，橫向跟縱向都有隱形的對齊基線，可以讓設(shè)計(jì)看起來更規(guī)整協(xié)調(diào)。優(yōu)秀的設(shè)計(jì)師應(yīng)該細(xì)心對待每一個(gè)元素， 不管它是主體元素還是點(diǎn)綴元素。關(guān)于隱形基線我們可以從以下幾點(diǎn)入手：1.位置也可以復(fù)用、2.善用硬柵格的版式設(shè)計(jì)。
5.5.1 位置也可以復(fù)用
在日常的設(shè)計(jì)中，元素樣式的復(fù)用可以增加版式的一致性，同樣，我們元素的位置也是可以復(fù)用的，可以使得用戶在版式中能找到規(guī)律，有規(guī)律的版式會(huì)讓用戶更覺得版式的統(tǒng)一感，能提升用戶在閱讀過程中的視覺舒適感。
5.5.2 善用硬ssm格的版式設(shè)計(jì)
我們可以通過柵格讓我們的設(shè)計(jì)更加規(guī)矩，通過柵格去約束我們元素的位置，我們只有先去了解規(guī)則，才能去打破它，這樣能保證我們的版式是符合大眾的審美，不會(huì)做出特別奇怪的排版，所以我們在設(shè)計(jì)前，應(yīng)該習(xí)慣先做好柵格。
柵格的處理也是有公式的：(總寬-頁邊距-水槽大小)/柵格數(shù)量=每列寬度。
5.6 版式中的自然留白
“留白并不是刻意的，填充才是?！?，我們要習(xí)慣在版面中留白，不要為了讓版面更豐滿，而去刻意的填充一些不相關(guān)的元素，我們畫面中只有正負(fù)空間平衡，才能看起來比較舒適，這里的負(fù)空間就是說的留白。我們可以從以下兩個(gè)角度來入手：1.元素和英文都是留白的支點(diǎn)、2.點(diǎn)綴元素讓版式更加細(xì)膩。
5.6.1 元素和英文都是留白的支點(diǎn)
我們在排版的時(shí)候，有時(shí)候會(huì)因?yàn)榘媸胶退夭牡脑?，?dǎo)致某一方的排版元素會(huì)偏多，使版面失衡，這里我們需要知道的是，關(guān)于留白的定義不一定非得是空白的，所以當(dāng)頁面失衡的時(shí)候，或許我們加點(diǎn)基礎(chǔ)的設(shè)計(jì)元素：一條線、一個(gè)圖案點(diǎn)綴就夠了，也可以是英文作為點(diǎn)綴。
5.6.2 點(diǎn)綴元素讓版式更加細(xì)膩
我們在遇到素材或者文案比較少的時(shí)候，這種情況，我們可以在空白的區(qū)域添加一些簡單點(diǎn)綴的圖形，作為裝飾，這樣不僅可以使我們的版式看起來沒那么空，讓排版會(huì)看起來比較豐富。
如果我們覺得單純的元素點(diǎn)綴缺乏設(shè)計(jì)感，可以在點(diǎn)綴元素加入一些層次，提升整個(gè)版式的設(shè)計(jì)品質(zhì)感。
5.7 抽象讓版式具備美感
我們在看一步新劇的時(shí)候，非常討厭別人來劇透，甚至于過分的劇透都可以讓我們放棄一部劇。
這便是人內(nèi)心矛盾的地方，我們在設(shè)計(jì)中也需要注意，想要讓用戶覺得你的版式有設(shè)計(jì)感，不能讓用戶一眼就看透了，那么，就提不起用戶的欣賞感。
我們?yōu)榱俗層脩裟荏w驗(yàn)到設(shè)計(jì)版式的高級感，通常用的設(shè)計(jì)手法是：1.圖形提升設(shè)計(jì)感、2.讓用戶適當(dāng)思考。
5.7.1 圖形可以提升設(shè)計(jì)感
文字可以簡單直接的傳遞信息，但是由于文字太具象沒有任何的思考空囘，所以文字本身不具有絕對的美感。而圖形可以給瀏覽者更多的想象空間。
如果我們在設(shè)計(jì)版式的時(shí)候，全身大段的文字描敘，會(huì)讓用戶看起來比較累，我們可以適當(dāng)?shù)母母陌媸?，把一些能用圖標(biāo)表示的地方設(shè)計(jì)為圖標(biāo)，讓版式更具吸引力。
5.7.2 讓用戶適當(dāng)思考
讓瀏覽者一眼看透，完全不需要思考的設(shè)計(jì)一定是路邊的宣傳單頁，居民樓里的牛皮癬廣告。真正讓瀏覽者感覺具有設(shè)計(jì)感，有品質(zhì)感的設(shè)計(jì)，一定是需要用戶去思考的。
例如，我們蘋果官網(wǎng)的文案就是做的比較高級，比如，把大屏幕上見換成，屏幕參數(shù)之類的，不僅沒有記憶點(diǎn)，反而有點(diǎn)廉價(jià)。
5.8 特殊符號(hào)元素貫穿版式
遵循前面7條技巧可以讓版式做到漂亮且易讀，然而如果給版式中加入一些特殊符號(hào)貫穿整個(gè)設(shè)計(jì)，可以讓版式增加記憶點(diǎn)，也會(huì)更高級且更整體。
例如京東吉祥物的微笑弧度就被應(yīng)用在APP選擇狀態(tài)中，提升了用戶的記憶點(diǎn)，還有每年阿里雙十一的活動(dòng)，都會(huì)運(yùn)用貓頭元素，讓用戶在不知不覺中提升了對品牌的印象。
5.9 組件思維來排版
UI設(shè)計(jì)需要嚴(yán)格遵循組件規(guī)范，可以極大的提升統(tǒng)一性使設(shè)計(jì)更嚴(yán)謹(jǐn)，排版同樣需要遵循視覺規(guī)范，比如字號(hào)、色彩、點(diǎn)綴元素等，只有遵循規(guī)范的排版才是邏輯清晰且易讀的。
通常版式中能復(fù)用的有：字體與字號(hào)、元素間距、色彩位置、特殊點(diǎn)綴、投影與圓角、手機(jī)模型等。
6 . 總結(jié)
我們的排版設(shè)計(jì)一定是需要遵循設(shè)計(jì)規(guī)則來進(jìn)行創(chuàng)作的，單單憑借直覺，是很難做出優(yōu)秀的設(shè)計(jì)作品的，為什么小朋友都喜歡看動(dòng)畫片，因?yàn)榱α渴蔷€性放大的，是不需要積累經(jīng)驗(yàn)的，靠變異或靠發(fā)現(xiàn)變身器就可以了。但是做設(shè)計(jì)上需要積累的，愿大家在設(shè)計(jì)道路上能越走越遠(yuǎn)。
原文地址：整點(diǎn)設(shè)計(jì)（公眾號(hào)）
作者：Endings
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》設(shè)計(jì)師應(yīng)該了解的版式知識(shí)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)