這是一篇Sketch使用教程，教大家用Sketch畫出大自然中最美的漸變色，涉及操作的部分比較簡單，主要是一些應用感悟。

1.大自然中的漸變色

大家對漸變色肯定不陌生，趨于成熟的香蕉、秋天泛黃的葉子、絢麗多彩的晚霞，這些從明到暗、從深到淺或者從一個色彩到另一個色彩過渡，充滿浪漫氣息的顏色，就是大自然中最為常見的美麗的漸變色。這種由漸變色衍生出來的美感，同樣也被廣泛應用在產品設計當中，這也是我們為什么看到漂亮的漸變色，都覺得毫無違和感的原因。

2.在產品設計中的應用

和純色相比，漸變色顯得更年輕、活潑和多變，經常被用在一些年輕化的品牌/產品身上，例如主打青年良品的魅藍手機、更年輕有活力的手機淘寶，不僅如此，使用漸變色制作的logo，顏色風格也是獨一無二的。漸變色在網頁或者UI設計中，是極為流行的元素，甚至在一些嚴肅重要的發布會場合，都能看到它的身影，例如iPhone發布會御用的漸變色PPT。

3.用Sketch制作漸變按鈕

了解漸變色的由來和應用后，我們就來看看如何使用Sketch生成想要的漸變色，這里以制作一個漸變色按鈕制作為例進行講解，色值參考手機淘寶。

第1步，使用矩形工具拉出一個300x60的矩形，并且設置圓角，即“Radius”的值為100。

第2步，取消描邊，并點擊填充“Fills”調出色板，并選中“Linear gradient（線性漸變）”，注意，這里一共有三種漸變效果，分別是線性漸變、徑向漸變和環形漸變，三者的效果各不相同，我們這次只需要選擇線性漸變即可。

第3步，拖動設置漸變色時出現的橫條，將漸變的方向從垂直變成水平。

第4步，選中下圖中滑條中的色塊，分別設置色值為“#FF9000”、“FF5000”，就完成了一個從“#FF9000”到“FF5000”顏色漸變的按鈕。

如果需要在中間加入更多的顏色漸變，則可以在橫條中鼠標單擊增加漸變點，分別對應色塊設置漸變色即可，色塊的位置可以滑動，也可以通過鍵盤數字1~9進行等分。

4.漸變色開發實現標注

我們制作漸變色，最終是為產品設計服務的，要開發實現我們想要的漸變效果，需要給予準確的標注，標注包括漸變色值的代碼以及漸變的方向。

更多我的原創精彩的文章推薦（讀完多點贊哦）

精品（過萬閱讀，700+贊）：干貨：讓你全方位學習成為一名交互設計師（1.6萬字誠意之作）

交互設計系列：資源有限時怎么對待細節優化？

Sketch教程：Sketch進階教程：這可能是Symbol最詳細的使用說明書