摘要：未點擊的按鈕頂部的亮度略高于底部。我認為扁平化是未來的一種趨勢。這種限制是有好處的，這有助于簡化思想。同樣可以采取更深的一步。頂部的導航條有更多的空間。文字搜索音樂占了整個導航條高度的。

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

首先也是比較重要的，先說明點這篇指南并不適合所有人，主要適合以下從業者：

開發者希望能夠在必要時設計出自己漂亮的 UI。

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

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

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

黑白優先 (Black and white first)

加倍你的空白 (Double your whitespace)

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

使文本層次分明 （Part 2）( Make text pop?—?and un-pop )

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

像藝術家一樣借鑒 （Part 2）(Steal like an artist)

大腦在理解我們看到的界面時，影子是至關重要的因素。

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

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

你不會希望人們的下眼瞼都特別的黑吧，所以，如果我們在這些惡魔般的眼睛上面多加一些光亮，突然間他們就變成了你家門前的魔鬼女郎。

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

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

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

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

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

點擊后的按鈕，底部依然比頂部還要暗一些，并且整個按鈕全都更暗。這是因為它與屏幕本身處于同一個平面，光線就不能輕易的照到它了。有人可能會說，我們在現實生活中看到的所有按鍵都是暗的，因為我們的手去按按鈕時擋住了光線。

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

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

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

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

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

頂部的邊框顏色比較其它的深點，這代表一個垂直于光源的表面，因此接收到大量的光，因此將大量的光反射到你的眼睛中，導致周圍會變暗點。

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

文本輸入框

點擊后的按鈕

滑塊

單選按鈕（未選中）

復選框

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

按鈕 (未點擊)

滑塊按鈕

下拉控件

卡片

選中的單選按鈕

彈框

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

我和其他人一樣喜歡干凈和，但我不認為這是一個長期的趨勢。如何將我們的界面用 3D 來在細微處進行模擬的更加自然，似乎很難將這種做法完全放棄。

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

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

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

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

也不能說它完全沒有模擬真實世界，但是這不同于 2006 年的網頁設計風格，并沒有使用材質，漸變和光澤的情況出現。我認為扁平化是未來的一種趨勢。

在添加顏色之前先進行灰度化設計可以簡化視覺設計中最復雜的元素——并迫使用戶關注元素的間距和布局。

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

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

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

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

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

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

在有些情況下，黑白優先沒有那么有用。那些具有強烈的特定主題的設計——“運動”、“華麗”、“卡通”等等——需要一個能很好地運用色彩的設計師。但是大多數應用除了干凈和簡單之外，并沒有特別強烈的需求屬性。這些特定需求的設計難度也大得多。

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

步驟 2：怎么添加顏色

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

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

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

什么是色調

web 通常將顏色稱為RGB十六進制代碼，RGB 并非在設計中實現顏色的最優框架，更有用的是 HSB（H 代表色調，S 代表飽和度，B 代表亮度）(與HSV 同義，與 HSL 類似)。

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

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

《Smashing》 雜志的金色主題。

《Smashing》 雜志的藍色主題。

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

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

倒數計時器來自 Kerem Suer。

關于顏色的其他一些補充

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

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

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

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

Adobe Color CC：一個非常棒的工具，用于查找、修改和創建配色方案。

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

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

如果你從頭編寫 HTML 代碼，那么你可能熟悉默認情況下 HTML 在頁面上的布局方式。

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

從美學角度來說，這太糟糕了，如果你想讓 UI 看起來像設計好的，需要增加很多空白的間距。

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

特別要注意左邊的菜單。

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

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

頂部的導航條有更多的空間。文字“搜索音樂”占了整個導航條高度的20%。圖標也使用了類似的高度。

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

Piotr 認真考慮在這里增加更多的空白，并且效果很好。盡管這只是它為了更多樂趣（據我所知），就美學而言，它非常漂亮，能夠和市面上最好的音樂播放器UI界面相提并論。

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

或者維基百科

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

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

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

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

要第二部分繼續討論:

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)

你的點贊是我持續分享好東西的動力，歡迎點贊！

干貨系列文章匯總如下，覺得不錯點個Star，歡迎 加群 互相學習。

https://github.com/qq44924588...

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨，在進階的路上，共勉！

關注公眾號，后臺回復福利，即可看到福利，你懂的。