@TTTing1?：我之前寫過很多關(guān)于Banner的文章，我也給大家做過圖例示范，如下圖所示，一個最完整最常規(guī)的Banner主要由下面這些部分組成：文案／模特或商品／背景／點綴元素／logo。

我也寫過上百篇關(guān)于電商的文章，內(nèi)容涵蓋文案／運營／設(shè)計／攝影／用戶體驗／用戶心理／市場營銷等各個方面，算是比較全面的了，但是大家可能也發(fā)現(xiàn)了，我對于電商設(shè)計里面的其中一個部分其實寫的非常少，也就是標題設(shè)計。

以前我覺得標題部分的設(shè)計比較復(fù)雜，涉及到圖形設(shè)計／質(zhì)感風格／文字排版／字體的氣質(zhì)／色彩搭配／文化背景等很多方面的內(nèi)容，它其實相當于又是一個獨立的設(shè)計范疇了，我即使是寫的話也只能是寫的比較皮毛，遠不及那些專門的字體設(shè)計師來的專業(yè)，所以就暫時擱淺了，總想等到某個時機成熟的時候再來寫。

不過經(jīng)過這段時間的沉淀，我也對標題部分的設(shè)計有了一些自己的理解，所以今天可以在這里給大家分享一下關(guān)于標題設(shè)計在電商設(shè)計里的運用的知識。

歡迎關(guān)注@TTTing1?的微信公眾號「做設(shè)計的面條」，一個干貨與文筆俱佳的美女設(shè)計師。

那么為了方便大家的理解，我這里把標題部分的設(shè)計總結(jié)歸納為這幾個方面：圖形設(shè)計／質(zhì)感風格／文字排版／字體的氣質(zhì)／色彩搭配／文化背景。

接下來我們一個個地來看下：

1. 從圖形設(shè)計的角度去理解

因為字體其實也可以理解為是一種圖形符號，對于不同品類的電商活動設(shè)計，我們可以在標題部分融入一些圖形或?qū)嵨锎钆?，這種形式不僅可以幫助用戶更好的地理解活動主題，也能給人耳目一新的感覺，非常適用于一些要體現(xiàn)產(chǎn)品功能賣點的文案，我給大家舉例下：

比如下面的晚安2個字是由床上用品拼成的，非常一目了然：

今年的三八女王節(jié)也是用產(chǎn)品堆成了一只貓頭的形式：

還有這個很贊的圖形拼接字體設(shè)計作品，大家應(yīng)該也都不陌生吧～

我們也可以只是將部分實物融入到字體里面，搭配組合成一個完整的標題：

也可以完全拋棄實物，而是運用字體＋相關(guān)圖形繪制的配合：

或者是完全由繪制的圖形來拼接成你的標題文字：

當然，最簡單的高效的偷懶的標題部分的設(shè)計，就是直接打字，用字庫里的現(xiàn)成字體就好。。不過這種往往也缺乏新意。

2. 從質(zhì)感風格的角度去理解

為了保持頁面的統(tǒng)一性，標題部分的質(zhì)感最好是與頁面保持一致，要不然會感覺突兀，比如頁面是比叫科技質(zhì)感帶高光的，那么標題部分也可以帶一些質(zhì)感或高光，這樣才協(xié)調(diào)。

而頁面形式多種多樣，標題部分的質(zhì)感當然也就多種多樣了，舉例：

科技／數(shù)碼／家電／游戲類的banner或?qū)ｎ}頁設(shè)計經(jīng)常會用到這種高光金屬質(zhì)感的字體效果：

教程直達：《PS教程！教你創(chuàng)建炫酷的3D金屬字體（素材已打包）》

頁面需要體現(xiàn)個性／張揚／放縱／爆發(fā)力的時候，經(jīng)常會用到這種毛筆字和字體飛濺的效果：

教程直達：《教你五分鐘快速繪制大氣磅礴的水墨字效果》

要體現(xiàn)年代感或一些帶情緒的氛圍主題的時候，字體可以有一些做舊的效果：

