文章：設計中的超整理術，和淩亂說再見

來自公衆号：研習設

在開始之前，我們首先需要解決一個關鍵性的問題？那就是什麼是接近原則？很明顯對吧，我們從它的名字中就能看出來，這是一個跟距離有關的概念。更詳細一點說，它是指物體與物體之間的相對距離會影響到我們的判斷，人的大腦會下意識地将眼前相互靠近的物體建立關聯性，它們會被視為你一個整體去看待，而相反的，距離較遠的則會被自動區隔開。

我們再舉個例子，畫面中出現的圓點零零散散，我們會很自然地認為他們是一個個相互獨立的單元，每個圓形都是單獨存在的個體。可當它們的位置逐漸靠近後，畫面中又會發生什麼樣的現象呢？當圖形相互靠近時，它們也就很自然地被我們認定成了三個組合。這種現象雖然不起眼，可是含義卻是重大的。

在現實生活中，我們會将大雁的飛行軌迹看成“人”字形或是“一”字形，也都是接近原則在起作用。

海洋中，那些體型較小的魚類會相互靠近成群結隊，這種相互接近的隊形能夠有效避免天敵的襲擊。因為這樣會讓其他動物将它們誤認為是一條更大的魚。

擡頭仰望天空中的星空，我們會看到北鬥七星。我們之所以能夠辨認出它，也多虧了星星之間相互靠近形成了一個勺子的形狀。當然人們對于星座的辨認也是相同的原理。

一起來總結一下我們剛剛都學到了什麼？眼睛在認知事物時具有自動分組的傾向。元素之間并不需要緊緊挨着，隻需要相互靠近，大腦就會将其視為一個整體。通過對距離的修改，我們可以任意改變組合的數量。比如将它劃分成一個大的組合與另一個較小的組合。現在呢？畫面又變成了左邊相互靠近的四條線與右邊相互靠近的兩條線。隻要熟練掌握元素之間的距離，就可以随意地創建元素組。

通過對認知心理的學習，我們知道了人腦會更傾向于将那些相互靠近的物體看作一個完整的組合。那麼根據這個原則，我們隻需要改變物體與物體之間的距離，也就可以對元素的成組與否進行操控了。但問題真就這麼簡單嗎？其實我們可以繼續深度挖掘一下。既然成組隻需要修改距離，那麼我們又該去聚集哪些元素，去疏遠哪些元素呢？這也就引出了接近原則中的一個重要概念。

我們都知道有亮光的地方就必定會存在陰影。這是一個很客觀的現象。中國人在很早之前就已經領悟到了這點，世間萬物總會産生相生相克的屬性。接近原則也是一樣。有關聯自然就會産生區分的概念。

元素之間相互靠近，也會下意識地暗示人們，它們之間一定具備某些共同的關聯。而相互遠離的元素，也自然會産生相互排斥或者是互不相關的印象。

中國的古語中，有這麼一句話“物以類聚，人以群分” 也就是指朋友之間門當戶對、志同道合的統稱。當然它也可以用在版式設計裡。

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

通過對衣服的分類并成組就能很好地解決，将劃分好的物品收納在各個分區裡，之前非常淩亂的抽屜也就變得整整齊齊了。

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

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

那麼回到設計當中，當你在電梯裡看到這樣的樓層按鈕，它們之間相互靠近卻毫無關聯，是不是就會覺得它很反人類呢？

接近原則在版式設計中的應用相當廣泛，當你在閱讀一段文字時就會很清楚地發現，正是由于相關的文字相互靠近，而不相關的文字相互遠離。我們才能正确地去閱讀信息。

一旦這個規則被打破，字與字之間的閱讀順序就會被破壞。我們也就沒有辦法正确解讀版面上的信息了。

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

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

文字信息的出現順序需要與編排形式相配合，我們才能正确地将信息解讀出來。一旦文字之間貼近與遠離的規則出現問題，那就會産生出各種閱讀上的障礙，那麼接下來我們一起來看看那些有問題的設計案例都是什麼樣子吧。

當你路過一個飯店的窗口，看到畫面中的文字信息。你會怎樣去閱讀？是小炒便飯？還是小便炒飯?

我們在看這個例子，那麼應該怎麼去閱讀呢？難道是“餐粉炒宵，快炒宵夜”這明顯并不通順。對于以漢字為母語的我們，經過腦補自然會知道它在講什麼，可如果是外國人去看，就肯定會暈菜的。

我在看這個例子，依然是相同的問題，文字豎向的距離太近，橫向的距離太遠。

如果說類似電話号碼的文字信息，我們還可以參照日常經驗去判斷，那麼在面對這個公交站牌中陌生的地名時，就真的不知道怎樣去閱讀了。

