【譯】建立華麗 UI 的 7條規則 (2019年更新)

譯者：前端小智

原文：medium.com/@erikdkenne…

原文：medium.com/@erikdkenne…

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

簡介

首先也是比較重要的，先說明點這篇指南並不適合全部人，主要適合如下從業者：

• 開發者但願可以在必要時設計出本身漂亮的 UI。

• 用戶體驗設計師但願他們的產品組合看起來比五角呆板的 PPT 更好看或者讓用戶獲得更好的用戶體驗。

本文中主要圍繞如下 7 規則講解：

1. 光來自天空 (Light comes from the sky)

2. 黑白優先 (Black and white first)

3. 加倍你的空白 (Double your whitespace)

4. 學習在圖像上疊加文本的方法（Part 2） (Learn the methods of overlaying text on images)

5. 使文本井井有條 （Part 2）( Make text pop — and un-pop )

6. 使用好看的字體 （Part 2）(Only use good fonts)

7. 像藝術家同樣借鑑 （Part 2）(Steal like an artist)

規則一： 光來自天空 (Light comes from the sky)

大腦在理解咱們看到的界面時，影子是相當重要的因素。

這多是關於 UI 設計最重要又容易被忽視一個內容：光來自天空。 光線來自天空，從上往上，以致於從下往上的光讓人看起來很怪異。

當光從天空而來時，它照亮事物的頂部，並在其下方投射陰影，物體的頂部比較亮，底部比較暗。

你不會但願人們的下眼瞼都特別的黑吧，因此，若是咱們在這些惡魔般的眼睛上面多加一些光亮，忽然間他們就變成了你家門前的魔鬼女郎。

UI 也是同樣，正如咱們在全部的面部特徵的下側都有少許的陰影，大量 UI 元素的底面也有陰影 。咱們的屏幕是平的，但咱們已經投入了大量的藝術創做讓元素富有 3D 效果。

拿按鈕舉例,即便有了這個相對 「平面」 的按鈕，仍然有一些與光線相關的細節：

1. 未點擊的按鈕(頂部)底部具備黑色的底部邊緣，正如夏天中午的，咱們站在太陽時影子的樣子。

2. 未點擊的按鈕頂部的 亮度略高於底部。這是由於它模仿了一個稍微彎曲的表面，就像你須要把面前的鏡子傾斜才能看到太陽同樣，傾斜的表面會把更多的陽光反射到你身上。

3. 未點擊的按鈕投射出一個稀薄地陰影——在放大的截圖中能看的更清楚。

4. 點擊後的按鈕，底部依然比頂部還要暗一些，而且整個按鈕全都更暗。這是由於它與屏幕自己處於同一個平面，光線就不能輕易的照到它了。有人可能會說，咱們在現實生活中看到的全部按鍵都是暗的，由於咱們的手去按按鈕時擋住了光線。

這只是個按鈕而已，就已經呈現了4個細微的光線效果，咱們如今要把光線理論用在全部地方。

iOS 6已通過時了，但它在輕度行爲方面提供了一個很好的案例研究。

這是 iOS 6的兩個設置—— 「請勿打擾」 和 「通知」，看看它們有多少光線效果。

• 嵌套控制面板的上邊緣投射一個微小的陰影

• 「ON」 滑塊軌道也跟着設置了一些陰影 * 「ON」 滑塊表面是凹的，底部會反射更多光線

• 頂部的邊框顏色比較其它的深點，這表明一個垂直於光源的表面，所以接收到大量的光，所以將大量的光反射到你的眼睛中，致使周圍會變暗點。

常見向內凹陷的視覺元素：

• 文本輸入框
• 點擊後的按鈕
• 滑塊
• 單選按鈕（未選中）
• 複選框

常見向外突出的視覺元素：

• 按鈕 (未點擊)
• 滑塊按鈕
• 下拉控件
• 卡片
• 選中的單選按鈕
• 彈框

扁平化設如何

扁平化設計是一種視覺風格，其中的元素缺少模擬的凹痕或凸出，它們只是純色的線條和形狀。

我和其餘人同樣喜歡乾淨和，但我不認爲這是一個長期的趨勢。如何將咱們的界面用 3D 來在細微處進行模擬的更加天然，彷佛很難將這種作法徹底放棄。

五年前，我預測咱們將會看到「扁平設計」的興起，至少在 2019 年，這就是咱們的現狀——扁平乾淨外觀的元素，加上一層陰影，幫助更加直接看到咱們所想要看到的內容。

在平面設計中，當點擊元素時，能夠適當加些陰影效果加強體驗。

扁平化設計的另外一個例子:谷歌的 Material Design language。

這纔是我身邊最常出現的事物，它使用微妙的現實世界的線索來表達展現事件特徵。

也不能說它徹底沒有模擬真實世界，可是這不一樣於 2006 年的網頁設計風格，並無使用材質，漸變和光澤的狀況出現。我認爲扁平化是將來的一種趨勢。

規則二：黑白優先 (Black and white first)

在添加顏色以前先進行灰度化設計能夠簡化視覺設計中最複雜的元素——並迫使用戶關注元素的間距和佈局。

