實(shí)用UI設(shè)計(jì)法則（下）

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

第一部分：

實(shí)用UI設(shè)計(jì)法則（上）：http://m.tgudhdp.cn/photoshop/jiaocheng/2014/135206.html

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

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

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

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

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

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

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

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

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

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

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

方法1：暗化整張圖片

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

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

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

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

方法2：給文字加個(gè)框

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

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

方法3：虛化圖片

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

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

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

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

方法4：底部褪色

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

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

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

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

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

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

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

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