本文編譯自Medium，作者是一位UX（User Experience, 用戶體驗(yàn))設(shè)計師，他通過自己學(xué)習(xí)UI設(shè)計的過程，總結(jié)出7條實(shí)用的法則，為UI設(shè)計新手提供了寶貴的經(jīng)驗(yàn)。文章分為2個部分，這里是第2部分。第1部分請移步：UI設(shè)計新手？試一試這7條法則（Part 1）

以下是 UI 設(shè)計入門你需要掌握的 7 條法則：

1. 光線來自天空（第1部分）
2. 黑白優(yōu)先（第1部分）
3. 增加空白空間（第1部分）
4. 學(xué)會在圖片上呈現(xiàn)文字
5. 做好強(qiáng)調(diào)和弱化
6. 只用合適的字體
7. 像藝術(shù)家一樣偷師

法則4：學(xué)會在圖片上呈現(xiàn)文字

在圖片上優(yōu)雅地呈現(xiàn)文字并不容易，這里給出6種方法。

如果你想要成為好的 UI 設(shè)計師，你必須學(xué)會在圖片上美觀地呈現(xiàn)文字。優(yōu)秀的設(shè)計師在這方面做得都不錯，而水平較低的設(shè)計師往往在這方面也比較差，甚至完全不會。在學(xué)習(xí)了這部分以后，相信你會有很大的提升。

方法0：直接在圖片上放文字

我很猶豫要不要講這種方法，因?yàn)閼?yīng)用起來十分困難。不過直接在圖片上放文字從技術(shù)上來說也是可行的，下面這個網(wǎng)站的首頁就很不錯，所以說說也無妨。

直接在圖片上放文字時，有幾點(diǎn)需要非常注意：

• 圖片應(yīng)該比較暗，而且顏色不能有太大的反差。
• 文字必須是白色的，我知道你也能找到用其它顏色的案例。但是我覺得，你最好還是用白色。
• 在不同屏幕，不同尺寸的窗口調(diào)試頁面，確保各種情況下文字都是清晰、易于辨識的。

上面這 3 個方面調(diào)整好就 OK 了，不要再做其它處理。

我自己從來沒有在任何專業(yè)的項(xiàng)目上直接把文字放在圖片上，這種方法是可行的，也能做出酷炫的效果，但還是小心點(diǎn)。

方法1：暗化整張圖片

可能在圖片上放文字最簡單的方法就是暗化整張圖片，如果原圖顏色不夠深，你可以用半透明的黑色在上面覆蓋一層，比如下面這個案例就加了一層不透明度 35% 的黑色。

如果你直接放原圖，底色太亮，和文字的反差不夠明顯，看不清文字。

類似的方法同樣適用于小圖。

加一層黑色是最簡單、普適性最強(qiáng)的。當(dāng)然你也可以用其它合適的顏色，比如這樣：

方法2：給文字加個框

這是一種簡單有效的方法。在白色文字下方加上一個略透明的黑色方塊，就可以放在各種各樣的圖片上了，而且顯示效果非常清晰。

當(dāng)然，你也可以放別的顏色，只是需要小心謹(jǐn)慎。

方法3：虛化圖片

虛化圖片是增加文字易讀性的好方法，把文字下方的圖片虛化了，同時把虛化部分亮度調(diào)低。

iOS 7 用毛玻璃的效果虛化了背景，而 Windows Vista 也使用了這種虛化效果。

虛化圖片的方法也有局限性，你需要確保在不同屏幕上圖片尺寸調(diào)整后，文字依然是在虛化的區(qū)域上的。

看看下面這個例子，你能看清小標(biāo)題嗎？真不知道這樣的設(shè)計是怎么通過審核上線的。

方法4：底部褪色

所謂底部褪色是將圖片的下邊緣變暗一些，然后在放上白色的文字。這是一種非常有獨(dú)創(chuàng)性的方法，我不知道在 Medium 之前有沒有人用過，但我是先在 Medium 上看到的。

乍一看，你可能覺得這就是把文字放在了圖片上。其實(shí)不然，圖片上有一些非常細(xì)微的變化，中間完全沒有黑色覆蓋，而底部有不透明度大約 20% 的黑色覆蓋在上面。

這樣的變化很難看出來，但確實(shí)存在，而且確實(shí)提高了文字的可辨認(rèn)性。

此外，Medium 還給文集圖片上的文字加了些許陰影，進(jìn)一步提高了文字的易讀性。最終的效果就是 Medium 可以把任何文字放在任何圖片上，閱讀體驗(yàn)非常好。

有人可能會問了，為什么是把圖片的底部變暗呢？為什么不能是圖片的其它區(qū)域？要回答這個問題，請看法則1：光線來自天空。光線從上面照下來，圖片的上方亮一些，而底部較暗，看起來更自然。

此外，你還可以把虛化和底部褪色結(jié)合起來，做出底部虛化的效果，比如下面這張圖的效果：

方法5：把圖片部分區(qū)域的光線變得更柔和

