[譯] 創造華麗 UI 的 7 個規則（Part 2）

• 原文地址：7 Rules for Creating Gorgeous UI (Part 2)
• 原文做者：Erik D. Kennedy
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：xujunjiejack
• 校對者：maoqyhz

一部出自於技術宅的通往視覺審美的指南

這是這個指南的第二部分，在此以前，你須要閱讀第一部分。

咱們正在討論可讓你不須要去上美術學院就能夠設計簡潔 UI 的規則。

下面是這些規則：

1. 光線來自天空。（查看第 1 部分
2. 首選白色和黑色。（查看第 1 部分
3. 添加更多的空白。（查看第 1 部分
4. 學習如何在圖片上添加文字。
5. 令文本井井有條。
6. 僅使用好看的字體。
7. 像藝術家同樣借鑑。

---

規則 4：學習如何在圖片上添加文字

如今只有幾種可以可靠得將文字精美得添加在圖片上的辦法。如下描述了 5 種常規和 1 種額外的方法。

若是你想成爲一個很好的 UI 設計師，你須要學習如何用吸引人的辦法把文字覆蓋在圖片上。每一個優秀的UI設計師都會在這個方面處理得很好，但平庸的設計師每每處理得很糟糕，甚至不會處理。不管你是哪種平庸的設計師，在讀了這個章節後，你會有巨大的提高。

方法 0：直接在圖片上添加文字

我一直在猶豫是否要在這篇文章裏包含這個方法，可是嚴格來講，直接在圖片上添加文字而且讓設計好看是可行的。

Otter Surfboards 看着像精緻的 Instagram 配圖，可是就是有點難讀圖片上面的字。

如下是這個方法的缺陷和注意事項：

1. 圖片必須是黑色的，而且沒有不少高對比度。
2. 字體必須是白的 —— 我敢打賭你找不到一個又簡單又幹淨的反例。真的，只有白色這一個。
3. 你須要在每種顯示尺寸下測試文本是否清晰。

你的設計都符合這些條件了？棒。只要你以後別再改字或着這個圖片，你應該就能夠用你的設計了。

我不認爲我在任何一個正規專業的項目裏直接把文字覆蓋到圖片上。這個方法是一個須要很高技巧的方法，就是說這種方法雖然可能能夠產生很是酷炫的效果，但使用的時候須要當心。

這是 Aquatilis 的網站，很是值得一看。

方法 1：文本覆蓋整個圖片

在整個圖片上覆蓋一個圖層多是最簡單的辦法了。若是原始的圖片不夠黑，那你就能夠在整個圖片上加一個半透光的黑色圖層。

這是一個很是流行的帶有黑色圖層的網站主頁。

這個 Upstart 的網站有 35% 透光度的黑色濾鏡。

若是你打開 Firebug(譯者注：Firefox 的 debug 工具)，你會發現原圖由於亮度和對比度都比較高，因此字體看不清楚。可是當有了一個黑色的濾鏡後，這些都不是問題！

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

Charity:water 網站的縮略圖。

黑色的圖層儘管是最簡單，而且用處最普遍的，你固然也能夠用別的顏色的圖層。

方法 2：把文本放框裏

這實在是再簡單不過了，但同時又很可靠。試試把一個微微透光的黑色長方形框覆蓋在一些白色的文字上。若是這個圖層足夠透光，你依舊能夠保證即便文字底下是任何圖片，文字依舊清晰可見。

Modern Honolulu 的 iPhone 設計稿 Miguel Oliva Márquez。

你也能夠往文本框裏塞不一樣的顏色，可是固然要保持謹慎。

如今這些是粉色的例子。做者是 Mark Conlan。

方法 3：把圖片模糊化

這個把底部圖片模糊化來讓人看得清楚上面的文本是出人意料得好用

Snapguide 裏用了大量的背景模糊化。注意看，這些模糊的區域同時也被加深過。

iOS 7 的設計真的讓背景模糊化變得流行起來，雖然 Windows Vista 也用模糊化達到了很是好的效果。

你也能夠用照片裏虛化的背景做爲模糊化的區域。可是請注意 —— 這個辦法並很差使。若是你的圖片作了一點改變，你就得確保這些文字一直都是在模糊化的區域裏。

Teehan + Lax

