今天我想和大家簡單分析一下，這兩個APP的banner設計。主要從構圖、字體、配色、裝飾這四個方面來分析。以下案例均來自網絡，版權歸網易云音樂和蝦米音樂所有。首先想和大家簡析一下網易云音樂的banner設計。1. 構圖構圖是一個banner設計中最基礎的部分，在做banner排版的時候，首先要根據(jù)banner的內容確定一個大概的構圖，再去豐富版式的細節(jié)。A.左字右圖左字右圖是最常見最容易掌握的排版，中規(guī)中矩，不易出錯。B.左圖右字左圖右字和左字右圖差不多，首先要根據(jù)素材圖片的構圖和走向確定圖片是適合放在左邊還是右邊

今天我想和大家簡單分析一下，這兩個APP的banner設計。主要從構圖、字體、配色、裝飾這四個方面來分析。以下案例均來自網絡，版權歸網易云音樂和蝦米音樂所有。

首先想和大家簡析一下網易云音樂的banner設計。

1. 構圖

構圖是一個banner設計中最基礎的部分，在做banner排版的時候，首先要根據(jù)banner的內容確定一個大概的構圖，再去豐富版式的細節(jié)。

A.左字右圖

左字右圖是最常見最容易掌握的排版，中規(guī)中矩，不易出錯。

B.左圖右字

左圖右字和左字右圖差不多，首先要根據(jù)素材圖片的構圖和走向確定圖片是適合放在左邊還是右邊，再做文案的排版。左圖右字也是屬于比較常規(guī)不容易出錯的構圖。

C.左中右構圖

左中右構圖一般為左圖中字右圖或者左字中圖右字。這種構圖比左右構圖版式會豐富點，但是比它們難把握。如果banner上要出現(xiàn)兩個人物，比較適合左中右構圖?；蛘呦胍攸c突出人物，也可以把人物居中，把文案放在人物兩側。

D.上下構圖

上下構圖一般為上字下圖。上下構圖不好掌握，常見于一個Banner中要出現(xiàn)多個人物，多個人物在左右構圖里不好擺放。

E.文字作為主體居中

圖片作為背景起到一個裝飾的作用，或者沒有圖片素材。常見于文案內容比較抽象、不方便或者不需要用到圖片素材、不知道用什么圖片素材去表達畫面內容，沒有一個代表性的圖片素材作為畫面主體的情況。

F.不規(guī)則構圖

不規(guī)則構圖最難把握，相對的，最有設計感。不規(guī)則構圖如果把握得好，版式的豐富會給人眼前一亮的感覺。其實不規(guī)則構圖也是在常規(guī)構圖的基礎上再做一些變化，萬變不離其宗。

2. 字體

正確選擇字體在banner設計中也是非常重要的，字體的氣質和畫面的氣質要一致，這樣畫面看起來才是一個和諧的整體。例如，如果畫面中的人物是女生，就不適宜用粗獷硬朗的字體，要用能夠襯托出主角氣質的字體。

字體主要分為兩類，一類是系統(tǒng)字體，一類是設計師自己設計的字體，設計師設計字體可以在系統(tǒng)字體的基礎上做些改變，或者自己重新設計字體的筆畫，但是重新設計會比較費時間。所以要根據(jù)工作時間做合理的安排，如果時間緊急，就沒必要做字體設計了。當然對于大神來說，做個字體設計是小菜一碟，但是對于我來說，做字體設計還是挺吃力的，還需努力。

網易云音樂作為一個音樂類APP，banner的風格一般都比較文藝，最常見的字體是宋體和細黑體，有時候會根據(jù)畫面的氣質做相應的改變。下面舉幾個案例。

A.用宋體和細黑體表達文藝、品質感的氣質

B.根據(jù)畫面的氣質做相應的選擇

C.字體設計

經過設計的字體總是讓人眼前一亮，富有設計感。為畫面增色不少。

3. 配色

配色用得最多的兩種方法，第一，把素材黑白化，再根據(jù)文案和人物的氣質選取一個合適的顏色。第二種方法就是從素材里面直接吸取合適的顏色，再調節(jié)飽和度和明度，調出一個基本色，再取基本色的對比色、近似色等等作為輔助色。

下面舉幾個把素材黑白化，根據(jù)文案和人物的氣質選取一個合適的顏色的案例。

黃黑白這種顏色搭配比較經典，容易出效果。素材黑白化之后加入黃色的色塊，對比鮮明，具有視覺沖擊力，符合文案的氣質。

