生活在地球上的我們，每時(shí)每刻其實(shí)都在感受著重力的存在。除了物理層面的影響，重力是否會(huì)改變我們對(duì)于視覺畫面的認(rèn)知呢？又或者說，物理學(xué)中經(jīng)常聽到的重力概念，和設(shè)計(jì)中的構(gòu)圖、排版又存在著怎樣的關(guān)聯(lián)呢？

我們或許能夠從格式塔學(xué)派對(duì)認(rèn)知心理學(xué)的研究里，尋找到一些蛛絲馬跡。

人們的大腦總是會(huì)去腦補(bǔ)眼前看到的事物。就像我們看到的這三個(gè)被遮擋住的圓形圖案，位于中心的倒三角雖然沒有實(shí)際出現(xiàn)，但我們確實(shí)認(rèn)為它是存在的對(duì)吧。

視覺本身是很容易被周圍環(huán)境影響的，就像我們現(xiàn)在看到的這個(gè)畫面。如果忽略掉空間和透視的話，你還會(huì)覺得右側(cè)的豎線更高嗎？

而實(shí)際上的情況是，左邊的豎線高度要遠(yuǎn)遠(yuǎn)高于右邊的豎線高度。

再看這個(gè)例子，兩側(cè)位于中央的白色球形，它們之間，誰(shuí)看起來(lái)更大，誰(shuí)又看起來(lái)更??？也許有的朋友會(huì)說左邊更大，這個(gè)答案是沒錯(cuò)的，但它也僅僅是看起來(lái)更大而已。

如果我們?cè)诋嬅嬷欣鰞蓷l輔助線，我們就會(huì)發(fā)現(xiàn)，原本右邊看起來(lái)更小的圓球，要比左邊的圓球更大。

通過剛剛的幾個(gè)小測(cè)試，相信大家已經(jīng)對(duì)于用眼睛的判斷能力有了一些認(rèn)識(shí)了，是不是有一種眼見不一定為實(shí)的感覺？視覺重力原則，其實(shí)就是建立在這樣的認(rèn)知基礎(chǔ)之上的。我們大腦所認(rèn)為的重心或平衡感，和真實(shí)的情況，往往并不相同。

在做版式設(shè)計(jì)的時(shí)候，我們的構(gòu)圖越接近重心的平穩(wěn)狀態(tài)，就越會(huì)激發(fā)和諧的美感。因?yàn)橹亓υ谧匀唤缰惺窃倨匠２贿^的現(xiàn)象了，生活在這樣環(huán)境中的我們，自然也會(huì)有這種審美上的傾向了。

我們來(lái)看這個(gè)例子，這張紙最穩(wěn)定的位置在哪里呢？答案是它的正中心。

我們把信息添加在頁(yè)面的中心位置，現(xiàn)在它看起來(lái)更平穩(wěn)了嗎？然而并沒有，可問題出在哪？一定是我們沒有把文字?jǐn)[正吧？上方的區(qū)域（a），看起來(lái)要比下方的區(qū)域（b）面積更大一些，真的是這樣么？

可實(shí)際上，文字確實(shí)是在頁(yè)面的正中心位置上了，這同樣我們的眼睛在作怪。

所以為了抵消視覺上的這種墜落感，我們需要將文字略微向上移動(dòng)，這樣我們看這段文字才是真正居中的。

正向

我們?cè)倥e個(gè)例子，這是一個(gè)數(shù)字 8，我們來(lái)仔細(xì)觀察一下它的造型，頂部與底部的負(fù)空間看起來(lái)是一樣大的對(duì)嗎？

垂直翻轉(zhuǎn)

而事實(shí)上并不是這樣的，通過將它倒置，我們就會(huì)更明顯的看出來(lái)，其實(shí)為了抵消人眼的錯(cuò)覺，我們?cè)谧鲎值臅r(shí)候，需要將上面做的更小，底部做的更大一些。

