當(dāng)前位置：首頁>ps入門教程>ps基礎(chǔ)教程>設(shè)計知識>教程內(nèi)容

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

來源：medium 作者：36kr 學(xué)習(xí)：4840人次

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

鼠標(biāo)懸停或選中時的樣式

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

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

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

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

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