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

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

數學美學的非藝術性入門指南

介紹

好的，讓我們先說重要的事。這個指南並不適用於所有人。那這本指南的目標使用者是誰呢？

• 開發人員 希望能夠在一個開發中設計一個屬於他們的看起來很不錯的使用者介面。
• UX 設計師 希望他們的產品組合看起來比五角大樓幻燈片更好看。或者那些知道他們可以在一個漂亮的 UI 中更好的實現他們出色的使用者體驗的設計師。

如果你去過藝術學校或者自認為已經是一名 UI 設計師，那麼你可能發現這個指南結合了 a.) 無聊、b.) 錯誤和 c.) 令人生氣。沒關係，您的所有批評一定都是對的。讓我們一起關閉標籤。

讓我告訴你會在本指南中找到什麼。

首先，我是一名沒有任何 UI 技能的 UX 設計師。我熱愛 UX 設計，很久以前，我並不關心使用者介面，在我意識到有很多好的理由來學習如何使介面看起來不錯後，才下定決心學習。

• 我的作品集看起來很糟糕，沒辦法充分反應我的思考過程和我的工作。
• 諮詢我 UX 的客戶寧願購買其他人的技能，因為他們的專長不僅僅是繪製箱子和箭頭。
• 我是否像在某個時期進行創業工作？最好做一個清掃工。

我有我自己的藉口。我並不理解美學，因為我認為他們都是在說廢話，我主修工程學 — 我都快以創造一些難看的東西為榮了。

“我並不理解美學，因為我認為他們都是在說廢話，我主修工程學 — 這簡直就是一種標籤，我都快以創造一些難看的東西為榮了。”

最後，我終於學會了到底什麼是應用程式的美學，就像是我努力學習其他創作的事物一樣：冷靜，理性分析。厚顏無恥的複製了有用的東西。我已經在一個 UI 專案上工作了 10 個小時，然而實際只為了專案付出了 1 個小時。其他 9 個小時拼命搜尋谷歌、Pinterest 和 Dribbble 去裡面複製有用的東西！

我在這些時間裡學到的教訓。

對於書呆子而言：如果我現在擅長設計使用者介面，那是因為我已經分析很多東西 — 而不是因為我通過直觀的對美以及平衡的理解才走出誤區。

這篇文章並不是理論的闡述。只是很純粹的應用文章。你不會看到關於黃金分割線的任何資訊。我甚至不會提色彩理論。只有我從錯誤學到的東西，並不斷將進行刻意練習。

用這種方式思考：柔道是根據幾個世紀的日本武術和哲學傳統演化而來的。你參加了柔道課程，除此之外，你還會聽到關於能量、流動以及和諧等知識。

另一方面，Krav Maga 則是由一些在 30 年代捷克斯洛伐克猶太人在街頭與納粹抗爭時發明的。那並沒有藝術在中間。在 Krav Maga 課程中，你將會學到如何用筆刺入某人的眼睛。

這是螢幕中的 Krav Maga。

規則

規則在這裡:

1. 光線來自天空。
2. 首選白色和黑色。
3. 新增更多的空白。
4. 學習如何在圖片上新增文字。（檢視部分 2）
5. 使文字彈出和取消彈出。（檢視部分 2）
6. 只使用好看的文體。（檢視部分 2）
7. 像藝術家一樣借鑑。（檢視部分 2）

讓我們開始吧。

規則一：光線來自天空

陰影是最有效的提示，用來告訴人類的大腦哪些是他們正在檢視的使用者介面的元素。

這也許是容易被忽視卻很重要去學習 UI 設計的一個內容：**光線來自天空。**光不斷的從天空而來，因此如果光從下而上則確實看起來非常怪異。

媽呀~

當光線來自於天空的時候，它照亮了物體的頂部並在其下面投下陰影。物體的頂部較為明亮，底部較暗。