這是兩個(gè)完全等大的黑色圓形，但它在視覺上其實(shí)并不是平衡的，人們的眼睛會(huì)覺得右邊更輕，這雖然沒有頂部和底部那么明顯，但也確實(shí)存在。那么解決的方法就是將左邊的圓形略微縮小一些，現(xiàn)在這個(gè)頁(yè)面看起來(lái)平衡多了。我們總是會(huì)下意識(shí)的認(rèn)為左側(cè)要更重要些。

? 畫作：The Creation of Adam

看這幅畫，很明顯左側(cè)的內(nèi)容要比右側(cè)更少，可如果我們將它鏡像翻轉(zhuǎn)過來(lái)，它原版的平衡感就會(huì)被打破了。人們更多會(huì)認(rèn)為左邊看起來(lái)更重了。

同樣的，在我們的漢字設(shè)計(jì)中，也會(huì)應(yīng)用這種做法，比如林字的兩個(gè)木字旁，就并不是左右等大的，因?yàn)檫@樣在視覺上會(huì)顯得不平衡。所以需要將左側(cè)的偏旁削弱，才會(huì)在視覺上看起來(lái)更加和諧。

具有左右結(jié)構(gòu)的漢字，基本上都遵循了這個(gè)原則。形成了左收右放的構(gòu)成樣式。

漢字“田”的中心十字筆畫，為了看起來(lái)是居中的感覺，實(shí)際上也特地微調(diào)了文字的重心部分。利用輔助線，我們會(huì)更容易察覺到這其中的變化?？梢钥吹?，橫筆部分，向上移動(dòng)了很多。豎筆部分也相應(yīng)向左做了位置上的調(diào)整。

人們常說，細(xì)節(jié)決定成敗。也正是這些不起眼的細(xì)節(jié)，拉開了專業(yè)平面設(shè)計(jì)和業(yè)余設(shè)計(jì)師之間的距離。相信看到這里的小伙伴們，應(yīng)該已經(jīng)領(lǐng)略到了視覺重力原則在設(shè)計(jì)中的重要地位了。那么光知道有這么一回事兒可不行，我們更應(yīng)該去了解它的特點(diǎn)，以及嘗試著去掌握它。

我們看到的所有圖像，無(wú)論抽象的還是具象的，其實(shí)都是具有重量感的。那么都有哪些因素會(huì)影響到視覺重力的大小呢？找到視覺重心之后，我們又要怎樣去利用它們？接下來(lái)我們就一起去尋找相應(yīng)的答案。

色彩對(duì)視覺重量有影響嗎？我們看畫面中的這兩個(gè)圖形，是不是很明顯感覺到右邊更重呢？黃色的色相本身的視覺明度就要比藍(lán)色更淺，所以我們會(huì)感覺到右邊更重。

為了抵消顏色對(duì)視覺重量的影響，我們需要降低藍(lán)色的面積，這樣才能讓兩個(gè)圖形看起來(lái)是平衡的。

那么換成具象的物體呢？道理其實(shí)也是一樣的。我們依然可以把它們看成是純粹的色彩。經(jīng)過這一步分析，我們是不是發(fā)現(xiàn)了左側(cè)紅色的蘋果，顯然會(huì)更深和更重呢？

所以，為了保持左右的平衡感，我們也需要把紅色相應(yīng)的縮小一些。

我們看這兩個(gè)圖形，它們誰(shuí)更重？左側(cè)的八邊形，它的頁(yè)面邊緣更復(fù)雜，角度變化也更多，所以承載了更多的信息量，相比正方形更簡(jiǎn)潔的造型來(lái)說，左側(cè)會(huì)更重。

那么換成大小相同的秤砣和棉花呢？誰(shuí)更重？幾乎沒懸念了，棉花完敗。當(dāng)具象的物體出現(xiàn)時(shí)，結(jié)合以往的視覺經(jīng)驗(yàn)后，誰(shuí)更重誰(shuí)更輕也就很顯而易見了。

