本文幹貨為主，閱讀約8分鐘[心]

前兩期我們講到了四大基本原則中的對比和對齊，想必大家還有丢丢印象，我們一起來回顧一下~

對比（Contrast）的基本思想到底是什麼？

其實我們僅僅是要避免頁面上的元素太過相似，如果元素（字體，顔色，大小，線寬，形狀，空間等）不相同，那麼我們幹脆就讓它截然不同，要讓頁面引人注目，對比通常是最重要的一個因素。正是它能使讀者首先看到頁面中更重要的元素。

對齊（ALignment）是什麼意思？

任何元素都不能在頁面上随意安放，每個元素都應該與頁面上的另一個元素有某種視覺聯系，這樣能建立一種清晰，精巧且清爽的外觀。

前期沒學習的小夥伴也可以戳藍色字體：闆式-對比原則、闆式-對齊原則。

好了，回顧完之後，進入今天的正題：闆式設計中親密性原則。

剛入行的新設計師是否遇到這樣一些問題：文案，圖片，符号四處分布，連角落都不放過，占據了每一處空間，基本上沒有任何的留白。這種情況比比皆是，他們好像在設計過程中不敢留有空白。

有時候遇到學生的作業也是這樣的狀況，頁面滿滿的毫無透氣感。我會開玩笑問到學生，如果讓你設計一款手機的包裝盒，你敢像蘋果手機的包裝盒一樣中間放一個logo就完事了嗎？當然學生一定是搖頭的。

如果頁面設計中充斥着太多的内容，這個頁面會顯得雜亂無章，讀者也無法從中很快看到所需的信息。當我們面對很多信息的時候要怎麼做到版面的透氣感，怎麼樣讓讀者很快能看到所需的信息呢？這時候就要靠親密性原則來發揮它的作用了！

親密性（Proximity）

彼此相關的項應當靠近，歸組在一起。如果多個項相互之間存在很近的親密性，它們就會形成一個視覺單元，而不是多個孤立的元素。這有助于組織信息，減少混亂，為讀者提供清晰的結構 。

為了讓大家更加深刻的理解，下面舉一些簡單的例子闡述下這個概念。

首先，一起來看看下面這兩張圖，哪張圖會讓你很快速的回答出這張圖中有多少個數字，多少種顔色?

很明顯圖二能讓快速給你答案，至少我們輕易的能知道一共有多少種顔色，一共有多少個數字。

我們再來看這樣一段文字：

是不是感覺沒有什麼閱讀欲望？這是因為文字緊密挨在一起，沒有任何層級關系的時候，眼睛就會莫名産生疲倦感。

那我們來改變一下：找到其中3個概念折行并移動它們使得相同的元素凝聚成一個組，把間距拉開。再來看的時候，會發現信息的層級更清晰了。

我們再來将這段文字稍微改變下，把文本抱團把标題孤立，這樣看上去是不是更加清晰明了。這其實就是運用了闆式中的親密性原則，把相關聯的要素進行靠近處理。掌握好親密性設計原則能使讀者快速理解版面信息，減少讀者的閱讀時間，同時優化負空間使版面優化更完整。

最後，我們來看看下面企業名片的布局。

在這樣小的空間裡你看到了多少個單獨的元素？眼睛要停留多少次才能看全這張名片上的所有信息？

你的眼睛是不是停過5次？名片上的每一項看上去似乎都和其他項沒有關聯，信息混亂。

那我們利用親密關系将名片稍微修改下，得到下圖。

從這張圖上我們是不是就看到了名片的意義！“我是誰？我的電話是多少？哪些方式可以找到我？”等等這些信息，在圖二明顯比圖一更能準确的傳達。

這就是親密的作用：讓有關聯的元素組合在一起成為一個視覺單元，而不是孤立的元素，頁面也會變得更加有條理。

綜上，我們可以發現親密性的目的是實現組織性。盡管對齊對比原則也能達到這個目的，但是利用親密性原則會更加簡單！我們隻需将簡單的相關的元素放在一組建立更近的親密性，就能自動實現條理性和組織性，信息也會更容易被記住，而且能更好的體現留白。

為了讓大家加深對親密性原則的理解，我們來提取一段文字實操一下。

PS新建一個寬800，高1100，分辨率72的文件，就以上文字部分按照親密關系我們先來打堆分組。使它們各自成為一個視覺單元，建立起條理性和組織性，方便閱讀。

按照語義進行親密性設置，把文字分為了三組。控住好組與組之間的比例，組内标題與内容的比例，讓信息更有效的傳達。在進行親密性關系建立時一定要注意間距的關系。字間距<行間距<段間距<組間距。

