邦嘉BANNER

本文總結(jié)了在學(xué)習(xí)banner設(shè)計(jì)過(guò)程中出現(xiàn)的線框的一些用法與設(shè)計(jì)特點(diǎn)，希望大家在以后的設(shè)計(jì)工作中能夠靈活運(yùn)用這種元素。

在上兩期整理banner設(shè)計(jì)的過(guò)程中，我發(fā)現(xiàn)線框在banner設(shè)計(jì)中的應(yīng)用非常廣泛。不僅能夠輔助一些元素的設(shè)計(jì)，還可以為設(shè)計(jì)增色不少，增加設(shè)計(jì)感。所以，我決定總結(jié)研究一番，發(fā)現(xiàn)這里面還是有點(diǎn)道道的。

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

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

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

一. 應(yīng)用情況分類(lèi) 1. 大線框，輔助背景和整體版式

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

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

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

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

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

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

上面簡(jiǎn)單總結(jié)了線框的應(yīng)用范圍，接下來(lái)，我們結(jié)合這些應(yīng)用場(chǎng)景分析一下需要注意的細(xì)節(jié)與設(shè)計(jì)思路。

1. 封閉&不封閉

封閉的線框透氣性差一些，但在視覺(jué)上更規(guī)范、穩(wěn)重。

不封閉的線框最為常見(jiàn)，透氣，具有較強(qiáng)的設(shè)計(jì)感，能夠發(fā)揮的的設(shè)計(jì)空間也很廣。

在具體設(shè)計(jì)時(shí)，有兩種方式可以打破線框。

直接選擇切斷部位斷開(kāi)

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

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

2. 粗線條&細(xì)線條

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

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

3. 虛&實(shí)

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

4. 線框形狀

線框的形狀比較靈活，我們可以根據(jù)設(shè)計(jì)靈活調(diào)整，最常見(jiàn)的是矩形，可以平衡畫(huà)面，規(guī)整，方便排版。

三角形的線框輔助可以加強(qiáng)視覺(jué)沖擊力，營(yíng)造個(gè)性、別致的感覺(jué)。

圓形線框起到聚焦視覺(jué)中心點(diǎn)的作用，通常應(yīng)用在文案的強(qiáng)化設(shè)計(jì)中。

其它形狀具有更多的發(fā)揮空間和個(gè)性，但不要過(guò)于復(fù)雜。

5. 表現(xiàn)形式

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

巧用漸變

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

紋理、質(zhì)感

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

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

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

不規(guī)則變化

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

利用背景元素設(shè)計(jì)

使線框與整體搭配更統(tǒng)一、協(xié)調(diào)。

三. 排版方式探索

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

1. 與文案

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

找了一些三角形案例：

2. 與圖片

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

好了，到這里總結(jié)了在學(xué)習(xí)banner設(shè)計(jì)過(guò)程中出現(xiàn)的線框的一些用法與設(shè)計(jì)特點(diǎn)，也希望在以后的設(shè)計(jì)工作中能夠靈活運(yùn)用這種元素。不知道大家看完有什么啟發(fā)和建議呢？歡迎留言。

通過(guò)這次總結(jié)使我認(rèn)識(shí)到無(wú)論是生活還是設(shè)計(jì)，處處都存在細(xì)節(jié)，而且都有一定的規(guī)律可循，所以我也強(qiáng)烈推薦大家在設(shè)計(jì)時(shí)留心各種設(shè)計(jì)形式和自己覺(jué)得很棒的設(shè)計(jì)元素，做好總結(jié)。雖然看起來(lái)現(xiàn)在沒(méi)有什么用處，但要相信厚積而薄發(fā)。

作者：阿澤

來(lái)源：微信公眾號(hào)“設(shè)宴（ID：sheyandesign）”

本文由 @設(shè)宴 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自StockSnap.io，基于 CC0 協(xié)議

網(wǎng)站設(shè)計(jì)線框設(shè)計(jì)的好可以提高整個(gè)網(wǎng)站設(shè)計(jì)視覺(jué)效果，尤其是Banner設(shè)計(jì)效果，更應(yīng)該重點(diǎn)突出，打開(kāi)的瞬間一眼就能吸引用戶，讓用戶喜歡。那么，如何巧用線框設(shè)計(jì)增強(qiáng)網(wǎng)站Banner的視覺(jué)設(shè)計(jì)效果呢?杭州蒙特分享三點(diǎn)，對(duì)網(wǎng)站設(shè)計(jì)十分有幫助!

1、線框大小

大線框，輔助背景和整體版式。將Banner所有重點(diǎn)元素框在一起，用戶會(huì)將注意力集中在線框內(nèi)，更有效傳達(dá)Banner的意義。小線框，應(yīng)用在文案或局部重點(diǎn)圖像。小線框?qū)anner有很強(qiáng)的輔助作用，能突出重點(diǎn)文案、圖像，吸引用戶注意。如果應(yīng)用在局部圖像，可以讓圖像更立體，增強(qiáng)Banner的層次感。

2、細(xì)節(jié)設(shè)計(jì)

不封閉式線框，發(fā)揮的設(shè)計(jì)空間比較大，方式也比較多。如以虛線代替線框的部分視線，或者如上圖，用文案、圖像等替代線條，容易塑造空間感，對(duì)提高線框和Banner的融合有一定作用。線框的粗細(xì)。網(wǎng)站建設(shè)因粗線框更加因人矚目、個(gè)性化，細(xì)線框(如不規(guī)則線框例圖)更加細(xì)膩、輕盈。

3、線框形狀

矩形線框，往往嚴(yán)謹(jǐn)、邏輯性、安全可靠穩(wěn)重感強(qiáng)。應(yīng)用在Banner中能平衡畫(huà)面，方便排版。三角形線框，能加強(qiáng)視覺(jué)沖擊，營(yíng)造個(gè)性、別致的感覺(jué)。正放的三角形給人穩(wěn)定、堅(jiān)固的感覺(jué)，而倒放的三角形則會(huì)給人緊張、刺激的印象。

很多時(shí)候，只要設(shè)計(jì)師細(xì)心發(fā)現(xiàn)，Banner的線框設(shè)計(jì)和運(yùn)用都是有規(guī)律可循的，平時(shí)多留意就會(huì)掌握很多設(shè)計(jì)技巧。建議大家有網(wǎng)站設(shè)計(jì)需求不妨參考蒙特10000+網(wǎng)站設(shè)計(jì)經(jīng)典案例，不可錯(cuò)過(guò)的財(cái)富!