總監(jiān)說(shuō)你的平面作品太散？這篇深度干貨來(lái)幫你！

這一期咱們繼續(xù)學(xué)習(xí)格式塔系列原則，那么在本節(jié)課，我挑選了兩個(gè)相互之間具有聯(lián)系的原則，它們分別是「相似原則」以及「共同命運(yùn)原則」，當(dāng)然，這也是在平面設(shè)計(jì)中被普遍應(yīng)用的規(guī)則。如果你還在被總監(jiān)說(shuō)自己的作品里沒(méi)有關(guān)聯(lián)性？又或者是感覺(jué)自己的版面中元素都各自為戰(zhàn)？那么本節(jié)課程或許會(huì)幫助你解決這些問(wèn)題。

上期回顧：

相似原則

那么接下來(lái)，我們首先來(lái)認(rèn)識(shí)一下 什么是相似原則。相似原則告訴我們，具有相同屬性的元素，會(huì)比看起來(lái)完全不同的元素更具有關(guān)聯(lián)性。

如圖中所示，我們會(huì)下意識(shí)的認(rèn)為圓形與圓形之間具有一定的聯(lián)系，它們具有相同的輪廓特征，當(dāng)然方形也是一樣的。視覺(jué)上的相似性有助于我們?nèi)ズ?jiǎn)化眼前所見(jiàn)到的信息，同時(shí)也方便大腦的理解。相對(duì)于其他方式，相似的顏色更容易被我們關(guān)聯(lián)到一起。即便形狀不同，他們也會(huì)被看成是具有關(guān)聯(lián)的整體。

與上一節(jié)提到的接近原則類(lèi)似，相似原則同樣具有關(guān)聯(lián)與區(qū)分的作用。但相似原則并不會(huì)受到位置上的影響，即便距離很遠(yuǎn)也依然可以創(chuàng)建關(guān)聯(lián)，這與接近原則完全不同。

大小是我們可以用來(lái)創(chuàng)建相似性質(zhì)的另一個(gè)有效工具。就算所有形狀特征都相同，大小的相似性也會(huì)讓更大的形狀變得突出并相互形成一個(gè)組合，更小的形狀也自然成為了另一個(gè)組合。另外方向上的相似，也可以創(chuàng)建關(guān)聯(lián)。我們只需要有意識(shí)的去創(chuàng)建相似性就能將元素相互關(guān)聯(lián)起來(lái)。

其實(shí)相似原則的應(yīng)用非常普遍，舉個(gè)簡(jiǎn)單的例子，像連連看這類(lèi)游戲，就利用了人們視覺(jué)中的這種分辨關(guān)聯(lián)性的生理現(xiàn)象。具有相同輪廓與色彩的圖標(biāo)更容易被我們發(fā)現(xiàn)，即使它們之間距離很遠(yuǎn)也能夠輕松引起我們的注意。

球場(chǎng)上，無(wú)論球員的位置再怎么變化，我們可以通過(guò)衣服的顏色去辨認(rèn)他們是哪個(gè)隊(duì)伍的。

反過(guò)來(lái)，相似原則當(dāng)然也能幫助我們將不相關(guān)的內(nèi)容區(qū)分出來(lái)。我們一起做個(gè)游戲，你能在短時(shí)間內(nèi)找到徐錦江老師嗎？

當(dāng)然如果你覺(jué)得太過(guò)簡(jiǎn)單的話，我們也是可以加大難度的嘛……

那么，到這里我們可以初步總結(jié)一下相似原則的內(nèi)容了，它是指人眼在認(rèn)知周?chē)h(huán)境時(shí)，會(huì)下意識(shí)的將樣貌近似的視覺(jué)元素歸為一類(lèi)，并且這種認(rèn)知過(guò)程不會(huì)受到距離的限制。那么了解這些之后，我們可以怎樣去將這個(gè)視覺(jué)原理應(yīng)用到設(shè)計(jì)當(dāng)中呢？接下來(lái)我將帶領(lǐng)大家一起去尋找這個(gè)答案。

相似原則在設(shè)計(jì)中的應(yīng)用

1. 建立關(guān)聯(lián)

