用一篇超全面的干貨，幫你完全掌握「接近原則」知識(shí)點(diǎn)

@研習(xí)設(shè)K先生?：不知道你有沒有想過這樣一個(gè)問題，設(shè)計(jì)真的是只憑借個(gè)人喜好，就能隨意發(fā)揮的工作嗎？只憑借感覺，顯然是靠不住的。平面設(shè)計(jì)師也需要遵循一定的設(shè)計(jì)規(guī)則。而掌握這些具有指導(dǎo)性的設(shè)計(jì)原則，能夠幫助我們?cè)诙虝r(shí)間內(nèi)，更快更好的達(dá)成設(shè)計(jì)目標(biāo)。

在這一期內(nèi)容中，我們會(huì)向大家介紹「接近原則」。

版式設(shè)計(jì)法則除了「接近原則（親密性）」外，還有這 2 個(gè)原則也非常重要：

1. 對(duì)比原則
2. 對(duì)齊原則

在開始之前，我們首先需要解決一個(gè)關(guān)鍵性問題？那就是什么是接近原則？很明顯對(duì)吧，我們從它的名字中就能看出來(lái)，這是一個(gè)跟距離有關(guān)的概念。更詳細(xì)一點(diǎn)說，它是指物體與物體之間的相對(duì)距離會(huì)影響到我們的判斷，人的大腦會(huì)下意識(shí)的將眼前相互靠近的物體建立關(guān)聯(lián)性，它們會(huì)被視為你一個(gè)整體去看待，而相反的，距離較遠(yuǎn)的則會(huì)被自動(dòng)區(qū)隔開。

我們?cè)倥e個(gè)例子，畫面中出現(xiàn)的圓點(diǎn)零零散散，我們會(huì)很自然的認(rèn)為他們是一一個(gè)相互獨(dú)立的單元，每個(gè)圓形都是單獨(dú)存在的個(gè)體。可當(dāng)它們的位置逐漸靠近后，畫面中又會(huì)發(fā)生怎樣的現(xiàn)象呢？當(dāng)圖形相互靠近時(shí)，它們也就很自然的被我們認(rèn)定成了三個(gè)組合。這種現(xiàn)象雖然不起眼，可是含義卻是重大的。

在現(xiàn)實(shí)生活中，我們會(huì)將大雁的飛行軌跡看成「人」字形或是「一」字形，也都是接近原則在起作用。

海洋中，那些體型較小的魚類會(huì)相互靠近成群結(jié)隊(duì)，這種相互接近的隊(duì)形能夠有效避免天敵的襲擊。因?yàn)檫@樣會(huì)讓其他動(dòng)物將它們誤認(rèn)為是一條更大的魚。

抬頭仰望天空中的星空，我們會(huì)看到北斗七星。我們之所以能夠辨認(rèn)出它，也多虧了星星之間相互靠近形成了一個(gè)勺子的形狀。當(dāng)然人們對(duì)于星座的辨認(rèn)也是相同的原理。

一起來(lái)總結(jié)一下我們剛剛都學(xué)到了什么？眼睛在認(rèn)知事物時(shí)具有自動(dòng)分組的傾向。元素之間并不需要緊緊挨著，只需要相互靠近，大腦就會(huì)將其視為一個(gè)整體。通過對(duì)距離的修改，我們可以任意改變組合的數(shù)量。比如將它劃分成一個(gè)大的組合與另一個(gè)較小的組合。現(xiàn)在呢？畫面又變成了左邊相互靠近的四條線與右邊相互靠近的兩條線。只要熟練掌握元素之間的距離，就可以隨意的創(chuàng)建元素組。

通過對(duì)認(rèn)知心理的學(xué)習(xí)，我們知道了人腦會(huì)更傾向于將那些相互靠近的物體看作一個(gè)完整的組合。那么根據(jù)這個(gè)原則，我們只需要改變物體與物體之間的距離，也就可以對(duì)元素的成組與否進(jìn)行操控了。但問題真就這么簡(jiǎn)單嗎？其實(shí)我們可以繼續(xù)深度挖掘一下。既然成組只需要修改距離，那么我們又該去聚集哪些元素，和去疏遠(yuǎn)哪些元素呢？這也就引出了接近原則中的一個(gè)重要概念。

