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

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

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

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

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

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

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

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

在自然界中梯度

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

雖然天空可能是最常見(jiàn)的來(lái)源材料，但例子還有很多。現(xiàn)在你周?chē)赡苡幸粋€(gè)自然梯度。現(xiàn)實(shí)生活的色彩不是整齊地填滿線條，而是混合在一起。

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

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

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

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

光源和形狀

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

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

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

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

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

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

在UI中包含漸變是一個(gè)很好的、很容易實(shí)現(xiàn)平臺(tái)現(xiàn)代化的方法。通過(guò)遵循這里討論的技巧，您可以確保正確地使用這個(gè)強(qiáng)大的設(shè)計(jì)工具。回顧一下：

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

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

通過(guò)添加更多色彩來(lái)增加色彩，但是要注意不要做得太過(guò)火

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

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

新聞名稱(chēng)：成都網(wǎng)站設(shè)計(jì)淺析如何設(shè)計(jì)完美的漸變
文章網(wǎng)址：http://www.js-pz168.com/news45/49195.html

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

廣告

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