前言
在幾篇 2017 的網頁設計趨勢文章 中都有看到其中一項是「亮色與漸層」(Bright Colors & Gradients)，在流行了幾年的單色 Flat Design 以及 Material Design 之後，許多設計師開始為他們的視覺添加更多生動的視覺印象。在 2015~2016 年就已經開始有很多的設計遵循此原則，尤其是將影像、CI 整體精神也全部融入其中時，整個視覺印象更為鮮明，甚至是在 2013 年 Virgin America Airline 就已經開始將這樣的視覺融入他們的使用體驗設計中，而最著名的例子是在 2016 年造成話題的 Instagram CI 改版。
綜觀將漸層融入設計的幾個大原則：
平滑的漸層（Smooth Gradient ）
在設計漸層色時，必須注意兩色或多色節點之間的平滑與流暢，生硬的顏色轉折會讓整個視覺看起來極度不協調，並可能讓瀏覽者產生突兀的視覺感受，還可能暴露了設計師本身無法駕馭漸層設計運用的能力，漸層設計反而變成了缺點。以下圖為例，使用同樣的三個顏色但因為與物件相對節點位置的關係，造成了不一樣的視覺效果，左邊矩型的漸層轉折就相對生硬許多。
選擇明亮的顏色
漸層最怕的是幾個顏色在運用時會造成髒髒的視覺，會盡量選取較亮的顏色作為漸層節點，飽和、明亮的配色就非常的重要。因此設計師就必須特別注意盡量避開 hex color picker 的左半部及下半部。 以 instagram CI 為例：
將 CI 標準色作為漸層節點
要將品牌精神融入整個視覺以及 UI 的設計中，當然不能夠隨意的選取喜歡的顏色來做為漸層節點，將品牌標準色作為節點是最基本的一種方式。以 Virgin America Airline 官網為例，CI 的標準色是紫羅蘭色以及紅色，因此整個品牌在用色上全都使用這兩色及其漸層來作為整體的設計體驗。
相近色漸層：選擇相鄰色
若是相近色的漸層設計，只有二至三個漸層盡量選取在色條中的相鄰色，儘管色域沒有很廣的漸層也能夠造成比單色更有層次的視覺效果。以 Evernote App 為例，使用不同深淺的綠色作為漸層的設計
以 Airbnb 的 Banner 為例，使用深淺的水蜜桃色作為漸層
多色漸層：選擇色系
如果是多色建議採用色系的概念，以 Spotify Year Music 為例：
近色系：淺玫瑰粉 → 紫羅蘭，淺灰藍 → 亮桃紅；
暖色系：桃粉紅 → 粉橘紅 → 橘黃；
冷色系：藍紫 → 青藍 → 青色
資訊必須清楚
在漸層背景或區塊的設計之下，其他物件、文字的搭配就更重要了，標題與內文的顏色、相對大小、文字間距、行距、區塊的留白等等。當漸層為大面積背景時，文字盡量使用白色搭配，只要注意在亮度太高的區塊之上，不要使用白色的文字以免造成閱讀上過於吃力，以上範例都有了最好的示範。
但若是必須清楚呈現資訊的設計，建議漸層色僅用於整體視覺的局部，大標、需要被突顯的文字或 Call to action 的按鈕使用標準色，資訊區塊則使用淺色底，比如白或淺灰。以 Virgin Atlantic Airline 官網為例：
以 Evernote 官網為例：
以漸層與影像為主的設計
大面積漸層設計 Banner，可以將影像融入背景色做處理，以 Spotify 為例：
另一種選擇不複雜的影像構成來作為主體，並將漸層色融入影像主體，以 Gogoro 官網 banner 為例：
總結
好的漸層設計能夠造成相對完美舒適的視覺效果，提昇愉悅的使用者體驗，但也要注意每一年的設計趨勢都很容易將所有的設計帶往同一條路，而造成所有的設計看起來都一樣，App UI Design、App icon Design、Web Design…如果全部都採用類似的方式來大量的設計，也許會造成讓瀏覽者覺得煩躁與無聊的反效果，因此也必須注意過多的濫用。
參考資料：
https://www.instagram-brand.com/
https://www.virginamerica.com/
http://www.virginatlantic.com/
https://www.spotify.com/
https://evernote.com/
https://www.gogoro.com/
https://dribbble.com/shots/2397349-Spotify-Year-in-Music
https://blog.repick.co/web-design-predictions-for-2017-73f94496e5dd
