完美構圖-設計師黃金分割法應用與原理

最新 06-27

GIF

（黑衣劍士的武器和對手的面部集中到了黃金分割點上，給人一個集中的逼迫點）

黃金分割是一個數學比例。我們在大自然中很容易找到這樣的比例，當它用於設計時，能創造有生命力的、純天然的視覺作品，愉悅我們的眼睛，但究竟什麼事黃金比例，如何使用它來提高你設計水平呢？

教程內容

一、黃金分割是什麼？

1、黃金分割線

黃金比例也被稱為黃金分割，存在於被分割成兩截的線段中。我們設較長的一段為a，較短的一段為b，那麼a / b = （a+b）/ a = 1.618 。

2、黃金比矩形

黃金比也適用於矩形。

1) 畫一個正方形，設定變長為1，改變其中一個邊為1.618，一個黃金比矩形就躍然紙上。

2) 如果把正方形疊加在矩形上，那麼這兩個圖形會讓你看到一個黃金比矩形。

3) 如果一直按照這樣的方式把黃金比應用到心得矩形上，那麼你最終會得到一個個逐漸縮小的正方形。

4) 假設你在上面這張黃金比例圖的每個正方形的對角畫一條曲線，你將會看到一個黃金比例曲線（亦稱斐波那契序列），這個序列的每一個數字是前面連個數字之和。

3、黃金比圓

在每個正方形中畫一個正圓，這樣的話，所有元的大小也同樣遵循1：1.618比例。

二、黃金分割的應用

黃金比例可以運用到設計中的許多地方，像布局、間距、內容、圖片和版式。

1、布局（黃金比例）

我們常常把黃金比例看作是確定空間布局的使用指南，應用黃金分割的最簡單方法是將舉行的長寬比設為1：1.618 。

這樣兩列布局非常適合網頁設計，在這種格式中你會看到許多在線內容。美國National Georaphic 就採用這種布局構建了一個整潔、便於閱讀、結構良好的網站，它為讀者提供了合乎規律的、秩序井然地、平衡的、層次分明的閱讀體驗。

遊戲UI也同樣適用此種布局

2、間距（黃金比例）

間距是任何設計的一大要素，它能營造負空間氛圍，使最終的結果要麼成功要麼毀滅。

確定元素的間距是相當耗時的事情，但是運用黃金分割圖，讓正方形來引導你確定每個元素的位置，工作起來會更省力好多。這將確保你的間距和比例是通過嚴密的計算而不是「憑感覺來的」，同時任何為達到黃金比例而作的微妙的調整都可能的導致所有元素的差異。

運用多個黃金比例來保持設計作品的整體連貫性。

1) 設計工作室Moodley 為布雷根茨 Festspiele 表演藝術節開發了一款新的品牌標識，包括logo、logo風格和拼貼設計，應用於程序、節目單和戶外活動。節目單著重強調了攝影和說明性的拼貼，還有一個留出大片空白的波形logo，黃金比例用來確定每個元素的大小和位置，以確保封面比例協調。

2) 新加坡的一家設計機構 Lemon Grophic 為 Terkaya 財富管理創建了一個視覺識別系統（如下圖），這種商務名片上的三個元素——小鷹、文字和大鷹，都分布在一條黃金曲線的不同位置。

3) 遊戲界面也會把相應的疏密，各種元素的搭配分布在黃金曲線上的不同位置，就不會顯得紊亂。

3、內容（黃金螺旋）

黃金螺旋可以被看作是確定內容的位置「指南」。我們的視覺會自然而然地落到螺旋的中心，這個位置有很多細節性的元素，所以在做設計時我們要非常關注螺旋的中心和螺旋走過的視覺空白區域。

在這個為 Saastamoisen saatio 所做的視覺識別系統中，隨著黃金螺旋的不斷延伸，內容也愈加密集。當我們的實現與曲線越近，字體和間距也在不斷減小。

由這個原理，我們就可以把視覺焦點的放在螺旋延伸的黃金分割點上

話題才剛剛開始，我們繼續更深入的探討！

4、圖像（黃金比例 — 三分法）