你絕不會認為人們的下眼皮是需要畫出來眼影的，但是當一個化了下眼影的女孩突然出現在他們門前的時候確實會亮瞎那些呆子的眼睛。

那麼，使用者介面也正是如此。正如我們在所有的面部特徵的下側都有少量的陰影，幾乎每個 UI 元素的底部都有可以被發現的陰影。我們的螢幕是平的，但是我們投入了大量的藝術創作來製作出 3D 的效果。

這張圖片中我最喜歡的就是右下角的手指。

拿按鈕舉例。即使有了這個相對“平面”的按鈕，仍然有一些與光線相關的細節：

1. 按鈕沒有按下的時候具有黑色的底部邊緣，太陽並沒有照耀到的位置。
2. 按鈕沒有按下的時候頂部會亮一些對比底部。這是因為它模仿了一個稍微彎曲的表面。就像當你需要傾斜一面在你面前的鏡子來觀察太陽一樣，在上面的鏡面會向你的身上反射多一丁丁丁丁點的陽光。
3. 按鈕沒有按下的時候投射了微妙的陰影 — 如果放大可能看的更清楚一些。
4. 按下的按鈕雖然底部比頂部暗一些，但是整體顏色更深，因為他們雖然位於螢幕的平面上，太陽並不容易照射到它。有人可能會說我們在現實生活中看到的所有按鈕都會變暗，因為我們手擋住了光線。

這只是一個按鈕，然而這裡有四個小小的燈光效果。這些燈光效果就是我們的經驗。現在我們應該將它用於所有的東西。

雖然 iOS 6 有點過時了，但是它在光照行為方面確實是很好的研究案例。

這裡有一對 iOS 6 設定 — “請勿打擾”和“通知”。很簡單，對吧？但是看看他們有多少燈光效果。

• 插圖的控制皮膚邊緣投下了一個小陰影。
• “ON” 滑塊軌道也跟著設定了一點。
• “ON” 滑塊軌道為凹型，底部反射了更多的光線。
• 圖示邊緣被設定了一點點。看到他們頂部的明亮邊框了嗎？這代表一個垂直於光源的表面。因為垂直，所以這個表面接受了大量的光線，將大量的光線反射到眼睛中。
• 分隔的凹口在遠離太陽的部分被遮蓋，反之亦然。

分割線的凹槽的特寫鏡頭。來自我的一箇舊 Hubster 概念。

通常在嵌入的介面元素：

• 編輯欄
• 按下的按鈕
• 滑塊
• 單選按鈕（未選中）
• 核取方塊

通常在突出的元素：

• 按鈕（未按下）
• 滑塊按鈕
• 下拉控制元件
• 卡塊
• 所選單選按鈕的 button 部分
• 彈出視窗

現在你知道了，你會注意到他們到處都是。不客氣，初學者。

等等，扁平化設計怎麼樣呢，Erik?

iOS 7 讓“半扁平化設計”在科技界引起了轟動。這就是說他的半扁平化。 沒有模擬凸起或者凹痕 — 只是純色的線條和形狀。

我雖然和大家一樣喜歡乾淨和簡單。但是我認為這不是一個長期的趨勢。如何將我們的介面用 3D 來在細微處進行模擬的更加自然是不能完全放棄的。

更多的可能是，我們將會在不久的將來看到半扁平化的 UI 設計（而且我建議你精通這種設計）。我們將會繼續稱之為“扁平化設計”。依舊乾淨，依舊簡單簡單，但是會有一些陰影和點選/滑動的提示。

OS X Yosemite — 扁平化而不平面化。

在寫這篇文章時，Google 正在他們的產品中推出他們“Material 設計”語言。這是一種統一的視覺語言，它的核心理念就是模仿現實的世界。

Material 設計指南中的例證展示瞭如何使用不同的陰影來表達不同的深度。

我感覺這種東西是一種長期的趨勢。

它使用了現實世界的微妙的線索來傳達資訊。關鍵詞，微妙。

