即使是一塊小小的SALE 招牌設(shè)計(jì)其實(shí)也有很多種玩法呢，今天@TTTing1?（?京東用戶體驗(yàn)設(shè)計(jì)部）這篇文章總結(jié)了9種常見的設(shè)計(jì)手法，每一個都附上優(yōu)秀案例，看完也許對Banner 排版設(shè)計(jì)能有所啟發(fā)哦。

小婷姐的電商系列好文：

1. 《新人手冊！聊聊關(guān)于電商設(shè)計(jì)的那些事兒》
2. 《前輩經(jīng)驗(yàn)！聊聊新人設(shè)計(jì)師最容易遇到的12個問題》

記得去年年底跟幾個朋友一起去香港逛街，當(dāng)時逛了一個商場的好幾十家店，幾乎每一家店里都掛著一個寫著SLAE的牌子旨在吸引用戶進(jìn)店購物，我發(fā)現(xiàn)每一家SALE招牌的設(shè)計(jì)樣式都不一樣，而且每一個SALE招牌的設(shè)計(jì)風(fēng)格跟店鋪的裝修風(fēng)格以及店里賣的服飾風(fēng)格都很搭調(diào)，所以也是挺感慨的，雖然只是很小的一塊招牌，但是對比大陸的一些商場，設(shè)計(jì)感好太多，我沒有拍照下來，但是我收集了一些其他的SALE招牌并以自己的理解概括總結(jié)了一下，大家可以一起看看，也許能對大家的Banner 設(shè)計(jì)排版有一些靈感啟發(fā)。

1，圓形聚焦

其中的紙張撕裂效果其實(shí)也可以看做是圓形聚焦的一種形式。

2，商品組合成形

用商品或字母等元素堆砌出一種形狀。

3、畫框聚焦

將背景填充各種圖案或者商品，形成一個畫框，假想文案部分就是畫作，那么視覺焦點(diǎn)自然而然聚焦于中間文案部分。

4、類畫框聚焦

與畫框聚焦的方法類似，不同的是利用了格式塔原理，即使畫框不封閉，受眾也能自然而然將它腦補(bǔ)成一個閉環(huán)，此種方式相較畫框聚焦的方式更為靈活。

5、背景材質(zhì)疊加

這種方式只需要找到合適的紋理或材質(zhì)當(dāng)做背景就好了，制作起來還算比較方便的，同時要保證文案內(nèi)容的清晰識別性。

6、手繪或插畫風(fēng)格

其實(shí)算是上述方法的延伸，因?yàn)槿魏挝淖帧D形都可以視為組成畫面的一種元素，要是能做成gif動圖就更有意思了。

7、以下幾個也是上面幾種方法的延伸或者與模特的結(jié)合運(yùn)用，當(dāng)我們將模特視為一種元素、一種紋理或者一種形狀，就好理解了。

8、將SALE視作主角或骨架，并賦予它一種功能形式，模特商品等均可視為配角并與之搭配使用（配角依附于它，這種形式會比較好玩新穎）。

9、將SALE或文案部分視為主體并對它進(jìn)行塑型（比較瀟灑現(xiàn)代的毛筆字越來越受到設(shè)計(jì)師的青睞），我們知道假如要突出某一個主體，通?？梢圆捎脤Ρ群秃嫱信阋r的手法，而這里就運(yùn)用到了對比的手法，前景造型豐富則背景就簡潔，反之亦然。

說了這么多，其實(shí)每一種方式都可以嘗試去混搭組合，也許又會產(chǎn)生不一樣的效果呢~ 另外這次收集的算是稍微時尚一點(diǎn)但又不算那么高冷的設(shè)計(jì)案例，所以還是可以滿足目前仍然是追求熱鬧促銷為主但又要求時尚的電商設(shè)計(jì)需要的，想看更多Banner 玩法可以看我前面寫的幾篇關(guān)于Banner 設(shè)計(jì)的文章。

以上就先介紹到這里了，覺得不錯的話就收藏起來吧，以后總可能會用到的，另外可能有的人會說：“怎么都是英文的啊，不實(shí)用啊”，對此我只能回答：“設(shè)計(jì)無國界，大家就不要總歧視英文了啦~~”。哈哈哈哈

我們下次再見！~看完覺得不錯的話就點(diǎn)贊支持下啦，么么噠！~（以上案例均來自花瓣，如有冒犯請私下約我么么噠~）

歡迎關(guān)注小婷姐的微信公眾號「TTTink-D」，一個干貨與文筆俱佳的美女設(shè)計(jì)師：

微信公眾號簡介：專注開拓電商設(shè)計(jì)思維，不定期分享一些個人見解干貨，當(dāng)然也會分享一些頂級創(chuàng)意、攝影、人生感悟方面的好文啦。

「技多不壓身的設(shè)計(jì)師才有高薪資」

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識學(xué)起來！為設(shè)計(jì)師量身打造的DPI指南》
8. 交互設(shè)計(jì)自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com