最近用戶體驗設計師們熱衷於**「移動優先」**的設計。這意味着，在 Retina 屏幕中,得想象頁面上的交互在一個手機上是否行得通。

這種限制是有好處的，這有助於簡化思想。從較難的問題開始(在小屏幕上可用的應用程序)，而後採用更容易的問題的解決方案(在大屏幕上可用的應用程序)。

這裏有另外一個相似的結束:黑白優先。首先是在沒有色彩的幫助下讓應用變得美觀而且可用，最後添加色彩，僅此而已。

Haraldur Thorleifsson 的灰度線框圖看起來和其餘設計師的成品網站同樣好。

這是一個可靠和簡單的方法，可讓應用程序看起來 「乾淨」 和 「簡單」。在過多的地方使用過多的顏色很容易搞砸設計的簡單和乾淨。

**黑白優先 **迫使你首先關注空間、大小和佈局，這些都是簡潔設計的主要關注點。

在有些狀況下，黑白優先沒有那麼有用。那些具備強烈的特定主題的設計——「運動」、「華麗」、「卡通」等等——須要一個能很好地運用色彩的設計師。可是大多數應用除了乾淨和簡單以外，並無特別強烈的需求屬性。這些特定需求的設計難度也大得多。

對於其餘的設計來說，都是黑和白優先原則

步驟 2：怎麼添加顏色

最簡單的添加顏色是須要一種色調的。

在灰度網站上添加一種顏色能夠簡單有效地吸引眼球。

一樣能夠採起更深的一步。灰度 + 兩種顏色，或者灰度 + 單一色調的多種顏色。

什麼是色調

web 一般將顏色稱爲RGB十六進制代碼，RGB 並不是在設計中實現顏色的最優框架，更有用的是 HSB（H 表明色調，S 表明飽和度，B 表明亮度）(與HSV 同義，與 HSL 相似)。

HSB 比 RGB 更好，由於它符合咱們對顏色天然的見解，而且能夠觀察到 HSB 值的變化所給你看到顏色來帶的影響。

若是 HSB 對你來講是個新的東西，這裏 HSB 顏色的 優質入門文章。

《Smashing》 雜誌的金色主題。

《Smashing》 雜誌的藍色主題。

經過修改單一色調的飽和度和亮度，能夠生成多種顏色——暗色調、燈光、背景、重點、吸引眼球的特效——並且不會讓人眼花繚亂。

使用一種或兩種基本色調的多種顏色是強調和中和元素的最可靠的方法，並且不會使設計變得混亂。

關於顏色的其餘一些補充

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

* 學習 UI 設計：這是做者建立的一門課程，包含3個小時的彩色設計視頻(以及 20 多個小時的 UI設計主題視頻)，觀看地址 learnui.design。

* 設計色彩學：一個實用的框架。

• 永遠不要使用黑色 (伊恩·斯托姆·泰勒)：這篇文章談到徹底平面化的灰色幾乎歷來沒有出如今現實世界中，同時它也提到了如何飽和灰色陰影 — 尤爲是深色陰影 — 爲設計增添了視覺豐富性。另外，飽和的灰色其實更貼近現實世界，這是它最美的地方。

• Adobe Color CC：一個很是棒的工具，用於查找、修改和建立配色方案。

• Dribbble search-by-color： 看看世界上最好的設計師正在使用什麼顏色設計。

規則三：加倍你的空白 (Double your whitespace)

在規則 2 中，黑色優先 迫使設計師在考慮顏色以前考慮間距和佈局，接下來談談間距和佈局了。

若是你從頭編寫 HTML 代碼，那麼你可能熟悉默認狀況下 HTML 在頁面上的佈局方式。

基本上，全部東西都擠在頁面的頂部。字體很小，行與行之間沒有空格，段落之間有一小段空白，但很少。段落一直延伸到頁面的末尾，無論是 100px 仍是 10000 px。

從美學角度來講，這太糟糕了，若是你想讓 UI 看起來像設計好的，須要增長不少空白的間距。

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

特別要注意左邊的菜單。

菜單項之間的垂直空間是文本自己高度的兩倍，上面和下面有一樣多的內邊距。

或者看看列表標題。「播放列表」 和下劃線之間有 15px 的空間。這比字體自己還要高，更別提每一個列表之間間隔了 25 個像素了。

頂部的導航條有更多的空間。文字「搜索音樂」佔了整個導航條高度的20%。圖標也使用了相似的高度。

左邊欄的文字之間留出了比較充裕的空間，甚至更多。

Piotr 認真考慮在這裏增長更多的空白，而且效果很好。儘管這只是它爲了更多樂趣（據我所知），就美學而言，它很是漂亮，可以和市面上最好的音樂播放器UI界面相提並論。

適當的空白可讓一些最混亂的界面看起來更吸引人、更簡單，就像論壇同樣。

或者維基百科

你會發現對此有不少爭論，好比說，維基百科的從新設計捨棄了一些關鍵的網站的功能，可是你不得不說這是一個很好的學習方式！

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

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

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

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，歡迎 加羣 互相學習。

github.com/qq449245884…

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

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