詳解字體與顏色，如何讓詳情頁不再自殘？

我們?cè)谠O(shè)計(jì)一個(gè)寶貝詳情頁的時(shí)候，要考慮很多問題。

設(shè)計(jì)流程一般是這樣的：分析人群畫像、鎖定人群、設(shè)立核心主線、設(shè)定成交主張、書寫文案、描繪場(chǎng)景、拍攝收集素材、設(shè)定邏輯、設(shè)定顏色搭配、字體應(yīng)用、初稿。

說到真正落地輸出一個(gè)詳情頁的時(shí)候，我們要看看詳情頁是由哪些細(xì)小的模塊組成的。詳情頁的組成元素：顏色、字體、人物、靜物、符號(hào)、阿拉伯?dāng)?shù)字。

這里尤為重要的是顏色和字體，這兩個(gè)小元素決定了你頁面的風(fēng)格與和諧度，以及是否能夠準(zhǔn)確傳達(dá)你想表達(dá)的信息。

很多時(shí)候，你發(fā)現(xiàn)你的寶貝詳情頁，就是沒有別人的漂亮，或者總感覺哪里怪怪的，并且還找不到轉(zhuǎn)化率的原因，也不知道如何優(yōu)化。

其實(shí)這一切都是因?yàn)樽煮w、配色、文案、構(gòu)圖組合的時(shí)候，沒有考慮背后的邏輯。如何創(chuàng)造一個(gè)和諧的設(shè)計(jì)，我們必須從最原始的知識(shí)開始，一點(diǎn)點(diǎn)了解，今天我們先說說“字體”。

如何正確選擇詳情頁上的字體？

一個(gè)美工對(duì)“字體”的使用把控是至關(guān)重要的，因?yàn)樵谠O(shè)計(jì)中應(yīng)用了不恰當(dāng)?shù)淖煮w時(shí)，你想要讓用戶接受的信息就會(huì)“打折”，或者說無效。

我們來看一張圖片（圖1），你思考一下，當(dāng)你看到每個(gè)字體的時(shí)候，你大腦里第一意識(shí)感覺是什么？

不難看出，不同的字體可以給人不同的畫面連接，為什么“文藝”就應(yīng)該是圖片右下角的那個(gè)字體呢？有誰規(guī)定了嗎？

其實(shí)并沒有誰規(guī)定，而是我們的“潛意識(shí)”束縛著自己，這個(gè)束縛又是怎么形成的呢？還源于“古老的催眠”。

人的意識(shí)本身不存在，是通過外界不斷的信息輸入，才使我們的認(rèn)知不斷建立。舉例：

無論你是否接受過高等教育，都或多或少看到過“毛筆字”，你大腦里大概總知道什么樣的字，是“毛筆字”，即使你根本不會(huì)寫。

可能這2張圖（圖2、3）的“毛筆字”同你小時(shí)候看到的不一樣，但當(dāng)你看到這2張圖片的時(shí)候，卻一定可以確定這就是毛筆寫的，為什么？因?yàn)槲覀兊谝淮谓佑|到這樣類型的字體時(shí)，長(zhǎng)輩或者老師告訴我們這樣的字叫“毛筆字”。我們的心智被第一時(shí)間設(shè)定了，這樣粗、黑色、不規(guī)則、有被毛拖過的痕跡的字體，就是毛筆字。所以，當(dāng)你看到這種字體時(shí)，你都把他歸類到毛筆字的行列。

重點(diǎn)來了。由于毛筆字是比較古老的東西，現(xiàn)代很少用，例如只有在古裝電視、過年的春聯(lián)等地方看到，或者說只是藝術(shù)家練習(xí)的東西。慢慢地，就有一層信息附著在上面。

當(dāng)你用毛筆字去表達(dá)一個(gè)東西的時(shí)候，人的意識(shí)會(huì)同時(shí)建立這些聯(lián)系。如果你賣手串，或者茶葉，或者有點(diǎn)文化底蘊(yùn)的產(chǎn)品，用毛筆字是最快速把人的認(rèn)知意識(shí)帶去的方式。

我們?cè)倏匆粋€(gè)例子。

假如今天，你是一個(gè)賣酒的商家，你的美工做了2張海報(bào)圖片，你會(huì)選擇哪一張呢？

一般人肯定是第一張圖片（圖4），為什么第一種更好？因?yàn)樗瓷先ジ雍椭C如一，我們一起來細(xì)細(xì)分解一下。

1. 首先是產(chǎn)品本身，產(chǎn)品是安徽的“家酒”。

為了讓用戶一看到產(chǎn)品本身就知道這是安徽的產(chǎn)品，并且酒需要有歷史襯托，所以選擇了一個(gè)復(fù)古的設(shè)計(jì)，讓它看上去有點(diǎn)兒年頭，將“徽派”建筑中的明顯設(shè)計(jì)特征融合到包裝上。

2. 背景用了水墨渲染和江南水鄉(xiāng)的實(shí)景圖片，很好地迎合了產(chǎn)品本身的設(shè)計(jì)，因?yàn)楫a(chǎn)品本身的設(shè)計(jì)元素就源于徽派建筑的房子。

