目錄：
1.光來自天空（上）
2.黑色和白色優(yōu)先（上）
3.雙倍的空白區(qū)域（下）
4.學習將文案覆在圖片上的方法（下）
5.使你的文案看起來很潮（下）
6.使用好看的字體（下）
7.像藝術家一樣“偷竊”（下）
準則 3：雙倍空白區(qū)域
如果想讓你的UI有設計感性置，那么就多給頁面一些呼吸空間。在準則2中幔虏，我提到“黑白優(yōu)先”可以迫使你在考慮色彩前關注間距和布局『汪ぃ現(xiàn)在我們來講講關于間距和布局的一些事情居兆。
如果你從一開始就去填充HTML內容，那么你的頁面可能會自然而然地形成這個樣子。
所有內容密密麻麻地擠滿了整個屏幕旦装。字號特別小，行之間也沒有間距摊滔，段落之間也只有那么一點點空隙阴绢，無論是100xp還是10000xp的頁面，都會被這些內容填充得滿滿登登艰躺。
從審美角度來看呻袭，這太可怕了，如果想讓頁面有設計感腺兴，我們需要在元素中間留出更多的空白左电，甚至這些空白的數(shù)值也許聽起來有些匪夷所思。
空白页响，HTML篓足，CSS
如果你像我一樣使用CSS編寫格式，基本上習慣了不留什么空白闰蚕，那么現(xiàn)在開始要改變這種習慣了栈拖。
從編寫開始，一直到結束没陡，要在腦中將“留空白”概念貫穿整個過程中涩哟。頁面中每一個元素的布局都要有留白的意識；如果是內容組布局盼玄，那么先考慮每一塊內容組之間的留白贴彼，然后再考慮組內元素之間的留白設置。
下面拿Piotr Kwiatkowski設計的陰影播放器頁面來舉例：
看左邊的菜單欄强岸。兩個大標題之間的垂直距離是中間文本本身高度的兩倍锻弓。中間文本都是12px，行間距也是12px蝌箍。
再看這個菜單的標題青灼，“PLAYLISTS”和它的下劃線之間有15px的空白暴心。這個數(shù)值比字母本身的高度還要大。
更不要說菜單里每個單獨列表之間25px的空白了杂拨。
左側側邊欄展示的是文本間行距的留白专普。
Piotr（設計師）在這個設計中非常注重留白設計，作品也呈現(xiàn)出很好的效果弹沽。雖然這只是一個概念作品檀夹，但是我覺得它很不錯，配得上最好的音樂播放器策橘。
搜索欄留下了足夠的空間炸渡。文本“Search all music”的高度占工具欄高度20％，搜索圖標也是相似的比例丽已。
適度的蚌堵、足夠大的空白空間，可以將內容冗雜的頁面變得簡潔沛婴、好看——比如更簡潔干凈的論壇吼畏。
? 或者更加簡潔的維基百科：
當然，對于這個概念設計嘁灯，大家又很多的爭論泻蚊，很多人說這個設計沒有突出維基的核心功能，
但是我們不能否認丑婿，我們可以從中學到很多設計點：
· 在行之間留白性雄。
· 在每個元素中間留白。
· 在元素組之間留白枯冈。
分析每一處留白產(chǎn)生的作用毅贮。
準則4：學習將文案覆在圖片上的方法
我總結了一些能使覆加在圖片上的文字排版看上去很漂亮的可靠方法，一共5條尘奏，另外加一個小彩蛋技巧滩褥。
1. 直接把文字加在圖片上
我很猶豫要不要把這條加進來，但是如何讓直接加在圖片上的文字看上去好看又顯眼是十分需要技巧的炫加。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 【“Otter Surfboards”官網(wǎng)瑰煎，比較難以閱讀】
使用這種方法，我們需要注意以下幾點：
① 這張圖片需要是深色的俗孝，并且里面沒有太多明暗對比強烈的邊緣線酒甸。
② 文案使用白色。
③ 記得測試每一種屏幕和窗口赋铝，確定它是易讀的插勤。
我想表達的并不是說，每一個專業(yè)的項目里都需要把文字放在一張圖片的頂部，我只是強調一些可控的注意點农尖。將文案直接放在圖片上析恋，其實是可以做出非常炫酷的效果的。
2. 覆蓋整張圖片
將文案覆加在圖片上助隧，最簡單的方法就是覆蓋整張圖片，圖片顏色不夠深怎么辦滑沧？給整張圖片加一個半透明的黑色蒙層即可并村。
這種方法同樣適用于縮略圖和小的圖片。
【“charity:water”的縮略圖】
黑色蒙層滓技，白色文字是最簡單也是最常用的哩牍，當然你也可以使用其他適合的顏色來做蒙層。
3. 給文案加底色方塊
這種方法簡單實用令漂。一個黑色的矩形姐叁，上面加上白色的文字，放在任何圖片上都不影響它的易讀性。
你也可以用其他顏色來做底色，不過顏色選擇要慎重精续。
4. 把圖片變模糊
還有一種能讓文案易讀性更強的方法贿条，就是把底層圖片的一部分模糊化。
IOS 7便很好地運用了將背景模糊化嘱吗，Vista也用這種方法做出了很好的效果玄组。
你也可以將照片的非焦點區(qū)域做模糊化處理。但是需要注意的是這種方法比較適用于非動態(tài)圖片谒麦，如果你的背景是圖片輪換俄讹，那么便要確保文字下方一定模糊化區(qū)域。
沒明白我的意思绕德？看看下圖中的標題下方的文字……
5. 地板褪色
所謂“地板褪色”方式耻蛇，就是你有一張從上而下顏色漸深的圖片踪蹬，這樣可以將文字加在圖片的底部。
這是一種非常巧妙的方式臣咖，我不知道之前誰這么做過跃捣，我第一次發(fā)現(xiàn)這種方式還是在“Medium”上。
在很多漫不經(jīng)心的旁觀者眼中夺蛇，Medium的列表展現(xiàn)形式僅僅是在圖片上加了白色呃文字而已疚漆，
我得說，這種說法大錯特錯了。
事實上娶聘，它每一張圖片從中部到底部有一個梯度（黑色不透明度從0％到大致20％）闻镶。雖然很難辨識，但是它的確是這樣的趴荸，極大提高了文案的易讀性儒溉。并且，我還注意到Medium的縮略圖上的文字都帶有輕微的陰影发钝，更加深化了文字的易讀性顿涣，真實太精秒了！這兩種方式使得Medium可以使用任意一張圖片酝豪，在上面加任意文字涛碑，并且還能有良好的易讀性。
另外孵淘，為什么是自上而下逐步變深呢蒲障？請參看原則一：光來自天空。光源是自上而下的瘫证，就像我們看現(xiàn)實中的任何東西一樣揉阎，底部色彩是最深的。
進階版：融合了“模糊處理”和“地板褪色”兩種方法背捌，就叫它“模糊地板”吧毙籽。
額外的方法：
為什么“Elastica blog”頂部的標題總是很顯眼呢？
它使用的圖片：
· 顏色不是很深毡庆；
· 明暗對比較強烈坑赡。
貌似很難解釋，為什么它的文字易讀性還是很高么抗，我們來一起看一下：
答案是：Scrim（紗罩）
在攝影中毅否，攝影師會用紗罩（棉麻布）來吸收光線，使照片的光線變得柔和∮叮現(xiàn)在它成為一種視覺設計技術螟加，吸收圖片的光線，使得圖片上的文字能夠凸顯出來熊泵。
如果我們把“Elastica blog”網(wǎng)頁縮小一些仰迁，可以清楚地看到：
“145,000 Salesforce Users Come out to Celebrate…”這段話下方有一個漸變不透明的矩形方塊。
將文字放在這樣一個藍色的非透明背景上的確比直接放在照片上辨識度高多了顽分。這可能是將文字添加在圖片上最精妙的方式了徐许，我沒在其他地方見過，把這種方法記下來卒蘸，今后你會用到的雌隅。
準則5：使你的文案很潮（且適合）
想讓文字看起來漂亮又顯眼翻默，一般情況下，我們喜歡用對比的形式恰起，比如：更大一點修械，更亮一點。在我看來检盼，創(chuàng)建一套UI規(guī)范肯污，設定字體規(guī)范是難點之一。
如果你是科班出身吨枉，你可能會用各種方式來讓你的文案引人注目：
· 字號（大一點或小一點）蹦渣；
· 顏色（使用更強的對比色；或用明亮的顏色畫龍點睛）貌亭；
· 字體粗細
· 拼寫（字母小寫柬唯、字母大寫、標題大寫）
· 斜體
· 字符間距
· 邊距（嚴格意義上講圃庭，這個并不屬于文本本身屬性锄奢，但是對于吸引人注意也有一定的作用，所以也加上了這一條剧腻。）
還有一些其他可以吸引人矚目的方法拘央，但是不特別建議使用：
·?下劃線：一般來講，現(xiàn)在文字下方加下劃線大家會默認是一條鏈接书在，我們最好還是不要再賦予它其他含義堪滨。
·文本背景顏色:這種情況不常見，但是曾有一段時間37signals會用這種樣式來作為鏈接蕊温。
·刪除線：90年代的CSS用法。
根據(jù)我的經(jīng)驗遏乔，當發(fā)現(xiàn)一個文本的樣式怎么看都不對勁的時候义矛，不是因為邊距問題或者是顏色不夠深，而是沒有給它正確地設置幾組矛盾的屬性組合盟萨。
你可以把文本樣式分成兩組：（突出凉翻，或者不突出）
· 增強文字可視性的：加大、加粗捻激、大寫等制轰。
· 降低文字可視性的：小一點、少一些對比元素胞谭、小寫等垃杖。
“Material Design”這個大標題非常突出，它很大丈屹，對比強调俘，也很粗伶棒。
頁腳部分的文字便不需要那么突出了，字體小彩库，對比低肤无，比較細。
重點來了：一個網(wǎng)站只有大標題需要完全突出骇钦，其他地方需要“突出”與“不突出”相結合宛渐。
這樣一方面防止了元素過于突兀，同時又能張弛有度地把應該突出的重點凸顯出來眯搭，窥翩。
Blu Homes網(wǎng)站設計很完美，它的大標題很長坦仍，是需要突出強調的鳍烁， 卻使用了小寫——太多的突出設計會讓標題給用戶的視覺壓力過大。
Blu Homes中間的數(shù)字用它的字號繁扎、顏色和布局吸引用戶的注意力幔荒，請注意，它的字體很細梳玫，同時也沒有用對比很強的深色爹梁，而是用了對比很淺的淺藍色。而數(shù)字下面的小標簽提澎，雖然用了淺灰色且十分小姚垃，卻使用了大寫字母，并加粗盼忌。所有的元素組合起來非常平衡积糯。
Contents Magazine也是一個很好的學習案例：
① 文章標題是這個頁面上唯一沒有用斜體的元素。在這個案例里谦纱，不用斜體反而更醒目看成，更何況還加粗了。
② 作者的名稱在署名行跨嘉，也加粗了川慌，卻用正常粗細的“by”做反襯，讓它顯眼起來祠乃。
③ 在頁面中間的那個小小的梦重、淺淺的“ALREADY OUT”，由于它是大寫亮瓷，字符間距大琴拧、邊距也大，因此也很容易找到嘱支。
被選中或者鼠標停留處的文字
設計被選中或者鼠標停留處的文字會更難艾蓝。一般來講力崇，改變字體大小、外形赢织、粗細都會改變字體占用的空間亮靴，這樣很容易就辨識出鼠標懸停狀態(tài)。
你可以利用哪些元素呢于置？
· 字體顏色
· 背景顏色
· 陰影
· 下劃線
· 細小的動效
還可以這樣做：可以把白色的字體變成彩色的茧吊，或者彩色的字體換成白色的，當然同時也要把文字背景換成深色的八毯。
被選中的標簽文字變成了白色的搓侄，但是文字背景變深，和頁面背景色對比度非常高话速。
不得不說：優(yōu)化文字是個苦差事讶踪。每一次我覺得“這些文字不可能變好看”的時候，都會被證明我錯了泊交。為了把它們變得更好看乳讥，我需要不斷地嘗試。
所以廓俭，如果在經(jīng)過一番努力后云石，你的文本展現(xiàn)還是不夠好，不要著急研乒，如果你自己有所提高汹忠，你的文本一定會更好看的。
所以雹熬，不要放棄宽菜，加油努力提升自己，不停嘗試竿报！
準則6：使用好看的字體
一些字體是非常棒的赋焕，學會使用它們。
小貼士：在這部分里仰楚，沒什么戰(zhàn)略和技術性的東西，我只是挑選了一些好看且免費的字體供大家下載使用犬庇。
（由于本文作者推薦下載的都是一些英文字體僧界，并且大部分需要翻墻下載，因此這部分就略過了臭挽。）
準則7：像藝術家一樣“偷竊”
當我第一次坐下來去設計一些app元素時：一個按鈕捂襟、一個表、一個彈出等等欢峰，也是我第一次覺得自己知道的太少了葬荷，根本不知道該如何讓這些元素看起來好看涨共，用起來方便。
不過幸運的是宠漩，我不需要去發(fā)明新的UI元素举反，我可以去看其他優(yōu)秀的UI設計師是如何做的，然后去借鑒最優(yōu)秀的元素扒吁。
那么有哪些靈感來源的網(wǎng)站呢火鼻？
這里我推薦幾個常用的網(wǎng)站，綜合評分從高到低排序：
1. Dribbble
這個邀請注冊的網(wǎng)站雕崩，是設計師的垂直內容平臺魁索，擁有海量高質量的UI作品。無論是哪個方面盼铁，你都可以在這里找到非常棒的靈感素材粗蔚。
在這里，推薦幾位值得關注的UI設計師給你：
· Victor Erixon
擁有非常獨特的設計風饶火，十分漂亮干凈的扁平化設計鹏控。他雖然只做了三年的設計師，但是水平已經(jīng)是頂級的了趁窃。
· Focus Lab
這些人都是Dribbble的名人牧挣，作品都在水準之上，且風格多樣醒陆。
· Cosmin Capitanu
一位可怕的全能型選手瀑构。他的作品風格夸張卻不花哨，非常善于運用色彩刨摩。盡管他并不注重UX寺晌。
2. Flat UI Pinboard
我不知道“warmar”是誰，但是通過他的Phone UI Pinboard 我總是能找到對我有用的UI設計案例澡刹。
3.?Pttrns
一個移動app截屏匯總的網(wǎng)站呻征，這個網(wǎng)站的好處就是一切都是基于UX模式系統(tǒng)組織的。
這就意味著你可以快速搜索到你想要的頁面：登錄界面罢浇、用戶檔案陆赋、搜索界面等等。
大多數(shù)藝術家最開始都是從“模仿”起家的嚷闭。從最優(yōu)秀的作品中得到啟示攒岛，直到自己的設計水平達到超高水平，這時候便可以慢慢衍生出自己的風格胞锰，引領新的設計流行趨勢了灾锯。
總結：
我寫這篇文章的原因是，曾有一段時間我很喜歡看這類型的文章嗅榕。
而我希望你從能這篇文章中得到幫助：
如果你是一位UX設計師顺饮，在你勾勒出線框需求后可以做出漂亮的原型吵聪；
如果你是一位開發(fā)者，可以把下一個項目做得好看點兒兼雄。
我不希望UI設計只有專業(yè)的UI設計師才能做好∫魇牛現(xiàn)在的你，可以去觀察君旦、去模仿澎办、去告訴你的朋友在UI設計中哪些元素在起著作用。
不管怎樣金砍，我們的學習之路還是很長局蚀，努力吧！
原文作者：Erik D. Kennedy
譯? ? ? 者：藍湖
