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

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

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

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

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

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

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

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

現(xiàn)場獲獎讀者與電子工業(yè)出版社少兒與數(shù)字創(chuàng)意出版分社副社長何鄭燕合影

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

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

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

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

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

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

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

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

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

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

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

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

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

以下是我推薦的字體：

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

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

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

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

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

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

   在《攝影的骨頭：高品質(zhì)數(shù)碼攝影流程》及《通往獨立之路：攝影師生存手冊》上市之際，電子工業(yè)出版社特別邀請作者趙嘉分別在6月15日和16日下午分別在三里屯佳能公司展廳及798映藝術(shù)中心舉辦了兩場讀者見面。

   在見面會上，趙嘉老師向廣大讀者講述了趙嘉及愛攝影工社圖書創(chuàng)作歷程，，頂級鏡頭在數(shù)碼時代的發(fā)展，同時分別與業(yè)界精英討論了高品質(zhì)數(shù)碼攝影流程的方方面面，包括前期拍攝，重印及色彩管理，后期圖片處理的要點分析，還向讀者介紹了攝影的分類、編輯類攝影進行探討，雜志需要圖片的標(biāo)準(zhǔn)、圖片庫攝影及法律的相關(guān)內(nèi)容還有公關(guān)攝影現(xiàn)狀，圖片市場的發(fā)展以及畫廊展覽和攝影類圖書出版等等內(nèi)容進行討論，兩場見面會現(xiàn)場都與讀者開展了深入的交流，現(xiàn)場氣氛熱烈，相信通過兩場交流，大家都會對數(shù)碼攝影流程以及攝影師生存形成有力的指導(dǎo)！

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

第一部分：

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

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

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

方法3：虛化圖片

這里還有其它一些資源：

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

1. Dribbble

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

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

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

方法2：給文字加個框

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

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

   感謝業(yè)界媒體對本次活動的大力支持！

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

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

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

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

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

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

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