無論是傳達重要信息或創建一個美觀的照片，結構對任何圖像都很重要。黃金比例可以幫助設計師搭建一個結構，引導觀眾的實現到重要的位置去。使用黃金比例，將一張照片分割成不等的三個空間，再運用線條和相交的點去創建結構。

比例是1：0.618：1，設定第一和第三縱列的寬度是1，那麼縱列的為0.618；同樣，水平方向第一和第三橫排的高度為1，中間一行的寬度為0.618。現在使用這些先河焦點吸引管著的注意力向這些位置集中。這些元素形成了一種張力，增加了設計結構的趣味和力量。

另一種通過黃金比例處理圖像未知的方法是三分法，它不像黃金比例一樣精確，但相當接近。三分法即將空間劃分為三個水平或垂直防線都相等的空間，使圖像的重要元素都圍繞在舉行中心理想情況下的四個交點上。

封面的整體布局同事遵循黃金分割和黃金螺旋，內容集中在螺旋的位置，越接近落選的中心內容月詳細。

5、格式（黃金比例圓）

黃金比例可以用來創建比例協調的正方形和矩形，它也可以用來創建黃金比例的圓。每一個正方形中的元都與七鄰近的圓成1：1.618的比例，這就是完美的圓。

使用黃金分割不僅能創建和諧的、均衡的設計，也能保持格式的一致性。讓我們看一下百事可樂和Twitter的logo。

1) 百事可樂的標識基於兩個按照黃金比例相交的圓，小圓在重疊的圖案中並不那麼明顯，但是通過logo中間的白色部分還是能被識別的。

2) Twitter的標識基於集合結構並重點利用了圓的完美，從下面這張圖我們可以看出，它確實是運用黃金比例繪製的，但不完全精確，團總體還是遵循黃金比平平衡、協調、有序的特點。

3)蘋果公司LOGO設計中的黃金分割

美好的畫面結構適用於平面構成，當然也適用於影視以及遊戲的鏡頭設計。

只要構成畫面，就有一定的規則可循，一定要學會靈活運用。所謂活學活用。

遊戲美術的一些應用

遊戲美術場景設計——構圖的元素和原則

「設計元素」和「設計原則」被稱為藝術的語言或基石。對遊戲環境藝術師而言，指的就是用於構建關卡的模塊、道具和光線。

1、遊戲美術場景設計——設計元素

設計元素是藝術師構築圖像的工具，就好比視覺上的樂高積木。設計元素共有7種：線條、物體、大小、空間、顏色、質感和色值。

線條：線條可用於定義物體的形狀、外形或輪廓。線條包含長度和方向，而對觀察者的視覺衝擊取決於其延伸的角度。線條分為4種：水平、垂直、傾斜和曲線。水平線暗示著場景安詳寧靜，垂直線傳達力量和強勢，斜線代表移動或改變，而曲線給人安靜祥和的感覺。遊戲邦獲悉，線條可用於引導玩家注視某個特定的方向。

物體：物體既可以通過線條的組合來構建，也可以通過顏色或色調的改變來塑造。以下是各種不同的物體：幾何體——人造建築物；有機體——自然物體或那些由不規則曲線組成的物體；陰陽——佔據或不佔據空間的物體；靜態——穩定、不移動的物體；動態——蘊含著移動或動作的物體。

大小：大小可以通過各物體間的關係體現出來，沒有對比便無法突顯大小差異。物體間的大小差異影響視覺吸引力。

遊戲美術場景設計——物體間的大小差異

空間：空間可通過物體來劃定。

顏色：簡單來說，每種顏色都是色調、色值和色度的混合結果。顏色分為暖色和冷色，大量對比都可以通過顏色來實現。

質感：環境藝術師對質感都很熟悉。作為設計元素之一，質感指的是外表的視覺效果。粗糙、光滑、崎嶇不平等均屬質感。

色值：色值代表物體、陰影或顏色的亮暗程度。增加白色或黑色以及增加或減少光照的色度都可以使色值有所變化。光源的位置及其亮暗程度均對場景的外觀和玩家的情感響應有重大影響。

2、遊戲美術——設計原則

