首頁

網(wǎng)站設(shè)計(jì)之九:高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

博博

2020年已經(jīng)過去一大半,這些時(shí)間以來,我一直在關(guān)注數(shù)字設(shè)計(jì)領(lǐng)域未來的設(shè)計(jì)趨勢。從年初就開始收集,到今8月份了,我想是時(shí)候?qū)l(fā)現(xiàn)的一些趨勢風(fēng)格分享出來,這些風(fēng)格很有可能繼續(xù)延續(xù)到2021的產(chǎn)品設(shè)計(jì)上。

對于UI界面視覺趨勢,同樣需要我們高度重視。畢竟每年改版方向,視覺風(fēng)格研究是必不可少的一個(gè)環(huán)節(jié),下面正式開始。


少量的漸變


今年在各網(wǎng)站上看到大面積的漸變色設(shè)計(jì),相對前兩年來說越來越少,設(shè)計(jì)上有所克制。大面積的漸變色雖然視覺沖擊力強(qiáng),但大部分停留在概念中。

從今年設(shè)計(jì)中我們可以看到設(shè)計(jì)更加理性與克制,將漸變色彩運(yùn)用到關(guān)鍵功能上,突出強(qiáng)調(diào)重要信息。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

機(jī)票選購界面,將漸變色運(yùn)用到頭部位置去強(qiáng)調(diào)功能。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

運(yùn)用在功能卡片上,突出重點(diǎn)信息。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

如上圖,設(shè)計(jì)上同樣只將漸變色運(yùn)用在背景上,其他卡片上基本沒有漸變色。


包豪斯風(fēng)格圖形


幾何圖形設(shè)計(jì)是目前運(yùn)用最多一個(gè)設(shè)計(jì)手法,今年發(fā)現(xiàn)一些比較抽象藝術(shù)化包豪斯風(fēng)格幾何圖形,在UI設(shè)計(jì)中大量運(yùn)用,且效果還不錯(cuò)。

這種圖形帶來好處就是記憶性強(qiáng),應(yīng)用廣,它不僅可以拓展在品牌包裝,品牌圖形延展,還可以運(yùn)用在UI設(shè)計(jì)中。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

卡片設(shè)計(jì)采用一些具有意向符號的圖形,來表達(dá)功能的設(shè)計(jì),形成記憶點(diǎn)。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

品牌設(shè)計(jì)上,也是重復(fù)這種極簡包豪斯風(fēng)格幾何圖形。將logo元素提取,進(jìn)行包豪斯風(fēng)格化,重復(fù)運(yùn)用在設(shè)計(jì)中。

有深度的界面


今年這樣的設(shè)計(jì)屢見不鮮,大量3D運(yùn)用在界面設(shè)計(jì)中,二維的界面已經(jīng)不再滿足當(dāng)前設(shè)計(jì)需要。設(shè)計(jì)師去探索更多維度學(xué)科與UI界面融合,形成一種全新的視覺感官。

uber的概念官網(wǎng)就通過3D來呈現(xiàn),表達(dá)功能亮點(diǎn)。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

將二維世界三維化,將是2021年重要的趨勢。目前國內(nèi)外線上有一些產(chǎn)品,開始在部分功能模塊使用這樣設(shè)計(jì)手法,如Naver,支付寶等。


毛玻璃效果


可以說是趨勢輪回,毛玻璃的效果又回來了。這也是今年在各網(wǎng)站設(shè)計(jì)上出現(xiàn)頻次多一些的設(shè)計(jì)。

新的毛玻璃效果更加去注重功能說明,用在視覺強(qiáng)調(diào)的地方。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

如上圖設(shè)計(jì),毛玻璃運(yùn)用在頂部關(guān)鍵信息上。這樣設(shè)計(jì)即可減少其他色彩運(yùn)用,還可以對功能信息進(jìn)行強(qiáng)調(diào)。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

毛玻璃效果運(yùn)用在個(gè)人中心,人物頭像位置,進(jìn)行設(shè)計(jì)強(qiáng)調(diào)。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

運(yùn)用毛玻璃去包裝UI界面,可以提升品質(zhì)感與神秘感。


沉浸式界面


將功能與場景融合設(shè)計(jì),用戶在使用產(chǎn)品過程中,能產(chǎn)生更多情景體驗(yàn)感觸。這也是最近今年喊的比較火的一種設(shè)計(jì)思路。在各網(wǎng)站上,這樣設(shè)計(jì)出現(xiàn)次數(shù)越來越多,設(shè)計(jì)效果沖擊力強(qiáng),得到很多設(shè)計(jì)師的認(rèn)可。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

場景中關(guān)鍵人物元素與設(shè)計(jì)進(jìn)行巧妙集合。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

運(yùn)用超現(xiàn)實(shí)設(shè)計(jì)手法,將人物與酒店場景進(jìn)行排版布局。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

將制作材料與產(chǎn)品集合。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

擬真植物元素與土地進(jìn)行巧妙集合,在視覺上傳達(dá)逼真效果。


界面排版雜志化


雜志化設(shè)計(jì)風(fēng)格鮮明,可以有助產(chǎn)品去打造強(qiáng)化記憶點(diǎn)。雜志化設(shè)計(jì)的優(yōu)勢可以不受到網(wǎng)格約束,排版使用大字體,同時(shí)設(shè)計(jì)排版上更加個(gè)性。我們在做產(chǎn)品概念探索前期,可以多去嘗試這樣的風(fēng)格。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢


擬物化圖標(biāo)


擬物圖標(biāo)又回來了,Apple新版本的Big Sur系統(tǒng),就采用擬態(tài)圖標(biāo),這也是一個(gè)新的嘗試,當(dāng)然也是一個(gè)開始。我們很有必要時(shí)刻關(guān)注這個(gè)趨勢,未來將會在更多設(shè)計(jì)中看到擬物化圖標(biāo)的出現(xiàn)。

不過這種風(fēng)格也不能大面積運(yùn)用在界面中,我們可以運(yùn)用在一些關(guān)鍵功能入口設(shè)計(jì)上。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

在天氣上的運(yùn)用,相對之前扁平化設(shè)計(jì),目前具有空間的擬物化設(shè)計(jì),增加了真實(shí)感。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

圓形的運(yùn)用


圓形趨勢,我想大家也許會忽略的點(diǎn),最近幾年設(shè)計(jì)中,圓形的設(shè)計(jì)無處不在。它的好處不言而喻,親和力強(qiáng)、場景覆蓋廣,幾乎任何設(shè)計(jì)都能去用圓形。因此我們有必要去注意圓形運(yùn)用技巧。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

星巴克的web UI概念設(shè)計(jì),采用圓形與產(chǎn)品進(jìn)行集合設(shè)計(jì)排版。


2021新擬態(tài)界面


新擬態(tài)趨勢是2020年受到廣泛關(guān)注的趨勢之一,這種趨勢大量使用了柔和的陰影和微弱漸變,使設(shè)計(jì)既具有未來感又具有現(xiàn)實(shí)感,并且為熟悉的界面帶來了新的感覺。相對之前大面積濃厚陰影而言,目前新的簡化擬態(tài)界面,會克制使用這些元素。

高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

2021年擬態(tài)界面,更注重功能與體驗(yàn)。擬態(tài)效果會使用在關(guān)鍵功能上,如儀表、按鈕,又或者需要重點(diǎn)強(qiáng)調(diào)的地方,避免了大面積使用這種設(shè)計(jì)手法。

寫在最后


2021年的趨勢相對來說,有繼續(xù)延續(xù)2020年一些設(shè)計(jì)風(fēng)格,這些風(fēng)格將會在繼續(xù)加強(qiáng),同時(shí)我們也有發(fā)現(xiàn),目前越來越多3D元素與二維界面進(jìn)行集合設(shè)計(jì),能更生動(dòng)傳達(dá)功能與將故事,2021年大家務(wù)必要注意這種趨勢的延續(xù)。

作為設(shè)計(jì)師,我們對設(shè)計(jì)的思考不能只停留在表象層面,而更多的需要圍繞信息傳達(dá)這一設(shè)計(jì)的本質(zhì)功能,以充滿自省的精神深化和反思自己的設(shè)計(jì)意識,同時(shí)要時(shí)刻保持對趨勢的敏感度。將新趨勢合理的運(yùn)用在產(chǎn)品設(shè)計(jì)中,以產(chǎn)生最大化收益。

作者:功夫UX

轉(zhuǎn)載請注明:優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



更多精彩文章:

網(wǎng)站設(shè)計(jì)之一:怒馬!超實(shí)用的單頁網(wǎng)站設(shè)計(jì)指南(附大量資源)

網(wǎng)站設(shè)計(jì)之二:旅游網(wǎng)站設(shè)計(jì)分析!教你10個(gè)小技巧

網(wǎng)站設(shè)計(jì)之三:實(shí)例教學(xué)!如何將極簡風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中?

網(wǎng)站設(shè)計(jì)之四:另辟蹊徑談創(chuàng)新!提升網(wǎng)站設(shè)計(jì)形式的幾種方法

網(wǎng)站設(shè)計(jì)之五:經(jīng)驗(yàn)分享:移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計(jì)之六:4000 字快速回顧20多年的網(wǎng)頁設(shè)計(jì)發(fā)展史!

網(wǎng)站設(shè)計(jì)之七:騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

網(wǎng)站設(shè)計(jì)之八:為什么千萬別隨便學(xué)國外的極簡設(shè)計(jì)?

網(wǎng)站設(shè)計(jì)之九:高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

網(wǎng)站設(shè)計(jì)之十:如何做好網(wǎng)頁頭部內(nèi)容設(shè)計(jì)?來看 58 設(shè)計(jì)師的總結(jié)!










網(wǎng)站設(shè)計(jì)之七:2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

博博


前言


動(dòng)態(tài)設(shè)計(jì)(Motion Design)有助于創(chuàng)建令人愉悅且直觀的用戶界面。好的動(dòng)態(tài)設(shè)計(jì),不僅能引導(dǎo)用戶對數(shù)字產(chǎn)品的體驗(yàn),還可傳達(dá)有關(guān)產(chǎn)品的品牌信息。本文將介紹近來最流行的動(dòng)態(tài)設(shè)計(jì)趨勢,這些令人驚艷的動(dòng)效表現(xiàn)手法,在不久的將來勢必席卷所有人的目光。

1. 動(dòng)態(tài)在 UI/UX 扮演的角色

動(dòng)態(tài)能激發(fā)用戶的情緒,為靜態(tài)的視覺設(shè)計(jì)注入活力與生命力。有趣、奇妙、吸引人的動(dòng)態(tài),能讓你的產(chǎn)品展現(xiàn)與眾不同的魅力。另一方面,動(dòng)態(tài)有助于支持可用性,通過自然流暢的物理運(yùn)動(dòng),突顯元素在過渡時(shí)的關(guān)聯(lián)性與狀態(tài)變化,增強(qiáng)用戶對產(chǎn)品功能的感知。

因此,動(dòng)態(tài)設(shè)計(jì)必須是有意義的,同時(shí)兼具可用性與美感,UX 行業(yè)也將動(dòng)態(tài)設(shè)計(jì)視為多學(xué)科的交集,細(xì)分成一個(gè)專業(yè)的設(shè)計(jì)門類。作為 UI 和 UX 設(shè)計(jì)中重要的組成部分,動(dòng)態(tài)設(shè)計(jì)從三個(gè)層面發(fā)揮影響力:

提高連貫性(Increase Continuity)

讓界面元素在用戶流程中順暢地轉(zhuǎn)變與過渡,將用戶操作導(dǎo)向期望的任務(wù)結(jié)果。

連接場景(Connect Scenes)

在轉(zhuǎn)換場景的過程中扮演潤滑劑的角色,闡明場景之間的位置、層級與空間的關(guān)系。

視覺吸引(Visually Appealing)

聚焦用戶視線,將其注意力放在重要的事情上,從而起到信息傳達(dá)、提升識別度的作用。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

2. 動(dòng)態(tài)設(shè)計(jì)趨勢

植基于 UI 和 UX 設(shè)計(jì)而發(fā)展的第三維度,動(dòng)態(tài)設(shè)計(jì)的趨勢自然與兩者密不可分。綜觀近年,多數(shù)作品巧妙地運(yùn)用絢麗的動(dòng)態(tài)圖像(Motion Graphics)與動(dòng)效設(shè)計(jì),讓新的視覺手法得以表現(xiàn)更為出彩。再者,隨著移動(dòng)端芯片性能提升,跳脫二維平面的表現(xiàn)形式不再難以實(shí)現(xiàn),讓設(shè)計(jì)師能夠解開束縛,發(fā)揮無限的想像空間。2021 年的動(dòng)態(tài)設(shè)計(jì)可歸納為三個(gè)趨勢:

增強(qiáng)表達(dá)(Enhance Expression)

運(yùn)用引人注目的表現(xiàn)手法將信息傳遞給用戶,包括變形、動(dòng)態(tài)文字背景動(dòng)畫。

創(chuàng)造層次(Create Hierarchy)

在視覺平面中創(chuàng)建空間層次結(jié)構(gòu),遮罩與視差是常用的表現(xiàn)手法。

擴(kuò)展維度(Expand Dimensions)

突破二維限制,將界面元素多維化營造空間感,例如 3D 動(dòng)態(tài)圖形和攝像機(jī)運(yùn)動(dòng)。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇


增強(qiáng)表達(dá)


1. 變形 Morphing

變形創(chuàng)造了一種連續(xù)的敘事狀態(tài),告知用戶元素的狀態(tài)或作用發(fā)生變化,是一種最引人注目的表現(xiàn)手法,能將形狀、圖像、色彩無縫地融合與過渡。

動(dòng)畫插圖 Animated Illustrations

2021 年看到許多有趣、吸引人的插圖,而更多的設(shè)計(jì)師開始為靜態(tài)圖像添加動(dòng)態(tài),也讓 GIF 和動(dòng)畫插圖越來越受歡迎。

動(dòng)畫插圖看起來更生動(dòng),并帶有敘事性質(zhì)。在示例中,運(yùn)用動(dòng)畫插圖來呈現(xiàn)這杯果汁是由哪些水果打成,比起文字描述更能吸引觀眾的注意力。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Lobster

通過動(dòng)畫插圖來呈現(xiàn)同一系列的轉(zhuǎn)變,有利于延續(xù)外形上的特征,讓不同的物體具有連結(jié)性。比如從桌子、衣柜到燈具的連續(xù)變化,同樣風(fēng)格的系列家具利用動(dòng)畫來體現(xiàn)一致性。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Graceful illustrations ?

流體動(dòng)態(tài) Liquid Motion

動(dòng)態(tài)的有機(jī)形狀,包括流體、煙霧和火焰等粒子效果,能夠極大地增強(qiáng)視覺效果。流體動(dòng)態(tài)并非明確的過渡與場景轉(zhuǎn)換,而是顏色在流動(dòng)的液體中擴(kuò)散,進(jìn)而創(chuàng)造出抽象或真實(shí)的視覺形狀。這種風(fēng)格能實(shí)現(xiàn)無縫過渡,并為設(shè)計(jì)增添有機(jī)感,也是 2021 年最引人注目的動(dòng)畫趨勢之一。

運(yùn)用流體動(dòng)態(tài)來展現(xiàn)抽象的有機(jī)體,除了輕易地攫取受眾目光,還讓人不自覺地佇足在畫面上,感受流體變化的韻律與美感。這類動(dòng)態(tài)設(shè)計(jì)可作為烘托主題的背景動(dòng)畫,或是吸引目光焦點(diǎn)的主角。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by ?anton mishin?

流體動(dòng)態(tài)運(yùn)用到網(wǎng)站設(shè)計(jì)所營造的視覺沖擊力更為驚艷,能為用戶帶來獨(dú)特、新鮮的視覺感受, 使得流體動(dòng)態(tài)深受風(fēng)格前衛(wèi)的設(shè)計(jì)師喜愛。網(wǎng)站還能利用鼠標(biāo)懸停與流體進(jìn)行互動(dòng),因此會在許多特效網(wǎng)站見到流體動(dòng)態(tài)的蹤跡。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Gilles Tossoukpé

動(dòng)態(tài)漸變 Dynamic Gradients

扁平化設(shè)計(jì)缺少現(xiàn)實(shí)質(zhì)感的元素,搭配漸變色能有效緩解不足,為設(shè)計(jì)創(chuàng)造深度與層次。變化中的漸變色同時(shí)帶有動(dòng)感與舒緩,充滿活力卻又平靜。使用動(dòng)態(tài)漸變能讓設(shè)計(jì)師展示一系列不斷變化的情緒,許多內(nèi)容創(chuàng)作者和品牌已經(jīng)注意到這一點(diǎn),開始在廣告活動(dòng)、識別設(shè)計(jì)和數(shù)字內(nèi)容使用動(dòng)態(tài)漸變。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Pixelz Studio

微交互 Micro Interactions

在用戶體驗(yàn)設(shè)計(jì)中微交互變得日益重要,而動(dòng)態(tài)設(shè)計(jì)正是微交互的靈魂所在,即使只是微小的視覺提示或反饋,都是人機(jī)交互易于使用的關(guān)鍵。從經(jīng)典案例來看,微交互的動(dòng)畫細(xì)節(jié)必須帶有明確的目的性,讓用戶獲得實(shí)時(shí)反饋,指導(dǎo)用戶進(jìn)行下一步。從近幾年的設(shè)計(jì)趨勢來看,微交互已成為不可或缺的存在。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Илья Бабушкин

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Google

動(dòng)畫商標(biāo) Animated Logos

過去幾年動(dòng)畫商標(biāo)是最流行的動(dòng)畫趨勢之一,通過各種視覺效果,設(shè)計(jì)師能創(chuàng)造出不同類型的動(dòng)畫商標(biāo),許多企業(yè)開始采用動(dòng)畫商標(biāo)作為吸引注意力的手段。多數(shù)情況下,商標(biāo)是進(jìn)入網(wǎng)站時(shí)最先看到的東西,因此商標(biāo)應(yīng)該令人難忘、引人入勝,并使用符號或排版來揭示品牌個(gè)性。結(jié)合動(dòng)畫的優(yōu)勢,設(shè)計(jì)師可以運(yùn)用一些動(dòng)態(tài)或效果來講述簡短的故事以強(qiáng)調(diào)品牌特征,并為靜態(tài)排版和商標(biāo)注入一股活力。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Yulia K.

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Meta

2. 動(dòng)態(tài)文字 Kinetic Typography

動(dòng)態(tài)文字是使用移動(dòng)文本來吸引注意力的動(dòng)畫技術(shù),許多卓越的品牌在網(wǎng)頁設(shè)計(jì)中使用動(dòng)態(tài)文字,為網(wǎng)站外觀增添動(dòng)感和視覺沖擊力,是近年 UI 動(dòng)畫的趨勢之一。

設(shè)計(jì)師使用動(dòng)態(tài)文字為單詞或句子添加生動(dòng)的元素,借此定下情緒氛圍與設(shè)計(jì)基調(diào),吸引用戶的注意力。幾種常見的表現(xiàn)手法,擠壓和拉伸一個(gè)詞能會喚起一種俏皮感,而連續(xù)重復(fù)這個(gè)詞則具有催眠感和前衛(wèi)感。另外,使用大號和粗體字體來增強(qiáng)份量以強(qiáng)調(diào)某些信息,也是動(dòng)態(tài)文字的特征之一。