對(duì)齊也需要考慮到視覺重力嗎？如果你也有這種疑問的話，接著往下看。這是兩個(gè)馬克杯，它們雖然造型類似，但是色彩卻不同。很顯然藍(lán)色的版本會(huì)更重，而在位置上更靠近左邊，也就顯得更重了。

所以，為了抵消這種重量上的輕微不平穩(wěn)，我們可以把顏色更淺的橙色放到左側(cè)的位置上。這樣雖然色彩上橙色更輕，可由于它的位置更重要，也就不會(huì)給人不平穩(wěn)的感覺了。

那么構(gòu)圖基本確定之后，我們?yōu)檫@兩個(gè)杯子搭配上一段文案信息。這樣兩個(gè)商品的展示也就做完了。你發(fā)現(xiàn)這兩個(gè)組合出現(xiàn)什么問題了嗎？當(dāng)文字信息加入到頁(yè)面之后，是不是覺得哪里不對(duì)呢？

電腦是看不懂圖像的，所以用到對(duì)齊命令時(shí)，它們會(huì)圍繞著像素的邊緣去做對(duì)齊。可問題在于，并不是所有圖片的視覺重心都剛好在方框的中間位置。

所以我們要去修改的地方，也正是這個(gè)視覺重心的對(duì)齊位置?，F(xiàn)在再看這兩個(gè)組合，是不是感覺和諧了很多。

當(dāng)西文和漢字相互組合時(shí)，需不需要考慮到視覺重心的對(duì)齊呢？我們看，如果僅僅是依據(jù)邊緣進(jìn)行對(duì)齊的話，就會(huì)讓西文部分看上去很小。而正確的做法是需要我們忽略掉一些文字邊緣的。

分別找到兩組文字的視覺大小。只有這樣，才能讓兩組文字在視覺面積上達(dá)到相同的重量。當(dāng)然，文字字重部分也是需要做出相應(yīng)匹配。我們看，經(jīng)過調(diào)整后，中西文的搭配明顯要更加平穩(wěn)了。

但也是有例外的，比如這個(gè)例子，明明是按照之前的調(diào)整方式，僅僅是更換了文字的內(nèi)容。為什么它看上去依然沒有對(duì)齊呢？這里的問題其實(shí)出現(xiàn)在西文部分，有些單詞組合，字母并沒有占據(jù)下伸部的空間。所以在整體上，就會(huì)顯得有高低的錯(cuò)落感。

這種情況，當(dāng)然就需要重新去匹配了。解決方法依然是對(duì)齊文字之間的視覺重心部分。所以，方法并不是死記硬背的。我們需要根據(jù)不同的情況去做出有針對(duì)性的調(diào)整。

接下來(lái)我們來(lái)做一個(gè)包裝的案例。它是一個(gè)螃蟹口味的海鮮調(diào)味料。首先，我們選擇這個(gè)手繪的螃蟹作為這個(gè)畫面中的視覺焦點(diǎn)，把它放在版面的中心位置。經(jīng)過前面的學(xué)習(xí)，我們知道了，選擇對(duì)齊元素時(shí)，我們要忽略掉那些細(xì)枝末節(jié)的部分，才能找到真正的視覺中心位置。

找到了視覺重心后，我們把它安排到頁(yè)面真正的中央部位。頂部和底部的空間，我們就繼續(xù)調(diào)整其他的信息。首先從層級(jí)上來(lái)說，在頁(yè)面頂部我們需要一個(gè)相對(duì)第二大面積的文字組合。

而其余的元素，圍繞著底部的負(fù)空間去排列就可以了，到這里這個(gè)包裝也就做完了。

無(wú)論是版式設(shè)計(jì)，還是繪畫攝影，構(gòu)圖從來(lái)都是一個(gè)講究的事情。想要做一版在視覺上平穩(wěn)的版面，最簡(jiǎn)單的辦法，就是把主體固定在頁(yè)面的中心位置。可是這種對(duì)稱的設(shè)計(jì)，由于太過完美，也多少會(huì)給人一種單調(diào)和乏味的印象。那么有沒有一種既讓頁(yè)面保持平衡，又能在結(jié)構(gòu)上做出變化的設(shè)計(jì)方法呢？這就引出了我們接下來(lái)的內(nèi)容了。

