UI 設計中的漸變

簡評： 漸變是經過兩種或多種不一樣的色彩來繪製一個元素，同時在顏色的交界處進行衰減變化的一種設計。從擬物到扁平再到漸變，人們慢慢發現它能創造出從未有過的一種色彩感受 —— 獨特、現代和清爽。

很長一段時間以來，設計界都不怎麼待見「漸變」，這還得拜 90 年代的 PowerPoint 所賜，畢竟那時候的漸變是這樣的：

然而時過境遷，今天你打開 Dribbble 或者 Behance，可能會看到很多使用漸變的設計。本文將會分享如何在設計中使用「漸變」的實用技巧。

▎爲何咱們忽然愛上了漸變？

想回答這個問題，咱們須要重返 2014。

2014 年是扁平設計流行的元年。這一年，Google 發佈了 Material Design，Apple 也用扁平 UI 更新了 macOS。那年的扁平設計讓人感到興奮，特別是和擬物設計對比的時候。

可是扁平設計的侷限性也是顯而易見的，其中最大的一個侷限是 —— 設計師可以使用的顏色和樣式大大減小，幾乎不到 15 種顏色可用於扁平設計。

由此，設計師們開始嘗試「漸變」：

• 它給設計師帶來了更大的創做自由。扁平設計中單一的顏色扼殺了設計的潛力，而漸變爲無限可能打開了大門。經過混合顏色的手段，設計師們能夠創造出更豐富的視覺樣式。
• 漸變還給設計引入了深度和維度，解決了扁平設計中一切都「太平」了的問題。

▎漸變讓人驚喜

好比說，漸變能作出更大膽的表達。

漸變創造出了一種意想不到的效果，即便像應用圖標這樣微小的元素，也別有一番風味：

又或者，漸變能突出某些元素。

一個好的用戶體驗，每每能引導用戶完成產品流程，而精心的設計有助於讓用戶下意識地進行下一步。比方說讓頁面某些部分視覺效果更強烈，從而讓用戶更關注這部分。

👇下面是 Mixpanel 的主頁，插圖是主頁的一大元素，而漸變的背景則引導了用戶去關注鎮部分。

▎六種創造漸變的技巧

1. 讓咱們先看看漸變的基礎類型

漸變有幾種基礎類型，他們都會有一箇中心起點，顏色從這裏開始，而後逐漸融入其餘顏色。

a. 線性

線性漸變是一種依直線過渡的色帶，顏色從一種顏色平滑過渡到下一種。

b. 徑向

徑向漸變是從中心點開始往外輻射，設計師能夠指定中心點的位置和漸變的大小。

c. 錐形漸變

以下圖，你能夠在 Adobe Illustrator 中建立錐形漸變

2. 注意漸變顏色的選取

不是全部的顏色都能很好地相互配合，若是用互補色進行漸變，看起來就不是很好：

紅色到綠色的漸變，看起來髒兮兮的：

建立漸變的時候，最好使用相近的顏色：

或者相同顏色的不一樣深度：

3. 漸變過程當中注意平滑過渡

理想狀況下，不該該讓用戶注意到一種顏色流入到另外一種顏色中，顏色的過渡應該很是順暢。

👇下面這個是反例，你能很明顯地看到分隔兩種顏色的色帶，這就給人一種很突兀的過渡：

平滑應該是這樣的：

4. 情緒的傳達

顏色能喚起情緒的反應，咱們能夠利用這個屬性，在更深的層次上和用戶進行聯繫。

仔細思考你但願用戶與產品互動時感覺到什麼。

例如，在一種比較高能量的氛圍中，能夠採用紅橙漸變：

而在輕鬆的氛圍，不妨試試藍色漸變：

5. 不要忘記顏色對比

不管什麼時候都要注意設計的可讀性，而這就是對比的功用。

6. 一些趁手的工具

工欲善其事必先利其器，除了 Adobe Illustrator，還有其餘工具能夠用於建立漸變效果：uxpro.cc/toolbox/vis…，這裏就不一一介紹了。

---

原文連接：Gradients in UI Design

推薦閱讀：Chrome 小恐龍背後的故事 | 設計師專訪

關注「極光開發者」，回覆「JG521」，送你一件極光文化衫