建立華麗 UI 的 7條規則 第一部分 (2019年更新)

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

---

爲了保證的可讀性，本文采用意譯而非直譯。

簡介

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

• 開發者但願可以在必要時設計出本身漂亮的 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》 雜誌的藍色主題。

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

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

倒數計時器來自 Kerem Suer。

關於顏色的其餘一些補充

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

*　學習 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界面相提並論。

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

或者維基百科

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

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

要第二部分繼續討論:

四、學習在圖像上疊加文本的方法（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)

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

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

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

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

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