這是這個(gè)系列的第二篇，第一篇這見 這里：

以下是這個(gè)系列的簡(jiǎn)潔 UI 的 7 條規(guī)則：

光來(lái)自天空 (Light comes from the sky)

黑白優(yōu)先 (Black and white first)

加倍你的空白 (Double your whitespace)

學(xué)習(xí)在圖像上疊加文本的方法 ( Learn the methods of overlaying text on images )

使文本層次分明 ( Make text pop?—?and un-pop )

只使用好看的字體 ( Only use good fonts )

像藝術(shù)家一樣借鑒 ( Steal like an artist )

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

在圖像上添加吸引人文本方法只那么幾種，這里介紹五種常規(guī)和一種額外的方法。

如果想成為一名優(yōu)秀的 UI 設(shè)計(jì)師，必須學(xué)會(huì)如何以一種吸引人的方式將文本放置于圖像之上。每個(gè)優(yōu)秀的 UI 設(shè)計(jì)師在這個(gè)方面都能做得很好，相反的糟糕的 UI 設(shè)計(jì)師都處理的很差，或者根本不處理。不管你是優(yōu)秀還是平庸的設(shè)計(jì)師，閱讀這篇文章后，多多少少對(duì)你都有幫助。

方法一：將文本直接放置于圖片上

我一直在考慮要不要把這個(gè)方法算進(jìn)五種方法的一種，但設(shè)計(jì)上，直接將文字放置于圖片上讓視覺(jué)效果更好是可行的。

這種方法有各種各樣的問(wèn)題和需要注意事項(xiàng):

圖像色調(diào)應(yīng)該偏暗，并且豎直方向上不能有太大的色差。

文本必須是白色的。

測(cè)量不同尺寸的屏幕或窗口以確保圖像顯示正常。

我想我從來(lái)沒(méi)有在任何專業(yè)項(xiàng)目中直接在圖像上使用文本，之所以提到它，是把它看做是一種應(yīng)該掌握的技巧，就是說(shuō)這種方法雖然可能可以產(chǎn)生非常酷炫的效果，但使用的時(shí)候需要小心

方法二：文本覆蓋整個(gè)圖像

將文本放在圖像上最簡(jiǎn)單的方法就是用遮罩將圖片整個(gè)覆蓋，如果原始圖像不夠暗，可以在整個(gè)圖像上添加半透明的黑色圖層。

下圖是一個(gè)時(shí)下流行的、用半透明黑色遮罩覆蓋圖片的示例。

如果打開發(fā)工具并刪除覆蓋層，將看到原始圖像太亮，對(duì)比度太大，文本難以辨認(rèn)。但是用黑色半透明的圖層覆蓋，看上去就沒(méi)問(wèn)題了!

這個(gè)方法用在縮略圖和小的圖片上同樣好用。

雖然黑色覆蓋是最簡(jiǎn)單和最通用的，當(dāng)然也有用彩色覆蓋。

方法三：盒模型中的文本

這種方法簡(jiǎn)單又可靠。試試把一個(gè)稍微透明的黑色長(zhǎng)方形框里放上一些白色的文字。如果圖片的不透明度（opaque）足夠，你可以使用任意一張圖片，都可以保證文字的清晰可讀。

當(dāng)然也可以使用一些顏色，只是在選擇色彩時(shí)候要有依據(jù)。

方法四：模糊圖片

使文本內(nèi)容清晰的一個(gè)神奇的方法，是將背景圖像的一部分變得模糊。

蘋果確實(shí)讓背景變得模糊了，盡管它是在 Windows 系統(tǒng)中最先實(shí)現(xiàn)的。

你也可以用照片的散焦（out-of-focus）部分來(lái)作為模糊區(qū)域。但是請(qǐng)注意 —— 這個(gè)辦法并不好使。如果圖片做了一點(diǎn)改變，就得確保這些文字位置在對(duì)應(yīng)的模糊區(qū)域中。

請(qǐng)閱讀下圖中的子標(biāo)題：

