banner設計(jì)作(zuò)為(wèi)互聯網從(cóng)業(yè)者必備的(de)技(jì)能(néng)，一(yī)張 好(hǎo)的(de)banner，絕非三五分(fēn)鐘(zhōng)就(jiù)可(kě)以搞定的(de)！它同©時(shí)也(yě)能(néng)看(kàn)得(de)出一(yī)個(gè)設計(jì)師(shī)對(duì)>項目的(de)理(lǐ)解、色彩感、版式、整體(tǐ)的(de)把握。
banner的(de)功能(néng)是(shì)傳達信息！現(xiàn)在随著(zhe)移動互聯網的(de)到(dào)來(lái)！我們跟習(xí)慣于在手機(jī)，電(diàn)腦<(nǎo)上(shàng)了(le)解、發現(xiàn)這(zhè)個(gè)世界。我們如(rú)何才能(néng)以一(y←ī)種即具可(kě)讀(dú)性和(hé)合理(lǐ)性，又(yòu)更具有(yǒu)吸引力的(de)方式來(lái)組織信息呢(ne)？
從(cóng)背景層、主體(tǐ)層、文(wén)字層、這(zhè)三個(gè)方面來(lái)分(fēn)析如(rú)何設計(jì)一(yī)個(gè)具有(yǒu)吸引力的(de)ban↓ner!
01|主體(tǐ)層
通(tōng)過對(duì)項目的(de)分(fēn)析，确定畫(huà)面的(de)主體(tǐ)（主體(tǐ)可(kě)以是(shì)人(rén)物(₹wù)、産品圖或者文(wén)字）。先對(duì)一(yī)種元素進行(xíng)視(shì)覺強化(huà)吸引觀衆的(de)注意力。在确定畫(huà)面主體(tǐ)的(de)γ同時(shí)，我們就(jiù)可(kě)以把畫(huà)面的(de)構圖，也(yě)就(jiù)确定下(xià)來(lái)！目的(de)都(dōu)是(shì)為®(wèi)了(le)傳達信息，讓畫(huà)面更具有(yǒu)吸引力！
1.1人(rén)物(wù)主體(tǐ)
這(zhè)張banner的(de)主體(tǐ)是(shì)人(rén)物(wù),作(zuò)者為(wèπi)了(le)更加突出主體(tǐ)在上(shàng)面加了(le)手寫感的(de)英文(wén)和(hé)一(yī)些(xiē)小(xiǎo)元素來(lái)點綴！這(zh‌è)種做(zuò)法能(néng)很(hěn)好(hǎo)的(de)解決主體(tǐ)物(wù)不(bù)夠突出。在我們工(gōng)作(zuò)中，遇到(dào)主題物↑(wù)不(bù)夠突出的(de)時(shí)候，也(yě)可(kě)以增加相(xiàng)關聯的(de)→文(wén)字或者線條來(lái)突出主體(tǐ)。（在給主體(tǐ)增加元素的(de)時(shí)候‍，切記元素起搶了(le)主題的(de)位置）
1.2産品主體(tǐ)
這(zhè)張banner的(de)主體(tǐ)是(shì)物(wù)體(tǐ) ,在主體(tǐ)的(de)周圍添加了(le)花(huā)♠和(hé)葉子(zǐ)豐富主體(tǐ)。在畫(huà)面四周也(yě)添加了(le)些(xiē)相(xiàng)同元素，這(zhè)樣畫(huà)面≠更加統一(yī)、和(hé)諧。文(wén)字部分(fēn)采用(yòng)黑(hēi)體(tǐ)居中對(duì)齊排列。畫(huà)面£整體(tǐ)給你(nǐ)感覺典雅、舒适。
1.3文(wén)字主體(tǐ)
文(wén)字做(zuò)為(wèi)主體(tǐ)，其實是(shì)把文(wén)字當作(zuò)圖形來(lái)設計(jì) 。整張BANNER的(de)信息傳達更為(wèi)準确。在純文(wén)字的(de)編排中，要(yào)注意主體(tǐ)文(wén)字的(de)閱讀(dú)∑順序，可(kě)通(tōng)過對(duì)比的(de)手法，來(lái)加強主标題和(hé)副标題之前的(de)層級關系！
02|背景層
背景層是(shì)為(wèi)了(le)突出主體(tǐ)。它可(kě)以确定畫(huà)面整體(tǐ)的(de)色調。我們根據畫(huà)面要(yào)表達的(de)感覺和(hé)©主體(tǐ)的(de)風(fēng)格來(lái)選擇不(bù)同背景層的(de)表現(xiàn)方法。
2.1 照(zhào)片背景(高(gāo)斯模糊）
照(zhào)片通(tōng)過高(gāo)斯模糊，讓他(tā)與主體(tǐ)産生(shēng)空(kōng)間(jiān)感，如(rú€)果畫(huà)面色彩感覺不(bù)統一(yī)，可(kě)以用(yòng)漸變映射來(lái)調試。
感覺背景和(hé)主體(tǐ)不(bù)夠分(fēn)離(lí)的(de)時(shí)候，我們可(kě)以用(yòng)圖案疊加，在背景上(shàng)加幾何<形底紋在增加空(kōng)間(jiān)感。
2.2 純色背景、漸變背景、多(duō)色拼接背景
小(xiǎo)米網站(zhàn)banner基于設計(jì)規範和(hé)自(zì)營産品的(de)電(diàn)商設計( jì)網站(zhàn)。減去(qù)了(le)設計(jì)中過于熱(rè)鬧、喜慶、大(dà)促的(de)風(fēng)格。産品展示圖中都•(dōu)是(shì)用(yòng)帶有(yǒu)明(míng)暗(àn)漸變的(de)背景來(lái)突出産品。這(zhè)種背景的(de)處理(lǐ)方法更容易出圖産品，整體(tǐ)畫(huàα)面整潔，無過多(duō)的(de)視(shì)覺幹擾。也(yě)具有(yǒu)較強的(de)品質感！
多(duō)色拼接背景，讓畫(huà)面具有(yǒu)活力。幾何形或是(shì)不(bù)規則圖形的(de)構≥型，更具吸引力，讓人(rén)聚焦。
2.3 商業(yè)攝影(yǐng)圖片、創意合成背景
這(zhè)種背景圖，屬于前期策劃好(hǎo)模特、配色、創意。還(hái)有(yǒu)後期的(de)表現(xiàn)技(jì)法的(de)熟練度（無論是(shì)修片還(hái)是(sh$ì)合成）
03|文(wén)字層
文(wén)字最能(néng)準确的(de)表達banner中的(de)信息！他(tā)要(yào)突出于背景，又(yòu)不(bù)能(néng)搶了(×le)主體(tǐ)，在字形的(de)選擇上(shàng)又(yòu)要(yào)符合整個(gè)畫(huà)面的(de)氣質。而且✔要(yào)具有(yǒu)易讀(dú)性。所以在文(wén)字的(de)編排上(shàng)要(yào)下(xià)一(yī¶)定的(de)功夫。如(rú)主标題與副标題的(de)層級關系。都(dōu)要(yào)我們仔細深入的(de)推敲。
一(yī)張banner中最多(duō)不(bù)要(yào)超多(duō)三種字體(tǐ)！
黑(hēi)體(tǐ)（無襯線字體(tǐ)）：黑(hēi)體(tǐ)字在字架上(shàng)吸收了(le)宋體(tǐ)字結構嚴謹的(de)優點，在筆(bǐ)畫(huà)的(de)形♥狀上(shàng)把橫畫(huà)加粗且把宋體(tǐ)字的(de)聳肩角削平為(wèi)等線狀，形成±橫豎筆(bǐ)畫(huà)粗細一(yī)緻，變宋體(tǐ)字的(de)尖頭細尾和(hé)頭尾粗細不(bù)一(yī)的(de)筆(bǐ)畫(huà)為(wèi)方形筆(bǐ)畫(huà)，因 而獨具一(yī)格，給人(rén)一(yī)種粗實有(yǒu)力、嚴肅莊嚴、樸素大(dà)方的(de)感覺。
蘋果官網的(de)banner，用(yòng)相(xiàng)對(duì)現(xiàn)代感的(de)黑(hēi)體(tǐ)，更具科(kē)技(jì)感！而改變了(le)字體(tǐ★)，就(jiù)無法表達出産品的(de)氣質！
因黑(hēi)體(tǐ)具有(yǒu)易讀(dú)性，也(yě)可(kě)作(zuò)為(wèi)提示性或者叙述性文§(wén)字使用(yòng)。
細黑(hēi)：可(kě)以表達大(dà)方、高(gāo)端、精緻的(de)氣質！具有(yǒu)現(xiàn)代感
超粗黑(hēi)（綜藝體(tǐ)）：具有(yǒu)力量感，筆(bǐ)畫(huà)簡潔粗壯，厚實有(yǒu)力 ，醒目，具有(yǒu)渾厚凝重的(de)氣度。多(duō)用(yòng)于活動大(dà‌)促标題。
宋體(tǐ):宋體(tǐ)字的(de)字形方正，筆(bǐ)畫(huà)橫平豎直，橫細豎粗，棱角分(fēn)明(míng)，結構嚴謹，整齊均勻，有(yǒu)極強的(de)筆(bǐ)畫(huà)規÷律性。
此類氣質，可(kě)以在女(nǚ)性、高(gāo)端、時(shí)尚、文(wén)化(huà)類banner中使用(yòng)！
圓體(tǐ):筆(bǐ)畫(huà)轉角圓潤，結構方正飽滿，筆(bǐ)形柔和(hé)。可(kě)以表現(xiàn)出童真、 活潑、歡快(kuài)的(de)特質！一(yī)般用(yòng)于兒(ér)童産品或是(shì)輕松的(de)畫(huà)面中！
通(tōng)過變形的(de)圓體(tǐ)字形，也(yě)可(kě)以表帶出少(shǎo)女(nǚ)感！可(kě)愛(ài")有(yǒu)趣的(de)畫(huà)面！
書(shū)法字體(tǐ)：霸氣、古典、文(wén)化(huà)、具有(yǒu)濃烈的(de)中國(guó)風(​fēng)韻味。更具張力!電(diàn)商大(dà)促也(yě)喜歡用(yòng)書(shū)法字體(tǐ)！
而小(xiǎo)米活動banner，選擇了(le)重新設計(jì)字體(tǐ)。字形，較為(wèi)歡快(kuà¶i)輕松，非常符合主題。關于字體(tǐ)設計(jì)，一(yī)定不(bù)能(néng)為(wèi)了(le)表達字體(tǐ)的(de)形式感，而破壞了(le)字體(♠tǐ)的(de)可(kě)識别性！
3.2增加字體(tǐ)的(de)形式感
左字右主體(tǐ)、左主體(tǐ)右字：這(zhè)種banner方式最為(wèi)常見(jiàn)的(de)版式之一(yī)。主體(tǐ)在一(yī)邊，文(wén)字在另外(wài)一(yī)‍邊。可(kě)根據畫(huà)面選擇不(bù)同的(de)對(duì)齊方式！注意文(wén)字之間(jiān)的(de)主副層級、行(xíng)距。
給文(wén)字添加個(gè)背景，畫(huà)面中給文(wén)字添加個(gè)背景，具有(yǒu)反複強調的(de)作(zuò)用(yòng)！根據具體(tǐ)需求反白(bái)、镂空€(kōng)、或是(shì)用(yòng)顔色的(de)對(duì)比來(lái)強調！
讓文(wén)字也(yě)有(yǒu)前後關系。主标題放(fàng)在主體(tǐ)的(de)前面，而副标或者提取的(de)文(wén)字放(fàng)在主體(tǐ)的(εde)後面，在增強畫(huà)面的(de)空(kōng)間(jiān)感和(hé)裝飾性！
給字體(tǐ)加點特效吧(ba)!根據畫(huà)面的(de)風(fēng)格，給文(wén)字加上(shàng)适當的(§de)特效（機(jī)理(lǐ)）來(lái)突出文(wén)字部分(fēn)！然後傾斜字體(tǐ)或者透視(shì)字體(tǐ)，可(≠kě)以增加力量、活潑的(de)感覺！
關于字體(tǐ)的(de)編排樣式是(shì)多(duō)樣化(huà)的(de)，在編排中易讀(dú)、符合畫(huà)面的(de)風($fēng)格就(jiù)可(kě)以了(le)。