這個(gè)案例，屬于網(wǎng)頁(yè)中會(huì)出現(xiàn)的廣告頁(yè)面。首先，如果我想要讓版面達(dá)到平衡狀態(tài)，就需要把主體的重心安排在頁(yè)面的中央位置。

但是，為了讓頁(yè)面中加入更多信息，我們也不得不讓主體向頁(yè)面的一端靠攏，從而預(yù)留出足夠的空間。

可這樣就導(dǎo)致了頁(yè)面的不平衡，左側(cè)的文字重量并不能平衡整個(gè)版面。

其實(shí)，解決的辦法也很簡(jiǎn)單，我們可以試著將主體略微移向頁(yè)面的中心部分。這樣一來(lái)，就實(shí)現(xiàn)了一種動(dòng)態(tài)的平衡狀態(tài)。

這背后的知識(shí)其實(shí)很簡(jiǎn)單，就是最基本的杠桿原理。如果天平兩端并不平衡，那就讓更重那個(gè)的靠近中心，更輕的遠(yuǎn)離中心。這樣也就恢復(fù)到平衡狀態(tài)了。

這同樣是一個(gè)網(wǎng)頁(yè)中會(huì)出現(xiàn)的廣告頁(yè)面。我們看，它都出現(xiàn)了哪些問題。版面中所有的元素都集中到了頂部，這就導(dǎo)致了頁(yè)面底部重量過輕，頂部重量過重的極端對(duì)比。也就是我們俗稱的頭重腳輕。那么經(jīng)過調(diào)整之后問題依然存在。過多的空白，會(huì)讓人們感覺這個(gè)版面作品沒有完成。所有的重量都集中到了版面的左側(cè)，這依然是一個(gè)極端的構(gòu)圖。

正確的做法應(yīng)該是怎樣的呢？我們可以將重量最大的元素安排在中心位置。并且讓其他元素以對(duì)稱的樣式排布。

當(dāng)然，你也可以將信息放大，和原本的圖像進(jìn)行一個(gè)疊壓組合，形成一個(gè)更重更大的整體。

又或者，采用頂部圖像，底部文字的做法，讓頁(yè)面中的重量分配均等。

反過來(lái)也是一樣的，頂部安排文字，底部安排圖像。

再或者，我們可以將信息安排在頁(yè)面的左側(cè)，形成左字右圖的配置。這樣的構(gòu)成，有助于人們第一眼發(fā)現(xiàn)你想傳達(dá)的信息。

而反過來(lái)呢？圖像就成為了更重要的那個(gè)。人們會(huì)先看到圖，然后緊接著去閱讀相應(yīng)的文字信息。

到這里，我們分別從細(xì)節(jié)的刻畫，再到元素的重心對(duì)齊；又從視覺重心的動(dòng)態(tài)調(diào)整，一直講解到了宏觀頁(yè)面的構(gòu)建思路。我們可以看到，視覺重力原則幾乎滲透了整個(gè)設(shè)計(jì)流程。很多時(shí)候我們其實(shí)并不缺乏理論知識(shí)的武裝，可一到自己實(shí)際動(dòng)手，就馬上繳槍投降了。矛盾點(diǎn)還是出在對(duì)理論知識(shí)點(diǎn)靈活運(yùn)用上，接下來(lái)我就帶著大家再做幾個(gè)案例。

打算做一套大米的包裝設(shè)計(jì)。產(chǎn)品的名字就叫高山巖米。它長(zhǎng)什么樣子呢，就像我們現(xiàn)在看到的這樣，類似葡萄干一樣，和我們平時(shí)見到的大米顏色是有一些區(qū)別的，據(jù)說營(yíng)養(yǎng)價(jià)值很高，也被譽(yù)為米中黃金。

