原文作者：Erik D. Kennedy
譯文出自：掘金翻譯計(jì)劃
本文永久鏈接：github.com/xitu/gold-m…
譯者：xujunjiejack
校對(duì)者：maoqyhz
這是這個(gè)指南的第二部分，在此之前，你需要閱讀第一部分。
我們正在討論可以讓你不需要去上美術(shù)學(xué)院就可以設(shè)計(jì)簡潔 UI 的規(guī)則。
下面是這些規(guī)則：
光線來自天空。（查看第 1 部分
首選白色和黑色。（查看第 1 部分
添加更多的空白。（查看第 1 部分
學(xué)習(xí)如何在圖片上添加文字。
令文本層次分明。
僅使用好看的字體。
像藝術(shù)家一樣借鑒。
現(xiàn)在只有幾種能夠可靠得將文字精美得添加在圖片上的辦法。以下描述了 5 種常規(guī)和 1 種額外的方法。
如果你想成為一個(gè)很好的 UI 設(shè)計(jì)師，你需要學(xué)習(xí)如何用吸引人的辦法把文字覆蓋在圖片上。每個(gè)優(yōu)秀的UI設(shè)計(jì)師都會(huì)在這個(gè)方面處理得很好，但平庸的設(shè)計(jì)師往往處理得很糟糕，甚至不會(huì)處理。無論你是哪一種平庸的設(shè)計(jì)師，在讀了這個(gè)章節(jié)后，你會(huì)有巨大的提升。
我一直在猶豫是否要在這篇文章里包含這個(gè)方法，但是嚴(yán)格來說，直接在圖片上添加文字并且讓設(shè)計(jì)好看是可行的。
Otter Surfboards 看著像精致的 Instagram 配圖，但是就是有點(diǎn)難讀圖片上面的字。
以下是這個(gè)方法的缺陷和注意事項(xiàng)：
圖片必須是黑色的，并且沒有很多高對(duì)比度。
字體必須是白的 —— 我敢打賭你找不到一個(gè)又簡單又干凈的反例。真的，只有白色這一個(gè)。
你需要在每種顯示尺寸下測(cè)試文本是否清晰。
你的設(shè)計(jì)都符合這些條件了？棒。只要你之后別再改字或著這個(gè)圖片，你應(yīng)該就可以用你的設(shè)計(jì)了。
我不認(rèn)為我在任何一個(gè)正規(guī)專業(yè)的項(xiàng)目里直接把文字覆蓋到圖片上。這個(gè)方法是一個(gè)需要很高技巧的方法，就是說這種方法雖然可能可以產(chǎn)生非?？犰?/strong>的效果，但使用的時(shí)候需要小心。
這是 Aquatilis 的網(wǎng)站，非常值得一看。
在整個(gè)圖片上覆蓋一個(gè)圖層可能是最簡單的辦法了。如果原始的圖片不夠黑，那你就可以在整個(gè)圖片上加一個(gè)半透光的黑色圖層。
這是一個(gè)非常流行的帶有黑色圖層的網(wǎng)站主頁。
這個(gè) Upstart 的網(wǎng)站有 35% 透光度的黑色濾鏡。
如果你打開 Firebug(譯者注：Firefox 的 debug 工具)，你會(huì)發(fā)現(xiàn)原圖因?yàn)榱炼群蛯?duì)比度都比較高，所以字體看不清楚。但是當(dāng)有了一個(gè)黑色的濾鏡后，這些都不是問題！
這個(gè)方法用在縮略圖和小的圖片上同樣好用。
Charity:water 網(wǎng)站的縮略圖。
黑色的圖層盡管是最簡單，并且用處最廣泛的，你當(dāng)然也可以用別的顏色的圖層。
這實(shí)在是再簡單不過了，但同時(shí)又很可靠。試試把一個(gè)微微透光的黑色長方形框覆蓋在一些白色的文字上。如果這個(gè)圖層足夠透光，你依舊可以保證即使文字底下是任何圖片，文字依舊清晰可見。
Modern Honolulu 的 iPhone 設(shè)計(jì)稿 Miguel Oliva Márquez。
你也可以往文本框里塞不同的顏色，但是當(dāng)然要保持謹(jǐn)慎。
現(xiàn)在這些是粉色的例子。作者是 Mark Conlan。
這個(gè)把底部圖片模糊化來讓人看得清楚上面的文本是出人意料得好用
Snapguide 里用了大量的背景模糊化。注意看，這些模糊的區(qū)域同時(shí)也被加深過。
iOS 7 的設(shè)計(jì)真的讓背景模糊化變得流行起來，雖然 Windows Vista 也用模糊化達(dá)到了非常好的效果。
你也可以用照片里虛化的背景作為模糊化的區(qū)域。但是請(qǐng)注意 —— 這個(gè)辦法并不好使。如果你的圖片做了一點(diǎn)改變，你就得確保這些文字一直都是在模糊化的區(qū)域里。
我的點(diǎn)是，試著讀清楚下面的小標(biāo)題。
這網(wǎng)站到底是怎么被通過的？
####?方法 4：底部逐漸變深
底部逐漸變深這個(gè)方法指的是你把圖片里靠近底部的地方逐漸變黑，然后接著把白字填在上面。這是個(gè)非常巧妙的辦法。我在看到 Medium 之前都沒想到過。
對(duì)于一個(gè)普通人，這些 Medium 上的收集的設(shè)計(jì)僅僅是圖片上覆蓋了些白色的文字-但是這種想法我說是很錯(cuò)誤滴！從中部（0% 透光度的黑色）到底部（20% 透光度）有個(gè)小小的漸變。
這個(gè)漸變很難看出來，但是一定在那，而且絕對(duì)提高了字體的辨識(shí)度。
同時(shí)你可以注意一下這些 Medium 的收集縮略圖用了一點(diǎn)點(diǎn)的文字陰影來更加提高識(shí)別度。這些人真的非常棒！
這個(gè)技巧的效果是 Medium 即使把任何文字放在任何圖上，也可以得到能讀的結(jié)果。
哦，還有一件事 — 為什么圖片是往下變深？原因見我的第一條規(guī)則-燈光一直是從上面照下來的。為了讓眼睛看起來更舒服，圖片必須要是在底下慢慢變深，就像我們看見的所有東西一樣。
更高級(jí)的做法：如果把模糊化和底部漸變混起來...這就是底部模糊化了！
用在 SnapGuide 上的“底部模糊”。媽媽再也不用擔(dān)心我在上面使用圖層了！
這個(gè) Elastica blog 是怎么可以在任何的照片下有一個(gè)可以讀得出的標(biāo)題？而且這些圖片是：
并不是特別黑的
有一點(diǎn)高對(duì)比度
我們很難解釋為什么這些文字可以看得這么清晰。你看一下下面這些：
答案是：紗幕化。
紗幕是一種讓光變得更柔和的攝影裝備?，F(xiàn)在這也是種視覺設(shè)計(jì)的技術(shù)。這個(gè)技術(shù)通過讓圖片變得更柔和來讓覆蓋在上面的文字更加可以辨認(rèn)。
如果我們用瀏覽器放大 Elastica blog 的網(wǎng)頁，我們可以很清楚得看到發(fā)生了什么。
在這句標(biāo)題“145,000 Salesforce Users Come out to Celebrate…”有一個(gè)讓透光度漸變的框。你應(yīng)該可以很簡單的注意到高對(duì)比度的照片下這個(gè)深藍(lán)色的背景。
這可能是最微妙的把文字可靠得覆蓋在圖片上的辦法，并且我在別的地方并沒法看到（但是這個(gè)方法真的是很隱蔽）。但是把這個(gè)標(biāo)記下來，你可能不知道你什么時(shí)候會(huì)用到。
使得文字變好看并且符合背景的好辦法經(jīng)常是把文字往相反的方向 —— 比如說，變大但是更輕。
在我看來，創(chuàng)建漂亮的 UI 的最難的部分是調(diào)整文字 —— 并且這并不是因?yàn)槿鄙龠x項(xiàng)。如果你讀過書，你大概用過所有的能讓別人注意過文字的辦法，或者讓人不想看這些文字的辦法：
尺寸（更大 或者更?。?/p>
顏色（更多或者更少對(duì)比度；明亮的顏色會(huì)吸引眼球）
字重（加深或者變輕）
大小寫（小寫，大寫，或者用標(biāo)題的格式）（譯者注：中文并沒辦法做到）
斜體
字符間距（或者 —— 用 更 高 大 上 的 術(shù) 語 —— 字距!)
邊距（講道理這并不是一個(gè)字體本身的性質(zhì)，但是可以用來吸引別人的注意，所以它可以出現(xiàn)在表上）
顏色，大小寫，和字據(jù)用得不錯(cuò)。這是@workjon的孩子做的。當(dāng)然，也關(guān)注下@workjon —— 他的文字設(shè)計(jì)很棒！
這里有幾個(gè)別的可以吸引別人注意的選項(xiàng)，但是并不常用同時(shí)也不是很推薦。
下劃線下劃線現(xiàn)在基本意味著是超鏈接，并且要我說，下劃線并不值得我們?nèi)ソo它負(fù)于任何意義。
字體的背景顏色并不常見，但是這個(gè) 37signals 網(wǎng)站把它用做超鏈接。
刪除線你個(gè) 90 年代的 CSS 魔術(shù)師給我滾開，沒錯(cuò)，就是指你！
在我個(gè)人的經(jīng)驗(yàn)里，當(dāng)我發(fā)現(xiàn)一個(gè)我沒辦法找到合適的文本樣式的時(shí)候，并不是因?yàn)槲彝浟巳绾斡么髮懟蛘吒畹念伾?— 一般是因?yàn)樽詈玫慕鉀Q辦法經(jīng)常需要把一些互相沖突的性質(zhì)組合在一起。
你可以把所有的調(diào)整文字的方法分成以下兩個(gè)組：
那些提高可見度的樣式大，粗，大寫等等。
那些降低可見度的樣式小，少對(duì)比度，小邊距等等。
我們會(huì)分別把這些叫做 "up-pop" 和 "down-pop" 的樣式，以紀(jì)念 favorite adjective。
從 hugeinc.com 來的案例分析。
“材料設(shè)計(jì)”（Material Design）里有很多 up-pop 的的內(nèi)容。它是大的；它是高對(duì)比度的；它是非常****粗的。
這些底下的東西，但是，是 "down-pop" 的。他們是小的，低對(duì)比度，并且很細(xì)的。
現(xiàn)在是非常重要的內(nèi)容。
這個(gè)頁的標(biāo)題是僅有的用上了所有 up-pop 方法的文本。對(duì)于所有別的東西，你需要 up-pop 并且 down-pop。
如果需要強(qiáng)調(diào)一個(gè)網(wǎng)站的內(nèi)容元素，需要同時(shí)用上 up-pop 和 down-pop 的辦法。這么做可以允許不同的內(nèi)容元素看上去有不同的樣子，防止你的東西被淹沒。
這是一個(gè)視覺要素的平衡。
這個(gè)完美設(shè)計(jì)的 Blu Homes 網(wǎng)站有很多大標(biāo)題，但是需要強(qiáng)調(diào)的字都是小寫 —— 太多的強(qiáng)調(diào)會(huì)看上去用力過猛。
Blue Homes 網(wǎng)站用了字的尺寸，顏色赫爾排列來吸引你眼球的數(shù)字 — 但是注意，他們并沒選擇用深灰色，反而同時(shí)用了很輕的字重，低對(duì)比度的顏色。
這些在文字底下小小的標(biāo)簽，然而，是灰色的，并且是即大寫又非常粗重的。
這些都和平衡有關(guān)。
contentsmagazine.com
Contents Magazine 是一個(gè) up-pop 和 down-pop 很不錯(cuò)的案例分析。
這些文章標(biāo)題基本上是僅有的非斜體的網(wǎng)頁要素。在這種情況下，缺少斜體更加得吸引眼球（尤其是當(dāng)和加粗的字重組合的時(shí)候）。
在 by 的這一行里的作者名字是被加粗的 — 讓它和平常字重的 "by" 分別了開來。
這個(gè)小的，低對(duì)比度“已經(jīng)跳出來的”字體給其他的要素讓出了位置 —— 但是因?yàn)榇髮?，很寬的字間距，和很大的邊距，你可以在想看這些字的時(shí)候清楚得看到這些字。
調(diào)整被選擇的元素和漂浮的效果是同一種文字游戲的另一個(gè)可能 —— 但是會(huì)更難。
變化字體的尺寸，大小寫，或者字重經(jīng)常會(huì)改變文字占據(jù)多少空間。這種變化可以限制住懸浮效果。
所以你還剩下哪些選項(xiàng)呢？
字的顏色
背景顏色
陰影
下劃線
輕微的動(dòng)畫 — 提高，降低，等等。
一個(gè)很可靠的選擇是：嘗試把白色的元素放上顏色，或者把有顏色的元素變白，但同時(shí)加深后面的背景
這個(gè)選擇的按鈕從有顏色變成白色，但是依舊相對(duì)于背景保持高對(duì)比度。
我會(huì)送給你這個(gè)段話：調(diào)整文本的樣式是很難的。
但是每次我在想“這個(gè)文本大概就是不可能看上去好看的”，我都是錯(cuò)的。我只需要逐漸變得更擅長。同時(shí)，去變得更擅長，我只要不斷進(jìn)行嘗試就行了。
所以我提供給你個(gè)慰藉：如果這個(gè)文字看上去不好看，不要擔(dān)心 —— 只要你能變得更擅長。但是，嘿，讓我們不斷嘗試，使自己變得很強(qiáng)!
嘿，順便說一句：如果你想學(xué)更多和調(diào)整文字樣式有關(guān)的東西，看看這個(gè) Learn UI Design，我在這里講了更多細(xì)節(jié)。
有些字體很好看。就用他們。
注意：在這個(gè)部分里，沒有什么需要學(xué)習(xí)的策略或別的什么。我只會(huì)列出一些好看的字體然后供你去下載，接著運(yùn)用。
注意 #2：由于前幾年字體的選項(xiàng)得到了擴(kuò)展，并且有些字體都快用爛了，今天我會(huì)特別推薦一些特別的字體組。如果你想看更多的字體，可以閱讀 Learn UI Design，這里面有一套可以交互的完整版的字體。（譯者注：這篇文章只推薦了英文字體，不一定適用于漢字）
特殊格調(diào)的網(wǎng)站能用非常特殊的字體但是對(duì)于大部分的 UI 設(shè)計(jì)，你只希望一些簡單和干凈的字體。所以兄弟，沒錯(cuò)，別用 Wisdom Script。
同時(shí)，我也只推薦免費(fèi)的字體。為啥？這份學(xué)習(xí)指南是給學(xué)習(xí)者的。外面有超多免費(fèi)的字體，所以就讓我們用吧。
我推薦你現(xiàn)在就下載，然后當(dāng)你開始為項(xiàng)目設(shè)計(jì)的時(shí)候就用。
這個(gè) Font Book 應(yīng)用里“用戶”這一欄可以很方便得幫你記住你下載了什么。
Ubuntu
Ubuntu (以上)。有非常多的字重。對(duì)于某些應(yīng)用有點(diǎn)過于特殊了 — 不過對(duì)別的就很完美?？梢栽?a target="_blank" >Google Fonts 上找到。
Open Sans
Open Sans（以上）。一個(gè)讀起來容易也很流行的字體。時(shí)候正文部分?？梢栽?Google Fonts 上找到。
Bebas Neue.
Bebas Neue（以上）。做標(biāo)題很棒。全是大寫的?？梢栽?Fontfabric - 這里面有很棒的“Bebas Neue in use”的展示。
Montserrat
Montserrat(以上)。只有兩種字重，但是足夠用了。絕對(duì)是最好的 Gotham 和 Proxima 的免費(fèi)替代品，但是并沒有這兩個(gè)好。可以在 Google Fonts 上找到。
Raleway
Raleway（以上）。對(duì)于標(biāo)題非常好；可能對(duì)于文本正文有點(diǎn) 過了（你看那些 W）。有非常好看得極細(xì)的字重（并沒有照片）?？梢栽?Google Fonts 上找到。
Cabin
Cabin(以上)?？梢栽?Google Fonts 上找到。
Lato
Lato(以上)。可以在 Google Fonts 上找到。
PT Sans
PT Sans(以上)?？梢栽?Google Fonts 上找到。
Entypo Social
Entypo Social (以上)。這是個(gè)圖標(biāo)字體。沒有錯(cuò)，一旦你用了 Entypo,你會(huì)在所有地方看到它，但是這些社交網(wǎng)站的圖標(biāo)真是太棒了。不想在小小的有顏色的圈圈里重新創(chuàng)造一堆社交網(wǎng)站的 logo？沒錯(cuò)，我也不想。在 Entypo.com 可以找到。
我會(huì)在這里給你留下一些資源：
Beautiful Google web fonts。這個(gè)網(wǎng)站非常棒得展現(xiàn)出 Google Fonts 能有多好看。我從它那找了好多好多次靈感。
FontSquirrel。一堆最棒的商業(yè)用途的字體，并且全部都是免費(fèi)的。
Typekit。如果你有 Adobe Creative Cloud（就是訂購了 Photoshop 或者 Illustrator 等等），那么你可以有免費(fèi)用到很棒的字體。沒錯(cuò)，連 Proxima Nova 都有！
當(dāng)我第一次試圖坐下來然后設(shè)計(jì)應(yīng)用的元素的時(shí)候 —— 一個(gè)按鈕，一個(gè)表格，一個(gè)圖標(biāo)，一個(gè)彈出框， 所有的所有 —— 也是我第一次意識(shí)到自己對(duì)于如何讓一個(gè)元素好看的知識(shí)是如何匱乏的時(shí)候。
但是多幸運(yùn)的是，我并不是一定需要?jiǎng)?chuàng)造出什么新的 UI 元素。這就意味著我可以一直看別人是如何做的然后從中間挑點(diǎn)好的。
但是我們要從哪里挑呢？這里有。
這個(gè)特邀的“給設(shè)計(jì)師展示”網(wǎng)站有網(wǎng)絡(luò)上最好質(zhì)量的 UI 設(shè)計(jì)作品。你可以在這里找到幾乎最好的網(wǎng)站。
事實(shí)上，你應(yīng)該關(guān)注我在 Dribble 上的作品這里。這里也有一些人你可以關(guān)注：
Victor Erixon。他有一個(gè)非常獨(dú)特個(gè)人樣式 — 并且他的作品很棒。漂亮，干凈，扁平的設(shè)計(jì)。這貨做設(shè)計(jì)師只有大概 3 年，但是他已經(jīng)是做得很頂尖了。
Focus Lab。這些人是“Dribbble 名人”，并且他們的作品名副其實(shí)。非常多元化；一直是最頂尖的。
Cosmin Capitanu。一個(gè)非常厲害的多面手。他做得東西未來感十足，但又不過于高調(diào)。他非常善于使用顏色，然而他并不十分注重 UX 的東西 — 當(dāng)然這個(gè)批評(píng)也針對(duì) Dribbble 這個(gè)網(wǎng)站。
這些分別都是 Victor Erixon，Focus Lab 和 Cosmin Capitanu 的作品。
我壓根沒聽說過 "warmarc"，但是他手機(jī) UI 的 pinboard（譯者注：pinboard 指的是 pininterest 里的專欄) 在我絞盡腦汁找好看的 UI 時(shí)候令人震驚得好用。
這里有一個(gè)列表的移動(dòng)應(yīng)用的截圖。Pttrns 的好處是它整個(gè)網(wǎng)站是按照 —— 你懂得 —— UX 模式。這可以幫助你非常快速得搜索各種界面要素，無論你在做什么，管它是登錄界面，用戶信息，搜索結(jié)果，等等。
我是那句直到善于能模仿最好的作品之前，所有藝術(shù)家都應(yīng)該是只鸚鵡的堅(jiān)信者。之后你就可以你自己的風(fēng)格；開發(fā)出新的潮流。
在這之間，讓我們像小偷一樣作圖。
這個(gè)章節(jié)的想法中，“像藝術(shù)家一樣借鑒”是從這本書eponymous book中借鑒出來的。我并沒有讀那本書，主要原因是這個(gè)標(biāo)題很好的概括了這本書里想表達(dá)的想法。
我寫這篇文章是因?yàn)槲蚁Ｍ约涸谝郧翱梢宰x到這篇。我希望這篇可以幫助你。如果你是個(gè) UX 設(shè)計(jì)師，在你素描出個(gè)大框架后做一個(gè)好看的 mockup。如果你是個(gè)開發(fā)者，接手下一個(gè)自己的項(xiàng)目然后讓它變得很好看。我不希望需要去上幾年藝術(shù)學(xué)校才能做好的 UI。只要觀察，模仿，并且告訴你的朋友哪些可以用。
無論怎么樣，這是迄今為止我學(xué)到的所有東西，同時(shí)我也一直會(huì)是個(gè)初學(xué)者。
—-
聯(lián)系客服
