【轉(zhuǎn)載】字體配色總結(jié)

今天來(lái)給大家分享產(chǎn)品設(shè)計(jì)中文字配色的一些知識(shí)點(diǎn)。配色對(duì)于UI設(shè)計(jì)的重要性這里我就不用再?gòu)?qiáng)調(diào)了黔姜,關(guān)于配色的文章我之前也寫了好幾篇。但是回頭看了一下蒂萎,感覺總結(jié)的過于籠統(tǒng)秆吵,所以這次我把格局放小一點(diǎn),專門來(lái)寫一篇關(guān)于文字配色的文章五慈,希望大家看完能夠有所收獲纳寂。

那么要給文字配色,首先我們要知道你的產(chǎn)品(界面)中有哪些文字泻拦。在這里毙芜,我將產(chǎn)品中的文字主要分為以下四種:標(biāo)題類、正文類聪轿、提示類和交互類爷肝。

標(biāo)題類

首先來(lái)說(shuō)標(biāo)題類,標(biāo)題,顧名思義要讓用戶在短時(shí)間內(nèi)了解界面的大致內(nèi)容灯抛,講究簡(jiǎn)潔明了金赦。在app中,標(biāo)題類一般有的頂部欄標(biāo)題对嚼,底部欄標(biāo)題夹抗,列表標(biāo)題、表單標(biāo)題等纵竖。

給標(biāo)題類文字配色相對(duì)來(lái)說(shuō)比較簡(jiǎn)單漠烧,選項(xiàng)比較少,我們一般只會(huì)使用深灰色或者企業(yè)色靡砌。因?yàn)闃?biāo)題雖然很重要已脓,但是也不能過于搶眼。

而根據(jù)重要性程度我們可以把標(biāo)題分為不同的等級(jí)通殃,一般來(lái)說(shuō)度液,層級(jí)越低的標(biāo)題顏色越淺。深淺的搭配可以給你的界面帶來(lái)意想不到的效果画舌。

例如堕担,微信中的好友列表和聊天界面中,用戶名和聊天記錄的文字顏色深淺正好是反過來(lái)的曲聂。這個(gè)其實(shí)也很好理解霹购,好友列表中用戶關(guān)注的是好友是誰(shuí),而到了聊天界面用戶更關(guān)注的是好友說(shuō)了什么朋腋。所以這里用深淺不同的文字來(lái)幫助用戶加以區(qū)分齐疙。

我們可以看下使用同樣的配色的效果,感受一下不同乍丈。

ps.我不太建議給標(biāo)題使用企業(yè)色剂碴,因?yàn)槟阋{(diào)整企業(yè)色的飽和度來(lái)區(qū)分不同的等級(jí),個(gè)人覺得這樣不太合理轻专。

此外如果標(biāo)題體系過于繁雜,僅從顏色深淺已經(jīng)無(wú)法讓用戶從視覺上進(jìn)行識(shí)別察蹲。我們還可以用字號(hào)來(lái)幫助完成區(qū)分请垛,事實(shí)上現(xiàn)在大多數(shù)產(chǎn)品都是通過字號(hào)的不同來(lái)完成等級(jí)區(qū)分的。

正文類

正文類文字是給用戶提供詳細(xì)說(shuō)明和解釋的洽议,正文類文字要比標(biāo)題類要淺一些宗收。一是因?yàn)橛脩魧?duì)于正文都不太感興趣,很少去讀亚兄,我們沒有必要在這里使用配色來(lái)吸引他們的注意力混稽。其二,因?yàn)檎淖謹(jǐn)?shù)一般比較多,過于花哨的配色會(huì)使整個(gè)界面顯得凌亂匈勋,造成主次不分礼旅。

提示類

提示類文字顧名思義就是要給用戶以引導(dǎo)和提示。這個(gè)就意味著提示類文字要足夠的顯眼洽洁,如果用戶都注意不到你痘系,還怎么提示呢?

提示類文字一個(gè)主要用途就是給用戶展示當(dāng)前的狀態(tài)饿自。

