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

我們在設計一個寶貝詳情頁的時候，要考慮很多問題。

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

說到真正落地輸出一個詳情頁的時候，我們要看看詳情頁是由哪些細小的模塊組成的。詳情頁的組成元素：顏色、字體、人物、靜物、符號、阿拉伯數字。

這里尤為重要的是顏色和字體，這兩個小元素決定了你頁面的風格與和諧度，以及是否能夠準確傳達你想表達的信息。

很多時候，你發現你的寶貝詳情頁，就是沒有別人的漂亮，或者總感覺哪里怪怪的，并且還找不到轉化率的原因，也不知道如何優化。

其實這一切都是因為字體、配色、文案、構圖組合的時候，沒有考慮背后的邏輯。如何創造一個和諧的設計，我們必須從最原始的知識開始，一點點了解，今天我們先說說“字體”。

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

一個美工對“字體”的使用把控是至關重要的，因為在設計中應用了不恰當的字體時，你想要讓用戶接受的信息就會“打折”，或者說無效。

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

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

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

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

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

可能這2張圖（圖2、3）的“毛筆字”同你小時候看到的不一樣，但當你看到這2張圖片的時候，卻一定可以確定這就是毛筆寫的，為什么？因為我們第一次接觸到這樣類型的字體時，長輩或者老師告訴我們這樣的字叫“毛筆字”。我們的心智被第一時間設定了，這樣粗、黑色、不規則、有被毛拖過的痕跡的字體，就是毛筆字。所以，當你看到這種字體時，你都把他歸類到毛筆字的行列。

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

當你用毛筆字去表達一個東西的時候，人的意識會同時建立這些聯系。如果你賣手串，或者茶葉，或者有點文化底蘊的產品，用毛筆字是最快速把人的認知意識帶去的方式。

我們再看一個例子。

假如今天，你是一個賣酒的商家，你的美工做了2張海報圖片，你會選擇哪一張呢？

一般人肯定是第一張圖片（圖4），為什么第一種更好？因為它看上去更加和諧如一，我們一起來細細分解一下。

1. 首先是產品本身，產品是安徽的“家酒”。

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

2. 背景用了水墨渲染和江南水鄉的實景圖片，很好地迎合了產品本身的設計，因為產品本身的設計元素就源于徽派建筑的房子。

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

我們的“潛意識”中，認為“酒”是古老的東西，加上產品的設計讓我們找到復古的感覺，背景圖片配上了“江南水鄉”這種建筑風格，直接把我們帶入了早于我們現在的年代。背景里再融入“水墨”設計，自然是與“毛筆字”更和諧，因為“墨”是寫毛筆字時要用的東西，他們是有記憶關聯的。最重要的是，總體呈現“老”“復古”“懷舊”的痕跡，潛意識認為就應該有一個“老”一點的字體來配。

所以當我們在設計一個圖片，或者一個詳情頁時，用字體一定要考慮得更深入，不是考慮你自己怎樣舒服，而是要考慮你的用戶怎么看，對的字體配上對的畫面，用戶就會有正確的吸收解讀。

那么，到底什么樣的產品應該選擇什么樣的字體呢？如何避免犯低級的錯誤？

賣男性產品，應該用什么樣的字體

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

我們通過意識中對男性特征的認知，來提取一些認知共同點，有如下幾點：

只要粗獷、堅硬、強勁有力、棱角分明、力量感等等圖形特征的文字就是男性化的文字。

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

這4種字體只是我簡單羅列來舉例子，你們可以舉一反三，只要滿足上面剛剛統計出的共性特點即可。那么我們如何應用它們呢？通常在什么情況下用呢？

一般男性化字體大量應用在以“男性為主要從業人群”和“男性為主要消費人群”的產品設計中，包括并不僅限于以下幾種：

1.體育運動類，例如：世界杯、籃球、游泳等等（男性為主要從業人員）；

2.車、剃須刀、重金屬、搖滾、競技游戲、pk類游戲等等（男性為主要消費群體）；

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

賣女性產品，應該用什么樣的字體

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

看看下面幾款字體（圖16），是不是很容易讓我們聯系到女性的特征呢？所以這些字體的性別取向為女。字體的使用邏輯都是一樣的，性別取向為女的字體，自然就被應用到女性消費為主體的產品設計中。

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

卡通字體的應用

我們先看看，我們日常看到的卡通人物是如何的？ （圖19）

當你看到一個字體很卡通時，必然是因為他滿足了我們意識里的卡通形象特征，我們來找找卡通字體的取向特征（圖20）。

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

卡通字體的應用，一般跟兒童有點像，但又有區別，主要應用在卡通人物設計、動畫片、點讀機、漫畫配字等。

文藝字體的應用

現在流行小清新，或者文藝風，如何設計一個頁面，一看就讓目標人群知道，你是賣文藝女青年產品的？

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

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

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

這里不再一一列舉，可以看看這張導圖（圖29）。

詳情頁上的配色指南

配色這個問題，對于設計初學者是個難題。配色有很多講究，今天分享給大家一種快速上手的方式。

配色1：比例

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

核心重點：

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

2. 除非大型活動，多顏色，顯活躍。

配色2：關系

這是重點，大家要記住這六個基礎色（圖31），紅、橙、黃、綠、藍、紫，然后就是把圖片中的色環保存好，可以取色用。

配色秘訣1：相鄰色搭配

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

這樣做有兩個好處：

1. 相鄰色因為比較鄰近，有很強的關聯性，非常協調柔和，畫面非常和諧統一；

2. 可以制造出一種柔和溫馨的感覺，因為在色輪中位置較近所以沖擊力較弱。

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

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

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

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

配色秘訣2：間隔色搭配

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

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

配色秘訣3：互補色搭配

圖41～42中的案例，都是互補色，它們的沖擊力都比較強，會感覺很時尚、動感。

互補色搭配要注意三個方面：

（1）一定要控制好畫面的色彩比例，因為這兩種顏色放一起對抗非常激烈，所以一定要選出一個老大當主色調，另外一方作為點綴或者輔助色；

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

（3）在畫面中加入黑/白作為調和色進一步緩沖其對抗的特性；

以上三種搭配方式，各有優劣，你想表明什么目的，就用什么配色方式。是柔和，是動感，還是沖擊？你針對自己頁面的目的去設定就好。