我們都知道有亮光的地方就必定會(huì)存在陰影。這是一個(gè)很客觀的現(xiàn)象。中國(guó)人在很早之前就已經(jīng)領(lǐng)悟到了這點(diǎn)，世間萬(wàn)物總會(huì)產(chǎn)生相生相克的屬性。接近原則也是一樣。有關(guān)聯(lián)自然就會(huì)產(chǎn)生區(qū)分的概念。

元素之間相互靠近，也會(huì)下意識(shí)的暗示人們，它們之間一定具備某些共同的關(guān)聯(lián)。而相互遠(yuǎn)離的元素，也自然會(huì)產(chǎn)生相互排斥或者是互不相關(guān)的印象。

中國(guó)的古語(yǔ)中，有這么一句話「物以類聚，人以群分」 也就是指朋友之間門當(dāng)戶對(duì)、志同道合的統(tǒng)稱。當(dāng)然它也可以用在版式設(shè)計(jì)里。

比如我們看畫面中的抽屜非常亂，我們應(yīng)該如何去整理它呢？接近原則中的分類屬性就體現(xiàn)在這個(gè)整理的過程中。

通過對(duì)衣服的分類并成組就能很好的解決，將劃分好的物品收納在各個(gè)分區(qū)里，之前非常凌亂的抽屜也就變得整整齊齊了。

這是超市中蔬菜的貨架，可以明顯看到，相同品種的素菜被劃分到了一塊，它們看上去是不是也是一個(gè)個(gè)組合呢？

日常生活中分類與成組的例子非常多，比如廁所的門口會(huì)將人們劃分成男人與女人。

那么回到設(shè)計(jì)當(dāng)中，當(dāng)你在電梯里看到這樣的樓層按鈕，它們之間相互靠近卻毫無(wú)關(guān)聯(lián)，是不是就會(huì)覺得它很反人類呢？

接近原則在版式設(shè)計(jì)中的應(yīng)用相當(dāng)廣泛，當(dāng)你在閱讀一段文字時(shí)就會(huì)很清楚的發(fā)現(xiàn)，正是由于相關(guān)的文字相互靠近，而不相關(guān)的文字相互遠(yuǎn)離。我們才能正確的去閱讀信息。

一旦這個(gè)規(guī)則被打破，字與字之間的閱讀順序就會(huì)被破壞。我們也就沒有辦法正確解讀版面上的信息了。

在中文語(yǔ)境里，漢字有兩種方向上的編排形式，一種是水平方向相互靠近，垂直方向相互遠(yuǎn)離的橫排閱讀模式，閱讀的順序是從左向右，從上到下去閱讀。

而另一種編排形式是水平方向相互遠(yuǎn)離，而垂直方向相互靠近的豎向編排。這種編排下閱讀順序是從右往左，從上往下去閱讀。

文字信息的出現(xiàn)順序需要與編排形式相配合，我們才能正確的將信息正解的解讀出來(lái)。一旦文字之間貼近與遠(yuǎn)離的規(guī)則出現(xiàn)問題，那就會(huì)產(chǎn)生出各種閱讀上的障礙，那么接下來(lái)我們一起來(lái)看看那些有問題的設(shè)計(jì)案例都是什么樣子吧。

當(dāng)你路過一個(gè)飯店的窗口，看到畫面中的文字信息。你會(huì)怎樣去閱讀？是小炒便飯？還是小便炒飯?

我們?cè)诳催@個(gè)例子，那么應(yīng)該怎么去閱讀呢？難道是「餐粉炒宵，快炒小夜」這明顯并不通順。對(duì)于以漢字為母語(yǔ)的我們，經(jīng)過腦補(bǔ)自然會(huì)知道它在講什么，可如果是外國(guó)人去看，就肯定會(huì)暈菜的。