設計原則指的是在構圖中有效安排設計元素所採取的技術手段。設計原則包括平衡、方向、強調、比例、韻律、簡化和統一。由於畫面中需要融合各種不同元素，因而藝術師在每幅圖畫中也會使用多種原則。理解這些原則並將其運用於關卡設計中，可以更有效地製作出所需的視覺效果，向玩家傳達設計師的想法。

平衡：平衡所取得的效果是玩家的視線會自覺聚焦到屏幕左右兩側的中心點，可通過合理安排兩側的元素來實現。

設計師使用的所有元素都有著對應的視覺重量，與顏色、色值和大小有關。暗色元素的視覺重量高於淡色元素，大型元素的視覺重量高於小型元素。遊戲邦了解到，維持視覺平衡需要在視覺焦點兩側適當距離處放置恰當數量的「重」和「輕」元素。平衡屏幕上的元素可採用兩種方法：對稱和不對稱。

對稱平衡看起來較為順眼，給人平靜安穩的感覺。對稱平衡包括三種類型：平行對稱、轉動對稱和軸對稱。在平行對稱中，所有同等高度的元素從右向左依次排開。轉動對稱是指所有元素圍繞共同的中心轉動。軸對稱即保持焦點兩側的元素平衡。不對稱平衡通過在焦點周圍不規則擺放各種不同大小和視覺重量的元素來實現，這些元素間各自保持平衡。不規則平衡的另一種形式是用某個大型元素來與許多小型和視覺重量較輕的元素保持平衡。不對稱構圖通常傳達視覺上的緊張感，給玩家情感帶來的影響與對稱平衡相反，它逐漸灌輸的是激動、好奇或焦慮的感覺。

方向：方向可通過調整元素的位置、角度和分布點來實現。設計師可在構圖中利用方向產生的視覺動向來引導玩家的注意力，更為確切地說，方向可以讓玩家按照設計師的想法移動，方向還可以用於強調某個地點或某片區域的深度和廣度。亮暗色值是塑造方向的利器。

強調：關卡中的強調指某場所的環境焦點。方向可用於在區域內引導玩家，但如果場景中缺乏令其感興趣的視覺強調點，那麼整片區域將變得死氣沉沉，而且場景流動也會顯得過快。

比例：在構圖中，比例指各元素互相之間以及與整個世界的大小關係。結構比例（如天花板與地板間的距離）功能很多，可用於製造出視覺強調和重點，能夠給玩家帶來強勢或恐懼感。

比例還包括黃金分割和三分構圖法。在視頻遊戲中，雖然由玩家控制的動態鏡頭使構圖中運用這些比例方法較為困難，但某些情況下依然可以用到。這些比例準則已研究數百年之久，能夠給觀察者帶來不俗的視覺響應，因而在構圖中非常重要。黃金分割比例為1:1.618，三分構圖法是將屏幕橫向及縱向三等分，在構圖中位於這些交叉點的元素更為美觀。

韻律：韻律是指視覺元素的重複出現。韻律看起來較為平和，玩家在不知不覺中跟從這種富有節奏感的樣式。在構圖中，韻律可用於製造場景的深度和動感，或對某物體的強調。

簡化：某些視頻遊戲的關卡中，移動、VFX和聲效的頻率很快，比如敵人頻繁地向玩家射擊等。在這種情況下，構圖必須讀得又快又清晰。如果過於複雜、雜亂或模糊，就有可能丟失元素。遊戲邦覺得，此時就應當考慮「簡化」構圖。如果從設計的構圖中移除某個元素後構圖依然能夠發揮作用，那麼簡化的構圖可以更有效地傳達信息。在構圖時，無需加入絲毫不起作用的元素。設計師應該使用真正需要的東西，盡量優化構圖。

統一：統一是設計的最後一項原則，指的是場景或關卡中所有獨立元素間的關係。統一可賦予畫面整體感，畫面中的所有元素在視覺上成為統一體。縮小元素間的距離可製造統一感。以設置小道具為例，在構圖中小道具比隨意擺放的道具更為美觀。重複也可以塑造統一感，包括顏色、大小、質感和其他元素的重複。延伸則是更為微妙的技術，可以在構圖中控制視覺的動向並有意將其引向視覺起點。

說了這麼多，或許有些疲倦，那麼就來點阮佳作品大圖供大家欣賞！（透視消失點大致放在了黃金分割點上）