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