實用UI設計法則（下）

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

第一部分：

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

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

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

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

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

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

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

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

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

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

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

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

方法1：暗化整張圖片

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

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

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

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

方法2：給文字加個框

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

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

方法3：虛化圖片

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

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

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

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

方法4：底部褪色

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

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

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

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

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

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

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

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