激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

從電商設(shè)計新勢力周看UI設(shè)計新動向

發(fā)布時間：2024-01-23 10:46:59 瀏覽量：222次

#01

前言


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

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

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



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


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

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

#02

賽博朋克風(fēng)格

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


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


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


#03

莫蘭迪色的運用

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


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


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


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



#04

毛玻璃的運用


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


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


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


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



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


#05

微漸變運用


微漸變設(shè)計的運用

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


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


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


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

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


背景上的多層光影漸變



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


#06

動態(tài)背景


標(biāo)題欄設(shè)計我們一般會選擇純色或者填充方式設(shè)計，在這次活動中看到設(shè)計師運用一些動態(tài)的影像做為標(biāo)題欄的背景填充。這種方式對于服務(wù)器的壓力會略高一些，因為影像的文件要比靜態(tài)圖片大不少。


#07

動效切換


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


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


上下欄切換



頭圖與商品套裝的切換



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


#08

結(jié)語


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


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

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

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定