千萬(wàn)不要小看相似原則。認(rèn)識(shí)這種視覺(jué)組織機(jī)制，能夠有效幫助我們改善自己的設(shè)計(jì)。通過(guò)總結(jié)與歸納，我們?cè)囍鴮⑾嗨圃瓌t做了進(jìn)一步的功能劃分。也希望大家能夠更快的吸收，并且理解它在設(shè)計(jì)當(dāng)中所起到的功能與作用。

相似原則在設(shè)計(jì)應(yīng)用中，一共有四個(gè)主要的功能屬性。那么它們分別都是什么呢？首先第一個(gè)作用就是建立聯(lián)系，也就是說(shuō)，我們可以利用相似原則的這一特性去輕松的在版面中建立關(guān)聯(lián)屬性。

我們來(lái)舉個(gè)例子。試想一下，如何快速在人群中分辨出同一只隊(duì)伍呢？其實(shí)答案也很簡(jiǎn)單，我們可以利用相似原則，在隊(duì)員之間添加相似的屬性，從而去將他們聯(lián)系起來(lái)。那么比如說(shuō)，我們可以讓隊(duì)員帶上相同的帽子，這樣是不是就達(dá)到了關(guān)聯(lián)的目的了呢？

同樣的道理，面對(duì)眼前的文本，我們又需要怎樣才能區(qū)分出段落來(lái)呢？想一想人群的例子，或許你已經(jīng)知道答案了。沒(méi)錯(cuò)，只要在各個(gè)段首之上添加相似的屬性，我們就能夠輕松的將段落區(qū)分開(kāi)。

比如在每一段的前方添加項(xiàng)目符號(hào)，它就如同人群之中的帽子一樣，將各個(gè)段首相互關(guān)聯(lián)到了一起。也正是因?yàn)轫?xiàng)目符號(hào)的加入，我們才能在第一時(shí)間區(qū)分出它們所在的位置。

比較有趣的是，在文字編排中，這個(gè)共同的屬性可以是任意面貌。比如它可以是帶有顏色的編號(hào)。

又或者是完全隱形的一段空間，只需要將所有的段首都向內(nèi)縮進(jìn)，我們就能夠創(chuàng)建出一個(gè)相同的屬性了。

當(dāng)然這也是日常編排中，使用頻率較高的一種段落區(qū)分手法。

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

頁(yè)碼是書(shū)籍設(shè)計(jì)中必不可少的元素之一，它的主要功能除了便于查閱之外，還具有關(guān)聯(lián)頁(yè)面的作用。頁(yè)眉或頁(yè)碼這些元素，通常會(huì)出現(xiàn)在每一頁(yè)版面中的相同位置上，也正因如此，無(wú)論版面中的內(nèi)容在怎么變化，它們看上去也都是具備關(guān)聯(lián)性的整體。

正如之前段落的區(qū)分一樣，看不見(jiàn)的空間在版面中也非常重要。比如我們?nèi)绻朐诎婷嬷行姆胖靡粋€(gè)方形元素，那么它的大小和位置勢(shì)必會(huì)影響到周?chē)目瞻仔螤睢ａ槍?duì)這種情況，我們可以通過(guò)重復(fù)空間的大小的方式去建立關(guān)聯(lián)。通過(guò)將版面分割成更小的空間，我們就可以更加精確的去控制留白了。經(jīng)過(guò)目測(cè)可以得知，方形的大小非常近似于頁(yè)面九分之一的尺寸，并且并不居中。那么它既然非常接近，我們干脆就將它規(guī)范成與周?chē)臻g一樣的比例吧。經(jīng)過(guò)調(diào)整后，版面中正形與負(fù)形呈現(xiàn)出了相同的比例關(guān)系，也就是說(shuō)它們之間產(chǎn)生了一定的視覺(jué)關(guān)聯(lián)。

在版式編排與標(biāo)志規(guī)范中都會(huì)運(yùn)用這種空間上的近似手法去規(guī)范版面。經(jīng)過(guò)處理后的版面會(huì)更加簡(jiǎn)單且便于理解，當(dāng)你發(fā)現(xiàn)一個(gè)版面中無(wú)論是看得見(jiàn)的元素還是看不見(jiàn)的元素都看起來(lái)具有關(guān)聯(lián)時(shí)。那么不用懷疑，一定是相似原則在起作用。