個人點是，試着讀清楚下面的小標題。

這網站究竟是怎麼被經過的？

#### 方法 4：底部逐漸變深

底部逐漸變深這個方法指的是你把圖片裏靠近底部的地方逐漸變黑，而後接着把白字填在上面。這是個很是巧妙的辦法。我在看到 Medium 以前都沒想到過。

對於一個普通人，這些 Medium 上的收集的設計僅僅是圖片上覆蓋了些白色的文字-可是這種想法我說是很錯誤滴！從中部（0% 透光度的黑色）到底部（20% 透光度）有個小小的漸變。

這個漸變很難看出來，可是必定在那，並且絕對提升了字體的辨識度。

同時你能夠注意一下這些 Medium 的收集縮略圖用了一點點的文字陰影來更加提升識別度。這些人真的很是棒！

這個技巧的效果是 Medium 即便把任何文字放在任何圖上，也能夠獲得能讀的結果。

哦，還有一件事 — 爲何圖片是往下變深？緣由見個人第一條規則-燈光一直是從上面照下來的。爲了讓眼睛看起來更舒服，圖片必需要是在底下慢慢變深，就像咱們看見的全部東西同樣。

更高級的作法：若是把模糊化和底部漸變混起來...這就是底部模糊化了！

用在 SnapGuide 上的「底部模糊」。媽媽不再用擔憂我在上面使用圖層了！

額外的辦法：紗幕化

這個 Elastica blog 是怎麼能夠在任何的照片下有一個能夠讀得出的標題？並且這些圖片是：

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

咱們很難解釋爲何這些文字能夠看得這麼清晰。你看一下下面這些：

答案是：紗幕化。

紗幕是一種讓光變得更柔和的攝影裝備。如今這也是種視覺設計的技術。這個技術經過讓圖片變得更柔和來讓覆蓋在上面的文字更加能夠辨認。

若是咱們用瀏覽器放大 Elastica blog 的網頁，咱們能夠很清楚得看到發生了什麼。

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

這多是最微妙的把文字可靠得覆蓋在圖片上的辦法，而且我在別的地方並無法看到（可是這個方法真的是很隱蔽）。可是把這個標記下來，你可能不知道你何時會用到。

---

規則 5：令文本井井有條

使得文字變好看而且符合背景的好辦法常常是把文字往相反的方向 —— 好比說，變大可是更輕。

在我看來，建立漂亮的 UI 的最難的部分是調整文字 —— 而且這並非由於缺乏選項。若是你讀過書，你大概用過全部的能讓別人注意過文字的辦法，或者讓人不想看這些文字的辦法：

• 尺寸（更大 或者更小）
• 顏色（更多或者更少對比度；明亮的顏色會吸引眼球）
• 字重（加深或者變輕）
• 大小寫（小寫，大寫，或者用標題的格式）（譯者注：中文並沒辦法作到）
• 斜體
• 字符間距（或者 —— 用 更 高 大 上 的 術 語 —— 字距!)
• 邊距（講道理這並非一個字體自己的性質，可是能夠用來吸引別人的注意，因此它能夠出如今表上）

顏色，大小寫，和字據用得不錯。這是@workjon的孩子作的。固然，也關注下@workjon —— 他的文字設計很棒！

這裏有幾個別的能夠吸引別人注意的選項，可是並不經常使用同時也不是很推薦。

• 下劃線下劃線如今基本意味着是超連接，而且要我說，下劃線並不值得咱們去給它負於任何意義。
• 字體的背景顏色並不常見，可是這個 37signals 網站把它用作超連接。
• 刪除線你個 90 年代的 CSS 魔術師給我滾開，沒錯，就是指你！

在我我的的經驗裏，當我發現一個我沒辦法找到合適的文本樣式的時候，並非由於我忘記了如何用大寫或者更深的顏色 — 通常是由於最好的解決辦法常常須要把一些互相沖突的性質組合在一塊兒。

Up-pop 和 Down-pop

你能夠把全部的調整文字的方法分紅如下兩個組：

• 那些提升可見度的樣式大，粗，大寫等等。
• 那些下降可見度的樣式小，少對比度，小邊距等等。

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

從 hugeinc.com 來的案例分析。

「材料設計」（Material Design）裏有不少 up-pop 的的內容。它是大的；它是高對比度的；它是很是****粗的。

