實(shí)用UI設(shè)計(jì)法則（下）(2)

這里實(shí)際上是把圖片局部區(qū)域的光線變得更柔和，突出了文字。如果我們?cè)跒g覽器上縮小 Elastica 博客，會(huì)看出到底發(fā)生了什么。

在圖片左下角有一塊陰影區(qū)域，文字置于其上，就很容易辨認(rèn)了。

這可能是在圖片優(yōu)雅呈現(xiàn)文字最細(xì)微的一種方法。我還沒(méi)在別處見(jiàn)過(guò)，保存下來(lái)，說(shuō)不定將來(lái)什么時(shí)候就用到了。

法則5：做好強(qiáng)調(diào)與弱化

把文字設(shè)計(jì)得又美觀又得體通常就是通過(guò)放大或縮小文字，做出反差的效果。

我認(rèn)為，UI 設(shè)計(jì)最困難的地方就在于文字的裝飾，因?yàn)樵O(shè)計(jì)文字時(shí)需要考慮的因素太多了：

字號(hào)顏色字體粗細(xì)大小寫(xiě)斜體字母間距頁(yè)邊空白（準(zhǔn)確的說(shuō)不是文字的一部分，但是容易影響閱讀時(shí)的注意力，所以也算在這個(gè)列表里了）

還有其它一些方法調(diào)整文字吸引讀者的注意力，但是不常用，也不推薦你使用。

下劃線。下劃線現(xiàn)在基本上等同于超鏈接了，我覺(jué)得你還是不要挑戰(zhàn)人們的常識(shí)比較好。文字背景色。這個(gè)有時(shí)候也被當(dāng)作超鏈接，只不過(guò)不是那么常見(jiàn)。刪除線。一邊待著去吧，你這個(gè)怪人。

就我個(gè)人經(jīng)驗(yàn)來(lái)說(shuō)，當(dāng)我覺(jué)得一段文字設(shè)計(jì)的不好時(shí)，通常不是因?yàn)橛昧舜髮?xiě)字母，或者顏色太重，而是因?yàn)楦鞣N要素的搭配出了問(wèn)題。

強(qiáng)調(diào)和弱化

你可以把所有的文字樣式分成兩類：

增強(qiáng)可讀性的樣式：大字號(hào)、粗體、大寫(xiě)等；減弱可讀性的樣式：小字號(hào)、與背景對(duì)比不明顯、空白較少等。

上圖“Material Design”這個(gè)標(biāo)題就很突出：字號(hào)大、反襯明顯、字體較粗

上圖頁(yè)腳的字就是弱化處理的，字號(hào)小、反襯不明顯、字體較細(xì)

我認(rèn)為文字設(shè)計(jì)的核心在于：

標(biāo)題是唯一需要全部強(qiáng)調(diào)的元素，其它的部分則應(yīng)該將強(qiáng)調(diào)與弱化結(jié)合使用。

如果網(wǎng)頁(yè)上某個(gè)元素需要強(qiáng)調(diào)，把強(qiáng)調(diào)和弱化結(jié)合在一起，可以避免整個(gè)頁(yè)面看起來(lái)太有壓迫感，同時(shí)又讓各個(gè)元素的呈現(xiàn)效果恰到好處。

下面這張 Blu Homes 的首頁(yè)堪稱是這方面的典范：上方文字較大，突出顯示，但是用了小寫(xiě)字母。沒(méi)有給人強(qiáng)烈的壓迫感。

網(wǎng)頁(yè)上的數(shù)字字號(hào)較大，是網(wǎng)頁(yè)上的重要信息。但是請(qǐng)注意，數(shù)字的字體很細(xì)，與背景色對(duì)比也不明顯；而數(shù)字下方的單位雖然寫(xiě)得很小，卻全部加粗，用大寫(xiě)字母。

這就是設(shè)計(jì)中的平衡。

上面這張圖是 Contents Magazine 的網(wǎng)站，也是學(xué)習(xí)強(qiáng)調(diào)和弱化的一個(gè)好案例。

文章標(biāo)題是唯一沒(méi)有用斜體的部分，而且還做了加粗處理，更容易吸引讀者的關(guān)注。作者姓名寫(xiě)在文章標(biāo)題下方，字體加粗，與沒(méi)有加粗的”by“區(qū)分開(kāi)來(lái)。“ALREADY OUT”獨(dú)立出來(lái)，字號(hào)很小，與背景區(qū)分不明顯，但是用了大寫(xiě)字母，字間距很大，文字外圍空白較多，當(dāng)你想要找它的時(shí)候一眼就能看見(jiàn)。

鼠標(biāo)懸�；蜻x中時(shí)的樣式

設(shè)計(jì)鼠標(biāo)懸�；蜻x中時(shí)的樣式也是同樣的道理，只不過(guò)更難一些。

通常情況下，改變字體大小、大小寫(xiě)、粗細(xì)時(shí)會(huì)改變文字所占空間的大小，讓人們理解鼠標(biāo)正懸停在這里。

此外，下面這些要素也能夠影響人們的感受：

文字顏色背景色陰影下劃線細(xì)小的動(dòng)畫(huà)——上升、下降等

這里再推薦一個(gè)比較普適的方法：給白色的元素上色；或者當(dāng)背景顏色較深時(shí)，把有顏色的內(nèi)容變成白色。

裝飾文字是非常難的，但是每當(dāng)我感到“這些文字不可能再變好看時(shí)”，我的判斷都是錯(cuò)的。我需要做的就是不斷優(yōu)化，不斷嘗試。

所以想開(kāi)點(diǎn)吧，如果你設(shè)計(jì)出來(lái)的文字不好看，不要擔(dān)心，你需要不斷地提升自己的能力，讓自己變得更好。

法則6：只用合適的字體

有些字體很不錯(cuò)，就用它們吧。

注意:這一部分沒(méi)有太多知識(shí)要學(xué)，我只是給你推薦一些好用的免費(fèi)字體給你。

有的網(wǎng)站很有個(gè)性，會(huì)用到比較特別的字體。但是，大多數(shù)產(chǎn)品的 UI 設(shè)計(jì)只要保持干凈、簡(jiǎn)潔就可以了。所以，把那些太花哨的字體放到一邊吧。

我在這里推薦一些免費(fèi)的字體。因?yàn)檫@篇文章是為初學(xué) UI 設(shè)計(jì)的人所寫(xiě)，這些免費(fèi)的字體完全夠用了。

我希望你把這些字體下載下來(lái)，在你開(kāi)始項(xiàng)目設(shè)計(jì)之前，瀏覽一下它們。

以下是我推薦的字體：