#01

前言

HI，大家好！今天分享的是關(guān)于UI設(shè)計(jì)趨勢(shì)的內(nèi)容。

每年淘寶會(huì)在3月底和8月底分別做一個(gè)大型營(yíng)銷活動(dòng)，這個(gè)活動(dòng)就是淘寶新勢(shì)力周，主要是針對(duì)潮流服飾品類。為什么選擇這個(gè)時(shí)間點(diǎn)。從市場(chǎng)營(yíng)銷的角度考慮。3月底和8月底是春秋季上新，廠商都可以試著發(fā)布一些春裝新款式，通過試探市場(chǎng)的反映，決定接下來的設(shè)計(jì)款式的生產(chǎn)。同時(shí)也擴(kuò)大自身的品牌態(tài)度和影響力。

而對(duì)于設(shè)計(jì)師來說，也可以通過一些新元素的設(shè)計(jì)風(fēng)格表達(dá)，引領(lǐng)新的接下來一年的春秋季時(shí)尚趨勢(shì)。所以這同時(shí)也是接下來一年服裝設(shè)計(jì)趨勢(shì)的風(fēng)向標(biāo)。

我每年都會(huì)關(guān)注這個(gè)活動(dòng)，因?yàn)閁I界面的設(shè)計(jì)是依附產(chǎn)品而存在。產(chǎn)品的氣質(zhì)決定了設(shè)計(jì)的風(fēng)格。從活動(dòng)的用戶畫像來看，這個(gè)活動(dòng)的受眾群體偏向于年輕人。所以整體活動(dòng)設(shè)計(jì)風(fēng)格偏向于年輕潮流化，所以這個(gè)活動(dòng)的的一些視覺風(fēng)格，也會(huì)引領(lǐng)接下來一年業(yè)界的一些界面和營(yíng)銷設(shè)計(jì)風(fēng)格趨勢(shì)。

UI設(shè)計(jì)師除了關(guān)注界面的交互體驗(yàn)之外，也不要忘記關(guān)注商業(yè)設(shè)計(jì)的美學(xué)趨勢(shì)。

一場(chǎng)大型的視覺活動(dòng)都會(huì)定義其獨(dú)特的品牌視覺元素，運(yùn)用獨(dú)特的設(shè)計(jì)營(yíng)銷語言增強(qiáng)影響力，增強(qiáng)用戶的視覺印象。所以竹子通過分析這個(gè)設(shè)計(jì)活動(dòng)的設(shè)計(jì)技法，來關(guān)注一下未來一年的UI設(shè)計(jì)視覺趨勢(shì)。

#02

賽博朋克風(fēng)格

淘寶新勢(shì)力周第一個(gè)看點(diǎn)，就是看界面的主視覺風(fēng)格，預(yù)判接下來視覺風(fēng)格的流行趨勢(shì)點(diǎn)。在營(yíng)銷頁(yè)中分了三個(gè)主要分區(qū)，其中第一個(gè)主分區(qū)潮流榜中使用了賽博朋克味道十足的潮流質(zhì)感設(shè)計(jì)。

潮流榜不但能見到琳瑯滿目的各類潮流風(fēng)格服裝，亦能看到多種不同“復(fù)古未來”趨勢(shì)分支的同臺(tái)碰撞，為我們搭建了一場(chǎng)賽博感滿滿的線上時(shí)裝秀。

賽博朋克的設(shè)定通常圍繞黑客、人工智能而展開，背景設(shè)定常用元素金屬、電線街頭的霓虹燈、街排標(biāo)志性廣告以及高樓建筑等。這也與當(dāng)下人們面對(duì)疫情，科技發(fā)展的不確定而產(chǎn)生的情景映射相符合。

#03

莫蘭迪色的運(yùn)用

疫情已經(jīng)三年了，我們都知道經(jīng)濟(jì)大環(huán)境不是非常好，人們對(duì)未來充滿了很多不確定。在這樣的大環(huán)境下，人們普遍充斥著焦慮不安的情緒。我們開始懷念疫情前的自由的世界，同時(shí)又對(duì)未來美好生活的寄予很濃的期望。所以復(fù)古加科技的情緒是今年設(shè)計(jì)的一個(gè)重要設(shè)計(jì)情感。

在今年的設(shè)計(jì)周看到界面中大量的運(yùn)用莫蘭迪色系。莫蘭迪色系不是指具體某種顏色，而是一種色彩關(guān)系。在常見的營(yíng)銷活動(dòng)中，一般會(huì)選擇一些飽和度很高的顏色，增加視覺沖擊力。

莫蘭迪色系偏向于降低顏色的純度，雖然色感上畫面顯得偏灰，但是卻沒有失去應(yīng)有的美感，反而將畫面的色彩情緒用一種樸素的美感表現(xiàn)出來，發(fā)散出安靜與內(nèi)斂的氣息。

高飽和度的視覺沖擊可以強(qiáng)烈刺激人的視覺。但使用莫蘭迪色會(huì)顯著降低人們焦躁的情緒，很符合當(dāng)下人們安靜歸真的情緒。

#04

毛玻璃的運(yùn)用

毛玻璃其實(shí)是一個(gè)很復(fù)古的設(shè)計(jì)表現(xiàn)形式，在早期GUI設(shè)計(jì)中大量運(yùn)用。從扁平設(shè)計(jì)開始流行后，就很少運(yùn)用到了。2020 UI設(shè)計(jì)界流行起了新擬物風(fēng)，希望從扁平的質(zhì)感束縛中尋找新的折中表現(xiàn)形式。而毛玻璃的設(shè)計(jì)風(fēng)格（Glassmorphism）就被重新啟用。