版面中元素的聯(lián)系也正是這些細(xì)節(jié)在起著關(guān)鍵作用，相同的元素會(huì)讓人感到統(tǒng)一，相似的屬性也讓版面中的變化性顯得更加和諧。

2. 秩序/規(guī)律

那么相似原則除了能夠幫助我們建立關(guān)聯(lián)之外，它還具有那些作用呢？接下來(lái)我們會(huì)繼續(xù)學(xué)習(xí)第二個(gè)功能屬性，那就是創(chuàng)建秩序與規(guī)律。

這一點(diǎn)并不難理解，舉個(gè)簡(jiǎn)單的例子，如果我們將凌亂的房間與整潔的房間相比較，它們之間會(huì)有什么區(qū)別呢？很顯然，整潔的房間內(nèi)相同的物品會(huì)被歸類(lèi)擺放，這增強(qiáng)了整體空間中的共性特征。

軍人的方隊(duì)也是另一個(gè)顯著的例子，人們穿著相同的制服，就連動(dòng)作也是一樣的。這樣所帶來(lái)的結(jié)果便形成了一種規(guī)則和秩序。這也正是相似原則在起作用。

由于具有重復(fù)性的圖案是沒(méi)有邊緣概念的，因此在那些對(duì)頁(yè)面邊緣大小不確定的設(shè)計(jì)場(chǎng)景中，我們經(jīng)常能夠見(jiàn)到類(lèi)似的設(shè)計(jì)。比如我們家中的壁紙就是個(gè)典型的例子，制造商沒(méi)有辦法預(yù)估每個(gè)房間的墻壁尺寸，那么干脆使用具有重復(fù)性的圖片去平鋪開(kāi)來(lái)，這樣一來(lái)，問(wèn)題也就隨之解決了。

具有秩序感的構(gòu)成，在日常生活中也很常見(jiàn)，比如背包、包裝、抱枕等等都被采用類(lèi)似的圖案。它會(huì)給人一種華麗且繁雜的視覺(jué)印象。

當(dāng)然，我們也可以在秩序中創(chuàng)建「不同」。這類(lèi)畫(huà)面除了具有「逼死強(qiáng)迫癥」的功能外，也可以讓我們輕松建立焦點(diǎn)。當(dāng)版面中大部分都是相似或相同的元素時(shí)，那個(gè)不同點(diǎn)便會(huì)被無(wú)限放大，我們會(huì)很容易注意到它們，也正因如此，這種手法在平面設(shè)計(jì)中的應(yīng)用也是相當(dāng)普遍的。

3. 節(jié)奏/韻律

那么認(rèn)識(shí)了關(guān)聯(lián)與秩序之后，接下來(lái)我們一起來(lái)學(xué)習(xí)近似原則的第三種特性。那就是節(jié)奏與韻律，你可以將它理解為具有層次變化的一種規(guī)律。

一成不變的重復(fù)，雖然具有秩序感，但有時(shí)候也會(huì)令人產(chǎn)生疲勞。可變化添加太多，又會(huì)顯得格外凌亂，惹人生厭。復(fù)雜的圖形讓人們理解起來(lái)也會(huì)比較吃力。那有沒(méi)有什么方法能兼具變化與秩序呢？答案是肯定的，我們可以介于兩者之間，在變化的基礎(chǔ)上去增強(qiáng)元素之間的相似性。而這個(gè)過(guò)程也就是產(chǎn)生節(jié)奏和韻律的關(guān)鍵。

我們回想一下音樂(lè)的節(jié)拍，在變化的同時(shí)是不是也會(huì)具有重復(fù)性的循環(huán)呢？

假如你聽(tīng)到的是一成不變聲音，那也就稱(chēng)不上是音樂(lè)了。就如同圖中一樣。是不是隔著屏幕就仿佛聽(tīng)到了一陣陣噪音？

在版式設(shè)計(jì)中節(jié)奏與韻律也非常重要，對(duì)于內(nèi)容本身來(lái)說(shuō)，不同層級(jí)的信息需要在視覺(jué)上體現(xiàn)出足夠的差別，而同級(jí)別的信息，外觀看起來(lái)也應(yīng)該具有相同的樣貌。

