前段時間一直在做運營類設(shè)計，banner在其中占了較大比重，為此就想寫一篇階段性總結(jié)。其中部分觀點參考了相關(guān)視頻教程和文章，設(shè)計新手一枚，如有不足還請大家海涵。

banner由以下五部分組成：版式，字體，顏色，背景，點綴。我就針對這幾點做些具體分析。

關(guān)于版式

大家發(fā)現(xiàn)沒有，大體上banner版式可分為兩種：1、圖文左右排版   2、文字居中    

在工作中我接觸圖文左右排版的機會較多，因此今天著重分析下。

圖文左右排版

當banner中需要包含具體的素材，如某位大咖，某件產(chǎn)品時，一般會選擇左右排版。并且圖文比例約為6：4（接近0.618的黃金比例）。

關(guān)于為何文字部分要大于圖片部分，我做了如下分析：如果banner中只有某位大咖、某件產(chǎn)品，而沒有文字襯托，用戶就不會知道banner想表達的什么。

如下圖，banner中只有一位拉大提琴的中年外國男子，人們會猜測這男子的個人專輯發(fā)布了？他是誰？所以，通過圖片用戶只能對信息有個大致了解。

相反，如果把banner中圖片部分遮去，而只保留文字部分。人們能夠獲取的關(guān)鍵詞有：5首電影歌曲、回憶過往的。因此即使沒有配圖，文字也能將信息精準地帶給用戶，文字所占比例應(yīng)當比圖片多些。這也就解釋了為何大部分左右排版的banner都是文字占比大于圖片。

banner中有些文字放左邊，有些放右邊，這有什么區(qū)別呢？

下圖中第一個banner是關(guān)于歐美電影歌曲的，右側(cè)可布局拉琴的男子，也可配電影片段，還可放正在播音的留聲機。第二張banner同樣如此。

下面兩圖均是圖左字右的banner，第一張《首席醫(yī)官》，特指這本書。

第二章奧運冠軍陳一冰求婚——除了他沒別人了。

說了這么多，總結(jié)出圖右字左和圖左字右的區(qū)別了嗎？圖片在右，配圖內(nèi)容比較模糊；圖片在左，配圖內(nèi)容比較清晰。由于人們習(xí)慣的閱讀順序是從左到右，左邊放什么意味著用戶會先看到什么。當圖片信息清晰時圖片放左，先用特定配圖吸引用戶目光，再加以具體的文字闡述就更正常不過了。而如果把含義不清的配圖放左左邊，用戶得看到右邊的文字部分才能獲得banner想傳遞的內(nèi)容，這會導(dǎo)致用戶接收信息時間增加。

2、文字居中    

在工作中我沒怎么接觸過文字居中的排版方式，因此很抱歉沒法做太多的剖析。印象中電商比較喜歡此類排版，也許是文字放在正中的位子，底下可以放許多產(chǎn)品？

版式中大小標題的比例

發(fā)現(xiàn)沒？大小標題比例約為2：1。其實這和一級標題，二級標題是同個道理，我們在設(shè)計banner時總希望用戶能把banner上的文字看全，但又不希望大小標題混在一起主次不清，因此在排版合理，用戶能看清字的綜合考慮下，大小標題比例約為2：1。（其實小標題太小運營們也會懟的）

關(guān)于字體

banner中常用的字體有三種：襯線體（serif）、非襯線體（sans-serif）、書法體（cursive）

都說字體有各自的性格，襯線體筆畫有粗細之分，它模仿的是中國古代字體和古代碑文上的字體，因此襯線體能給人古典，文藝的感覺，適合用于文藝氣息或與女子的相關(guān)設(shè)計。

非襯線體筆畫簡潔，筆畫較粗，體現(xiàn)現(xiàn)代，簡約的特性，適合用于蒼勁有力，與男子相關(guān)的設(shè)計。

書法體源自中國古代，能體現(xiàn)中國文化和揮灑墨水的豪氣，適用于文藝主題和金戈鐵馬般的豪邁主題。

ps：商用字體需要注意版權(quán)！！！這點很重要

關(guān)于顏色

在生活中，色彩心理學(xué)對人們對顏色的認知有很大的影響。

黑色：黑色是一種代表品質(zhì)、權(quán)威、穩(wěn)重、時尚的色彩，同時也含有冷漠、悲傷、防御的消極情感。

白色：傳遞一種簡單、純真、高雅、精致、信任、開放、干凈、暢快、樸素的情感。

灰色：代表睿智、老實、執(zhí)著、嚴肅、壓抑的色彩。

紅色：傳遞喜慶、自信、斗志、權(quán)威、性感的情感。

綠色：是自然界中最常見的顏色，代表生命力、青春、希望、寧靜、和平、舒適、安全的情感。

藍色：是三原色中的一種，代表永恒、靈性、清新、自由、放松、舒適、寧靜、商務(wù)。

紫色：是一種代表優(yōu)雅、浪漫、高貴、時尚、神秘、夢幻、靈性、創(chuàng)造性的顏色。

黃色：代表陽光、青春、活力、時尚、尊貴、年輕輕快、輝煌、希望的顏色。

因此在設(shè)計中選擇主色調(diào)也要遵從如上:point_up_2:。

例如活潑年輕的內(nèi)容可選擇純度較高的藍綠色、綠色等作為主色調(diào)。

文藝類內(nèi)容則適合飽和度不高，偏向白色這類能讓人平靜的色彩。

關(guān)于顏色的搭配，我一般會在花瓣上找些主題相近的banner作參考。

此外推薦幾個配色網(wǎng)站：

https://coolors.co/browser/latest/1

https://color.adobe.com

https://uigradients.com

關(guān)于點綴

大約有3種。橢圓點綴，圓角矩形點綴，實物點綴。圓形圓角矩形點綴可適當加些漸變和陰影。

為了不讓實物點綴太過搶眼，可以適當做些弱化，比如降低透明度或是做些模糊處理。

關(guān)于背景

大約有3種。

純色背景，實物背景，材質(zhì)背景。根據(jù)畫面的需要可以選擇合適的底圖。

總結(jié)：看了這么多手癢癢了嗎？此時此刻，打開ps做個banner練練手唄~~~~

作者： 夜夜yue

轉(zhuǎn)載請注明：站酷

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.0391cbd.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司