旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習/?A計劃
北京市海淀區(qū)漫動者職業(yè)技能培訓學校 全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > UI設(shè)計培訓課程Banner設(shè)計攻略

UI設(shè)計培訓課程Banner設(shè)計攻略

時間:2020-08-05來源:m.5wd995.cn點擊量:作者:Sissi
時間:2020-08-05點擊量:作者:Sissi



  在banner設(shè)計的過程中,郭老師發(fā)現(xiàn)線框在banner設(shè)計中的應(yīng)用非常廣泛。不僅能夠輔助一些元素的設(shè)計,還可以為設(shè)計增色不少,增加設(shè)計感。所以,我決定總結(jié)研究一番,發(fā)現(xiàn)這里面還是有點門路的。今天AAA教育郭老師就針對UI設(shè)計中banner設(shè)計的攻略進行簡單的說明。
 

  線作為平面構(gòu)成中三元素之一,具有非常廣泛的應(yīng)用范圍。
 

  「線」在版式中的作用主要表現(xiàn)為:表示強調(diào)、明確分隔、視覺引導、組織信息、豐富裝飾畫面等。
 

  在banner設(shè)計中,應(yīng)用線框也起到強調(diào)、視覺引導,組織信息,豐富畫面層次等作用。接下來,我們針對一些案例分析線框在banner設(shè)計中應(yīng)用的整體特點,以及在應(yīng)用時需要注意的設(shè)計細節(jié)。線框在banner中的應(yīng)用也同樣適用于在海報等其他設(shè)計范疇,舉一反三。
 

一、 應(yīng)用情況分類
 

  1. 大線框,輔助背景和整體版式

UI設(shè)計培訓課程Banner設(shè)計攻略
 

  特點:在banner中運用線框整體形式感強,可以起到較好的引導視覺的作用,用戶在看到banner的第一眼便會把注意力集中在線框內(nèi)的區(qū)域。
 

  2.小線框,應(yīng)用局部文案

UI設(shè)計培訓課程Banner設(shè)計攻略
 

  特點:在banner文案處應(yīng)用線框設(shè)計是最常見的。文案作為傳達banner信息的主要載體,在此處應(yīng)用banner可以很好的輔助設(shè)計,吸引關(guān)注,突出文案重點部分。在后面,我將專門分析線框如何應(yīng)用在文案部分。
 

  3.小線框,應(yīng)用局部圖像

UI設(shè)計培訓課程Banner設(shè)計攻略
 

  特點:在圖像周圍添加線框可以通過空間關(guān)系讓圖像更有立體感,增加設(shè)計的層次,起到突出產(chǎn)品的作用。
 

二、 應(yīng)用細節(jié)
 

  1.封閉和不封閉
 

  特點:在圖像周圍添加線框可以通過空間關(guān)系讓圖像更有立體感,增加設(shè)計的層次,起到突出產(chǎn)品的作用封閉的線框透氣性差一些,但在視覺上更規(guī)范、穩(wěn)重。

UI設(shè)計培訓課程Banner設(shè)計攻略
 

  不封閉的線框最為常見,透氣,具有較強的設(shè)計感,能夠發(fā)揮的的設(shè)計空間也很廣。在具體設(shè)計時,有兩種方式可以打破線框。直接選擇切斷部位斷開

UI設(shè)計培訓課程Banner設(shè)計攻略
 

  在線框軌跡上疊加其它元素(文案、圖片等)斷開
 

  此種方式較常見,可以利用文案、圖像與線框的空間關(guān)系塑造空間感,使線框與整體更好的融合在一起。

UI設(shè)計培訓課程Banner設(shè)計攻略
 

  2.組線條和細線條
 

  粗線條能更加引人注目,個性十足

UI設(shè)計培訓課程Banner設(shè)計攻略
 

  細線條顯得柔美、細膩、輕盈

UI設(shè)計培訓課程Banner設(shè)計攻略
 

  3.虛和實
 

  在線框的應(yīng)用中有虛實的區(qū)分。「虛」的線框在呈現(xiàn)形式上很靈活,較容易結(jié)合自己的創(chuàng)意,若隱若現(xiàn),沒有實線那么強烈的空間存在感。
 

  4.線框形狀
 

  線框的形狀比較靈活,我們可以根據(jù)設(shè)計靈活調(diào)整,最常見的是矩形,可以平衡畫面,規(guī)整,方便排版。三角形的線框輔助可以加強視覺沖擊力,營造個性、別致的感覺。圓形線框起到聚焦視覺中心點的作用,通常應(yīng)用在文案的強化設(shè)計中。其它形狀具有更多的發(fā)揮空間和個性,但不要過于復雜。
 

  5.表現(xiàn)形式
 

  線框雖然看似簡單,但也可以有很豐富的表現(xiàn)形式,通過對線框的「強化設(shè)計」,可以豐富線框的設(shè)計感。
 

  巧用漸變
 

  豐富畫面、個性絢麗。在深色背景中加入線框時,一般選用白色,但如果文字和線框都為白色,往往會感覺單調(diào),此時將線框改為漸變色是個不錯的選擇。
 

  紋理、質(zhì)感
 

  加入特殊的紋理、質(zhì)感,可以與其他元素保持風格統(tǒng)一,使畫面更協(xié)調(diào)。
 

  創(chuàng)意結(jié)合

UI設(shè)計培訓課程Banner設(shè)計攻略
 

  結(jié)合主題的創(chuàng)意線框讓人眼前一亮。
 

  不規(guī)則變化

UI設(shè)計培訓課程Banner設(shè)計攻略
 

  不規(guī)則的變形可以增加俏皮的感覺,不死板。
 

三、排版方式探索
 

  這部分主要總結(jié)一下線框在應(yīng)用過程與文案、圖片結(jié)合時常見的設(shè)計方式。
 

  1.排版與文案
 

  圖示中的案例是以矩形作為基礎(chǔ),如果小伙伴們應(yīng)用了三角形或其它形狀,在與文案結(jié)合時也基本類似,靈活設(shè)計即可。

UI設(shè)計培訓課程Banner設(shè)計攻略
 

  2. 與圖片
 

  圖片與線框結(jié)合可以豐富畫面,增強設(shè)計感。

UI設(shè)計培訓課程Banner設(shè)計攻略
 

  總結(jié)
 

  通過這次總結(jié)使我認識到無論是生活還是設(shè)計,處處都存在細節(jié),而且都有一定的規(guī)律可循,所以我也強烈推薦大家在設(shè)計時留心各種設(shè)計形式和自己覺得很棒的設(shè)計元素,做好總結(jié)。也希望在以后的設(shè)計工作中能夠靈活運用這種元素。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息,請訪問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。


 

預約申請免費試聽課

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

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

老師想和你聊一聊

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

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

網(wǎng)站地圖