我們以這個(gè)書(shū)籍的版面為例，一起來(lái)分析一下它的構(gòu)成都有哪些規(guī)則與變化。首先是重要信息，我們可以看出，畫(huà)面中標(biāo)志綠色的全都是同一層級(jí)的內(nèi)容。既然重要那么它在版面中就應(yīng)該是最醒目的，因此更大的視覺(jué)面積是必不可少的。那么其次呢，是相對(duì)次重要的信息，也就是畫(huà)面中標(biāo)注藍(lán)色的內(nèi)容。最后剩下的自然就是其他信息了。線條既起到裝飾的目的，又提供了分割的作用。而底部的頁(yè)碼在作為信息補(bǔ)充外，也具有點(diǎn)綴版面的功能。

我們?cè)賮?lái)看這個(gè)版面，所有主標(biāo)題的字號(hào)和色彩都保持一致，相似的特征有助于人們快速識(shí)別下一個(gè)標(biāo)題。圖片的視覺(jué)面積也采用了相同的原則，主次分明，同一層級(jí)下的圖片面積近乎一致。

4. 視覺(jué)引導(dǎo)

那么到這里我們還剩下最后一個(gè)特性沒(méi)有講到了。它就是視覺(jué)引導(dǎo)，和接近原則相同，相似原則也具有引導(dǎo)屬性。

如同街邊的路燈一樣，當(dāng)具有相同屬性的元素以漸變的形式出現(xiàn)時(shí)，便會(huì)產(chǎn)生指向性。將我們的目光引導(dǎo)向更遠(yuǎn)的地方，又或者是更近的地方。

這兩幅海報(bào)就利用了這一點(diǎn)。我們可以明顯看出左側(cè)的重復(fù)圖形逐漸變小，將視線引向了標(biāo)題；同樣的，右側(cè)的這幅海報(bào)通過(guò)將文字進(jìn)行從小到大的變化，將視線引導(dǎo)至底部的海浪繪畫(huà)，從而指出了內(nèi)容的主題。

當(dāng)然相似原則中的引導(dǎo)方法不僅如此，我們這里有四臺(tái)摩托車(chē)與相對(duì)應(yīng)的簡(jiǎn)介。在圖像與文字之間橫向添加五條相似的線，這樣也就形成了四段平行通道，視線會(huì)在線條的分割下水平移動(dòng)。

當(dāng)然你也可以運(yùn)用接近原則，讓內(nèi)容相關(guān)的元素相互靠近，不相關(guān)的內(nèi)容相互遠(yuǎn)離，達(dá)到引導(dǎo)視線的目的。而每一臺(tái)車(chē)的下方都添加了文字，這同樣是一種相似，就如同人群中的帽子一樣，它們就這樣被有效的組織起來(lái)了。

還記得相似原則不受位置的限制嗎？我們只需在摩托車(chē)附近添加一個(gè)編號(hào)，并且在下方對(duì)應(yīng)的內(nèi)容上也添加一個(gè)相同的編號(hào)。這樣一來(lái)兩組內(nèi)容就被很輕松的聯(lián)系到一塊了，引導(dǎo)的目的也就隨之達(dá)成了。

看不見(jiàn)的空間同樣是建立關(guān)聯(lián)的有效手法，用圖形直接標(biāo)識(shí)出頂部空間的位置，也可以很直觀的建立關(guān)聯(lián)。

當(dāng)然我們也可以運(yùn)用色彩的關(guān)聯(lián)作用，訣竅就是找到那些可以作為共性特征的屬性，并加以利用，視線便會(huì)根據(jù)相似原則在具有關(guān)聯(lián)的元素上來(lái)回移動(dòng)。

我們來(lái)做一個(gè)案例，我們虛擬了一個(gè)「蓮花攝影展」的項(xiàng)目，以上是照片與文案信息。首先我們確定版面中的元素結(jié)構(gòu)，根據(jù)視覺(jué)重心將元素安排好位置關(guān)系。接下來(lái)替換圖片，將照片中的主體安排在相應(yīng)的位置上。其次，我們將文字信息按照重要程度劃分主次并替換預(yù)想的草圖。

