轉(zhuǎn)自：王M爭（ID：Wang-Michael-Zheng）
作者：王M爭
今天來給大家分享產(chǎn)品設(shè)計中文字配色的一些知識點姑丑。配色對于UI設(shè)計的重要性這里我就不用再強調(diào)了嘁灯，關(guān)于配色的文章我之前也寫了好幾篇。但是回頭看了一下靶病，感覺總結(jié)的過于籠統(tǒng)会通，所以這次我把格局放小一點，專門來寫一篇關(guān)于文字配色的文章娄周，希望大家看完能夠有所收獲涕侈。
那么要給文字配色，首先我們要知道你的產(chǎn)品(界面)中有哪些文字煤辨。在這里裳涛，我將產(chǎn)品中的文字主要分為以下四種：標(biāo)題類、正文類众辨、提示類和交互類端三。
標(biāo)題類
首先來說標(biāo)題類，標(biāo)題鹃彻，顧名思義要讓用戶在短時間內(nèi)了解界面的大致內(nèi)容郊闯，講究簡潔明了。在app中蛛株，標(biāo)題類一般有的頂部欄標(biāo)題团赁，底部欄標(biāo)題，列表標(biāo)題谨履、表單標(biāo)題等欢摄。
給標(biāo)題類文字配色相對來說比較簡單，選項比較少屉符，我們一般只會使用深灰色或者企業(yè)色剧浸。因為標(biāo)題雖然很重要锹引，但是也不能過于搶眼矗钟。
而根據(jù)重要性程度我們可以把標(biāo)題分為不同的等級唆香，一般來說，層級越低的標(biāo)題顏色越淺吨艇。深淺的搭配可以給你的界面帶來意想不到的效果躬它。
例如，微信中的好友列表和聊天界面中东涡，用戶名和聊天記錄的文字顏色深淺正好是反過來的冯吓。這個其實也很好理解，好友列表中用戶關(guān)注的是好友是誰疮跑，而到了聊天界面用戶更關(guān)注的是好友說了什么组贺。所以這里用深淺不同的文字來幫助用戶加以區(qū)分。
我們可以看下使用同樣的配色的效果祖娘，感受一下不同失尖。
ps.我不太建議給標(biāo)題使用企業(yè)色，因為你要調(diào)整企業(yè)色的飽和度來區(qū)分不同的等級渐苏，個人覺得這樣不太合理掀潮。
此外如果標(biāo)題體系過于繁雜，僅從顏色深淺已經(jīng)無法讓用戶從視覺上進(jìn)行識別琼富。我們還可以用字號來幫助完成區(qū)分仪吧，事實上現(xiàn)在大多數(shù)產(chǎn)品都是通過字號的不同來完成等級區(qū)分的。
正文類
正文類文字是給用戶提供詳細(xì)說明和解釋的鞠眉，正文類文字要比標(biāo)題類要淺一些薯鼠。一是因為用戶對于正文都不太感興趣，很少去讀械蹋，我們沒有必要在這里使用配色來吸引他們的注意力人断。其二，因為正文字?jǐn)?shù)一般比較多朝蜘，過于花哨的配色會使整個界面顯得凌亂恶迈，造成主次不分。
提示類
提示類文字顧名思義就是要給用戶以引導(dǎo)和提示谱醇。這個就意味著提示類文字要足夠的顯眼暇仲，如果用戶都注意不到你，還怎么提示呢副渴？
提示類文字一個主要用途就是給用戶展示當(dāng)前的狀態(tài)奈附。
我們來設(shè)想一個場景，你在一個理財平臺上購買了一款理財產(chǎn)品煮剧。不同的時間段會有不同的狀態(tài)斥滤。你看到這款理財產(chǎn)品收益率不錯将鸵，投了3000元，這時的狀態(tài)是“確認(rèn)中”佑颇；過了幾天這個產(chǎn)品開始起息就進(jìn)入了“起息中”狀態(tài)顶掉；又過了一段時間，你臨時有事急需要用錢挑胸，就把產(chǎn)品轉(zhuǎn)讓給別人痒筒，又會依次進(jìn)入“轉(zhuǎn)讓中”和“轉(zhuǎn)讓成功”。不同的狀態(tài)我們在設(shè)計上給用戶加以區(qū)分來幫助用戶進(jìn)行更好的識別茬贵。一般常見的方法就是使用不同的配色來進(jìn)行區(qū)分簿透，但是這個是適用于產(chǎn)品狀態(tài)較少的情況。如果你的產(chǎn)品狀態(tài)過多解藻，每一個狀態(tài)都配以一款顏色的話老充，那么整個界面就會顯得很亂。
最常見的狀態(tài)就是成功和失敗螟左，一般來說在用戶心中都默認(rèn)為綠色和紅色了啡浊。當(dāng)然現(xiàn)在把企業(yè)色作為成功也很常見。這里就會出現(xiàn)一個問題路狮，如果你的產(chǎn)品主色調(diào)恰好是紅色虫啥，這個時候就可能會引起用戶混淆。
交互類
接下來奄妨，我們來談?wù)劷换ヮ愇淖滞孔选＝换ヮ愇淖郑唵蝸碚f就是能夠讓用戶完成點擊操作的文字砸抛。交互類文字設(shè)計的首要目標(biāo)是讓用戶覺得你的文字是可以點擊的评雌。主要的辦法有三個:
1 使用配色
目前來說用戶覺得帶有顏色的字體都是可以點擊的，比如企業(yè)色直焙。
當(dāng)然如果你覺得界面中企業(yè)色出現(xiàn)的過于頻繁景东，你還可以使用藍(lán)色。藍(lán)色在配色領(lǐng)域絕對是萬金油型的奔誓，不管你的產(chǎn)品界面主色系是什么斤吐，用戶一看到藍(lán)色文字就會明白是可以點擊的。
2 icon
文字加icon的組合也可以讓用戶產(chǎn)生點擊的欲望厨喂。以知乎為例和措，左邊的帖子用戶只能看到答者和內(nèi)容簡介，這里的點贊和評論都是純文字蜕煌，用戶無法直接進(jìn)行點贊派阱，但是點擊進(jìn)去以后，是icon和文字的樣式斜纪，這里用戶是可以直接進(jìn)行點贊贫母，評論文兑，打賞和收藏。
ps.大家有沒有注意到上面我只提到不能點贊腺劣，沒說不能評論绿贞，其實是可以評論的。知乎里一個帖子的字?jǐn)?shù)都是比較多的誓酒，用戶只看到簡介就點贊或者評論沒有什么意義樟蠕。后來我又去看了簡書贮聂，發(fā)現(xiàn)簡書是不支持用戶在沒有看完文章的情況下就支持點贊和評論的靠柑。
所以我不知道知乎這么做是出于什么考慮，反正我是沒弄明白吓懈。
3 行為召喚語句
我們會遇到一些情況歼冰，不能使用配色，也不能使用icon樣式耻警。例如隔嫡，登錄界面中，我們希望用戶的注意力在登錄按鈕上甘穿，所以下方的“忘記密碼”和“快速注冊”我們要進(jìn)行弱化腮恩。弱化了還能讓用戶認(rèn)為你是可點擊的嗎？當(dāng)然可以温兼，只要你的文字行為召喚一點秸滴，多使用動詞就可以了。
交互類文字和按鈕
其實我一直覺得設(shè)計師應(yīng)該對每一個設(shè)計組件(元素)都做到充分了解募判。因為設(shè)計師的工作就是把那些元素以一種合理的方式放在一個界面(畫布)里荡含。所以你必須要了解他們。這里給大家推薦一個網(wǎng)站届垫，里面一些基本組件都有释液。
http://element.eleme.io/#/zh-CN/component/layout
回到主題上來，交互類文字和按鈕其實有很多共同點装处。首先它們都支持點擊跳轉(zhuǎn)误债，也都可以展示狀態(tài)的切換。交互類文字與按鈕相比更加的輕量化妄迁，適用于極簡風(fēng)格設(shè)計寝蹈。但是按鈕也有自己的優(yōu)勢，按鈕可以展示復(fù)雜的動效判族。
總結(jié)
以上就是我對UI設(shè)計中主要文字配色的一些分析和總結(jié)躺盛，希望大家看完能夠有所幫助，有什么想法也歡迎留言跟我交流形帮。