這些底下的東西，可是，是 "down-pop" 的。他們是小的，低對比度，而且很細的。

如今是很是重要的內容。

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

若是須要強調一個網站的內容元素，須要同時用上 up-pop 和 down-pop 的辦法。這麼作能夠容許不一樣的內容元素看上去有不一樣的樣子，防止你的東西被淹沒。

這是一個視覺要素的平衡。

這個完美設計的 Blu Homes 網站有不少大標題，可是須要強調的字都是小寫 —— 太多的強調會看上去用力過猛。

Blue Homes 網站用了字的尺寸，顏色赫爾排列來吸引你眼球的數字 — 可是注意，他們並沒選擇用深灰色，反而同時用了很輕的字重，低對比度的顏色。

這些在文字底下小小的標籤，然而，是灰色的，而且是即大寫又很是粗重的。

這些都和平衡有關。

contentsmagazine.com

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

• 這些文章標題基本上是僅有的非斜體的網頁要素。在這種狀況下，缺乏斜體更加得吸引眼球（尤爲是當和加粗的字重組合的時候）。
• 在 by 的這一行裏的做者名字是被加粗的 — 讓它和日常字重的 "by" 分別了開來。
• 這個小的，低對比度「已經跳出來的」字體給其餘的要素讓出了位置 —— 可是由於大寫，很寬的字間距，和很大的邊距，你能夠在想看這些字的時候清楚得看到這些字。

選取和懸浮的樣式

調整被選擇的元素和漂浮的效果是同一種文字遊戲的另外一個可能 —— 可是會更難。

變化字體的尺寸，大小寫，或者字重常常會改變文字佔據多少空間。這種變化能夠限制住懸浮效果。

因此你還剩下哪些選項呢？

• 字的顏色
• 背景顏色
• 陰影
• 下劃線
• 輕微的動畫 — 提升，下降，等等。

一個很可靠的選擇是：嘗試把白色的元素放上顏色，或者把有顏色的元素變白，但同時加深後面的背景

這個選擇的按鈕從有顏色變成白色，可是依舊相對於背景保持高對比度。

我會送給你這個段話：調整文本的樣式是很難的。

可是每次我在想「這個文本大概就是不可能看上去好看的」，我都是錯的。我只須要逐漸變得更擅長。同時，去變得更擅長，我只要不斷進行嘗試就好了。

因此我提供給你個慰藉：若是這個文字看上去很差看，不要擔憂 —— 只要你能變得更擅長。可是，嘿，讓咱們不斷嘗試，使本身變得很強!

嘿，順便說一句：若是你想學更多和調整文字樣式有關的東西，看看這個 Learn UI Design，我在這裏講了更多細節。

---

規則 6：僅使用好看的字體

有些字體很好看。就用他們。

注意：在這個部分裏，沒有什麼須要學習的策略或別的什麼。我只會列出一些好看的字體而後供你去下載，接着運用。

注意 #2：因爲前幾年字體的選項獲得了擴展，而且有些字體都快用爛了，今天我會特別推薦一些特別的字體組。若是你想看更多的字體，能夠閱讀 Learn UI Design，這裏面有一套能夠交互的完整版的字體。（譯者注：這篇文章只推薦了英文字體，不必定適用於漢字）

特殊格調的網站能用很是特殊的字體可是對於大部分的 UI 設計，你只但願一些簡單和乾淨的字體。因此兄弟，沒錯，別用 Wisdom Script。

同時，我也只推薦免費的字體。爲啥？這份學習指南是給學習者的。外面有超多免費的字體，因此就讓咱們用吧。

我推薦你如今就下載，而後當你開始爲項目設計的時候就用。

這個 Font Book 應用裏「用戶」這一欄能夠很方便得幫你記住你下載了什麼。

Ubuntu

Ubuntu (以上)。有很是多的字重。對於某些應用有點過於特殊了 — 不過對別的就很完美。能夠在Google Fonts 上找到。

Open Sans

Open Sans（以上）。一個讀起來容易也很流行的字體。時候正文部分。能夠在 Google Fonts 上找到。

Bebas Neue.

Bebas Neue（以上）。作標題很棒。全是大寫的。能夠在 Fontfabric - 這裏面有很棒的「Bebas Neue in use」的展現。

