寫給不是設計師的-漸層配色(上)

讓我們從最基礎的開始吧！

在一切開始之前，首先推薦一個網站 uiGradient，無聊沒事的時候可以上去晃晃找點漸層配色的靈感。

6/5聲明稿連結

(上)篇主要會介紹三個主題：

色彩學
類似色漸層變化(Linear Gradient)
對比色漸層變化(Linear Gradient)

基本學習目標(應用練習)

講在前面：這篇文章並不是一篇教您該如何使用工具的文章，也就是您在這篇文章中應該找不到 Sketch3/ Photoshop/illustrator 這些工具的使用說明。如有需要任何文內的範例圖/成品圖(非引用部分)歡迎寄信或是留言給我來幫助您的學習。真心希望您在讀完(上)，(中)，(下)篇對於漸層的使用能更加的得心應手，也能輕鬆完成上圖的學習目標👏。

踏入新創科技業以來，總是聽見許多設計師/工程師朋友們在互相抱怨彼此之間的合作有多麽的…不融洽(糟糕)，要碼是設計師會抱怨工程師沒有美感，不重視設計細節(總是覺得少 1px 多 1px 好像沒什麼差)，或是連 Guideline 都不讀完就來跟我講該怎樣設計(強烈建議 iOS/Android 工程師不管未來是否會接觸到介面設計都花些時間把 iOS 的 Human Interface Guideline 跟 Material Design Guideline 給看完，這是基本啊!!基本啊!!線上已經有滿坑滿谷的翻譯文章囉，所以別再拿看不懂英文當藉口囉😤)；另一方面工程師也會抱怨設計師常常把寫動畫當作小畫家，把改流程當成拉Wireframe，再不然就是腦海裡充滿著過於天馬行空的想法。很幸運的是這個狀況幾乎不曾發生在小弟迄今的工作經驗當中，主要是因為一起工作的前輩們就是一群神級的工程師或者是神級的工程師+設計師，即使是學生時期合作過的設計師們也都是相當優秀的合作夥伴。但考慮到 80%…90% 的工程師們都會有過這麼一段與設計奮鬥的辛酸史，在這邊希望能藉由一連串的對於配色，漸層的基礎概念，以及小弟日常工作運用/學習到的知識來幫助廣大的非設計職場夥伴來多瞭解一些設計上面的眉眉角角。

當然，(設計師+工程師連線)與 PM 的戰爭又是另外一個故事了。

我是Samuel。非本科系(設計相關)出身，也不是資工相關出身，但有幸接受幾位厲害前輩(Hammer, Sophy, Fran)的指導，目前職場工作經歷 0年(未滿一年 xD)。因為不具本科系背景這樣的先天性優勢(劣勢)？！文章內所寫的東西可能會比較平易近人一些👍，但太艱澀的理論就…期許各領域的前輩們在閱讀之餘能給予一些指教囉。這邊首先針對漸層的主題寫了一篇(上)，來聊聊幾種常常使用到的漸層類型、該如何快速有效的運用這些漸層以及分享一些線上設計師們優秀的作品。(中)篇連結在此。

一、色彩學

底下這就是傳說中的伊登色相環，The end。

https://zh.wikipedia.org/wiki/%E8%89%B2%E7%92%B0

也結束的太快了吧？為什麼沒有多介紹一下色彩學，因為…其實在這裡還不需要太瞭解啊😅。好麻好麻，那我們稍微來說一下什麼是色相環好了：

基礎的十二色環由瑞士設計師約翰·伊登所提出，其結構為：

等邊三角形內的三原色─紅、黃、藍作為第一次色，將三原色兩兩相加可調出橙、綠、紫等第二次色，如果再將這六種顏色中兩相鄰的顏色等量互調，得到該兩色的中間色（第三次色），便產生了十二色色環。(引用自 Wiki)

是不是已經看不下去了？這種太理論的東西對於非專業的我們實在是太遙遠囉，當然絕對不是說這些設計的理論不重要，看看那些線上的介面設計師/分享前輩強到一個亂七八糟，只是對於剛入門的我們其實可以稍稍緩一些。在建立了相關基礎之後我們再來更進一步聊聊這些色彩學應用的理論吧(如果有需要的話我有很多色彩學的電子書，歡迎寄信找我索取👌)。這系列文章所應用到的漸層運用其實只要對於伊登色相環、相近色、對比色以及重要的三元素：色相、明度、彩度有基礎的認識就足夠囉( Wiki)。

Sketch 3 檢色器

二、類似色漸層變化

灰階漸層：

首先我們先從配色的基礎開始：

基本運用

白 → 灰的漸層可以說是大自然中光影變化的基本，這樣的漸層搭配也是最適合給初學者拿來練功用的喔(運用白 →灰的漸層時不需要考慮到檢色器上各漸層區段的差異，這些差異只要一用不好就很容易導致顏色灰階過高(髒掉)或是飽和度(彩度)不均勻的問題)。以下圖範例而言，左側使用上淺下灰的漸層，再搭配內光暈後能夠輕易的讓圓形浮凸於紙面；右側使用上灰下淺搭的漸層，搭配內陰影後能呈現凹陷於紙面的效果。

上淺下深(左)上深下淺(右)

上面兩種是基本中的基本，如果想要做出中間凹陷，但是凹陷的部分是浮凸出來的感覺，除了上灰下淺的基本技巧之外還要稍微運用一點放射狀漸層來調整上部以及底部的光影，下一篇會提到更多這樣的觀念喔。

是不是有一種凸出來的感覺呢?

當然，上圖幾個示範的立體效果其實還不夠完整，但以現在Flat Design盛行的狀況，對於光於影的變化有一些基礎的瞭解對於取悅團隊中的設計師妹妹肯定是相當有幫助的(笑)。有了基本的視覺雛形，我們可以再進一步的進行漸層(漸層角度，漸層區段，內外光暈)的微調，同時考慮到光影的變化以及陰影的角度位置，就可以輕易的作出如下圖範例的效果囉！(下圖除了白 →淺灰的漸層之外，為了做出凹陷的平面，同時也運用了淺黑 →深黑的漸層變化🤔)

Designed by by Paco for Smartisan

如何製作?

那麼究竟該如何製作一個簡單的灰階漸層呢？其實做起來就跟下面這張圖一樣容易 →

主要的調整就只在檢色器的最最最最最左側上下移動即可，如果希望帶點淡淡的色澤可以往檢色器的右側稍微移動一點，這樣的效果有時候會運用在物體本身是白色但周圍是有色背景時，物體因為背景產生的反光影響到白色物品的表面色澤。如果希望整體給使用者的印象是清爽乾淨的，漸層中搭配的灰色就不應該太重，如示意圖從白色往下調整一點點即可，若是選用深灰色來做搭配，產生的則是另一種沈穩的效果。