Elastica的博客的題圖并不是太暗，而且對比都較強(qiáng)。為什么文字的辨識度還這么高呢，就像下面兩張圖顯示的這樣：

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

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

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

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

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

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

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

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

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

就我個人經(jīng)驗(yàn)來說，當(dāng)我覺得一段文字設(shè)計的不好時，通常不是因?yàn)橛昧舜髮懽帜?，或者顏色太重，而是因?yàn)楦鞣N要素的搭配出了問題。

強(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”獨(dú)立出來，字號很小，與背景區(qū)分不明顯，但是用了大寫字母，字間距很大，文字外圍空白較多，當(dāng)你想要找它的時候一眼就能看見。

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

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

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

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

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

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

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

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

法則6：只用合適的字體

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

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

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

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

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

以下是我推薦的字體：

Ubuntu（上圖）——字體偏粗，對于有些 app 來說太張揚(yáng)了，但是對于大多數(shù) app 來說還是不錯的。在Google Fonts上可以找到。

Open Sans——非常易于辯讀，是一款很流行的字體，用在正文非常合適，在Google Fonts上也能找到。

Bebas Neue——適合作標(biāo)題，都是大寫字母，在Fontfabric上能找到，這個網(wǎng)站上還有一些 Bebas Neue 的應(yīng)用實(shí)例。

Montserrat——只有兩種粗細(xì)，但也足夠了。是 Gotham 和 Proximate Nova 最好的免費(fèi)替代品，但不如那兩種好。在Google Fonts上能找到。

Raleway——適合作標(biāo)題，但不適合用于正文。有一個極細(xì)的版本（上圖沒有展現(xiàn)），在Google Fonts可以找到。

Cabin——在Google Fonts可以找到。

Lato——在Google Fonts可以找到。

PT Sans——在Google Fonts可以找到。

Entypo Social——一個社交網(wǎng)絡(luò)圖標(biāo)集，在Entypo.com上能找到。

這里還有其它一些資源：

• Beautiful Google web fonts——有Google Fonts的運(yùn)用實(shí)例，我經(jīng)常在這里找靈感。
• FontSquiirrel——收集了不少可以免費(fèi)商用的好字體。
• Typekit——如果你用Adobe Creative Cloud（也就是用Photoshop或Illustrator等），你就可以從Typekit中獲得包括Proximate Nova在內(nèi)的大量字體。

法則7：像藝術(shù)家一樣偷師

我第一次坐下來試著設(shè)計按鈕、圖標(biāo)、彈窗等各個 app 元素時，我感到我對于什么是“好”知之甚少。但是我也很幸運(yùn)，我并不需要完全設(shè)計全新的 UI，因?yàn)橛泻芏鄡?yōu)秀的作品可以借鑒。

下面列出一些資源，肯定會對你的設(shè)計非常有用 (按照重要性從高到低排列)

1. Dribbble

這個專為設(shè)計師而做的網(wǎng)站集合了網(wǎng)上最好的 UI 設(shè)計作品，在 Dribbble 上你能找到幾乎各種類型的案例。

你可以關(guān)注一下我的dribbble作品集。下面是其他一些推薦給你關(guān)注的人：

• Victor Erixon——有著非常明顯的個人風(fēng)格，非常厲害。他的作品很漂亮、簡潔，扁平設(shè)計。他做 UI 設(shè)計師已經(jīng) 3 年了，是這方面數(shù)一數(shù)二的人才。

• Focus Lab——這些人是 Dribbble 中的名人，他們的作品非常多樣化，絕對是一流的。
  
• Cosmin Capitanu——他是個通才，做出來的東西很瘋狂，有未來感，但又不太花哨。他用色非常棒，但并不只專注做 UX 設(shè)計的。
  

2. Flat UI Pinboard

這里面有一些特別棒的手機(jī) UI 設(shè)計，你能找到很多精美的 UI 設(shè)計實(shí)例。

3. Pttrns

這里面有大量 app 截屏，它的一大好處在于，它是按照 UX 模式分類的，因此，你在搜索你手頭正在做的這一類作品時非常方便。

我堅(jiān)定地認(rèn)為每個藝術(shù)家初期都該像鸚鵡一樣，不斷的模仿和學(xué)習(xí)，直到能把頂尖的作品模仿得惟妙惟肖，然后再開始找到自己的風(fēng)格，引領(lǐng)新的潮流。

所以，像個藝術(shù)家一樣偷師吧！

總結(jié)

我之所以寫這篇文章，是因?yàn)槲液苓z憾自己當(dāng)初在學(xué) UI 設(shè)計時，沒有這樣的教程。我希望這篇文章能幫到你。如果你是一名 UX 設(shè)計師，在畫好框架和線框圖之后，做出個漂亮的實(shí)物模型吧。如果你是一名開發(fā)者，把你下一個項(xiàng)目做得更美觀一些吧。

UI 設(shè)計的學(xué)習(xí)不可能一蹴而就，而是需要不斷地觀察、模仿并且和他人交流。以上是到目前為止我所學(xué)到的，我也會保持著初學(xué)者的心態(tài)，繼續(xù)前進(jìn)。

原文來自：36KR

本文編譯自：medium.com