致UX設計師 & 產品經理：創建優秀UI的7條準則（下）

此文的上篇請移步至：《創建優秀UI的7條準則（上）》

準則 3：雙倍空白區域

如果想讓你的UI有設計感，那麼就多給頁面一些呼吸空間。

在準則2中，我提到「黑白優先」可以迫使你在考慮色彩前關注間距和布局。現在我們來講講關於間距和布局的一些事情。

如果你從一開始就去填充HTML內容，那麼你的頁面可能會自然而然地形成這個樣子。

所有內容密密麻麻地擠滿了整個屏幕。字型大小特別小，行之間也沒有間距，段落之間也只有那麼一點點空隙，無論是100xp還是10000xp的頁面，都會被這些內容填充得滿滿登登。

從審美角度來看，這太可怕了，如果想讓頁面有設計感，我們需要在元素中間留出更多的空白，甚至這些空白的數值也許聽起來有些匪夷所思。

空白，HTML，CSS

如果你像我一樣使用CSS編寫格式，基本上習慣了不留什麼空白，那麼現在開始要改變這種習慣了。從編寫開始，一直到結束，要在腦中將「留空白」概念貫穿整個過程中。

頁面中每一個元素的布局都要有留白的意識；如果是內容組布局，那麼先考慮每一塊內容組之間的留白，然後再考慮組內元素之間的留白設置。

下面拿Piotr Kwiatkowski設計的陰影播放器頁面來舉例：

看左邊的菜單欄。

兩個大標題之間的垂直距離是中間文本本身高度的兩倍。

中間文本都是12px，行間距也是12px。

再看這個菜單的標題，「PLAYLISTS」和它的下劃線之間有15px的空白。這個數值比字母本身的高度還要大。更不要說菜單里每個單獨列表之間25px的空白了。

左側側邊欄展示的是文本間行距的留白。

Piotr（設計師）在這個設計中非常注重留白設計，作品也呈現出很好的效果。雖然這只是一個概念作品，但是我覺得它很不錯，配得上最好的音樂播放器。

搜索欄留下了足夠的空間。文本「Search all music」的高度占工具欄高度20％，搜索圖標也是相似的比例。

適度的、足夠大的空白空間，可以將內容冗雜的頁面變得簡潔、好看——比如更簡潔乾淨的論壇。

亦或者更加整潔的維基百科。

當然，對於這個概念設計，大家又很多的爭論，很多人說這個設計沒有突出維基的核心功能，但是我們不能否認，我們可以從中學到很多設計點：

· 在行之間留白。

· 在每個元素中間留白。

· 在元素組之間留白。

分析每一處留白產生的作用。

準則4：學習將文案覆在圖片上的方法

我總結了一些能使覆加在圖片上的文字排版看上去很漂亮的可靠方法，一共5條，另外加一個小彩蛋技巧。

如果你想成為一名優秀的UI設計師，那麼你肯定得學會如何把文案融合在圖片里，同時又讓文案很吸引人。讀完這部分內容，在這方面一定會幫你得到很大的提升。

（0）直接把文字加在圖片上

我很猶豫要不要把這條加進來，但是如何讓直接加在圖片上的文字看上去好看又顯眼是十分需要技巧的。

使用這種方法，我們需要注意以下幾點：

· 這張圖片需要是深色的，並且裡面沒有太多明暗對比強烈的邊緣線。

· 文案使用白色。

· 記得測試每一種屏幕和窗口，確定它是易讀的。

我想表達的並不是說，每一個專業的項目里都需要把文字放在一張圖片的頂部，我只是強調一些可控的注意點。將文案直接放在圖片上，其實是可以做出非常炫酷的效果的。

（1）覆蓋整張圖片

將文案覆加在圖片上，最簡單的方法就是覆蓋整張圖片，圖片顏色不夠深怎麼辦？沒關係，給整張圖片加一個半透明的黑色蒙層即可。

這種方法同樣適用於縮略圖和小的圖片。

黑色蒙層，白色文字是最簡單也是最常用的，當然你也可以使用其他適合的顏色來做蒙層。

（2）給文案加底色方塊

這種方法簡單實用。畫一個黑色的矩形，上面加上白色的文字，放在任何圖片上都不影響它的易讀性。

你也可以用其他顏色來做底色，不過顏色選擇要慎重。

（3）把圖片變模糊

還有一種能讓文案易讀性更強的方法，就是把底層圖片的一部分模糊化。

iOS 7便很好地運用了將背景模糊化，Vista也用這種方法做出了很好的效果。

