文章：你知道嗎？構圖的奧秘很簡單
來自公眾號：研習設
生活在地球上的我們，每時每刻其實都在感受著重力的存在。除了物理層面的影響，重力是否會改變我們對于視覺畫面的認知呢？又或者說，物理學中經常聽到的重力概念，和設計中的構圖、排版又存在著怎樣的關聯呢？
我們或許能夠從格式塔學派對認知心理學的研究里，尋找到一些蛛絲馬跡。
人們的大腦總是會去腦補眼前看到的事物。就像我們看到的這三個被遮擋住的圓形圖案，位于中心的倒三角雖然沒有實際出現，但我們確實認為它是存在的對吧。
視覺本身是很容易被周圍環境影響的，就像我們現在看到的這個畫面一樣。如果忽略掉空間和透視的話，你還會覺得右側的豎線更高嗎？
而實際上的情況是，左邊的豎線高度要遠遠高于右邊的豎線高度。
再看這個例子，兩側位于中央的白色球形，它們之間，誰看起來更大，誰又看起來更小？也許有的朋友會說左邊更大，這個答案是沒錯的，但它也僅僅是看起來更大而已。
如果我們在畫面中拉出兩條輔助線，我們就會發現，原本右邊看起來更小的圓球，要比左邊的圓球更大。
通過剛剛的幾個小測試，相信大家已經對于用眼睛的判斷能力有了一些認識了，是不是有一種眼見不一定為實的感覺？視覺重力原則，其實就是建立在這樣的認知基礎之上的。我們大腦所認為的重心或平衡感，和真實的情況，往往并不相同。
在做版式設計的時候，我們的構圖越接近重心的平穩狀態，就越會激發和諧的美感。因為重力在自然界中是再平常不過的現象了，生活在這樣環境中的我們，自然也會有這種審美上的傾向了。
我們來看這個例子，這張紙最穩定的位置在哪里呢？答案是它的正中心。
我們把信息添加在頁面的中心位置，現在它看起來更平穩了嗎？然而并沒有，可問題出在哪？一定是我們沒有把文字擺正吧？上方的區域（a），看起來要比下方的區域（b）面積更大一些，真的是這樣么？
可實際上，文字確實是在頁面的正中心位置上了，這同樣是我們的眼睛在作怪。
所以為了抵消視覺上的這種墜落感，我們需要將文字略微向上移動，這樣我們看這段文字才是真正居中的。
正向
我們再舉個例子，這是一個數字8，我們來仔細觀察一下它的造型，頂部與底部的負空間看起來是一樣大的對嗎？
垂直翻轉
而事實上并不是這樣的，通過將它倒置，我們就會更明顯地看出來，其實為了抵消人眼的錯覺，我們在做字的時候，需要將上面做的更小，底部做的更大一些。
這是兩個完全等大的黑色圓形，但它在視覺上其實并不是平衡的，人們的眼睛會覺得右邊更輕，這雖然沒有頂部和底部那么明顯，但也確實存在。
那么解決的方法就是將左邊的圓形略微縮小一些，現在這個頁面看起來平衡多了。我們總是會下意識地認為左側要更重要些。
[ 畫作：The Creation of Adam ]
看這幅畫，很明顯左側的內容要比右側更少，可如果我們將它鏡像翻轉過來，它原版的平衡感就會被打破了。人們更多會認為左邊看起來更重了。
同樣的，在我們的漢字設計中，也會應用這種做法，比如林字的兩個木字旁，就并不是左右等大的，因為這樣在視覺上會顯得不平衡。所以需要將左側的偏旁削弱，才會在視覺上看起來更加和諧。
具有左右結構的漢字，基本上都遵循了這個原則。形成了左收右放的構成樣式。
漢字“田”的中心十字筆畫，為了看起來是居中的感覺，實際上也特地微調了文字的重心部分。利用輔助線，我們會更容易察覺到這其中的變化。
可以看到，橫筆部分，向上移動了很多。豎筆部分也相應向左做了位置上的調整。
人們常說，細節決定成敗。也正是這些不起眼的細節，拉開了專業平面設計師和業余設計師之間的距離。相信看到這里的小伙伴們，應該已經領略到了視覺重力原則在設計中的重要地位了。那么光知道有這么一回事兒可不行，我們更應該去了解它的特點，以及嘗試著去掌握它。
我們所看到的所有圖像，無論抽象的還是具象的，其實都是具有重量感的。那么都有哪些因素會影響到視覺重力的大小呢？找到視覺重心之后，我們又要怎樣去利用它們？接下來我們就一起去尋找相應的答案。
色彩對視覺重量有影響嗎？我們看畫面中的這兩個圖形，是不是很明顯感覺到右邊更重呢？黃色的色相本身的視覺明度就要比藍色更淺，所以我們會感覺到右邊更重。
為了抵消顏色對視覺重量的影響，我們需要降低藍色的面積，這樣才能讓兩個圖形看起來是平衡的。
那么換成具象的物體呢？道理其實也是一樣的。我們依然可以把它們看成是純粹的色彩。經過這一步分析，我們是不是發現了左側紅色的蘋果，顯然會更深和更重呢？
所以，為了保持左右的平衡感，我們也需要把紅色相應地縮小一些。
我們看這兩個圖形，它們誰更重？左側的八邊形，它的頁面邊緣更復雜，角度變化也更多，所以承載了更多的信息量，相比正方形更簡潔的造型來說，左側會更重。
那么換成大小相同的秤砣和棉花呢？誰更重？幾乎沒懸念了，棉花完敗。當具象的物體出現時，結合以往的視覺經驗后，誰更重誰更輕也就很顯而易見了。
對齊也需要考慮到視覺重力嗎？如果你也有這種疑問的話，接著往下看。這是兩個馬克杯，它們雖然造型類似，但是色彩卻不同。很顯然藍色的版本會更重，而在位置上更靠近左邊，也就顯得更重了。
所以，為了抵消這種重量上的輕微不平穩，我們可以把顏色更淺的橙色放到左側的位置上。這樣雖然色彩上橙色更輕，可由于它的位置更重要，也就不會給人不平穩的感覺了。
那么構圖基本確定之后，我們為這兩個杯子搭配上一段文案信息。這樣兩個商品的展示也就做完了。你發現這兩個組合出現什么問題了嗎？當文字信息加入到頁面之后，是不是覺得哪里不對呢？
電腦是看不懂圖像的，所以用到對齊命令時，它們會圍繞著像素的邊緣去做對齊?？蓡栴}在于，并不是所有圖片的視覺重心都剛好在方框的中間位置。
所以我們要去修改的地方，也正是這個視覺重心的對齊位置。現在再看這兩個組合，是不是感覺和諧了很多。
當西文和漢字相互組合時，需不需要考慮到視覺重心的對齊呢？我們看，如果僅僅是依據邊緣進行對齊的話，就會讓西文部分看上去很小。而正確的做法是需要我們忽略掉一些文字邊緣的。
分別找到兩組文字的視覺大小。只有這樣，才能讓兩組文字在視覺面積上達到相同的重量。當然，文字字重部分也是需要做出相應匹配。我們看，經過調整后，中西文的搭配明顯要更加平穩了。
但也是有例外的，比如這個例子，明明是按照之前的調整方式，僅僅是更換了文字的內容。為什么它看上去依然沒有對齊呢？這里的問題其實出現在西文部分，有些單詞組合，字母并沒有占據下伸部的空間。所以在整體上，就會顯得有高低的錯落感。
這種情況，當然就需要重新去匹配了。解決方法依然是對齊文字之間的視覺重心部分。所以，方法并不是死記硬背的。我們需要根據不同的情況去做出有針對性的調整。
接下來我們來做一個包裝的案例。它是一個螃蟹口味的海鮮調味料。首先，我們選擇這個手繪的螃蟹作為這個畫面中的視覺焦點，把它放在版面的中心位置。經過前面的學習，我們知道了，選擇對齊元素時，我們要忽略掉那些細枝末節的部分，才能找到真正的視覺中心位置。
找到了視覺重心后，我們把它安排到頁面真正的中央部位。頂部和底部的空間，我們就繼續調整其他的信息。首先從層級上來說，在頁面頂部我們需要一個相對第二大面積的文字組合。
而其余的元素，圍繞著底部的負空間去排列就可以了，到這里這個包裝也就做完了。
無論是版式設計，還是繪畫攝影，構圖從來都是一個講究的事情。想要做一版在視覺上平穩的版面，最簡單的辦法，就是把主體固定在頁面的中心位置?？墒沁@種對稱的設計，由于太過完美，也多少會給人一種單調和乏味的印象。那么有沒有一種既讓頁面保持平衡，又能在結構上做出變化的設計方法呢？這就引出了我們接下來的內容了。
這個案例，屬于網頁中會出現的廣告頁面。首先，如果我想要讓版面達到平衡狀態，就需要把主體的重心安排在頁面的中央位置。
但是，為了讓頁面中加入更多信息，我們也不得不讓主體向頁面的一端靠攏，從而預留出足夠的空間。
可這樣就導致了頁面的不平衡，左側的文字重量并不能平衡整個版面。
其實，解決的辦法也很簡單，我們可以試著將主體略微移向頁面的中心部分。這樣一來，就實現了一種動態的平衡狀態。
這背后的知識其實很簡單，就是最基本的杠桿原理。如果天平兩端并不平衡，那就讓更重那個的靠近中心，更輕的遠離中心。這樣也就恢復到平衡狀態了。
這同樣是一個網頁中會出現的廣告頁面。我們看，它都出現了哪些問題。版面中所有的元素都集中到了頂部，這就導致了頁面底部重量過輕，頂部重量過重的極端對比。也就是我們俗稱的頭重腳輕。那么經過調整之后問題依然存在。過多的空白，會讓人們感覺這個版面作品沒有完成。所有的重量都集中到了版面的左側，這依然是一個極端的構圖。
正確的做法應該是怎樣的呢？我們可以將重量最大的元素安排在中心位置。并且讓其他元素以對稱的樣式排布。
當然，你也可以將信息放大，和原本的圖像進行一個疊壓組合，形成一個更重更大的整體。
又或者，采用頂部圖像，底部文字的做法，讓頁面中的重量分配均等。
反過來也是一樣的，頂部安排文字，底部安排圖像。
再或者，我們可以將信息安排在頁面的左側，形成左字右圖的配置。這樣的構成，有助于人們第一眼發現你想傳達的信息。
而反過來呢？圖像就成為了更重要的那個。人們會先看到圖，然后緊接著去閱讀相應的文字信息。
到這里，我們分別從細節的刻畫，再到元素的重心對齊；又從視覺重心的動態調整，一直講解到了宏觀頁面的構建思路。我們可以看到，視覺重力原則幾乎滲透了整個設計流程。很多時候我們其實并不缺乏理論知識的武裝，可一到自己實際動手，就馬上繳槍投降了。矛盾點還是出在對理論知識點靈活運用上，接下來我就帶著大家再做幾個案例。
打算做一套大米的包裝設計。產品的名字就叫高山巖米。它長什么樣子呢，就像我們現在看到的這樣，類似葡萄干一樣，和我們平時見到的大米顏色是有一些區別的，據說營養價值很高，也被譽為米中黃金。
我想利用圖形的切割來表現這個巖米的部分。同時，在輔助一個篆書結構的山字，以這樣的圖形來體現這個主題內容。并且，我也希望這個大米的部分是鏤空的，能夠透過它看到真實的米。
主視覺的刻畫差不多后，接下來我把它放到包裝上，并且將其他信息也一并加入到版面里。不過這樣一來，信息和主視覺相互疊壓，對于內容來說可能會有些相互干擾了。所以我們來試著編排一下。到這里，好像出現了我們前面提到過的問題了，那就是，整個布局顯得頭重腳輕了。
接下來再試著調整一下?，F在我們把底部和頂部的空間都占據了，同時也預留出了三分之一的留白，這該不會有什么問題了吧。相信看到這里的小伙伴應該都能看出問題了，那就是這樣的配置確實有些左重右輕了。留白可以有，但絕對不是這樣做的。
除了我們之前提到的上圖下字，或者是左圖右字之外。我們當然也可以綜合的應用它們。我們現在這個構成，其實就是一種全包圍的結構。
又或者，將一部分內容放在底部，而主要去刻畫上方的文本樣式。這就形成了類似半包圍的結構。
如果說之前的版本是上下樣式的半包圍構成的話。那么接下來的這個構圖，就是融合了重心動態布局的左右樣式半包圍構成了。
← 左右滑動查看更多 →
當我們不知道怎樣去安排版式構成時，視覺重力原則就成為了一個很好的參考依據。
我們再做一版活動海報。畫面中出現的各種電器，都是經過退底處理的。這樣的處理，能夠讓他們毫無違和感的出現在同一個頁面中。
在頁面的部分，我加入了這個活動的具體內容。展覽的主題叫《模塊世界展》，是著名設計師迪特拉姆斯的個人展覽。
拿到這樣的內容時，最保險的做法就是讓頂部的圖片成為一個更大的組合。上圖下字，很平穩，也很保守。
我們可以看到，圖片部分，我盡量將它們還原成了現實中它們本來的比例關系。
或許，我們也可以再換一種思路，相對的更突破一些。將圖片通過顏色劃分成組。我們能夠看到，其中有全黑的，也有彩色的，更有白色的。
除了像剛剛的堆積到角落，我們也可以把圖片組合規劃成對角線的樣式，在這樣的形式下，版面構圖依然是平衡的。
我們當然也能讓圖片組合劃分成一個更大的組合，以及一個更小的組合。
又或者，打亂圖片的順序，完全依據視覺重心去匹配其中的位置關系。
最終，我決定從展覽的主題中尋找突破口，以“錯位”的手法去呼應“模塊化”這個概念。不僅僅是文字部分的錯位和拆解，圖片部分也通過硬邊的投影，形成了一種嵌套于版面中的視覺印象。
今天我和大家分享的主題是設計中的視覺重力原則。無論是宏觀的版式構圖，還是微觀的視覺對齊，又或者是對視錯覺重心的補償和修正，重力都在無時無刻的影響著我們的判斷。保持頁面的平衡與穩定，不僅僅是在迎合人們的審美傾向，更是在構建一個符合大眾認知心理的傳達窗口。以上就是本期的全部內容了，我是東寧，如果你覺得我的分享對你有所幫助的話，別忘了給我點個贊。