我在看這個(gè)例子，依然是相同的問題，文字豎向的距離太近，橫向的距離太遠(yuǎn)。

如果說類似電話號(hào)碼的文字信息，我們還可以參照日常經(jīng)驗(yàn)去判斷，那么在面對(duì)這個(gè)公交站牌中陌生的地名時(shí)，就真的不知道怎樣去閱讀了。

貼近與遠(yuǎn)離本身就是一種分類的過程，人們會(huì)將具有關(guān)聯(lián)的事物擺放在一起，而相互沒有關(guān)系的事物就會(huì)被區(qū)隔開。除此之外，接近原則也能輔助閱讀，當(dāng)文字之間彼此靠近時(shí)，視線便會(huì)從一個(gè)字跳到距它最近的另一個(gè)字上，因此相互靠近的文字也會(huì)形成視覺上的引導(dǎo)流程。接下來(lái)我們一起從實(shí)際出發(fā)，看一看接近原則在設(shè)計(jì)中的應(yīng)用都有哪些。

我們手機(jī)中的設(shè)置界面，就是貼近和遠(yuǎn)離的經(jīng)典案例。具有相似屬性的功能會(huì)彼此靠近成為一個(gè)組合，而組與組之間又相互遠(yuǎn)離，形成了獨(dú)立的單元。

接近原則在文字編排中充當(dāng)著重要作用，具有相同層級(jí)的信息，只需要相互靠近，就能產(chǎn)生關(guān)聯(lián)，不同的小組合再次靠近，也就形成了下一個(gè)層級(jí)之間的內(nèi)容關(guān)聯(lián)。他們整體看上去又是一個(gè)更大的組合。

我們看這個(gè)畫面存在什么問題？文字組上下的空間是相等的，所以我們并沒有辦法有效區(qū)分出這段文字究竟是和上方圖片是相關(guān)的，還是在指下方圖片中的內(nèi)容。同時(shí)圖片與圖片之間的距離又非常接近，給人一種圖片是一組，文字是一組的錯(cuò)覺。那么解決這個(gè)問題的方法便是，讓文字組與相關(guān)的圖片相互靠近。

如果周圍的空間允許，增大每個(gè)組合周圍的空間距離，能夠讓信息的區(qū)分更明顯。如果左右的距離有限，我們可以將圖片相互錯(cuò)開。這樣一來(lái)也就能很好的區(qū)分信息組了。

除了創(chuàng)建視覺條理外，接近原則還有突出強(qiáng)調(diào)的作用。我們看畫面出現(xiàn)了四個(gè)同等配置的組合，如果我們想要強(qiáng)調(diào)其中一個(gè)要怎么辦呢？改變其中一個(gè)組合周圍的距離大小，將另外三個(gè)組合靠近配置，這樣一來(lái)，版面頂部的組合就被凸顯出來(lái)了。相較于之前均等的配置，這樣的版式顯然會(huì)更有重點(diǎn)。

你知道嗎？幾何上的寬高相等，實(shí)際看上去其實(shí)卻并不一樣大。我們把線條去掉，是不是就更加明顯了。如果想得到視覺面積上的相等，就需要忽略幾何上的大小，以視覺面積去判斷它們。組合的技巧或許能幫助到你，相互靠近的元素會(huì)帶來(lái)更大的視覺面積。在實(shí)際工作中，我們一定會(huì)遇到那些即使放大，視覺面積依然不理想的主形象。這時(shí)應(yīng)該怎么辦呢？

我們可以做一個(gè)分類，比如圖像與圖像之間的組合。

可以選擇那些與主形象具有關(guān)聯(lián)性質(zhì)的圖片，當(dāng)它與主形象進(jìn)行組合時(shí)，我們不僅可以得到更大的視覺面積，同時(shí)也能提高畫面的表現(xiàn)力。

我們也可以將文字放大。形成圖與字共同組成的全新視覺。

不同形式的組合，也會(huì)讓版面變的更加豐富。文字與圖形的搭配能夠讓原本單調(diào)的文字變的更加直觀和有趣。