方法五：Floor Fade

Floor Fade 指的是圖片靠近底部的地方逐漸變黑，然后接著把白字填在上面。這是個(gè)非常巧妙的辦法，我不知道是誰(shuí)發(fā)明的，在Medium使用它之前，我從未見過(guò)有人用它。

對(duì)于上面的圖像，你可能會(huì)覺(jué)得就是直接在圖像上放置了白色的文字，其實(shí)不然，你仔細(xì)看，你會(huì)發(fā)現(xiàn)其實(shí)是一個(gè)由 0% 不透明度到20%不透明度漸變的矩形框。

這種漸變效果確實(shí)很難看出來(lái)，但確實(shí)是有的，絕對(duì)改善清晰度。

還要注意的是，這幾張縮略圖使用了文本陰影來(lái)進(jìn)一步增強(qiáng)可讀性，這個(gè)做法真棒!

Medium達(dá)到了這樣的境界：任何文字放置在任何圖片上，都能獲得良好的閱讀效果。

哦，還有一件事——為什么圖像底部逐漸變暗? 關(guān)于這個(gè)問(wèn)題的答案，上篇講的規(guī)則1——燈光通常是從上面照下來(lái)的。為了讓我們的眼睛看起來(lái)更自然，圖像的底部稍微暗一點(diǎn)，就像我們所見過(guò)的其他事物一樣。

更高級(jí)的做法，就是結(jié)合模糊化，這樣的結(jié)合就是底部模糊化了。

額外的辦法：紗罩

無(wú)論背景圖像怎么變,Elastica blog的標(biāo)題總是清晰易讀的，這是怎么做到的？應(yīng)該是這樣：

并不是特別黑的

有一點(diǎn)高對(duì)比度

然而，很難描述為什么文本如此易讀。 看一看：

答案是：紗罩。

紗幕是一種使光線更柔和的攝影器材?，F(xiàn)在它也是一種視覺(jué)設(shè)計(jì)技術(shù)，用于軟化圖像，使疊加的文本更清晰。

在瀏覽器放大 Elastica 博客上，就可以更清楚地做了什么效果。

在這句標(biāo)題 “145,000 Salesforce Users Come out to Celebrate…”有一個(gè)讓透光度漸變的框。應(yīng)該可以很簡(jiǎn)單的注意到高對(duì)比度的照片下這個(gè)深藍(lán)色的背景。

這可能是在圖像上可靠地疊加文本的最微妙的方式，我在其他任何地方都沒(méi)有見過(guò)(但它相當(dāng)隱蔽)。不過(guò)要記下來(lái)，你或許在將來(lái)某些時(shí)候需要它。

讓文本看起來(lái)美觀和合適通常做法的是以對(duì)比的方式設(shè)置樣式 - 例如，更大但更輕。

在我看來(lái)，創(chuàng)建一個(gè)漂亮的用戶界面最困難的部分就是文本的樣式 - 當(dāng)然不是因?yàn)椴皇煜み@些屬性。 如果你剛小學(xué)畢業(yè)，那么你很可能已經(jīng)使用了一種方法來(lái)引起注意或遠(yuǎn)離我們看到的文本：

尺寸(大或小)

顏色（反差較大或較??；色彩鮮明）

字重（加深或者變輕）

拼寫（小寫，大寫和標(biāo)題的格式）

斜體

字母間距

邊距

還有一些其做法可以引起別人的注意，通常不常用也不推薦使用：

下劃線 --下劃線默認(rèn)表示鏈接，除了鏈接外也沒(méi)必要用它。

文本的背景色 -- 不常見，但37 signals的網(wǎng)站曾使用它做為鏈接的樣式。

刪除線 -- 90年代的CSS用法了

根據(jù)我的個(gè)人經(jīng)驗(yàn)，當(dāng)我發(fā)現(xiàn)一個(gè)我似乎無(wú)法找到合適的文本樣式時(shí)，并不是因?yàn)槲彝藝L試使用邊距或更暗的顏色 - 而是因?yàn)樽詈玫慕鉀Q辦法是同時(shí)設(shè)置幾組“相矛盾的（competing）”屬性。

