超周全!UI設(shè)計(jì)中的字體配色方法總結(jié)
王M爭(zhēng): 今天來(lái)給大家分享產(chǎn)品設(shè)計(jì)中筆墨配色的一些知識(shí)點(diǎn)。要給筆墨配色,首先我們要知道你的產(chǎn)品(界面)中有哪些筆墨。在這里,我將產(chǎn)品中的筆墨重要分為以下四種:題目類、正文類、提醒類和交互類。
迎接關(guān)注作者的微信公眾號(hào):王M爭(zhēng)
題目類
首先來(lái)說(shuō)題目類,題目,顧名思義要讓用戶在短時(shí)間內(nèi)了解界面的大致內(nèi)容,講究簡(jiǎn)潔明了。在app中,題目類一樣平常有的頂部欄題目,底部欄題目,列表題目、表單題目等。
給題目類筆墨配色相對(duì)來(lái)說(shuō)比較簡(jiǎn)單,選項(xiàng)比較少,我們一樣平常只會(huì)使用深灰色或者企業(yè)色。由于題目雖然很緊張,但是也不能過(guò)于搶眼。
而根據(jù)緊張性程度我們可以把題目分為不同的等級(jí),一樣平常來(lái)說(shuō),層級(jí)越低的題目顏色越淺。深淺的搭配可以給你的界面帶來(lái)意想不到的結(jié)果。
例如,微信中的摯友列表和聊天界面中,用戶名和聊天記錄的筆墨顏色深淺恰好是反過(guò)來(lái)的。這個(gè)其實(shí)也很好理解,摯友列表中用戶關(guān)注的是摯友是誰(shuí),而到了聊天界面用戶更關(guān)注的是摯友說(shuō)了什么。所以這里用深淺不同的筆墨來(lái)幫助用戶加以區(qū)分。
我們可以看下使用同樣的配色的結(jié)果,感受一下不同。
我不太建議給題目使用企業(yè)色,由于你要調(diào)整企業(yè)色的飽和度來(lái)區(qū)分不同的等級(jí),小我覺(jué)得如許不太合理。
此外假如題目系統(tǒng)過(guò)于繁雜,僅從顏色深淺已經(jīng)無(wú)法讓用戶從視覺(jué)上進(jìn)行識(shí)別。我們還可以用字號(hào)來(lái)幫助完成區(qū)分,事實(shí)上如今大多數(shù)產(chǎn)品都是通過(guò)字號(hào)的不同來(lái)完成等級(jí)區(qū)分的。
正文類
正文類筆墨是給用戶提供細(xì)致說(shuō)明息爭(zhēng)釋的,正文類筆墨要比題目類要淺一些。一是由于用戶對(duì)于正文都不太感愛(ài)好,很少去讀,我們沒(méi)有需要在這里使用配色來(lái)吸引他們的細(xì)致力。其二,由于正筆墨數(shù)一樣平常比較多,過(guò)于花哨的配色會(huì)使整個(gè)界面顯得凌亂,造成主次不分。
提醒類
提醒類筆墨顧名思義就是要給用戶以指導(dǎo)和提醒。這個(gè)就意味著提醒類筆墨要充足的顯眼,假如用戶都細(xì)致不到你,還怎么提醒呢?
提醒類筆墨一個(gè)重要用途就是給用戶展示當(dāng)前的狀況。
我們來(lái)設(shè)想一個(gè)場(chǎng)景,你在一個(gè)理財(cái)平臺(tái)上購(gòu)買了一款理財(cái)產(chǎn)品。不同的時(shí)間段會(huì)有不同的狀況。你看到這款理財(cái)產(chǎn)品收益率不錯(cuò),投了3000元,這時(shí)的狀況是“確認(rèn)中”;過(guò)了幾天這個(gè)產(chǎn)品開(kāi)始起息就進(jìn)入了“起息中”狀況;又過(guò)了一段時(shí)間,你一時(shí)有事急必要用錢,就把產(chǎn)品轉(zhuǎn)讓給別人,又會(huì)依次進(jìn)入“轉(zhuǎn)讓中”和“轉(zhuǎn)讓成功”。不同的狀況我們?cè)谠O(shè)計(jì)上給用戶加以區(qū)分來(lái)幫助用戶進(jìn)行更好的識(shí)別。一樣平常常見(jiàn)的方法就是使用不同的配色來(lái)進(jìn)行區(qū)分,但是這個(gè)是適用于產(chǎn)品狀況較少的情況。假如你的產(chǎn)品狀況過(guò)多,每一個(gè)狀況都配以一款顏色的話,那么整個(gè)界面就會(huì)顯得很亂。
最常見(jiàn)的狀況就是成功和失敗,一樣平常來(lái)說(shuō)在用戶心中都默認(rèn)為綠色和紅色了。當(dāng)然如今把企業(yè)色作為成功也很常見(jiàn)。這里就會(huì)出現(xiàn)一個(gè)題目,假如你的產(chǎn)品主色調(diào)正好是紅色,這個(gè)時(shí)候就可能會(huì)引起用戶混淆。
交互類
接下來(lái),我們來(lái)談?wù)劷换ヮ惞P墨。交互類筆墨,簡(jiǎn)單來(lái)說(shuō)就是能夠讓用戶完成點(diǎn)擊操作的筆墨。交互類筆墨設(shè)計(jì)的首要目標(biāo)是讓用戶覺(jué)得你的筆墨是可以點(diǎn)擊的。重要的辦法有三個(gè):
1.使用配色
目前來(lái)說(shuō)用戶覺(jué)得帶有顏色的字體都是可以點(diǎn)擊的,比如企業(yè)色。
當(dāng)然假如你覺(jué)得界面中企業(yè)色出現(xiàn)的過(guò)于頻繁,你還可以使用藍(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.大家有沒(méi)有細(xì)致到上面我只提到不能點(diǎn)贊,沒(méi)說(shuō)不能評(píng)論,其實(shí)是可以評(píng)論的。知乎里一個(gè)帖子的字?jǐn)?shù)都是比較多的,用戶只看到簡(jiǎn)介就點(diǎn)贊或者評(píng)論沒(méi)有什么意義。后來(lái)我又去看了簡(jiǎn)書,發(fā)現(xiàn)簡(jiǎn)書是不支持用戶在沒(méi)有看完文章的情況下就支持點(diǎn)贊和評(píng)論的。
所以我不知道知乎這么做是出于什么考慮,反正我是沒(méi)弄曉暢。
3.舉動(dòng)召喚語(yǔ)句
我們會(huì)碰到一些情況,不能使用配色,也不能使用icon樣式。例如,登錄界面中,我們盼望用戶的細(xì)致力在登錄按鈕上,所以下方的“忘掉密碼”和“快速注冊(cè)”我們要進(jìn)行弱化。弱化了還能讓用戶認(rèn)為你是可點(diǎn)擊的嗎?當(dāng)然可以,只要你的筆墨舉動(dòng)召喚一點(diǎn),多使用動(dòng)詞就可以了。
交互類筆墨和按鈕
其實(shí)我一向覺(jué)得設(shè)計(jì)師應(yīng)該對(duì)每一個(gè)設(shè)計(jì)組件(元素)都做到充分了解。由于設(shè)計(jì)師的工作就是把那些元素以一種合理的體例放在一個(gè)界面(畫布)里。所以你必須要了解他們。這里給大家保舉一個(gè)網(wǎng)站設(shè)計(jì)組件,里面一些基本組件都有。
回到主題上來(lái),交互類筆墨和按鈕其實(shí)有許多共同點(diǎn)。首先它們都支持點(diǎn)擊跳轉(zhuǎn),也都可以展示狀況的切換。交互類筆墨與按鈕相比更加的輕量化,適用于極簡(jiǎn)風(fēng)格設(shè)計(jì)。但是按鈕也有本身的上風(fēng),按鈕可以展示復(fù)雜的動(dòng)效。
迎接關(guān)注作者的微信公眾號(hào):「王M爭(zhēng)」
本文地址:http://pkvc.cn/tutorial/di3862.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