淺藍色和黑白搭配。人物素材黑白化處理之后，選用了淺藍色作為背景色，再調節(jié)背景色的飽和度和明度，深藍色點綴畫面。

藍色和黑白搭配。人物素材黑白化處理，可以看到人物的亮部調得很亮，黑色背景突出人物，文案用了藍色。

下面舉幾個從素材里面直接吸取合適的顏色的案例。

可以看到人物衣服的顏色主色是藍綠色和黃色。直接吸取衣服的顏色，加以調節(jié)，藍綠色作為背景色，黃色作為點綴色，整個畫面比較和諧統(tǒng)一。

可以看到人物衣服的顏色主色是藍色和淺藍色。所以直接用了淺藍色作為背景色，藍色作為文案色。

這個案例是吸取了人物頭發(fā)的顏色，調淺之后作為背景色，調深了作為文案的顏色，再加入淺黃色和白色的色塊，整個畫面非常文藝和安靜。

4.裝飾

裝飾常見于點、線、面，或者一些手繪的元素等等，在確定基本的構圖和配色之后，加入一點小元素和小裝飾，會讓畫面更有細節(jié)，更有設計感。

例如下面這個案例，給人物加上一些手繪的小裝飾，畫面增加了一些輕松、詼諧、可愛的感覺。加什么裝飾，要看設計師的目的，而不是盲目地為了加而加，加任何一個元素，都要有它存在的意義。

例如下面這個案例，加入了嘴唇的剪影和線框，增強了設計感，線框把文案和人物連接在一起，形成一個整體。

例如下面這個案例，斜線不僅填補了空白，平衡畫面，而且豐富了畫面。

下面這個案例也是同樣的道理，波浪線和右邊的英文字母不僅起到一個平衡畫面的作用，還裝飾了畫面。

下面這個案例就加入了一些墨跡，渲染了“搖滾”的氛圍，同時還起到“點”的作用，豐富了畫面。

談完了網易云音樂，下面和大家分享一下蝦米音樂的banner設計。蝦米音樂的我就不講那么詳細了，其實道理都差不多。下面主要是舉例。

1. 構圖

A.左圖右字

B.左字右圖

C.左中右構圖

D.文字作為主體居中

2.字體

A.用宋體表達文藝、品質感、復古的氣質

B.在蝦米音樂的banner里面，其實黑體反而是最常見的

（大概是因為黑體幾乎適合所有的氣質，并且適合做標題吧。）

C.根據(jù)畫面的氣質做相應的選擇

D.字體設計

看了一下我收集的案例，發(fā)現(xiàn)蝦米音樂banner的字體設計比網易云音樂的要少。蝦米音樂的Banner主要是運用點線面把畫面的版式設計得非常豐富。

3.配色

A.發(fā)現(xiàn)蝦米音樂非常喜歡把人物單色化處理

B.從素材里面直接吸取合適的顏色，再調節(jié)飽和度和明度

吸取衣服的顏色：

吸取衣服的顏色：

吸取衣服的顏色：

吸取衣服的顏色：

吸取人物身上披著的布料的顏色：

吸取人物衣服的顏色和膚色：

4.裝飾

前面說過蝦米音樂的banner把點線面玩得非常好，那下面就主要從這三個方面舉例。

點。通常起到點綴和豐富畫面的作用。

A.點

通常起到點綴和豐富畫面的作用。

輔助文案起到點的作用，讓版式更加豐富。

B.線

通常起到分割、強調、點綴、豐富畫面的作用。

C.面

通常起到強調、平衡、豐富畫面的作用。

可以看到，一張Banner，不僅僅由點或者不僅僅由線組成，而是點、線、面相互組合，相互平衡，最終形成一個版式豐富的Banner圖。

總而言之，看到別人的作品，不要單純地覺得“哇塞真好看！“就點了關閉鍵，或者右鍵另存為之后就再也沒有打開過它。我們需要做的是，保存別人的作品之后，要分析別人作品值得我們學習的地方，等到我們設計的時候，要懂得把別人用得好的版式、字體、配色、裝飾等等運用到我們自己的設計上，這才是設計師的思考方式。

雖然這只是音樂類的banner ，但是其中的大部分版式設計、對于字體的選擇與設計、配色的分析、裝飾的應用等等，在電商設計、品牌設計等等其他的平面設計中也會用到。大家在平時的設計中有哪些好的發(fā)現(xiàn)和領悟呢？歡迎在留言區(qū)一起討論分享。積極分享、思考和總結，才能進步地更快哦！