這一期咱們繼續學習格式塔系列原則，那麼在本節課，我挑選了兩個相互之間具有聯繫的原則，它們分別是「相似原則」以及「共同命運原則」，當然，這也是在平面設計中被普遍應用的規則。如果你還在被總監說自己的作品里沒有關聯性？又或者是感覺自己的版面中元素都各自為戰？那麼本節課程或許會幫助你解決這些問題。

上期回顧：

閱讀文章 >>

相似原則

那麼接下來，我們首先來認識一下 什麼是相似原則。相似原則告訴我們，具有相同屬性的元素，會比看起來完全不同的元素更具有關聯性。

如圖中所示，我們會下意識的認為圓形與圓形之間具有一定的聯繫，它們具有相同的輪廓特徵，當然方形也是一樣的。視覺上的相似性有助於我們去簡化眼前所見到的信息，同時也方便大腦的理解。相對於其他方式，相似的顏色更容易被我們關聯到一起。即便形狀不同，他們也會被看成是具有關聯的整體。

與上一節提到的接近原則類似，相似原則同樣具有關聯與區分的作用。但相似原則並不會受到位置上的影響，即便距離很遠也依然可以創建關聯，這與接近原則完全不同。

大小是我們可以用來創建相似性質的另一個有效工具。就算所有形狀特徵都相同，大小的相似性也會讓更大的形狀變得突出並相互形成一個組合，更小的形狀也自然成為了另一個組合。另外方向上的相似，也可以創建關聯。我們只需要有意識的去創建相似性就能將元素相互關聯起來。

其實相似原則的應用非常普遍，舉個簡單的例子，像連連看這類遊戲，就利用了人們視覺中的這種分辨關聯性的生理現象。具有相同輪廓與色彩的圖標更容易被我們發現，即使它們之間距離很遠也能夠輕鬆引起我們的注意。

球場上，無論球員的位置再怎麼變化，我們可以通過衣服的顏色去辨認他們是哪個隊伍的。

反過來，相似原則當然也能幫助我們將不相關的內容區分出來。我們一起做個遊戲，你能在短時間內找到徐錦江老師嗎？

當然如果你覺得太過簡單的話，我們也是可以加大難度的嘛……

那麼，到這裏我們可以初步總結一下相似原則的內容了，它是指人眼在認知周圍環境時，會下意識的將樣貌近似的視覺元素歸為一類，並且這種認知過程不會受到距離的限制。那麼了解這些之後，我們可以怎樣去將這個視覺原理應用到設計當中呢？接下來我將帶領大家一起去尋找這個答案。

相似原則在設計中的應用

1. 建立關聯

千萬不要小看相似原則。認識這種視覺組織機制，能夠有效幫助我們改善自己的設計。通過總結與歸納，我們試着將相似原則做了進一步的功能劃分。也希望大家能夠更快的吸收，並且理解它在設計當中所起到的功能與作用。

相似原則在設計應用中，一共有四個主要的功能屬性。那麼它們分別都是什麼呢？首先第一個作用就是建立聯繫，也就是說，我們可以利用相似原則的這一特性去輕鬆的在版面中建立關聯屬性。

我們來舉個例子。試想一下，如何快速在人群中分辨出同一隻隊伍呢？其實答案也很簡單，我們可以利用相似原則，在隊員之間添加相似的屬性，從而去將他們聯繫起來。那麼比如說，我們可以讓隊員帶上相同的帽子，這樣是不是就達到了關聯的目的了呢？

同樣的道理，面對眼前的文本，我們又需要怎樣才能區分出段落來呢？想一想人群的例子，或許你已經知道答案了。沒錯，只要在各個段首之上添加相似的屬性，我們就能夠輕鬆的將段落區分開。

比如在每一段的前方添加項目符號，它就如同人群之中的帽子一樣，將各個段首相互關聯到了一起。也正是因為項目符號的加入，我們才能在第一時間區分出它們所在的位置。

比較有趣的是，在文字編排中，這個共同的屬性可以是任意麵貌。比如它可以是帶有顏色的編號。

又或者是完全隱形的一段空間，只需要將所有的段首都向內縮進，我們就能夠創建出一個相同的屬性了。

當然這也是日常編排中，使用頻率較高的一種段落區分手法。

另外還有一種形式，就是將每一段上方的距離增大，這也是相對常用的做法。它既運用了上節提到的接近原則，同時也具有相似的屬性在其中。

