掌握設(shè)計(jì)中的三種平衡小技巧

資訊頻道 - 設(shè)計(jì)技 來源:菜心設(shè)計(jì)鋪 作者:cdo 2022-02-15

設(shè)計(jì)為什么需要平衡,這里的平衡最早起源于藝術(shù)!

大家都知道藝術(shù)品追求的最高境界就是永恒,如果一個(gè)藝術(shù)品,看起來不夠平衡,就很像個(gè)半成品,而半成品就是還沒完成的東西,很難達(dá)到永恒的境界。

設(shè)計(jì)也是一樣的,如果不夠平衡,就讓用戶感覺沒做完,不夠精致。

今天來介紹幾個(gè)我自己常用的讓畫面平衡的小技巧,希望對大家能有所幫助!

用來平衡的三個(gè)工具

對于平衡的首要原則非常簡單:哪里輕加哪里。

但是具體加什么呢?

我常用的三種方式如下:

01/

加元素平衡

比如下面這個(gè)畫面,很明顯哪里比較輕(或者說是比較空):

為什么我做的畫面總是不平衡?今天算是知道了!

那我們就可以在輕(空)的地方加一些元素,這畫面是上面空,那我們就把元素加在上面:

為什么我做的畫面總是不平衡?今天算是知道了!

這樣就會(huì)平衡很多,很容易理解吧。

02/

加底紋平衡

比如上幾天做的一個(gè)性別選擇界面,男性女性都會(huì)有一橫條:

為什么我做的畫面總是不平衡?今天算是知道了!

這時(shí)候我們會(huì)發(fā)現(xiàn)每個(gè)橫條都有點(diǎn)不平衡,左重右輕,剛才也說了,哪里輕就加重哪里即可。

比如在右側(cè)加一個(gè)對號(hào)表示選擇狀態(tài):

為什么我做的畫面總是不平衡?今天算是知道了!

但是還是覺得輕,這時(shí)候就可以采用第二種方法,加底紋理:

為什么我做的畫面總是不平衡?今天算是知道了!

這樣看起來就會(huì)平衡很多,飽滿很多了。

03/

加排版

有時(shí)候如果畫面單一,不夠平衡,我們也可以借助排版的力量來保證畫面的平衡。

比如下面這個(gè)畫面,右側(cè)是是形象,那我們就可以在左側(cè)加入排版信息,平衡畫面:

為什么我做的畫面總是不平衡?今天算是知道了!

嗯,平衡多了!

這三種方式,元素、底紋、排版,都是讓畫面更加平衡的常用工具。

穩(wěn)定的三角結(jié)構(gòu)

當(dāng)我們需要加多個(gè)元素的時(shí)候,我會(huì)采用三角構(gòu)圖,讓元素之間互相平衡。

比如現(xiàn)在我要給這個(gè)畫面加三個(gè)元素,我就會(huì)利用元素之間的三角構(gòu)圖讓畫面更加平衡:

為什么我做的畫面總是不平衡?今天算是知道了!

這其中有兩個(gè)細(xì)節(jié),

細(xì)節(jié)一:

三個(gè)元素的大小一定是不同的,最大的元素要放在畫面最輕最空的位置:

為什么我做的畫面總是不平衡?今天算是知道了!

細(xì)節(jié)二:

離最大元素最近的那個(gè)應(yīng)該是最小的元素:

為什么我做的畫面總是不平衡?今天算是知道了!

如果三個(gè)元素依次按從小到大的順序排列,就會(huì)比較平均,沒有節(jié)奏感:

為什么我做的畫面總是不平衡?今天算是知道了!

這就是我常用的「元素三角結(jié)構(gòu)」,讓畫面穩(wěn)定、平衡。

還是那個(gè)隱形的矩形框

我經(jīng)常把自己的東西畫一個(gè)隱形的矩形,不僅僅只是在圖標(biāo)設(shè)計(jì)當(dāng)中,排版的細(xì)節(jié)也一樣可以用到。

比如之前有一個(gè)角落信息排版是這樣的:

為什么我做的畫面總是不平衡?今天算是知道了!

當(dāng)我們加上矩形后,我們會(huì)發(fā)現(xiàn)這個(gè)矩形內(nèi)部是不平衡的,左下角和右上角是空的,導(dǎo)致上面的元素很容易掉下來:

為什么我做的畫面總是不平衡?今天算是知道了!

左面很明顯是不合理不平衡的,優(yōu)化后就好很多了。

在做大畫面的時(shí)候也是一樣的,畫一個(gè)隱形矩形:

為什么我做的畫面總是不平衡?今天算是知道了!

盡量讓這個(gè)矩形內(nèi)的四個(gè)角落都頂起來,這樣就會(huì)平衡飽滿一些。

這就是隱形矩形框的力量。

總結(jié)

「平衡」是影響畫面精致度的首要因素之一,是我們必須要重視的,以上就是我目前對于「處理平衡問題」的小技巧,希望能給大家?guī)硪恍﹩l(fā)。

聲明:站內(nèi)網(wǎng)友所發(fā)表的所有內(nèi)容及言論僅代表其本人,并不反映任何網(wǎng)站意見及觀點(diǎn)。

全部評論

暫無相關(guān)推薦