無論在電商網(wǎng)站、電視廣告或音樂視頻,動(dòng)態(tài)文字都占有舉足輕重的地位,有利于加深用戶對品牌的關(guān)注與印象。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by HOLOGRAPHIK®

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Hrvoje Grubisic

3. 背景動(dòng)畫 Background Animation

通過背景動(dòng)畫來強(qiáng)化敘事,成為許多行業(yè)常用的品牌傳播手段。你可以創(chuàng)建動(dòng)態(tài)的品牌故事,展示有趣的制造過程、產(chǎn)品的使用場景。背景動(dòng)畫深獲大眾喜愛,它能讓用戶在進(jìn)入登錄頁或網(wǎng)站首頁時(shí),輕易地了解更多有關(guān)公司或產(chǎn)品的信息。調(diào)研顯示,從銀行、醫(yī)療保健公司、電商零售商、餐館到 B2B 供應(yīng)商,這些跨越不同細(xì)分市場和行業(yè)的網(wǎng)站都開始使用背景動(dòng)畫。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Carlo Soleri

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Kirill Zhukovsky


創(chuàng)造層次


1. 遮罩 Masking

遮罩過渡是將幾何或有機(jī)形狀作為銜接下個(gè)場景的遮擋物,等同于舞臺幕布設(shè)計(jì),能在界面元素進(jìn)場或退場時(shí)創(chuàng)造連續(xù)性效果。這種表現(xiàn)手法簡潔高效,是最常見的過渡動(dòng)畫之一。

切換場景 Scene-Switching

其中一種遮罩過渡,是將當(dāng)前場景完全置換,如同揭開蒙在上層的布,逐漸展露疊在下方的景,并利用景物相似性和動(dòng)作延續(xù)性,讓兩個(gè)場景能夠順暢地銜接,不致于差異過大,造成用戶心理負(fù)擔(dān)。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by intent

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Minh Pham ?

狀態(tài)變換 State Transformation

另一種遮罩的表現(xiàn)形式,較無明顯的場景過渡,而是利用遮罩來表現(xiàn)景物的狀態(tài)變化,界面元素和布局基本保持一致,以此塑造無縫過渡的視覺效果,這種手法被廣泛地使用,例如氣候變化、人物換裝、產(chǎn)品組合等。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Daniel Tan

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Outcrowd

2. 視差 Parallax

視差是利用不同的界面元素以不同的速率移動(dòng),創(chuàng)造前后景深的分離效果,借此在平面中塑造空間層次,已成為網(wǎng)站首頁最為普遍的表現(xiàn)形式。

視差之所以能形成一股風(fēng)潮,廣為各個(gè)行業(yè)所接受,一方面是信息層級更加清晰,明確定義各種元素的關(guān)系,讓用戶專注于主要操作和內(nèi)容,將背景或非交互元素往后退,同時(shí)保持設(shè)計(jì)的完整性。另一方面是豐富的層次變化,當(dāng)用戶滾動(dòng)或滑動(dòng)時(shí),能在扁平化界面拉開空間關(guān)系,利用不同的速率和縱深,塑造多層次的感官體驗(yàn)。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Studio V?R

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Studio V?R


擴(kuò)展維度


1. 3D 動(dòng)態(tài)圖形 3D Motion Graphics

近年來,結(jié)合 3D 動(dòng)態(tài)圖形的界面設(shè)計(jì)呈現(xiàn)爆炸式增長,雖然創(chuàng)建 3D 動(dòng)畫需要更多的時(shí)間、技巧與協(xié)作,但不可否認(rèn)的,3D 動(dòng)畫比 2D 圖形更加逼真,從而提供更具吸引力和互動(dòng)性的用戶體驗(yàn),并有效地展示品牌的活力。

更生動(dòng)的表情 Lively Emoji

動(dòng)畫的吸引力在于能夠創(chuàng)建各種角色,并為無生命物體注入生命力,表情符號就是一個(gè)很好的例子。作為獨(dú)特的網(wǎng)絡(luò)語言,表情符號生動(dòng)地描摹日常面對面交流的非言語信息,隨著圖形界面的設(shè)計(jì)趨勢逐漸結(jié)合 2D 與 3D,運(yùn)用 3D 動(dòng)態(tài)圖形來創(chuàng)造更加動(dòng)感、擬人化的表情,能讓這些非言語信息更加豐富,有機(jī)會引領(lǐng)下一波風(fēng)潮。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Outcrowd

營造空間感 Spatial Awareness

3D 動(dòng)態(tài)圖形為平面設(shè)計(jì)建構(gòu)了空間敘事框架,在扁平化界面中展現(xiàn)立體感,從而表達(dá)空間中元素的位置與層級關(guān)系。多維化的發(fā)展趨勢,推動(dòng)了視覺表達(dá)形式的演變,空間感讓界面設(shè)計(jì)更符合人類的認(rèn)知邏輯,運(yùn)用各種 3D 運(yùn)動(dòng)特效,包括旋轉(zhuǎn)、翻轉(zhuǎn)、折疊、透視、Z 軸位移等,打造令人難忘的感官?zèng)_擊。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by UI8

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Bruno Ortolland

擬人動(dòng)畫 Anthropomorphic Animations

擬人化能讓物體、植物、動(dòng)物等非人類事物,表現(xiàn)出人類屬性的行為與狀態(tài)。動(dòng)畫片運(yùn)用擬人的手法是最普遍的,1927 年迪士尼第一部系列動(dòng)畫《幸運(yùn)兔子奧斯華》的主角便是擬人的兔子形象。由于人們?nèi)菀妆灰匀祟愋惺碌氖挛锼絹碓蕉嘣O(shè)計(jì)師在界面中添加擬人元素,利用這種效果讓畫面更加生動(dòng)有趣,增強(qiáng)用戶體驗(yàn)的愉悅感。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

by Gregory Riaguzov

2. 攝像機(jī)運(yùn)動(dòng) Camera Movements

在動(dòng)態(tài)設(shè)計(jì)中,攝像機(jī)運(yùn)動(dòng)是最自由、靈活的一種表現(xiàn)形式,能讓畫面過渡更有張力,突破 2D 平面在視角上的限制,創(chuàng)造一個(gè)無界線的立體空間。常見于影視、動(dòng)畫和廣告的攝像機(jī)運(yùn)動(dòng),包括推近、拉出、平移、跟拍等方式,備受動(dòng)態(tài)設(shè)計(jì)師青睞,讓用戶以多變的視野探索數(shù)字產(chǎn)品。

推近/拉出 Dolly In/Dolly Out

推鏡頭是指被拍攝的對象不動(dòng),攝像機(jī)由遠(yuǎn)而近,朝著對象不斷推進(jìn), 用來突出人或物的主體。鏡頭推近的運(yùn)動(dòng)方式,用來呈現(xiàn)從整體到局部、由分散到集中的變化,引領(lǐng)用戶進(jìn)入故事情景,給人一種身臨其境的感受。

相反地,拉鏡頭則是將攝像機(jī)后退,使畫面逐漸遠(yuǎn)離被攝主體,側(cè)重的是從局部到整體、由點(diǎn)到面的轉(zhuǎn)變,強(qiáng)調(diào)主體所處的空間環(huán)境。隨鏡拉出的景象,能激起人們無限的想像。

水平/垂直移動(dòng) Truck/Pedestal

水平向左或向右,垂直向上或向下移動(dòng)攝像機(jī),使畫面不斷變化,讓用戶跟隨鏡頭視角一起移動(dòng),產(chǎn)生一種置身其中的感覺。這種運(yùn)鏡方式,通常用于具體的場景,利用角色或景物的延續(xù)性來消除場景過渡時(shí)的邊界,表現(xiàn)出一種流動(dòng)感,無論是手勢滑動(dòng)或鼠標(biāo)滾動(dòng)都能有順暢的操作體驗(yàn)。

騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇


結(jié)合多種運(yùn)鏡 Multiple Camera Movements

運(yùn)用多種攝像機(jī)運(yùn)動(dòng)相當(dāng)普遍,既能擴(kuò)大視野,又有很強(qiáng)的空間感,可以更加自由與多樣地展示不同視角和情景。比方說結(jié)合橫搖(Pan)、直搖(Tilt)和跟隨(Tracking)鏡頭,連續(xù)而詳盡地展示一個(gè)產(chǎn)品,由于畫面始終跟隨一個(gè)主體,有利于突出產(chǎn)品特征,并讓用戶從不同的角度和距離觀看產(chǎn)品,是一種增強(qiáng)臨場感和參與感的有效方法。


一鏡到底 One Shot

在電影中為了不將觀眾的情感和注意力割裂,使用一個(gè)鏡頭來完成全片的場景刻畫和敘事,這種拍攝手法被稱作一鏡到底或長鏡頭。連續(xù)鏡頭逐漸被運(yùn)用到界面過渡,以此增強(qiáng)操作過程的流暢性,例如一氣呵成的購物體驗(yàn),或是貫穿全場的人物角色,其特點(diǎn)是給用戶最沉浸的感官體驗(yàn),無間斷地體驗(yàn)整個(gè)流程。


結(jié)語


動(dòng)態(tài)設(shè)計(jì)作為近年熱門的創(chuàng)作形式,廣泛應(yīng)用到各個(gè)領(lǐng)域,逐漸成為設(shè)計(jì)的主流趨勢。受益于技術(shù)演進(jìn)與發(fā)展,從創(chuàng)意生產(chǎn)到落地實(shí)現(xiàn),動(dòng)態(tài)設(shè)計(jì)的門檻不再遙不可及。設(shè)計(jì)師得以將想法轉(zhuǎn)化為生動(dòng)、有趣的作品,并有機(jī)會創(chuàng)造新的表現(xiàn)手法,玩出許多新花樣,成為 2021 年動(dòng)態(tài)設(shè)計(jì)的特色。

本文歸納的設(shè)計(jì)趨勢,有助于啟發(fā)設(shè)計(jì)師對動(dòng)態(tài)設(shè)計(jì)的想像,激發(fā)更多創(chuàng)作靈感,為靜態(tài)界面賦予靈魂,打造令人難忘的視覺體驗(yàn)和品牌形象。

作者:騰訊ISUX


轉(zhuǎn)載請注明:優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



更多精彩文章:

網(wǎng)站設(shè)計(jì)之一:怒馬!超實(shí)用的單頁網(wǎng)站設(shè)計(jì)指南(附大量資源)

網(wǎng)站設(shè)計(jì)之二:旅游網(wǎng)站設(shè)計(jì)分析!教你10個(gè)小技巧

網(wǎng)站設(shè)計(jì)之三:實(shí)例教學(xué)!如何將極簡風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中?

網(wǎng)站設(shè)計(jì)之四:另辟蹊徑談創(chuàng)新!提升網(wǎng)站設(shè)計(jì)形式的幾種方法

網(wǎng)站設(shè)計(jì)之五:經(jīng)驗(yàn)分享:移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計(jì)之六:4000 字快速回顧20多年的網(wǎng)頁設(shè)計(jì)發(fā)展史!

網(wǎng)站設(shè)計(jì)之七:騰訊出品!2021-2022設(shè)計(jì)趨勢報(bào)告:動(dòng)態(tài)篇

網(wǎng)站設(shè)計(jì)之八:為什么千萬別隨便學(xué)國外的極簡設(shè)計(jì)?

網(wǎng)站設(shè)計(jì)之九:高手出品!2020~2021年UI界面設(shè)計(jì)趨勢

網(wǎng)站設(shè)計(jì)之十:如何做好網(wǎng)頁頭部內(nèi)容設(shè)計(jì)?來看 58 設(shè)計(jì)師的總結(jié)!










2022年你最需要抓住的UI/UX設(shè)計(jì)趨勢

純純

在本文中,我們將發(fā)現(xiàn):

  • 3D視覺設(shè)計(jì)師的內(nèi)卷將會越來越嚴(yán)重

  • 數(shù)據(jù)可視化的工作將變得越來越重要

  • 服務(wù)的移動(dòng)化還需要做出更多努力

  • scrollytelling 技術(shù)會越來越流行



1、滾動(dòng)已死,滾動(dòng)敘事興起 


舊的滾動(dòng)是無聊的。如果你想吸引注意力,你就需要實(shí)現(xiàn)滾動(dòng)敘事(scrollytelling)。(彩云注:這個(gè)技術(shù)的核心在于邊滾動(dòng)頁面邊講故事) 

undefined

《紐約時(shí)報(bào)》是第一批在他們的文章《雪花飄落》中使用滾動(dòng)敘事手法的機(jī)構(gòu)之一。


它是一種敘事形式,可以在網(wǎng)頁和APP上呈現(xiàn)。想象一下,在一個(gè)網(wǎng)站中每個(gè)插圖、文本和其他元素都開始變得生動(dòng)起來。自然地,你會想看到這個(gè)故事的結(jié)局。它就像一個(gè)游戲,帶你穿越迷宮。雖然你不能影響它的進(jìn)程,但卻讓你感覺自己能參與其中。


2022年,Scrollytelling將會出現(xiàn)在你看到的每一個(gè)流行網(wǎng)站上。


另一方面,scrolllytelling讓用戶真正去閱讀內(nèi)容。你可以用動(dòng)態(tài)文本讓他們產(chǎn)生興趣,比如谷歌的網(wǎng)站 (https://www.google.com/search/howsearchworks/)。他們的團(tuán)隊(duì)知道如何讓信息看起來更好:

undefined

Scrollytelling在用戶向下滾動(dòng)時(shí)被激活,因此得名。沒有點(diǎn)擊,沒有選擇的麻煩,沒有彈出窗口。你似乎停留在一個(gè)地方,但通過滾動(dòng),把屏幕上的故事慢慢展開。這不僅要求設(shè)計(jì)師創(chuàng)造出酷炫的視覺效果,還需要認(rèn)真思考一個(gè)你想要講述的故事情節(jié)。


所以,最好的網(wǎng)站不可能在2天內(nèi)建成,需要更多的時(shí)間去打磨。

undefined

IAmBinadam令人驚艷的敘述設(shè)計(jì)


滾動(dòng)敘事的項(xiàng)目通常需要大量的時(shí)間和精力。不過,這樣做的結(jié)果是值得的。頁面變成“活的”,每一秒都有新的事情發(fā)生,所以在閱讀時(shí)很難感到無聊。


那么移動(dòng)端APP呢? Pure是一款約會應(yīng)用(彩云注,這個(gè)應(yīng)用在app store可以搜到,推薦大家安裝一個(gè)體驗(yàn)一下,非廣告),它創(chuàng)造了一種我稱之為“tappytelling”的故事(當(dāng)你第一次點(diǎn)擊并打開應(yīng)用時(shí),它就會被激活):


undefined


Scrollytelling是為用戶而創(chuàng)建的,用戶很喜歡它,不需要到其他頁面去閱讀整個(gè)故事。相反,網(wǎng)頁設(shè)計(jì)的整個(gè)故事都是事先考慮好的,并盡可能以最有趣的方式設(shè)計(jì)出來。 


2、用戶喜歡看數(shù)據(jù),數(shù)據(jù)可視化越來越被重視 


如何在2022年做出一個(gè)還不錯(cuò)的企業(yè)網(wǎng)站?你不會想告訴用戶你是“XX領(lǐng)域公認(rèn)的領(lǐng)導(dǎo)者,該領(lǐng)域最好的之一”。這種標(biāo)準(zhǔn)的廣告表達(dá)并不傳達(dá)任何有價(jià)值的信息。


最好不要用形容詞,而是用事實(shí)來說明:你有多少分支機(jī)構(gòu),在哪些城市,誰是你的客戶,以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數(shù)據(jù),你需要讓它不僅簡單,而且有趣。 

undefined

數(shù)據(jù)可視化有助于以一種吸引人的方式傳達(dá)正確的信息。它也可以與滾動(dòng)敘事(Scrollytelling)緊密結(jié)合。以下是IAmBinadam展示數(shù)據(jù)的方式:


undefined

 通過去除數(shù)據(jù)集的復(fù)雜性,使信息更容易讓讀者感知。

undefined

不同級別的數(shù)據(jù)具有不同的大小,這樣用戶知道應(yīng)該先從哪里查看


讀者可以很快注意到作者試圖通過圖片引出的結(jié)論。考慮到如今人們消費(fèi)的數(shù)據(jù)量巨大,那些干凈整潔的數(shù)字帶來的正面影響更大。 


undefined

有些圖表乍一看甚至不像圖表,這使得它們更加能被注意到


還有一種現(xiàn)象叫做“新冠后遺癥”。這是Covid對公司及其員工的長期影響。根據(jù)英國國家統(tǒng)計(jì)局的數(shù)據(jù),2018年,壓力和焦慮的平均得分約為2.7/10。自新冠疫情發(fā)生以來,得分已升至4.0/10,很少低于這一水平。同樣因?yàn)榇罅餍校谶^去兩年里工作量增加了4個(gè)小時(shí)。


人們壓力太大,卷的太辛苦,以至于不愿去看復(fù)雜的數(shù)據(jù)。


設(shè)計(jì)師做好數(shù)據(jù)可視化,以保持人們的注意力。記住,復(fù)雜的信息通常被忽略,因?yàn)樽x者試圖節(jié)省他們的時(shí)間,更有可能使用滾動(dòng)按鈕。
undefined

Illustration by Mona Chalabi


以下是我們推薦的一些表示數(shù)據(jù)的方式

  • 1)圖表和曲線圖

  • 2)插圖

  • 3)靜態(tài)信息圖

  • 4)互動(dòng)信息圖


undefined

Illustration by Ink Factory


如何讓信息圖表看起來更好?

一個(gè)好的圖表,或者任何其他形式的數(shù)據(jù)可視化,都應(yīng)該具有在Edward Tufte的“定量信息的可視化顯示”中描述的特征。在他的書中,Tufte通過圖表解釋了好圖表的3個(gè)原則:


1)展示數(shù)據(jù)的圖形元素與數(shù)值總數(shù)的比值應(yīng)趨向于1。簡單地說,應(yīng)該刪除一切不必要的元素,保持整潔。 


undefined


2)充分利用好畫面空間。也就是說,需要將數(shù)據(jù)編排的更緊密


undefined

Graph by Hootsuite


3)客觀地描述數(shù)據(jù)。不要使用夸張的圖表,可視化數(shù)據(jù)可以看起來很酷,但真實(shí)永遠(yuǎn)是更重要的。


3、2022年還有必要做APP嗎?


根據(jù)We Are Social的數(shù)據(jù),2021年有52.2億人使用手機(jī),約占世界人口的66%。自2020年1月以來,手機(jī)用戶數(shù)量增長了1.8%(9300萬),而手機(jī)聯(lián)網(wǎng)總數(shù)量增長了7200萬(0.9%),到2021年初達(dá)到80.2億。


過去一年,社交媒體用戶的數(shù)量增長了13%以上。到2021年初,社交網(wǎng)絡(luò)上已有近5億新用戶注冊。根據(jù)App Annie的數(shù)據(jù),Android用戶每天花在手機(jī)上的時(shí)間超過4小時(shí)。2020年,安卓用戶上網(wǎng)時(shí)長超過3.5萬億小時(shí)。


令人印象深刻的數(shù)字,是嗎?似乎到2022年,為產(chǎn)品做一個(gè)APP將成為必須擁有的東西。如何知道你的公司是否真的需要一款應(yīng)用?有以下幾點(diǎn)可供評估:

 

1)用戶主要通過移動(dòng)設(shè)備訪問你的網(wǎng)站這是你應(yīng)該了解的重要數(shù)據(jù)。