頁碼是書籍設計中必不可少的元素之一，它的主要功能除了便於查閱之外，還具有關聯頁面的作用。頁眉或頁碼這些元素，通常會出現在每一頁版面中的相同位置上，也正因如此，無論版面中的內容在怎麼變化，它們看上去也都是具備關聯性的整體。

正如之前段落的區分一樣，看不見的空間在版面中也非常重要。比如我們如果想在版面中心放置一個方形元素，那麼它的大小和位置勢必會影響到周圍的空白形狀。針對這種情況，我們可以通過重複空間的大小的方式去建立關聯。通過將版面分割成更小的空間，我們就可以更加精確的去控制留白了。經過目測可以得知，方形的大小非常近似於頁面九分之一的尺寸，並且並不居中。那麼它既然非常接近，我們乾脆就將它規範成與周圍空間一樣的比例吧。經過調整后，版面中正形與負形呈現出了相同的比例關係，也就是說它們之間產生了一定的視覺關聯。

在版式編排與標誌規範中都會運用這種空間上的近似手法去規範版面。經過處理后的版面會更加簡單且便於理解，當你發現一個版面中無論是看得見的元素還是看不見的元素都看起來具有關聯時。那麼不用懷疑，一定是相似原則在起作用。

版面中元素的聯繫也正是這些細節在起着關鍵作用，相同的元素會讓人感到統一，相似的屬性也讓版面中的變化性顯得更加和諧。

2. 秩序/規律

那麼相似原則除了能夠幫助我們建立關聯之外，它還具有那些作用呢？接下來我們會繼續學習第二個功能屬性，那就是創建秩序與規律。

這一點並不難理解，舉個簡單的例子，如果我們將凌亂的房間與整潔的房間相比較，它們之間會有什麼區別呢？很顯然，整潔的房間內相同的物品會被歸類擺放，這增強了整體空間中的共性特徵。

軍人的方隊也是另一個顯著的例子，人們穿着相同的制服，就連動作也是一樣的。這樣所帶來的結果便形成了一種規則和秩序。這也正是相似原則在起作用。

由於具有重複性的圖案是沒有邊緣概念的，因此在那些對頁面邊緣大小不確定的設計場景中，我們經常能夠見到類似的設計。比如我們家中的壁紙就是個典型的例子，製造商沒有辦法預估每個房間的牆壁尺寸，那麼乾脆使用具有重複性的圖片去平鋪開來，這樣一來，問題也就隨之解決了。

具有秩序感的構成，在日常生活中也很常見，比如背包、包裝、抱枕等等都被採用類似的圖案。它會給人一種華麗且繁雜的視覺印象。

當然，我們也可以在秩序中創建「不同」。這類畫面除了具有「逼死強迫症」的功能外，也可以讓我們輕鬆建立焦點。當版面中大部分都是相似或相同的元素時，那個不同點便會被無限放大，我們會很容易注意到它們，也正因如此，這種手法在平面設計中的應用也是相當普遍的。

3. 節奏/韻律

那麼認識了關聯與秩序之後，接下來我們一起來學習近似原則的第三種特性。那就是節奏與韻律，你可以將它理解為具有層次變化的一種規律。

一成不變的重複，雖然具有秩序感，但有時候也會令人產生疲勞。可變化添加太多，又會顯得格外凌亂，惹人生厭。複雜的圖形讓人們理解起來也會比較吃力。那有沒有什麼方法能兼具變化與秩序呢？答案是肯定的，我們可以介於兩者之間，在變化的基礎上去增強元素之間的相似性。而這個過程也就是產生節奏和韻律的關鍵。

我們回想一下音樂的節拍，在變化的同時是不是也會具有重複性的循環呢？

假如你聽到的是一成不變聲音，那也就稱不上是音樂了。就如同圖中一樣。是不是隔着屏幕就彷彿聽到了一陣陣噪音？

在版式設計中節奏與韻律也非常重要，對於內容本身來說，不同層級的信息需要在視覺上體現出足夠的差別，而同級別的信息，外觀看起來也應該具有相同的樣貌。

我們以這個書籍的版面為例，一起來分析一下它的構成都有哪些規則與變化。首先是重要信息，我們可以看出，畫面中標誌綠色的全都是同一層級的內容。既然重要那麼它在版面中就應該是最醒目的，因此更大的視覺面積是必不可少的。那麼其次呢，是相對次重要的信息，也就是畫面中標註藍色的內容。最後剩下的自然就是其他信息了。線條既起到裝飾的目的，又提供了分割的作用。而底部的頁碼在作為信息補充外，也具有點綴版面的功能。