Up-pop and down-pop

可以將設(shè)計(jì)文本的所有方式分為兩組：

增加文本可見性的樣式。大號(hào)字體、粗體、大寫的等等。

降低文本可見性的樣式。小號(hào)字體，對(duì)比度小的，邊距小的，等等。

我們會(huì)這些叫做 "up-pop" 和 "down-pop" 的樣式，以紀(jì)念 favorite adjective。

“Material Design” 的標(biāo)題有很多“up-pop”。大字號(hào)，強(qiáng)烈對(duì)比，粗體。

底部的元素就是“down-pop”的。字體小，對(duì)比度低，并且字體較細(xì)。

以下是非常重要的內(nèi)容。

這個(gè)頁(yè)的標(biāo)題是僅有的用上了所有 up-pop 方法的文本。 對(duì)于所有別的東西，你需要 up-pop 并且 down-pop。

如果需要強(qiáng)調(diào)一個(gè)網(wǎng)站的內(nèi)容元素，那么就同時(shí)使用“up-pop”和“down-pop”。這是為了防止元素過(guò)于突兀，將不同元素限制在它們應(yīng)有的視覺(jué)重要性之內(nèi)。

完美設(shè)計(jì)的 Blu Homes 網(wǎng)站有一些大標(biāo)題，但是需要強(qiáng)調(diào)的單詞都是小寫的——過(guò)多的強(qiáng)調(diào)看起來(lái)會(huì)讓人看不到重點(diǎn)。

Blu Homes 網(wǎng)站上的這些數(shù)字以它們的大小、顏色和對(duì)齊方式吸引你的眼球，但是請(qǐng)注意，它們同時(shí)被淡化了，字體很輕，低對(duì)比度的顏色。

然而，數(shù)字下面的小標(biāo)簽雖然是灰色和小字體的，但也是大寫字重大的。

這一切構(gòu)成了平衡。

Contents Magazine 是一個(gè) up-pop 和 down-pop 很不錯(cuò)的案例分析。

文章標(biāo)題基本上是惟一的非斜體頁(yè)面元素。在這種情況下，缺乏斜體字會(huì)更有效地吸引眼球(特別是結(jié)合粗體的字體)

在 by 的這一行里的作者名字是被加粗的 — 讓它和平常字重的 "by" 分別了開來(lái)。

小的、低對(duì)比度的“已經(jīng)過(guò)時(shí)”文本不會(huì)礙手礙腳——但是由于它的大寫類型、大的字母間距和大的空白，你可以在查找時(shí)立即看到它。

選中和鼠標(biāo)停留樣式

被選中和鼠標(biāo)停留的文本樣式是另外一回事了——并且很難。

通常，改變字體大小、大小寫或字體權(quán)重會(huì)改變文本占用的區(qū)域大小，這種變化可以限制住懸浮效果。

所以還有哪些屬性可以更改呢？

字段顏色

背影顏色

陰影

下劃線

輕微的動(dòng)畫 - 升高，降低等

一個(gè)實(shí)用的辦法:嘗試將白色元素變成彩色，或者將彩色的元素變?yōu)榘咨?，但是文本的背景色要選用深色。

設(shè)計(jì)文本的樣式是很難的。

最后我還是要告訴你，給文本加樣式是很難的。

如果你想學(xué)習(xí)更多關(guān)于文本樣式的知識(shí)，請(qǐng)查看學(xué)習(xí)UI設(shè)計(jì)，在這里有更多的詳細(xì)介紹。

有些字體不錯(cuò)，使用這些字體。

本節(jié)沒(méi)有策略或內(nèi)容需要學(xué)習(xí)，只列出一些不錯(cuò)的免費(fèi)字體供你下載和使用。

這份學(xué)習(xí)指南是給學(xué)習(xí)者的，外面有超多免費(fèi)的字體，所以就讓我們用吧。

