網(wǎng)頁(yè)設(shè)計(jì)師:原來Banner設(shè)計(jì)還有這么多套路！

新聞 2023-07-23編輯：深圳網(wǎng)站建設(shè)閱讀（）標(biāo)簽： 這么多 套路

深圳網(wǎng)站建設(shè)公司 幫助企業(yè)提升網(wǎng)站形象,彰顯公司實(shí)力,PC+手機(jī)+微信+小程序
【模板網(wǎng)站的價(jià)格】國(guó)際域名+阿里1G空間+備案 一條龍服務(wù)
【定制網(wǎng)站的功能】SEO精準(zhǔn)營(yíng)銷系統(tǒng)+城市分站+W3C標(biāo)準(zhǔn)
【營(yíng)銷網(wǎng)站的效果】重長(zhǎng)尾，重優(yōu)化，提權(quán)重，擴(kuò)收錄，提排名
【量身訂制的設(shè)計(jì)】據(jù)據(jù)需求量身定制。設(shè)計(jì)到滿意為止
【專屬VIP的服務(wù)】24RX365 為您提供1對(duì)1的專屬VIP服務(wù)

　　Banner 廣告是快速高效的吸引用戶的重要手段。通常在網(wǎng)站中都占據(jù)著不錯(cuò)的位置，它們的轉(zhuǎn)化率和它本身的設(shè)計(jì)優(yōu)秀與否息息相關(guān)，最重要的是，它要能迅速的吸引用戶的注意力，通過優(yōu)秀的文案和視覺讓用戶立刻馬上點(diǎn)擊。

　　那么，作為網(wǎng)頁(yè)設(shè)計(jì)師，我們應(yīng)該如何制作一張能快速抓住人眼球的banner呢?

　　一、分 析

　　1、結(jié)構(gòu)

　　banner的結(jié)構(gòu)大致分為三層：背景層、裝飾層、文案層。背景層會(huì)確立整體banner的風(fēng)格或配色;裝飾層起到點(diǎn)綴作用，并可以控制整體版式的平衡;文案層是核心內(nèi)容的展示，以展示主要文字為主。三層級(jí)互相組合搭配，從而支撐起整個(gè)banner。

　　2、版式banner的常見版式：

       ①左右排版、

       ②居中排版。

　　受到文案字?jǐn)?shù)限制、所選搭配元素、產(chǎn)品的屬性等原因，版式的選擇需要根據(jù)實(shí)際情況進(jìn)行判斷。

　　3、樣式

    常見的banner構(gòu)圖樣式組合有：平鋪樣式、環(huán)繞樣式、傾斜樣式、斜切樣式、放射樣式、isometric樣式、三角樣式等。

　　4、關(guān)聯(lián)

       背景層、裝飾層、文案層，三者之間有著密切的關(guān)系。

　　比如：背景層設(shè)計(jì)的過于復(fù)雜，那么內(nèi)容文字的處理就要傾向于簡(jiǎn)潔，反之亦然;而裝飾層也并不是必須要存在于每一個(gè)banner當(dāng)中。當(dāng)背景層中內(nèi)容已經(jīng)很豐富的時(shí)候，裝飾的內(nèi)容可以刪去。

　　banner中背景是圖片，而且細(xì)節(jié)豐富，那么文案就可以做簡(jiǎn)潔化處理。

　　當(dāng)背景為純色時(shí)，需要適當(dāng)?shù)奶砑狱c(diǎn)綴物。而且可以對(duì)文字進(jìn)行處理增加吸引力，避免整體的單調(diào)。

　　5、背景

　　背景的種類大致分為適量圖形、字體、顏色和圖片四種。

　　圖片包括寫實(shí)圖片和卡通圖片等;顏色分為純色或漸變;字體放大也可以當(dāng)做背景;矢量圖包含的組合有很多。簡(jiǎn)單的圓形、方形。甚至是點(diǎn)、線的組合都可以運(yùn)用在背景中。每當(dāng)節(jié)日臨近，也可以匹配一些節(jié)日風(fēng)格的適量圖形進(jìn)行設(shè)計(jì)。

　　6、裝飾

      裝飾的點(diǎn)綴應(yīng)該是錦上添花的。適當(dāng)?shù)狞c(diǎn)綴和修飾，可以讓頁(yè)面避免單調(diào);也可以使banner的元素之間達(dá)到平衡，視覺效果更加和諧。同時(shí)，文字的運(yùn)用也是裝飾點(diǎn)綴的關(guān)鍵。根據(jù)產(chǎn)品屬性的不同，舉例說明：金融類的banner可以使用較小或較細(xì)的字體進(jìn)行搭配。同時(shí)，使用點(diǎn)狀分布排列營(yíng)造高端感;電商類的banner可以使用漸變的圓形或線條進(jìn)行修飾。目的是搭建出歡快的、促銷的感覺，吸引用戶點(diǎn)擊。

