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