我們再來看這個版面，所有主標題的字號和色彩都保持一致，相似的特徵有助於人們快速識別下一個標題。圖片的視覺面積也採用了相同的原則，主次分明，同一層級下的圖片面積近乎一致。

4. 視覺引導

那麼到這裏我們還剩下最後一個特性沒有講到了。它就是視覺引導，和接近原則相同，相似原則也具有引導屬性。

如同街邊的路燈一樣，當具有相同屬性的元素以漸變的形式出現時，便會產生指向性。將我們的目光引導向更遠的地方，又或者是更近的地方。

這兩幅海報就利用了這一點。我們可以明顯看出左側的重複圖形逐漸變小，將視線引向了標題；同樣的，右側的這幅海報通過將文字進行從小到大的變化，將視線引導至底部的海浪繪畫，從而指出了內容的主題。

當然相似原則中的引導方法不僅如此，我們這裡有四台摩托車與相對應的簡介。在圖像與文字之間橫向添加五條相似的線，這樣也就形成了四段平行通道，視線會在線條的分割下水平移動。

當然你也可以運用接近原則，讓內容相關的元素相互靠近，不相關的內容相互遠離，達到引導視線的目的。而每一台車的下方都添加了文字，這同樣是一種相似，就如同人群中的帽子一樣，它們就這樣被有效的組織起來了。

還記得相似原則不受位置的限制嗎？我們只需在摩托車附近添加一個編號，並且在下方對應的內容上也添加一個相同的編號。這樣一來兩組內容就被很輕鬆的聯繫到一塊了，引導的目的也就隨之達成了。

看不見的空間同樣是建立關聯的有效手法，用圖形直接標識出頂部空間的位置，也可以很直觀的建立關聯。

當然我們也可以運用色彩的關聯作用，訣竅就是找到那些可以作為共性特徵的屬性，並加以利用，視線便會根據相似原則在具有關聯的元素上來回移動。

我們來做一個案例，我們虛擬了一個「蓮花攝影展」的項目，以上是照片與文案信息。首先我們確定版面中的元素結構，根據視覺重心將元素安排好位置關係。接下來替換圖片，將照片中的主體安排在相應的位置上。其次，我們將文字信息按照重要程度劃分主次並替換預想的草圖。

接下來我們給文字組放一個裝飾線條，讓信息顯得更突顯的同時，也讓文字組合看起來更加飽滿。在組合上方添加一個花朵的圖標，它能讓文字組與主體的關聯性更強。在組合中添加一個顏色，讓花瓣與文字組合之間的聯繫更緊密。那麼到這裏，這個版面就完成了。

以上我們向大家介紹了與相似原則相關的四種屬性，它們分別是關聯、秩序、節奏以及引導。那麼接下來我們會向大家繼續介紹另一個與相似原則相關的視覺特性，那就是知覺恆常性。什麼是知覺恆常性呢？它所指的是我們大腦在認知的過程中其實一直保持着一個相對穩定的狀態，即便客觀條件在一定範圍內發生了變化，我們也依然能夠清晰的辨認事物。

我們來舉幾個例子吧，比如當你看到了畫面中的這張夢露照片，你就會對這個畫面產生一定的印象中。

無論這張照片發生過怎樣的變化，我們對它的認知都會保持不變。也正是因為我們的視覺認知具有恆常性，它們不會被當成是其它新的事物來看待。

再舉個例子，當你看到眼前的這幾扇門時，你會發現它們每個都帶有一個相同的按鈕。當你點擊了其中一個按鈕后，得到的答案是門被打開了。那麼這時我們便會根據經驗將其餘的三個按鈕進行關聯，認為只要點擊紅色按鈕就能夠開門，即便是很久之後再看到相同的門我們也同樣會這樣認為。

同樣的道理，我們通過學習認識到某種蘑菇是可以食用的，那麼這個蘑菇的印象就會存留在我們腦海當中。當你再次看到樣貌相似的蘑菇時，我們便會將其與印象中的蘑菇進行比對。即便他們的角度、形狀等樣貌均不相同，但由於知覺恆常性的存在。

我們便能很自然的辨別出它們是屬於同一類的，可食用的蘑菇。

知覺恆常性可分為大小恆常性、形狀恆常性、顏色恆常性、距離恆常性、速度恆常性等不同的性質變化。