貼近與遠離本身就是一種分類的過程，人們會将具有關聯的事物擺放在一起，而相互沒有關系的事物就會被區隔開。除此之外，接近原則也能輔助閱讀，當文字之間彼此靠近時，視線便會從一個字跳到距它最近的另一個字上，因此相互靠近的文字也會形成視覺上的引導流程。接下來我們一起從實際出發，看一看接近原則在設計中的應用都有哪些。

我們手機中的設置界面，就是貼近和遠離的經典案例。具有相似屬性的功能會彼此靠近成為一個組合，而組與組之間又相互遠離，形成了獨立的單元。

接近原則在文字編排中充當着重要作用，具有相同層級的信息，隻需要相互靠近，就能産生關聯，不同的小組合再次靠近，也就形成了下一個層級之間的内容關聯。他們整體看上去又是一個更大的組合。

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

如果周圍的空間允許，增大每個組合周圍的空間距離，能夠讓信息的區分更明顯。如果左右的距離有限，我們可以将圖片相互錯開。這樣一來也就能很好地區分信息組了。

除了創建視覺條理外，接近原則還有突出強調的作用。我們看畫面出現了四個同等配置的組合，如果我們想要強調其中一個要怎麼辦呢？改變其中一個組合周圍的距離大小，将另外三個組合靠近配置，這樣一來，版面頂部的組合就被凸顯出來了。相較于之前均等的配置，這樣的版式顯然會更有重點。

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

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

可以選擇那些與主形象具有關聯性質的圖片，當它與主形象進行組合時，我們不僅可以得到更大的視覺面積，同時也能提高畫面的表現力。

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

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

标志本身的含義會與圖像所表達的内容共同映入眼簾。當然随着内容的變化，你也可以選擇那些通用的幾何圖形。

當兩種信息融合到一起時，總會給人一種陌生的視覺感受。巧妙運用這些會讓你的版面變得更加出色。

事實上我們得知，當元素之間的位置相互靠近時，它們不僅會成為一個組合，同時成組後的元素視覺面積也會得到增大。那麼新的問題也就出現了，元素究竟貼多近才能算是一個組合呢？想要區分兩個獨立的元素，又應該離多遠呢？當你從今天的視角去看版面時，你會發現，它們無非是由多個更小的組合所構成的整體。那麼一個版面中最多可以容納多少個信息組呢？這些問題接下來我們一起去尋找答案吧。

首先我們來尋找第一個問題，一個版面中最多能夠容納多少組合呢？其實這個問題比較好解決，隻要抽樣調查就好了。那麼經過我們耐心的解構之後，最終我們得出了一個結論。

在一個版面中，最少有一個組合。最多雖然沒有絕對的上限，但常規情況下，九個組合就已經足夠了，它是相對來說比較常見的數量。

那麼另一個問題呢？距離多近才算是一個組合呢？多遠才能區分成獨立個體呢？

接下來我們通過一個實驗來進一步梳理一下這個問題。首先，畫面中的四個台燈緊緊挨着彼此，也就是說，它們從主觀上看一定是一個組合。那麼接下來我們調整間距，讓台燈之間相互距離半個台燈的距離。現在重新看待這個畫面，它依然是一個組合的形式。

那麼我們把台燈之間的距離預留出一個台燈的間距呢？由于台燈與台燈之間的距離小于台燈與邊界的距離，所以即便他們離的很遠，我們依然可以認定它們是屬于一個組的元素。

将距離設置成一個半台燈那麼遠，又會發生什麼呢？這時水平方向上，台燈與頁面邊緣的距離已經近乎等同于台燈與台燈之間的距離了。這時成組的傾向開始消失，台燈逐漸成為了單獨的個體。

我們在加大這個距離，預留出兩個台燈的寬度。現在看這個畫面，台燈之間的關聯已經消失，距離頁面的空間已經小于台燈與台燈之間的距離，此時頁面中的四個元素成了絕對獨立的存在。

如果在這個頁面中在加入一個台燈，那麼就變成了，左側兩個獨立的台燈再加上右側的一組台燈。

一切都是相對而言的。相對于頁面來說，所有台燈加在一塊可以被看成一個整體，而進一步觀察，頁面中可以分成四個獨立的個體，而第三排台燈之間的距離明顯小于與其他台燈的距離，所以這三個台燈會被看成是一個組合。

在版式設計中，這種相對的概念依然存在，無論字間距、行間距怎樣變化，隻要他們整體的比例不變，版面就不會出現閱讀上的障礙。

我們來看幾個例子，可以明顯看出，版面中字距是最小單位，而頁邊距是整個頁面中距離最大的空間。無論是畫冊設計還是報紙雜志，甚至網頁和UI設計，這些都隻是載體不同罷了。文字編排的根本性規則是不會變的。隻要保證各個間距組合之間的相對性比例，就能更好的控制版面，讓信息更高效的傳達。