3. 為什么第一幅圖片配毛筆字就很舒服，而第二張圖片用了“方正大黑簡(jiǎn)體”就顯得不和諧呢？我們的大腦認(rèn)為，就是應(yīng)該配毛筆字。

我們的“潛意識(shí)”中，認(rèn)為“酒”是古老的東西，加上產(chǎn)品的設(shè)計(jì)讓我們找到復(fù)古的感覺，背景圖片配上了“江南水鄉(xiāng)”這種建筑風(fēng)格，直接把我們帶入了早于我們現(xiàn)在的年代。背景里再融入“水墨”設(shè)計(jì)，自然是與“毛筆字”更和諧，因?yàn)椤澳笔菍懨P字時(shí)要用的東西，他們是有記憶關(guān)聯(lián)的。最重要的是，總體呈現(xiàn)“老”“復(fù)古”“懷舊”的痕跡，潛意識(shí)認(rèn)為就應(yīng)該有一個(gè)“老”一點(diǎn)的字體來配。

所以當(dāng)我們?cè)谠O(shè)計(jì)一個(gè)圖片，或者一個(gè)詳情頁時(shí)，用字體一定要考慮得更深入，不是考慮你自己怎樣舒服，而是要考慮你的用戶怎么看，對(duì)的字體配上對(duì)的畫面，用戶就會(huì)有正確的吸收解讀。

那么，到底什么樣的產(chǎn)品應(yīng)該選擇什么樣的字體呢？如何避免犯低級(jí)的錯(cuò)誤？

賣男性產(chǎn)品，應(yīng)該用什么樣的字體

產(chǎn)品是給男人用的，當(dāng)然就要分析男性的特征。他們都有著粗而硬直的眉毛，大而筆挺的鼻梁，堅(jiān)硬的眼瞼，棱角分明的臉部輪廓，有的甚至有一些刀刻般硬朗的皺紋。

我們通過意識(shí)中對(duì)男性特征的認(rèn)知，來提取一些認(rèn)知共同點(diǎn)，有如下幾點(diǎn)：

只要粗獷、堅(jiān)硬、強(qiáng)勁有力、棱角分明、力量感等等圖形特征的文字就是男性化的文字。

比如這款字體（圖11），就具備這些特征：

這4種字體只是我簡(jiǎn)單羅列來舉例子，你們可以舉一反三，只要滿足上面剛剛統(tǒng)計(jì)出的共性特點(diǎn)即可。那么我們?nèi)绾螒?yīng)用它們呢？通常在什么情況下用呢？

一般男性化字體大量應(yīng)用在以“男性為主要從業(yè)人群”和“男性為主要消費(fèi)人群”的產(chǎn)品設(shè)計(jì)中，包括并不僅限于以下幾種：

1.體育運(yùn)動(dòng)類，例如：世界杯、籃球、游泳等等（男性為主要從業(yè)人員）；

2.車、剃須刀、重金屬、搖滾、競(jìng)技游戲、pk類游戲等等（男性為主要消費(fèi)群體）；

3.促銷活動(dòng)：需要充滿激情，熱血沸騰，男性化特征居高。

賣女性產(chǎn)品，應(yīng)該用什么樣的字體

我們首先來看看，生活中我們看到的女性長(zhǎng)什么樣子，然后同樣根據(jù)上面的方式提取特征（圖15）。

看看下面幾款字體（圖16），是不是很容易讓我們聯(lián)系到女性的特征呢？所以這些字體的性別取向?yàn)榕?。字體的使用邏輯都是一樣的，性別取向?yàn)榕淖煮w，自然就被應(yīng)用到女性消費(fèi)為主體的產(chǎn)品設(shè)計(jì)中。

比如愛情類、鮮花類、珠寶配飾類、女性用品、護(hù)膚品、化妝品等。

卡通字體的應(yīng)用

我們先看看，我們?nèi)粘？吹降目ㄍㄈ宋锸侨绾蔚模?（圖19）

當(dāng)你看到一個(gè)字體很卡通時(shí)，必然是因?yàn)樗麧M足了我們意識(shí)里的卡通形象特征，我們來找找卡通字體的取向特征（圖20）。

通過卡通特征，我找到一些符合卡通字體取向的幾個(gè)字體，當(dāng)然還有更多，這里就不一一列舉。

卡通字體的應(yīng)用，一般跟兒童有點(diǎn)像，但又有區(qū)別，主要應(yīng)用在卡通人物設(shè)計(jì)、動(dòng)畫片、點(diǎn)讀機(jī)、漫畫配字等。

文藝字體的應(yīng)用

現(xiàn)在流行小清新，或者文藝風(fēng)，如何設(shè)計(jì)一個(gè)頁面，一看就讓目標(biāo)人群知道，你是賣文藝女青年產(chǎn)品的？

文藝青年，看起來舒適安靜，那么文藝字體取向的共同特征應(yīng)該有哪些呢？

文藝字體就像“文藝青年”那樣地安靜，并且文靜素雅（圖25、26），例如：