　　7、文案

      ① banner的設(shè)計(jì)當(dāng)中，文案字?jǐn)?shù)的多少也至關(guān)重要。過多字?jǐn)?shù)或復(fù)雜的內(nèi)容非但不能讓用戶清楚文案要表達(dá)的事情，反而會(huì)讓用戶感到麻煩。因此，當(dāng)我們接收到的文案字?jǐn)?shù)過多的話，要第一時(shí)間果斷提出自己的想法。文案中的賣點(diǎn)和痛點(diǎn)是最重要的兩個(gè)部分，其他內(nèi)容都可以省略。

　?、?字體方面主要分為襯線字體和非襯線字體。襯線字體的筆畫有修飾，且粗細(xì)不同，參考宋體;而非襯線字體就比較橫平豎直，筆畫粗細(xì)相同。襯線字體大多用在古典風(fēng)格或民族風(fēng)格的banner設(shè)計(jì)當(dāng)中。非襯線字體適用的范圍就比較廣，可以說絕大多數(shù)的banner中都可以運(yùn)用。

　　③ 文案分為主標(biāo)題和副標(biāo)題。主標(biāo)題自然是最精簡(jiǎn)也是最搶眼的部分，而副標(biāo)題可以是主標(biāo)題的解釋說明，也可以是接主標(biāo)題的新文案。區(qū)別搭配有助于用戶第一時(shí)間分辨出文案的主次，讓頁(yè)面更加協(xié)調(diào)。

　　8、配色

       好的配色需要一定的配色基礎(chǔ)以及日常練習(xí)的積累。但是當(dāng)遇到特殊狀況時(shí)，顯然并不會(huì)在顏色上留給我們有太多的時(shí)間。所以，我們就需要一些輔助的方式來完成顏色的搭配工作。

　　這里我推薦兩個(gè)網(wǎng)站：

　　第一個(gè)網(wǎng)站會(huì)推薦許多不錯(cuò)的顏色搭配，其中有不少是我個(gè)人比較喜歡的;第二個(gè)網(wǎng)站是material design官網(wǎng)中的color部分。其中的Color palettes在我們輸入顏色之后自動(dòng)生成搭配。有了這兩個(gè)網(wǎng)站的配色加持，會(huì)大大縮短我們?cè)O(shè)計(jì)banner的時(shí)間。

　　二、方 法

　　1、搜集

　　要在極短的時(shí)間內(nèi)設(shè)計(jì)出效果不錯(cuò)的banner，除非能力強(qiáng)悍或是胸有成竹，我能想到的方法就在于平日的“積累”。

　　文中提到的背景、裝飾，都是碎片化可拼接的內(nèi)容。我們?cè)诠ぷ骰蚱饺绽锟梢栽O(shè)計(jì)出足夠的素材，那么在時(shí)間緊迫的時(shí)候進(jìn)行拼接就好。

　　文字字體方面我們可以分析出平時(shí)所給文案中的一些“套路”;分析里面總是會(huì)提到的幾個(gè)字或者是相似度很高的標(biāo)題，來進(jìn)行字體的設(shè)計(jì)。

　　無(wú)論是簡(jiǎn)單也好、復(fù)雜也好，把平日里制作的元素素材進(jìn)行整理歸納，建立自己的素材庫(kù)。這樣，在面對(duì)措手不及的任務(wù)時(shí)才不至于慌亂?；ò昊蛘逧agle就是兩個(gè)不錯(cuò)的素材整理工具。

　　2、臨摹

　　提到臨摹，我們就不得不提到另一個(gè)詞“抄襲”。其實(shí)，抄襲的認(rèn)定是見仁見智的。每個(gè)人都有自己的認(rèn)定界限。而我能想到的避免抄襲的方法，就是“刻意改變”。以下面的小人為例。

　　作為設(shè)計(jì)師而言，我相信都不愿意碰到要求臨時(shí)出圖的情況出現(xiàn)。但我們也需要為這種情況而做準(zhǔn)備，以確保在時(shí)間緊迫的時(shí)候來保證自己設(shè)計(jì)產(chǎn)出物的質(zhì)量。因此，日常的收集和積累就尤為重要。

• 上一章：網(wǎng)頁(yè)設(shè)計(jì)師聯(lián)盟:網(wǎng)站設(shè)計(jì)必須遵循用戶體...
• 下一章：網(wǎng)頁(yè)設(shè)計(jì)之柵格系統(tǒng)