為了方便大家對于本期内容的理解，接下來我們一起運用接近原則去完成一個設計案例。希望大家能夠舉一反三，更好的吸收與理解。

首先介紹一下我們虛構的項目背景，這是一版超級英雄的電影海報，主要投放地點是商場的走廊以及街區路邊的燈箱海報。這就意味着，版面中的内容編排方向應該盡量精簡，在很短的時間裡讓人記住它。

電影的出品方通常會把相關宣傳物料下發給負責相關内容的公司制作，這裡我們主要收集到這些信息。首先就是确定版面中主視覺的大小，我們将蜘蛛俠的圖片安排在版面的中心位置。

接下來我們把蜘蛛俠的标準字放置在圖像下方，根據閱讀邏輯，當人們的視線被照片吸引之後，自然會向下閱讀主标題文字。緊接着是英雄遠征的副标題。在标題字的頂部，我們加入漫威公司的标志，那麼到這裡，下方的标題部分就已經初步形成了一個簡單的視覺單元。

其餘信息我們繼續沿着中軸線去安排它們的位置，同樣的，我們将元素相互聚集到一起，形成一個更大的組合。在版面下方的左右角落裡，我們加入日期與宣傳語，讓版面内部的元素支撐起版心結構。同時這兩個小元素也可以理解成更小的元素組。

那麼到這裡這個版面中的信息就安排好了，通過對信息的布局，我們創建出了一個更大的版心面積。

頁面總共被劃分成了五欄，主體與标題占據了3欄的寬度，與頁面呈現2 ：3的分割比例，非常接近黃金分割。

到這裡你可能會覺得主體難免顯得有些單調，不要急，還記得我們之前說過的組合方法嗎？我們可以選擇一個與主體相關的元素去和它形成組合。隻要仔細思考，我們總能找出有趣的組合方式，比如這裡我們就選擇了蜘蛛俠胸前的這個标志圖形作為切入點。

當然這也是一種很常見的組合手法，把電影裡面那些具有象征含義的圖形和人物進行一個結合。在抽象的圖形與具象的人物的對比之下，視覺效果一般都會比較具有沖擊力。

那不僅僅是電影海報會用到這種手法，在類似的商業視覺領域，也能夠看到這種處理技巧。

好像有點跑題，那我們回到剛剛的案例上，接下來我們為版面着色，選擇同色系搭配通常是最保險的做法了，它能讓背景與主形象建立起視覺關聯。接下來是圖形的顔色，我們繼續吸取蜘蛛俠戰衣的配色。同時為了突出質感，我們在這之上在加入一層光感。

我們在周圍添加影片中的無人機，作為整個畫面中的點綴元素出現在版面中。最後，在背景部分添加一些對應的場景，那麼到這裡這個版面就基本完成了。

是不是沒過瘾呢？我們再來一版不一樣的。這一次我們将傳播類型修改成雜志的封底廣告，媒介的變化，也意味着編排風格的改變，對于雜志這種既能夠近距離觀看，讀者又有充足時間閱讀的情況，信息的編排可以變得更加飽滿一些。

這裡我選擇将蜘蛛俠的英文放大，成為版面中的主要框架。将标題置于版面頂端，緊接着，我們加入副标題“英雄遠征”。那從劇情中可以知道，這次遠征其實屬于秘密行動，所以在标題的處理上，我們也讓它顯得比較低調一些。

接下來為了視覺的平衡，我們從版面底部加入主題口号。我們可以将文本看作是圖形，裁切處理會讓它看起來更加特别。當然這裡我們還可以做一個有趣的處理，讓圓點替換成蜘蛛俠的插畫。因為版面中文字量預計會比較多，所以為了差異化的處理，這裡我們也把這段話處理成描邊的樣式。

接着，我們将其餘信息劃分好層級後依次安排到版面中。文字之前通過空間的劃分，形成了一個個視覺單元，而這些視覺單元也因為彼此靠近，又形成了一個整體。那麼到這裡這個版面的架構就基本完成了

接下來我們選擇一張蜘蛛俠的照片，置入到組合裡面。這一次我們選擇黑底色，因為黑色也是這部電影裡面首次出現的戰衣顔色。

當然啦，我們也可以在背景中添加一些層次變化，讓它看起來更有細節。最後，在其中添加一些人物騰空時的陰影，那麼這個雜志的封底廣告就設計完成了。

最後我們再來看一下最終效果。

以上便是本期的全部内容了。我們一起來總結一下今天的内容吧，接近原則在日常生活中随處可見，我們可以運用貼近與遠離操作去達到區分與分類的目的。在文字編排與版式設計中，接近原則具有重要的指導地位。當元素與元素相互靠近，他們就會被看成一個整體，作為版面中的主體來說，組合的方式能夠進一步增大視覺面積。最後貼近與遠離是相對的概念，隻要保證相對性，文字編排就不會有大問題。

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