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

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

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

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

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

　　1.用來平衡的三個工具
 

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

　　3.還是那個隱形的矩形框
 

　　1.用來平衡的三個工具
 

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

　　但是具體加什么呢?
 

　　我常用的三種方式如下。
 

　　第一種，加元素平衡
 

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

 

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

 

　　這樣就會平衡很多，很容易理解吧。
 

　　第二種，加底紋平衡
 

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

 

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

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

 

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

 

　　這樣看起來就會平衡很多，飽滿很多了。
 

　　第三種，加排版
 

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

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

 

　　嗯，平衡多了!
 

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

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

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

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

 

　　這其中有兩個細(xì)節(jié)，
 

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

　　三個元素的大小一定是不同的，最大的元素要放在畫面最輕最空的位置：

 

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

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

 

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

 

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

　　3.還是那個隱形的矩形框
 

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

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

 

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

 

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

　　在做大畫面的時候也是一樣的，畫一個隱形矩形：

 

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

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

　　總結(jié)
 

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

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

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