接下來(lái)我們給文字組放一個(gè)裝飾線條，讓信息顯得更突顯的同時(shí)，也讓文字組合看起來(lái)更加飽滿。在組合上方添加一個(gè)花朵的圖標(biāo)，它能讓文字組與主體的關(guān)聯(lián)性更強(qiáng)。在組合中添加一個(gè)顏色，讓花瓣與文字組合之間的聯(lián)系更緊密。那么到這里，這個(gè)版面就完成了。

以上我們向大家介紹了與相似原則相關(guān)的四種屬性，它們分別是關(guān)聯(lián)、秩序、節(jié)奏以及引導(dǎo)。那么接下來(lái)我們會(huì)向大家繼續(xù)介紹另一個(gè)與相似原則相關(guān)的視覺(jué)特性，那就是知覺(jué)恒常性。什么是知覺(jué)恒常性呢？它所指的是我們大腦在認(rèn)知的過(guò)程中其實(shí)一直保持著一個(gè)相對(duì)穩(wěn)定的狀態(tài)，即便客觀條件在一定范圍內(nèi)發(fā)生了變化，我們也依然能夠清晰的辨認(rèn)事物。

我們來(lái)舉幾個(gè)例子吧，比如當(dāng)你看到了畫(huà)面中的這張夢(mèng)露照片，你就會(huì)對(duì)這個(gè)畫(huà)面產(chǎn)生一定的印象中。

無(wú)論這張照片發(fā)生過(guò)怎樣的變化，我們對(duì)它的認(rèn)知都會(huì)保持不變。也正是因?yàn)槲覀兊囊曈X(jué)認(rèn)知具有恒常性，它們不會(huì)被當(dāng)成是其它新的事物來(lái)看待。

再舉個(gè)例子，當(dāng)你看到眼前的這幾扇門(mén)時(shí)，你會(huì)發(fā)現(xiàn)它們每個(gè)都帶有一個(gè)相同的按鈕。當(dāng)你點(diǎn)擊了其中一個(gè)按鈕后，得到的答案是門(mén)被打開(kāi)了。那么這時(shí)我們便會(huì)根據(jù)經(jīng)驗(yàn)將其余的三個(gè)按鈕進(jìn)行關(guān)聯(lián)，認(rèn)為只要點(diǎn)擊紅色按鈕就能夠開(kāi)門(mén)，即便是很久之后再看到相同的門(mén)我們也同樣會(huì)這樣認(rèn)為。

同樣的道理，我們通過(guò)學(xué)習(xí)認(rèn)識(shí)到某種蘑菇是可以食用的，那么這個(gè)蘑菇的印象就會(huì)存留在我們腦海當(dāng)中。當(dāng)你再次看到樣貌相似的蘑菇時(shí)，我們便會(huì)將其與印象中的蘑菇進(jìn)行比對(duì)。即便他們的角度、形狀等樣貌均不相同，但由于知覺(jué)恒常性的存在。

我們便能很自然的辨別出它們是屬于同一類(lèi)的，可食用的蘑菇。

知覺(jué)恒常性可分為大小恒常性、形狀恒常性、顏色恒常性、距離恒常性、速度恒常性等不同的性質(zhì)變化。

但其實(shí)你只需要知道，我們的大腦具有辨認(rèn)相同物體的能力就好了。比如我們現(xiàn)在看到的這個(gè)圖形。無(wú)論它經(jīng)過(guò)怎樣的變化，我們都能辨認(rèn)出它們是相同的樣子。

可能到這里你會(huì)問(wèn)，我們學(xué)習(xí)這樣的知識(shí)會(huì)有什么用呢？其實(shí)一切的設(shè)計(jì)原理都是對(duì)各種現(xiàn)象的總結(jié)于歸納。只有去了解它們的運(yùn)作方式，我們才能在設(shè)計(jì)中去注意到它的存在。

當(dāng)然我們也可以有意識(shí)的去打破這種知覺(jué)上的恒常性。比如畫(huà)面中，從第一個(gè)視角看上去是自行車(chē)的形狀，但從另一個(gè)視角卻變成了另外的樣子。