我們並不能說它沒有模擬現實世界，但是它又不像是 2006 年的網路。沒有紋理，沒有漸變，沒有發光。

我認為扁平化是未來的一種方式，平面化？切，只是過去而已。

這樣的平面化設計現在看起來很火！

規則 2：黑色和白色優先

在新增顏色之前進行灰度設計可以簡化視覺設計中最複雜部分 — 並且可以使強迫使您專注於間距和佈局元素。

UX 設計師現在真的是“移動優先”來進行設計。這意味著您在想象無法想象的畫素的 Retina 顯示器前優先考慮手機上的頁面和互動是如何工作的。

**其實這種約束很好。它可以簡化思想。**您從較難的問題開始（在小螢幕上可用的應用程式），然後通過同樣的解決方案去解決簡單的問題（大螢幕上可以使用的應用程式）。

那麼這裡就是一種類似的約束：優先設計黑色和白色。首先是在沒有色彩的幫助下讓應用變得美觀並且可用。最後新增色彩，僅此而已。

Haraldur Thorleifsson 的灰度線框看起來就如同極少的設計師完成的網站設計一樣好。

這是保持應用程式“乾淨”和“簡單”最可靠也是最簡單的方法。在過多的地方使用過多的顏色很容易搞砸設計的簡單和乾淨。黑和白優先這個原則強迫你首先關注諸如間距，尺寸和佈局等事情。這些都是乾淨簡單設計的首要關注點。

優雅的灰度

有些情況下黑白優先的原則並不是那麼有用。那些需要特殊感覺的設計 — “動感”、“華麗”或“卡通”等等。需要一個能夠非常好使用多種顏色搭配的設計師。但是大多數的應用程式沒有一個特別強烈的需求屬性，除了“乾淨”和“簡潔”。那些需要特殊設計的很難設計。

Julien Renvoye （左）和 Cosmin Capitanu （右）的華麗和充滿活力的設計。比看起來更難。

對於其他的設計來講，都是黑和白優先原則。

步驟 2：怎麼去新增顏色

只加一種顏色是能新增的最簡單的顏色。

新增一種顏色在灰度設計的網站可以很簡單而又有效的吸引眼球。

您同樣可以採取更深的一步。灰度 + 兩種顏色，或者灰度 + 單一色調的多種顏色。

讓我們用下顏色程式碼 — 等等，什麼是色調？

網頁上大體將顏色作為 RGB 十六進位制程式碼進行討論。其實忽略他們才是最有用的。RGB 並不是適合著色設計的一個有用的框架。HSB（與HSV同義，與HSL類似）更有用。

HSB 比 RGB 更好，因為它符合我們對顏色自然的看法，並且您可以預測 HSB 值的變化所給您看到顏色來帶的影響。

如果這對你來說是個新的東西，這裡 HSB 顏色的優質入門文章。

單色調金色主題來自 Smashing Magazine。

單色調藍色主題來自 Smashing Magazine。

通過修改單色調的飽和度以及亮度，您可以生成多種顏色 — 深色、亮色、背景、重點以及各種吸引注意的效果 — 而且不會讓人眼花繚亂。

使用來自一種或者兩種基本色調的多種顏色是為了在保持設計不凌亂的同時又可以強調和中和元素的最可靠的方法。

倒數計時器來自 Kerem Suer。

關於顏色的其他一些說明

色彩是視覺設計中最複雜的領域。雖然很多關於色彩的東西在你完成設計時並不是很實用，但是我卻看到了一些非常有用的東西。

一個小工具箱：

