今天可以在這里給大家分享一下關(guān)于標(biāo)題設(shè)計(jì)在電商設(shè)計(jì)里的運(yùn)用的知識(shí)。

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

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

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

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

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

接下來(lái)我們一個(gè)個(gè)地來(lái)看下：

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

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

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

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

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

我們也可以只是將部分實(shí)物融入到字體里面，搭配組合成一個(gè)完整的標(biāo)題：

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

或者是完全由繪制的圖形來(lái)拼接成你的標(biāo)題文字：

當(dāng)然，最簡(jiǎn)單的高效的偷懶的標(biāo)題部分的設(shè)計(jì)，就是直接打字，用字庫(kù)里的現(xiàn)成字體就好。不過(guò)這種往往也缺乏新意。

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

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

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

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

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

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

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

比如卡片的效果：

當(dāng)然你也可以直接通過(guò)剪紙來(lái)得到你要的質(zhì)感樣式：

還有一些走卡哇伊路線的頁(yè)面標(biāo)題，常用一些卡通手繪風(fēng)格

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

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

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

霓虹燈效果：

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

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

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

還有一些需要借助三維建模或其他方法去實(shí)現(xiàn)的質(zhì)感我就不一一舉例啦～反正方法都是活的。

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

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

最常見(jiàn)的左對(duì)齊／居中對(duì)齊／居右對(duì)其：

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

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

環(huán)繞型：

四周對(duì)稱型：

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

文字可以鋪滿整個(gè)畫(huà)面：

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

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

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

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

舉例：

高冷大牌或時(shí)尚類的標(biāo)題，往往比較簡(jiǎn)潔，很少做字體變形，字體比較纖細(xì)規(guī)整。

文藝氣息的標(biāo)題，字體往往是用的手寫(xiě)體或者比較細(xì)瘦的襯線字體，同時(shí)會(huì)配合文字信息或意境去做一些字體變形，排版也可以比較隨意：

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

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

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

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

對(duì)于標(biāo)題部分字體的色彩搭配其實(shí)要分2個(gè)部分來(lái)說(shuō)，一個(gè)是從氣質(zhì)跟頁(yè)面保持一致的角度，一個(gè)是從信息識(shí)別的角度，舉例：

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

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

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

（2）從信息識(shí)別的角度

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

6.文化背景

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

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

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

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

以上就是我對(duì)頁(yè)面設(shè)計(jì)里的標(biāo)題部分的設(shè)計(jì)做的簡(jiǎn)要總結(jié)概括了，以后有機(jī)會(huì)還可以再給大家細(xì)講。

#專欄作家#

做設(shè)計(jì)的面條，公眾號(hào)：做設(shè)計(jì)的面條，人人都是產(chǎn)品經(jīng)理專欄作家。一位擅長(zhǎng)將電商及banner設(shè)計(jì)講得最透徹易懂的妹子，有趣有料會(huì)拍照，歡迎互相交流。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。