當你為用戶體驗設計公司工作時，你會發(fā)現(xiàn)行業(yè)趨勢的周期性。 就像時尚或藝術一樣，過時的風格不可避免地在幾年后重新出現(xiàn)，只是被主流所接受，并且再一次被淘汰。

在數(shù)字設計領域，可能沒有比漸變的上升和下降（以及上升）更好的例子。 考慮到九十年代界面設計的關鍵（有多少地理位置網站有梯度藝術字標頭？），這一趨勢可能要追溯到更遠的地方?？紤]一下這個標志性的標志：

《回到未來》(Back To The Future)是最近重新流行的一種設計潮流的一個典型例子，或許最引人注目的是2016年Instagram重新設計logo，以及Spotify的雙音播放列表圖標。漸變在用戶界面設計領域越來越流行，而且出于良好的原因，它們?yōu)榻缑孀⑷肓松疃群图y理。它們扮演著獨特的、甚至是相互沖突的角色：漸變實際上模仿了我們周圍看到的顏色(在現(xiàn)實世界中我們很少遇到單音)，但它們也可以用來創(chuàng)建我們以前從未見過的顏色模式。

梯度是一種強大的設計技術，用巨大的力量來承擔巨大的責任。當使用不當時，漸變會造成設計災難。它們可以打亂布局，分散用戶的注意力，破壞整個界面的美感。在這篇文章中，我們揭示了創(chuàng)建一個漸變的秘密，使您的界面提升到下一個層次。

從堅實的基礎開始

無論是雙色調還是多色調，每一種漸變都只有基本色那么強烈。就像所有基于顏色的設計選擇一樣，在選擇正確的顏色時，我們可以參考色輪作為指導。

不要擔心，你不需要成為色彩理論專家來為你的漸變做出謹慎的選擇。一般的經驗法則是選擇接近彼此的顏色，從而使它們更自然地融合在一起。UX Planet包含了一個偉大的圖表，看看從黃色到橙色的轉換與綠-紫色的無縫銜接。

為什么輪子附近的顏色在視覺上如此吸引人？也許是因為這些漸變是自然發(fā)生的。這給UI設計師帶來了一個極好的商業(yè)秘密：將自然作為靈感的來源。

在自然界中梯度

在我們的日常生活中，我們不斷地遇到各種各樣的梯度：天空、日落、水體。無論我們在世界的哪個角落，天空都是極好的來源。讓我們來看看令人驚嘆的自然畫面設計師安娜·格倫(Anna Grenn)的陳列柜，以及它們的配套色彩。

雖然天空可能是最常見的來源材料，但例子還有很多?，F(xiàn)在你周圍可能有一個自然梯度?，F(xiàn)實生活的色彩不是整齊地填滿線條，而是混合在一起。

把它帶到下一個層次

假設你現(xiàn)有品牌的顏色不適合漸變?；蛘咭苍S你的標準雙音漸變并沒有削減它。不要害怕：在漸變中注入額外的色調是增強視覺效果的好方法，并能更好地區(qū)別你的UI。

正如你所想象的，當附加的顏色落在色輪的開始和結束之間時，它們會流動得最好。重溫來自UX行星的相同圖表：

只是要注意：你添加的顏色越多，你的坡度越復雜，設計的平衡就越困難。你可以把目標定得高些，然后像Instagram的logo那樣，拍攝多層次的漸變效果，但如果你做得太過火了，你最終會得到一個更接近這個故意設計得難看的MTV網站的東西。

光源和形狀

即使在確定了完美的顏色組合之后，仍然需要在設計中實現(xiàn)它。首先，一些基本要素：

漸變應該與容器對齊，與布局保持一致，并指向用戶的眼球應該指向的地方。對于x面多邊形(正方形、三角形、矩形、五角形等)，這通常意味著一個線性梯度;圓形區(qū)域需要徑向。

一些UI設計師喜歡為他們正在設計的頁面指定一個假想的"光源"，就像畫家描繪風景一樣。這有助于他們決定如何確定漸變的方向——越亮的那一面顯然應該離源越近，越暗的那一面越遠。指定光源也可以幫助通知頁面的其他圖形元素，并充當焦點。

請注意此音樂應用程序界面左上角的光源。

當所有這些單獨的元素被正確地選擇，他們結合成一個華麗的，令人瞠目結舌的梯度。而這反過來又給整個界面帶來了巨大的好處。

漸變從哪里出發(fā)？

在UI中包含漸變是一個很好的、很容易實現(xiàn)平臺現(xiàn)代化的方法。通過遵循這里討論的技巧，您可以確保正確地使用這個強大的設計工具?；仡櫼幌拢?/p>

使用你的品牌和色輪組合，選擇合適的底色

如有疑問，請轉向自然界尋求靈感

通過添加更多色彩來增加色彩，但是要注意不要做得太過火

在界面中選擇正確的形狀和位置。記住：我們的眼睛會遵循漸變

就像所有的UI設計趨勢一樣，漸變也會因為下一個大事件而過時。但就目前而言，它們是尖端UI設計的支柱。