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


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


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


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


從堅實的基礎開始


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


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



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


在自然界中梯度


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


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


把它帶到下一個層次


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


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



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



光源和形狀


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


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


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


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


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