標(biāo)志本身的含義會(huì)與圖像所表達(dá)的內(nèi)容共同映入眼簾。當(dāng)然隨著內(nèi)容的變化，你也可以選擇那些通用的幾何圖形。

當(dāng)兩種信息融合到一起時(shí)，總會(huì)給人一種陌生的視覺感受。巧妙運(yùn)用這些會(huì)讓你的版面變的更加出色。

以上我們得知，當(dāng)元素之間的位置相互靠近時(shí)，它們不僅會(huì)成為一個(gè)組合，同時(shí)成組后的元素視覺面積也會(huì)得到增大。那么新的問題也就出現(xiàn)了，元素究竟貼多近才能算是一個(gè)組合呢？想要區(qū)分兩個(gè)獨(dú)立的元素，又應(yīng)該離多遠(yuǎn)呢？當(dāng)你從今天的視角去看版面時(shí)，你會(huì)發(fā)現(xiàn)，它們無(wú)非是由多個(gè)更小的組合所構(gòu)成的整體。那么一個(gè)版面中最多可以容納多少個(gè)信息組呢？這些問題接下來(lái)我們一起去尋找答案吧。

首先我們來(lái)尋找第一個(gè)問題，一個(gè)版面中最多能夠容納多少組合呢？其實(shí)這個(gè)問題比較好解決，只要抽樣調(diào)查就好了。那么經(jīng)過我們耐心的解構(gòu)之后，最終我們得出了一個(gè)結(jié)論。

在一個(gè)版面中，最少有一個(gè)組合。最多雖然沒有絕對(duì)的上限，但常規(guī)情況下，九個(gè)組合就已經(jīng)足夠了，它是相對(duì)來(lái)說比較常見的數(shù)量。

那么另一個(gè)問題呢？距離多近才算是一個(gè)組合呢？多遠(yuǎn)才能區(qū)分成獨(dú)立個(gè)體呢？

接下來(lái)我們通過一個(gè)實(shí)驗(yàn)來(lái)進(jìn)一步梳理一下這個(gè)問題。首先，畫面中的四個(gè)臺(tái)燈緊緊挨著彼此，也就是說，它們從主觀上看一定是一個(gè)組合。那么接下來(lái)我們調(diào)整間距，讓臺(tái)燈之間相互距離半個(gè)臺(tái)燈的距離。現(xiàn)在重新看待這個(gè)畫面，它依然是一個(gè)組合的形式。

那么我們把臺(tái)燈之間的距離預(yù)留出一個(gè)臺(tái)燈的間距呢？由于臺(tái)燈與臺(tái)燈之間的距離小于臺(tái)燈與邊界的距離，所以即便他們離的很遠(yuǎn)，我們依然可以認(rèn)定它們是屬于一個(gè)組的元素。

將距離設(shè)置成一個(gè)半臺(tái)燈那么遠(yuǎn)，又會(huì)發(fā)生什么呢？這時(shí)水平方向上，臺(tái)燈與頁(yè)面邊緣的距離已經(jīng)近乎等同于臺(tái)燈與臺(tái)燈之間的距離了。這時(shí)成組的傾向開始消失，臺(tái)燈逐漸成為了單獨(dú)的個(gè)體。

我們?cè)诩哟筮@個(gè)距離，預(yù)留出兩個(gè)臺(tái)燈的寬度。現(xiàn)在看這個(gè)畫面，臺(tái)燈之間的關(guān)聯(lián)已經(jīng)消失，距離頁(yè)面的空間已經(jīng)小于臺(tái)燈與臺(tái)燈之間的距離，此時(shí)頁(yè)面中的四個(gè)元素成了絕對(duì)獨(dú)立的存在。

如果在這個(gè)頁(yè)面中在加入一個(gè)臺(tái)燈，那么就變成了，左側(cè)兩個(gè)獨(dú)立的臺(tái)燈再加上右側(cè)的一組臺(tái)燈。