我想利用圖形的切割來(lái)表現(xiàn)這個(gè)巖米的部分。同時(shí)，在輔助一個(gè)篆書結(jié)構(gòu)的山字，以這樣的圖形來(lái)體現(xiàn)這個(gè)主題內(nèi)容。并且，我也希望這個(gè)大米的部分是鏤空的，能夠透過它看到真實(shí)的米。

主視覺的刻畫差不多后，接下來(lái)我把它放到包裝上，并且將其他信息也一并加入到版面里。不過這樣一來(lái)，信息和主視覺相互疊壓，對(duì)于內(nèi)容來(lái)說可能會(huì)有些相互干擾了。所以我們來(lái)試著編排一下。到這里，好像出現(xiàn)了我們前面提到過的問題了，那就是，整個(gè)布局顯得頭重腳輕了。

接下來(lái)再試著調(diào)整一下?，F(xiàn)在我們把底部和頂部的空間都占據(jù)了，同時(shí)也預(yù)留出了三分之一的留白，這該不會(huì)有什么問題了吧。相信看到這里的小伙伴應(yīng)該都能看出問題了，那就是這樣的配置確實(shí)有些左重右輕了。留白可以有，但絕對(duì)不是這樣做的。

除了我們之前提到的上圖下字，或者是左圖右字之外。我們當(dāng)然也可以綜合的應(yīng)用它們。我們現(xiàn)在這個(gè)構(gòu)成，其實(shí)就是一種全包圍的結(jié)構(gòu)。

又或者，將一部分內(nèi)容放在底部，而主要去刻畫上方的文本樣式。這就形成了類似半包圍的結(jié)構(gòu)。

如果說之前的版本是上下樣式的半包圍構(gòu)成的話。那么接下來(lái)的這個(gè)構(gòu)圖，就是融合了重心動(dòng)態(tài)布局的左右樣式半包圍構(gòu)成了。

當(dāng)我們不知道怎樣去安排版式構(gòu)成時(shí)，視覺重力原則就成為了一個(gè)很好的參考依據(jù)。

我們?cè)僮鲆话婊顒?dòng)海報(bào)。畫面中出現(xiàn)的各種電器，都是經(jīng)過退底處理的。這樣的處理，能夠讓它們毫無(wú)違和感的出現(xiàn)在同一個(gè)頁(yè)面中。

在頁(yè)面的部分，我加入了這個(gè)活動(dòng)的具體內(nèi)容。展覽的主題叫《模塊世界展》，是著名設(shè)計(jì)師迪特拉姆斯的個(gè)人展覽。

拿到這樣的內(nèi)容時(shí)，最保險(xiǎn)的做法就是讓頂部的圖片成為一個(gè)更大的組合。上圖下字，很平穩(wěn)，也很保守。

我們可以看到，圖片部分，我盡量將它們還原成了現(xiàn)實(shí)中它們本來(lái)的比例關(guān)系。

或許，我們也可以再換一種思路，相對(duì)的更突破一些。將圖片通過顏色劃分成組。我們能夠看到，其中有全黑的，也有彩色的，更有白色的。

除了像剛剛的堆積到角落，我們也可以把圖片組合規(guī)劃成對(duì)角線的樣式，在這樣的形式下，版面構(gòu)圖依然是平衡的。

我們當(dāng)然也能讓圖片組合劃分成一個(gè)更大的組合，以及一個(gè)更小的組合。

又或者，打亂圖片的順序，完全依據(jù)視覺重心去匹配其中的位置關(guān)系。

最終，我決定從展覽的主題中尋找突破口，以“錯(cuò)位”的手法去呼應(yīng)“模塊化”這個(gè)概念。不僅僅是文字部分的錯(cuò)位和拆解，圖片部分也通過硬邊的投影，形成了一種嵌套于版面中的視覺印象。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：優(yōu)設(shè)   作者：研習(xí)社

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)