但其實你只需要知道，我們的大腦具有辨認相同物體的能力就好了。比如我們現在看到的這個圖形。無論它經過怎樣的變化，我們都能辨認出它們是相同的樣子。

可能到這裏你會問，我們學習這樣的知識會有什麼用呢？其實一切的設計原理都是對各種現象的總結于歸納。只有去了解它們的運作方式，我們才能在設計中去注意到它的存在。

當然我們也可以有意識的去打破這種知覺上的恆常性。比如畫面中，從第一個視角看上去是自行車的形狀，但從另一個視角卻變成了另外的樣子。

在設計中我們也依然能夠運用到它，當我們需要讓兩個畫面相互建立關聯的時候，就不需要再選擇一張完全一樣的照片了。由於知覺恆常性的存在，無論是形狀的變化還是特徵的改變，我們都不會將其認為是新的事物。

因此即便另外一張照片的角度並不相同，我們也能夠將它們視為同一個產品去看待。這不僅增添了版面的變化性，也能讓產品之間的展現形式變得更加豐富。

我們再做個簡單的案例，這是一個無人機的介紹界面。我們將圖片信息和文字信息都丟到版面里。為了讓圖片更醒目一些，這裏我們將圖片添加象徵著天空的藍色。接着將圖片做出血處理，安排在版面近似黃金分割的位置上；同時文字信息也經過層級的劃分，最後安排在右側的空白區域里。

在版面的其他區域添加具有關聯性的次級信息與裝飾元素，來增強元素之間的跳躍率，讓版面看起來更加豐富有趣。吸取圖片的色彩，並填充在裝飾線條上，形成圖文之間的呼應。因為是講解動力系統，因此我們也可以將機翼單獨提取出來。當人們看到右側的圖形就能很自然的將其中的細節與左側照片形成關聯。

由於知覺恆常性的存在，我們也不需要採用完全相同的圖像，只需要讓人看出是同樣的部位就可以了。那麼到這裏這個版面也就完成了。

5. 案例

到這裏，相信你已經對相似原則有所理解了。人們會將具有相似特徵的元素相互關聯到一起，以便於更簡單的去理解信息。相對於形狀與大小來說，色彩所體現出的相似性會更加強烈。相似原則所體現出的關聯性不受距離的影響，同時它也具有秩序、韻律和引導的作用。其實近似原則離我們並不遙遠，恰恰相反的是，它在設計中的應用是相當普遍的，那麼接下來我們就一起來看一些它在設計中的應用案例吧。

我們來看這一組海報，色彩的相似性貫穿整個版面，它將不同的關 鍵信息相互關聯到了一起。

這個版面中也同樣採用了色彩的關聯作用。白色添加線框、黃色添加線框以及純黑色的文字，三組元素相互穿插形成了我們所見到的版面效果。

這個版面呢？底部文字主體與主標題之間因為相同的顏色建立了關聯與呼應。

這幅版面中，文字信息雖然在位置上並不接近，但由於採用了相同的字形與字號。他這讓它們之間產生了相同的共性特徵。因此這兩段文字被很自然的關聯到了一起。

版面上與產品上出現了相同的圖標，這樣的圖形關聯也是很常見了。

這個版面中，椅子的外形雖然不同，但是由於知覺恆常性的關係，我們依然能夠將其看成是同一把椅子。

這組版面呢？當人們看到的版面中心的大圓圖標，自然會將目光看向相似但更小的圖形。這就形成了一條有趣的視覺引導流程。

這個版面也同樣運用了色彩的關聯。

所有的文字都添加相同的傾斜角度，因為即便是傾斜也不會顯得凌亂。這正是相似原則所產生的秩序感，它讓每個元素都具有相同的屬性。

是不是非常實用呢？只要理解了相似原則，它便會成為我們設計中的指導方針，當你在設計的過程中想要讓某些元素產生關聯時，就不需要在去苦思冥想了。那麼到這裏你是不是以為本篇文章就已經結束了呢？看一下進度條就知道了對吧，我們還有開篇時提到的「共同命運原則」沒有講呢。

共同命運

它與相似原則息息相關，但又有所不同，接下來我們一起來認識一下共同命運原則吧。

共同命運這個原則的名字看起來就很奇怪對吧，那麼它究竟指什麼呢？共同命運原則的主要特點依然是關聯與區分。這一點與我們之前所講到的這兩個原則類似。但不同點在於，接近原則實現關聯與區分的主要條件是位置關係。而我們今天主要講到的相似原則，它能夠實現關聯與區分的關鍵在於元素之間的共同特徵。那麼共同命運原則呢？，所依靠的主要條件是運動與方向。