一切都是相對(duì)而言的。相對(duì)于頁(yè)面來(lái)說，所有臺(tái)燈加在一塊可以被看成一個(gè)整體，而進(jìn)一步觀察，頁(yè)面中可以分成四個(gè)獨(dú)立的個(gè)體，而第三排臺(tái)燈之間的距離明顯小于與其他臺(tái)燈的距離，所以這三個(gè)臺(tái)燈會(huì)被看成是一個(gè)組合。

在版式設(shè)計(jì)中，這種相對(duì)的概念依然存在，無(wú)論字間距、行間距怎樣變化，只要他們整體的比例不變，版面就不會(huì)出現(xiàn)閱讀上的障礙。

我們來(lái)看幾個(gè)例子，可以明顯看出，版面中字距是最小單位，而頁(yè)邊距是整個(gè)頁(yè)面中距離最大的空間。無(wú)論是畫冊(cè)設(shè)計(jì)還是報(bào)紙雜志，甚至網(wǎng)頁(yè)和 UI 設(shè)計(jì)，這些都只是載體不同罷了。文字編排的根本性規(guī)則是不會(huì)變的。只要保證各個(gè)間距組合之間的相對(duì)性比例，就能更好的控制版面，讓信息更高效的傳達(dá)。

為了方便大家對(duì)于本期內(nèi)容的理解，接下來(lái)我們一起運(yùn)用接近原則去完成一個(gè)設(shè)計(jì)案例。希望大家能夠舉一反三，更好的吸收與理解。

首先介紹一下我們虛構(gòu)的項(xiàng)目背景，這是一版超級(jí)英雄的電影海報(bào)，主要投放地點(diǎn)是商場(chǎng)的走廊以及街區(qū)路邊的燈箱海報(bào)。這就意味著，版面中的內(nèi)容編排方向應(yīng)該盡量精簡(jiǎn)，在很短的時(shí)間里讓人記住它。

電影的出品方通常會(huì)把相關(guān)宣傳物料下發(fā)給負(fù)責(zé)相關(guān)內(nèi)容的公司制作，這里我們主要收集到這些信息。首先就是確定版面中主視覺的大小，我們將蜘蛛俠的圖片安排在版面的中心位置。

接下來(lái)我們把蜘蛛俠的標(biāo)準(zhǔn)字放置在圖像下方，根據(jù)閱讀邏輯，當(dāng)人們的視線被照片吸引之后，自然會(huì)向下閱讀主標(biāo)題文字。緊接著是英雄遠(yuǎn)征的副標(biāo)題。在標(biāo)題字的頂部，我們加入漫威公司的標(biāo)志，那么到這里，下方的標(biāo)題部分就已經(jīng)初步形成了一個(gè)簡(jiǎn)單的視覺單元。

其余信息我們繼續(xù)沿著中軸線去安排它們的位置，同樣的，我們將元素相互聚集到一起，形成一個(gè)更大的組合。在版面下方的左右角落里，我們加入日期與宣傳語(yǔ)，讓版面內(nèi)部的元素支撐起版心結(jié)構(gòu)。同時(shí)這兩個(gè)小元素也可以理解成更小的元素組。

那么到這里這個(gè)版面中的信息就安排好了，通過對(duì)信息的布局，我們創(chuàng)建出了一個(gè)更大的版心面積。

頁(yè)面總共被劃分成了五欄，主體與標(biāo)題占據(jù)了3欄的寬度，與頁(yè)面呈現(xiàn)2 ：3的分割比例，非常接近黃金分割。

到這里你可能會(huì)覺得主體難免顯得有些單調(diào)，不要急，還記得我們之前說過的組合方法嗎？我們可以選擇一個(gè)與主體相關(guān)的元素去和它形成組合。只要仔細(xì)思考，我們總能找出有趣的組合方式，比如這里我們就選擇了蜘蛛俠胸前的這個(gè)標(biāo)志圖形作為切入點(diǎn)。

當(dāng)然這也是一種很常見的組合手法，把電影里面那些具有象征含義的圖形和人物進(jìn)行一個(gè)結(jié)合。在抽象的圖形與具象的人物的對(duì)比之下，視覺效果一般都會(huì)比較具有沖擊力。