客戶和你在一起的時(shí)間越長,你就有越多的機(jī)會去吸引他們,了解他們的習(xí)慣,并給他們想要的東西。(彩云注:這就是為什么各大廠之間都在拼命搶占用戶的在線時(shí)長。)

2)幫助內(nèi)部業(yè)務(wù)流程更加有效。

如果你想要提高員工的工作效率、改進(jìn)工作流程或增加利潤,那么就制作一個(gè)可以幫助管理業(yè)務(wù)流程的移動(dòng)應(yīng)用。

如今,像這樣的手機(jī)應(yīng)用使企業(yè)能夠執(zhí)行越來越復(fù)雜和多樣化的任務(wù),加快日常重復(fù)操作和文檔管理。


3)實(shí)現(xiàn)一些網(wǎng)站上沒有的新功能。

如果你認(rèn)為APP能為用戶打開新的觸點(diǎn),并讓用戶體驗(yàn)更加友好,那么它就值得考慮開發(fā)。問問自己的APP能提供什么新的商業(yè)機(jī)會?例如,隨著疫情的蔓延,許多人開始用上健身APP在家里鍛煉。


4)競爭對手做的情況。

要了解競爭對手在做什么,他們是否有APP,能做什么,以及他們是否真的對用戶有用。


查看App Store和谷歌Play的統(tǒng)計(jì)數(shù)據(jù)。下載和評論的數(shù)量可以告訴你用戶是如何使用競爭對手的應(yīng)用的。如果他們的服務(wù)真的很方便而且很有必要,那么你就容易被甩在后面。


5)復(fù)購率。

一個(gè)應(yīng)用可以幫助你留住那些習(xí)慣從你那里購買的人。如果想為老客戶開展促銷活動(dòng)了,給他們發(fā)送一個(gè)通知就能完成,成本更低。


在正確的時(shí)間提供的報(bào)價(jià)越有吸引力,人們購買的可能性就越大。

undefined

6)促銷工具。


有了應(yīng)用,你就不需要花錢設(shè)計(jì)和制作實(shí)體卡,客戶也不需要隨身帶卡。將促銷計(jì)劃整合到APP,并分享有用的促銷信息。


做原生APP還是移動(dòng)端網(wǎng)站?

開發(fā)手機(jī)網(wǎng)站比開發(fā)手機(jī)應(yīng)用需要更少的工作量,這反過來可以降低整體推廣成本。


這部分是由于響應(yīng)式設(shè)計(jì)的出現(xiàn),它允許你根據(jù)打開網(wǎng)站的設(shè)備屏幕來調(diào)整網(wǎng)站。至于APP,它們必須為許多移動(dòng)平臺單獨(dú)編寫:Android、IOS、Windows等。


一些設(shè)計(jì)師認(rèn)為“前端驅(qū)動(dòng)的網(wǎng)絡(luò)體驗(yàn)”會是2022年的一個(gè)好機(jī)會,我非常同意!(彩云注:在國內(nèi),現(xiàn)在開發(fā)小程序的肯定越來越多了。) 


4、3D設(shè)計(jì)具備更強(qiáng)競爭力 


我們一開始并沒有將其放在首位,因?yàn)檫@并不是一個(gè)新的趨勢,在很久以前設(shè)計(jì)師們就已經(jīng)設(shè)計(jì)了很多3D圖像和動(dòng)畫了。 

undefined

Cardi B rhymes with 3D

3D技術(shù)已經(jīng)在過去流行了很多年,但它不會很快消失。此外,我們預(yù)測3D圖形將變得更加多樣化和包容。


在過去的幾年里,3D藝術(shù)和動(dòng)畫已經(jīng)出現(xiàn)在各種UI設(shè)計(jì)趨勢評論中。這意味著越來越多的設(shè)計(jì)師將它們整合到頁面中。


3D當(dāng)然應(yīng)該成為2022年最熱門的趨勢和預(yù)測之一,因?yàn)榕c經(jīng)典動(dòng)畫相比,逼真的3D形狀結(jié)合動(dòng)畫總是引人注目的。


undefined


從技術(shù)上講,通過3D更容易傳達(dá)更多內(nèi)容,因?yàn)樗绕矫鎴D片更接近我們的感知。3D插圖更有深度,信息量更大,也更具互動(dòng)性。"


許多設(shè)計(jì)師將3D對象無縫地“安置”在2D空間中。它允許創(chuàng)建更有趣的組合,也作為一個(gè)優(yōu)秀的工作方法蘊(yùn)藏著巨大的潛力。


undefined

烏克蘭政府網(wǎng)站用3D手模擬了黑客帝國


注意一點(diǎn):在整合3D圖形等重量級內(nèi)容之前,確保你的應(yīng)用性能是OK的,能夠快速加載所有元素。 


5、元宇宙風(fēng)潮  


Meta的logo既不是2D也不是3D?;蛘邇烧呒娑兄?這就是即將到來的2022年的莫比烏斯帶和薛定諤的貓。 

 undefined

undefined

Meta logo的變化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)


(彩云注:這個(gè)概念在去年簡直不要太火,未來幾年肯定還會是一個(gè)大的趨勢,設(shè)計(jì)師也需要保持關(guān)注。跟著趨勢走,易于放大自身價(jià)值。)


6、混合動(dòng)畫  


越來越多的公司在網(wǎng)站和移動(dòng)應(yīng)用中使用動(dòng)畫,以提高用戶的沉浸感和體驗(yàn),使內(nèi)容更有趣。 

undefined


動(dòng)畫是2022年重要的網(wǎng)頁設(shè)計(jì)趨勢。2022年,如果沒有它,你的產(chǎn)品很可能會看起來就像個(gè)半成品?;旌巷L(fēng)格的動(dòng)畫越來越受歡迎:定格動(dòng)畫和3D動(dòng)畫的結(jié)合,2D動(dòng)畫和3D動(dòng)畫的結(jié)合。設(shè)計(jì)師這樣做是為了獲得不同尋常的風(fēng)格解決方案,以及提高最終產(chǎn)品的質(zhì)量。


2022年,動(dòng)畫設(shè)計(jì)將是品牌市場定位的重要組成部分,想想一個(gè)公司新的視覺形象——?jiǎng)赢嬓蜗?。隨著這個(gè)領(lǐng)域的專業(yè)設(shè)計(jì)師數(shù)量的增長,實(shí)現(xiàn)新想法的機(jī)會也在增加。


2022年如何使用網(wǎng)頁動(dòng)畫?

1)講故事動(dòng)畫。

可以通過在界面和用戶之間建立情感聯(lián)系來傳達(dá)信息。 

undefined

加載動(dòng)畫Yoichi Kobayashi


2)更有趣的加載。


用戶不愿意等待,除非載入畫面很有趣。帶有百分比的動(dòng)畫不僅可以分散用戶的注意力,還可以告知他們加載頁面需要多少時(shí)間。使用進(jìn)度條或者任何你能想到的可以顯示時(shí)間流逝的東西。

undefined


3)光標(biāo)效果。

用戶可以精確地觀察光標(biāo)所在的位置。通過添加智能互動(dòng)動(dòng)畫,對這個(gè)光標(biāo)作出反應(yīng)來探索網(wǎng)站。這種效果在21世紀(jì)初非常流行。如你所知,流行趨勢往往每20年就會重演一次


undefined 


4)動(dòng)態(tài)排版

你有沒有想過讓字母跳舞? 

undefined



添加角色的動(dòng)畫插圖

據(jù)Statista統(tǒng)計(jì),2020年全球動(dòng)畫市場達(dá)到了2700億美元。趨勢是視頻,而不是靜態(tài)信息。全球品牌在社交網(wǎng)絡(luò)上使用動(dòng)畫制作廣告。毫無疑問,動(dòng)畫插圖的優(yōu)勢是它們非常靈活和多樣化。 

undefined

寶馬歷史動(dòng)畫


這樣的作品通常用于兩種情況:

1)用于解釋視頻

2)電商廣告

undefined

動(dòng)畫解說的趨勢出現(xiàn)在幾年前,解說視頻清楚地顯示點(diǎn)擊的位置或公司的項(xiàng)目是關(guān)于什么的。


在招聘或商業(yè)視頻中,用戶更喜歡看畫出來的人物,而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴,就像活著的人一樣。


7、微交互,大影響  


微交互是幫助用戶瀏覽網(wǎng)站或應(yīng)用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果:它們顯示發(fā)生了什么,將導(dǎo)致什么操作,下一步需要做什么。 

undefined

圖片來源awwards


動(dòng)畫交互將為你的設(shè)計(jì)注入活力,并有助于保持用戶粘性。關(guān)注每一個(gè)細(xì)節(jié)是設(shè)計(jì)師工作的關(guān)鍵,因?yàn)樵O(shè)計(jì)中的所有元素都可以帶來積極的用戶體驗(yàn)。


重要的是要達(dá)到元素的和諧,而不是把注意力分散到界面的各個(gè)方面。微交互作用的一個(gè)重要部分是顏色,它們?yōu)榻缑嬖卦鰪?qiáng)價(jià)值。


undefined


微交互有助于頁面導(dǎo)航,解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能,以實(shí)現(xiàn)特定的行為。 


8、動(dòng)態(tài)logo,加深品牌印記  


2022年,在線品牌面臨著新的挑戰(zhàn),需尋求新的解決方案,其中之一就是動(dòng)畫logo設(shè)計(jì)。 

undefined

圖片來源Toridori


動(dòng)畫logo主要有以下幾點(diǎn)營銷優(yōu)勢:

1)吸引注意力。這意味著它們有助于提高品牌知名度。

2)有助于提高SEO。谷歌更傾向于動(dòng)態(tài)內(nèi)容,帶有動(dòng)態(tài)圖形的頁面更容易吸引用戶。

3)在移動(dòng)端看起來更好。絲滑的動(dòng)畫看起來比靜態(tài)的logo更有趣。

4)最重要的是展示了歷史。靜態(tài)logo背后的想法正在動(dòng)畫中發(fā)展。由于這一點(diǎn),在幾秒鐘內(nèi),你可以展示品牌的使命,甚至它的價(jià)值!


undefined

一家洗衣機(jī)[公司]的標(biāo)志(https://www.schulthess.ch/)

現(xiàn)在有很多設(shè)計(jì)模板,可以很容易地用字體制作一個(gè)動(dòng)畫logo:


undefined



undefined

圖片來源Shabello, Bobby Voeten

作者:彩云Sky         來源:站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。


魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



扁平化設(shè)計(jì)的時(shí)代是否快要接近尾聲了?

純純

Logo 勝過千言萬語。一個(gè)偉大的 Logo 不用一個(gè)字就能講述一個(gè)故事。


最近,許多公司的商標(biāo)都經(jīng)歷了一次轉(zhuǎn)變。從通用汽車(GM)這樣的汽車公司,到漢堡王(Burger King)這樣的餐廳,再到品客(Pringles)這樣的食品公司,很明顯,許多公司都在嘗試重新設(shè)計(jì)商標(biāo)。


然而,在重新設(shè)計(jì)的同時(shí),也有反對聲音。反對改變的聲音是向來常見,然而不喜歡某一個(gè)特定的設(shè)計(jì)語言卻比較鮮見的,那么到底發(fā)生了什么?


Logo 因何改變?

通用汽車(General Motors)改變了自 1964 年以來一直使用的標(biāo)志是廣為周知的,它用以保證電動(dòng)汽車的發(fā)展。Dezeen /通用汽車

 

為什么要修復(fù)一些沒有損壞的東西,為什么要改變一個(gè)已經(jīng)受到喜愛的標(biāo)志?這是每個(gè)人都會問的問題,每當(dāng)一個(gè)新的標(biāo)志出現(xiàn),我們就必須考慮到一個(gè)標(biāo)志的重新設(shè)計(jì)是不便宜的,往往會花費(fèi)數(shù)百萬美元和多年的研究。乍一看,一家公司這么做毫無意義,然而每隔幾年就會有很多公司這么做。


雖然我不是平面設(shè)計(jì)師,但我個(gè)人認(rèn)為 Logo 和品牌的重新設(shè)計(jì)有兩個(gè)主要驅(qū)動(dòng)因素:技術(shù)和市場


技術(shù)對設(shè)計(jì)影響很大,它既支持又限制了它。計(jì)算機(jī)硬件和軟件的采用和改進(jìn)等技術(shù)進(jìn)步為設(shè)計(jì)師們提供了嘗試新事物的機(jī)會。技術(shù)對設(shè)計(jì)也會有限制,比如有限的屏幕尺寸或能量消耗,但同時(shí)也會驅(qū)使設(shè)計(jì)師發(fā)揮創(chuàng)造性。雖然技術(shù)可以影響設(shè)計(jì)決策,但市場(在某種程度上可以等同于消費(fèi)者)才是主要的決策者。


市場,無論是企業(yè)客戶還是目標(biāo)消費(fèi)者,在設(shè)計(jì)決策方面自然是最高的權(quán)威。如果一個(gè)公司覺得自己不能從中獲益(畢竟 Logo 的設(shè)計(jì)并不便宜),重新設(shè)計(jì) Logo 就很少發(fā)生,即使這可能會引起現(xiàn)有消費(fèi)者的強(qiáng)烈反對和抵制。重新設(shè)計(jì) Logo 可以是一個(gè)新的開始:向消費(fèi)者傳達(dá)他們對未來的期望。


簡約的魅力

動(dòng)物星球的標(biāo)志變化過程,它隨著每一次迭代變得越來越簡單。


所以讓我們來談?wù)勥@個(gè)非常顯而易見,而又容易被忽略的問題。從 iOS 7 到純果樂——極簡、極簡或扁平化的平面設(shè)計(jì)風(fēng)格已經(jīng)興起近十年了。我們已經(jīng)討論了技術(shù)和市場是如何決定趨勢的,但是對于我們今天所面臨的當(dāng)前趨勢:以最小的、扁平的、最簡單的標(biāo)志重新設(shè)計(jì),它又說明了什么呢?


技術(shù)的訴求——對在線展示的日益增長的需求是公司簡化其標(biāo)識的主要原因??焖僭鲩L的移動(dòng)設(shè)備使用率導(dǎo)致高度詳細(xì)、高度程式化的徽標(biāo)設(shè)計(jì)的舊設(shè)計(jì)方案越來越難以實(shí)現(xiàn)。在可伸縮性和文件大小等方面,矢量的圖像變得更加流行,與柵格圖像相比,它們更容易創(chuàng)建、操作和編輯。像 Airbnb、Animal Planet 和谷歌就采用無襯線和塊狀字體的商標(biāo),之所以這樣做,是因?yàn)檫@樣在手機(jī)等設(shè)備上更容易閱讀。


市場需求——企業(yè)和消費(fèi)者似乎都支持(當(dāng)然并不是沒有阻力),應(yīng)該走更簡單的道路。更簡單的平面設(shè)計(jì)意味著它更容易被廣大用戶理解和識別。許多扁平化設(shè)計(jì)的支持者認(rèn)為有效、友好、干凈和中性的特征是扁平化風(fēng)格的優(yōu)點(diǎn)。誰還記得在 2000 年代,Windows Aero 的頂級設(shè)計(jì)是多么的混亂不堪?時(shí)代當(dāng)然變了。


當(dāng)平面設(shè)計(jì)成功時(shí),就可以創(chuàng)造出華麗而有意義的標(biāo)志,它們經(jīng)得起時(shí)間的考驗(yàn);IBM 和 Shell 的標(biāo)志就是我最喜歡的幾個(gè)。但是,盡量簡單更容易創(chuàng)造出一些最好的標(biāo)志一樣,也很容易失去目標(biāo)。


是不是過于簡單了?

最近十年間,平面和極簡主義設(shè)計(jì)的標(biāo)志重新設(shè)計(jì)正在興起。


在最近的十年里,很多公司一直在用扁平化風(fēng)格來重新設(shè)計(jì) Logo,Logo 隨著時(shí)間的推移變得越來越簡單,盡管在線社區(qū)的用戶們的感受各不相同。


任何重新設(shè)計(jì)都會遇到各種各樣的反對。沃爾什(Walsh)、凱倫?溫特奇(Karen Winterich)和維卡斯?米塔爾(Vikas Mittal)的一項(xiàng)研究顯示,消費(fèi)者對品牌(品牌態(tài)度)的認(rèn)知,在消費(fèi)者對重新設(shè)計(jì)的看法中扮演著重要角色。


2003年,像蘋果這樣擁有高品牌忠誠度的公司決定更換 Logo,在宣布后數(shù)小時(shí)內(nèi)就收到了網(wǎng)上請?jiān)笗?,這一點(diǎn)就很明顯。沃爾什、溫特奇和米塔爾認(rèn)為,商標(biāo)的重新設(shè)計(jì)擾亂了已經(jīng)形成的相對穩(wěn)定的關(guān)系,消費(fèi)者顯然對此感到不安。


一位推特用戶對 firefox 徽標(biāo)的改變非常憤怒,盡管它并沒有被實(shí)現(xiàn)?!猆nfunnyLuigi


有一些被重新設(shè)計(jì)的 Logo,比如漢堡王卻受到了熱烈歡迎,而其他的,例如火狐和動(dòng)物星球則受到了嚴(yán)厲的批評。漢堡王不僅采用了更簡單的設(shè)計(jì),還抓住了人們的懷舊情緒,因此比動(dòng)物星球(Animal Planet)這樣的 Logo 更容易被接受。


需要指出的是,扁平化的 Logo 設(shè)計(jì)本身并沒有什么錯(cuò),許多 Logo,如可口可樂、IBM 和殼牌,都由于其簡單易記的特性成為永恒的杰作。導(dǎo)致人們強(qiáng)烈反對扁平化 Logo 設(shè)計(jì)的原因可能是人們對企業(yè)和企業(yè)文化越來越反感和憤世嫉俗。像企業(yè)藝術(shù)風(fēng)格、企業(yè)孟菲斯和全球同質(zhì)化等概念通常會被指責(zé)為“過度簡化”標(biāo)識設(shè)計(jì)浪潮的罪魁禍?zhǔn)?,因?yàn)楹芏嘣O(shè)計(jì)決策都是冷血的,缺乏人文特征的,讓人感覺不自然或虛假。


不喜歡過于簡化的商標(biāo)已經(jīng)成為網(wǎng)絡(luò)熱點(diǎn),尤其是在YouTube上?!猂evified


由于許多內(nèi)容創(chuàng)造者和互聯(lián)網(wǎng)熱點(diǎn)已經(jīng)導(dǎo)致了文化抵制現(xiàn)象出現(xiàn),人們不再只是隨意在社交媒體上發(fā)泄不滿;人們把這些過度簡化的商標(biāo)描繪成冷酷無情的科學(xué)實(shí)驗(yàn)的結(jié)果,有些人甚至證明了如果這種趨勢繼續(xù)下去,過度簡化的商標(biāo)會導(dǎo)致什么,它們會創(chuàng)造出一個(gè)乏味的世界,每個(gè)商標(biāo)都是一樣的,沒有個(gè)性。


Youtube 用戶 Solar Sands 在他的視頻文章《為什么企業(yè)的藝術(shù)風(fēng)格讓人覺得非常虛假》( Why do corporate art styles feel fake )中指出,許多公司,尤其是大型科技公司,這些公司曾經(jīng)多次產(chǎn)生消費(fèi)者的信任問題,而它們恰好使用了許多扁平化設(shè)計(jì)風(fēng)格。我們就把負(fù)面問題與這種設(shè)計(jì)風(fēng)格的聯(lián)系了起來,對這種風(fēng)格留下了糟糕的印象,因此我們憎恨它;我們覺得這些冷血的公司正在奪走我們所愛的東西。在這波憤世嫉俗的浪潮之后,Solar Sands 以一段出人意料的評論結(jié)束了他的視頻:任何潮流都有保質(zhì)期


