超周全！UI設計中的字體配色方法總結

王M爭： 今天來給大家分享產品設計中筆墨配色的一些知識點。要給筆墨配色，首先我們要知道你的產品(界面)中有哪些筆墨。在這里，我將產品中的筆墨重要分為以下四種：題目類、正文類、提醒類和交互類。

迎接關注作者的微信公眾號：王M爭

題目類

首先來說題目類，題目，顧名思義要讓用戶在短時間內了解界面的大致內容，講究簡潔明了。在app中，題目類一樣平常有的頂部欄題目，底部欄題目，列表題目、表單題目等。

給題目類筆墨配色相對來說比較簡單，選項比較少，我們一樣平常只會使用深灰色或者企業(yè)色。由于題目雖然很緊張，但是也不能過于搶眼。

而根據(jù)緊張性程度我們可以把題目分為不同的等級，一樣平常來說，層級越低的題目顏色越淺。深淺的搭配可以給你的界面帶來意想不到的結果。

例如，微信中的摯友列表和聊天界面中，用戶名和聊天記錄的筆墨顏色深淺恰好是反過來的。這個其實也很好理解，摯友列表中用戶關注的是摯友是誰，而到了聊天界面用戶更關注的是摯友說了什么。所以這里用深淺不同的筆墨來幫助用戶加以區(qū)分。

我們可以看下使用同樣的配色的結果，感受一下不同。

我不太建議給題目使用企業(yè)色，由于你要調整企業(yè)色的飽和度來區(qū)分不同的等級，小我覺得如許不太合理。

此外假如題目系統(tǒng)過于繁雜，僅從顏色深淺已經無法讓用戶從視覺上進行識別。我們還可以用字號來幫助完成區(qū)分，事實上如今大多數(shù)產品都是通過字號的不同來完成等級區(qū)分的。

正文類

正文類筆墨是給用戶提供細致說明息爭釋的，正文類筆墨要比題目類要淺一些。一是由于用戶對于正文都不太感愛好，很少去讀，我們沒有需要在這里使用配色來吸引他們的細致力。其二，由于正筆墨數(shù)一樣平常比較多，過于花哨的配色會使整個界面顯得凌亂，造成主次不分。

提醒類

提醒類筆墨顧名思義就是要給用戶以指導和提醒。這個就意味著提醒類筆墨要充足的顯眼，假如用戶都細致不到你，還怎么提醒呢？

提醒類筆墨一個重要用途就是給用戶展示當前的狀況。

我們來設想一個場景，你在一個理財平臺上購買了一款理財產品。不同的時間段會有不同的狀況。你看到這款理財產品收益率不錯，投了3000元，這時的狀況是“確認中”；過了幾天這個產品開始起息就進入了“起息中”狀況；又過了一段時間，你一時有事急必要用錢，就把產品轉讓給別人，又會依次進入“轉讓中”和“轉讓成功”。不同的狀況我們在設計上給用戶加以區(qū)分來幫助用戶進行更好的識別。一樣平常常見的方法就是使用不同的配色來進行區(qū)分，但是這個是適用于產品狀況較少的情況。假如你的產品狀況過多，每一個狀況都配以一款顏色的話，那么整個界面就會顯得很亂。

最常見的狀況就是成功和失敗，一樣平常來說在用戶心中都默認為綠色和紅色了。當然如今把企業(yè)色作為成功也很常見。這里就會出現(xiàn)一個題目，假如你的產品主色調正好是紅色，這個時候就可能會引起用戶混淆。

交互類

接下來，我們來談談交互類筆墨。交互類筆墨，簡單來說就是能夠讓用戶完成點擊操作的筆墨。交互類筆墨設計的首要目標是讓用戶覺得你的筆墨是可以點擊的。重要的辦法有三個:

1.使用配色

目前來說用戶覺得帶有顏色的字體都是可以點擊的，比如企業(yè)色。

當然假如你覺得界面中企業(yè)色出現(xiàn)的過于頻繁，你還可以使用藍色。藍色在配色領域絕對是萬金油型的，不管你的產品界面主色系是什么，用戶一看到藍色筆墨就會曉暢是可以點擊的。

2.icon

筆墨加icon的組合也可以讓用戶產生點擊的欲望。以知乎為例，左邊的帖子用戶只能看到答者和內容簡介，這里的點贊和評論都是純筆墨，用戶無法直接進行點贊，但是點擊進去以后，是icon和筆墨的樣式，這里用戶是可以直接進行點贊，評論，打賞和珍藏。

ps.大家有沒有細致到上面我只提到不能點贊，沒說不能評論，其實是可以評論的。知乎里一個帖子的字數(shù)都是比較多的，用戶只看到簡介就點贊或者評論沒有什么意義。后來我又去看了簡書，發(fā)現(xiàn)簡書是不支持用戶在沒有看完文章的情況下就支持點贊和評論的。

所以我不知道知乎這么做是出于什么考慮，反正我是沒弄曉暢。

3.舉動召喚語句

我們會碰到一些情況，不能使用配色，也不能使用icon樣式。例如，登錄界面中，我們盼望用戶的細致力在登錄按鈕上，所以下方的“忘掉密碼”和“快速注冊”我們要進行弱化。弱化了還能讓用戶認為你是可點擊的嗎？當然可以，只要你的筆墨舉動召喚一點，多使用動詞就可以了。

交互類筆墨和按鈕

其實我一向覺得設計師應該對每一個設計組件(元素)都做到充分了解。由于設計師的工作就是把那些元素以一種合理的體例放在一個界面(畫布)里。所以你必須要了解他們。這里給大家保舉一個網站設計組件，里面一些基本組件都有。

回到主題上來，交互類筆墨和按鈕其實有許多共同點。首先它們都支持點擊跳轉，也都可以展示狀況的切換。交互類筆墨與按鈕相比更加的輕量化，適用于極簡風格設計。但是按鈕也有本身的上風，按鈕可以展示復雜的動效。

迎接關注作者的微信公眾號：「王M爭」