我們來(lái)設(shè)想一個(gè)場(chǎng)景汰翠,你在一個(gè)理財(cái)平臺(tái)上購(gòu)買了一款理財(cái)產(chǎn)品。不同的時(shí)間段會(huì)有不同的狀態(tài)昭雌。你看到這款理財(cái)產(chǎn)品收益率不錯(cuò)复唤,投了3000元,這時(shí)的狀態(tài)是“確認(rèn)中”烛卧;過了幾天這個(gè)產(chǎn)品開始起息就進(jìn)入了“起息中”狀態(tài)佛纫;又過了一段時(shí)間,你臨時(shí)有事急需要用錢唱星,就把產(chǎn)品轉(zhuǎn)讓給別人雳旅,又會(huì)依次進(jìn)入“轉(zhuǎn)讓中”和“轉(zhuǎn)讓成功”。不同的狀態(tài)我們?cè)谠O(shè)計(jì)上給用戶加以區(qū)分來(lái)幫助用戶進(jìn)行更好的識(shí)別间聊。一般常見的方法就是使用不同的配色來(lái)進(jìn)行區(qū)分攒盈,但是這個(gè)是適用于產(chǎn)品狀態(tài)較少的情況。如果你的產(chǎn)品狀態(tài)過多哎榴,每一個(gè)狀態(tài)都配以一款顏色的話型豁,那么整個(gè)界面就會(huì)顯得很亂。

最常見的狀態(tài)就是成功和失敗尚蝌,一般來(lái)說(shuō)在用戶心中都默認(rèn)為綠色和紅色了迎变。當(dāng)然現(xiàn)在把企業(yè)色作為成功也很常見。這里就會(huì)出現(xiàn)一個(gè)問題飘言,如果你的產(chǎn)品主色調(diào)恰好是紅色衣形,這個(gè)時(shí)候就可能會(huì)引起用戶混淆。

交互類

接下來(lái)姿鸿,我們來(lái)談?wù)劷换ヮ愇淖肿晃狻=换ヮ愇淖郑?jiǎn)單來(lái)說(shuō)就是能夠讓用戶完成點(diǎn)擊操作的文字苛预。交互類文字設(shè)計(jì)的首要目標(biāo)是讓用戶覺得你的文字是可以點(diǎn)擊的句狼。主要的辦法有三個(gè):

1 使用配色

目前來(lái)說(shuō)用戶覺得帶有顏色的字體都是可以點(diǎn)擊的,比如企業(yè)色热某。

當(dāng)然如果你覺得界面中企業(yè)色出現(xiàn)的過于頻繁腻菇,你還可以使用藍(lán)色胳螟。藍(lán)色在配色領(lǐng)域絕對(duì)是萬(wàn)金油型的,不管你的產(chǎn)品界面主色系是什么筹吐,用戶一看到藍(lán)色文字就會(huì)明白是可以點(diǎn)擊的糖耸。

2 icon

文字加icon的組合也可以讓用戶產(chǎn)生點(diǎn)擊的欲望。以知乎為例骏令,左邊的帖子用戶只能看到答者和內(nèi)容簡(jiǎn)介蔬捷,這里的點(diǎn)贊和評(píng)論都是純文字,用戶無(wú)法直接進(jìn)行點(diǎn)贊榔袋,但是點(diǎn)擊進(jìn)去以后周拐,是icon和文字的樣式,這里用戶是可以直接進(jìn)行點(diǎn)贊凰兑,評(píng)論妥粟,打賞和收藏。

ps.大家有沒有注意到上面我只提到不能點(diǎn)贊吏够,沒說(shuō)不能評(píng)論勾给,其實(shí)是可以評(píng)論的。知乎里一個(gè)帖子的字?jǐn)?shù)都是比較多的锅知,用戶只看到簡(jiǎn)介就點(diǎn)贊或者評(píng)論沒有什么意義播急。后來(lái)我又去看了簡(jiǎn)書,發(fā)現(xiàn)簡(jiǎn)書是不支持用戶在沒有看完文章的情況下就支持點(diǎn)贊和評(píng)論的售睹。

所以我不知道知乎這么做是出于什么考慮桩警,反正我是沒弄明白。

3 行為召喚語(yǔ)句