接下來將是什么?

百事可樂不斷演變的標(biāo)志讓我們很好地洞察了各自時(shí)代的設(shè)計(jì)趨勢?!狶ogaster


設(shè)計(jì)趨勢總是周期性的,每個(gè)趨勢都有保質(zhì)期。百事可樂的商標(biāo)就是一個(gè)很好的例子,它說明了設(shè)計(jì)世界是多么地充滿活力:從簡單的設(shè)計(jì)到復(fù)雜的設(shè)計(jì),再到簡單的設(shè)計(jì)。沒有一種設(shè)計(jì)風(fēng)格是絕對好的,但它必須與時(shí)代相適應(yīng)。


微軟的 Fluent Design 吸收了一個(gè)新的風(fēng)格,強(qiáng)調(diào)光,深度、材料和尺度?!④?


隨著大眾對當(dāng)前設(shè)計(jì)趨勢的不滿不斷發(fā)酵,扁平化設(shè)計(jì)風(fēng)格可能要終結(jié),但人們永遠(yuǎn)不知道什么時(shí)候或者什么會取代這個(gè)簡約至上的時(shí)代。許多蘋果和微軟等公司都將新擬物風(fēng)格和玻璃擬態(tài)的元素融入自己的設(shè)計(jì)語言,試圖為其添加性格和細(xì)節(jié)。雖然我們肯定不會在一夜之間回到過去那些充滿華麗而又過分精細(xì)的 Logo 的日子,但扁平化設(shè)計(jì)的流行趨勢可能會開始消退。

作者:知群

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



國外專業(yè)機(jī)構(gòu)發(fā)布,2022年你最需要抓住的UI/UX設(shè)計(jì)趨勢

ui設(shè)計(jì)分享達(dá)人

當(dāng)設(shè)計(jì)師被迫待在家里時(shí),終于能有時(shí)間去反思現(xiàn)有的設(shè)計(jì)并重新創(chuàng)造。無聊是藝術(shù)家最大的敵人,他們會盡可能地打破困局。


對我們來說,2021年相當(dāng)困難。世界上最長壽的貓慶祝了它的34歲生日,這可能是發(fā)生的唯一一件好事,順便說一下,你會在文末看到這只可愛的小貓照片。


那么,2022年的UI/UX設(shè)計(jì)趨勢是什么呢?看看現(xiàn)在的情況,我們已經(jīng)可以預(yù)測未來的設(shè)計(jì)趨勢,就像我們對2021年所做的預(yù)測一樣(回頭看非常準(zhǔn)確)。


在本文中,我們將發(fā)現(xiàn):

  • 3D視覺設(shè)計(jì)師的內(nèi)卷將會越來越嚴(yán)重

  • 數(shù)據(jù)可視化的工作將變得越來越重要

  • 服務(wù)的移動(dòng)化還需要做出更多努力

  • scrollytelling 技術(shù)會越來越流行



1、滾動(dòng)已死,滾動(dòng)敘事興起 


舊的滾動(dòng)是無聊的。如果你想吸引注意力,你就需要實(shí)現(xiàn)滾動(dòng)敘事(scrollytelling)。(彩云注:這個(gè)技術(shù)的核心在于邊滾動(dòng)頁面邊講故事) 

undefined

《紐約時(shí)報(bào)》是第一批在他們的文章《雪花飄落》中使用滾動(dòng)敘事手法的機(jī)構(gòu)之一。


它是一種敘事形式,可以在網(wǎng)頁和APP上呈現(xiàn)。想象一下,在一個(gè)網(wǎng)站中每個(gè)插圖、文本和其他元素都開始變得生動(dòng)起來。自然地,你會想看到這個(gè)故事的結(jié)局。它就像一個(gè)游戲,帶你穿越迷宮。雖然你不能影響它的進(jìn)程,但卻讓你感覺自己能參與其中。


2022年,Scrollytelling將會出現(xiàn)在你看到的每一個(gè)流行網(wǎng)站上。


另一方面,scrolllytelling讓用戶真正去閱讀內(nèi)容。你可以用動(dòng)態(tài)文本讓他們產(chǎn)生興趣,比如谷歌的網(wǎng)站 (https://www.google.com/search/howsearchworks/)。他們的團(tuán)隊(duì)知道如何讓信息看起來更好:

undefined

Scrollytelling在用戶向下滾動(dòng)時(shí)被激活,因此得名。沒有點(diǎn)擊,沒有選擇的麻煩,沒有彈出窗口。你似乎停留在一個(gè)地方,但通過滾動(dòng),把屏幕上的故事慢慢展開。這不僅要求設(shè)計(jì)師創(chuàng)造出酷炫的視覺效果,還需要認(rèn)真思考一個(gè)你想要講述的故事情節(jié)。


所以,最好的網(wǎng)站不可能在2天內(nèi)建成,需要更多的時(shí)間去打磨。

undefined

IAmBinadam令人驚艷的敘述設(shè)計(jì)


滾動(dòng)敘事的項(xiàng)目通常需要大量的時(shí)間和精力。不過,這樣做的結(jié)果是值得的。頁面變成“活的”,每一秒都有新的事情發(fā)生,所以在閱讀時(shí)很難感到無聊。


那么移動(dòng)端APP呢? Pure是一款約會應(yīng)用(彩云注,這個(gè)應(yīng)用在app store可以搜到,推薦大家安裝一個(gè)體驗(yàn)一下,非廣告),它創(chuàng)造了一種我稱之為“tappytelling”的故事(當(dāng)你第一次點(diǎn)擊并打開應(yīng)用時(shí),它就會被激活):


undefined


Scrollytelling是為用戶而創(chuàng)建的,用戶很喜歡它,不需要到其他頁面去閱讀整個(gè)故事。相反,網(wǎng)頁設(shè)計(jì)的整個(gè)故事都是事先考慮好的,并盡可能以最有趣的方式設(shè)計(jì)出來。 


2、用戶喜歡看數(shù)據(jù),數(shù)據(jù)可視化越來越被重視 


如何在2022年做出一個(gè)還不錯(cuò)的企業(yè)網(wǎng)站?你不會想告訴用戶你是“XX領(lǐng)域公認(rèn)的領(lǐng)導(dǎo)者,該領(lǐng)域最好的之一”。這種標(biāo)準(zhǔn)的廣告表達(dá)并不傳達(dá)任何有價(jià)值的信息。


最好不要用形容詞,而是用事實(shí)來說明:你有多少分支機(jī)構(gòu),在哪些城市,誰是你的客戶,以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數(shù)據(jù),你需要讓它不僅簡單,而且有趣。 

undefined

數(shù)據(jù)可視化有助于以一種吸引人的方式傳達(dá)正確的信息。它也可以與滾動(dòng)敘事(Scrollytelling)緊密結(jié)合。以下是IAmBinadam展示數(shù)據(jù)的方式:


undefined

 通過去除數(shù)據(jù)集的復(fù)雜性,使信息更容易讓讀者感知。

undefined

不同級別的數(shù)據(jù)具有不同的大小,這樣用戶知道應(yīng)該先從哪里查看


讀者可以很快注意到作者試圖通過圖片引出的結(jié)論??紤]到如今人們消費(fèi)的數(shù)據(jù)量巨大,那些干凈整潔的數(shù)字帶來的正面影響更大。 


undefined

有些圖表乍一看甚至不像圖表,這使得它們更加能被注意到


還有一種現(xiàn)象叫做“新冠后遺癥”。這是Covid對公司及其員工的長期影響。根據(jù)英國國家統(tǒng)計(jì)局的數(shù)據(jù),2018年,壓力和焦慮的平均得分約為2.7/10。自新冠疫情發(fā)生以來,得分已升至4.0/10,很少低于這一水平。同樣因?yàn)榇罅餍校谶^去兩年里工作量增加了4個(gè)小時(shí)。


人們壓力太大,卷的太辛苦,以至于不愿去看復(fù)雜的數(shù)據(jù)。


設(shè)計(jì)師做好數(shù)據(jù)可視化,以保持人們的注意力。記住,復(fù)雜的信息通常被忽略,因?yàn)樽x者試圖節(jié)省他們的時(shí)間,更有可能使用滾動(dòng)按鈕。
undefined

Illustration by Mona Chalabi


以下是我們推薦的一些表示數(shù)據(jù)的方式

  • 1)圖表和曲線圖

  • 2)插圖

  • 3)靜態(tài)信息圖

  • 4)互動(dòng)信息圖


undefined

Illustration by Ink Factory


如何讓信息圖表看起來更好?

一個(gè)好的圖表,或者任何其他形式的數(shù)據(jù)可視化,都應(yīng)該具有在Edward Tufte的“定量信息的可視化顯示”中描述的特征。在他的書中,Tufte通過圖表解釋了好圖表的3個(gè)原則:


1)展示數(shù)據(jù)的圖形元素與數(shù)值總數(shù)的比值應(yīng)趨向于1。簡單地說,應(yīng)該刪除一切不必要的元素,保持整潔。 


undefined


2)充分利用好畫面空間。也就是說,需要將數(shù)據(jù)編排的更緊密


undefined

Graph by Hootsuite


3)客觀地描述數(shù)據(jù)。不要使用夸張的圖表,可視化數(shù)據(jù)可以看起來很酷,但真實(shí)永遠(yuǎn)是更重要的。


3、2022年還有必要做APP嗎?


根據(jù)We Are Social的數(shù)據(jù),2021年有52.2億人使用手機(jī),約占世界人口的66%。自2020年1月以來,手機(jī)用戶數(shù)量增長了1.8%(9300萬),而手機(jī)聯(lián)網(wǎng)總數(shù)量增長了7200萬(0.9%),到2021年初達(dá)到80.2億。


過去一年,社交媒體用戶的數(shù)量增長了13%以上。到2021年初,社交網(wǎng)絡(luò)上已有近5億新用戶注冊。根據(jù)App Annie的數(shù)據(jù),Android用戶每天花在手機(jī)上的時(shí)間超過4小時(shí)。2020年,安卓用戶上網(wǎng)時(shí)長超過3.5萬億小時(shí)。


令人印象深刻的數(shù)字,是嗎?似乎到2022年,為產(chǎn)品做一個(gè)APP將成為必須擁有的東西。如何知道你的公司是否真的需要一款應(yīng)用?有以下幾點(diǎn)可供評估:

 

1)用戶主要通過移動(dòng)設(shè)備訪問你的網(wǎng)站這是你應(yīng)該了解的重要數(shù)據(jù)。

客戶和你在一起的時(shí)間越長,你就有越多的機(jī)會去吸引他們,了解他們的習(xí)慣,并給他們想要的東西。(彩云注:這就是為什么各大廠之間都在拼命搶占用戶的在線時(shí)長。)

2)幫助內(nèi)部業(yè)務(wù)流程更加有效。

如果你想要提高員工的工作效率、改進(jìn)工作流程或增加利潤,那么就制作一個(gè)可以幫助管理業(yè)務(wù)流程的移動(dòng)應(yīng)用。

如今,像這樣的手機(jī)應(yīng)用使企業(yè)能夠執(zhí)行越來越復(fù)雜和多樣化的任務(wù),加快日常重復(fù)操作和文檔管理。


3)實(shí)現(xiàn)一些網(wǎng)站上沒有的新功能。

如果你認(rèn)為APP能為用戶打開新的觸點(diǎn),并讓用戶體驗(yàn)更加友好,那么它就值得考慮開發(fā)。問問自己的APP能提供什么新的商業(yè)機(jī)會?例如,隨著疫情的蔓延,許多人開始用上健身APP在家里鍛煉。


4)競爭對手做的情況。

要了解競爭對手在做什么,他們是否有APP,能做什么,以及他們是否真的對用戶有用。


查看App Store和谷歌Play的統(tǒng)計(jì)數(shù)據(jù)。下載和評論的數(shù)量可以告訴你用戶是如何使用競爭對手的應(yīng)用的。如果他們的服務(wù)真的很方便而且很有必要,那么你就容易被甩在后面。


5)復(fù)購率。

一個(gè)應(yīng)用可以幫助你留住那些習(xí)慣從你那里購買的人。如果想為老客戶開展促銷活動(dòng)了,給他們發(fā)送一個(gè)通知就能完成,成本更低。


在正確的時(shí)間提供的報(bào)價(jià)越有吸引力,人們購買的可能性就越大。

undefined

6)促銷工具。


有了應(yīng)用,你就不需要花錢設(shè)計(jì)和制作實(shí)體卡,客戶也不需要隨身帶卡。將促銷計(jì)劃整合到APP,并分享有用的促銷信息。


做原生APP還是移動(dòng)端網(wǎng)站?

開發(fā)手機(jī)網(wǎng)站比開發(fā)手機(jī)應(yīng)用需要更少的工作量,這反過來可以降低整體推廣成本。


這部分是由于響應(yīng)式設(shè)計(jì)的出現(xiàn),它允許你根據(jù)打開網(wǎng)站的設(shè)備屏幕來調(diào)整網(wǎng)站。至于APP,它們必須為許多移動(dòng)平臺單獨(dú)編寫:Android、IOS、Windows等。


一些設(shè)計(jì)師認(rèn)為“前端驅(qū)動(dòng)的網(wǎng)絡(luò)體驗(yàn)”會是2022年的一個(gè)好機(jī)會,我非常同意!(彩云注:在國內(nèi),現(xiàn)在開發(fā)小程序的肯定越來越多了。) 


4、3D設(shè)計(jì)具備更強(qiáng)競爭力 


我們一開始并沒有將其放在首位,因?yàn)檫@并不是一個(gè)新的趨勢,在很久以前設(shè)計(jì)師們就已經(jīng)設(shè)計(jì)了很多3D圖像和動(dòng)畫了。 

undefined

Cardi B rhymes with 3D

3D技術(shù)已經(jīng)在過去流行了很多年,但它不會很快消失。此外,我們預(yù)測3D圖形將變得更加多樣化和包容。


在過去的幾年里,3D藝術(shù)和動(dòng)畫已經(jīng)出現(xiàn)在各種UI設(shè)計(jì)趨勢評論中。這意味著越來越多的設(shè)計(jì)師將它們整合到頁面中。


3D當(dāng)然應(yīng)該成為2022年最熱門的趨勢和預(yù)測之一,因?yàn)榕c經(jīng)典動(dòng)畫相比,逼真的3D形狀結(jié)合動(dòng)畫總是引人注目的。


undefined


從技術(shù)上講,通過3D更容易傳達(dá)更多內(nèi)容,因?yàn)樗绕矫鎴D片更接近我們的感知。3D插圖更有深度,信息量更大,也更具互動(dòng)性。"


許多設(shè)計(jì)師將3D對象無縫地“安置”在2D空間中。它允許創(chuàng)建更有趣的組合,也作為一個(gè)優(yōu)秀的工作方法蘊(yùn)藏著巨大的潛力。


undefined

烏克蘭政府網(wǎng)站用3D手模擬了黑客帝國


注意一點(diǎn):在整合3D圖形等重量級內(nèi)容之前,確保你的應(yīng)用性能是OK的,能夠快速加載所有元素。 


5、元宇宙風(fēng)潮  


Meta的logo既不是2D也不是3D?;蛘邇烧呒娑兄?這就是即將到來的2022年的莫比烏斯帶和薛定諤的貓。 

 undefined

undefined

Meta logo的變化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)


(彩云注:這個(gè)概念在去年簡直不要太火,未來幾年肯定還會是一個(gè)大的趨勢,設(shè)計(jì)師也需要保持關(guān)注。跟著趨勢走,易于放大自身價(jià)值。)


6、混合動(dòng)畫  


越來越多的公司在網(wǎng)站和移動(dòng)應(yīng)用中使用動(dòng)畫,以提高用戶的沉浸感和體驗(yàn),使內(nèi)容更有趣。 

undefined


動(dòng)畫是2022年重要的網(wǎng)頁設(shè)計(jì)趨勢。2022年,如果沒有它,你的產(chǎn)品很可能會看起來就像個(gè)半成品?;旌巷L(fēng)格的動(dòng)畫越來越受歡迎:定格動(dòng)畫和3D動(dòng)畫的結(jié)合,2D動(dòng)畫和3D動(dòng)畫的結(jié)合。設(shè)計(jì)師這樣做是為了獲得不同尋常的風(fēng)格解決方案,以及提高最終產(chǎn)品的質(zhì)量。


2022年,動(dòng)畫設(shè)計(jì)將是品牌市場定位的重要組成部分,想想一個(gè)公司新的視覺形象——?jiǎng)赢嬓蜗?。隨著這個(gè)領(lǐng)域的專業(yè)設(shè)計(jì)師數(shù)量的增長,實(shí)現(xiàn)新想法的機(jī)會也在增加。


2022年如何使用網(wǎng)頁動(dòng)畫?

1)講故事動(dòng)畫。

可以通過在界面和用戶之間建立情感聯(lián)系來傳達(dá)信息。 

undefined

加載動(dòng)畫Yoichi Kobayashi


2)更有趣的加載。


用戶不愿意等待,除非載入畫面很有趣。帶有百分比的動(dòng)畫不僅可以分散用戶的注意力,還可以告知他們加載頁面需要多少時(shí)間。使用進(jìn)度條或者任何你能想到的可以顯示時(shí)間流逝的東西。

undefined


3)光標(biāo)效果。

用戶可以精確地觀察光標(biāo)所在的位置。通過添加智能互動(dòng)動(dòng)畫,對這個(gè)光標(biāo)作出反應(yīng)來探索網(wǎng)站。這種效果在21世紀(jì)初非常流行。如你所知,流行趨勢往往每20年就會重演一次


undefined 


4)動(dòng)態(tài)排版

你有沒有想過讓字母跳舞? 

undefined



添加角色的動(dòng)畫插圖

據(jù)Statista統(tǒng)計(jì),2020年全球動(dòng)畫市場達(dá)到了2700億美元。趨勢是視頻,而不是靜態(tài)信息。全球品牌在社交網(wǎng)絡(luò)上使用動(dòng)畫制作廣告。毫無疑問,動(dòng)畫插圖的優(yōu)勢是它們非常靈活和多樣化。 

undefined

寶馬歷史動(dòng)畫


這樣的作品通常用于兩種情況:

1)用于解釋視頻

2)電商廣告

undefined

動(dòng)畫解說的趨勢出現(xiàn)在幾年前,解說視頻清楚地顯示點(diǎn)擊的位置或公司的項(xiàng)目是關(guān)于什么的。


在招聘或商業(yè)視頻中,用戶更喜歡看畫出來的人物,而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴,就像活著的人一樣。


7、微交互,大影響  


微交互是幫助用戶瀏覽網(wǎng)站或應(yīng)用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果:它們顯示發(fā)生了什么,將導(dǎo)致什么操作,下一步需要做什么。 

undefined

圖片來源awwards


動(dòng)畫交互將為你的設(shè)計(jì)注入活力,并有助于保持用戶粘性。關(guān)注每一個(gè)細(xì)節(jié)是設(shè)計(jì)師工作的關(guān)鍵,因?yàn)樵O(shè)計(jì)中的所有元素都可以帶來積極的用戶體驗(yàn)。


