這是這個系列的第二篇，第一篇這見 這里：

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

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

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

加倍你的空白 (Double your whitespace)

學習在圖像上疊加文本的方法 ( 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ì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！

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

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

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

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

這種方法有各種各樣的問題和需要注意事項:

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

文本必須是白色的。

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

我想我從來沒有在任何專業(yè)項目中直接在圖像上使用文本，之所以提到它，是把它看做是一種應(yīng)該掌握的技巧，就是說這種方法雖然可能可以產(chǎn)生非?？犰诺男Ч?，但使用的時候需要小心

方法二：文本覆蓋整個圖像

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

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

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

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

雖然黑色覆蓋是最簡單和最通用的，當然也有用彩色覆蓋。

方法三：盒模型中的文本

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

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

方法四：模糊圖片

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

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

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

請閱讀下圖中的子標題：

方法五：Floor Fade

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

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

這種漸變效果確實很難看出來，但確實是有的，絕對改善清晰度。

還要注意的是，這幾張縮略圖使用了文本陰影來進一步增強可讀性，這個做法真棒!

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

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

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

額外的辦法：紗罩

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

并不是特別黑的

有一點高對比度

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

答案是：紗罩。

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

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

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

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

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

在我看來，創(chuàng)建一個漂亮的用戶界面最困難的部分就是文本的樣式 - 當然不是因為不熟悉這些屬性。 如果你剛小學畢業(yè)，那么你很可能已經(jīng)使用了一種方法來引起注意或遠離我們看到的文本：

尺寸(大或小)

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

字重（加深或者變輕）

拼寫（小寫，大寫和標題的格式）

斜體

字母間距

邊距

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

下劃線 --下劃線默認表示鏈接，除了鏈接外也沒必要用它。

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

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

根據(jù)我的個人經(jīng)驗，當我發(fā)現(xiàn)一個我似乎無法找到合適的文本樣式時，并不是因為我忘了嘗試使用邊距或更暗的顏色 - 而是因為最好的解決辦法是同時設(shè)置幾組“相矛盾的（competing）”屬性。

Up-pop and down-pop

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

增加文本可見性的樣式。大號字體、粗體、大寫的等等。

降低文本可見性的樣式。小號字體，對比度小的，邊距小的，等等。

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

“Material Design” 的標題有很多“up-pop”。大字號，強烈對比，粗體。

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

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

這個頁的標題是僅有的用上了所有 up-pop 方法的文本。 對于所有別的東西，你需要 up-pop 并且 down-pop。

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

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

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

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

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

Contents Magazine 是一個 up-pop 和 down-pop 很不錯的案例分析。

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

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

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

選中和鼠標停留樣式

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

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

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

字段顏色

背影顏色

陰影

下劃線

輕微的動畫 - 升高，降低等

一個實用的辦法:嘗試將白色元素變成彩色，或者將彩色的元素變?yōu)榘咨俏谋镜谋尘吧x用深色。

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

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

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

有些字體不錯，使用這些字體。

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

這份學習指南是給學習者的，外面有超多免費的字體，所以就讓我們用吧。

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

以下推薦字體跟級別沒有關(guān)系：

1. Work Sans

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

下載地址：沒包含斜體的 有包含斜體的。

2. Roboto

一種極好、干凈的、通用的字體。雖然它是 Android 的默認字體，但對于 iPhone 和 web 應(yīng)用程序來說，仍然沒有得到充分的使用主要還是免費的!

谷歌地圖有用到該字體

下載地址請點擊這里。

3. Montserrat

我曾經(jīng)猶豫是否推薦 Montserrat 字體，因為它沒有斜體字，字距怪異，而且厚得很難看)。但這個項目一直很活躍，Montserrat 變成了一種不可思議的字體。

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

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

下載地址點擊這里。

4. Source Sans Pro

我喜歡 Source Sans 的一件事是當你想要使用令人難以置信的過度使用的 Open Sans 或 Lato 時，它是一個很好的選擇。

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

可以在 Google Fonts 上找到

5. IBM Plex Sans

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

Plex Serif 和 Plex Mono 輕松配對。

可以在 Google Fonts 上找到

6. Feather Icons

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

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

下載地址：SVG set, partial icon font

有一些資源：

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

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

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

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

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

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

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

1.Dribbble

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

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

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

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

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

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

分別來自 Balkan Brothers 和 Cosmin Capitanu。

分別來自 Elegant Seagulls 和 Jamie Syke。

2.Flat UI Pinboard

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

3. Pttrns

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

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

在這期間，讓我們都先當一個模仿者吧。

我寫這篇文章是因為我希望自己在以前可以讀到這篇。希望對你有幫助。如果你是一個用戶體驗設(shè)計師，畫好線框圖后做一個漂亮的模型。

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

無論如何，這就是我到目前為止所學到的，同時我永遠都是一個學生，會不斷向別學習！

你的點贊是我持續(xù)分享好東西的動力，歡迎點贊！

干貨系列文章匯總?cè)缦?，覺得不錯點個Star，歡迎 加群 互相學習。

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

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

關(guān)注公眾號，后臺回復福利，即可看到福利，你懂的。