詳細解析平面版面設計構圖的原則

最新 01-20

好的設計的關鍵是什麼？好的版面設計要從強大的構圖和良好的流程開始。

你有沒有打開網站，或拿起小冊子或傳單尋找一些信息，卻感覺不可能找到你要找的東西?

你可能會看到一個混亂無序的信息混亂，你甚至不知道從哪裡開始，因為你的眼睛沒有看到設計的路徑。

作為設計的消費者，我們都可能在某個時候體驗過這種情況。但作為設計師，確保我們的設計布局不能出現這種情況，否則讀者急於在瀏覽器中點擊後退按鈕，或者沮喪地丟棄傳單。

那麼好的設計的關鍵是什麼?好的版面設計要從強大的構圖和良好的流程開始。

構圖：設計師的定義

構圖指的是：你設計的所有元素被安排創建一個有凝聚力的整體。您可能添加到設計中的實際元素，如排版、照片或圖形，但是也會考慮「布局的整體視覺效果」(如白色或空白空間，對齊和邊距)的「不可見」元素，或者您可能用來安排設計的任何框架(如網格，黃金比例或三分法則)。良好的構圖應該以一種有意義的方式，在視覺上引導觀者的思考。

作為流程的一個簡單的例子，這張名片有一個明顯的向下移動(箭頭形狀的幫助，從字面上指出)，其信息從上到下按重要性排列。

這種構思，關於如何將布局拼湊在一起的思考和有意識的行為，是一種適用於許多不同類型的視覺藝術的技巧，像繪畫、攝影。

現在讓我們看看傳統上用來創建有效的，視覺上吸引人的作品的一些工具和技術。

可視重量和平衡：創建一個清晰的層次結構

一個好的作品，不僅僅是一個整齊排列的形狀、顏色和文本的結合體。每一個設計都有其目的，並向讀者傳遞信息，而且一個精心策劃的組合可以考慮設計中最重要的信息，並以一種合理的方式強化信息。通過其重要性來安排信息的過程通常被稱為建立層次結構。沒有層次結構(或不適當的層次)導致了一個混亂的設計，沒有視覺流動，我們不想看到這樣的作品。我們來看看兩個關鍵要素：明確的層級，焦點和平衡的組織：

01.選擇一個焦點

一個聯絡點將人們吸引到您的設計中，並讓他們有機會開始審視您的作品。如果觀眾只有幾秒鐘的時間瀏覽一下你的設計，你留下一個印象或者記住一些信息，那會是什麼?這個重要元素應該是你的主要焦點，為了確保它是人們首先看到的東西，你需要找到一種方法來強調這件作品，並使其成為布局中最明顯的部分。

該怎麼做呢?通過視覺上的焦點來增加重量感。當設計元素具有視覺上的重量時，乍一看是最突出的。它在視覺上是「沉重的」，使得它在整個布局中體現出來了——你可以立刻知道它是重要的，它通過與外觀相關的東西吸引你的注意力，通常與其餘的設計形成對比。有哪些技術手段使設計版面上能體現視覺焦點重量感?有很多可供選擇，包括但不限於：

? 尺寸

? 形狀

? 顏色

? 質地

? 位置

我們來看一些例子：

把圖片文字放大尺寸。版面設計上中最大的圖片或者文字，可能是人們看到的第一件事。但是，有時僅靠大小還不足以使您的焦點可見; 確保你知道它是如何與設計的其餘部分相互作用的。與下面的海報一樣，在你的焦點周圍作留白處理，這樣常常有助於引導讀者的眼睛。

吸引注意與不尋常的形狀。以下廣告在多個層面上是一個有趣的作品。它首先用一種不尋常的形狀捕捉到你的眼睛，這就是吉他的輪廓。這種形狀引導你的眼睛到吉他的「頸部」，「頸部」是由廣告的正文形成的。所有這些設計選擇 ——吉他的形狀，士兵的照片，文本所講述的故事 ——以一種視覺引人入勝的方式支撐整個版面設計的構成。

選擇突出明亮的顏色。下面的網站設計將鮮明的霓虹綠色應用於號召性用語(「下載應用程序」按鈕)。即使按鈕不是頁面上最大的對象，但是由於使用這種明亮顏色的緣故，它首先吸引了你的注意力。

添加紋理。下面的廣告提供了復古外觀的紋理，增加了額外的視覺效果，但也轉移了設計的某些部分的注意力。請注意，「印刷店」的顏色深淺如何幫助這個詞語脫穎而出。「免運費」中的「免費」字母並非完全平穩穩定，也引起了人們的關注。