重要的是要達(dá)到元素的和諧,而不是把注意力分散到界面的各個(gè)方面。微交互作用的一個(gè)重要部分是顏色,它們?yōu)榻缑嬖卦鰪?qiáng)價(jià)值。


undefined


微交互有助于頁面導(dǎo)航,解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能,以實(shí)現(xiàn)特定的行為。 


8、動(dòng)態(tài)logo,加深品牌印記  


2022年,在線品牌面臨著新的挑戰(zhàn),需尋求新的解決方案,其中之一就是動(dòng)畫logo設(shè)計(jì)。 

undefined

圖片來源Toridori


動(dòng)畫logo主要有以下幾點(diǎn)營銷優(yōu)勢:

1)吸引注意力。這意味著它們有助于提高品牌知名度。

2)有助于提高SEO。谷歌更傾向于動(dòng)態(tài)內(nèi)容,帶有動(dòng)態(tài)圖形的頁面更容易吸引用戶。

3)在移動(dòng)端看起來更好。絲滑的動(dòng)畫看起來比靜態(tài)的logo更有趣。

4)最重要的是展示了歷史。靜態(tài)logo背后的想法正在動(dòng)畫中發(fā)展。由于這一點(diǎn),在幾秒鐘內(nèi),你可以展示品牌的使命,甚至它的價(jià)值!


undefined

一家洗衣機(jī)[公司]的標(biāo)志(https://www.schulthess.ch/)

現(xiàn)在有很多設(shè)計(jì)模板,可以很容易地用字體制作一個(gè)動(dòng)畫logo:


undefined



undefined

圖片來源Shabello, Bobby Voeten


最后的話  


記住,設(shè)計(jì)趨勢總是在變化的,但是設(shè)計(jì)的意義不會變。如果你不能深刻理解這一點(diǎn),那么任何設(shè)計(jì)趨勢的文章不能幫你做好設(shè)計(jì)。


這是前面提到過的世界上最老的貓。她今年34歲(相當(dāng)于人的160歲) 

undefined


原文地址:站酷
作者:彩云Sky

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


解析新擬態(tài)風(fēng)格最全指南

純純

一、什么是新擬態(tài)

簡單講,新擬態(tài)是一種圖形樣式,其原理是為界面的UI元素賦予真實(shí)感。

其實(shí)他也是算擬物風(fēng)格的一種,只不過表現(xiàn)形式不一樣,最早出現(xiàn)在追波上,從2020年慢慢被大家熟知,討論,重視起來。暫且不論是不是未來的必然趨勢之一,一個(gè)事物的興起多少是有些道理,我們持辯證的眼光去看到,去學(xué)習(xí)、去了解便好。

名稱由來

原生名詞有幾個(gè)叫法,Neumorphism / soft ui,翻譯過來叫新擬態(tài)或者是軟ui。其實(shí)按照我們國內(nèi)的翻譯應(yīng)該叫,新擬物風(fēng)格。Neumorphism,是New +Skeuomorphism的組合詞。

    0115fc5e44eb99a80120a895d86a16.png


二、設(shè)計(jì)風(fēng)格的發(fā)展歷程

地球是圓的,很多事情總是輪回的,原理是不變的,只不過是換了一種表達(dá)方式出現(xiàn)在我們的面前,在了解新擬物之前,先簡單說下UI整個(gè)風(fēng)格的發(fā)展歷史,



01.擬物風(fēng)

說起ui設(shè)計(jì)風(fēng)格不得不說起我們喬老爺子了,在2007時(shí)候年最早的iphone手機(jī)的手機(jī)界面就是擬物風(fēng)格的,那時(shí)候覺得怎么會有那么好看的界面,設(shè)置圖標(biāo)的齒輪,閱讀器的書架,以前的youtube圖標(biāo)還是一個(gè)小小的電視,從而掀起一波擬物圖標(biāo)風(fēng)格流行趨勢。

                

說起擬物風(fēng)格,不得不提一下當(dāng)年的擬物大神——MIke,當(dāng)時(shí)在追波掀起一波轟動(dòng),在國內(nèi)也迎來一陣臨摹潮,我還記得那時(shí)候我還臨摹過下面那只鋼筆,還有那個(gè)馬卡龍蛋糕,都是滿滿的回憶。對于當(dāng)時(shí)MIke大神作品,用現(xiàn)在話說,奈何沒文化,一句臥槽走天下... ...

02.扁平風(fēng)格

到了2014年,蘋果對界面進(jìn)行了“扁平化”處理,以使外觀更簡單,同時(shí)又使其用戶易于理解。一直到今天扁平化設(shè)計(jì)風(fēng)格仍然是UI設(shè)計(jì)的標(biāo)準(zhǔn)。

     0164425e44ef76a80120a895f174f6.png            



其實(shí)最早最早將扁平化風(fēng)格設(shè)計(jì)運(yùn)用在產(chǎn)品中的公司是微軟。他在Windows 8系統(tǒng)使用扁平化設(shè)計(jì)語言,但是Windows 8一直飽受爭議,但是反響并沒有很好。

           01170c5e44ef8ca80120a89519ff59.png             Window 8平面設(shè)計(jì)示例



三、那么新擬態(tài)這種風(fēng)格是怎么流行起來的呢?

還是從追波說起,這一切的開始是源于在2019年11月05日的在Dribbble-Alexander Plyuto發(fā)布的作品,獲得了26W+的瀏覽,4400個(gè)贊,以及1800個(gè)收藏。以后在Dribbble上便成為流行,在探索更多的可能性。

           01dcdf5e44f151a8012165185c99da.png            


     


四、新擬態(tài)它有什么特點(diǎn)

再說新擬態(tài)有什么特點(diǎn)之前,我們先看幾個(gè)比較典型代表的視覺作品,以便于更好的了解這一風(fēng)格

           01d50d5e44eff2a80120a895ed11cc.png           


我們看下上面的一些視覺作品,第一眼看到比較明顯的是,在一些可點(diǎn)擊區(qū)域做了一些“浮雕”效果,點(diǎn)擊狀態(tài)和非點(diǎn)擊狀態(tài),在視覺處理上是未選中狀態(tài)是凸出來的,已經(jīng)選中狀態(tài)是凹進(jìn)去的,但顯然凹凸之間是有很多質(zhì)感細(xì)節(jié)處理的,等下再實(shí)操組件部分會講解到。



1.通過觀察,總結(jié)新擬態(tài)設(shè)計(jì)風(fēng)格的處理方式大概有一下幾點(diǎn)


  1. 左上角亮色投影,右下角深色投影(有且只有一個(gè)光源照射)

  2. 元素與背景對比度比較弱

  3. 常常用于按鈕組件和卡片

  4. 按鈕狀態(tài),視覺上凸出代表未選中,凹進(jìn)去表示已選中狀態(tài)



2.特點(diǎn)詳解

1.有且只有一個(gè)光源照射

           010f035e44f13da80120a895db440e.png            

那作者在追波上按鈕也好還是卡片處理也好,仔細(xì)觀察不難發(fā)現(xiàn),它定了一個(gè)光源,是從左上向右下照射的,所以,越靠近光源的部分,越亮,遠(yuǎn)離光源的越暗(素描的繪畫時(shí)常常用到)。因?yàn)樾聰M態(tài)的光源是唯一的,是從左上角照射的,所以就不難解釋,或者分析得到,左上角亮色投影,右下角深色投影。這一基礎(chǔ)規(guī)律,不單單適用于新擬態(tài)風(fēng)格的按鈕,它還適用于所有新擬態(tài)風(fēng)格表現(xiàn)手法的視覺組件。


可以看到下圖,卡片、轉(zhuǎn)盤、按鈕,他們的受光面都是在左上角。

           01d50d5e44eff2a80120a895ed11cc.png            



2.組件與背景對比度比較弱

這里就要講一下,另一個(gè)叫法了soft ui,即軟ui。軟,有柔和的意思。為什么這么命名呢?其實(shí)就是由于新擬態(tài)的組件與背景的對比度很弱,我把收集到的幾千張素材中,挑選一部分進(jìn)行進(jìn)行色值對比,可以發(fā)現(xiàn)無論是亮色模式下和暗色模式下對比度都是很低的。

按鈕、投影、背景之間的關(guān)系都處理的非常柔和,這是新擬態(tài)的特征之一

           01b2725e44f1fba80120a8950ddfcc.png        01558e5e44f220a801216518bb6709.png    素材庫


3.常常用于卡片和按鈕

基于這一點(diǎn),其實(shí)我們只要建立好卡片的和按鈕的樣式組件,新擬態(tài)在設(shè)計(jì)層的表現(xiàn)就可以高效率的實(shí)現(xiàn),可能稍微麻煩的就是,在一些質(zhì)感細(xì)節(jié)上做一些優(yōu)化,前面也說到,新擬態(tài)是一種無紋理的擬物風(fēng)。所以想要表現(xiàn)卡片/按鈕的質(zhì)感,在光影、厚度細(xì)節(jié)上,需要做更多的細(xì)節(jié)處理。


比如卡片的厚度感細(xì)節(jié)的處理,為了體現(xiàn)銀行卡的厚度感,在卡片增加了一個(gè)對角漸變描邊,從漸變色塊可以看到,漸變的規(guī)律,也是遵循“有且有個(gè)光源”定義的,靠近光源的是純白,近暗色投影端是比投影更重的一點(diǎn)的描邊色。

這樣做的好處不單單是為了體現(xiàn)卡片的厚度,因?yàn)槲覀兦懊嬷v到,新擬態(tài)是軟ui,是對比很弱的。風(fēng)格柔和帶來的另個(gè)一個(gè)不太好的就是,界面清晰度不夠,很容易把視覺處理“糊掉”。所以,增加對角漸變描邊在一定程度上也起到了,讓界面的視覺層級更加清新的作用。在實(shí)操部分,將會一一拆解各種情況的一些處理方式。

  


4.按鈕狀態(tài),視覺上凸出代表未選中,凹進(jìn)去表示已選中狀態(tài)

在新擬態(tài)中,視覺上凸出代表未選中,凹進(jìn)去表示已選中狀態(tài)。是大部分人的處理方式,在這一小節(jié)里,先討論大部分的,在實(shí)操部分在列舉其他的處理手法。


這里可以明顯感受到,按鈕狀態(tài)的區(qū)別,凸出/懸浮的是沒有選中狀態(tài),凹陷下去的是選中狀態(tài)。

細(xì)節(jié)觀察,新擬態(tài)風(fēng)格,在按鈕上面的元素是做了內(nèi)陰影處理的,看起來有一點(diǎn)點(diǎn)雕刻的感覺,

在選中狀態(tài)按鈕的處理,首先是在光源的處理上是統(tǒng)一的,加上光影的處理,就很容易做出來凹進(jìn)去的感覺,想要是凹槽的厚度感、質(zhì)感看起來更加舒服,這里的處理方式和卡片的處理方式原理一樣,添加漸變描邊就可以解決。



五、新擬態(tài)存在的局限


1.可見性

這里影響新擬態(tài)界面的可見性,主要有兩個(gè)因素,一個(gè)是可見性,另一個(gè)就是視覺層級關(guān)系。


識別度

前面我們說到,新擬態(tài)的的一個(gè)設(shè)計(jì)風(fēng)格特點(diǎn),就是低對比,弱對比。帶來界面柔和一面的同時(shí),在視覺層上,也會很容易出現(xiàn)界面”糊掉“的一些情況,這樣就非常不利于信息的傳遞。試想,一個(gè)頁面從色調(diào)、按鈕、布局、交互上都很好,但是,就是看不清哪跟哪兒(識別度),那設(shè)計(jì)出來的東西是沒辦法落地的,頂多是個(gè)好看的花瓶。


所以,在設(shè)計(jì)新擬態(tài)風(fēng)格的時(shí)候,需要格外的注意界面的識別度。但同時(shí)也要注意,界面的投影不能太重,如果太重,界面就很容易顯得“臟”。

那么,前面講到的,卡片厚度的塑造方法(增加漸變外描邊)可以在一定程度上提高界面的識別度,提高信息的傳遞。


02.視覺層級關(guān)系

因?yàn)樾聰M態(tài)風(fēng)格的基礎(chǔ)原理是依托光影關(guān)系來塑造的,那在很多樣式組件界面中,就會產(chǎn)生很多懸浮或者下凹的投影,那么在很多時(shí)候是很難區(qū)分視覺層級關(guān)系的,用戶在看到這樣的界面的時(shí)候,第一時(shí)間會覺得頁面很“滿”,用戶就無從下手。

所以在做新擬態(tài)設(shè)計(jì)風(fēng)格時(shí)候,一定要學(xué)會“視覺降噪”,需要避免整個(gè)頁面都很滿,最重要的是克制。



02 易用性

那前面說到可見性和視覺層級,這兩點(diǎn)是易用性原則里面的基礎(chǔ)組成部分,如果基礎(chǔ)組成部分都沒有得到很好的解決的話,那產(chǎn)品的易用性就無從談起。能用、好用的產(chǎn)品是前提,美感是對產(chǎn)品易用性的補(bǔ)充,能用、好用才是核心。

所以在設(shè)計(jì)新擬態(tài)風(fēng)格的時(shí)候,對頁面的信息層級細(xì)分要求更高,對這個(gè)頁面的節(jié)奏處理需要更細(xì)膩,對用戶體驗(yàn)的理解需要更加徹底,在商業(yè)與交互層面的持衡中,需要考慮的層面有多一個(gè)比較關(guān)鍵維度的考量——可見性

那么當(dāng)我們可以處理好頁面元素之間的關(guān)系,也滿足易用性基本原則的時(shí)候,新擬態(tài)帶來的局限性將會變得不那么重要。



六、目前適用的一些產(chǎn)品

針對前面我們說到新擬態(tài)的一些特點(diǎn),一些局限,目前比較適合以下兩個(gè)大類產(chǎn)品。



01.工具類。

工具類的APP內(nèi)容相對固定,不需要時(shí)時(shí)更新,這樣設(shè)計(jì)師在視覺風(fēng)格方面的表達(dá)空間更大一些。在追波上,發(fā)現(xiàn)大部分的作品都是偏工具類的

                       

01056c5e44f4c3a801216518c45b10.png                     

   


02.簡單的功能性頁面。

和工具類APP一樣,這些類頁面上運(yùn)營性質(zhì)的東西相對較少,內(nèi)容的形式相對可控。

        01574f5e44f4c4a801216518cbc414.png 



結(jié)語

那么,大家最關(guān)心的問題來了,新擬態(tài)到底是不是2020年即將要流行的設(shè)計(jì)風(fēng)格?相信 大家最近這段時(shí)間多多少少也看過很多關(guān)于新擬態(tài)一些介紹,在趨勢文章里面或者在其他文章里面看到。


首先必須得中肯的說,像大多數(shù)設(shè)計(jì)趨勢一樣,新擬態(tài)是設(shè)計(jì)用戶界面的一種看起來視覺比較新穎的表現(xiàn)手法,讓產(chǎn)品界面看起來既柔軟又方便,但是它也存在一些局限,前面我們也提到一些,比如它實(shí)現(xiàn)起來還是有一點(diǎn)難度,也不夠靈活等等


但是我說一點(diǎn)不同的是,這也是我一直認(rèn)為的一點(diǎn),就是UI設(shè)計(jì)運(yùn)營化,運(yùn)營設(shè)計(jì)游戲化,這是未來的趨勢。

反觀我們APP的主要生力軍,90、00這一批人,其實(shí)他們就是互聯(lián)網(wǎng)的原住民,他們就是在這注重交互,注重游戲化體驗(yàn)的大環(huán)境出生的,成長起來的,所以他們對這些東西是非常了解的,他們也能接受這種游戲ui,這種寫實(shí)的東西,包括現(xiàn)在的這種體驗(yàn)。


所以,未來的方向,是會往這個(gè)方向走的


當(dāng)然,趨勢不是我們預(yù)測的,因?yàn)橹灰O果出一個(gè)新的設(shè)計(jì)風(fēng)格,那個(gè)風(fēng)格就會是成為新的設(shè)計(jì)趨勢,目前來看,這是必然的。


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 原創(chuàng):木七設(shè)設(shè)計(jì)坊
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




關(guān)于設(shè)計(jì)趨勢那些事

純純

團(tuán)隊(duì)按領(lǐng)域分組收集素材



我們認(rèn)為影響設(shè)計(jì)趨勢的因素主要有以下三個(gè):


后疫情時(shí)代的影響

新冠疫情的持續(xù)除了改變了大眾的生活習(xí)慣外,也意外地推動(dòng)了各行業(yè)加速線上化轉(zhuǎn)型、提供「無接觸」服務(wù),出行上的限制催生了游戲等線上娛樂市場的蓬勃?jiǎng)輵B(tài),甚至一定程度上疫情也影響了社會和經(jīng)濟(jì)格局,導(dǎo)致了一些新政策的出臺。


00 后成長為新主力軍

新生代的崛起導(dǎo)致了流行風(fēng)格的一系列變化:二次元等亞文化成功破圈進(jìn)入主流消費(fèi)市場、復(fù)古設(shè)計(jì)的重心從 90 年代向千禧年偏移。他們以更開放多元的思維方式和新視角,影響著下一個(gè) 10 年設(shè)計(jì)題材的選擇。


軟硬件技術(shù)的發(fā)展

近年來智能設(shè)備的性能上限不斷被刷新,誕生了許多創(chuàng)新的設(shè)備形態(tài),使更生動(dòng)的交互體驗(yàn)成為可能,另一方面,AR/VR 技術(shù)經(jīng)過上一個(gè)十年的雕琢,性能和效果逐步得到驗(yàn)證,具備了量產(chǎn)的技術(shù)沉淀,將迎來一波商用普及的浪潮。



概念闡述

「 酸性平面」風(fēng)格融合「Y2K」美學(xué)的未來感,形成了獨(dú)特的「未來酸性金屬風(fēng)」,典型特征有:


  • 酸性漸變:一種會引起不適但足夠刺激的迷幻漸變色。這類配色打破了傳統(tǒng)美感的標(biāo)準(zhǔn),追求感官刺激,給人異次元下致幻而不安的感受。


  • 金屬感:以熔融形態(tài)在環(huán)境光下呈現(xiàn)出詭秘的反射,這種反常規(guī)的液態(tài)質(zhì)感所帶來的違和,在傳統(tǒng)科技感上增添了幾分神秘。


  • 透明膠質(zhì):液體或是 PVC 半透明膠質(zhì),配合流體動(dòng)感的形態(tài),折射出光的幻彩,給人強(qiáng)烈的亦真亦幻感受。 



應(yīng)用場景

未來酸性金屬風(fēng)反差感兼具未來感的特征,決定了它在時(shí)尚、音樂、潮流以及藝術(shù)圈有很好的延展性。服裝鞋包、藝術(shù)家創(chuàng)作,以及傳達(dá)個(gè)性自我的品牌平面廣告,都可以看到其身影。


相關(guān)案例

The Future Vision of Microsoft 365 宣傳視頻



概念闡述

隨著產(chǎn)品硬件性能的不斷升級,設(shè)計(jì)語言也開始追求真實(shí)感。相比過去,「類玻璃柔光材質(zhì)」除了更注重「輕」的概念,在質(zhì)感上也呈現(xiàn)出更加輕盈、細(xì)膩以及自然的趨勢。


類玻璃材質(zhì)的表面呈現(xiàn)微磨砂感的半透明質(zhì)感,透光而不透視,通過清晰的邊緣來強(qiáng)化物理質(zhì)感,兩者對比呈現(xiàn)出一種「虛實(shí)結(jié)合」的美感。該材質(zhì)多以輕薄的片狀形態(tài)懸浮于場景中,減輕重量感以帶來輕盈的視覺感受。