我建議大家現(xiàn)在就去下載它們，然后使用它們來(lái)對(duì)你的項(xiàng)目進(jìn)行可視化設(shè)計(jì)。

以下推薦字體跟級(jí)別沒(méi)有關(guān)系：

1. Work Sans

有時(shí)候正在設(shè)計(jì)一些需要現(xiàn)代，干凈字體的東西，但是還要有一點(diǎn)樂(lè)趣。 Work Sans 非常適合這種場(chǎng)景。

下載地址：沒(méi)包含斜體的 有包含斜體的。

2. Roboto

一種極好、干凈的、通用的字體。雖然它是 Android 的默認(rèn)字體，但對(duì)于 iPhone 和 web 應(yīng)用程序來(lái)說(shuō)，仍然沒(méi)有得到充分的使用主要還是免費(fèi)的!

谷歌地圖有用到該字體

下載地址請(qǐng)點(diǎn)擊這里。

3. Montserrat

我曾經(jīng)猶豫是否推薦 Montserrat 字體，因?yàn)樗鼪](méi)有斜體字，字距怪異，而且厚得很難看)。但這個(gè)項(xiàng)目一直很活躍，Montserrat 變成了一種不可思議的字體。

它最有名的可能是最受歡迎（和精心設(shè)計(jì)的）Proxima Nova 的最佳免費(fèi)替代品。

在選擇任何字體時(shí)，最好查看大寫、句子大小寫和所有的字重。你永遠(yuǎn)不知道什么時(shí)候稍微不同的設(shè)置會(huì)成為你想要的風(fēng)格。比較上面的兩個(gè)鏡頭——同樣的字體，兩種不同的感覺(jué)。

下載地址點(diǎn)擊這里。

4. Source Sans Pro

我喜歡 Source Sans 的一件事是當(dāng)你想要使用令人難以置信的過(guò)度使用的 Open Sans 或 Lato 時(shí)，它是一個(gè)很好的選擇。

Source Sans與 Open Sans或 Lato - neutral 字符有許多相同的優(yōu)點(diǎn)，只是有一點(diǎn)人性化(而不是冷冰冰的、生硬的幾何字體)，而且對(duì)于用戶界面非常有用。

可以在 Google Fonts 上找到

5. IBM Plex Sans

去年，IBM 發(fā)布了自己的字體 Plex。

Plex Serif 和 Plex Mono 輕松配對(duì)。

可以在 Google Fonts 上找到

6. Feather Icons

雖然許多流行的圖標(biāo)集（ahem，F(xiàn)ont Awesome）具有過(guò)于圓潤(rùn)和起泡的形狀，但與簡(jiǎn)潔的設(shè)計(jì)不能很好地搭配，但是 Feather Icons 是一種非常不受歡迎的解決方案。

作者還沒(méi)有把它打包成圖標(biāo)字體，但是有人在 Github 上放了一個(gè)字體版本，可以很好地跟蹤原始設(shè)置（如果你只使用了套裝中的10或20個(gè)圖標(biāo)，沒(méi)有必要加載整個(gè)包）。

下載地址：SVG set, partial icon font

有一些資源：

Beautiful Google web fonts。這個(gè)網(wǎng)站非常棒得展現(xiàn)出 Google Fonts 能有多好看。作者從它那找了好多好多次靈感。

FontSquirrel。一組最好的字體可供商業(yè)使用，而且完全免費(fèi)。

Adobe Fonts。如果你使用的是 Adobe Creative Cloud（ 即訂閱 Photoshop 或Illustrator等 ），那么可以免費(fèi)訪問(wèn)大量專業(yè)字體。甚至比我上面推薦的還要好：Proxima Nova，Adelle Sans，DIN，F(xiàn)reight Text 等等。

Learn UI Design。尋找更好的字體？作者的用戶界面設(shè)計(jì)課程有一個(gè)字體推薦列表，包含超過(guò) 60 種免費(fèi)，涵蓋所有類型的字體（襯線，平板，等寬字體，手寫等），并包括每個(gè)字體的注釋 字體效果最好。