通過對字體陰影的運用，我們也可以做出很多不同的質(zhì)感風格的字體，比如可以做成絲帶或折疊紙的效果：

教程直達：《PHOTOSHOP創(chuàng)建真實的折疊紙字體》

比如卡片的效果：

當然你也可以直接通過剪紙來得到你要的質(zhì)感樣式：

還有一些走卡哇伊路線的頁面標題，常用一些卡通手繪風格：

教程直達丨《用PS快速打造漫畫風格字體》

一些粉筆畫效果的質(zhì)感常用于學(xué)院類型的主題banner，比如教育培訓(xùn)啦開學(xué)季之類的：

教程直達丨《手把手教你繪制效果逼真的黑板粉筆字》

還有一些輕質(zhì)感的比較圓潤的萌萌噠的字體效果（這些都要用到手繪啦～）

教程直達丨《手把手教你用AI繪制Q版的萌萌噠字體》

再或者是疊加一些跟主題吻合的紋理圖案：

霓虹燈效果：

教程直達丨《PS教程：創(chuàng)建夢幻的霓虹效果文字》

也可以直接在字體上疊加照片，這種形式非常省事，同時也可以非常有設(shè)計感，不過對于照片的要求比較高：

教程直達丨《讓圖片加字變得有格調(diào)？這三個方法可以輕松搞定！》

還有一些質(zhì)感可以直接依據(jù)主題而設(shè)定，比如花?。。贫浒。莅。绢^啊之類的質(zhì)感等，總之，世間萬物都可以成為你的標題文字的質(zhì)感，前提是跟你的主題風格相吻合。

下面這個就是用的針織用品的質(zhì)感和形式，也很巧妙：

還有一些需要借助三維建?；蚱渌椒ㄈ崿F(xiàn)的質(zhì)感我就不一一舉例啦～反正方法都是活的。

3. 從文字排版的角度去理解

我之前已經(jīng)給大家總結(jié)過常見的Banner排版樣式和專題頁結(jié)構(gòu)樣式，但其實標題部分也是有很多不同的排版樣式的，舉例：

最常見的左對齊／居中對齊／居右對其：

將文字作為背景或拆分為筆劃有節(jié)奏的排列，每一個筆劃就是一種元素：

當然文字也可以豎著排，比如文藝類的／古色古香的／潮流時尚的設(shè)計都可以嘗試豎著排文字：

環(huán)繞型：

四周對稱型：

有節(jié)奏有韻律的自由排列，常用于一些時尚類的排版或者一些文藝類的banner，對于這類banner來說，文字可以看作是畫面里的一種元素，是配合去表達畫面意境的，可以增加美感也可以營造一種隨意感：

 

文字可以鋪滿整個畫面：

還有一種形式跟前面的用實物拼成文字的想法相反，我們也可以用文字去拼成你要表達的實物，比如：

這個創(chuàng)意其實用在我的公眾號《做設(shè)計的面條》這個名字的字體設(shè)計里也是非常不錯的呢，剛好大家可以用來練手（我們第12期的群練習就是這個噢～）。

4. 從字體氣質(zhì)的角度去理解

標題部分的設(shè)計樣式往往需要跟你的頁面設(shè)計的基調(diào)相吻合，比如你的頁面是比較卡通卡哇伊的偏手繪的，你的標題設(shè)計最好是也能偏卡通一點，而不要突然就尖銳了或粗獷了。

這就好比我們的頁面根據(jù)運營活動定位方向的不同，會有高冷大牌／文藝／低價促銷／時尚簡潔／活潑可愛／多彩炫酷等等各種不同的促銷層次，文字作為體現(xiàn)這種層次的一部分也是有相對應(yīng)的氣質(zhì)的，比如你的字形是纖細的女性化字體／古典儒雅／簡潔時尚厚實的／尖銳的／速度感的／個性張揚的／體現(xiàn)文化底蘊的毛筆字／卡通的手寫字等氣質(zhì)。

舉例：

