用戶本能地會對不平衡的設(shè)計(jì)感到厭煩，如何在畫面中創(chuàng)造一個(gè)有吸引力的平衡？是本篇文章要分享的內(nèi)容。

Illustration: Outcrowd

平衡是一個(gè)作品中最重要的元素之一。平衡中的對稱關(guān)系能夠創(chuàng)造平衡與和諧，這種平衡狀態(tài)直觀上能夠讓用戶感到舒適。

人體是垂直對稱的，我們的視覺接收也與之相對應(yīng)。我們喜歡物體在垂直軸上保持平衡，直覺上總是傾向于平衡一種力量與另一種力量。

Illustration: Outcrowd

在設(shè)計(jì)環(huán)境中，平衡是基于元素的視覺重量，而視覺重量是用戶對圖像的注意力范圍。如果畫面是平衡的，用戶會下意識地感到舒適。畫面平衡被認(rèn)為是其元素在視覺上的比例安排。

如何讓一個(gè)頁面看起來平衡？

1. 對稱（靜態(tài)）平衡

最常見的平衡例子就是使用對稱。

在潛意識層面上，對稱的視覺能讓人愉悅，能讓畫面看起來和諧有條理。對稱的平衡是通過在水平或垂直的中軸兩側(cè)均勻放置元素來創(chuàng)造的。也就是說，畫面中間假想線的兩邊實(shí)際上是彼此的鏡像。有些人認(rèn)為對稱的平衡是無聊和可預(yù)測的，但它經(jīng)受住了時(shí)間的考驗(yàn)，到現(xiàn)在仍然是在頁面上創(chuàng)造舒適和穩(wěn)健感覺的最好方法之一。

Illustration: Outcrowd

2. 不對稱（動(dòng)態(tài)）平衡

兩側(cè)重量不相同的元素構(gòu)成具有不對稱平衡。

動(dòng)態(tài)平衡通常會比靜態(tài)平衡更有設(shè)計(jì)感，讓畫面不至于呆板。在缺乏平衡的情況下，我們的目光會條件反射性地開始尋找平衡點(diǎn)，這是一個(gè)很好的機(jī)會，可以將注意力吸引到頁面上可能還沒被注意到的部分。頁面重點(diǎn)就應(yīng)該放在這里——抓住用戶的注意力，就像產(chǎn)品的生命線一樣。 

Landing page — Asian Cuisine

比如一般這樣去“配重”的元素會是一個(gè)按鈕或者標(biāo)題。

重要信息（或者是行動(dòng)按鈕）就是我們需要去配重的價(jià)值元素。

不對稱的現(xiàn)象越嚴(yán)重，用戶就越想找出其中的原因（檢查配重）。人們本能地比平時(shí)更仔細(xì)地研究這樣的畫面。然而，這里需要注意分寸，過于古怪的構(gòu)圖并不總是能被很好的感知。

3. 徑向平衡

Illustration: Outcrowd

平衡中的另一種類型，特點(diǎn)是視覺元素從一個(gè)共同的中心點(diǎn)放射出來。徑向平衡在設(shè)計(jì)中不常用。它的優(yōu)點(diǎn)是，注意力很容易找到并保持一個(gè)焦點(diǎn)——恰好就在它的中心，這通常是構(gòu)圖中最引人注目的部分。

4. 馬賽克平衡

這是一種平衡中的混亂，就像 Jackson Pollock的畫作一樣。這樣的組成沒有突出的焦點(diǎn)，所有的元素都有同樣的視覺重量。沒有層次，乍一看，畫面就像視覺噪音，但所有元素又相互匹配，形成一個(gè)連貫的整體。

（彩云注：這是一種比較高階的設(shè)計(jì)平衡處理手法，用的好可以讓畫面非常具有設(shè)計(jì)感，但把握不好的話，就會非常凌亂。所以，我們平時(shí)能看到很多大師的作品看似一些簡單圖形的使用，但就是好看，輪到自己設(shè)計(jì)的時(shí)候就會發(fā)現(xiàn)，越簡單的設(shè)計(jì)似乎越難設(shè)計(jì)好。） 

Illustration: Outcrowd

視覺平衡的秘密？

當(dāng)談到構(gòu)圖中的重量平衡時(shí)，他們經(jīng)常將其與物理世界中的重量進(jìn)行比較：重力、杠桿、重量和支點(diǎn)。我們的大腦和眼睛感知平衡的方式非常類似于力學(xué)定律。我們很容易把一幅畫想象成一個(gè)在某一點(diǎn)上平衡的平面，就像一個(gè)天平。如果我們在圖像的邊緣添加一個(gè)元素，它就會失去平衡，有必要修復(fù)它。元素是否是一組色調(diào)、顏色還是點(diǎn)并不重要，目標(biāo)是找到圖像的視覺“重心”，即圖像的重心。

不幸的是，沒有精確的方法來確定一個(gè)物體的視覺質(zhì)量。一般來說，設(shè)計(jì)師依賴于他們的直覺。不過，下面這些有用的觀察可能會有所幫助:

• 大小

大的物體總是更重

• 形狀

不規(guī)則形狀比規(guī)則形狀的元素輕

• 顏色

暖色比冷色重 

• 色調(diào)

  深色物體比淺色物體重

  
  

• 圖案

  帶有圖案的元素顯得更重

• 3D

  帶有紋理貼圖的元素顯得更重 

• 位置

物體離中心越遠(yuǎn)，其視覺重量越大 

• 方向

垂直元素比水平元素更重 

• 密度

許多小元素可以抵消一個(gè)大元素 

• 內(nèi)部復(fù)雜性

  物體內(nèi)部越復(fù)雜，視覺重量更大

• 填充空間關(guān)系

  正形空間比負(fù)形空間更重

• 對重量的感知

  照片中的啞鈴看起來會比一只鋼筆更重 

總結(jié)

當(dāng)使用對稱時(shí)，作品看起來可以更加的專業(yè)和有科學(xué)性。其中，靜態(tài)對稱的作品顯得更加有專業(yè)精神和嚴(yán)肅的；而動(dòng)態(tài)對稱的設(shè)計(jì)方法則能吸引用戶的興趣，表達(dá)出個(gè)性和創(chuàng)造力，能讓用戶集中注意力。 

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