[Design] 不談設計理論，給 UI 設計初心者的七條速成守則（下）－Foxbrush

From: http://buzzorange.com/techorange/2014/12/03/7-rules-for-creating-gorgeous-ui-part-2/

-------------------------------------------------------------------------

本文編譯自 Medium，作者是一位 UX（User Experience, 用戶體驗) 設計師，他通過自己學習 UI 設計的過程，總結出 7 條實用的法則，為 UI 設計新手提供了寶貴的經驗。文章分為 2 個部分，這裡是第 2 部分。

第 1 部分請移駕：不談設計理論，給 UI 設計初心者的七條速成守則（上）

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

1. 光線來自天空（第 1 部分）
2. 黑白優先（第 1 部分）
3. 增加空白空間（第 1 部分）
4. 學會在圖片上呈現文字
5. 做好強調和淡化
6. 只用合適的字體
7. 善於借鑒優秀的作品

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

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

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

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

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

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

圖片應該比較暗，而且顏色不能有太大的反差。

文字必須是白色的，我知道你也能找到用其它顏色的案例。但是我覺得，你最好還是用白色。

在不同螢幕，不同尺寸的窗口調整頁面，確保各種情況下文字都是清晰、易於辨識的。

上面這 3 個方面調整好就 OK 了，不要再做其它處理。我自己從來沒有在任何專業的項目上直接把文字放在圖片上，這種方法是可行的，也能做出酷炫的效果，但還是小心點。

方法 1：暗化整張圖片

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

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

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

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

方法 2：給文字加個框

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

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

方法 3：虛化圖片

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

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

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

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

方法 4：底部褪色

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

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

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

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

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

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

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

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

這裡實際上是把圖片局部區域的光線變得更柔和，突出了文字。如果我們在瀏覽器上縮小 Elastica blog，會看出到底發生了什麼。

在圖片左下角有一塊陰影區域，文字置於其上，就很容易辨認了。

這可能是在圖片優雅呈現文字最細微的一種方法。我還沒在別的地方見過，保存下來，說不定將來什麼時候就用到了。

法則 5：做好強調與弱化

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

我認為，UI 設計最困難的地方就在於文字的裝飾，因為設計文字時需要考慮的因素太多了：

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

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

● 底線。底線現在基本上等同於超連結了，我覺得你還是不要挑戰人們的常識比較好。
● 文字背景色。這個有時候也被當作超連結，只不過不是那麼常見。
● 刪除線。你認真嗎？

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

強調和弱化

你可以把所有的文字樣式分成兩類：

● 增強可讀性的樣式：大字號、粗體、大寫等；
● 減弱可讀性的樣式：小字號、與背景對比不明顯、空白較少等。

上圖「Material Design」這個標題就很突出：大、對比明顯、字體較粗

上圖頁腳的字就是弱化處理的，小、對比不明顯、字體較細

我認為文字設計的核心在於：

標題是唯一需要全部強調的元素，其它的部分則應該將強調與弱化結合使用。

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

上面這張 Blu Homes 的首頁堪稱是這方面的典範：上方文字較大，特別強調，但是用了小寫字母。不會給人強烈的壓迫感。

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

這就是設計中的平衡。

上面這張圖是 Contents Magazine 的網站，也是學習強調和弱化的一個好案例。

文章標題 是唯一沒有用斜體的部分，而且還做了加粗處理，更容易吸引讀者的關注。
作者姓名寫在文章標題下方，字體加粗，與沒有加粗的「by」區分開來。

「ALREADY OUT」 獨立出來，很小，與背景區分不明顯，但是用了大寫字母，字間距很大，文字外圍空白較多，當你想要找它的時候一眼就能看見。

滑鼠停止或點選時的樣式

設計滑鼠停止或點選時的樣式也是同樣的道理，只不過更難一些。

通常情況下，改變字體大小、大小寫、粗細時會改變文字所佔空間的大小，讓人們理解鼠標正懸停在這裡。此外，下面這些要素也能夠影響人們的感受：

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

這裡再推薦一個比較普適的方法：給白色的元素上色；或者當背景顏色較深時，把有顏色的內容變成白色。

裝飾文字是非常難的，但是每當我感到「這些文字不可能再變好看時」，我的判斷都是錯的。我需要做的就是不斷優化，不斷嘗試。

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

法則 6：只用合適的字體

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

注意：這一部分沒有太多知識要學，我只是給你推薦一些好用的免費字體給你。有的網站很有個性，會用到比較特別的字體。但是，大多數產品的 UI 設計只要保持乾淨、簡潔就可以了。所以，把那些太花俏的字體放到一邊吧。

我在這裡推薦一些免費的字體。因為這篇文章是為初學 UI 設計的人所寫，這些免費的字體完全夠用了。我希望你把這些字體下載下來，在你開始項目設計之前，瀏覽一下它們。

以下是我推薦的字體：

Ubuntu（上圖） —字體偏粗，對於有些 App 來說太張揚了，但是對於大多數 App 來說還是不錯的。在Google Fonts上可以找到。

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

Bebas Neue — 適合作標題，都是大寫字母，在Fontfabric上能找到，這個網站上還有一些 Bebas Neue 的應用實例。

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

Raleway —適合作標題，但不適合用於正文。有一個極細的版本（上圖沒有展現），在Google Fonts可以找到。

Cabin —在Google Fonts可以找到。

Lato —在Google Fonts可以找到。

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

Entypo Social —一個社群網站圖標集，在 Entypo.com上能找到。

這裡還有其它一些資源：

Beautiful Google web fonts —有 Google Fonts 的運用實例，我經常在這裡找靈感。
FontSquiirrel —收集了不少可以免費商用的好字體。
Typekit —如果你用 Adobe Creative Cloud（也就是用 Photoshop 或 Illustrator 等），你就可以從 Typekit 中獲得包括 Proximate Nova 在內的大量字體。

法則 7：像藝術家一樣到處找靈感

我第一次坐下來試著設計按鈕、圖標、彈跳分頁等各個 App 元素時，我體認到什麼是學海無涯。但是我也很幸運，我並不需要完全設計全新的 UI，因為有很多優秀的作品可以藉鑑。

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

1. Dribbble

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

你可以追蹤一下我的 dribbble 作品集。下面是其他一些推薦給你追蹤的人：

● Victor Erixon —— 有著非常明顯的個人風格，非常厲害。他的作品很漂亮、簡潔，扁平設計。他做 UI 設計師已經 3 年了，是這方面數一數二的人才。

● Focus Lab ——這些人是 Dribbble 中的名人，他們的作品非常多樣化，絕對是一流的。