Montserrat

Montserrat(以上)。只有兩種字重，可是足夠用了。絕對是最好的 Gotham 和 Proxima 的免費替代品，可是並無這兩個好。能夠在 Google Fonts 上找到。

Raleway

Raleway（以上）。對於標題很是好；可能對於文本正文有點 過了（你看那些 W）。有很是好看得極細的字重（並無照片）。能夠在 Google Fonts 上找到。

Cabin

Cabin(以上)。能夠在 Google Fonts 上找到。

Lato

Lato(以上)。能夠在 Google Fonts 上找到。

PT Sans

PT Sans(以上)。能夠在 Google Fonts 上找到。

Entypo Social

Entypo Social (以上)。這是個圖標字體。沒有錯，一旦你用了 Entypo,你會在全部地方看到它，可是這些社交網站的圖標真是太棒了。不想在小小的有顏色的圈圈裏從新創造一堆社交網站的 logo？沒錯，我也不想。在 Entypo.com 能夠找到。

我會在這裏給你留下一些資源：

• Beautiful Google web fonts。這個網站很是棒得展示出 Google Fonts 能有多好看。我從它那找了好多好屢次靈感。
• FontSquirrel。一堆最棒的商業用途的字體，而且所有都是免費的。
• Typekit。若是你有 Adobe Creative Cloud（就是訂購了 Photoshop 或者 Illustrator 等等），那麼你能夠有免費用到很棒的字體。沒錯，連 Proxima Nova 都有！

---

規則7：像藝術家同樣借鑑

當我第一次試圖坐下來而後設計應用的元素的時候 —— 一個按鈕，一個表格，一個圖標，一個彈出框， 全部的全部 —— 也是我第一次意識到本身對於如何讓一個元素好看的知識是如何匱乏的時候。

可是多幸運的是，我並非必定須要創造出什麼新的 UI 元素。這就意味着我能夠一直看別人是如何作的而後從中間挑點好的。

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

1. Dribbble

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

事實上，你應該關注我在 Dribble 上的做品這裏。這裏也有一些人你能夠關注：

• Victor Erixon。他有一個很是獨特我的樣式 — 而且他的做品很棒。漂亮，乾淨，扁平的設計。這貨作設計師只有大概 3 年，可是他已是作得很頂尖了。
• Focus Lab。這些人是「Dribbble 名人」，而且他們的做品名副其實。很是多元化；一直是最頂尖的。
• Cosmin Capitanu。一個很是厲害的多面手。他作得東西將來感十足，但又不過於高調。他很是善於使用顏色，然而他並不十分注重 UX 的東西 — 固然這個批評也針對 Dribbble 這個網站。

這些分別都是 Victor Erixon，Focus Lab 和 Cosmin Capitanu 的做品。

2. Flat UI Pinboard

我壓根沒據說過 "warmarc"，可是他手機 UI 的 pinboard（譯者注：pinboard 指的是 pininterest 裏的專欄) 在我絞盡腦汁找好看的 UI 時候使人震驚得好用。

3. Pttrns

這裏有一個列表的移動應用的截圖。Pttrns 的好處是它整個網站是按照 —— 你懂得 —— UX 模式。這能夠幫助你很是快速得搜索各類界面要素，不管你在作什麼，管它是登陸界面，用戶信息，搜索結果，等等。

---

我是那句直到善於能模仿最好的做品以前，全部藝術家都應該是隻鸚鵡的堅信者。以後你就能夠你本身的風格；開發出新的潮流。

在這之間，讓咱們像小偷同樣做圖。

這個章節的想法中，「像藝術家同樣借鑑」是從這本書eponymous book中借鑑出來的。我並無讀那本書，主要緣由是這個標題很好的歸納了這本書裏想表達的想法。

---

總結

我寫這篇文章是由於我但願本身在之前能夠讀到這篇。我但願這篇能夠幫助你。若是你是個 UX 設計師，在你素描出個大框架後作一個好看的 mockup。若是你是個開發者，接手下一個本身的項目而後讓它變得很好看。我不但願須要去上幾年藝術學校才能作好的 UI。只要觀察，模仿，而且告訴你的朋友哪些能夠用。

不管怎麼樣，這是迄今爲止我學到的全部東西，同時我也一直會是個初學者。

—-

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。