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

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！

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

開發(fā)者希望能夠在必要時(shí)設(shè)計(jì)出自己漂亮的 UI。

用戶體驗(yàn)設(shè)計(jì)師希望他們的產(chǎn)品組合看起來比五角呆板的 PPT 更好看或者讓用戶得到更好的用戶體驗(yàn)。

本文中主要圍繞以下 7 規(guī)則講解：

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

黑白優(yōu)先 (Black and white first)

加倍你的空白 (Double your whitespace)

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

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

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

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

大腦在理解我們看到的界面時(shí)，影子是至關(guān)重要的因素。

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

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

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

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

拿按鈕舉例,即使有了這個(gè)相對(duì) “平面” 的按鈕，仍然有一些與光線相關(guān)的細(xì)節(jié)：

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

未點(diǎn)擊的按鈕頂部的 亮度略高于底部。這是因?yàn)樗７铝艘粋€(gè)稍微彎曲的表面，就像你需要把面前的鏡子傾斜才能看到太陽一樣，傾斜的表面會(huì)把更多的陽光反射到你身上。

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

點(diǎn)擊后的按鈕，底部依然比頂部還要暗一些，并且整個(gè)按鈕全都更暗。這是因?yàn)樗c屏幕本身處于同一個(gè)平面，光線就不能輕易的照到它了。有人可能會(huì)說，我們在現(xiàn)實(shí)生活中看到的所有按鍵都是暗的，因?yàn)槲覀兊氖秩グ窗粹o時(shí)擋住了光線。

這只是個(gè)按鈕而已，就已經(jīng)呈現(xiàn)了4個(gè)細(xì)微的光線效果，我們現(xiàn)在要把光線理論用在所有地方。

iOS 6已經(jīng)過時(shí)了，但它在輕度行為方面提供了一個(gè)很好的案例研究。

這是 iOS 6的兩個(gè)設(shè)置—— “請(qǐng)勿打擾” 和 “通知”，看看它們有多少光線效果。

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

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

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

常見向內(nèi)凹陷的視覺元素：

文本輸入框

點(diǎn)擊后的按鈕

滑塊

單選按鈕（未選中）

復(fù)選框

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

按鈕 (未點(diǎn)擊)

滑塊按鈕

下拉控件

卡片

選中的單選按鈕

彈框

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

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

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

在平面設(shè)計(jì)中，當(dāng)點(diǎn)擊元素時(shí)，可以適當(dāng)加些陰影效果增強(qiáng)體驗(yàn)。

扁平化設(shè)計(jì)的另一個(gè)例子:谷歌的 Material Design language。

這才是我身邊最常出現(xiàn)的事物，它使用微妙的現(xiàn)實(shí)世界的線索來表達(dá)展示事件特征。

也不能說它完全沒有模擬真實(shí)世界，但是這不同于 2006 年的網(wǎng)頁設(shè)計(jì)風(fēng)格，并沒有使用材質(zhì)，漸變和光澤的情況出現(xiàn)。我認(rèn)為扁平化是未來的一種趨勢。

在添加顏色之前先進(jìn)行灰度化設(shè)計(jì)可以簡化視覺設(shè)計(jì)中最復(fù)雜的元素——并迫使用戶關(guān)注元素的間距和布局。

最近用戶體驗(yàn)設(shè)計(jì)師們熱衷于“移動(dòng)優(yōu)先”的設(shè)計(jì)。這意味著，在 Retina 屏幕中,得想象頁面上的交互在一個(gè)手機(jī)上是否行得通。

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

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

Haraldur Thorleifsson 的灰度線框圖看起來和其他設(shè)計(jì)師的成品網(wǎng)站一樣好。

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

黑白優(yōu)先 迫使你首先關(guān)注空間、大小和布局，這些都是簡潔設(shè)計(jì)的主要關(guān)注點(diǎn)。

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

對(duì)于其他的設(shè)計(jì)來講，都是黑和白優(yōu)先原則

步驟 2：怎么添加顏色

最簡單的添加顏色是需要一種色調(diào)的。

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

同樣可以采取更深的一步。灰度 + 兩種顏色，或者灰度 + 單一色調(diào)的多種顏色。

什么是色調(diào)

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

HSB 比 RGB 更好，因?yàn)樗衔覀儗?duì)顏色自然的看法，并且可以觀察到 HSB 值的變化所給你看到顏色來帶的影響。

如果 HSB 對(duì)你來說是個(gè)新的東西，這里 HSB 顏色的 優(yōu)質(zhì)入門文章。

《Smashing》 雜志的金色主題。

《Smashing》 雜志的藍(lán)色主題。

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

使用一種或兩種基本色調(diào)的多種顏色是強(qiáng)調(diào)和中和元素的最可靠的方法，而且不會(huì)使設(shè)計(jì)變得混亂。

倒數(shù)計(jì)時(shí)器來自 Kerem Suer。

關(guān)于顏色的其他一些補(bǔ)充

色彩是視覺設(shè)計(jì)中最復(fù)雜的領(lǐng)域。雖然很多關(guān)于色彩的東西在你完成設(shè)計(jì)時(shí)并不是很實(shí)用，但是我卻看到了一些非常有用的東西：

*　學(xué)習(xí) UI 設(shè)計(jì)：這是作者創(chuàng)建的一門課程，包含3個(gè)小時(shí)的彩色設(shè)計(jì)視頻(以及 20 多個(gè)小時(shí)的 UI設(shè)計(jì)主題視頻)，觀看地址 learnui.design。

*　設(shè)計(jì)色彩學(xué)：一個(gè)實(shí)用的框架。

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

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

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

在規(guī)則 2 中，黑色優(yōu)先 迫使設(shè)計(jì)師在考慮顏色之前考慮間距和布局，接下來談?wù)勯g距和布局了。

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

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

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

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

特別要注意左邊的菜單。

菜單項(xiàng)之間的垂直空間是文本本身高度的兩倍，上面和下面有同樣多的內(nèi)邊距。

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

頂部的導(dǎo)航條有更多的空間。文字“搜索音樂”占了整個(gè)導(dǎo)航條高度的20%。圖標(biāo)也使用了類似的高度。

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

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

適當(dāng)?shù)目瞻卓梢宰屢恍┳罨靵y的界面看起來更吸引人、更簡單，就像論壇一樣。

或者維基百科

你會(huì)發(fā)現(xiàn)對(duì)此有很多爭論，比如說，維基百科的重新設(shè)計(jì)舍棄了一些關(guān)鍵的網(wǎng)站的功能，但是你不得不說這是一個(gè)很好的學(xué)習(xí)方式！

在你的線條之間預(yù)留空間。

在你的元素之間預(yù)留空間。

在你的元素組之間預(yù)留空白。

要第二部分繼續(xù)討論:

4、學(xué)習(xí)在圖像上疊加文本的方法（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、像藝術(shù)家一樣借鑒 （Part 2）(Steal like an artist)

你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！

干貨系列文章匯總?cè)缦?，覺得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

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

我是小智，公眾號(hào)「大遷世界」作者，對(duì)前端技術(shù)保持學(xué)習(xí)愛好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！

關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。