建立華麗 UI 的 7條規則 第二部分 (2019年更新)

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

如下是這個系列的簡潔 UI 的 7 條規則：

1. 光來自天空 (Light comes from the sky)
2. 黑白優先 (Black and white first)
3. 加倍你的空白 (Double your whitespace)
4. 學習在圖像上疊加文本的方法 ( Learn the methods of overlaying text on images )
5. 使文本井井有條 ( Make text pop — and un-pop )
6. 只使用好看的字體 ( Only use good fonts )
7. 像藝術家同樣借鑑 ( Steal like an artist )

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！

4. 學習在圖像上疊加文本的方法

在圖像上添加吸引人文本方法只那麼幾種，這裏介紹五種常規和一種額外的方法。

若是想成爲一名優秀的 UI 設計師，必須學會如何以一種吸引人的方式將文本放置於圖像之上。每一個優秀的 UI 設計師在這個方面都能作得很好，相反的糟糕的 UI 設計師都處理的不好，或者根本不處理。無論你是優秀仍是平庸的設計師，閱讀這篇文章後，多多少少對你都有幫助。

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

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

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

1. 圖像色調應該偏暗，而且豎直方向上不能有太大的色差。
2. 文本必須是白色的。
3. 測量不一樣尺寸的屏幕或窗口以確保圖像顯示正常。

我想我歷來沒有在任何專業項目中直接在圖像上使用文本，之因此提到它，是把它看作是一種應該掌握的技巧，就是說這種方法雖然可能能夠產生很是酷炫的效果，但使用的時候須要當心

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

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

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

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

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

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

方法三：盒模型中的文本

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

固然也可使用一些顏色，只是在選擇色彩時候要有依據。

方法四：模糊圖片

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

蘋果確實讓背景變得模糊了，儘管它是在 Windows 系統中最早實現的。

你也能夠用照片的散焦（out-of-focus）部分來做爲模糊區域。可是請注意 —— 這個辦法並很差使。若是圖片作了一點改變，就得確保這些文字位置在對應的模糊區域中。

請閱讀下圖中的子標題：

方法五：Floor Fade

Floor Fade 指的是圖片靠近底部的地方逐漸變黑，而後接着把白字填在上面。這是個很是巧妙的辦法，我不知道是誰發明的，在Medium使用它以前，我從未見過有人用它。

對於上面的圖像，你可能會以爲就是直接在圖像上放置了白色的文字，其實否則，你仔細看，你會發現實際上是一個由 0% 不透明度到20%不透明度漸變的矩形框。

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

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

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

哦，還有一件事——爲何圖像底部逐漸變暗? 關於這個問題的答案，上篇講的規則1——燈光一般是從上面照下來的。爲了讓咱們的眼睛看起來更天然，圖像的底部稍微暗一點，就像咱們所見過的其餘事物同樣。

更高級的作法，就是結合模糊化，這樣的結合就是底部模糊化了。

額外的辦法：紗罩

不管背景圖像怎麼變,Elastica blog的標題老是清晰易讀的，這是怎麼作到的？應該是這樣：

• 並非特別黑的
• 有一點高對比度

然而，很難描述爲何文本如此易讀。 看一看：

答案是：紗罩。

紗幕是一種使光線更柔和的攝影器材。如今它也是一種視覺設計技術，用於軟化圖像，使疊加的文本更清晰。

在瀏覽器放大 Elastica 博客上，就能夠更清楚地作了什麼效果。

在這句標題 「145,000 Salesforce Users Come out to Celebrate…」有一個讓透光度漸變的框。應該能夠很簡單的注意到高對比度的照片下這個深藍色的背景。

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

5. 使文本井井有條

讓文本看起來美觀和合適一般作法的是以對比的方式設置樣式 - 例如，更大但更輕。

在我看來，建立一個漂亮的用戶界面最困難的部分就是文本的樣式 - 固然不是由於不熟悉這些屬性。 若是你剛小學畢業，那麼你極可能已經使用了一種方法來引發注意或遠離咱們看到的文本：

