[譯] 創造華麗 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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。