在設(shè)計(jì)中我們也依然能夠運(yùn)用到它，當(dāng)我們需要讓兩個(gè)畫(huà)面相互建立關(guān)聯(lián)的時(shí)候，就不需要再選擇一張完全一樣的照片了。由于知覺(jué)恒常性的存在，無(wú)論是形狀的變化還是特征的改變，我們都不會(huì)將其認(rèn)為是新的事物。

因此即便另外一張照片的角度并不相同，我們也能夠?qū)⑺鼈円暈橥粋€(gè)產(chǎn)品去看待。這不僅增添了版面的變化性，也能讓產(chǎn)品之間的展現(xiàn)形式變得更加豐富。

我們?cè)僮鰝€(gè)簡(jiǎn)單的案例，這是一個(gè)無(wú)人機(jī)的介紹界面。我們將圖片信息和文字信息都丟到版面里。為了讓圖片更醒目一些，這里我們將圖片添加象征著天空的藍(lán)色。接著將圖片做出血處理，安排在版面近似黃金分割的位置上；同時(shí)文字信息也經(jīng)過(guò)層級(jí)的劃分，最后安排在右側(cè)的空白區(qū)域里。

在版面的其他區(qū)域添加具有關(guān)聯(lián)性的次級(jí)信息與裝飾元素，來(lái)增強(qiáng)元素之間的跳躍率，讓版面看起來(lái)更加豐富有趣。吸取圖片的色彩，并填充在裝飾線條上，形成圖文之間的呼應(yīng)。因?yàn)槭侵v解動(dòng)力系統(tǒng)，因此我們也可以將機(jī)翼單獨(dú)提取出來(lái)。當(dāng)人們看到右側(cè)的圖形就能很自然的將其中的細(xì)節(jié)與左側(cè)照片形成關(guān)聯(lián)。

由于知覺(jué)恒常性的存在，我們也不需要采用完全相同的圖像，只需要讓人看出是同樣的部位就可以了。那么到這里這個(gè)版面也就完成了。

5. 案例

到這里，相信你已經(jīng)對(duì)相似原則有所理解了。人們會(huì)將具有相似特征的元素相互關(guān)聯(lián)到一起，以便于更簡(jiǎn)單的去理解信息。相對(duì)于形狀與大小來(lái)說(shuō)，色彩所體現(xiàn)出的相似性會(huì)更加強(qiáng)烈。相似原則所體現(xiàn)出的關(guān)聯(lián)性不受距離的影響，同時(shí)它也具有秩序、韻律和引導(dǎo)的作用。其實(shí)近似原則離我們并不遙遠(yuǎn)，恰恰相反的是，它在設(shè)計(jì)中的應(yīng)用是相當(dāng)普遍的，那么接下來(lái)我們就一起來(lái)看一些它在設(shè)計(jì)中的應(yīng)用案例吧。

我們來(lái)看這一組海報(bào)，色彩的相似性貫穿整個(gè)版面，它將不同的關(guān) 鍵信息相互關(guān)聯(lián)到了一起。

這個(gè)版面中也同樣采用了色彩的關(guān)聯(lián)作用。白色添加線框、黃色添加線框以及純黑色的文字，三組元素相互穿插形成了我們所見(jiàn)到的版面效果。

這個(gè)版面呢？底部文字主體與主標(biāo)題之間因?yàn)橄嗤念伾⒘岁P(guān)聯(lián)與呼應(yīng)。

這幅版面中，文字信息雖然在位置上并不接近，但由于采用了相同的字形與字號(hào)。他這讓它們之間產(chǎn)生了相同的共性特征。因此這兩段文字被很自然的關(guān)聯(lián)到了一起。

版面上與產(chǎn)品上出現(xiàn)了相同的圖標(biāo)，這樣的圖形關(guān)聯(lián)也是很常見(jiàn)了。

這個(gè)版面中，椅子的外形雖然不同，但是由于知覺(jué)恒常性的關(guān)系，我們依然能夠?qū)⑵淇闯墒峭话岩巫印?/p>

這組版面呢？當(dāng)人們看到的版面中心的大圓圖標(biāo)，自然會(huì)將目光看向相似但更小的圖形。這就形成了一條有趣的視覺(jué)引導(dǎo)流程。

這個(gè)版面也同樣運(yùn)用了色彩的關(guān)聯(lián)。