• 學習 UI 設計。無恥的推廣：這是我建立的一門課程，它包含3個小時的關於顏色設計的視訊（以及在 UI 設計中的其他主題總共13個多小時）。請看 learnui.design。
• 設計色彩學：（實用）框架。如果你喜歡這個部分，但是希望聽到更多的顏色（而不僅僅是黑色和白色），這是屬於你的文章。猜猜是誰寫的！
• 永遠不要用黑色 （Ian Storm Taylor）。這篇文章談論了完全平面化的灰色幾乎從來沒有出現在現實世界中。同時它也提到了如何飽和灰色陰影 — 尤其是深色陰影 — 為設計增添了視覺豐富性。另外，飽和的灰色其實更貼近現實世界，這是它最美的地方。
• Adobe Color CC。一個很棒的工具，用於查詢、修改和建立配色方案。
• Dribbble 通過顏色進行搜尋。 另一種很棒的方式來查詢特定顏色的作品。如果您已經確定了一種顏色，那就看看世界上最好的設計師是怎麼與這種顏色搭配。

規則 3：多用空白

為了讓 UI 看起來設計感十足，要新增更多的呼吸空間。

在規則 2中，我說使用白或者黑原則迫使設計者在考慮顏色之前考慮間距和佈局，為什麼這是件好事，那麼，現在就是討論如何進行間距和佈局的構造。

如果您從頭開始編寫 HTML 程式碼，你可能很熟悉HTML在頁面上預設的佈局方式。

基本上，所有的東西都擁擠在螢幕的頂部。字型很小，線條之間是絕對沒有空間的。段落之間確實有一丟丟空白，少得可憐。段落只是延伸到頁面的末尾，無論是 100 px 還是 10000 px。

從審美的角度上來講，這太糟糕了。如果你想讓你的 UI 看起來很有設計感，您需要在這之間新增呼吸的空間。

有時候就是一個荒謬的數值。

HTML 和 CSS 的留白

如果你像我一樣經常使用 CSS 進行格式設定，那麼預設情況下不會有留白的，現在是時候解決這些不良的習慣了。開始考慮將空格作為預設空間 — 所有的內容都是以空格開始，直到您通過新增頁面元素將其刪除。

聽起來像是禪學？我認為這是人們仍然素描出這些東西的重要原因。

從空白頁開始意味著以空白開頭。您從一開始就會想到利潤率和間距。您繪製的所有內容都是有意識的去刪除空白。

從一堆無格式的 HTML 開始，意味著就是以內容開頭，間距則是後來才考慮的事情。這必須明確說明。

以下是 Piotr Kwiatkowski 的音樂播放器概念圖。

要特別注意左側的選單。

左側選單

選單項之間的垂直空間完全是文字本身高度的兩倍。您注意到這是 12px 的字型，並且在上面和下面填充同樣多的間距。

或者看看標題列表。“PLAYLISTS” 和它自己的下劃線之間有 15px 的間距。這比字型本身的高度還要高。更別提每個列表之間間隔了25個畫素了。

---

頂部導航欄中有更多的空間。文字 “Search all music” 是導航欄高度的 20%。圖示也是相應的比例。

左側邊欄顯示了充裕的文字行間的間距，等等。

Piotr 認真考慮在這裡增加更多的空白，並且效果很好。儘管這只是他為了更有樂趣（據我所知），就美學而言，它非常漂亮，足以與最好的音樂使用者介面進行競爭。

---

適當的留白可以使一些複雜的介面看起來很簡單 — 就像是論壇。

論壇的設計來自於 Matt Sisto。

或者維基百科。

維基百科設計理念來自 Aurélien Salomon。

你可以找到更多的樣例，比如說，維基百科的重新設計捨棄了一些關鍵的網站的功能。但是你不得不說這是一個很好的學習方式！

在你的線條之間預留空間。

在你的元素之間預留空間。

在你的元素組之間預留空白。

分析可行性。

---

好的，第一部分已經完結，感謝你堅持看完！

在 Part 2，我會繼續討論剩下的 4 條規則:

4. 學習在圖片上疊加文字的方法。

5. 使文字彈出或者取消彈出。

6. 只使用優秀字型。

7. 像藝術家一樣複製。

如果你學到了有用的東西，讀 Part 2。

---

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