@研習設K先生?:不知道你有沒有想過這樣一個問題,設計真的是只憑借個人喜好,就能隨意發揮的工作嗎?只憑借感覺,顯然是靠不住的。平面設計師也需要遵循一定的設計規則。而掌握這些具有指導性的設計原則,能夠幫助我們在短時間內,更快更好的達成設計目標。

在這一期內容中,我們會向大家介紹「接近原則」。

版式設計法則除了「接近原則(親密性)」外,還有這 2 個原則也非常重要:

  1. 對比原則
  2. 對齊原則

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

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

在現實生活中,我們會將大雁的飛行軌跡看成「人」字形或是「一」字形,也都是接近原則在起作用。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

標志本身的含義會與圖像所表達的內容共同映入眼簾。當然隨著內容的變化,你也可以選擇那些通用的幾何圖形。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

歡迎關注研習社的微信公眾號:「Yanxishe2017」

點贊 44
收藏 107
繼續閱讀相關文章

發表評論 已發布 3

還可以輸入 800 個字
 
 
載入中....
3 收藏