按照建立起來的親密關系我們設計下海報。嘗試純文字風格的海報設計，對文字進行提煉，當文字或者做修飾，讓其形成強烈視覺沖擊力。

設計之前，用栅格輔助頁面（上一期有講到栅格化的設置方法，這裡我們不再多做講解），按照我們提煉的文字關系進行版式再設計。

主色調我們用了藍色，輔色用了藍色的高強度對比色金色，色相環上相距120度到180度之間的兩種顔色，稱為對比色。例如：主色調用了藍色，要搭配藍色的對比色做輔助色，我們可以直接在色相（H）加上120度-180度間的所有數值。對于顔色不敏感的小夥伴可以試試。

字體選擇上，為了增加字體對比，标題改為了“方正清刻宋體”，正文選擇了“方正蘭亭細黑”，這裡要說明下這些字體都是有版權的，小夥伴如果要設計商用的作品，請一定要确認好版權的問題。

在确定了親密關系，字體，優化好顔色的基礎上，繼續排版。那麼問題來了，在不借用素材的前提下，僅僅用這麼些文字我們可以怎麼樣排版讓版面更具飽滿感和設計感？

在這裡我們選擇運用文字填充版面，因為文字的意義除了傳達内容讓讀者閱讀之外還可以修飾版面填充版面。（前面也做過類似案例，不知道大家還記得嗎？）

本次設計中我們提取了文字“親密性原則”并填充設置為0，添加大小為2的金色描邊，并通過層疊裁切的方式把文字符号化。

然後給文字建蒙版（如圖示），簡曆選區在蒙版填充黑色遮擋。文字的一半就被裁切掉。這是文字符号化使用的一種常見方法-層疊裁切。講到這兒跟大家稍微拓展一下，裁切可以是上，下，左，右等任意方向，裁切對象可以是文字/商品/人。

右側小字部分按親密關系分組運用好對比和對齊原則，很容易讓版面有更多可變性。

比如把版面做下對稱換位置，再增加一個點綴色，背景改一下色系，畫面感是不是又發生了變化呢？

然而右下角該怎麼處理？一樣在不使用素材的條件下，那我們再來做文字圖形化。為了更好的達到圖形化效果，可以選擇在AI軟件裡完成一款球狀镂空立體字。圖示如下：

此效果步驟詳解：

1，繪制填充為0，描邊為1的正圓。

2，使用刻刀工具随意分割三塊，然後輸入文案“版式設計基礎”一共6個字，分别對應在分割好的3個版塊中。注意3個塊面要置于頂層（鼠标右鍵排列-置于頂層）。

3，分别對三個塊面執行頂層封套扭曲。（選擇塊面和文字 對象-封套扭曲-用頂層對象建立）快捷鍵：Ctrl art c。

4，執行後全部選中并執行對象-擴展。并鼠标右鍵編組。

5，Ctrl C複制，Ctrl B原位粘貼在下方。顔色改為黑色按比例縮放在中心位置。

原圖層更換顔色，全部選擇，進行CTRL art b混合，這樣球狀镂空立體字就完成了，為了實現顔色的多樣化和更突出文字，複制一個頂層字并更換顔色。球狀镂空立體字效果就做出來了，記得保存好。

然後将做好的文件置入到PS裡面，在PS裡更換顔色進行編輯，放在右下角補給畫面。顔色依然使用對比色的配色法則（再提醒下大家可以直接做加減運算配色）。

主體畫面完成了，最後我們再豐富下背景，這裡采用了現有圖形的再利用，具體操作如下：複制球體镂空圖形文字，放大，圖層混合模式為疊加，适當改變透明度。置于藍色背景層的上方，可以嘗試多個位置的擺放。

做張樣機看一下

以案例海報版式為基準，用同樣的版式延展一張商業海報。

采用對角線構圖的方式，主體置于右下角，把主題文案按照親密關系分組成為6個獨立的視覺單元。

配色上使用“采物法”吸取本身産品的顔色綠色作為主色，桌棍的木紋色作為輔色。提取文字放大符号化使用當背景，用幾何形修飾下細節。這樣一張海報就完成了。

來張樣機試試~

今天的親密關系到這裡就講完了，文末一起總結下本期知識點：

1，版式中親密關系的建立，讓它們就形成一個視覺單元，而不是多個孤立的元素。這有助于組織信息，減少混亂，為讀者提供清晰的結構。

2，在文字排版過程中要遵循：字間距<行間距<段間距<組間距，這樣會讓你的排版更具層級感，畫面也會更幹淨。

3，配色可采用對比色配色法（120度-180度）間的顔色都可以嘗試，也可采用‘采物法’吸取産品本身的顔色。

4，文字符号化使用，可以通過不同大小/不同位置/不同透明度 進行差異化調整。

你學廢了嗎？

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!