重要視覺元素的位置。為您的焦點選擇正確的位置，將確保其用於將讀者吸引到您的設計中。作品的左上角和中心部分都是常用的選擇，但最有效的地方將取決於每個項目的具體情況和要求。

02.平衡和組織其餘部分的設計

當焦點進入到讀者視線後，需要按照他們可以輕鬆瀏覽其餘布局的方式進行組織。這是層級真正起作用的地方，在讀者看到你的設計時，好有一個清晰的途徑。他們的眼睛是否應該向下移動?跨越?從一個部分到另一個?

設計中的非焦點部分，如何從焦點流向其他層級的途徑，將是成功構圖的關鍵。您可以使用我們已經討論過的一些技巧，通過布局指導讀者，但是大多數設計都將受益於整體結構或組織原則。而不是隨意地將元素投射到您的設計中，並希望它變成好的，對於構建您的構圖而言，考慮周到和有意為您的讀者創造一個更有用和更具視覺吸引力的體驗。讓我們看看一些常見的技術：

使用網格。將您的設計與某種網格對齊是一種簡單而有效的方法，使事情整潔有序，基於網格的布局的可能性是相當無窮的。

下面的網站設計將網格應用到網站的整體結構以及該結構中，以組織和分離信息(注意每個圖像下面的可見網格線)。其結果是一個乾淨，有序的組合，建立一個清晰的方式來探索網站，並找到你需要的信息。

嘗試「三分法則」。三分法則是視覺藝術中的經典構圖技巧，但您可能會聽到攝影師特別讚歎。為什麼?這項技術的支持者指出，當主題(或焦點)完全處於合成的中間時，是常規的和可預測的方法。為了創造一個更有活力和視覺上有趣的作品，你把焦點轉移到了一邊。三分法網格(見下面)是創建平衡但動態組合的捷徑。它將圖像或布局劃分為相等的三分之一，包括垂直和水平六行。這些線條，或理想情況下這些線條相交的四個點是放置焦點的好地方。

這個廣告將焦點(廣告品牌的標誌和名稱)直接放在作品的上半部分。還要注意摺疊的錢包如何巧妙地暗示著英國國旗的形狀(這個廣告是為一家倫敦的皮具公司製作的)，並指出了這個品牌的名字......這是一種被稱為「領導線」的組合技術。

考慮對稱性。對稱性是平衡設計的最大貢獻者之一。在對稱設計中，中心軸的兩側均勻平衡，無論是垂直、水平還是徑向(從中心點輻射，通常為圓形)。即使是不對稱的對稱，也能改善布局的視覺平衡。下面的設計既有垂直對稱，又有水平對稱，所以即使它的裝飾風格有很大的輻射面和變化，它看起來仍然很平衡。

這個活動的海報具有徑向對稱的形式。焦點是指事件名稱的一系列圖像，文字信息從那裡輻射出來，平衡了圖像的視覺重量。

留下一些空白空間。設計中的白色或空白區域不是浪費空間，而是平衡構圖的基本要素。留出足夠的空白空間，可以讓您的版面布局不至於過於混亂，並給您的設計元素留下一些喘息的空間。它還提供了讀者看設計時的眼睛路徑，以及在看布局之間休息的地方?——這對保持內容繁重的作品不受壓倒性讀者的影響，尤其重要。

例如，這個網頁內容之間和周圍的空白，讓你的眼睛從一個部分轉到另一個部分，創造一個很好的流動感，它又是一個乾淨的、清爽的風格作品。

領導力量：創造運動路徑，引領眼球

主要的線條是文字或暗示的線條，引導讀者的眼睛，你希望他們看到——通常是你的設計的焦點，但有時只是從布局的一個部分或元素到另一個部分。主要的線路路徑可以採取多種不同的形式，包括：

01.對角線

對角線可通過橫跨設計，通常從上到下，從左到右來實現，就像閱讀一本書時眼睛的視線移動方向。創造動感或暗示方向。另一種常見的技術是使用來自相反方向的兩條對角線，將用戶的注意力集中在一個點上。如果你上學的時候，曾經上過一個藝術課，一個常見的做法是畫一條延伸到遠處的道路或通道：兩條對角線從相反的方向出發，開始寬而窄，直到它們相遇被稱為「消失點」的視界，這是行動中的對角線，是構圖中創造深度和視角的最基本的方法之一。

以下網站設計使用此概念來組織其產品圖庫。注意背景中黃色形狀所產生的對角線(以及選擇性模糊)如何在設計中產生深度感。