應(yīng)用場景

「類玻璃柔光材質(zhì)」輕盈與通透的視覺感受,能營造出未來感十足的場景,很適合闡述科技智能的概念。因此該風(fēng)格成為了一大波科技背景公司的設(shè)計(jì)首選,其中主要以硬件系統(tǒng)以及B端、工具類的產(chǎn)品為主,應(yīng)用場景包括界面設(shè)計(jì)、推廣視頻等。



相關(guān)案例

Louis Vuitton × League of Legends Collection



概念闡述

近年來,品牌跨界合作的對象不再局限于品牌之間或明星名流,眾多服裝、奢侈品、數(shù)碼產(chǎn)品等消費(fèi)市場的強(qiáng)勢品牌紛紛向游戲和二次元等虛擬 IP 拋出跨次元合作的橄欖枝。這種合作方式成就了「三次元」品牌與「二次元」IP 的雙贏局勢,將在 2021 年繼續(xù)發(fā)展并造成更廣泛的影響。



應(yīng)用場景

游戲和二次元元素大熱,手機(jī)、化妝品、服裝等產(chǎn)品通過結(jié)合該類元素,以新的形式吸引年輕用戶:為像素風(fēng)格的游戲設(shè)計(jì)服裝、為全息的虛擬偶像捏臉?biāo)苄?、為?dòng)漫人物拍攝雜志封面、在一款電子游戲里搭建新品發(fā)布會等,相應(yīng)地,跨界應(yīng)用對設(shè)計(jì)師的涉獵領(lǐng)域和技術(shù)跨度也有了更高的要求。



相關(guān)案例

一線頂尖奢侈品品牌相比以往與動(dòng)漫游戲類二次元 IP 合作更頻繁,除了經(jīng)典動(dòng)漫,也不乏新鮮的熱度 IP。



在《Evangelion 新世紀(jì)福音戰(zhàn)士》25 周年,OPPO聯(lián)名這部影響一代人的動(dòng)畫神作,推出了一款從快遞包裝、外盒甚至是卡針,里里外外都深度融合 EVA 元素的聯(lián)名機(jī)型。


OPPO × EVA 定制版手機(jī) OPPO Ace2



美國說唱歌手 Travis Scott 2020 年在《堡壘之夜》(一款線上競技游戲)中辦了一場虛擬演唱會。這場演唱會共吸引了 1230 萬玩家同時(shí)在線觀看。


Travis Scott 在網(wǎng)絡(luò)游戲《堡壘之夜》內(nèi)舉辦虛擬演唱會




Photographed by Sean Thomas, Vogue, January 2020



概念闡述

「親生命性設(shè)計(jì)」原為建筑和空間設(shè)計(jì)中的概念,意為「運(yùn)用天然材料、自然光和植物創(chuàng)造令人愉悅舒適的建筑環(huán)境」。受城市化進(jìn)程加劇及全球疫情的影響,人們渴望親近自然的欲望和需求變得越來越強(qiáng)。產(chǎn)品和自然元素彼此交融,從主客體關(guān)系轉(zhuǎn)為互相依賴的存在,以更為和諧與自然的交互方式與用戶進(jìn)行溝通與連接。



應(yīng)用場景

自然元素將在不同感知維度以更貼近真實(shí)自然的方式融入各個(gè)領(lǐng)域的設(shè)計(jì),比如在工業(yè)產(chǎn)品設(shè)計(jì)中使用更加貼近自然物體的表面肌理,在建筑設(shè)計(jì)中將人造空間作為自然空間的延伸,在數(shù)字產(chǎn)品設(shè)計(jì)中使用更擬真的自然音效和光照等等。



相關(guān)案例:

2021 時(shí)尚界不約而同地強(qiáng)調(diào)了自然元素的使用和對環(huán)境保護(hù)的呼吁,各大品牌都用自己的方式演繹了「自然共生」的服裝設(shè)計(jì)系列。




還原自然界中的真實(shí)材質(zhì)成為了新的設(shè)計(jì)靈感,被應(yīng)用到各種設(shè)計(jì)中。



Vivo OriginOs 系統(tǒng)通過行為壁紙系統(tǒng)將常用的系統(tǒng)功能和展現(xiàn)真實(shí)自然場景的動(dòng)態(tài)壁紙進(jìn)行聯(lián)動(dòng)。 


Vivo OriginOs



山水 Mountains & Rivers by Particle (Gao Yang)



概念闡述

近年,國人的文化自信逐漸增強(qiáng),國家擴(kuò)大內(nèi)需、擴(kuò)大消費(fèi)的政策導(dǎo)向?yàn)閲鴥?nèi)消費(fèi)品品牌帶來了巨大的機(jī)會?!钢袊O(shè)計(jì)」的標(biāo)簽已經(jīng)成為新一代的時(shí)尚潮流,帶有中國本土個(gè)性、體現(xiàn)中式美學(xué)的設(shè)計(jì)受到更多品牌的青睞。



應(yīng)用場景

越來越多中國品牌開始注重漢字 Logo 的使用和設(shè)計(jì),更多現(xiàn)代設(shè)計(jì)力求為中式美學(xué)擺脫民俗、皇家的刻板印象,木、石、竹這些蘊(yùn)含中式精神內(nèi)核的元素成為了工業(yè)設(shè)計(jì)、建筑設(shè)計(jì)中新的繆斯。


隨著中國的國際影響力進(jìn)一步擴(kuò)大,國際品牌也會提高對中國市場與文化的關(guān)注,在設(shè)計(jì)上融入更多本土元素。



相關(guān)案例

各品類的國產(chǎn)品牌在包裝或產(chǎn)品設(shè)計(jì)上通過對中國元素的運(yùn)用來塑造具有特色的國風(fēng)產(chǎn)品。



可口可樂中國與漢字文化推廣機(jī)構(gòu)「好字在」和方正字庫聯(lián)合推出的這款字體,反映了可口可樂對中國文化的深入理解和對本地化運(yùn)營的關(guān)注度。


可口可樂聯(lián)合推出的中文字體「在乎體」


同仁堂旗下「知嘛健康」在北京開設(shè)線下體驗(yàn)店,店鋪設(shè)計(jì)提煉漢字、中藥、藥房等中式元素作為靈感,用現(xiàn)代化的方式呈現(xiàn),是極具現(xiàn)代感的「中式」空間設(shè)計(jì)。


同仁堂旗下「知嘛健康」線下體驗(yàn)店 by 無象空間建筑


Microsoft Haptic PIVOT 微軟腕帶觸覺設(shè)備



概念闡述

在增強(qiáng)現(xiàn)實(shí)中,人機(jī)交互將更多發(fā)生在物理空間里,虛擬的數(shù)字信息將借助形變和震動(dòng)被模擬為觸感。得益于新型傳感器的拓展應(yīng)用,硬件設(shè)備實(shí)現(xiàn)了對溫度、形態(tài)、力量的數(shù)據(jù)監(jiān)測,同時(shí)各大硬件廠商也逐步對震動(dòng)馬達(dá)等硬件進(jìn)行了完善升級,從而為進(jìn)一步的觸覺模態(tài)設(shè)計(jì)提供了支持。



應(yīng)用場景

涉及領(lǐng)域除了現(xiàn)有的游戲、駕駛、健身等場景外,更有趨勢被應(yīng)用于創(chuàng)新教育、操作培訓(xùn)及有風(fēng)險(xiǎn)的試驗(yàn)演練中。



相關(guān)案例

任天堂在健身環(huán) Ring-Con 內(nèi)加入的力學(xué)傳感器實(shí)現(xiàn)了對力量(張力、拉力、壓力等)的監(jiān)測,并利用 Joy-con 震動(dòng)來對用戶動(dòng)作的標(biāo)準(zhǔn)性進(jìn)行反饋提示。


《健身環(huán)大冒險(xiǎn)》on Switch



微軟研發(fā)部開發(fā)出了一套 Haptic PIVOT 腕戴觸感反饋方案,通過活動(dòng)的機(jī)械結(jié)構(gòu),更逼真地模擬出物體的握持感。


Haptic PIVOT 使用演示



索尼推出配備了音圈馬達(dá)的 PS5 DualSense 無線手柄,扳機(jī)鍵內(nèi)增加了一個(gè)由電機(jī)驅(qū)動(dòng)的齒輪,通過震動(dòng)模擬出槍支的后坐力、彈簧的彈力、繩索的拉力等物理效果。


PS5 DualSense 無線手柄使用演示

Flight Booking AR application by Bala GN



概念闡述

現(xiàn)實(shí)生活中,人與人、人與物接觸產(chǎn)生的實(shí)體服務(wù)稱為線下服務(wù),由網(wǎng)絡(luò)等技術(shù)支撐的人與硬件設(shè)備交互的服務(wù)稱為線上服務(wù)。在硬件設(shè)備、網(wǎng)絡(luò)技術(shù)成熟的當(dāng)今社會,線下服務(wù)向線上服務(wù)遷移的過程中融入了更多 AR/VR 等虛擬服務(wù),也帶來更多新的設(shè)計(jì)行為和交互方式。



應(yīng)用場景

原本需要親臨現(xiàn)場才能完成的體驗(yàn),現(xiàn)在可以通過線上的方式實(shí)現(xiàn),這不僅體現(xiàn)在因疫情催化產(chǎn)生的線上辦公、線上畢業(yè)展等強(qiáng)需求場景,也在購物、試衣、健身等更貼近生活的領(lǐng)域應(yīng)用。



相關(guān)案例

用戶在 Gucci APP 上挑選自己喜歡的手表后,將手機(jī)攝像頭對準(zhǔn)手腕,就會顯示「試戴」效果。


Gucci APP 虛擬試表



各大院校畢業(yè)展因疫情無法在線下舉行,一些學(xué)校通過線上展廳的方式,讓學(xué)生的畢業(yè)作品可以通過網(wǎng)絡(luò)瀏覽。


中央美術(shù)學(xué)院 云端美院



香港理工大學(xué) polyudesignshow



Balenciaga 2020 年用一款電子游戲代替了線下時(shí)裝發(fā)布會。在視頻游戲中,玩家能夠在五個(gè)主題場景中欣賞到 2021 秋季系列的新款服飾。



Balenciaga:《后世:明日世界》



硬件設(shè)備的創(chuàng)新使線上健身指導(dǎo)有了更合理的使用場景和更人性化的體驗(yàn),用戶通過線上內(nèi)容和服務(wù)在家也可以獲得接近健身房的體驗(yàn)。


Tempo Studio:家庭智能健身設(shè)備



POPMART 泡泡瑪特



概念闡述

「情感療愈」是一種有溫度,無攻擊性,注重細(xì)節(jié)的設(shè)計(jì)方向。這類設(shè)計(jì)旨在治愈修補(bǔ)心靈中的創(chuàng)傷,不只注重功能的完善,也更在意情感內(nèi)涵的打磨。它也可以幫助人們敞開心胸,接納自己內(nèi)在的所有面。



應(yīng)用場景

在產(chǎn)品設(shè)計(jì)中,一些撫慰人心的小功能、小彩蛋往往帶有著治愈人心的力量。在角色形象上,柔軟、可愛的造型在帶給人無攻擊感的同時(shí)強(qiáng)調(diào)著陪伴的意義。在娛樂領(lǐng)域,也出現(xiàn)不一味強(qiáng)迫用戶達(dá)成某個(gè)目的慢節(jié)奏「佛系」游戲。



相關(guān)案例

網(wǎng)易云音樂來自「張開雙臂擁抱別人」動(dòng)作靈感的抱一抱彩蛋,讓原本只有文字點(diǎn)贊的評論區(qū)更有溫度。


網(wǎng)易云音樂的「抱一抱」動(dòng)效



Switch 游戲《動(dòng)物森友會》在 2020 年異?;鸨瑲w功于其萌系治愈的風(fēng)格和追求自然隨性的生活方式,也讓疫情期間的玩家們暫時(shí)逃離嚴(yán)峻緊張的現(xiàn)實(shí)生活。


Switch:《集合啦!動(dòng)物森友會》



盲盒的精神內(nèi)核是「收集、陪伴、治愈」,泡泡瑪特簽約的 IP 形象,大多以可愛、萌系為主。


泡泡瑪特的盲盒萌系 IP 形象



Disney 與 Pixar 出品的動(dòng)畫電影《心靈奇旅》用輕松的方式探討生活的意義和人生的價(jià)值,電影用它獨(dú)特的美術(shù)風(fēng)格和感人的故事斬獲超高的口碑和評分。


Disney · Pixar《心靈奇旅》


OceanPlastic 廢棄塑料重造



概念闡述

2020 年世界各地重大自然災(zāi)害頻發(fā),環(huán)境污染嚴(yán)重,刺激著人類對生活環(huán)境的審視。更多品牌開始探索材料再利用的可能性,從自然衍生產(chǎn)物出發(fā),從而降低對大自然的破壞。年輕一代對于再創(chuàng)造產(chǎn)品有更高的接受度,循環(huán)材料轉(zhuǎn)化為塑料顆粒,組合成獨(dú)一無二的花紋和肌理,給人專屬限量感,再生材料成為新的流行元素。



應(yīng)用場景

消費(fèi)者將繼續(xù)青睞和衛(wèi)生健康、環(huán)境保護(hù)相關(guān)的價(jià)值品牌,越來越多的快消、包裝廠商開始研究材料回溯,組建相關(guān)部門,加入循環(huán)經(jīng)濟(jì)浪潮中。



相關(guān)案例

運(yùn)動(dòng)品牌 Adidas 與 Nike 都推出了由回收廢料制作的充滿設(shè)計(jì)感的產(chǎn)品,在宣傳品牌環(huán)保意識的同時(shí)也引領(lǐng)了再生產(chǎn)品的潮流。


adidas 與 Parley Ocean 合作推出由海洋回收廢料制作的聯(lián)名產(chǎn)品


同樣使用了廢棄材料的 adidas 球衣


Nike 將生產(chǎn)車間加工過程中產(chǎn)生的邊角料轉(zhuǎn)化為產(chǎn)品設(shè)計(jì)的主要材料



由 99% 廢棄奶茶杯+ 1% 廢棄原茶渣再生而成的「真垃圾·手機(jī)殼」


TRASHAUS 真垃圾再生手機(jī)殼


Freitag 的 2020 新款 F601 MALCOLM 是一款個(gè)性化背包,用一塊再生的防水油布保護(hù),并由用空PET瓶制成的防水織物制成。


F601 MALCOLM


除消費(fèi)產(chǎn)品外,肯德基的可回重復(fù)利用餐盤、星巴克倡導(dǎo)的紙質(zhì)吸管、外賣行業(yè)各公司的環(huán)保舉措等也體現(xiàn)了餐飲外賣行業(yè)對循環(huán)經(jīng)濟(jì)的重視。


結(jié)語

無論是后疫情時(shí)代世界的變化、新技術(shù)的發(fā)明應(yīng)用或是國際社會環(huán)境的走向,都會影響大眾的生活習(xí)慣、行為方式和審美取向,同時(shí)也決定了未來設(shè)計(jì)的發(fā)展方向。但這其中不變的,是軟硬件發(fā)展不斷突破視覺表現(xiàn)的上限、設(shè)計(jì)師追求「以人為本」的核心理念以及通過設(shè)計(jì)去提出和解決問題的目標(biāo)。


我們期待著上述預(yù)測性的分析能在今年的設(shè)計(jì)中被驗(yàn)證。但設(shè)計(jì)本身是一個(gè)迸發(fā)新奇創(chuàng)意的過程,也希望上述的設(shè)計(jì)趨勢能激發(fā)設(shè)計(jì)師們更豐富的靈感、為設(shè)計(jì)領(lǐng)域提供更多的可能性。


新的一年,在「變化」與「希望」的新主題下,我們一同加油!




原文地址:站酷
作者:今日頭條UED

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



UI/UX的趨勢分析

純純


在色彩方面,雖然UI是一個(gè)相對獨(dú)立的設(shè)計(jì)環(huán)境,但其實(shí)一直是在跟隨平面的趨勢。

 


年初潘通發(fā)布了2021年的色彩流行趨勢,灰黃色一時(shí)間成為了我們追逐的目標(biāo)。

但是潘通流行色更多是表現(xiàn)了一種當(dāng)下的社會情緒與遠(yuǎn)景追求,并不是用來指導(dǎo)設(shè)計(jì)的。

(圖片來源:Dribbble)


在UI的色彩方面,我們都記得2020年還是流行的是高飽和色彩路線,而2021年UI色彩一下子就被沖淡了,各種低飽和度色彩的作品更加得到設(shè)計(jì)師的青睞,似乎也昭示著大家的情緒也從疫情中慢慢穩(wěn)定了下來,這個(gè)世界的確需要設(shè)計(jì)來對情緒進(jìn)行即時(shí)表達(dá),在5月份Google的全新Material You設(shè)計(jì)語言中,這種低飽和色彩也被發(fā)揮的淋漓盡致。相信低飽和度色彩將在2021下半年會延續(xù)發(fā)展!


有關(guān)Material You信息可以看一下我的另一篇文章《Material You 為你而來!》


(圖片來源:Google Material You)


(圖片來源:Dribbble)


圖形方面,亮點(diǎn)在3D!毫無疑問3D插畫在2021上半年繼續(xù)著他的強(qiáng)勁勢頭,2021上半年涌現(xiàn)出了大量優(yōu)秀的3D風(fēng)格插畫,并且不止是3D卡通人物,在產(chǎn)品渲染和背景展現(xiàn)上也在醞釀新的力量。特別說明的是,設(shè)計(jì)工具的高速發(fā)展也讓3D門檻不斷降低,如果你只盯著C4D那就真的OUT了,像Blender Spline Stager 這樣的新興輕量級3D工具軟件是需要特別關(guān)注的,也許這些新工具是真的能讓你跑出與別人不一樣的賽道。


(值得關(guān)注的3款新興3D軟件)



在2D圖形方面,也有突破,除了傳統(tǒng)的矩形、圓角矩形、圓形之外,UI中將會引入到更多的形狀,像多邊形、三角形、不規(guī)則形都會大量的出現(xiàn)在UI設(shè)計(jì)中,UI設(shè)計(jì)越來越開放和放得開了!



(圖片來源:Google Material You)


隨著去年底蘋果BigSur操作系統(tǒng)的發(fā)布,3D圖標(biāo)著實(shí)火了一段時(shí)間,出現(xiàn)了不少3D風(fēng)格圖標(biāo)。但是后來大家發(fā)現(xiàn)在圖標(biāo)在2D層面其實(shí)還是很有創(chuàng)新點(diǎn)的,并且也更加實(shí)用,所以我們又看到了磨砂玻璃風(fēng)格圖標(biāo)走入了我們的視線。這種采用背板透光設(shè)計(jì)的風(fēng)格圖標(biāo),看起來清新自然,一經(jīng)亮相就讓設(shè)計(jì)師們喜歡起來了!

(圖片來源:Dribbble)


但無論是3D風(fēng)格還是磨砂玻璃風(fēng)格圖標(biāo)設(shè)計(jì),從某種意義上說,這些都是擬物化設(shè)計(jì)的一種新的回歸方式,設(shè)計(jì)就是一個(gè)圈哪!


排版設(shè)計(jì),塊狀與字體成為了關(guān)鍵詞。先看幾個(gè)作品,你發(fā)現(xiàn)了什么了嗎?