我們會(huì)遇到一些情況昌妹,不能使用配色捶枢,也不能使用icon樣式。例如飞崖,登錄界面中烂叔,我們希望用戶的注意力在登錄按鈕上,所以下方的“忘記密碼”和“快速注冊(cè)”我們要進(jìn)行弱化固歪。弱化了還能讓用戶認(rèn)為你是可點(diǎn)擊的嗎蒜鸡?當(dāng)然可以,只要你的文字行為召喚一點(diǎn)牢裳,多使用動(dòng)詞就可以了术瓮。

交互類文字和按鈕

其實(shí)我一直覺得設(shè)計(jì)師應(yīng)該對(duì)每一個(gè)設(shè)計(jì)組件(元素)都做到充分了解。因?yàn)樵O(shè)計(jì)師的工作就是把那些元素以一種合理的方式放在一個(gè)界面(畫布)里贰健。所以你必須要了解他們。這里給大家推薦一個(gè)網(wǎng)站設(shè)計(jì)組件恬汁,里面一些基本組件都有伶椿。

回到主題上來(lái)辜伟,交互類文字和按鈕其實(shí)有很多共同點(diǎn)。首先它們都支持點(diǎn)擊跳轉(zhuǎn)脊另,也都可以展示狀態(tài)的切換导狡。交互類文字與按鈕相比更加的輕量化,適用于極簡(jiǎn)風(fēng)格設(shè)計(jì)偎痛。但是按鈕也有自己的優(yōu)勢(shì)旱捧,按鈕可以展示復(fù)雜的動(dòng)效。

總結(jié)

以上就是我對(duì)UI設(shè)計(jì)中主要文字配色的一些分析和總結(jié)踩麦,希望大家看完能夠有所幫助枚赡,有什么想法也歡迎留言跟我交流。

-----------------------------------------------------------------------------------------------

知行辦公谓谦,專業(yè)移動(dòng)辦公平臺(tái)https://zx.naton.cn/

原創(chuàng)團(tuán)隊(duì)

【總監(jiān)】十二春秋之贫橙,3483099@qq.com;

【Master】zelo反粥,616701261@qq.com卢肃;【運(yùn)營(yíng)】運(yùn)維艄公,897221533@qq.com才顿;

【產(chǎn)品設(shè)計(jì)】流浪貓莫湘,364994559@qq.com;【體驗(yàn)設(shè)計(jì)】兜兜2435632247@qq.com郑气;

【iOS】淘碼小工幅垮,492395860@qq.com;iMcG33K竣贪,imcg33k@gmail.com军洼;

【Android】人猿居士,1059604515@qq.com演怎;思路的頓悟匕争,1217022114@qq.com;

【java】首席工程師MR_W爷耀,feixue300@qq.com甘桑;【測(cè)試】土鏡問道,847071279@qq.com歹叮;

【數(shù)據(jù)】fox009521跑杭,42151960@qq.com;【安全】保密咆耿,你懂的德谅。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市萨螺,隨后出現(xiàn)的幾起案子窄做,更是在濱河造成了極大的恐慌愧驱,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件椭盏,死亡現(xiàn)場(chǎng)離奇詭異组砚,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)掏颊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門糟红,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人乌叶,你說(shuō)我怎么就攤上這事盆偿。” “怎么了枉昏?”我有些...
    開封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵陈肛,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我兄裂,道長(zhǎng)句旱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任晰奖,我火速辦了婚禮谈撒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘匾南。我一直安慰自己啃匿,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開白布蛆楞。 她就那樣靜靜地躺著溯乒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪豹爹。 梳的紋絲不亂的頭發(fā)上裆悄,一...
    開封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音臂聋,去河邊找鬼光稼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛孩等,可吹牛的內(nèi)容都是我干的艾君。 我是一名探鬼主播,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼肄方,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼冰垄!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起权她,我...
    開封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤播演,失蹤者是張志新(化名)和其女友劉穎冀瓦,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體写烤,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年拾徙,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了洲炊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡尼啡,死狀恐怖暂衡,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情崖瞭,我是刑警寧澤狂巢,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站书聚,受9級(jí)特大地震影響唧领,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜雌续,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一斩个、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧驯杜,春花似錦受啥、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至顽频,卻和暖如春藤肢,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背冲九。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工谤草, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人莺奸。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓丑孩,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親灭贷。 傳聞我的和親對(duì)象是個(gè)殘疾皇子温学,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容