所有的文字都添加相同的傾斜角度，因?yàn)榧幢闶莾A斜也不會(huì)顯得凌亂。這正是相似原則所產(chǎn)生的秩序感，它讓每個(gè)元素都具有相同的屬性。

是不是非常實(shí)用呢？只要理解了相似原則，它便會(huì)成為我們?cè)O(shè)計(jì)中的指導(dǎo)方針，當(dāng)你在設(shè)計(jì)的過(guò)程中想要讓某些元素產(chǎn)生關(guān)聯(lián)時(shí)，就不需要在去苦思冥想了。那么到這里你是不是以為本篇文章就已經(jīng)結(jié)束了呢？看一下進(jìn)度條就知道了對(duì)吧，我們還有開(kāi)篇時(shí)提到的「共同命運(yùn)原則」沒(méi)有講呢。

共同命運(yùn)

它與相似原則息息相關(guān)，但又有所不同，接下來(lái)我們一起來(lái)認(rèn)識(shí)一下共同命運(yùn)原則吧。

共同命運(yùn)這個(gè)原則的名字看起來(lái)就很奇怪對(duì)吧，那么它究竟指什么呢？共同命運(yùn)原則的主要特點(diǎn)依然是關(guān)聯(lián)與區(qū)分。這一點(diǎn)與我們之前所講到的這兩個(gè)原則類(lèi)似。但不同點(diǎn)在于，接近原則實(shí)現(xiàn)關(guān)聯(lián)與區(qū)分的主要條件是位置關(guān)系。而我們今天主要講到的相似原則，它能夠?qū)崿F(xiàn)關(guān)聯(lián)與區(qū)分的關(guān)鍵在于元素之間的共同特征。那么共同命運(yùn)原則呢？，所依靠的主要條件是運(yùn)動(dòng)與方向。

它主要指在其他條件相同時(shí)，朝同一方運(yùn)動(dòng)和具有相同速度的元素會(huì)被大腦認(rèn)定是一組元素。無(wú)論這些元素相距多遠(yuǎn)，或者它們看起來(lái)有多么不同，如果它們一起移動(dòng)或變化，那么它們就被認(rèn)為是具有相關(guān)性的視覺(jué)單元。

在自然界中這種現(xiàn)象也普遍存在，無(wú)論是螞蟻、大雁還是海里的魚(yú)群。當(dāng)這些個(gè)體朝著同一方向和速度運(yùn)動(dòng)時(shí)，我們便會(huì)下意識(shí)的將其視為一個(gè)完整的組合。

運(yùn)動(dòng)也是對(duì)比的一種方式，相對(duì)而言各種外觀迥異的汽車(chē)，只需要朝向同一方向移動(dòng)，并且速度相似，那么它們就會(huì)被看成是一組完整的視覺(jué)元素。

為了更便于理解，接下來(lái)我們一起來(lái)看一個(gè)小短片。

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

還有哪些例子呢？我們都知道網(wǎng)頁(yè)的瀏覽方向是上下滾動(dòng)的，那么在滾動(dòng)的同時(shí)也會(huì)有一些元素保持不動(dòng)，而另一些元素會(huì)隨著滾動(dòng)去移動(dòng)位置。這也是一種內(nèi)容的區(qū)分手法，它同樣運(yùn)用了共同命運(yùn)原則。

我們?cè)谑謾C(jī)的 app 里，同樣會(huì)運(yùn)用共同命運(yùn)原則，通過(guò)動(dòng)效的加入，我們能夠輕松的區(qū)分哪些部分是同一組的，哪些部分是屬于另一個(gè)結(jié)構(gòu)。

在如今這個(gè)時(shí)代，人們每天面對(duì)最多的就是手機(jī)屏幕了。其實(shí)屏幕中每組圖標(biāo)的移動(dòng)，都是一個(gè)典型的共同命運(yùn)。

兩大原則應(yīng)用案例