毛玻璃風(fēng)格，透過透明模糊實(shí)現(xiàn)了前后界面層次的分離，同時(shí)還保留背景界面的顏色圖形部分細(xì)節(jié)。2021年在很多APP的設(shè)計(jì)展示中看到設(shè)計(jì)師用這種形式感去做設(shè)計(jì)展示。

毛玻璃運(yùn)用在頂部關(guān)鍵信息上。這樣設(shè)計(jì)即可減少背景色彩對(duì)前景信息展示的干擾,還可以對(duì)功能信息進(jìn)行強(qiáng)調(diào)。毛玻璃效果可以運(yùn)用在個(gè)人中心,人物頭像位置進(jìn)行設(shè)計(jì)強(qiáng)調(diào)?，F(xiàn)在看到淘寶在界面中卡片設(shè)計(jì)上運(yùn)用，也許接下來會(huì)大量出現(xiàn)這種設(shè)計(jì)形式的運(yùn)用。

個(gè)人主頁(yè)卡片毛玻璃設(shè)計(jì)效果

產(chǎn)品模塊背景磨砂玻璃效果

#05

微漸變運(yùn)用

微漸變?cè)O(shè)計(jì)的運(yùn)用

從2013年蘋果使用扁平化設(shè)計(jì)替代擬物化設(shè)計(jì)，已經(jīng)快9年過去了。不知道大家有沒有一絲審美疲勞？

蘋果啟用扁平化設(shè)計(jì)的想法是，拋去了一切多余的修飾，追求極簡(jiǎn)主義。讓信息傳遞更加簡(jiǎn)潔高效。這個(gè)設(shè)計(jì)的決定影響是深遠(yuǎn)的。之后幾乎所有UI設(shè)計(jì)的設(shè)計(jì)風(fēng)格也變得單一，一切控件元素都是純色填充的設(shè)計(jì)形式。某種程度上這也形成了設(shè)計(jì)界的政治正確。一切其他額外的裝飾質(zhì)感都是多余的，也是不合時(shí)宜的。

在追波之類的設(shè)計(jì)師社區(qū)，也有一些設(shè)計(jì)師大量嘗試使用漸變質(zhì)感的方式，不過更多的被嘲笑是飛機(jī)稿。從2018年淘寶界面大量嘗試使用了漸變方式。也帶動(dòng)了業(yè)界的設(shè)計(jì)潮流。

在這次活動(dòng)中，看到了界面中標(biāo)題欄，和一些背景欄大量的運(yùn)用漸變的方式填充界面，設(shè)計(jì)層次更加的豐富多變。因?yàn)闈u變的填充方式多種多樣，這樣也增加了設(shè)計(jì)視覺效果的多樣性。

標(biāo)題欄下線性漸變

背景上的多層光影漸變

各種圖形質(zhì)感漸變的穿插

#06

動(dòng)態(tài)背景

標(biāo)題欄設(shè)計(jì)我們一般會(huì)選擇純色或者填充方式設(shè)計(jì)，在這次活動(dòng)中看到設(shè)計(jì)師運(yùn)用一些動(dòng)態(tài)的影像做為標(biāo)題欄的背景填充。這種方式對(duì)于服務(wù)器的壓力會(huì)略高一些，因?yàn)橛跋竦奈募褥o態(tài)圖片大不少。

#07

動(dòng)效切換

當(dāng)頁(yè)面中需要展示大量信息的時(shí)候，通常的做法，就是在一屏中盡可能加入更多的的信息。但空間始終有限。所以設(shè)計(jì)師想出用橫滑卡片的方式，增加信息的密度。但橫滑卡片的一個(gè)難點(diǎn)就是卡片的后面幾頁(yè)幾乎沒有人會(huì)去看。這樣無疑降低了信息的展示性。

淘寶設(shè)計(jì)師采用的設(shè)計(jì)手法就是卡片動(dòng)態(tài)展示，當(dāng)然為了減少用戶被眼花繚亂的動(dòng)效騷擾。嚴(yán)格控制了上下卡片的自動(dòng)切換時(shí)間。使上下卡片的自動(dòng)切換時(shí)間錯(cuò)開。這樣既增加了信息的密度，同時(shí)又減少用戶的焦躁情緒。

上下欄切換

頭圖與商品套裝的切換

卡片視頻動(dòng)態(tài)切換展示

#08

結(jié)語

淘寶新勢(shì)力周集結(jié)了國(guó)內(nèi)外最強(qiáng)潮流力量，同時(shí)各家服裝廠商也將帶著各自的尖貨新品系列做盛大上新，展示的是最新服裝設(shè)計(jì)潮流。里面的服裝商品圖片也琳瑯滿目，攝影的圖片水準(zhǔn)也非常高。竹子非常建議設(shè)計(jì)師仔細(xì)品位研讀。既可以運(yùn)用到互聯(lián)網(wǎng)營(yíng)銷視覺中，活動(dòng)中一些交互和UI設(shè)計(jì)細(xì)節(jié)也可以運(yùn)用到界面設(shè)計(jì)中。

今天就分享到這里，希望對(duì)大家工作中的設(shè)計(jì)有用。另外為了讓大家及時(shí)收到竹子推送的設(shè)計(jì)分享，可以把公眾號(hào)加個(gè)星星哦。下一篇分享的內(nèi)容是作品集相關(guān)的設(shè)計(jì)內(nèi)容。

來源網(wǎng)絡(luò)