• 尺寸(大或小)
• 顏色（反差較大或較小；色彩鮮明）
• 字重（加深或者變輕）
• 拼寫（小寫，大寫和標題的格式）
• 斜體
• 字母間距
• 邊距

還有一些其作法能夠引發別人的注意，一般不經常使用也不推薦使用：

• 下劃線 --下劃線默認表示連接，除了連接外也不必用它。
• 文本的背景色 -- 不常見，但37 signals的網站曾使用它作爲連接的樣式。
• 刪除線 -- 90年代的CSS用法了

根據個人我的經驗，當我發現一個我彷佛沒法找到合適的文本樣式時，並非由於我忘了嘗試使用邊距或更暗的顏色 - 而是由於最好的解決辦法是同時設置幾組「相矛盾的（competing）」屬性。

Up-pop and down-pop

能夠將設計文本的全部方式分爲兩組：

• 增長文本可見性的樣式。大號字體、粗體、大寫的等等。
• 下降文本可見性的樣式。小號字體，對比度小的，邊距小的，等等。

咱們會這些叫作 "up-pop" 和 "down-pop" 的樣式，以記念 favorite adjective。

「Material Design」 的標題有不少「up-pop」。大字號，強烈對比，粗體。

底部的元素就是「down-pop」的。字體小，對比度低，而且字體較細。

如下是很是重要的內容。

這個頁的標題是僅有的用上了全部 up-pop 方法的文本。 對於全部別的東西，你須要 up-pop 而且 down-pop。

若是須要強調一個網站的內容元素，那麼就同時使用「up-pop」和「down-pop」。這是爲了防止元素過於突兀，將不一樣元素限制在它們應有的視覺重要性以內。

完美設計的 Blu Homes 網站有一些大標題，可是須要強調的單詞都是小寫的——過多的強調看起來會讓人看不到重點。

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

然而，數字下面的小標籤雖然是灰色和小字體的，但也是大寫字重大的。

這一切構成了平衡。

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

• 文章標題基本上是唯一的非斜體頁面元素。在這種狀況下，缺少斜體字會更有效地吸引眼球(特別是結合粗體的字體)
• 在 by 的這一行裏的做者名字是被加粗的 — 讓它和日常字重的 "by" 分別了開來。
• 小的、低對比度的「已通過時」文本不會礙手礙腳——可是因爲它的大寫類型、大的字母間距和大的空白，你能夠在查找時當即看到它。

選中和鼠標停留樣式

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

一般，改變字體大小、大小寫或字體權重會改變文本佔用的區域大小，這種變化能夠限制住懸浮效果。

因此還有哪些屬性能夠更改呢？

• 字段顏色
• 背影顏色
• 陰影
• 下劃線
• 輕微的動畫 - 升高，下降等

一個實用的辦法:嘗試將白色元素變成彩色，或者將彩色的元素變爲白色，可是文本的背景色要選用深色。

設計文本的樣式是很難的。

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

若是你想學習更多關於文本樣式的知識，請查看學習UI設計，在這裏有更多的詳細介紹。

6. 使用好看的字體

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

本節沒有策略或內容須要學習，只列出一些不錯的免費字體供你下載和使用。

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

我建議你們如今就去下載它們，而後使用它們來對你的項目進行可視化設計。

如下推薦字體跟級別沒有關係：

1. Work Sans

有時候正在設計一些須要現代，乾淨字體的東西，可是還要有一點樂趣。 Work Sans 很是適合這種場景。

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

2. Roboto

一種極好、乾淨的、通用的字體。雖然它是 Android 的默認字體，但對於 iPhone 和 web 應用程序來講，仍然沒有獲得充分的使用主要仍是免費的!

谷歌地圖有用到該字體

下載地址請點擊這裏。

3. Montserrat

我曾經猶豫是否推薦 Montserrat 字體，由於它沒有斜體字，字距怪異，並且厚得很難看)。但這個項目一直很活躍，Montserrat 變成了一種難以想象的字體。

它最有名的多是最受歡迎（和精心設計的）Proxima Nova 的最佳免費替代品。

在選擇任何字體時，最好查看大寫、句子大小寫和全部的字重。你永遠不知道何時稍微不一樣的設置會成爲你想要的風格。比較上面的兩個鏡頭——一樣的字體，兩種不一樣的感受。