文藝字體的應(yīng)用，可以看看類似茵曼、無印良品的設(shè)計(jì)，或者日本的一些設(shè)計(jì)，都很符合文藝風(fēng)，給你很安靜的感覺，設(shè)計(jì)中大量應(yīng)用了留白（圖2 7、28）。

這里不再一一列舉，可以看看這張導(dǎo)圖（圖29）。

詳情頁上的配色指南

配色這個(gè)問題，對(duì)于設(shè)計(jì)初學(xué)者是個(gè)難題。配色有很多講究，今天分享給大家一種快速上手的方式。

配色1：比例

日本的設(shè)計(jì)師提出過一個(gè)配色黃金比例，是70：25：5，其中的70%為大面積使用的主色，25%為輔助色，5%為點(diǎn)綴色（圖30）。一般情況下建議畫面色彩不超過3種，3種是指的3種色相，比如深紅和暗紅可以視為一種色相。

核心重點(diǎn)：

1. 顏色越少越好，顯成熟；

2. 除非大型活動(dòng)，多顏色，顯活躍。

配色2：關(guān)系

這是重點(diǎn)，大家要記住這六個(gè)基礎(chǔ)色（圖31），紅、橙、黃、綠、藍(lán)、紫，然后就是把圖片中的色環(huán)保存好，可以取色用。

配色秘訣1：相鄰色搭配

在色輪中挨著比較近的就是鄰近色（圖32），根據(jù)紅橙黃綠藍(lán)紫這六字順序，相鄰色搭配就是紅+橙，橙+黃，黃+綠，綠+藍(lán)……以此類推，首尾循環(huán)。

這樣做有兩個(gè)好處：

1. 相鄰色因?yàn)楸容^鄰近，有很強(qiáng)的關(guān)聯(lián)性，非常協(xié)調(diào)柔和，畫面非常和諧統(tǒng)一；

2. 可以制造出一種柔和溫馨的感覺，因?yàn)樵谏喼形恢幂^近所以沖擊力較弱。

這兩張（圖33）基本都是采用相鄰色的搭配方式，第一張還加了一筆橙色起到點(diǎn)綴的作用，整體畫面非常柔和協(xié)調(diào)，因此這類配色常用于家居、棉織品、小清新淡雅的服裝、中國(guó)風(fēng)等能給人以寧靜、柔和、傳統(tǒng)感覺的產(chǎn)品。

相近色搭配中還有一種單色系的搭配方式，采用同一色相，僅僅調(diào)整該色的明度、飽和度，得到另外一種顏色。如圖34所示，文字顏色就是用背景色降低飽和度、明度后的結(jié)果。本身背景色明度很高，又采用單色搭配手法，所以會(huì)給人高雅、淡雅、寧靜的感覺。主標(biāo)題的字體也配合整個(gè)畫面采用了一些變形，使得整體非常統(tǒng)一和諧。

七夕這張圖片（圖35）使用的藍(lán)與紫搭配，畫面寧靜和諧。旁邊這張圖片使用的單色搭配，深藍(lán)+淺藍(lán)，畫面統(tǒng)一帶有一點(diǎn)傳統(tǒng)的感覺，而衣服在這個(gè)畫面中起到了點(diǎn)綴作用。

這張海報(bào)（圖36）用的紅+橙的搭配方式，以橙色為主色調(diào)，背景中采用不同橙色增加了畫面的空間感，并且讓畫面看起來不是那么單調(diào)。海報(bào)中鄧超驚訝的表情，以及背景傾斜的線條和幾何方塊的點(diǎn)綴，飄浮的產(chǎn)品使得原本穩(wěn)定的畫面變得活潑輕快富有沖擊力，可見海報(bào)做成什么格調(diào)也與畫面每個(gè)組成部分都有密切的關(guān)系。

配色秘訣2：間隔色搭配

特別要說明一點(diǎn)的是：冷色在畫面中總是趨于后退，暖色是趨近，暖色很容易就可以進(jìn)入人的眼簾，這一點(diǎn)需要根據(jù)畫面中重點(diǎn)信息的層級(jí)自己把握。

仔細(xì)看左邊的幾張圖片（組圖37～40），有詳細(xì)的說明。

配色秘訣3：互補(bǔ)色搭配

圖41～42中的案例，都是互補(bǔ)色，它們的沖擊力都比較強(qiáng)，會(huì)感覺很時(shí)尚、動(dòng)感。

互補(bǔ)色搭配要注意三個(gè)方面：

（1）一定要控制好畫面的色彩比例，因?yàn)檫@兩種顏色放一起對(duì)抗非常激烈，所以一定要選出一個(gè)老大當(dāng)主色調(diào)，另外一方作為點(diǎn)綴或者輔助色；

（2）可以降低其中一方的明度、飽和度，這樣可以產(chǎn)生一種明暗對(duì)比，緩沖其對(duì)抗性；

（3）在畫面中加入黑/白作為調(diào)和色進(jìn)一步緩沖其對(duì)抗的特性；

以上三種搭配方式，各有優(yōu)劣，你想表明什么目的，就用什么配色方式。是柔和，是動(dòng)感，還是沖擊？你針對(duì)自己頁面的目的去設(shè)定就好。