UI設(shè)計(jì)培訓(xùn)課程Banner設(shè)計(jì)攻略

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

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

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

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

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

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

　　特點(diǎn)：在banner中運(yùn)用線框整體形式感強(qiáng)，可以起到較好的引導(dǎo)視覺的作用，用戶在看到banner的第一眼便會(huì)把注意力集中在線框內(nèi)的區(qū)域。
 

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

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

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

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

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

　　1.封閉和不封閉
 

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

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

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

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

　　2.組線條和細(xì)線條
 

　　粗線條能更加引人注目，個(gè)性十足

　　細(xì)線條顯得柔美、細(xì)膩、輕盈

　　3.虛和實(shí)
 

　　在線框的應(yīng)用中有虛實(shí)的區(qū)分?！柑摗沟木€框在呈現(xiàn)形式上很靈活，較容易結(jié)合自己的創(chuàng)意，若隱若現(xiàn)，沒有實(shí)線那么強(qiáng)烈的空間存在感。
 

　　4.線框形狀
 

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

　　5.表現(xiàn)形式
 

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

　　巧用漸變
 

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

　　紋理、質(zhì)感
 

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

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

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

　　不規(guī)則變化

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

三、排版方式探索
 

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

　　1.排版與文案
 

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

　　2. 與圖片
 

　　圖片與線框結(jié)合可以豐富畫面，增強(qiáng)設(shè)計(jì)感。

　　總結(jié)
 

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