如何在UI設(shè)計(jì)中達(dá)到畫面平衡

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

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

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

　　今天AAA教育郭老師就介紹幾個(gè)我自己常用的讓畫面平衡的小技巧，希望對(duì)大家能有所幫助!
 

　　1.用來(lái)平衡的三個(gè)工具
 

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

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

　　1.用來(lái)平衡的三個(gè)工具
 

　　對(duì)于平衡的首要原則非常簡(jiǎn)單：哪里輕加哪里。
 

　　但是具體加什么呢?
 

　　我常用的三種方式如下。
 

　　第一種，加元素平衡
 

　　比如下面這個(gè)畫面，很明顯哪里比較輕(或者說(shuō)是比較空)：

 

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

 

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

　　第二種，加底紋平衡
 

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

 

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

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

 

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

 

　　這樣看起來(lái)就會(huì)平衡很多，飽滿很多了。
 

　　第三種，加排版
 

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

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

 

　　嗯，平衡多了!
 

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

　　2.穩(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)定、平衡。
 

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

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

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

 

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

 

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

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

 

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

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

　　總結(jié)
 

　　“平衡”是影響畫面精致度的首要因素之一，是我們必須要重視的，以上就是我目前對(duì)于“處理平衡問題”的小技巧，希望能給大家?guī)?lái)一些啟發(fā)。
 

　　長(zhǎng)點(diǎn)心，比啥都強(qiáng)，點(diǎn)個(gè)關(guān)注，更強(qiáng)!
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。