實用UI設計法則（下）(2)

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

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

這可能是在圖片優(yōu)雅呈現文字最細微的一種方法。我還沒在別處見過，保存下來，說不定將來什么時候就用到了。

法則5：做好強調與弱化

把文字設計得又美觀又得體通常就是通過放大或縮小文字，做出反差的效果。

我認為，UI 設計最困難的地方就在于文字的裝飾，因為設計文字時需要考慮的因素太多了：

字號顏色字體粗細大小寫斜體字母間距頁邊空白（準確的說不是文字的一部分，但是容易影響閱讀時的注意力，所以也算在這個列表里了）

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

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

就我個人經驗來說，當我覺得一段文字設計的不好時，通常不是因為用了大寫字母，或者顏色太重，而是因為各種要素的搭配出了問題。

強調和弱化

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

增強可讀性的樣式：大字號、粗體、大寫等；減弱可讀性的樣式：小字號、與背景對比不明顯、空白較少等。

上圖“Material Design”這個標題就很突出：字號大、反襯明顯、字體較粗

上圖頁腳的字就是弱化處理的，字號小、反襯不明顯、字體較細

我認為文字設計的核心在于：

標題是唯一需要全部強調的元素，其它的部分則應該將強調與弱化結合使用。

如果網頁上某個元素需要強調，把強調和弱化結合在一起，可以避免整個頁面看起來太有壓迫感，同時又讓各個元素的呈現效果恰到好處。

下面這張 Blu Homes 的首頁堪稱是這方面的典范：上方文字較大，突出顯示，但是用了小寫字母。沒有給人強烈的壓迫感。

網頁上的數字字號較大，是網頁上的重要信息。但是請注意，數字的字體很細，與背景色對比也不明顯；而數字下方的單位雖然寫得很小，卻全部加粗，用大寫字母。

這就是設計中的平衡。

上面這張圖是 Contents Magazine 的網站，也是學習強調和弱化的一個好案例。

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

鼠標懸停或選中時的樣式

設計鼠標懸�；蜻x中時的樣式也是同樣的道理，只不過更難一些。

通常情況下，改變字體大小、大小寫、粗細時會改變文字所占空間的大小，讓人們理解鼠標正懸停在這里。

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

文字顏色背景色陰影下劃線細小的動畫——上升、下降等

這里再推薦一個比較普適的方法：給白色的元素上色；或者當背景顏色較深時，把有顏色的內容變成白色。

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

所以想開點吧，如果你設計出來的文字不好看，不要擔心，你需要不斷地提升自己的能力，讓自己變得更好。

法則6：只用合適的字體

有些字體很不錯，就用它們吧。

注意:這一部分沒有太多知識要學，我只是給你推薦一些好用的免費字體給你。

有的網站很有個性，會用到比較特別的字體。但是，大多數產品的 UI 設計只要保持干凈、簡潔就可以了。所以，把那些太花哨的字體放到一邊吧。

我在這里推薦一些免費的字體。因為這篇文章是為初學 UI 設計的人所寫，這些免費的字體完全夠用了。

我希望你把這些字體下載下來，在你開始項目設計之前，瀏覽一下它們。

以下是我推薦的字體：