UI設(shè)計中的排版設(shè)計技巧

　　不知道大家有沒有遇到過這樣的情況,在排版的時候咔咔一頓操作，圖形字母四處飛，試了一遍又一遍，但最后卻發(fā)現(xiàn)效果并不咋地!反正我是經(jīng)常遇到這種情況，其實原因就在于我并沒有理清思路，如果我能把排版的思路想清楚，就不會每次都浪費大量時間了。今天AAA教育郭老師就帶大家分析一下UI設(shè)計中的排版設(shè)計技巧吧。
 

　　下面兩張圖是去年做的練習(xí)，兩個排版的思路是一樣的：

　　在排版上我做了很多次嘗試，中間有很多過程稿奇丑無比。
 

　　那到底正確的思路是怎樣的?一起來看看吧!
 

　　大綱如下：
 

　　1.別影響主角光環(huán)

        2.按照缺少的形狀補充內(nèi)容

        3.主體框架還是一個主體物加四角點綴

        4.元素之間的細(xì)節(jié)
 

　　1.別影響主角光環(huán)
 

　　在最開始排版的時候，因為沒想清楚，所以一頓瞎排，背景的形狀、顏色都是沒有章法的安放：

 

　　但其實我們只需要記住一點，最重要的一點，背景修飾元素不要搶主體，那就一定不會有太大的錯誤，所以我把背景使用了非常淺的灰色字母：

 

　　這樣一個既有背景修飾，又不搶主體物的畫面就出來了。
 

　　2.按照缺少的形狀補充內(nèi)容
 

　　有了主框架，我們會發(fā)現(xiàn)如果我們在背后畫一個隱形的矩形，會發(fā)現(xiàn)右下角是空的，嚴(yán)格來說就還不算飽滿：

 

　　這時候我們就可以按照缺少的形狀，加一些相對應(yīng)的排版，比如文字與圖形的組合：

 

　　這樣就算是比較飽滿了。
 

　　3.主體框架還是一個主體物加四角點綴
 

　　平時我經(jīng)常用到的一個排版就是四角排版，很簡單，不易出錯，比如：

 

　　這個畫面其實也可以使用這個思路，我們可以先把剛才右下角的元素亮起來：

 

　　然后在其他三個角落繼續(xù)添加輔助元素，元素盡量個不相同：

 

　　這樣一個主體加四角修飾的排版框架就基本完成了，但四個角落的元素還是有點突兀，需要繼續(xù)細(xì)化，接著看吧!
 

　　4.元素之間的細(xì)節(jié)
 

　　先來看下四個角落元素細(xì)化前后的對比圖：
 

　　細(xì)化前：

 

        細(xì)化后：

 

　　我做了三件事：
 

　　第一：深淺對比，四個角落元素都突出來，有點搶，所以把左下角的元素淡下去。
 

　　第二：色彩對比，講右上角的圓圈增加色相，使整體更加豐富，當(dāng)然色相必須和主題有所呼應(yīng)，所以選了藍色。
 

　　第三：前后對比，把右上角的圓圈放在灰色字母后面，形成前后關(guān)系，豐富層次。
 

　　做完這三點，看起來就和諧多啦!
 

　　5.總結(jié)
 

　　其實不論做什么，心里沒底都是因為背后的邏輯沒想清楚，當(dāng)我們能靜下心來認(rèn)真思考，想清楚原因，再加以改善，大部分問題都是可以解決的，慢慢的，心里也就有底了。
 

　　排版也是一樣的，多思考再多練習(xí)，不說咱們能稱為排版大神吧，但至少解決工作問題、做個作品集啥的，問題不大!
 

　　長點心，比啥都強!點個贊，更強!
 

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