旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > UI設(shè)計中的排版設(shè)計技巧

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

時間:2020-09-02來源:m.5wd995.cn點擊量:作者:Gella
時間:2020-09-02點擊量:作者:Gella

  不知道大家有沒有遇到過這樣的情況,在排版的時候咔咔一頓操作,圖形字母四處飛,試了一遍又一遍,但最后卻發(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)文章。



 

預(yù)約申請免費試聽課

填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