設(shè)計(jì)人員如何設(shè)計(jì)完美的漸變

當(dāng)您在用戶體驗(yàn)設(shè)計(jì)公司工作了很長時(shí)間時(shí)，您開始注意到行業(yè)趨勢的周期性。就像時(shí)尚或藝術(shù)一樣，過時(shí)的東西不可避免地會(huì)在幾年后重新浮出水面，直到被主流所采用，并再次消失。

在數(shù)字設(shè)計(jì)世界中，也許沒有比梯度的上升和下降（和上升）更好的例子了。在90年代被認(rèn)為是界面設(shè)計(jì)的關(guān)鍵（有多少個(gè)地理站點(diǎn)具有漸變的ArtArt標(biāo)頭？），這種趨勢可能還要追溯到更遠(yuǎn)的年代。考慮以下標(biāo)志性徽標(biāo)：

“回到未來”是最近才浮出水面的設(shè)計(jì)趨勢的合適例子，也許最值得注意的是在2016年Instagram的徽標(biāo)重新設(shè)計(jì)和Spotify的雙音播放列表圖標(biāo)。漸變?cè)谟脩艚缑嬖O(shè)計(jì)世界中變得越來越流行，并且有充分的理由-漸變會(huì)向界面注入深度和紋理。它們起著獨(dú)特甚至沖突的作用：漸變實(shí)際上模仿了我們?cè)谥車吹降念伾ㄔ诂F(xiàn)實(shí)世界中我們很少遇到單一色調(diào)），但是它們也可以用于創(chuàng)建我們從未見過的顏色模式。

漸變是一種強(qiáng)大的設(shè)計(jì)技術(shù)，功能強(qiáng)大，責(zé)任重大。如果使用不當(dāng)，漸變會(huì)帶來設(shè)計(jì)災(zāi)難。他們可能會(huì)混淆布局，分散用戶注意力并破壞界面的整體美感。在本文中（在我值得信賴的用戶體驗(yàn)設(shè)計(jì)師團(tuán)隊(duì)的幫助下），我們揭示了制作漸變的秘訣，該漸變可將您的界面提升到下一個(gè)梯隊(duì)，而不是提醒用戶1997年。

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

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

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

為什么方向盤上的顏色在視覺上如此吸引人？也許是因?yàn)檫@些梯度自然而然地經(jīng)常出現(xiàn)。這為UI設(shè)計(jì)師帶來了一個(gè)極好的商業(yè)秘密：將自然作為靈感的來源。

自然界中的漸變

我們?cè)谌粘Ｉ钪胁粩嘤龅教荻龋禾炜眨章?，水域?/span>無論我們?cè)谑澜缟系娜魏蔚胤剑炜斩际亲罴训脑牧稀?/span>只需看一下令人驚嘆的自然景觀設(shè)計(jì)師安娜·格倫（Anna Grenn）展示的櫥窗，并配以隨附的彩妝即可。

盡管天空可能是最常見的原始資料，但例子無窮無盡。您周圍可能正在自然漸變。現(xiàn)實(shí)生活的色彩并不能整齊地填充線條內(nèi)部，而是融合在一起。

將其帶入新的高度

因此，假設(shè)您現(xiàn)有品牌的顏色并不完全有利于漸變。或者，也許您的標(biāo)準(zhǔn)兩色漸變根本無法消除它。不用擔(dān)心：為漸變注入其他色調(diào)是增強(qiáng)其視覺吸引力并進(jìn)一步區(qū)分UI的好方法。

就像您想象的那樣，其他顏色落在色輪上的開始和結(jié)束顏色之間時(shí)，它們的流動(dòng)性最佳。從UX Planet重新審視同一張圖：

請(qǐng)注意：添加的顏色越多，漸變就越復(fù)雜，設(shè)計(jì)平衡動(dòng)作就越困難。您可以瞄準(zhǔn)高處并拍攝像Instagram徽標(biāo)這樣的多層漸變色，但是落伍了，最終可能會(huì)變得更接近于這種故意丑陋的MTV網(wǎng)頁設(shè)計(jì)。

光源形狀

即使確定了完美的色彩組合，仍然存在將其實(shí)際應(yīng)用到設(shè)計(jì)中的問題。首先，一些基本知識(shí)：

漸變應(yīng)與其容器對(duì)齊，與布局輪廓一致，并指示應(yīng)將用戶的眼球指向何處。對(duì)于x面多邊形（正方形，三角形，矩形，五邊形等），通常表示線性漸變；圓形區(qū)域要求徑向。

一些高端網(wǎng)站設(shè)計(jì)設(shè)計(jì)師喜歡為他們正在處理的頁面分配一個(gè)假想的“光源”，就像畫家畫風(fēng)景一樣。這有助于他們確定如何確定漸變的方向-較亮的一面顯然應(yīng)更靠近源，較暗的一面應(yīng)更遠(yuǎn)。分配光源還可以幫助告知頁面的其他圖形元素，并且也可以充當(dāng)焦點(diǎn)。

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

正確選擇所有這些單個(gè)元素后，它們會(huì)融合成一個(gè)令人嘆為觀止的華麗漸變。反過來，這對(duì)于整個(gè)界面來說是一個(gè)巨大的福音。

梯度從哪里去？

在用戶界面中包含漸變是使平臺(tái)現(xiàn)代化的極好，簡便的方法。通過遵循此處討論的技巧，可以確保正確使用了此功能強(qiáng)大的設(shè)計(jì)工具。回顧一下：

• 結(jié)合品牌和色輪選擇合適的基本色調(diào)
• 如有疑問，請(qǐng)向自然界尋求靈感
• 通過添加更多的色調(diào)來增強(qiáng)效果，但請(qǐng)注意不要過度使用
• 在界面中選擇正確的形狀和位置。記?。何覀兊难劬ΩS漸變！

像所有UI設(shè)計(jì)趨勢一樣，漸變將不合時(shí)宜，而下一個(gè)大問題將使?jié)u變變得更糟。但就目前而言，它們是尖端UI設(shè)計(jì)的支柱。