(圖片來源:Dribbble)


UI設(shè)計(jì)的排版不止是為了視覺好看,更多是要做信息的分割與歸類,讓信息閱讀快速準(zhǔn)確且優(yōu)雅!從某種方面也就是我們說的用戶體驗(yàn)。當(dāng)下仍然是扁平化為主體UI設(shè)計(jì)語言的時(shí)代,陰影設(shè)計(jì)幾乎已經(jīng)退出了當(dāng)下的主流設(shè)計(jì),所以在信息的區(qū)分上靠的就是留白與文字,所以加粗大字體,卡片留白、形狀色彩塊就在UI排版設(shè)計(jì)中起到重要的作用。再輔助通過一些微交互動(dòng)畫,一切都是那么自然絲滑,主次分明!


(UI排版的三個(gè)趨勢)


最后我們說說行業(yè)趨勢方面,在2021上半年的UI設(shè)計(jì)作品中,除了常規(guī)的移動(dòng)端APP UI設(shè)計(jì)之外,我們更多看到了一些針對于其他設(shè)備的UI設(shè)計(jì),比如說電腦B端應(yīng)用、車載HMI、數(shù)據(jù)可視化、交互動(dòng)畫等這樣的新端趨勢,并且這些作品的數(shù)量越來越多了,所以從行業(yè)趨勢來講,UI設(shè)計(jì)師們還是要打開更多的眼界和格局,設(shè)計(jì)的競爭不止是在水平能力上,更重要的是行業(yè)賽道的選擇!關(guān)注趨勢尤為重要!


(圖片來源:Dribbble)

原文地址:站酷
作者:騰訊ISUX

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計(jì)的發(fā)展趨勢

ui設(shè)計(jì)分享達(dá)人

前言:

在 2020 年,疫情最為嚴(yán)峻的時(shí)候,B 端這一領(lǐng)域得到了前所未有的關(guān)注,而那時(shí),身為 B 端用戶體驗(yàn)設(shè)計(jì)師的我,也曾總結(jié)過,當(dāng)時(shí) B 端設(shè)計(jì)的諸多趨勢,比如:

多端需求:即桌面端、平板端、移動(dòng)端的設(shè)計(jì)形式

設(shè)計(jì)中臺:擁有更為統(tǒng)一的設(shè)計(jì)平臺,與這兩年討論較多的設(shè)計(jì)資產(chǎn)相同,都是起到快速協(xié)作的作用

隨著 2022 年的到來,B 端行業(yè)又會迎來哪些新的機(jī)會?今天我們就從整個(gè)的 B 端入手,回顧一下 2021 年的設(shè)計(jì)形式,展望一下 2022 年的設(shè)計(jì)趨勢。當(dāng)然趨勢完全是我自己個(gè)人主觀理解,僅供參考,如有異議,以你為準(zhǔn)~

完整的趨勢,我們會分為視覺趨勢與產(chǎn)品趨勢

  1. 視覺趨勢:主要圍繞設(shè)計(jì)當(dāng)中的細(xì)節(jié)展開,比如圖標(biāo)、色彩、字體、插畫等
  2. 產(chǎn)品趨勢:主要是了解不同的 B 端產(chǎn)品當(dāng)中究竟有哪些發(fā)展形式,對于設(shè)計(jì)師又會產(chǎn)生何種影響?

視覺趨勢

1. 3D 設(shè)計(jì)風(fēng)格

雖然 3D 化的視覺風(fēng)格早已到來,但是在 B 端市場上,3D 風(fēng)格在此之前依舊表現(xiàn)的十分克制。隨著 C4D、Blender 這些 3D 建模軟件的不斷普及,再加上互聯(lián)網(wǎng)上關(guān)于 3D 建模教程的增多,你會發(fā)現(xiàn) 3D 風(fēng)格的視覺表現(xiàn),是一個(gè) B 端視覺設(shè)計(jì)師的基本要求。

而 3D 風(fēng)格用在 B 端軟件當(dāng)中,會有兩個(gè)使用場景:

圖標(biāo)

因?yàn)樵?B 端產(chǎn)品當(dāng)中,圖標(biāo)本身就是非常難以去表現(xiàn),比如“物聯(lián)網(wǎng),大數(shù)據(jù)”,許多抽象詞匯很難通過一個(gè)具象的事物進(jìn)行表達(dá),而在企業(yè)官網(wǎng)當(dāng)中,在視覺表現(xiàn)上的要求又十分的高。因此你會發(fā)現(xiàn),在視覺風(fēng)格上的選擇,往往只有 3D 圖標(biāo) + 插畫這一條路。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計(jì)的發(fā)展趨勢

并且 3D 圖標(biāo)的使用場景不會太過于局限,也可以用于產(chǎn)品的工作臺、運(yùn)營營銷工具箱等頁面,因此 3D 圖標(biāo)的出現(xiàn),它的應(yīng)用場景也會相比之前要更加的廣闊。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計(jì)的發(fā)展趨勢

可視化大屏

大屏設(shè)計(jì)也在不斷的“內(nèi)卷”,因?yàn)閭鹘y(tǒng)的 2D 可視化大屏所搭建出來的大屏已經(jīng)滿足不了企業(yè)的野心, 像 DataV 騰訊云圖 ,大家都在朝著 3D 風(fēng)格,炫酷的方向進(jìn)行延展,因此也就會導(dǎo)致 3D 的視覺風(fēng)格需求激增,而 3D 建模仿佛就是大勢所趨。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計(jì)的發(fā)展趨勢

2. 新擬態(tài)

雖然新擬態(tài)是在前兩年的產(chǎn)物。這個(gè)設(shè)計(jì)風(fēng)格背后,遭到了很多設(shè)計(jì)師的質(zhì)疑與排擠。但是隨著這個(gè)風(fēng)格的不斷成熟,感覺它在 B 端視覺領(lǐng)域(特指的是官網(wǎng) ),是非常受歡迎的,因?yàn)檎w的風(fēng)格,與官網(wǎng)的設(shè)計(jì)形式趨同。

同時(shí)作為 B 端產(chǎn)品的官網(wǎng),其實(shí)是更需要新擬態(tài)這種風(fēng)格。因?yàn)殡娔X場景下鼠標(biāo)光標(biāo)對頁面進(jìn)行 Hover 操作給出的真實(shí)反饋,而使用了新擬態(tài)的官網(wǎng)按鈕,給你的反饋非常真實(shí)。

這里安利一下騰訊云的首頁官網(wǎng),大家就會發(fā)現(xiàn)在設(shè)計(jì)風(fēng)格上大量的采取了新擬態(tài)元素,并且配合 3D 風(fēng)格的圖標(biāo),以及毛玻璃材質(zhì)的設(shè)計(jì),讓它的設(shè)計(jì)瞬間加分不少。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計(jì)的發(fā)展趨勢

3. 開源的設(shè)計(jì)系統(tǒng)

在去年,設(shè)計(jì)系統(tǒng)迎來了一波發(fā)展的高峰期,隨著字節(jié)、騰訊,三大設(shè)計(jì)系統(tǒng)(Arco Design、TDesign、Semi Design)的開源,其實(shí)是給我們很多 B 端設(shè)計(jì)初學(xué)者,有了更加完整仔細(xì)的 B 端入門教程。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計(jì)的發(fā)展趨勢

清晰的講解了每一個(gè)組件的使用方式,以及注意事項(xiàng),仔細(xì)閱讀這里面的內(nèi)容,其實(shí)就是 B 端設(shè)計(jì)的入門學(xué)習(xí)。而未來,國內(nèi)的環(huán)境,開源的系統(tǒng)也會越來越多,大家可以針對這幾大類不同的設(shè)計(jì)系統(tǒng)進(jìn)行對比,或許會有一番收獲。

產(chǎn)品趨勢

4. 超級 app

這里的超級 app 可能和大家潛意識里的支付寶、微信這些軟件不太一樣

在 B 端行業(yè),隨著疫情的不斷擴(kuò)散、再加上兩年時(shí)間的發(fā)展,很多 B 端產(chǎn)品的功能架構(gòu)都出現(xiàn)了一個(gè)現(xiàn)象,產(chǎn)品的功能開始變得非常擁擠。因?yàn)?B 端軟件的核心價(jià)值其實(shí)就是靠著一個(gè)又一個(gè)功能去累積,也就意味著隨著 B 端產(chǎn)品的發(fā)展,功能模塊在不斷的累積,導(dǎo)致在設(shè)計(jì)層面,這樣的現(xiàn)象變得更加嚴(yán)峻。

你會發(fā)現(xiàn)左側(cè)的導(dǎo)航菜單已經(jīng)完全沒有辦法裝下這些導(dǎo)航內(nèi)容,而這一現(xiàn)象也反映在很多產(chǎn)品當(dāng)中,比如我了解的飛書管理后臺、薪人薪事 等等諸多 B 端產(chǎn)品,它們在整個(gè)導(dǎo)航內(nèi)容上,已經(jīng)增加到一級導(dǎo)航 15+ 、二級導(dǎo)航 40+ ,這無疑會開始對設(shè)計(jì)師的能力造成巨大考驗(yàn)。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計(jì)的發(fā)展趨勢

面對這一情況,許多導(dǎo)航菜單都將會迎來前所未有的挑戰(zhàn),最近也在深入研究導(dǎo)航菜單過多時(shí)的解決辦法,發(fā)現(xiàn)了一些新的導(dǎo)航菜單設(shè)計(jì)方法,有機(jī)會咱們重新梳理一下導(dǎo)航菜單的內(nèi)容,將 B 端設(shè)計(jì)指南文章進(jìn)行更新。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計(jì)的發(fā)展趨勢

低代碼定制化

低代碼一直是我關(guān)注的一個(gè)領(lǐng)域,先給不明白低代碼的同學(xué)簡單科普一下。

低代碼,一種快速開發(fā)應(yīng)用的軟件,將通用、可重復(fù)利用的代碼形成組件化的模塊,通過圖形化的界面來拖拽組件并形成應(yīng)用。低代碼能夠?qū)崿F(xiàn)只寫少量代碼或不寫代碼,類似用“樂高積木”的方式來開發(fā)。

在國外有很多著名的低代碼成功案例。Outsystems(國外非常出名的低代碼平臺)幫助施耐德電氣在 20 個(gè)月內(nèi)推出了 60 款應(yīng)用程序,開發(fā)過程加速了兩倍;在 2012 年即將推出 Model S 之際,特斯拉放棄了 SAP 的 ERP 產(chǎn)品(可以思考一下為什么),改用低代碼開發(fā)平臺 Mendix,用 25 個(gè)人四個(gè)月時(shí)間自建 ERP 系統(tǒng)。

去年,低代碼平臺,也有很多新產(chǎn)品面世,其中就包含:

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計(jì)的發(fā)展趨勢

因此你會發(fā)現(xiàn),其實(shí)低代碼就是在解決一件事,圍繞著某一個(gè)業(yè)務(wù)場景,通過平臺的持續(xù)完善優(yōu)化。讓所有的功能都能圍繞這個(gè)業(yè)務(wù)展開,其中包括:權(quán)限、時(shí)間軸、流程、表單、公式等等,能夠解決很多特殊的業(yè)務(wù)場景。而低代碼會涉及到設(shè)計(jì)思路上的轉(zhuǎn)變,以及低代碼編輯器的出現(xiàn),如何去設(shè)計(jì)如此復(fù)雜的配置流程,如何讓用戶能夠快速上手,如果你能夠有比較完整的思路,這些都會成為我們設(shè)計(jì)的新機(jī)會。

行業(yè)細(xì)分

隨著互聯(lián)網(wǎng)市場的不斷發(fā)展,用戶會越來越關(guān)注產(chǎn)品在自己行業(yè)的應(yīng)用,比如 CRM,其實(shí)只是一個(gè)籠統(tǒng)的稱呼,現(xiàn)在 CRM 市場又會分為 SCRM、運(yùn)營 CRM,等諸多產(chǎn)品。

SaaS 類的平臺也出現(xiàn)了負(fù)責(zé)從虛擬主機(jī)和數(shù)據(jù)庫層面入手的 iPaaS 以及從應(yīng)用和數(shù)據(jù)層面入手的 aPaaS。

即使是大家經(jīng)常使用的 釘釘、企微、飛書,它們也在各自的領(lǐng)域有所擅長。

從視覺產(chǎn)品兩方面,分析2022年B端設(shè)計(jì)的發(fā)展趨勢

因?yàn)?B 端產(chǎn)品,在底層邏輯上是不能允許趨同的產(chǎn)品出現(xiàn),如果你和別人的產(chǎn)品一樣,其實(shí)是沒有辦法在目前的市場上立足。因此你會發(fā)現(xiàn),雖然產(chǎn)品形式都會比較相同,但是 B 端市場十分廣闊,大家都在去尋找自己產(chǎn)品的差異化。

當(dāng)然市場是瞬息萬變的,這里也只是簡單聊聊我自己的看法,希望對你有所幫助。

文章來源:優(yōu)設(shè)  作者:CE青年
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

ui設(shè)計(jì)分享達(dá)人

Dribbble 平臺對于互聯(lián)網(wǎng) UI 界面設(shè)計(jì)有著舉足輕重的定位,對 Dribbble 設(shè)計(jì)的研究會讓我們看清設(shè)計(jì)的方向。

為了保證這篇文章的質(zhì)量,Dribbble 年度的每個(gè)作品都超過 550 贊。在此原則下挑選了 828 件作品,作品總的大小為 2.2G。

總結(jié)

從挑選出的 828 件作品中,排名前十的作品中 9 件為 B 端設(shè)計(jì),另一件作品也是 B 端產(chǎn)品 C 端化的產(chǎn)物。其中:

  • B 端界面設(shè)計(jì)占比 476/828,57.4%;
  • C 端界面設(shè)計(jì)占比 180/828,21.7%;
  • 視頻動(dòng)效作品占比 223/828,26.9%;

明眼人都能看出其中的比重關(guān)系,B 端設(shè)計(jì)再次大火,為什么是再次?因?yàn)?B 端設(shè)計(jì)之前火過,只不過沒有趕上一個(gè)好的時(shí)代,在 C 端設(shè)計(jì)風(fēng)光的十年里而忽略了其存在。隨著 C 端市場飽和與數(shù)字化的浪潮下,實(shí)體經(jīng)濟(jì)、ToB、ToG 的產(chǎn)業(yè)再次迎來了它的曙光。視頻動(dòng)效的作品占比也已超過 C 端界面設(shè)計(jì),相信今年視頻動(dòng)效作品占比還會再次提升。

Dribbble 年度最佳作品

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

Dribbble 年度最佳作品來自大家最熟悉的 UI8 團(tuán)隊(duì)中的 Tran Mau Tri Tam ?,作者來自越南西貢,最佳作品截止目前355K瀏覽量,2933個(gè)贊。

為什么看似平平無奇的作品卻能獲得 Dribbble 年度最佳作品呢?既不是 C 端也不是純 B 端的作品,更像一個(gè)網(wǎng)頁與平面的結(jié)合體。如果去掉搜索圖標(biāo)、分類圖標(biāo)和按鈕,你可以理解它就是一個(gè)平面作品,一個(gè)字體加幾何形體構(gòu)建的作品,為了豐富畫面的層次,讓畫面更加的活潑采用了多彩加幾何色塊,讓標(biāo)題閱讀有停頓感和呼吸感。faster 底部的橫線讓它從標(biāo)題文字中脫穎而出,這種使用線條突出重要信息的設(shè)計(jì)也是今年Dribbble 設(shè)計(jì)流行趨勢之一。

MetroUI 是 Windows8 的界面設(shè)計(jì)語言,在 2010 年至 2013 年間曾經(jīng)風(fēng)靡一時(shí),那也是移動(dòng)互聯(lián)網(wǎng)的發(fā)展元年,現(xiàn)在國家推行實(shí)體經(jīng)濟(jì)、數(shù)字化帶動(dòng) To B、To G 的發(fā)展元年,通過幾何色塊(MetroUI)實(shí)現(xiàn) B 端產(chǎn)品與 C 端設(shè)計(jì)風(fēng)格的傳承與銜接,你會發(fā)現(xiàn)歷史總是驚人的相似。最后背景結(jié)合今年最流行的微軟風(fēng),毛玻璃的多彩高斯模糊漸變風(fēng),年度作品當(dāng)之無愧。

最后來看下按鈕的設(shè)計(jì),正常的按鈕要么文字加色塊,要么左圖標(biāo)加右文字,它設(shè)計(jì)成左文本加右圖標(biāo),更加注重信息的可讀性和易讀性,也體現(xiàn) B 端設(shè)計(jì)重功能和交互體驗(yàn),視覺點(diǎn)到為止的設(shè)計(jì)理念。

下面我們來欣賞年度最佳作品里面的流行趨勢吧。

1. 易讀性(停頓感)

字體三原則:可讀性、易識性、易讀性。當(dāng)你同時(shí)讀一篇文言文和一篇設(shè)計(jì)文章,肯定設(shè)計(jì)文章的內(nèi)容可讀性更好。易識性是用在字體設(shè)計(jì)上,不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個(gè)位設(shè)計(jì)師都息息相關(guān),因?yàn)槲覀兌夹枰幣盼谋尽.?dāng)我們小時(shí)候?qū)懽魑臅r(shí),不會寫的文字可以用拼音代替。這時(shí)候讀者讀到拼音時(shí)會有停頓感,更加適合用戶閱讀。

通過給用戶制作停頓感來增加用戶的易讀性??梢栽谙嚓P(guān)聯(lián)文本后面添加圖片、表情、圖標(biāo)來更好的理解文本內(nèi)容,豐富文本內(nèi)涵。比如情侶間表達(dá)愛意時(shí)會輸入文本,“我愛你”、“我 Love 你”、“我 ai 你”、“我??你”,哪個(gè)更加會有情感共鳴呢?不言而喻,相信你心中已經(jīng)有答案了。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

2. 曲線

在標(biāo)題文字上添加曲線來突出重要文案是 2021 Dribbble 最流行的趨勢之一,第一個(gè)設(shè)計(jì)目的就是突顯文字,其次就是想表現(xiàn)鉛筆真實(shí)書寫的感覺。之前很多帶有簽名的設(shè)計(jì)中,簽字的文本都是手寫體的感覺,手寫體對比電腦的機(jī)械字體會帶有一種人文氣息,也會讓兩者之間產(chǎn)生一種對比、矛盾。

除了突顯文本外,曲線還有視覺引導(dǎo)的作用。通過視覺引導(dǎo)讓用戶按照設(shè)計(jì)師編排的順序進(jìn)行瀏覽界面。當(dāng)然還有比這更科學(xué)的工具就是眼動(dòng)儀測試,通過真實(shí)用戶眼睛瀏覽界面顯示對應(yīng)的熱點(diǎn)圖。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

3. 多彩高斯?jié)u變風(fēng)

多彩高斯?jié)u變風(fēng)是從色彩的角度來傳達(dá)和豐富畫面的,多彩高斯?jié)u變風(fēng)其實(shí)是從制造矛盾到平衡矛盾的過程,多彩漸變多為冷暖對比來制造畫面的沖突,需要控制冷暖畫面的大小來實(shí)現(xiàn)平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。

多彩高斯?jié)u變還可以結(jié)合輕擬物、幾何圖形、三維等新的組合方式去創(chuàng)新,給用戶呈現(xiàn)一種更加新穎的視覺表現(xiàn)形式。最后我們還是要回歸到內(nèi)容上,為了更好的傳達(dá)信息需要去設(shè)計(jì)與內(nèi)容相匹配的視覺風(fēng)格。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