那不僅僅是電影海報(bào)會(huì)用到這種手法，在類似的商業(yè)視覺領(lǐng)域，也能夠看到這種處理技巧。

好像有點(diǎn)跑題，那我們回到剛剛的案例上，接下來(lái)我們?yōu)榘婷嬷x擇同色系搭配通常是最保險(xiǎn)的做法了，它能讓背景與主形象建立起視覺關(guān)聯(lián)。接下來(lái)是圖形的顏色，我們繼續(xù)吸取蜘蛛俠戰(zhàn)衣的配色。同時(shí)為了突出質(zhì)感，我們?cè)谶@之上在加入一層光感。

我們?cè)谥車砑佑捌械臒o(wú)人機(jī)，作為整個(gè)畫面中的點(diǎn)綴元素出現(xiàn)在版面中。最后，在背景部分添加一些對(duì)應(yīng)的場(chǎng)景，那么到這里這個(gè)版面就基本完成了。

是不是沒過癮呢？我們?cè)賮?lái)一版不一樣的。這一次我們將傳播類型修改成雜志的封底廣告，媒介的變化，也意味著編排風(fēng)格的改變，對(duì)于雜志這種既能夠近距離觀看，讀者又有充足時(shí)間閱讀的情況，信息的編排可以變得更加飽滿一些。

這里我選擇將蜘蛛俠的英文放大，成為版面中的主要框架。將標(biāo)題置于版面頂端，緊接著，我們加入副標(biāo)題「英雄遠(yuǎn)征」。那從劇情中可以知道，這次遠(yuǎn)征其實(shí)屬于秘密行動(dòng)，所以在標(biāo)題的處理上，我們也讓它顯得比較低調(diào)一些。

接下來(lái)為了視覺的平衡，我們從版面底部加入主題口號(hào)。我們可以將文本看作是圖形，裁切處理會(huì)讓它看起來(lái)更加特別。當(dāng)然這里我們還可以做一個(gè)有趣的處理，讓圓點(diǎn)替換成蜘蛛俠的插畫。因?yàn)榘婷嬷形淖至款A(yù)計(jì)會(huì)比較多，所以為了差異化的處理，這里我們也把這段話處理成描邊的樣式。

接著，我們將其余信息劃分好層級(jí)后依次安排到版面中。文字之前通過空間的劃分，形成了一個(gè)個(gè)視覺單元，而這些視覺單元也因?yàn)楸舜丝拷中纬闪艘粋€(gè)整體。那么到這里這個(gè)版面的架構(gòu)就基本完成了。

接下來(lái)我們選擇一張蜘蛛俠的照片，置入到組合里面。這一次我們選擇黑底色，因?yàn)楹谏彩沁@部電影里面首次出現(xiàn)的戰(zhàn)衣顏色。

當(dāng)然啦，我們也可以在背景中添加一些層次變化，讓它看起來(lái)更有細(xì)節(jié)。最后，在其中添加一些人物騰空時(shí)的陰影，那么這個(gè)雜志的封底廣告就設(shè)計(jì)完成了。

最后我們?cè)賮?lái)看一下最終效果。

以上便是本期的全部?jī)?nèi)容了。我們一起來(lái)總結(jié)一下今天的內(nèi)容吧，接近原則在日常生活中隨處可見，我們可以運(yùn)用貼近與遠(yuǎn)離操作去達(dá)到區(qū)分與分類的目的。在文字編排與版式設(shè)計(jì)中，接近原則具有重要的指導(dǎo)地位。當(dāng)元素與元素相互靠近，他們就會(huì)被看成一個(gè)整體，作為版面中的主體來(lái)說，組合的方式能夠進(jìn)一步增大視覺面積。最后貼近與遠(yuǎn)離是相對(duì)的概念，只要保證相對(duì)性，文字編排就不會(huì)有大問題。

歡迎關(guān)注研習(xí)社的微信公眾號(hào)：「Yanxishe2017」