為什么你的設(shè)計(jì)總感覺不舒服?很可能是視覺平衡沒有做好
在日常場景中,畫面平衡是潛在的一個(gè)重要影響因素,合理且有吸引力的視覺平衡設(shè)計(jì),可以讓用戶更加舒心地接受并停留在使用頁面或者相應(yīng)場景中。那么,視覺平衡究竟應(yīng)該如何做好?本篇文章里,作者針對視覺平衡這件事兒進(jìn)行了分析總結(jié),一起來看一下。
畫面平衡是一個(gè)很基本的設(shè)計(jì)理念,但很多朋友在平時(shí)的作品中容易忽視這個(gè)點(diǎn)。彩云在星球中幫不少朋友看過作品集,發(fā)現(xiàn)最多的問題之一就是畫面平衡沒做好,我覺得只要把這個(gè)基本問題解決了,作品就能提升一個(gè)檔次。
用戶本能地會(huì)對不平衡的設(shè)計(jì)感到厭煩,如何在畫面中創(chuàng)造一個(gè)有吸引力的平衡?是本篇文章要分享的內(nèi)容。
Illustration: Outcrowd
平衡是一個(gè)作品中最重要的元素之一。平衡中的對稱關(guān)系能夠創(chuàng)造平衡與和諧,這種平衡狀態(tài)直觀上能夠讓用戶感到舒適。
人體是垂直對稱的,我們的視覺接收也與之相對應(yīng)。我們喜歡物體在垂直軸上保持平衡,直覺上總是傾向于平衡一種力量與另一種力量。
Illustration: Outcrowd
在設(shè)計(jì)環(huán)境中,平衡是基于元素的視覺重量,而視覺重量是用戶對圖像的注意力范圍。如果畫面是平衡的,用戶會(huì)下意識(shí)地感到舒適。畫面平衡被認(rèn)為是其元素在視覺上的比例安排。
如何讓一個(gè)頁面看起來平衡?
一、對稱(靜態(tài))平衡
最常見的平衡例子就是使用對稱。
在潛意識(shí)層面上,對稱的視覺能讓人愉悅,能讓畫面看起來和諧有條理。對稱的平衡是通過在水平或垂直的中軸兩側(cè)均勻放置元素來創(chuàng)造的。也就是說,畫面中間假想線的兩邊實(shí)際上是彼此的鏡像。有些人認(rèn)為對稱的平衡是無聊和可預(yù)測的,但它經(jīng)受住了時(shí)間的考驗(yàn),到現(xiàn)在仍然是在頁面上創(chuàng)造舒適和穩(wěn)健感覺的最好方法之一。
Illustration: Outcrowd
二、不對稱(動(dòng)態(tài))平衡
兩側(cè)重量不相同的元素構(gòu)成具有不對稱平衡。
動(dòng)態(tài)平衡通常會(huì)比靜態(tài)平衡更有設(shè)計(jì)感,讓畫面不至于呆板。在缺乏平衡的情況下,我們的目光會(huì)條件反射性地開始尋找平衡點(diǎn),這是一個(gè)很好的機(jī)會(huì),可以將注意力吸引到頁面上可能還沒被注意到的部分。頁面重點(diǎn)就應(yīng)該放在這里——抓住用戶的注意力,就像產(chǎn)品的生命線一樣。
Landing page — Asian Cuisine
比如一般這樣去“配重”的元素會(huì)是一個(gè)按鈕或者標(biāo)題。
重要信息(或者是行動(dòng)按鈕)就是我們需要去配重的價(jià)值元素。
不對稱的現(xiàn)象越嚴(yán)重,用戶就越想找出其中的原因(檢查配重)。人們本能地比平時(shí)更仔細(xì)地研究這樣的畫面。然而,這里需要注意分寸,過于古怪的構(gòu)圖并不總是能被很好的感知。
三、徑向平衡
Illustration: Outcrowd
平衡中的另一種類型,特點(diǎn)是視覺元素從一個(gè)共同的中心點(diǎn)放射出來。徑向平衡在設(shè)計(jì)中不常用。它的優(yōu)點(diǎn)是,注意力很容易找到并保持一個(gè)焦點(diǎn)——恰好就在它的中心,這通常是構(gòu)圖中最引人注目的部分。
四、馬賽克平衡
這是一種平衡中的混亂,就像 Jackson Pollock的畫作一樣。這樣的組成沒有突出的焦點(diǎn),所有的元素都有同樣的視覺重量。沒有層次,乍一看,畫面就像視覺噪音,但所有元素又相互匹配,形成一個(gè)連貫的整體。
(彩云注:這是一種比較高階的設(shè)計(jì)平衡處理手法,用的好可以讓畫面非常具有設(shè)計(jì)感,但把握不好的話,就會(huì)非常凌亂。所以,我們平時(shí)能看到很多大師的作品看似一些簡單圖形的使用,但就是好看,輪到自己設(shè)計(jì)的時(shí)候就會(huì)發(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è)元素,它就會(huì)失去平衡,有必要修復(fù)它。元素是否是一組色調(diào)、顏色還是點(diǎn)并不重要,目標(biāo)是找到圖像的視覺“重心”,即圖像的重心。
不幸的是,沒有精確的方法來確定一個(gè)物體的視覺質(zhì)量。一般來說,設(shè)計(jì)師依賴于他們的直覺。不過,下面這些有用的觀察可能會(huì)有所幫助:
1)大小
大的物體總是更重。
2)形狀
不規(guī)則形狀比規(guī)則形狀的元素輕。
3)顏色
暖色比冷色重。
4)色調(diào)
深色物體比淺色物體重。
5)圖案
帶有圖案的元素顯得更重。
6)3D
帶有紋理貼圖的元素顯得更重。
7)位置
物體離中心越遠(yuǎn),其視覺重量越大。
8)方向
垂直元素比水平元素更重。
9)密度
許多小元素可以抵消一個(gè)大元素。
10)內(nèi)部復(fù)雜性
物體內(nèi)部越復(fù)雜,視覺重量更大。
11)填充空間關(guān)系
正形空間比負(fù)形空間更重。
12)對重量的感知
照片中的啞鈴看起來會(huì)比一只鋼筆更重。
六、總結(jié)
當(dāng)使用對稱時(shí),作品看起來可以更加的專業(yè)和有科學(xué)性。其中,靜態(tài)對稱的作品顯得更加有專業(yè)精神和嚴(yán)肅的;而動(dòng)態(tài)對稱的設(shè)計(jì)方法則能吸引用戶的興趣,表達(dá)出個(gè)性和創(chuàng)造力,能讓用戶集中注意力。
為我投票
我在參加人人都是產(chǎn)品經(jīng)理2022年度作者評(píng)選,希望喜歡我的文章的朋友都能來支持我一下~
點(diǎn)擊下方鏈接進(jìn)入我的個(gè)人參選頁面,點(diǎn)擊紅心即可為我投票。
每人每天最多可投35票,投票即可獲得抽獎(jiǎng)機(jī)會(huì),抽取書籍、人人都是產(chǎn)品經(jīng)理紀(jì)念周邊和起點(diǎn)課堂會(huì)員等好禮哦!
投票傳送門:https://996.pm/MZ9B9
原文作者:Erik Messaki(本文翻譯已獲得作者的正式授權(quán))
原文:https://medium.com/outcrowd/balance-in-composition-how-to-balance-design-185afda003d7
譯者:彩云Sky,公眾號(hào):彩云譯設(shè)計(jì);人人都是產(chǎn)品經(jīng)理專欄作家,騰訊高級(jí)視覺設(shè)計(jì)師。
本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
可以分享到朋友圈嗎?????
感覺設(shè)計(jì)中很講究對稱,對稱的東西會(huì)給人一種美感,當(dāng)然不對稱運(yùn)用得好也會(huì)有不一樣的感覺。