你也可以將照片的非焦點區域做模糊化處理。但是需要注意的是這種方法比較適用於非動態圖片，如果你的背景是圖片輪換，那麼便要確保文字下方一定模糊化區域。

沒明白我的意思？看看下圖中的標題下方的文字……

（4）地板褪色

所謂「地板褪色」方式，就是你有一張從上而下顏色漸深的圖片，這樣可以將文字加在圖片的底部。這是一種非常巧妙的方式，我不知道之前誰這麼做過，我第一次發現這種方式還是在「Medium」上。

在很多漫不經心的旁觀者眼中，Medium的列表展現形式僅僅是在圖片上加了白色的文字而已，我得說，這種說法大錯特錯了。事實上，它每一張圖片從中部到底部有一個梯度（黑色不透明度從0％到大致20％）。

雖然很難辨識，但是它的確是這樣的，極大提高了文案的易讀性。

並且，我還注意到Medium的縮略圖上的文字都帶有輕微的陰影，更加深化了文字的易讀性，真實太精秒了！

這兩種方式使得Medium可以使用任意一張圖片，在上面加任意文字，並且還能有良好的易讀性。

另外，為什麼是自上而下逐步變深呢？請參看原則一：光來自天空。光源是自上而下的，就像我們看現實中的任何東西一樣，底部色彩是最深的。

進階版：融合了「模糊處理」和「地板褪色」兩種方法，就叫它「模糊地板」吧

額外的方法：

為什麼「Elastica blog」頂部的標題總是很顯眼呢？

它使用的圖片：

· 顏色不是很深；

· 明暗對比較強烈。

貌似很難解釋，為什麼它的文字易讀性還是很高，我們來一起看一下：

答案是：Scrim（紗罩）

在攝影中，攝影師會用紗罩（棉麻布）來吸收光線，使照片的光線變得柔和。現在它成為一種視覺設計技術，吸收圖片的光線，使得圖片上的文字能夠凸顯出來。

如果我們把「Elastica blog」網頁縮小一些，可以清楚地看到：

在「145,000 Salesforce Users Come out to Celebrate…」這段話下方有一個漸變不透明的矩形方塊。將文字放在這樣一個藍色的非透明背景上的確比直接放在照片上辨識度高多了。

這可能是將文字添加在圖片上最精妙的方式了，我沒在其他地方見過，把這種方法記下來，今後你會用到的。

準則5：使你的文案很潮（且適合）

想讓文字看起來漂亮又顯眼，一般情況下，我們喜歡用對比的形式，比如：更大一點，更亮一點。

在我看來，創建一套UI規範，設定字體規範是難點之一。如果你是科班出身，你可能會用各種方式來讓你的文案引人注目：

· 字型大小（大一點或小一點）；

· 顏色（使用更強的對比色；或用明亮的顏色畫龍點睛）；

· 字體粗細

· 拼寫（字母小寫、字母大寫、標題大寫）

· 斜體

· 字元間距

· 邊距（嚴格意義上講，這個並不屬於文本本身屬性，但是對於吸引人注意也有一定的作用，所以也加上了這一條。）

還有一些其他可以吸引人矚目的方法，但是不特別建議使用：

· 下劃線：一般來講，現在文字下方加下劃線大家會默認是一條鏈接，我們最好還是不要再賦予它其他含義。

·文本背景顏色:這種情況不常見，但是曾有一段時間37signals會用這種樣式來作為鏈接。

·刪除線：90年代的CSS用法。

根據我的經驗，當發現一個文本的樣式怎麼看都不對勁的時候，不是因為邊距問題或者是顏色不夠深，而是沒有給它正確地設置幾組矛盾的屬性組合。

你可以把文本樣式分成兩組：（突出，或者不突出）

· 增強文字可視性的：加大、加粗、大寫等。

· 降低文字可視性的：小一點、少一些對比元素、小寫等。

「Material Design」這個大標題非常突出，它很大，對比強，也很粗。

頁腳部分的文字便不需要那麼突出了，字體小，對比低，比較細。

重點來了：

一個網站只有大標題需要完全突出，其他地方需要「突出」與「不突出」相結合。

這樣一方面防止了元素過於突兀，同時又能張弛有度地把應該突出的重點凸顯出來，。

Blu Homes網站設計很完美，它的大標題很長，是需要突出強調的， 卻使用了小寫——太多的突出設計會讓標題給用戶的視覺壓力過大。

Blu Homes中間的數字用它的字型大小、顏色和布局吸引用戶的注意力——請注意，它的字體很細，同時也沒有用對比很強的深色，而是用了對比很淺的淺藍色。