下載地址點擊這裏。

4. Source Sans Pro

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

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

能夠在 Google Fonts 上找到

5. IBM Plex Sans

去年，IBM 發佈了本身的字體 Plex。

Plex Serif 和 Plex Mono 輕鬆配對。

能夠在 Google Fonts 上找到

6. Feather Icons

雖然許多流行的圖標集（ahem，Font Awesome）具備過於圓潤和起泡的形狀，但與簡潔的設計不能很好地搭配，可是 Feather Icons 是一種很是不受歡迎的解決方案。

做者尚未把它打包成圖標字體，可是有人在 Github 上放了一個字體版本，能夠很好地跟蹤原始設置（若是你只使用了套裝中的10或20個圖標，沒有必要加載整個包）。

下載地址：SVG set, partial icon font

有一些資源：

• Beautiful Google web fonts。這個網站很是棒得展示出 Google Fonts 能有多好看。做者從它那找了好多好屢次靈感。
• FontSquirrel。一組最好的字體可供商業使用，並且徹底免費。
• Adobe Fonts。若是你使用的是 Adobe Creative Cloud（ 即訂閱 Photoshop 或Illustrator等 ），那麼能夠免費訪問大量專業字體。甚至比我上面推薦的還要好：Proxima Nova，Adelle Sans，DIN，Freight Text 等等。
• Learn UI Design。尋找更好的字體？做者的用戶界面設計課程有一個字體推薦列表，包含超過 60 種免費，涵蓋全部類型的字體（襯線，平板，等寬字體，手寫等），幷包括每一個字體的註釋 字體效果最好。

7. 像藝術家同樣借鑑

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

但幸運的是，我尚未發明任何新的 UI 元素。這意味着我總能看到別人是如何作到的，並從中挑選最好的。

可是咱們要從哪裏挑呢？這裏有：

1.Dribbble

這個特邀的「給設計師展現」網站有網絡上最好質量的 UI 設計做品。你能夠在這裏找到幾乎最好的網站。

事實上，你能夠在 Dribble 關注個人裏面的做品，這裏還有一些人你也能夠關注:

• Jamie Syke。基本上天天都發布新的UI，一些流行的東西迴歸豐富的經驗和設計。我能說什麼呢？關注就對咯。
• Balkan Brothers。彷佛是一個老生常談的說法，設計師越接近俄羅斯，他們就越擅長顏色。 這些克羅地亞設計師很是棒，保持平淡有趣。 老是很棒的漸變，顏色和陰影。
• Elegant Seagulls。若是你曾經想過「天哪，我怎麼作比標準網格更有趣的事情？」，瀏覽他們的一些照片，這裏有你想要的答案。
• Cosmin Capitanu。一個很是厲害的多面手。他作得東西將來感十足，但又不過於高調。他很是善於使用顏色，然而他並不十分注重 UX 的東西 — 固然這個批評也針對 Dribbble 這個網站。

分別來自 Balkan Brothers 和 Cosmin Capitanu。

分別來自 Elegant Seagulls 和 Jamie Syke。

2.Flat UI Pinboard

我不知道「warmarc」是誰，可是他的手機UI的pinboard讓我找到了許多漂亮的UI。

3. Pttrns

一個移動app屏幕截圖的彙總。Pttrns 的好處是整個網站都是由用戶體驗模式來組織的。這使得快速研究目前正在使用的任何界面，不管是登陸頁面、用戶配置文件、搜索結果等等，都很是方便。

我堅信每一個藝術家都應該像鸚鵡同樣去模仿，直到他們擅長模仿最好的。而後去尋找你本身的風格，發明新的潮流。

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

總結

我寫這篇文章是由於我但願本身在之前能夠讀到這篇。但願對你有幫助。若是你是一個用戶體驗設計師，畫好線框圖後作一個漂亮的模型。

若是你是一名開發人員，那就把你的下一個次要項目作好。我不想UI只有專業的人才能作的很好。就是觀察、模仿和記錄有用的東西。

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

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

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

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

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。