高冷大牌或時尚類的標題，往往比較簡潔，很少做字體變形，字體比較纖細規(guī)整。

文藝氣息的標題，字體往往是用的手寫體或者比較細瘦的襯線字體，同時會配合文字信息或意境去做一些字體變形，排版也可以比較隨意：

再比如像下面這個文案是“幸福的旁邊”，但設(shè)計師將每個文字都刪去了一個筆畫，營造了一種殘缺美感，同時又跟文案意境相吻合，是不是很有意思？

低價促銷的標題，字體往往比較粗獷或字體變形的比較夸張或扭曲（在不影響文字閱讀的情況下），而且適用于需要促銷氛圍的字體字形選擇非常多種多樣，除了纖細／古典儒雅等以外的字形都可以表現(xiàn)出促銷氛圍，比如厚實的／尖銳的／速度感的／個性張揚的／瀟灑的毛筆字／卡通的手寫字：

其實去花瓣搜索Banner大部分看到的都是這種類型的，那里有很多不同形式的低價促銷氣質(zhì)的字體設(shè)計，跟帶不帶質(zhì)感，是立體還是扁平效果都沒有太關(guān)系，主要是字形的氣質(zhì)先要對，然后才是選擇對應(yīng)的質(zhì)感樣式：

編者注：字體氣質(zhì)進階好文丨《不會挑選字體？來看看字體的7種類型及特點》

5. 從色彩搭配的角度去理解

對于標題部分字體的色彩搭配其實要分2個部分來說，一個是從氣質(zhì)跟頁面保持一致的角度，一個是從信息識別的角度，舉例：

（1）氣質(zhì)跟頁面保持一致

我們的標題設(shè)計，選用或設(shè)計的字體在氣質(zhì)上與頁面氣質(zhì)保持一致，比如體現(xiàn)活潑可愛的話，除了造型和表現(xiàn)形式卡哇咿一些外，也可以通過對字體的色彩加以處理來表現(xiàn)。

舉例：在字形一樣的情況下，彩色肯定比黑白稿要活潑熱烈得多，高明度高純度的色彩肯定比低明度低純度的色彩視覺感受上要活潑：

（2）從信息識別的角度

在電商設(shè)計里，文字常常作為最直接的展示信息的元素，所以一定要做到能在一堆文字或背景里脫穎而出，這點通過選用合適的顏色就可以做到，比如背景如果多彩復(fù)雜，那么文字顏色就盡量簡單素一點，背景暗色文字就用亮色，反之亦然：

6. 文化背景

要想做出一個優(yōu)秀的頁面設(shè)計，往往也會需要去考慮項目背景和文化背景等方面的因素，而字體設(shè)計作為頁面里的一項重要組成部分，自然而然地也會涉及到文化背景的層面，舉例：

旅游／留學(xué)或住宿相關(guān)的banner設(shè)計，常常需要一些能夠體現(xiàn)當?shù)靥厣幕途包c的字體設(shè)計，那么這個時候作為設(shè)計師的你肯定要對那些國家景點文化之類的要有所了解才好：

一些比較文藝或者需要體現(xiàn)文化底蘊的設(shè)計，比如音樂類／茶藝／琴棋書畫等與藝術(shù)沾邊的，常會用到毛筆字，但是一個對毛筆字沒有任何了解的人其實也很難寫出好的毛筆字設(shè)計，不同的筆觸帶給人的感受也是不一樣的：

一些節(jié)氣和民俗文化節(jié)日相關(guān)的字體設(shè)計，也會需要去了解其文化背景，要不然容易鬧笑話噢：

以上就是我對頁面設(shè)計里的標題部分的設(shè)計做的簡要總結(jié)概括了，以后有機會還可以再給大家細講，另外，看歸看，知道歸知道，但是實際執(zhí)行起來還是需要大家多看多練，那么怎么練怎么看呢？

歡迎關(guān)注@TTTing1?的微信公眾號「做設(shè)計的面條」，一個干貨與文筆俱佳的美女設(shè)計師：

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

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

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