Banner 版式

根據(jù)客戶(hù)需求，確定Banner尺寸大小、文案數(shù)量及產(chǎn)品形狀，找到適合的排版布局。Banner 版式分為：

①左右式排版采用左文右圖，或者左圖右文的方式，版式清晰，文案圖片分區(qū)明顯。左右版式適合于凸顯文案，圖文占比滿足四六開(kāi)黃金分割比，常用于表現(xiàn)立意模糊的金融閱讀類(lèi)產(chǎn)品。

②居中排版采用文案居中（居中對(duì)齊）、配圖向四周擴(kuò)散也可左右布局，或者配圖居中、文案左右的方式進(jìn)行。居中式排版適于凸顯圖片，也適合凸顯文案，凸顯的文案或圖片放置在畫(huà)面中間，常用于立意明確的電商、餐飲類(lèi)產(chǎn)品。另外如果Banner中沒(méi)有配圖只有文案，通常采用居中式構(gòu)圖。

Banner文案

目前字體的主流設(shè)計(jì)風(fēng)格為扁平化風(fēng)格，Banner設(shè)計(jì)中字體的選擇標(biāo)準(zhǔn)是文字的添加能使畫(huà)面產(chǎn)生和諧感。

字體分為兩大類(lèi)：襯線字體和無(wú)襯線字體。字體不同，表達(dá)的情緒也不同：襯線字體給人古典、經(jīng)典感，如宋體類(lèi)的方正大標(biāo)宋字體、類(lèi)似宋體的英文字體Didot，常用于表現(xiàn)女性產(chǎn)品類(lèi)、化妝品類(lèi)、文藝清新等類(lèi)目的主標(biāo)題；無(wú)襯線字體給人現(xiàn)代、簡(jiǎn)約感。

無(wú)襯線字體根據(jù)筆畫(huà)粗細(xì)組合不同，也會(huì)帶給人們不同的情緒：

粗體無(wú)襯線字給人強(qiáng)壯、厚重、促銷(xiāo)、廉價(jià)感，如黑體、方正蘭亭粗黑等字體，常用于表現(xiàn)男性產(chǎn)品類(lèi)或家電類(lèi)、工業(yè)類(lèi)產(chǎn)品等。

細(xì)體無(wú)襯線字給人柔美、品質(zhì)感，如方正蘭亭超細(xì)黑簡(jiǎn)體等字體，結(jié)合恰當(dāng)?shù)牧舭仔ЧＳ糜诒憩F(xiàn)有品質(zhì)感的大品牌、奢侈品、智能科技型產(chǎn)品或女性產(chǎn)品。

粗細(xì)結(jié)合的無(wú)襯線字給人剛勁、促銷(xiāo)感，往往結(jié)合文字傾斜增強(qiáng)促銷(xiāo)、熱賣(mài)感。

Banner中的字體，除了使用特殊字體之外，還可以自行設(shè)計(jì)字體。首先根據(jù)主題表達(dá)確定基礎(chǔ)字體，再收集變形靈感繪制變形字體，對(duì)文字的小部分部位做小規(guī)模的文字變化，以保證文字的高辨識(shí)度，如常見(jiàn)的筆畫(huà)連接、替代法、斷指法、錯(cuò)落擺放法等。

根據(jù)畫(huà)面表達(dá)需求，確定好文案字體后，Banner的文字文字排版規(guī)律，從高度占比入手：主副文案總高度在 Banner 的占比大約在40~50%；主文案、副文案大小層級(jí)差異通常為2倍關(guān)系，如主文案為60px，則副文案為30px左右；當(dāng)副文案字?jǐn)?shù)較少時(shí)，副文案字號(hào)可大些，但最少差異 10px 以上。

Banner配圖

Banner 的圖片類(lèi)型主要有 3 種：插畫(huà)類(lèi)型、模特產(chǎn)品類(lèi)型（也稱(chēng)為模特類(lèi)型）和產(chǎn)品類(lèi)型（也稱(chēng)為配圖類(lèi)型）。這里以配圖類(lèi)型為例。

①垂直水平式，水平有序排列產(chǎn)品圖片，所有配圖得到完美展現(xiàn)，給用戶(hù)正規(guī)、安全感。

②三角形：產(chǎn)品采用正三角構(gòu)圖，產(chǎn)生較強(qiáng)的立體感，各產(chǎn)品配圖占比輕重有別，這種構(gòu)圖方式穩(wěn)定自然，強(qiáng)化空間感，給用戶(hù)帶來(lái)極強(qiáng)的安全感、可靠感。

③采用對(duì)角線，產(chǎn)品配圖占比較為平衡，畫(huà)面活潑、動(dòng)感和穩(wěn)定性極強(qiáng)。

④漸次式排列，有很強(qiáng)的空間展示感，各產(chǎn)品配圖占比從大到小，穩(wěn)定、有序，透視指引到廣告語(yǔ)，給用戶(hù)穩(wěn)定自然、產(chǎn)品豐富可靠感。

⑤輻射式，也有很強(qiáng)的空間展示感，各產(chǎn)品配圖占比從大到小，畫(huà)面有序、透視指引到廣告語(yǔ)，給用戶(hù)活潑動(dòng)感、產(chǎn)品豐富可靠感。

⑥框架式構(gòu)圖穩(wěn)定、有很好的聚焦效果，讓用戶(hù)感覺(jué)產(chǎn)品穩(wěn)定可信。

在為 Banner 做配圖時(shí)，采用多層次配圖，實(shí)現(xiàn)多點(diǎn)傳達(dá)信息，讓用戶(hù)有更多的選擇余地，以及利用高價(jià)商品帶動(dòng)低價(jià)商品的促銷(xiāo)目的。

在Banner中合理利用點(diǎn)綴能更好地烘托主題，使整個(gè)畫(huà)面更有層次性。Banner點(diǎn)綴通常利用背景漸變、輔助形狀、商品、標(biāo)簽提煉、加入紋理等方法來(lái)實(shí)現(xiàn)。

①Banner設(shè)計(jì)中用鄰近色做柔和的漸變背景，可以增加設(shè)計(jì)細(xì)節(jié)豐富畫(huà)面效果，既符合現(xiàn)實(shí)生活光照原理，又起著引導(dǎo)用戶(hù)閱讀方向的作用。

②Banner商品點(diǎn)綴能集中用戶(hù)的視覺(jué)注意力，常用的輔助點(diǎn)綴形狀有橢圓、雙橢圓融合、長(zhǎng)圓角矩形、圓形及其變異。

③輔助點(diǎn)綴形狀利用極少的元素，如形狀的大小、方向、顏色的變化在版面中重復(fù)使用，營(yíng)造空間感和平衡感，實(shí)現(xiàn)豐富的視覺(jué)效果。

④Banner中利用標(biāo)簽提煉把較弱的副文案突顯，利用標(biāo)簽凸顯賣(mài)點(diǎn)。

⑤Banner 中利用網(wǎng)格化紋理、圓點(diǎn)紋理、噪點(diǎn)紋理等紋理來(lái)豐富畫(huà)面，但紋理的使用不能影響主文案的視覺(jué)效果。通過(guò)適當(dāng)降低不透明度、邊緣用遮罩做漸變處理等方式來(lái)弱化紋理效果。