548
字體
幹貨 字體配色總結
《懂點設計》推薦文章
導讀：
1、本文將界麵中的文字分為標題、正文、提示和交互四類
2、這四類文字在配色上分別有哪些注意事項
.....
今天來給大家分享產品設計中文字配色的一些知識點。配色對於UI設計的重要性這裏我就不用再強調了，關於配色的文章我之前也寫了好幾篇。但是回頭看了一下，感覺總結的過於籠統，所以這次我把格局放小一點，專門來寫一篇關於文字配色的文章，希望大家看完能夠有所收獲。
那麼要給文字配色，首先我們要知道你的產品(界麵)中有哪些文字。在這裏，我將產品中的文字主要分為以下四種：標題類、正文類、提示類和交互類。
標題類
首先來說標題類，標題，顧名思義要讓用戶在短時間內了解界麵的大致內容，講究簡潔明了。在app中，標題類一般有的頂部欄標題，底部欄標題，列表標題、表單標題等。
給標題類文字配色相對來說比較簡單，選項比較少，我們一般隻會使用深灰色或者企業色。因為標題雖然很重要，但是也不能過於搶眼。
而根據重要性程度我們可以把標題分為不同的等級，一般來說，層級越低的標題顏色越淺。深淺的搭配可以給你的界麵帶來意想不到的效果。
例如，微信中的好友列表和聊天界麵中，用戶名和聊天記錄的文字顏色深淺正好是反過來的。這個其實也很好理解，好友列表中用戶關注的是好友是誰，而到了聊天界麵用戶更關注的是好友說了什麼。所以這裏用深淺不同的文字來幫助用戶加以區分。
我們可以看下使用同樣的配色的效果，感受一下不同。
ps.我不太建議給標題使用企業色，因為你要調整企業色的飽和度來區分不同的等級，個人覺得這樣不太合理。
此外如果標題體係過於繁雜，僅從顏色深淺已經無法讓用戶從視覺上進行識別。我們還可以用字號來幫助完成區分，事實上現在大多數產品都是通過字號的不同來完成等級區分的。
正文類
正文類文字是給用戶提供詳細說明和解釋的，正文類文字要比標題類要淺一些。一是因為用戶對於正文都不太感興趣，很少去讀，我們沒有必要在這裏使用配色來吸引他們的注意力。其二，因為正文字數一般比較多，過於花哨的配色會使整個界麵顯得淩亂，造成主次不分。
提示類
提示類文字顧名思義就是要給用戶以引導和提示。這個就意味著提示類文字要足夠的顯眼，如果用戶都注意不到你，還怎麼提示呢？
提示類文字一個主要用途就是給用戶展示當前的狀態。
我們來設想一個場景，你在一個理財平台上購買了一款理財產品。不同的時間段會有不同的狀態。你看到這款理財產品收益率不錯，投了3000元，這時的狀態是“確認中”；過了幾天這個產品開始起息就進入了“起息中”狀態；又過了一段時間，你臨時有事急需要用錢，就把產品轉讓給別人，又會依次進入“轉讓中”和“轉讓成功”。不同的狀態我們在設計上給用戶加以區分來幫助用戶進行更好的識別。一般常見的方法就是使用不同的配色來進行區分，但是這個是適用於產品狀態較少的情況。如果你的產品狀態過多，每一個狀態都配以一款顏色的話，那麼整個界麵就會顯得很亂。
最常見的狀態就是成功和失敗，一般來說在用戶心中都默認為綠色和紅色了。當然現在把企業色作為成功也很常見。這裏就會出現一個問題，如果你的產品主色調恰好是紅色，這個時候就可能會引起用戶混淆。
交互類
接下來，我們來談談交互類文字。交互類文字，簡單來說就是能夠讓用戶完成點擊操作的文字。交互類文字設計的首要目標是讓用戶覺得你的文字是可以點擊的。主要的辦法有三個:
1 使用配色
目前來說用戶覺得帶有顏色的字體都是可以點擊的，比如企業色。
當然如果你覺得界麵中企業色出現的過於頻繁，你還可以使用藍色。藍色在配色領域絕對是萬金油型的，不管你的產品界麵主色係是什麼，用戶一看到藍色文字就會明白是可以點擊的。
2 icon
文字加icon的組合也可以讓用戶產生點擊的欲望。以知乎為例，左邊的帖子用戶隻能看到答者和內容簡介，這裏的點讚和評論都是純文字，用戶無法直接進行點讚，但是點擊進去以後，是icon和文字的樣式，這裏用戶是可以直接進行點讚，評論，打賞和收藏。
ps.大家有沒有注意到上麵我隻提到不能點讚，沒說不能評論，其實是可以評論的。知乎裏一個帖子的字數都是比較多的，用戶隻看到簡介就點讚或者評論沒有什麼意義。後來我又去看了簡書，發現簡書是不支持用戶在沒有看完文章的情況下就支持點讚和評論的。
所以我不知道知乎這麼做是出於什麼考慮，反正我是沒弄明白。
3 行為召喚語句
我們會遇到一些情況，不能使用配色，也不能使用icon樣式。例如，登錄界麵中，我們希望用戶的注意力在登錄按鈕上，所以下方的“忘記密碼”和“快速注冊”我們要進行弱化。弱化了還能讓用戶認為你是可點擊的嗎？當然可以，隻要你的文字行為召喚一點，多使用動詞就可以了。
交互類文字和按鈕
其實我一直覺得設計師應該對每一個設計組件(元素)都做到充分了解。因為設計師的工作就是把那些元素以一種合理的方式放在一個界麵(畫布)裏。所以你必須要了解他們。這裏給大家推薦一個網站設計組件（https://element.eleme.io/#/zh-CN/component/select），裏麵一些基本組件都有。
回到主題上來，交互類文字和按鈕其實有很多共同點。首先它們都支持點擊跳轉，也都可以展示狀態的切換。交互類文字與按鈕相比更加的輕量化，適用於極簡風格設計。但是按鈕也有自己的優勢，按鈕可以展示複雜的動效。
點擊播放
GIF/227K
點擊播放
GIF/406K
總結
以上就是我對UI設計中主要文字配色的一些分析和總結，希望大家看完能夠有所幫助，有什麼想法也歡迎留言跟我交流。
作者：王M爭
《懂點設計》內容提供設計師之一
UI中國主頁：https://i.ui.cn/ucenter/129823.html
想查看他的更多幹貨內容，請訂閱《懂點設計》吧！
---關於我們---
UI中國 專業用戶體驗設計平台
新浪微博：@UI中國
最後更新：2017-10-23 20:27:33