我們今天一共給大家講到了兩大知識(shí)點(diǎn)，它們分別是相似原則與共同命運(yùn)原則。那么為了讓大家更容易理解到我們今天講到的這些內(nèi)容，接下來(lái)我會(huì)帶領(lǐng)大家一起做一個(gè)實(shí)際的案例。在這個(gè)過(guò)程中，也希望大家能夠帶著我們今天講到的這些內(nèi)容去思考問(wèn)題，從嶄新的視角去觀察版面。那么接下來(lái)我們首先來(lái)看一下都有哪些內(nèi)容。

這是一個(gè)網(wǎng)頁(yè)，大致內(nèi)容是介紹這個(gè)安全系列機(jī)器人 SQ2。

首先我們規(guī)劃好頁(yè)面的比例，確定一個(gè)首屏 16：9 的屏幕寬高，隨后添加豎向的網(wǎng)格線。到這里你可能會(huì)問(wèn)？為什么只有豎向的網(wǎng)格呢？這是由于網(wǎng)頁(yè)設(shè)計(jì)和傳統(tǒng)的印刷不同，它的高度是不確定的，所以我們只需要規(guī)范豎向的網(wǎng)格線就可以了。網(wǎng)頁(yè)的首屏幕，自然是安排用來(lái)介紹機(jī)器人的型號(hào)了。我們可以從品牌的標(biāo)志中去吸收靈感，這里我們選擇了一個(gè)依據(jù) 45 度角拉長(zhǎng)的六邊形作為貫徹 始終的視覺(jué)線索。

這是下拉網(wǎng)頁(yè)的第二個(gè)畫(huà)面，主標(biāo)題依然繼承了六邊形的傾斜線條，與主視覺(jué)產(chǎn)生呼應(yīng)的同時(shí)也起到了強(qiáng)調(diào)層級(jí)的作用。

這里我們提取三個(gè)關(guān)鍵點(diǎn)，依然沿用六邊形的設(shè)定，將具有圖解作用的圖標(biāo)與信息組合成三個(gè)獨(dú)立的畫(huà)面。

面對(duì)抽象的數(shù)據(jù)，往往會(huì)讓人產(chǎn)生反感。因此對(duì)數(shù)據(jù)的可視化處理就變得尤為重要了。它會(huì)更有助于人們對(duì)信息的理解。同樣的藍(lán)色也是創(chuàng)建關(guān)聯(lián)的關(guān)鍵元素。

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

在往下，我們安排一張實(shí)景的照片，用以體現(xiàn)文案中機(jī)器人對(duì)于人口短缺的補(bǔ)充作用。

最后是公司簡(jiǎn)介，標(biāo)題部分依然沿用相同的風(fēng)格外觀，其余信息只需要安排在同一個(gè)網(wǎng)格系統(tǒng)之下，信息之間的位置就會(huì)產(chǎn)生整體上的統(tǒng)一感與關(guān)聯(lián)性。

那么到這里，這個(gè)網(wǎng)頁(yè)設(shè)計(jì)就基本完成了。六邊形的斜線在標(biāo)題間建立起了關(guān)聯(lián)，呼應(yīng)著上方的主視覺(jué)。那么接下來(lái)我們?cè)诳匆幌拢诠餐\(yùn)的作用下，元素之間是怎樣成組的呢？當(dāng)所有元素朝著同一個(gè)方向移動(dòng)時(shí)，畫(huà)面中所有的元素都被關(guān)聯(lián)到了一起。這就是共同命運(yùn)原則在起作用。

最后一起總結(jié)一下今天的內(nèi)容。我們的大腦會(huì)將看起來(lái)相同的元素歸為一類(lèi)，它們之間便彼此建立起了關(guān)聯(lián)，只需要在不同元素之上添加相似的屬性，我們就能很容易的創(chuàng)建聯(lián)系；同時(shí)那些相似的共同屬性可以組成一種規(guī)則，規(guī)則與秩序是設(shè)計(jì)的基礎(chǔ)，只有在秩序之上所做的變化才能更加凸顯；另外，一成不變的重復(fù)是會(huì)引起視覺(jué)疲勞的，因此在保持共性的基礎(chǔ)上，我們需要作出相應(yīng)的變化，在文字編排中，層級(jí)便是這種節(jié)奏感的典型體現(xiàn)；建立關(guān)聯(lián)也意味著它具有引導(dǎo)視線的功能。本期的內(nèi)容就到這里，下期見(jiàn)。

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