本文編譯自Medium，作者是一位UX（User Experience，用戶體驗）設計師，他通過自己學習UI設計的過程，總結出7條實用的法則，為UI設計新手提供了寶貴的經驗。文章分為2個部分，前幾天分享了第一部分，今天是終結版，來學習咯！

第一部分：

實用UI設計法則（上）：http:///photoshop/jiaocheng/2014/135206.html

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

光線來自天空（第1部分）黑白優先（第1部分）增加空白空間（第1部分）學會在圖片上呈現文字做好強調和弱化只用合適的字體像藝術家一樣偷師

法則4：學會在圖片上呈現文字

在圖片上優雅地呈現文字并不容易，這里給出6種方法。

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

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

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

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

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

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

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

方法1：暗化整張圖片

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

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

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

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

方法2：給文字加個框

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

當然，你也可以放別的顏色，只是需要小心謹慎。

方法3：虛化圖片

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

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

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

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

方法4：底部褪色

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

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

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

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

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

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

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

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