而數字下面的小標籤，雖然用了淺灰色且十分小，卻使用了大寫字母，並加粗。

所有的元素組合起來非常平衡。

Contents Magazine也是一個很好的學習案例：

· 文章標題是這個頁面上唯一沒有用斜體的元素。在這個案例里，不用斜體反而更醒目，更何況還加粗了。

· 作者的名稱在署名行，也加粗了，卻用正常粗細的「by」做反襯，讓它顯眼起來。

· 在頁面中間的那個小小的、淺淺的「ALREADY OUT」，由於它是大寫，字元間距大、邊距也大，因此也很容易找到。

被選中或者滑鼠停留處的文字

設計被選中或者滑鼠停留處的文字會更難。一般來講，改變字體大小、外形、粗細都會改變字體佔用的空間，這樣很容易就辨識出滑鼠懸停狀態。

你可以利用哪些元素呢？

· 字體顏色

· 背景顏色

· 陰影

· 下劃線

· 細小的動效——上升、下降，等等。

還可以這樣做：可以把白色的字體變成彩色的，或者彩色的字體換成白色的，當然同時也要把文字背景換成深色的。

被選中的標籤文字變成了白色的，但是文字背景變深，和頁面背景色對比度非常高。

不得不說：優化文字是個苦差事。

每一次我覺得「這些文字不可能變好看」的時候，都會被證明我錯了。為了把它們變得更好看，我需要不斷地嘗試。

所以，如果在經過一番努力後，你的文本展現還是不夠好，不要著急，如果你自己有所提高，你的文本一定會更好看的。所以，不要放棄，加油努力提升自己，不停嘗試！

準則6：使用好看的字體

一些字體是非常棒的，學會使用它們。

小貼士：在這部分里，沒什麼戰略和技術性的東西，我只是挑選了一些好看且免費的字體供大家下載使用。

（由於本文作者推薦下載的都是一些英文字體，並且大部分需要翻牆下載，因此這部分就略過了。）

準則7：像藝術家一樣「偷竊」

當我第一次坐下來去設計一些app元素時——一個按鈕、一個表、一個彈出等等——也是我第一次覺得自己知道的太少了，根本不知道該如何讓這些元素看起來好看，用起來方便。

不過幸運的是，我不需要去發明新的UI元素，我可以去看其他優秀的UI設計師是如何做的，然後去借鑒最優秀的元素。

那麼有哪些靈感來源的網站呢？這裡我推薦幾個常用的網站，綜合評分從高到低排序：

1.Dribbble

這個邀請註冊的網站，是設計師的垂直內容平台，擁有海量高質量的UI作品。無論是哪個方面，你都可以在這裡找到非常棒的靈感素材。

在這裡，推薦幾位值得關注的UI設計師給你：

· Victor Erixon

擁有非常獨特的設計風，十分漂亮乾淨的扁平化設計。他雖然只做了三年的設計師，但是水平已經是頂級的了。

· Focus Lab

這些人都是Dribbble的名人，作品都在水準之上，且風格多樣。

· Cosmin Capitanu

一位可怕的全能型選手。他的作品風格誇張卻不花哨，非常善於運用色彩。儘管他並不注重UX。

2. Flat UI Pinboard

我不知道「warmar」是誰，但是通過他的Phone UI Pinboard 我總是能找到對我有用的UI設計案例。

3. Pttrns

一個移動app截屏匯總的網站，這個網站的好處就是一切都是基於UX模式系統組織的，這就意味著你可以快速搜索到你想要的頁面：登錄界面、用戶檔案、搜索界面等等。

大多數藝術家最開始都是從「模仿」起家的，從最優秀的作品中得到啟示，直到自己的設計水平達到超高水平，這時候便可以慢慢衍生出自己的風格，引領新的設計流行趨勢了。

總結：

我寫這篇文章的原因是，曾有一段時間我很喜歡看這類型的文章。而我希望你從能這篇文章中得到幫助：如果你是一位UX設計師，在你勾勒出線框需求後可以做出漂亮的原型；如果你是一位開發者，可以把下一個項目做得好看點兒。我不希望UI設計只有專業的UI設計師才能做好。現在的你，可以去觀察、去模仿、去告訴你的朋友在UI設計中哪些元素在起著作用。

不管怎樣，我們的學習之路還是很長，努力吧！

原文作者：Erik D. Kennedy

原文鏈接：《 7 Rules for Creating Gorgeous UI 》

翻譯：藍湖

微信訂閱號：藍湖產品設計協作

如需轉載，請註明原文及編譯信息