四個方面剖析音樂類APP，分分鐘搞定設(shè)計(jì)感爆棚的Banner！
來源：優(yōu)秀網(wǎng)頁設(shè)計(jì)（youshege）
作者：涼小七
原標(biāo)題：前輩，小白如何設(shè)計(jì)一個好看的banner？
數(shù)英網(wǎng)已取得授權(quán)，如需轉(zhuǎn)載請聯(lián)系原作者！
作為一個重度沉溺在音樂世界中的設(shè)計(jì)師，我是上班路上塞著耳機(jī)，作圖的時(shí)候塞著耳機(jī)，下班路上還是塞著耳機(jī)的，其實(shí)這樣對聽力不好。但是一邊聽音樂一邊作圖，真的覺得靈感都豐富多了。心情愉快，做出來的圖也會更令人滿意哦。
所以我是每天都必須打開音樂類APP的人，平時(shí)用得最多的兩個音樂類APP就是網(wǎng)易云音樂和蝦米音樂。很喜歡這兩個APP，覺得無論從視覺設(shè)計(jì)上，還是用戶體驗(yàn)上，它們都有可圈可點(diǎn)之處。我認(rèn)為網(wǎng)易云音樂和蝦米音樂的banner設(shè)計(jì)都比較有設(shè)計(jì)感。作為設(shè)計(jì)師，平時(shí)一定要多看、多想，多練。
今天我想和大家簡單分析一下，這兩個APP的banner設(shè)計(jì)。主要從構(gòu)圖、字體、配色、裝飾這四個方面來分析。以下案例均來自網(wǎng)絡(luò)，版權(quán)歸網(wǎng)易云音樂和蝦米音樂所有。
首先想和大家簡析一下網(wǎng)易云音樂的banner設(shè)計(jì)。
一、網(wǎng)易云音樂
1、構(gòu)圖
構(gòu)圖是一個banner設(shè)計(jì)中最基礎(chǔ)的部分，在做banner排版的時(shí)候，首先要根據(jù)banner的內(nèi)容確定一個大概的構(gòu)圖，再去豐富版式的細(xì)節(jié)。
A、左字右圖
左字右圖是最常見最容易掌握的排版，中規(guī)中矩，不易出錯。
B、左圖右字
左圖右字和左字右圖差不多，首先要根據(jù)素材圖片的構(gòu)圖和走向確定圖片是適合放在左邊還是右邊，再做文案的排版。左圖右字也是屬于比較常規(guī)不容易出錯的構(gòu)圖。
C、左中右構(gòu)圖
左中右構(gòu)圖一般為左圖中字右圖或者左字中圖右字。這種構(gòu)圖比左右構(gòu)圖版式會豐富點(diǎn)，但是比它們難把握。如果banner上要出現(xiàn)兩個人物，比較適合左中右構(gòu)圖。或者想要重點(diǎn)突出人物，也可以把人物居中，把文案放在人物兩側(cè)。
D、上下構(gòu)圖
上下構(gòu)圖一般為上字下圖。上下構(gòu)圖不好掌握，常見于一個Banner中要出現(xiàn)多個人物，多個人物在左右構(gòu)圖里不好擺放。
E、文字作為主體居中
圖片作為背景起到一個裝飾的作用，或者沒有圖片素材。常見于文案內(nèi)容比較抽象、不方便或者不需要用到圖片素材、不知道用什么圖片素材去表達(dá)畫面內(nèi)容，沒有一個代表性的圖片素材作為畫面主體的情況。
F、不規(guī)則構(gòu)圖
不規(guī)則構(gòu)圖最難把握，相對的，最有設(shè)計(jì)感。不規(guī)則構(gòu)圖如果把握得好，版式的豐富會給人眼前一亮的感覺。其實(shí)不規(guī)則構(gòu)圖也是在常規(guī)構(gòu)圖的基礎(chǔ)上再做一些變化，萬變不離其宗。
2、字體
正確選擇字體在banner設(shè)計(jì)中也是非常重要的，字體的氣質(zhì)和畫面的氣質(zhì)要一致，這樣畫面看起來才是一個和諧的整體。例如，如果畫面中的人物是女生，就不適宜用粗獷硬朗的字體，要用能夠襯托出主角氣質(zhì)的字體。
字體主要分為兩類，一類是系統(tǒng)字體，一類是設(shè)計(jì)師自己設(shè)計(jì)的字體，設(shè)計(jì)師設(shè)計(jì)字體可以在系統(tǒng)字體的基礎(chǔ)上做些改變，或者自己重新設(shè)計(jì)字體的筆畫，但是重新設(shè)計(jì)會比較費(fèi)時(shí)間。所以要根據(jù)工作時(shí)間做合理的安排，如果時(shí)間緊急，就沒必要做字體設(shè)計(jì)了。當(dāng)然對于大神來說，做個字體設(shè)計(jì)是小菜一碟，但是對于我來說，做字體設(shè)計(jì)還是挺吃力的，還需努力。
網(wǎng)易云音樂作為一個音樂類APP，banner的風(fēng)格一般都比較文藝，最常見的字體是宋體和細(xì)黑體，有時(shí)候會根據(jù)畫面的氣質(zhì)做相應(yīng)的改變。下面舉幾個案例。
A、用宋體和細(xì)黑體表達(dá)文藝、品質(zhì)感的氣質(zhì)。
B、根據(jù)畫面的氣質(zhì)做相應(yīng)的選擇。
C、字體設(shè)計(jì)。
經(jīng)過設(shè)計(jì)的字體總是讓人眼前一亮，富有設(shè)計(jì)感。為畫面增色不少。
3、配色
配色用得最多的兩種方法，第一，把素材黑白化，再根據(jù)文案和人物的氣質(zhì)選取一個合適的顏色。第二種方法就是從素材里面直接吸取合適的顏色，再調(diào)節(jié)飽和度和明度，調(diào)出一個基本色，再取基本色的對比色、近似色等等作為輔助色。
下面舉幾個把素材黑白化，根據(jù)文案和人物的氣質(zhì)選取一個合適的顏色的案例。
黃黑白這種顏色搭配比較經(jīng)典，容易出效果。素材黑白化之后加入黃色的色塊，對比鮮明，具有視覺沖擊力，符合文案的氣質(zhì)。
淺藍(lán)色和黑白搭配。人物素材黑白化處理之后，選用了淺藍(lán)色作為背景色，再調(diào)節(jié)背景色的飽和度和明度，深藍(lán)色點(diǎn)綴畫面。
藍(lán)色和黑白搭配。人物素材黑白化處理，可以看到人物的亮部調(diào)得很亮，黑色背景突出人物，文案用了藍(lán)色。
下面舉幾個從素材里面直接吸取合適的顏色的案例。
可以看到人物衣服的顏色主色是藍(lán)綠色和黃色。直接吸取衣服的顏色，加以調(diào)節(jié)，藍(lán)綠色作為背景色，黃色作為點(diǎn)綴色，整個畫面比較和諧統(tǒng)一。
可以看到人物衣服的顏色主色是藍(lán)色和淺藍(lán)色。所以直接用了淺藍(lán)色作為背景色，藍(lán)色作為文案色。
這個案例是吸取了人物頭發(fā)的顏色，調(diào)淺之后作為背景色，調(diào)深了作為文案的顏色，再加入淺黃色和白色的色塊，整個畫面非常文藝和安靜。
4、裝飾
裝飾常見于點(diǎn)、線、面，或者一些手繪的元素等等，在確定基本的構(gòu)圖和配色之后，加入一點(diǎn)小元素和小裝飾，會讓畫面更有細(xì)節(jié)，更有設(shè)計(jì)感。
例如下面這個案例，給人物加上一些手繪的小裝飾，畫面增加了一些輕松、詼諧、可愛的感覺。加什么裝飾，要看設(shè)計(jì)師的目的，而不是盲目地為了加而加，加任何一個元素，都要有它存在的意義。
例如下面這個案例，加入了嘴唇的剪影和線框，增強(qiáng)了設(shè)計(jì)感，線框把文案和人物連接在一起，形成一個整體。
例如下面這個案例，斜線不僅填補(bǔ)了空白，平衡畫面，而且豐富了畫面。
下面這個案例也是同樣的道理，波浪線和右邊的英文字母不僅起到一個平衡畫面的作用，還裝飾了畫面。
下面這個案例就加入了一些墨跡，渲染了“搖滾”的氛圍，同時(shí)還起到“點(diǎn)”的作用，豐富了畫面。
二、蝦米音樂
談完了網(wǎng)易云音樂，下面和大家分享一下蝦米音樂的banner設(shè)計(jì)。蝦米音樂的我就不講那么詳細(xì)了，其實(shí)道理都差不多。下面主要是舉例。
1、構(gòu)圖
A、左圖右字。
B、左字右圖
C、左中右構(gòu)圖
D、文字作為主體居中。
2、字體
A、用宋體表達(dá)文藝、品質(zhì)感、復(fù)古的氣質(zhì)。
B、在蝦米音樂的banner里面，其實(shí)黑體反而是最常見的。
（大概是因?yàn)楹隗w幾乎適合所有的氣質(zhì)，并且適合做標(biāo)題吧。）
C、根據(jù)畫面的氣質(zhì)做相應(yīng)的選擇
D、字體設(shè)計(jì)
看了一下我收集的案例，發(fā)現(xiàn)蝦米音樂banner的字體設(shè)計(jì)比網(wǎng)易云音樂的要少。蝦米音樂的Banner主要是運(yùn)用點(diǎn)線面把畫面的版式設(shè)計(jì)得非常豐富。
3、配色
A、發(fā)現(xiàn)蝦米音樂非常喜歡把人物單色化處理。
B、從素材里面直接吸取合適的顏色，再調(diào)節(jié)飽和度和明度。
吸取衣服的顏色。
吸取衣服的顏色。
吸取衣服圖案的顏色。
吸取衣領(lǐng)的顏色。
吸取人物身上披著的布料的顏色。
吸取人物衣服的顏色和膚色。
4、裝飾
前面說過蝦米音樂的banner把點(diǎn)線面玩得非常好，那下面就主要從這三個方面舉例。
點(diǎn)。通常起到點(diǎn)綴和豐富畫面的作用。
A、點(diǎn)
通常起到點(diǎn)綴和豐富畫面的作用。
輔助文案起到點(diǎn)的作用，讓版式更加豐富。
B、線
通常起到分割、強(qiáng)調(diào)、點(diǎn)綴、豐富畫面的作用。
C、面
通常起到強(qiáng)調(diào)、平衡、豐富畫面的作用。
可以看到，一張Banner，不僅僅由點(diǎn)或者不僅僅由線組成，而是點(diǎn)、線、面相互組合，相互平衡，最終形成一個版式豐富的Banner圖。
總而言之，看到別人的作品，不要單純地覺得“哇塞真好看！“就點(diǎn)了關(guān)閉鍵，或者右鍵另存為之后就再也沒有打開過它。我們需要做的是，保存別人的作品之后，要分析別人作品值得我們學(xué)習(xí)的地方，等到我們設(shè)計(jì)的時(shí)候，要懂得把別人用得好的版式、字體、配色、裝飾等等運(yùn)用到我們自己的設(shè)計(jì)上，這才是設(shè)計(jì)師的思考方式。
雖然這只是音樂類的banner ，但是其中的大部分版式設(shè)計(jì)、對于字體的選擇與設(shè)計(jì)、配色的分析、裝飾的應(yīng)用等等，在電商設(shè)計(jì)、品牌設(shè)計(jì)等等其他的平面設(shè)計(jì)中也會用到。大家在平時(shí)的設(shè)計(jì)中有哪些好的發(fā)現(xiàn)和領(lǐng)悟呢？歡迎在留言區(qū)一起討論分享。積極分享、思考和總結(jié)，才能進(jìn)步地更快哦！
轉(zhuǎn)載請?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
全部評論（1條）