B 端界面設(shè)計(jì)

1. 側(cè)邊欄 Sidebar

B 端設(shè)計(jì)的火爆帶動(dòng)了 B 端相關(guān)模塊設(shè)計(jì),更多的人也愿意嘗試 B 端相關(guān)模塊設(shè)計(jì),側(cè)邊欄作為產(chǎn)品架構(gòu)中重要的導(dǎo)航系統(tǒng),好的側(cè)邊欄設(shè)計(jì)能為用戶帶來更好的效率。主流側(cè)邊欄都做了展開、收起、拖拽等交互效果,也是受限于 PC 屏幕為展示更多數(shù)據(jù)而騰空間。側(cè)邊欄主要承擔(dān)的功能有導(dǎo)航、分類、自定義篩選、共享、新增等。Dribbble 的 B 端產(chǎn)品設(shè)計(jì)已經(jīng)不再是假大空概念設(shè)計(jì),而是一套實(shí)用美觀可落地的設(shè)計(jì)。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

2. 儀表盤設(shè)計(jì)

儀表盤設(shè)計(jì)是一個(gè)很好的隱喻,想象一下開摩托車或汽車主駕駛前面的屏幕,汽車儀表有燃油表、車速表、里程表、水溫表、轉(zhuǎn)速表、故障指示燈等。B 端類產(chǎn)品后臺界面的儀表盤設(shè)計(jì)也需要展示一些重要的數(shù)據(jù)和各種狀態(tài),大體分為側(cè)標(biāo)欄、導(dǎo)航欄、待辦任務(wù)、個(gè)人信息、報(bào)表數(shù)據(jù)、消息中心、快捷入口等。當(dāng)然最重要的就是報(bào)表數(shù)據(jù),團(tuán)隊(duì)收益、任務(wù)進(jìn)度、轉(zhuǎn)化比例、新增、存量、團(tuán)隊(duì)工作時(shí)長等都是老板或領(lǐng)導(dǎo)關(guān)心的內(nèi)容。每個(gè)公司業(yè)務(wù)不同、每個(gè)人員權(quán)限不同,自定義的儀表盤也各有差異。重要的是突顯數(shù)據(jù)和業(yè)務(wù)狀態(tài),需要分層級系統(tǒng)性去思考和設(shè)計(jì)。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

3. 流程設(shè)計(jì)

復(fù)雜的事情簡單化,簡單的事情標(biāo)準(zhǔn)化,標(biāo)準(zhǔn)的事情流程化,流程的事情自動(dòng)化。流程設(shè)計(jì)是每一個(gè)企業(yè)核心功能和業(yè)務(wù),可自定義的管理流程系統(tǒng)搭建也是 B 端產(chǎn)品設(shè)計(jì)的難點(diǎn),需要對業(yè)務(wù)高度抽象,讓每一個(gè)業(yè)務(wù)人員可自定義的流程才是好的流程設(shè)計(jì)。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

4. B 端 C 化

B 端 C 化是 B 端產(chǎn)品設(shè)計(jì)的視覺表現(xiàn)力慢慢往 C 端產(chǎn)品設(shè)計(jì)的視覺靠齊,國內(nèi) B 端產(chǎn)品界面設(shè)計(jì)視覺水平還有很大的提高空間。除了視覺上的提升外,由于業(yè)務(wù)的發(fā)展,B 端產(chǎn)品也開始移動(dòng)化、智能化,國內(nèi)主流還是通過小程序、H5 來現(xiàn)實(shí) B 端產(chǎn)品 C 端化。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

5. 輕代碼化

輕代碼化是一種低代碼賦能無代碼的方式,彌補(bǔ)無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時(shí),又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發(fā)即可如搭積木般快速、靈活地創(chuàng)造屬于你的個(gè)性化管理系統(tǒng),輕松實(shí)現(xiàn)多元業(yè)務(wù)場景的數(shù)字化管理。

輕代碼化將功能進(jìn)行打包,升級成全局可以用的配置,技術(shù)人員配置好后,業(yè)務(wù)人員在應(yīng)用編輯時(shí)直接選擇使用模版,綁定對應(yīng)的變量即可使用。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

界面設(shè)計(jì)技巧

1. 人文氣息

為什么人加色塊的組合方式能流行起來?還是 B 端行業(yè)流行帶動(dòng)的。B 端講的更多的是企業(yè)對企業(yè)。企業(yè)對企業(yè)除了講行業(yè)解決方案外,還需要傳達(dá)公司的價(jià)值觀、使命、愿景。人加色塊的組合方式非常適合體現(xiàn)公司的企業(yè)文化。對于一家全球化的公司不同膚色的人物組合在一起,這種人文氣息和價(jià)值觀已經(jīng)就不言而喻了。

當(dāng)然企業(yè)也需要進(jìn)行營銷,抓人眼球。幾千年來的遺傳證明了,人的大腦對食物、性、動(dòng)的東西、人臉和眼睛、危險(xiǎn)的動(dòng)物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。

這種風(fēng)格更適合大公司,國內(nèi)的一些手機(jī)廠商 OPPO、VIVO 等也會通過手機(jī)+背景+人物來體現(xiàn)科技與人文的結(jié)合,而對于中小型公司產(chǎn)品差異化和行業(yè)解決方案展現(xiàn)應(yīng)該還是重中之重。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

2. 毛玻璃效果

毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的順應(yīng)當(dāng)下 UI 扁平化的設(shè)計(jì)趨勢。蘋果 Mac OS Big Sur 系統(tǒng)的圖標(biāo)、界面中運(yùn)用了大量毛玻璃和半透明元素,界面更扁平。至于 C4D 三維彩色玻璃的視頻教程可以在 B 站搜索“透光藝術(shù)-C4D 創(chuàng)建彩色玻璃的 4 個(gè)技法”,完全能滿足 UI 設(shè)計(jì)師。當(dāng)然還有一個(gè)好消息就是 Mac 用戶可以享有 OC 一年免費(fèi)的使用權(quán),具體安裝購買方法上某寶就可以輕松搞定,真香。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

3. 輕擬物

輕擬物這幾年一直流行,在 UI 設(shè)計(jì)中趨于穩(wěn)定的位置。從寫實(shí)到扁平再到輕擬物,其實(shí)是設(shè)計(jì)師們一路不斷探索的結(jié)果。本質(zhì)就是光影對形體產(chǎn)生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光(環(huán)境光)五個(gè)部分的處理。寫實(shí)三維的圖標(biāo)等設(shè)計(jì)更適用于簡潔的畫面中,扁平等設(shè)計(jì)更適用于復(fù)雜一點(diǎn)的界面中,比如 B 端產(chǎn)品界面中的功能圖標(biāo)。輕擬物可使用的范圍更廣,效果更佳。Sketch、Figma 軟件對于漸變、高光、投影、高斯模糊處理已經(jīng)非常簡單且出彩。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

4. 簡潔設(shè)計(jì)

簡潔設(shè)計(jì)遵從了密斯·凡德羅的“少即是多”的設(shè)計(jì)原則,在 B 端產(chǎn)品界面中更加需要簡潔設(shè)計(jì),我們最熟悉的 Sketch 軟件界面已經(jīng)是相當(dāng)?shù)暮啙嵙?。回到現(xiàn)實(shí)當(dāng)需求功能不斷增加,產(chǎn)品界面的編排如何取舍,如何保證界面的簡潔是設(shè)計(jì)師需要深度思考的問題?如何與上級溝通?該功能是否可做可不做?是否需要埋點(diǎn)用數(shù)據(jù)說話?如果只是一味競品有我們就需要有,功能不斷累加只會讓界面越來越重。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

5. 幾何圖形

幾何圖形和幾何插畫有異曲同工之妙,幾何圖形多為產(chǎn)品界面和宣傳內(nèi)容的抽象,產(chǎn)品界面的幾何圖形多為占位符形式,加上色彩和幾何色塊讓其成為一個(gè)整體。B 端產(chǎn)品視覺設(shè)計(jì) C 端化的進(jìn)程中,幾何圖形、幾何色彩不失為最好的突破口,相信今年Dribbble B 端產(chǎn)品的視覺設(shè)計(jì)一定會更上一個(gè)臺階。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

幾何圖形另一個(gè)場景化的地方就是品牌,作為一名 UI 設(shè)計(jì)師一定會經(jīng)歷從圖標(biāo)到幾何圖形到品牌設(shè)計(jì)的過程,品牌設(shè)計(jì)的技巧基本還是以幾何圖形為主,至于品牌的內(nèi)涵需要更深層次的解讀。掌握主流品牌設(shè)計(jì)的技巧對產(chǎn)品定位、品牌宣傳打下扎實(shí)的基礎(chǔ)。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

6. 暗黑設(shè)計(jì)

暗黑模式的設(shè)計(jì)是解決在微弱環(huán)境下內(nèi)容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設(shè)備時(shí)長增大,如何在夜晚這個(gè)特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞,提高在夜間使用的可讀性。

在設(shè)計(jì)暗黑主題時(shí),不能為了突顯視覺上的逼格,而去使用高飽和度鮮艷的色彩來突顯界面的品質(zhì)感。而應(yīng)該把舒適度、可讀性作為設(shè)計(jì)的衡量指標(biāo)。Material Design 給出了暗黑主題的設(shè)計(jì)準(zhǔn)則,即正文和背景之間的對比度應(yīng)至少為 15.8:1。按照此標(biāo)準(zhǔn)設(shè)計(jì),可讀性都還不錯(cuò)。這里介紹一個(gè)插件“Stark”(Figma、Sketch、XD、Chrome 插件)用來測試界面的對比度。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

7. 模塊化(組件化)

為什么叫模塊化,而不叫組件化,組件化更多的利用原子系統(tǒng)從原子、分子、組織、模版、頁面來快速的搭建界面,但在 B 端產(chǎn)品設(shè)計(jì)中基礎(chǔ)組件和業(yè)務(wù)組件的搭建是以提高工作效率為前提,是否有從 0 到 1 搭建 B 端產(chǎn)品組件的經(jīng)歷是設(shè)計(jì)師一生中最寶貴的經(jīng)驗(yàn)之一,它能提高設(shè)計(jì)師的系統(tǒng)化思維、邏輯思維和抽象思維能力。

產(chǎn)品模塊化設(shè)計(jì)就是將產(chǎn)品分成幾個(gè)部分,也就是幾個(gè)模塊,每一部分都是具有獨(dú)立功能,具有一致的連接接口和一致的輸入、輸出接口的單元,相同種類的模塊在產(chǎn)品族中可以重用和互換,相關(guān)模塊的排列組合就可以形成最終的產(chǎn)品。通過模塊的組合配置,就可以創(chuàng)建不同需求的產(chǎn)品,滿足客戶的定制需求 。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

8. 插畫

插畫作為設(shè)計(jì)的一大品類,不同的插畫師都有自己擅長的風(fēng)格,本質(zhì)是都有自己的個(gè)性,但是在產(chǎn)品設(shè)計(jì)中更多是需要共情、共性來講故事,表達(dá)產(chǎn)品理念和價(jià)值觀。這就需要插畫師去嘗試并探尋出適合互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)類的插畫風(fēng)格。設(shè)計(jì)的本質(zhì)是舊元素的重新組合,插畫不會過時(shí),而是需要結(jié)合當(dāng)下和產(chǎn)品找到最匹配的設(shè)計(jì)風(fēng)格。

9. 幾何插畫

幾何插畫算是插畫簡化的一種表現(xiàn)形式,人和物的形態(tài)不再寫實(shí),而是抽象成幾何圖形拼湊的感覺,同時(shí)保留人物形態(tài)的神韻。加上幾何色塊與人物交互形態(tài)的表現(xiàn),傳達(dá)出簡潔、科技的現(xiàn)代感。難點(diǎn)還是在人物形態(tài)的表現(xiàn)上,平時(shí)多練習(xí)練習(xí)速寫還是很有必要的。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

10. 線面插畫

線面插畫最近一兩年非常流行,準(zhǔn)確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成,用塊面表現(xiàn)人物形態(tài)時(shí)某些結(jié)構(gòu)會表現(xiàn)不出來,這時(shí)候用線條簡單勾勒后,結(jié)構(gòu)就會清晰明了。其次當(dāng)線面插畫運(yùn)用在界面上時(shí),可以打破界面純文字或組件化的機(jī)械和沉悶感。線面插畫的風(fēng)格提升畫面熱鬧感的同時(shí),還能保持界面的干凈整潔。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

動(dòng)效

1. 微交互

界面微交互動(dòng)效會讓用戶的體驗(yàn)更加精致到位。想要打造優(yōu)秀的產(chǎn)品設(shè)計(jì),微交互和動(dòng)效設(shè)計(jì)是繞不開的,UI 界面設(shè)計(jì)通過微交互反饋告知用戶當(dāng)前正在發(fā)生的事情,所處的狀態(tài)。細(xì)微的動(dòng)效更能調(diào)動(dòng)用戶情緒,取悅用戶。C 端產(chǎn)品微交互和動(dòng)效已經(jīng)很成熟了,一部分功勞來自 iOS 系統(tǒng)原生自帶的效果。B 端產(chǎn)品的微交互和動(dòng)效更多還是在學(xué)習(xí)海外產(chǎn)品,還需要給前端工程師灌輸微交互和動(dòng)效的設(shè)計(jì)價(jià)值,共同打造產(chǎn)品體驗(yàn)細(xì)節(jié)。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

2. Mg 動(dòng)畫

Mg 動(dòng)畫需要很好的節(jié)奏感、韻律,每一個(gè)場景動(dòng)畫都需要其中的元素進(jìn)行連接變化,讓轉(zhuǎn)場動(dòng)畫更加自然,MG 人物動(dòng)畫通過點(diǎn)線面的動(dòng)效變化讓畫面更加有趣、自然,通過粒子效果讓特定場景無限循環(huán)會讓人更加印象深刻。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

三維

1. 三維圖標(biāo)

MacOS Big Sur 系統(tǒng)圖標(biāo)的更新帶動(dòng)了三維圖標(biāo)的流行,三維圖標(biāo)的應(yīng)該場景還是需要有較大留白空間的界面,因?yàn)槿S圖標(biāo)太小后就看不到更多細(xì)節(jié)。三維圖標(biāo)感覺又回到了擬物化和扁平化哪個(gè)更好的問題上?設(shè)計(jì)師應(yīng)該保持開放多元的視角。設(shè)計(jì)本身也在不斷的演化融合,存在即合理。合適最重要,它們都會有適合自己的場景和設(shè)計(jì)價(jià)值。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

2. 輕三維

為什么輕三維在界面設(shè)計(jì)中占有一席之位?一個(gè)是設(shè)計(jì)師不斷追求差異化的產(chǎn)物。另一個(gè)是更好的表現(xiàn)內(nèi)容,并與用戶產(chǎn)生共鳴。輕三維的基礎(chǔ)模型都是來自手機(jī)界面中的各種元素,比如組件、開關(guān)、按鈕、占位符、圖表、幾何圖形、圖標(biāo)、進(jìn)度條等,這些都是用戶日常使用系統(tǒng)軟件常見的元素,通過簡單的幾何形體建模—打燈光—加材質(zhì)—渲染—PS調(diào)色。難度系數(shù)不大但效果很出彩。第一個(gè)出彩點(diǎn)是模型帶有厚度的倒角,結(jié)合燈光渲染的光澤是二維軟件不能比擬的。第二個(gè)出彩點(diǎn)就是材質(zhì)自由添加,特別是當(dāng)下流行的毛玻璃效果,玻璃材質(zhì)渲染效果更佳。第三個(gè)出彩點(diǎn)就是可以加局部燈光,局部的漸變色或環(huán)境光更加出彩。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

3. P4D(PS+C4D)

P4D 是 PS 加 C4D 的設(shè)計(jì)表現(xiàn)技法,也是視覺設(shè)計(jì)的最后一個(gè)環(huán)節(jié),通過 PS 對 C4D 的渲染圖片進(jìn)行調(diào)色,利用 PS 的調(diào)色技巧可以很好的解決 C4D 打燈光的瑕疵,還可以利用 PS 強(qiáng)大的合成功能,將渲染圖片與圖片素材進(jìn)行合成,來表現(xiàn)畫面的視覺度,當(dāng)然三維軟件比較難實(shí)現(xiàn)的水、粒子、煙花等效果,也可以通過 PS 的后期合成來實(shí)現(xiàn),這也是 P4D 的強(qiáng)大之處。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

4. 卡通 IP

卡通 IP 設(shè)計(jì)最近三四年技術(shù)的迭代已經(jīng)慢慢的走上成熟,卡通 IP 也從傳統(tǒng)的純 PS 手繪技法,轉(zhuǎn)到 C4D 建?!巧壎ā狹D衣服制作—OC渲染—PS(靜態(tài))/AE(動(dòng)態(tài))調(diào)色。

卡通 IP 火的本質(zhì)更適合做營銷,相比于品牌或 Slogan,卡通 IP 具有親和力和畫面感。隨著各種手辦行業(yè)大熱,受互聯(lián)網(wǎng)大廠影響下,卡通 IP 已經(jīng)是互聯(lián)網(wǎng) B 輪以上公司的標(biāo)配了。如果團(tuán)隊(duì)中沒有這樣能力的人,也可以通過繪制好二維,一套三維可以選擇外包完成。

對于 UI 設(shè)計(jì)師來說學(xué)習(xí)是有成本的,暫時(shí)并不是必備技能,如果喜歡完全可以學(xué)習(xí),從設(shè)計(jì)差異化的角度來看三維視覺確實(shí)有一定的競爭力。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

5. 三維動(dòng)畫

C4D 三維場景動(dòng)畫通過構(gòu)建實(shí)物和場景模擬生活中的現(xiàn)實(shí)場景,會讓用戶體驗(yàn)真實(shí)感,三維軟件制作動(dòng)效的最大優(yōu)勢是通過動(dòng)力學(xué)和表達(dá)式來模擬真實(shí)感,未來在 AR/VR 領(lǐng)域會有更好的發(fā)展。相對于界面動(dòng)效學(xué)習(xí)成本難度也相對較大。在三維動(dòng)畫中 C4D 軟件對于域、動(dòng)力學(xué)還是有一定的優(yōu)勢。

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

從 Dribbble 高贊的 828 個(gè)作品中,總結(jié)出 2022 設(shè)計(jì)趨勢

總結(jié)

上一次寫 Dribbble 流行趨勢還是兩年前了,通過兩年的沉淀對趨勢流行有了更深的認(rèn)知。十年的互聯(lián)網(wǎng)行業(yè)風(fēng)風(fēng)火火,隨著最近的互聯(lián)網(wǎng)裁員潮大家也慢慢的進(jìn)入到反思層,客觀的看待和理解這個(gè)真實(shí)的世界,曾經(jīng)的流行趨勢也需要慢慢的沉淀下來。

存在即合理,趨勢流行稍縱即逝,注定是不長久的,只有大浪淘沙歷史遺留下來的風(fēng)格才能更長久。但我們也不能不去關(guān)注,因?yàn)槟挠惺裁此^的創(chuàng)新,只不過是舊元素的重新組合,并符合當(dāng)下這個(gè)時(shí)代人的審美需求。香奈兒的“時(shí)尚易逝,風(fēng)格永存”大概就是這個(gè)意思吧。

文章來源:優(yōu)設(shè)   作者:水手

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


日歷

鏈接

個(gè)人資料

存檔