我第一次嘗試設(shè)計(jì)一些應(yīng)用程序元素 - 按鈕，表，圖表，彈出窗口 - 這是我第一次意識(shí)到我對(duì)如何讓這些元素好看而知之甚少。

但幸運(yùn)的是，我還沒(méi)有發(fā)明任何新的 UI 元素。這意味著我總能看到別人是如何做到的，并從中挑選最好的。

但是我們要從哪里挑呢？這里有：

1.Dribbble

這個(gè)特邀的“給設(shè)計(jì)師展示”網(wǎng)站有網(wǎng)絡(luò)上最好質(zhì)量的 UI 設(shè)計(jì)作品。你可以在這里找到幾乎最好的網(wǎng)站。

事實(shí)上，你可以在 Dribble 關(guān)注我的里面的作品，這里還有一些人你也可以關(guān)注:

Jamie Syke?；旧厦刻於及l(fā)布新的UI，一些流行的東西回歸豐富的經(jīng)驗(yàn)和設(shè)計(jì)。我能說(shuō)什么呢？關(guān)注就對(duì)咯。

Balkan Brothers。似乎是一個(gè)老生常談的說(shuō)法，設(shè)計(jì)師越接近俄羅斯，他們就越擅長(zhǎng)顏色。 這些克羅地亞設(shè)計(jì)師非常棒，保持平淡有趣。 總是很棒的漸變，顏色和陰影。

Elegant Seagulls。如果你曾經(jīng)想過(guò)“天哪，我怎么做比標(biāo)準(zhǔn)網(wǎng)格更有趣的事情？”，瀏覽他們的一些照片，這里有你想要的答案。

Cosmin Capitanu。一個(gè)非常厲害的多面手。他做得東西未來(lái)感十足，但又不過(guò)于高調(diào)。他非常善于使用顏色，然而他并不十分注重 UX 的東西 — 當(dāng)然這個(gè)批評(píng)也針對(duì) Dribbble 這個(gè)網(wǎng)站。

分別來(lái)自 Balkan Brothers 和 Cosmin Capitanu。

分別來(lái)自 Elegant Seagulls 和 Jamie Syke。

2.Flat UI Pinboard

我不知道“warmarc”是誰(shuí)，但是他的手機(jī)UI的pinboard讓我找到了許多漂亮的UI。

3. Pttrns

一個(gè)移動(dòng)app屏幕截圖的匯總。Pttrns 的好處是整個(gè)網(wǎng)站都是由用戶體驗(yàn)?zāi)Ｊ絹?lái)組織的。這使得快速研究目前正在使用的任何界面，無(wú)論是登錄頁(yè)面、用戶配置文件、搜索結(jié)果等等，都非常方便。

我堅(jiān)信每個(gè)藝術(shù)家都應(yīng)該像鸚鵡一樣去模仿，直到他們擅長(zhǎng)模仿最好的。然后去尋找你自己的風(fēng)格，發(fā)明新的潮流。

在這期間，讓我們都先當(dāng)一個(gè)模仿者吧。

我寫這篇文章是因?yàn)槲蚁Ｍ约涸谝郧翱梢宰x到這篇。希望對(duì)你有幫助。如果你是一個(gè)用戶體驗(yàn)設(shè)計(jì)師，畫好線框圖后做一個(gè)漂亮的模型。

如果你是一名開發(fā)人員，那就把你的下一個(gè)次要項(xiàng)目做好。我不想U(xiǎn)I只有專業(yè)的人才能做的很好。就是觀察、模仿和記錄有用的東西。

無(wú)論如何，這就是我到目前為止所學(xué)到的，同時(shí)我永遠(yuǎn)都是一個(gè)學(xué)生，會(huì)不斷向別學(xué)習(xí)！

你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！

干貨系列文章匯總?cè)缦?，覺(jué)得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq44924588...

我是小智，公眾號(hào)「大遷世界」作者，對(duì)前端技術(shù)保持學(xué)習(xí)愛好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！

關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。