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

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

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

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

從堅(jiān)實(shí)的基礎(chǔ)開始

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

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

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

在自然界中梯度

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

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

把它帶到下一個(gè)層次

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

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

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

光源和形狀

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

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

一些UI設(shè)計(jì)師喜歡為他們正在設(shè)計(jì)的頁面指定一個(gè)假想的“光源”，就像畫家描繪風(fēng)景一樣。這有助于他們決定如何確定漸變的方向――越亮的那一面顯然應(yīng)該離源越近，越暗的那一面越遠(yuǎn)。指定光源也可以幫助通知頁面的其他圖形元素，并充當(dāng)焦點(diǎn)。

請注意此音樂應(yīng)用程序界面左上角的光源。

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

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

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

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

如有疑問，請轉(zhuǎn)向自然界尋求靈感

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

在界面中選擇正確的形狀和位置。記?。何覀兊难劬裱瓭u變

就像所有的UI設(shè)計(jì)趨勢一樣，漸變也會因?yàn)橄乱粋€(gè)大事件而過時(shí)。但就目前而言，它們是尖端UI設(shè)計(jì)的支柱。

當(dāng)前文章：成都網(wǎng)站設(shè)計(jì)淺析如何設(shè)計(jì)完美的漸變
當(dāng)前URL：http://jinyejixie.com/news/49195.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)