它主要指在其他條件相同時，朝同一方運動和具有相同速度的元素會被大腦認定是一組元素。無論這些元素相距多遠，或者它們看起來有多麼不同，如果它們一起移動或變化，那麼它們就被認為是具有相關性的視覺單元。

在自然界中這種現象也普遍存在，無論是螞蟻、大雁還是海里的魚群。當這些個體朝着同一方向和速度運動時，我們便會下意識的將其視為一個完整的組合。

運動也是對比的一種方式，相對而言各種外觀迥異的汽車，只需要朝向同一方向移動，並且速度相似，那麼它們就會被看成是一組完整的視覺元素。

為了更便於理解，接下來我們一起來看一個小短片。

這是在圖形界面中，共同命運原則應用的典型例子，也是我們每天幾乎都會用到的群組功能。

還有哪些例子呢？我們都知道網頁的瀏覽方向是上下滾動的，那麼在滾動的同時也會有一些元素保持不動，而另一些元素會隨着滾動去移動位置。這也是一種內容的區分手法，它同樣運用了共同命運原則。

我們在手機的 app 里，同樣會運用共同命運原則，通過動效的加入，我們能夠輕鬆的區分哪些部分是同一組的，哪些部分是屬於另一個結構。

在如今這個時代，人們每天面對最多的就是手機屏幕了。其實屏幕中每組圖標的移動，都是一個典型的共同命運。

兩大原則應用案例

我們今天一共給大家講到了兩大知識點，它們分別是相似原則與共同命運原則。那麼為了讓大家更容易理解到我們今天講到的這些內容，接下來我會帶領大家一起做一個實際的案例。在這個過程中，也希望大家能夠帶着我們今天講到的這些內容去思考問題，從嶄新的視角去觀察版面。那麼接下來我們首先來看一下都有哪些內容。

這是一個網頁，大致內容是介紹這個安全系列機器人 SQ2。

首先我們規劃好頁面的比例，確定一個首屏 16：9 的屏幕寬高，隨後添加豎向的網格線。到這裏你可能會問？為什麼只有豎向的網格呢？這是由於網頁設計和傳統的印刷不同，它的高度是不確定的，所以我們只需要規範豎向的網格線就可以了。網頁的首屏幕，自然是安排用來介紹機器人的型號了。我們可以從品牌的標誌中去吸收靈感，這裏我們選擇了一個依據 45 度角拉長的六邊形作為貫徹 始終的視覺線索。

這是下拉網頁的第二個畫面，主標題依然繼承了六邊形的傾斜線條，與主視覺產生呼應的同時也起到了強調層級的作用。

這裏我們提取三個關鍵點，依然沿用六邊形的設定，將具有圖解作用的圖標與信息組合成三個獨立的畫面。

面對抽象的數據，往往會讓人產生反感。因此對數據的可視化處理就變得尤為重要了。它會更有助於人們對信息的理解。同樣的藍色也是創建關聯的關鍵元素。

在整體的下方，我們可以安排三個鏈接按鈕，方便人們進一步去了解其他內容。

在往下，我們安排一張實景的照片，用以體現文案中機器人對於人口短缺的補充作用。

最後是公司簡介，標題部分依然沿用相同的風格外觀，其餘信息只需要安排在同一個網格系統之下，信息之間的位置就會產生整體上的統一感與關聯性。

那麼到這裏，這個網頁設計就基本完成了。六邊形的斜線在標題間建立起了關聯，呼應着上方的主視覺。那麼接下來我們在看一下，在共同命運的作用下，元素之間是怎樣成組的呢？當所有元素朝着同一個方向移動時，畫面中所有的元素都被關聯到了一起。這就是共同命運原則在起作用。

最後一起總結一下今天的內容。我們的大腦會將看起來相同的元素歸為一類，它們之間便彼此建立起了關聯，只需要在不同元素之上添加相似的屬性，我們就能很容易的創建聯繫；同時那些相似的共同屬性可以組成一種規則，規則與秩序是設計的基礎，只有在秩序之上所做的變化才能更加凸顯；另外，一成不變的重複是會引起視覺疲勞的，因此在保持共性的基礎上，我們需要作出相應的變化，在文字編排中，層級便是這種節奏感的典型體現；建立關聯也意味着它具有引導視線的功能。本期的內容就到這裏，下期見。

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

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極5註冊平台_總監說你的平面作品太散？這篇深度乾貨來幫你！