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