目錄：
1.光來自天空（上）
2.黑色和白色優(yōu)先（上）
3.雙倍的空白區(qū)域（下）
4.學(xué)習(xí)將文案覆在圖片上的方法（下）
5.使你的文案看起來很潮（下）
6.使用好看的字體（下）
7.像藝術(shù)家一樣“偷竊”（下）
準(zhǔn)則 3：雙倍空白區(qū)域
如果想讓你的UI有設(shè)計(jì)感，那么就多給頁面一些呼吸空間。在準(zhǔn)則2中，我提到“黑白優(yōu)先”可以迫使你在考慮色彩前關(guān)注間距和布局?，F(xiàn)在我們來講講關(guān)于間距和布局的一些事情。
如果你從一開始就去填充HTML內(nèi)容，那么你的頁面可能會自然而然地形成這個(gè)樣子。
所有內(nèi)容密密麻麻地?cái)D滿了整個(gè)屏幕。字號特別小，行之間也沒有間距，段落之間也只有那么一點(diǎn)點(diǎn)空隙，無論是100xp還是10000xp的頁面，都會被這些內(nèi)容填充得滿滿登登。
從審美角度來看，這太可怕了，如果想讓頁面有設(shè)計(jì)感，我們需要在元素中間留出更多的空白，甚至這些空白的數(shù)值也許聽起來有些匪夷所思。
空白，HTML，CSS
如果你像我一樣使用CSS編寫格式，基本上習(xí)慣了不留什么空白，那么現(xiàn)在開始要改變這種習(xí)慣了。
從編寫開始，一直到結(jié)束，要在腦中將“留空白”概念貫穿整個(gè)過程中。頁面中每一個(gè)元素的布局都要有留白的意識；如果是內(nèi)容組布局，那么先考慮每一塊內(nèi)容組之間的留白，然后再考慮組內(nèi)元素之間的留白設(shè)置。
下面拿Piotr Kwiatkowski設(shè)計(jì)的陰影播放器頁面來舉例：
看左邊的菜單欄。兩個(gè)大標(biāo)題之間的垂直距離是中間文本本身高度的兩倍。中間文本都是12px，行間距也是12px。
再看這個(gè)菜單的標(biāo)題，“PLAYLISTS”和它的下劃線之間有15px的空白。這個(gè)數(shù)值比字母本身的高度還要大。
更不要說菜單里每個(gè)單獨(dú)列表之間25px的空白了。
左側(cè)側(cè)邊欄展示的是文本間行距的留白。
Piotr（設(shè)計(jì)師）在這個(gè)設(shè)計(jì)中非常注重留白設(shè)計(jì)，作品也呈現(xiàn)出很好的效果。雖然這只是一個(gè)概念作品，但是我覺得它很不錯，配得上最好的音樂播放器。
搜索欄留下了足夠的空間。文本“Search all music”的高度占工具欄高度20％，搜索圖標(biāo)也是相似的比例。
適度的、足夠大的空白空間，可以將內(nèi)容冗雜的頁面變得簡潔、好看——比如更簡潔干凈的論壇。
? 或者更加簡潔的維基百科：
當(dāng)然，對于這個(gè)概念設(shè)計(jì)，大家又很多的爭論，很多人說這個(gè)設(shè)計(jì)沒有突出維基的核心功能，
但是我們不能否認(rèn)，我們可以從中學(xué)到很多設(shè)計(jì)點(diǎn)：
· 在行之間留白。
· 在每個(gè)元素中間留白。
· 在元素組之間留白。
分析每一處留白產(chǎn)生的作用。
準(zhǔn)則4：學(xué)習(xí)將文案覆在圖片上的方法
我總結(jié)了一些能使覆加在圖片上的文字排版看上去很漂亮的可靠方法，一共5條，另外加一個(gè)小彩蛋技巧。
1. 直接把文字加在圖片上
我很猶豫要不要把這條加進(jìn)來，但是如何讓直接加在圖片上的文字看上去好看又顯眼是十分需要技巧的。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 【“Otter Surfboards”官網(wǎng)，比較難以閱讀】
使用這種方法，我們需要注意以下幾點(diǎn)：
① 這張圖片需要是深色的，并且里面沒有太多明暗對比強(qiáng)烈的邊緣線。
② 文案使用白色。
③ 記得測試每一種屏幕和窗口，確定它是易讀的。
我想表達(dá)的并不是說，每一個(gè)專業(yè)的項(xiàng)目里都需要把文字放在一張圖片的頂部，我只是強(qiáng)調(diào)一些可控的注意點(diǎn)。將文案直接放在圖片上，其實(shí)是可以做出非常炫酷的效果的。
2. 覆蓋整張圖片
將文案覆加在圖片上，最簡單的方法就是覆蓋整張圖片，圖片顏色不夠深怎么辦？給整張圖片加一個(gè)半透明的黑色蒙層即可。
這種方法同樣適用于縮略圖和小的圖片。
【“charity:water”的縮略圖】
黑色蒙層，白色文字是最簡單也是最常用的，當(dāng)然你也可以使用其他適合的顏色來做蒙層。
3. 給文案加底色方塊
這種方法簡單實(shí)用。一個(gè)黑色的矩形，上面加上白色的文字，放在任何圖片上都不影響它的易讀性。
你也可以用其他顏色來做底色，不過顏色選擇要慎重。
4. 把圖片變模糊
還有一種能讓文案易讀性更強(qiáng)的方法，就是把底層圖片的一部分模糊化。
IOS 7便很好地運(yùn)用了將背景模糊化，Vista也用這種方法做出了很好的效果。
你也可以將照片的非焦點(diǎn)區(qū)域做模糊化處理。但是需要注意的是這種方法比較適用于非動態(tài)圖片，如果你的背景是圖片輪換，那么便要確保文字下方一定模糊化區(qū)域。
沒明白我的意思？看看下圖中的標(biāo)題下方的文字……
5. 地板褪色
所謂“地板褪色”方式，就是你有一張從上而下顏色漸深的圖片，這樣可以將文字加在圖片的底部。
這是一種非常巧妙的方式，我不知道之前誰這么做過，我第一次發(fā)現(xiàn)這種方式還是在“Medium”上。
在很多漫不經(jīng)心的旁觀者眼中，Medium的列表展現(xiàn)形式僅僅是在圖片上加了白色呃文字而已，
我得說，這種說法大錯特錯了。
事實(shí)上，它每一張圖片從中部到底部有一個(gè)梯度（黑色不透明度從0％到大致20％）。雖然很難辨識，但是它的確是這樣的，極大提高了文案的易讀性。并且，我還注意到Medium的縮略圖上的文字都帶有輕微的陰影，更加深化了文字的易讀性，真實(shí)太精秒了！這兩種方式使得Medium可以使用任意一張圖片，在上面加任意文字，并且還能有良好的易讀性。
另外，為什么是自上而下逐步變深呢？請參看原則一：光來自天空。光源是自上而下的，就像我們看現(xiàn)實(shí)中的任何東西一樣，底部色彩是最深的。
進(jìn)階版：融合了“模糊處理”和“地板褪色”兩種方法，就叫它“模糊地板”吧。
額外的方法：
為什么“Elastica blog”頂部的標(biāo)題總是很顯眼呢？
它使用的圖片：
· 顏色不是很深；
· 明暗對比較強(qiáng)烈。
貌似很難解釋，為什么它的文字易讀性還是很高，我們來一起看一下：
答案是：Scrim（紗罩）
在攝影中，攝影師會用紗罩（棉麻布）來吸收光線，使照片的光線變得柔和?，F(xiàn)在它成為一種視覺設(shè)計(jì)技術(shù)，吸收圖片的光線，使得圖片上的文字能夠凸顯出來。
如果我們把“Elastica blog”網(wǎng)頁縮小一些，可以清楚地看到：
“145,000 Salesforce Users Come out to Celebrate…”這段話下方有一個(gè)漸變不透明的矩形方塊。
將文字放在這樣一個(gè)藍(lán)色的非透明背景上的確比直接放在照片上辨識度高多了。這可能是將文字添加在圖片上最精妙的方式了，我沒在其他地方見過，把這種方法記下來，今后你會用到的。
準(zhǔn)則5：使你的文案很潮（且適合）
想讓文字看起來漂亮又顯眼，一般情況下，我們喜歡用對比的形式，比如：更大一點(diǎn)，更亮一點(diǎn)。在我看來，創(chuàng)建一套UI規(guī)范，設(shè)定字體規(guī)范是難點(diǎn)之一。
如果你是科班出身，你可能會用各種方式來讓你的文案引人注目：
· 字號（大一點(diǎn)或小一點(diǎn)）；
· 顏色（使用更強(qiáng)的對比色；或用明亮的顏色畫龍點(diǎn)睛）；
· 字體粗細(xì)
· 拼寫（字母小寫、字母大寫、標(biāo)題大寫）
· 斜體
· 字符間距
· 邊距（嚴(yán)格意義上講，這個(gè)并不屬于文本本身屬性，但是對于吸引人注意也有一定的作用，所以也加上了這一條。）
還有一些其他可以吸引人矚目的方法，但是不特別建議使用：
·?下劃線：一般來講，現(xiàn)在文字下方加下劃線大家會默認(rèn)是一條鏈接，我們最好還是不要再賦予它其他含義。
·文本背景顏色:這種情況不常見，但是曾有一段時(shí)間37signals會用這種樣式來作為鏈接。
·刪除線：90年代的CSS用法。
根據(jù)我的經(jīng)驗(yàn)，當(dāng)發(fā)現(xiàn)一個(gè)文本的樣式怎么看都不對勁的時(shí)候，不是因?yàn)檫吘鄦栴}或者是顏色不夠深，而是沒有給它正確地設(shè)置幾組矛盾的屬性組合。
你可以把文本樣式分成兩組：（突出，或者不突出）
· 增強(qiáng)文字可視性的：加大、加粗、大寫等。
· 降低文字可視性的：小一點(diǎn)、少一些對比元素、小寫等。
“Material Design”這個(gè)大標(biāo)題非常突出，它很大，對比強(qiáng)，也很粗。
頁腳部分的文字便不需要那么突出了，字體小，對比低，比較細(xì)。
重點(diǎn)來了：一個(gè)網(wǎng)站只有大標(biāo)題需要完全突出，其他地方需要“突出”與“不突出”相結(jié)合。
這樣一方面防止了元素過于突兀，同時(shí)又能張弛有度地把應(yīng)該突出的重點(diǎn)凸顯出來，。
Blu Homes網(wǎng)站設(shè)計(jì)很完美，它的大標(biāo)題很長，是需要突出強(qiáng)調(diào)的， 卻使用了小寫——太多的突出設(shè)計(jì)會讓標(biāo)題給用戶的視覺壓力過大。
Blu Homes中間的數(shù)字用它的字號、顏色和布局吸引用戶的注意力，請注意，它的字體很細(xì)，同時(shí)也沒有用對比很強(qiáng)的深色，而是用了對比很淺的淺藍(lán)色。而數(shù)字下面的小標(biāo)簽，雖然用了淺灰色且十分小，卻使用了大寫字母，并加粗。所有的元素組合起來非常平衡。
Contents Magazine也是一個(gè)很好的學(xué)習(xí)案例：
① 文章標(biāo)題是這個(gè)頁面上唯一沒有用斜體的元素。在這個(gè)案例里，不用斜體反而更醒目，更何況還加粗了。
② 作者的名稱在署名行，也加粗了，卻用正常粗細(xì)的“by”做反襯，讓它顯眼起來。
③ 在頁面中間的那個(gè)小小的、淺淺的“ALREADY OUT”，由于它是大寫，字符間距大、邊距也大，因此也很容易找到。
被選中或者鼠標(biāo)停留處的文字
設(shè)計(jì)被選中或者鼠標(biāo)停留處的文字會更難。一般來講，改變字體大小、外形、粗細(xì)都會改變字體占用的空間，這樣很容易就辨識出鼠標(biāo)懸停狀態(tài)。
你可以利用哪些元素呢？
· 字體顏色
· 背景顏色
· 陰影
· 下劃線
· 細(xì)小的動效
還可以這樣做：可以把白色的字體變成彩色的，或者彩色的字體換成白色的，當(dāng)然同時(shí)也要把文字背景換成深色的。
被選中的標(biāo)簽文字變成了白色的，但是文字背景變深，和頁面背景色對比度非常高。
不得不說：優(yōu)化文字是個(gè)苦差事。每一次我覺得“這些文字不可能變好看”的時(shí)候，都會被證明我錯了。為了把它們變得更好看，我需要不斷地嘗試。
所以，如果在經(jīng)過一番努力后，你的文本展現(xiàn)還是不夠好，不要著急，如果你自己有所提高，你的文本一定會更好看的。
所以，不要放棄，加油努力提升自己，不停嘗試！
準(zhǔn)則6：使用好看的字體
一些字體是非常棒的，學(xué)會使用它們。
小貼士：在這部分里，沒什么戰(zhàn)略和技術(shù)性的東西，我只是挑選了一些好看且免費(fèi)的字體供大家下載使用。
（由于本文作者推薦下載的都是一些英文字體，并且大部分需要翻墻下載，因此這部分就略過了。）
準(zhǔn)則7：像藝術(shù)家一樣“偷竊”
當(dāng)我第一次坐下來去設(shè)計(jì)一些app元素時(shí)：一個(gè)按鈕、一個(gè)表、一個(gè)彈出等等，也是我第一次覺得自己知道的太少了，根本不知道該如何讓這些元素看起來好看，用起來方便。
不過幸運(yùn)的是，我不需要去發(fā)明新的UI元素，我可以去看其他優(yōu)秀的UI設(shè)計(jì)師是如何做的，然后去借鑒最優(yōu)秀的元素。
那么有哪些靈感來源的網(wǎng)站呢？
這里我推薦幾個(gè)常用的網(wǎng)站，綜合評分從高到低排序：
1. Dribbble
這個(gè)邀請注冊的網(wǎng)站，是設(shè)計(jì)師的垂直內(nèi)容平臺，擁有海量高質(zhì)量的UI作品。無論是哪個(gè)方面，你都可以在這里找到非常棒的靈感素材。
在這里，推薦幾位值得關(guān)注的UI設(shè)計(jì)師給你：
· Victor Erixon
擁有非常獨(dú)特的設(shè)計(jì)風(fēng)，十分漂亮干凈的扁平化設(shè)計(jì)。他雖然只做了三年的設(shè)計(jì)師，但是水平已經(jīng)是頂級的了。
· Focus Lab
這些人都是Dribbble的名人，作品都在水準(zhǔn)之上，且風(fēng)格多樣。
· Cosmin Capitanu
一位可怕的全能型選手。他的作品風(fēng)格夸張卻不花哨，非常善于運(yùn)用色彩。盡管他并不注重UX。
2. Flat UI Pinboard
我不知道“warmar”是誰，但是通過他的Phone UI Pinboard 我總是能找到對我有用的UI設(shè)計(jì)案例。
3.?Pttrns
一個(gè)移動app截屏匯總的網(wǎng)站，這個(gè)網(wǎng)站的好處就是一切都是基于UX模式系統(tǒng)組織的。
這就意味著你可以快速搜索到你想要的頁面：登錄界面、用戶檔案、搜索界面等等。
大多數(shù)藝術(shù)家最開始都是從“模仿”起家的。從最優(yōu)秀的作品中得到啟示，直到自己的設(shè)計(jì)水平達(dá)到超高水平，這時(shí)候便可以慢慢衍生出自己的風(fēng)格，引領(lǐng)新的設(shè)計(jì)流行趨勢了。
總結(jié)：
我寫這篇文章的原因是，曾有一段時(shí)間我很喜歡看這類型的文章。
而我希望你從能這篇文章中得到幫助：
如果你是一位UX設(shè)計(jì)師，在你勾勒出線框需求后可以做出漂亮的原型；
如果你是一位開發(fā)者，可以把下一個(gè)項(xiàng)目做得好看點(diǎn)兒。
我不希望UI設(shè)計(jì)只有專業(yè)的UI設(shè)計(jì)師才能做好。現(xiàn)在的你，可以去觀察、去模仿、去告訴你的朋友在UI設(shè)計(jì)中哪些元素在起著作用。
不管怎樣，我們的學(xué)習(xí)之路還是很長，努力吧！
原文作者：Erik D. Kennedy
譯? ? ? 者：藍(lán)湖
