首頁

7個優(yōu)秀網頁設計趨勢!

博博

關注趨勢本質上就是關注未來可能存在的形態(tài)。很多營銷需求和優(yōu)秀設計趨勢是相互關聯的,兩者之間的關聯更像是一種動態(tài)的同步。

2022設計趨勢 優(yōu)秀網頁設計 網頁設計 網頁設計趨勢

很多時候趨勢并不一定是全新的東西,它們往往是服務于當下和未來的需求,有很多趨勢存在了一些年頭,它們在現在發(fā)揮著作用,但是在未來可能會發(fā)揮更大的效用。所以,當我們在查看這些設計趨勢的時候,需要注意,它們必須是服務于用戶,服務于品牌和企業(yè)。

2022設計趨勢 優(yōu)秀網頁設計 網頁設計 網頁設計趨勢

更多設計趨勢:


1、新極簡主義


的確,極簡主義一直在某種程度上流行,但是 2022 年出現的新極簡主義的浪潮,比起傳統(tǒng)的極簡主義設計更加在意用戶注意力的吸引。這種新極簡主義的設計會采用更加大膽、 生動、明亮的色彩來填補留白,這種設計使得設計保持簡約的同時,更加富有調性,在簡約的框架下制造一種別樣的華麗,營造令人亢奮的氛圍。

2022設計趨勢 優(yōu)秀網頁設計 網頁設計 網頁設計趨勢

干凈清晰、生動的新極簡主義風格在品牌推廣的過程中也更加受歡迎,大量的留白和跳脫的視覺焦點讓整個視覺更加抓人眼球,也使得品牌給人的感知更加新鮮獨特。

2022設計趨勢 優(yōu)秀網頁設計 網頁設計 網頁設計趨勢

新極簡主義風格,對比度在深色主題下得到了進一步的提升。

2022設計趨勢 優(yōu)秀網頁設計 網頁設計 網頁設計趨勢

這種設計并不意味著傳統(tǒng)的極簡主義已經被用戶拋棄,很多企業(yè)依然會青睞更加傳統(tǒng)的單色極簡主義設計,不過其中多少會增加一些明亮的色彩作為點綴。

2、新粗野主義


從 1950 年開始,粗野主義就是年輕化、反叛、反主流、標新立異的設計風格。在過去的幾十年當中,這種設計風格一直隨著時代的發(fā)展而自我迭代,新粗野主義更加強調創(chuàng)造力、 大膽前衛(wèi)的新奇元素,而這也正好符合很多品牌對于新奇性的追求,它可以瞬間抓住用戶的注意力。不過,這種風格的使用需要控制好程度,否則很容易失控。

粗野主義經久不衰的秘訣是什么?是未經打磨、粗糲而原始的素材,它讓觀看者忍不住想要改進它,這種未完成的原始感會在情感上吸引觀眾,這在營銷上是無價的優(yōu)勢。

2022設計趨勢 優(yōu)秀網頁設計 網頁設計 網頁設計趨勢

粗野主義在設計上并非看起來那么粗糙,相反它更加需要高度的專業(yè)性來控制它粗野的程度。設計師需要敏銳地感知到觀看者改進地欲望,讓設計粗野而不低級,原始而不拙劣。

2022設計趨勢 優(yōu)秀網頁設計 網頁設計 網頁設計趨勢

新粗野主義柔糅合了極簡主義和大膽地排版,它依賴看似粗野地視覺沖擊:高對比度、粗糲地陰影,撞色、 簡約的背景、不對稱的布局、 未經修飾的照片,新粗野主義偏好基礎款的加粗字體,跟注重可讀性而不是舒適所制造的視覺吸引力。

這個網站就是一個典型的例子:

3、強調參與感的交互


這一趨勢在絕大多數的趨勢排行榜當中,都占據首位。隨著技術的進步,用戶和數字媒體之間的交互正在增加,引人入勝的交互已經不僅僅停留在響應式設計當中,如今它已經開始關注心理和生理的邏輯,開始全方位地調動視覺、聽覺、 嗅覺、觸覺、味覺乃至于運動體感。

這種趨勢旨在幫助用戶體驗真實地感覺,在完成交互地基礎上,觸發(fā)用戶地情緒反應和生理反應,熱氣騰騰地餡餅視頻讓人垂涎,游戲中虛擬地對手讓人腎上腺素激增。

交互所制造地參與感,在某種程度上是實際地物理產品地替代物,用戶可以從不同角度來縮放查看產品,了解細節(jié),選擇尺寸,挑選顏色。

交互過程中,手指和屏幕之間地觸摸交互開始變得豐富,開始變得有意味,它成為了用戶和虛擬世界之間溝通地橋梁,開始有游戲地樂趣,有更具設計感地交互環(huán)節(jié)。用戶也可以根據自己地喜好,對界面進行更多樣的個性化處理。

具有參與感的交互是我們的未來。

4、關注人和敘事


2022 年是疫情開始后的第三年,隔離使得人們對于照片所呈現出的故事和情感,有著更為強烈的情緒反應。在極簡主義設計當中,富有表現力的人物照片是最為流行的元素之一,這類照片搭配上簡短的文字,簡練的口號,一些帶有宏大敘事特質的文字引用,時常能夠更好地營造出故事感。

2022設計趨勢 優(yōu)秀網頁設計 網頁設計 網頁設計趨勢

不用擔心主屏頁面太長沒人看,只要隨著用戶滾動,故事會隨之逐步展開,用戶可以在照片、 標題、視頻、動畫和文本地指引下,看到整個故事有步驟地呈現。

在這當中,富有表現力的人物照片是吸引用戶注意力的關鍵要素。

另外就是頁面的 Banner 的部分,強調主題和內容的標題文本,是用戶從屏幕上獲取的重要信息之一。

如今的用戶越來越偏好在詳細閱讀內容之前,快速瀏覽一下全局的做法,這也使得 Scrollytelling(滾動敘事:通過滾動觸發(fā)音頻、視頻、 動畫效果的一種技術)這種漸進式敘事方式,可以像電影一樣將故事呈現在用戶眼前。

2022設計趨勢 優(yōu)秀網頁設計 網頁設計 網頁設計趨勢

Scrollytelling 適合大量的內容呈現,比如對于公司和產品的描述,對于數據呈現或者認知要求較高的內容,它適合學習和記憶性內容的呈現。


5、3D圖形的運用


3D 圖形設計正在越來越流行,因為它確實是吸引用戶注意力的最主要的工具之一。3D 圖像無論有多么奇異,它本身都會被認為是有真實感的,明確的體積,精致的建模,所有的一切都令人著迷。很多時候,用戶停留在有3D元素的頁面上,是為了更細致的欣賞。

3D 圖形設計的趨勢從來都沒有減退,它正在進入更多的領域,甚至進入了品牌推廣的領域。3D 動畫圖標比過去更能吸引用戶的注意力。

2022設計趨勢 優(yōu)秀網頁設計 網頁設計 網頁設計趨勢


6、抽象插畫


我們通常說的抽象插畫,指的是帶有明確幾何特征的插畫,它們被廣泛地應用于網站和 APP,在社交媒體和包裝設計中也越來越多的存在。

2022設計趨勢 優(yōu)秀網頁設計 網頁設計 網頁設計趨勢

抽象插畫之所以會如此成功,是因為它們大多有著吸引人的生動色彩和良好對比度,視覺上的美感和極簡主義的風格特質,它們成為視覺的焦點,為整個設計提升視覺。

抽象插畫在品牌營銷場景下的應用也很多,它們在這個時候是貼合品牌推廣的訴求的:通過色彩和形式來吸引用戶來關注品牌的形象和名稱。

7、超大文本版式


這種趨勢的特別之處是其中的文本字體元素是完全獨立的。這些文本不僅僅是用來傳遞信息的,它們還充當著拉升頁面視覺效果的重要作用,它們結合動畫和交互,成為頁面中醒目的亮點。

超大字體的優(yōu)點在于,它和很多設計風格是相得益彰的,加粗的大字體在極簡主義風格的頁面上不會顯得突兀,在元素豐富的頁面上,同樣可以起到優(yōu)秀的點綴作用。這些文本內容可以和纖細和小尺寸的元素協(xié)同,而后者則襯托出它本身的醒目。

超大文本字體的另一個好處是有效地減少網頁上的圖像的使用,縮短加載時間,提升移動端的可用性。

這種設計元素最重要的,是選擇易讀且符合品牌調性的字體。


總結


這么多年來,我們看到來這么多的趨勢,很多趨勢是一以貫之持續(xù)出現,有的趨勢則如同流星一樣一閃而逝。好的趨勢不斷迭代升級,并且持續(xù)存在,但是最重要的,始終是那些選擇合理的方案,并且堅持改進設計,讓趨勢服務于終端的產品和用戶的設計師。

讓趨勢服務于你,不要盲目地追趨勢!



作者:陳子木



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



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

2022交互設計趨勢觀察|PC端 上

ui設計分享達人

隨著移動互聯網的發(fā)展,原本PC互聯網連接商業(yè)支付、購買商品、瀏覽信息流等的能力已經轉移到移動端,而PC互聯網更加專注于其他領域的優(yōu)勢:

  • 1、更大的屏幕能夠包含更多的信息,并獲得更深度的沉浸感受,如觀影、瀏覽網頁等。
  • 2、通過鼠標、鍵盤、觸控板、手繪板的連接,提供了更多的交互方式,能夠執(zhí)行更加繁雜的工作任務,如表格編輯、程序開發(fā)、視頻制作、文檔書寫、圖像制圖、3D制圖等。
  • 3、得益于顯卡、CPU、存儲、USB插槽、顯示器等的擴展性,在大型游戲、大型3D渲染、復雜制圖上相較于手機端依然有一定優(yōu)勢。
  • 4、從場景(辦公場景、娛樂場景)來看,PC端移動性較差,但同時基于該特點,PC端能夠更加專注當前任務。模塊化、多人協(xié)同、多端協(xié)同的發(fā)展正不斷地提升用戶的使用體驗。

下面是我觀察到的目前比較主流的交互設計點,與大家分享。分別是:

  • 一、無縫體驗
  • 二、交互更加高效
  • 三、更加智能化、降低門檻、降低門檻、降低門檻
  • 四、更加模塊化
  • 五、更加簡潔、甄別關鍵任務
  • 六、3D動效、大圖、帶來更深的沉浸感
  • 七、協(xié)同合作的興起

一、無縫體驗

典型的案例就是蘋果的Mac系統(tǒng)與Ios系統(tǒng)越發(fā)趨同,都采用了卡片化、模塊化,整個交互規(guī)范、視覺感受都一致以達到多端統(tǒng)一。同時信息可以自由流轉:比如在同一Apple賬號下,Mac與IOS中復制的信息可以進行同步粘貼。備忘錄、日歷、提醒事項、錄音中的信息進行流轉,在任何一臺Mac上登錄Apple賬號后都可以進行同步。

在國內,B站的網頁端與App端的體驗也逐步趨同,框架設計上更加卡片化與扁平化。信息流轉上,手機上暫停的視頻到網頁端繼續(xù)播放,實現了無縫切換。

淘寶首頁:從過去復雜的信息流導航變?yōu)楝F在更加簡潔的個性推薦卡片。整體體驗與淘寶手機端一致。


 二、交互更加高效

總結:精簡無關信息,關注最重要的核心任務,減少用戶跳出,沉浸式心流設計。

1、登錄方式更加高效

許多網頁接入騰訊、阿里的生態(tài),支持掃碼關注公眾號/手機驗證碼即可完成注冊。省去了用戶編輯個人信息、輸入郵箱、輸入密碼等復雜的交互流程。

2、減少頁面跳轉

心流式體驗設計是這幾年很熱門的詞,指的是通過優(yōu)化用戶體驗讓用戶能夠沉浸式地高效完成目標任務。這需要做到產品的交互習慣滿足用戶使用習慣,并且交互流程滿足用戶預期。過于頻繁的彈窗打擾和頁面跳轉的等待時間都會影響用戶進入心流。

比如,例如飛書審批,審批詳情不需要跳轉,點擊卡片即左側彈出詳情頁彈窗;讓用戶可以在同一個頁面即可瀏覽信息,不需要進行跳轉到新的頁面進行查看,方便用戶完成批量的審批任務。

再比如:阿里云,開通服務的時候不需要跳轉,而是在側邊彈出訂單彈窗,方便用戶操作。

3、交互組件的易用性迭代,不再局限于大彈窗

上面說到,頻繁的彈窗提醒也會影響用戶進入心流,用戶在對表單、畫布中的內容進行刪除的時候,如果使用全屏二次提醒彈窗,會感到創(chuàng)作過程被打斷。

釘釘宜搭:卡片畫布類產品,刪除操作時,不局限于大彈窗,而是用靠近按鈕的小彈窗,使鼠標的滑動路徑更短,操作更加簡便;并且在不過多打擾用戶的前提下,完成了目標操作。

三、更加智能化,降低門檻、降低門檻、降低門檻

復雜性守恒定律由Larry Tesler于1986年提出,也稱泰斯勒定律。指的是“任何系統(tǒng)都存在其固有的復雜性,且無法被減少,只能設法調整、平衡。我們要考慮的是,怎么樣更好地處理它,讓用戶簡單、高效地使用它”。

很多的中后臺系統(tǒng)中很多表單會存在大量的配置項,這些配置項是否可以簡化,讓平臺變得更簡單智能?大部分時候答案都是否定的,過度追求簡化往往容易弄巧成拙。功能邏輯易于解釋與理解才是更好的方案,當你試圖簡化降低復雜度,可能在其他地方埋了雷。

其中一個解決方案是將復雜度轉交給系統(tǒng),蘋果公司的黑盒理論與此互通;就是用戶不需要了解系統(tǒng)或功能背后的實現邏輯,只需要關注呈現在用戶眼前的交互界面即可。如今數據智能化處理正不斷發(fā)展,我們也看到了智能化在PC端領域的應用。

1、剪映

剪映相比于老牌視頻編輯軟件更加簡單,提供各種在線特效模板,來降低任務復雜度。相比傳統(tǒng)的PR、AE軟件需要本地存儲預設文件,或者手動編輯簡單了很多。用戶不需要知道背后的實現的技術原理,也不需要掌握過多的特效制作、調色技巧即可完成視頻的剪輯、調色工作。

2、釘釘宜搭畫布

推薦組件功能:用戶在進行流程搭建時,不需要從左側組件區(qū)拖拽組件,而是點擊連接線中間來添加組件。如果可以其實還可以更進一步,就是根據后臺數據分析創(chuàng)建目標流程需要的組件,向用戶主動推薦相關組件,以此來降低用戶的創(chuàng)建門檻。

四、更加模塊化

隨著傳統(tǒng)業(yè)務向互聯網轉型越發(fā)普遍,線下業(yè)務流程轉到線上的需求場景越來越多,一個單一的系統(tǒng)不能完全滿足所有的業(yè)務場景需求,由此需要一個更加靈活模塊化的系統(tǒng)來針對不同的應用場景來應用不同的產品架構。而該系統(tǒng)中的功能框架、交互組件又可以重復利用,于是更加靈活、模塊化、可自定義配置的系統(tǒng)后臺越發(fā)受到歡迎。

1、飛書、釘釘易搭

飛書、釘釘易搭內的審批流程、會議系統(tǒng)、工單系統(tǒng)都可以通過模塊化的組件進行高效搭建,不需要代碼即可像搭積木一樣實現用戶的自定義需求。

2、天貓優(yōu)品

阿里的天貓優(yōu)品電器店線下門店設計平臺,整理了線下門店所需的16個模塊(前臺、小家電中島、洗衣機、櫥窗、空調、吧臺等),通過線上三維化場景直接進行可視化設計,所見即所得,并且能夠模擬現場燈光效果,根據門店現場規(guī)格,直接在三維空間里修改,快速導出效果圖;非常高效地完成了其他門店的需求化定制。

五、更加簡潔,甄別關鍵任務,路徑縮得更短

1、抖音、快手網頁端

抖音網頁端的用戶體驗沿襲了手機App端的風格,用戶進入網頁的核心目的就是看短視頻打發(fā)時間,于是進入首頁即可看短視頻,不需要用戶手動選擇分類,并且手機端的用戶偏好通過用戶的賬號同步至網頁端,有了很順暢的用戶體驗。

相比快手網頁版,快手延續(xù)了常規(guī)視頻網站的交互方式,將視頻內容分為短視頻、直播、同城、長視頻、小劇場等多個類別,由用戶自主去選擇觀看的內容,內容雖然更加多元,但確實路徑過長,不夠直接。

2、淘寶、京東首頁

再舉個例子,新版的淘寶網頁端不再像個門戶網站導航,而是通過數據分析用戶喜好來主動推薦代替用戶自己選擇。用戶來淘寶網頁端,其實并不是買東西,大眾用戶已經習慣了在手機上進行支付,到了網頁端反而會不適應。用戶來到淘寶網頁端的更多目的就是逛,看有沒有自己想要的東西,遇到喜歡的,就點進去看了。于是新版淘寶通過個性化推薦把過去復雜的活動運營頁板塊、特價板塊、品類板塊替換掉了,讓用戶在網頁端獲得更好的“逛街”體驗。

而京東,在首頁做了復雜的流量分發(fā)設計,通過不同的頻道、不同的板塊將用戶引流至相關的專題頁面,再進行商品瀏覽。本質上來說,用戶來到淘寶、來到京東的目的都是因為閑,而淘寶的通過數據智能,大數據精準推薦用戶喜歡的商品,簡化了用戶的使用路徑,并且使整體頁面更加簡潔。

六、微動效、大圖、3D元素帶來更加深的視覺刺激

網頁的官網、首頁承擔著產品介紹、流量分發(fā)、增強品牌印象等的職責。我觀察到越來越多產品官網都開始采用3D元素、視頻背景、大圖元素、微動效來讓頁面呈現更加具有質感和動感。

1、3D元素

它是由Web3D技術的發(fā)展而興起,能夠給網頁Banner帶來更強的視覺吸引力,同時也強化了公司融合了AI技術的品牌印象。如法大大官網、騰訊云、阿里云的首頁Banner展示。法大大首頁Banner,鼠標滾輪向下滾動3D元素會相應產生變動,文案與元素一靜一動,對比明顯,也更易于用戶注意到文案信息。

2、大圖、視頻

大疆官網首屏采用了全畫幅大圖的形式展示熱門產品,下方的產品推薦頁自動播放宣傳視頻,提升了頁面的視覺沖擊力,展示了其科技屬性。

七、協(xié)同合作興起

疫情時期,線上辦公的需求和頻率激增,線上協(xié)作興起,許多辦公軟件都有了多人場景編輯功能。特別是對于復雜的項目,需要團隊成員共同完成,協(xié)同合作的功能越來越受歡迎。

比如我們熟悉的figma,逐漸取代了傳統(tǒng)UI設計軟件ps、sketch等的頭部地位,其中的項目協(xié)同功能更是廣受歡迎。只需要發(fā)送項目鏈接邀請成員即可進行項目協(xié)作,還支持多人標注、語音溝通,大大提升了工作效率。

許多辦公軟件也都上線了類似的功能,比如幕布可以通過設置權限、發(fā)送鏈接或二維碼來邀請協(xié)作者共同編輯文檔,為產品的使用場景提供了更多可能。

總結

曾鳴在《未來商業(yè)20講》里說:“未來的互聯網世界的兩大趨勢是數據智能、網絡效應”。 

這在PC端也得到了印證。淘寶網首頁、抖音首頁、嗶哩嗶哩網頁端將PC端與APP端的數據進行互通,并對用戶行為偏好數據進行分析,為用戶提供更加精準的信息流的同時,還使得頁面的交互更加簡單,視覺效果更加簡潔,過去依賴用戶自主選擇進行流量分發(fā)的形式將會越來越弱勢。

在工具類產品中,利用數據智能化可以將用戶操作上的復雜度轉移給系統(tǒng),從而降低用戶使用門檻,提升用戶體驗。與此同時,工具類平臺也越發(fā)靈活化化,通過模塊化設計來自定義搭建不同用戶的使用需求的產品,還能節(jié)省資源建設成本。

網絡效應的部分應用體現在用戶在使用工具類產品中,不再是孤單的個體,而是能通過線上協(xié)同,讓用戶與用戶之間能夠產生共同協(xié)作,共同交流,更加方便地完成任務。

作者:為美好而設計

轉載請注明:站酷

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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

2022 年 UXUI 設計趨勢

ui設計分享達人

2022 年即將過半,疫情在家的我們重新花一些時間,回顧今年最引為人注目的一些設計趨勢,有些已經變成現實,有些可能即將會發(fā)生。在過去的這十幾年里,全國的互聯網和移動互聯網行業(yè)蓬勃發(fā)展,引發(fā)了 UX / UI 行業(yè)的火爆,無論是在設計技術方面還是在設計實踐方面維持著快速發(fā)展狀態(tài)。設計探索受到了前所未有的關注。創(chuàng)新也永不停止,正在向各個方向延伸——有的是曇花一現,有的是重塑想象,有的卻循環(huán)往復。


下面我們將更詳細地向你探討一些 2022 年的設計趨勢。

超級大的字體排版



The Badass Project 搗蛋派計劃

過去幾年里,大字排版的趨勢越來越明顯,字體尺寸也在增加!接下來,字體更大且?guī)缀鯖]有圖像的時尚 英雄形象 網頁設計,將成為主流風格。

(英雄形象在網頁設計中是一個特定的網頁橫幅,通常是一個包含與內容相關的大圖像頁眉)

設計師和用戶都越來越習慣在登陸頁面前面和中心位置使用超大文字。無論是怪誕的無襯線字體還是現代奢華的襯線字體——這一趨勢就是在于越大越好。通過精心選擇的字體,網站可以做出比以往更大膽的宣傳,以吸引受眾的注意力并有效地信息傳達。



這些字體選擇通過 引人注目的動畫進一步生動起來。設計師正在實現通過鼠標移動或向下滾動頁面使排版移動并與用戶產生互動的創(chuàng)造性效果。以粗體、動畫和交互式排版為核心,許多網站也就不使用任何背景圖像,讓外觀變得干凈且精致。



MAFF

所以一定要試試這種趨勢:把文本尺寸放大,可以將其放置在一些圖像上,制作大尺寸的動態(tài)標題,讓用戶從中獲得樂趣。最重要的是,要勇于呈現大膽強烈視覺效果,從而可以立即吸引用戶的注意力。

案例:Medium 官網——https://medium.com/


復古風格回歸



Shakib - Sneakerbumb

在經歷了充滿不確定性和陰郁的兩年,我們學會了尋找和珍惜任何享受幸福的機會。我們大量獨處時光的花在了數字空間上,這一現象也不例外。



La puce à l’oreille

為了回應這一需求,設計師從 80 年代和 90 年代獲得了巨大的靈感;將色彩豐富、質感豐富、復古風格的主題與現代氣息結合起來,打造真實的外觀。鮮艷的色彩搭配柔和蠟筆肌理、古怪的排版、紋理豐富的背景、跨頁面網格的布局、非傳統(tǒng)的圖像和古怪的插圖,都可能會在接下來的一年吸引你的注意力。



Kristen Ryan for MakeReign

隨著這一切的發(fā)生,我們甚至可以說,在過去幾年里,每個人都學會了賦予自己一些自由的生活態(tài)度。這為我們提供了更多的實驗空間,當然也為設計和其他領域帶來了讓人愉快的成果。這就是說,設計師們覺得有必要從簡單和實用的用戶體驗轉向有趣、搞笑甚至愚蠢的交互。出人意料的是,讓別人微笑可能會是你的網站或 app 令人印象深刻的一種方式。

新野獸派設計



Blumenkopf

野獸派設計從 1950 年代的野獸派建筑運動中汲取靈感,延用其不修邊幅、毛糙粗狂的外觀形式,和故意做出的丑陋效果。就像在建筑中一樣,野蠻主義在網站中揭露和解構(甚至慶祝)這種媒介的底層結構和重要原則。原始、大膽和反動的本性使野獸派設計一直處于數字空間的邊緣,因為原始是互聯網的全部。然而,近年來,野獸派一直在緩慢而穩(wěn)定地復蘇,現在被一些人稱為新野獸派。



Caroselling


隨著互聯網上干凈、傳統(tǒng)的網站越來越多,個人網站變得難以脫穎而出。轉向野獸派,提供真誠、原始但獨特的視覺體驗,可能正是提升你下一個網站的方式。


無網格布局,強烈的調色板,重疊的元素,擁擠和幾乎混亂的設計只是你的野獸主義工具包的一部分。將它們與等寬和奇怪大小的排版結合起來,缺乏或極少的導航,這相當于沒有額外的“空間”或子頁面的“開放式版面”,你會得到一個引人注目的粗野派外觀。



Work with us


案例:阿里云設計官網——Alibaba Cloud Design - Not Design Just Future


當然,還有更多,但野獸派網頁設計的定義規(guī)則是沒有規(guī)則;它反對既定的規(guī)則和慣例。更重要的是,你需要用更強烈的意義價值和意圖來將你的野獸派杰作與另一個設計糟糕的網站區(qū)分開來。


本機桌面客戶端



Messenger


Figma、Todoist、Slack和 Messenger 等網站和移動應用程序都把時間和精力集中在桌面客戶端版本。



Todoist


越來越多的應用程序似乎也在效仿,因為研究表明,這樣用戶會感到 更舒適、更安全。用戶希望自己的應用程序遠離互聯網瀏覽器,遠離所有打開的標簽,回到指定的應用程序窗口,讓人感覺更寬敞、更專注。在使用這些應用程序時,不需要處理數分散注意力的標簽,這無疑是一種進步!此外,將通知直接發(fā)送到桌面,我們的通知管理也必然得到改善。



Figma

本地化用戶體驗



為阿拉伯語國家的谷歌搜索頁面布局


用戶研究團隊利用 人類心理學 領域的洞察,以及 可用性測試,已經能夠塑造界面,為用戶提供最大的滿意度和愉快的體驗感受。幾十年來,這一直是用戶體驗設計的核心。

隨著技術的快速進步,我們看到數字產品體驗的保真度有了空前的提高。這一發(fā)展也為不同用戶群體之間的細微差異提供了新的理解。年齡、文化、地理位置、日常習慣、社會結構(以及其他因素)的差異可能會導致人們對什么構成令人滿意用戶體驗的期望存在顯著的差異。因此,這些體驗可能需要類似的設計,但肯定不是相同的設計方法。


隨著技術和研究方法的到位,我們開始看到一款產品的多種變體同時推出,以滿足不同用戶的需求。隨著許多大品牌都在努力擴大他們的用戶群體,創(chuàng)造本地化的產品體驗可能會成為一種大趨勢——如果不是標準的話。


榮譽提名:包容性



NhuSW- Everyfit — Fitness for Everyone

包容性不僅是一種趨勢,也是一種運作模式;人類生存和共存是一個不可否認的重要方面。在日益全球化的復雜世界中,我們不斷意識到自己與其他個人或社群之間的差異。以同理心駕馭這些差異是我們的責任,并努力將所有文化、性別、性別、種族、能力和殘疾都有意義地適當地納入全球社會。



Spotify


隨著數字空間引領著世界的全球化,它也毫無疑問地成為我們包容性努力的前沿。人們總是希望品牌和公司采用更具 包容性的敘述 和語言,并向包容性的平臺、產品和服務 邁進。他們被鼓勵在圖像、語言和視覺語言中推動多樣化的表現,這樣做不僅僅是為了營銷收益,而是為了更大的意義和價值。


這些是我們在 2022 年會看到的趨勢和現象。記住,它們是為了提醒我們當前的總體設計趨勢??梢允褂盟鼈儊碇С趾褪跈嗄脑O計決策,但不要害怕挑戰(zhàn)它們,或用它們?yōu)槿藗儎?chuàng)造更多積極有效的體驗。


原文標題:UI/UX Design Trends of 2022

文章來源:Codeart

原創(chuàng)作者:Taras Bakusevych & Maja Mitrovikj

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

魏華的微信.png

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

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

手機及小程序界面設計之三:從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

博博

Dribbble 平臺對于互聯網 UI 界面設計有著舉足輕重的定位,對 Dribbble 設計的研究會讓我們看清設計的方向。

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


總結


從挑選出的 828 件作品中,排名前十的作品中 9 件為 B 端設計,另一件作品也是 B 端產品 C 端化的產物。其中:

  • B 端界面設計占比 476/828,57.4%;
  • C 端界面設計占比 180/828,21.7%;
  • 視頻動效作品占比 223/828,26.9%;

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


Dribbble 年度最佳作品


從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

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

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

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

最后來看下按鈕的設計,正常的按鈕要么文字加色塊,要么左圖標加右文字,它設計成左文本加右圖標,更加注重信息的可讀性和易讀性,也體現 B 端設計重功能和交互體驗,視覺點到為止的設計理念。

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

1. 易讀性(停頓感)

字體三原則:可讀性、易識性、易讀性。當你同時讀一篇文言文和一篇設計文章,肯定設計文章的內容可讀性更好。易識性是用在字體設計上,不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設計師都息息相關,因為我們都需要編排文本。當我們小時候寫作文時,不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感,更加適合用戶閱讀。

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

2. 曲線

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

除了突顯文本外,曲線還有視覺引導的作用。通過視覺引導讓用戶按照設計師編排的順序進行瀏覽界面。當然還有比這更科學的工具就是眼動儀測試,通過真實用戶眼睛瀏覽界面顯示對應的熱點圖。

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

3. 多彩高斯?jié)u變風

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

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢


B 端界面設計


1. 側邊欄 Sidebar

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

2. 儀表盤設計

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

3. 流程設計

復雜的事情簡單化,簡單的事情標準化,標準的事情流程化,流程的事情自動化。流程設計是每一個企業(yè)核心功能和業(yè)務,可自定義的管理流程系統(tǒng)搭建也是 B 端產品設計的難點,需要對業(yè)務高度抽象,讓每一個業(yè)務人員可自定義的流程才是好的流程設計。

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

4. B 端 C 化

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

5. 輕代碼化

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

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢


界面設計技巧


1. 人文氣息

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

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

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

2. 毛玻璃效果

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

3. 輕擬物

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

4. 簡潔設計

簡潔設計遵從了密斯·凡德羅的“少即是多”的設計原則,在 B 端產品界面中更加需要簡潔設計,我們最熟悉的 Sketch 軟件界面已經是相當的簡潔了?;氐浆F實當需求功能不斷增加,產品界面的編排如何取舍,如何保證界面的簡潔是設計師需要深度思考的問題?如何與上級溝通?該功能是否可做可不做?是否需要埋點用數據說話?如果只是一味競品有我們就需要有,功能不斷累加只會讓界面越來越重。

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

5. 幾何圖形

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

幾何圖形另一個場景化的地方就是品牌,作為一名 UI 設計師一定會經歷從圖標到幾何圖形到品牌設計的過程,品牌設計的技巧基本還是以幾何圖形為主,至于品牌的內涵需要更深層次的解讀。掌握主流品牌設計的技巧對產品定位、品牌宣傳打下扎實的基礎。

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

6. 暗黑設計

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

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


從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

7. 模塊化(組件化)

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

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


從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

8. 插畫

插畫作為設計的一大品類,不同的插畫師都有自己擅長的風格,本質是都有自己的個性,但是在產品設計中更多是需要共情、共性來講故事,表達產品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯網產品設計類的插畫風格。設計的本質是舊元素的重新組合,插畫不會過時,而是需要結合當下和產品找到最匹配的設計風格。

9. 幾何插畫

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

10. 線面插畫

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢


動效


1. 微交互

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

2. Mg 動畫

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢


三維


1. 三維圖標

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

2. 輕三維

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


從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

3. P4D(PS+C4D)

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

4. 卡通 IP

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

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

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


從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

5. 三維動畫

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢


總結


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

存在即合理,趨勢流行稍縱即逝,注定是不長久的,只有大浪淘沙歷史遺留下來的風格才能更長久。但我們也不能不去關注,因為哪有什么所謂的創(chuàng)新,只不過是舊元素的重新組合,并符合當下這個時代人的審美需求。香奈兒的“時尚易逝,風格永存”大概就是這個意思吧。

6000 多字的設計流行趨勢,希望能幫助設計師度過互聯網裁員的寒春。最后希望以后每年堅持輸出設計流行趨勢。為設計行業(yè)奉獻微薄之力。

作者:水手

轉載請注明:優(yōu)設網

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

魏華的微信.png

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

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



更多精彩文章:

手機及小程序界面設計之一:讓設計更有說服力的20條經典原則:菲茨定律

手機及小程序界面設計之六:讓設計更有說服力的20條經典原則:菲茨定律

手機及小程序界面設計之八:如何適配iPhone X?來看滴滴出行的實戰(zhàn)案例復盤!








關于設計趨勢那些事

純純

團隊按領域分組收集素材



我們認為影響設計趨勢的因素主要有以下三個:


后疫情時代的影響

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


00 后成長為新主力軍

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


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

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



概念闡述

「 酸性平面」風格融合「Y2K」美學的未來感,形成了獨特的「未來酸性金屬風」,典型特征有:


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


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


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



應用場景

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


相關案例

The Future Vision of Microsoft 365 宣傳視頻



概念闡述

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


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



應用場景

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



相關案例

Louis Vuitton × League of Legends Collection



概念闡述

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



應用場景

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



相關案例

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



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


OPPO × EVA 定制版手機 OPPO Ace2



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


Travis Scott 在網絡游戲《堡壘之夜》內舉辦虛擬演唱會




Photographed by Sean Thomas, Vogue, January 2020



概念闡述

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



應用場景

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



相關案例:

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




還原自然界中的真實材質成為了新的設計靈感,被應用到各種設計中。



Vivo OriginOs 系統(tǒng)通過行為壁紙系統(tǒng)將常用的系統(tǒng)功能和展現真實自然場景的動態(tài)壁紙進行聯動。 


Vivo OriginOs



山水 Mountains & Rivers by Particle (Gao Yang)



概念闡述

近年,國人的文化自信逐漸增強,國家擴大內需、擴大消費的政策導向為國內消費品品牌帶來了巨大的機會。「中國設計」的標簽已經成為新一代的時尚潮流,帶有中國本土個性、體現中式美學的設計受到更多品牌的青睞。



應用場景

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


隨著中國的國際影響力進一步擴大,國際品牌也會提高對中國市場與文化的關注,在設計上融入更多本土元素。



相關案例

各品類的國產品牌在包裝或產品設計上通過對中國元素的運用來塑造具有特色的國風產品。



可口可樂中國與漢字文化推廣機構「好字在」和方正字庫聯合推出的這款字體,反映了可口可樂對中國文化的深入理解和對本地化運營的關注度。


可口可樂聯合推出的中文字體「在乎體」


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


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


Microsoft Haptic PIVOT 微軟腕帶觸覺設備



概念闡述

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



應用場景

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



相關案例

任天堂在健身環(huán) Ring-Con 內加入的力學傳感器實現了對力量(張力、拉力、壓力等)的監(jiān)測,并利用 Joy-con 震動來對用戶動作的標準性進行反饋提示。


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



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


Haptic PIVOT 使用演示



索尼推出配備了音圈馬達的 PS5 DualSense 無線手柄,扳機鍵內增加了一個由電機驅動的齒輪,通過震動模擬出槍支的后坐力、彈簧的彈力、繩索的拉力等物理效果。


PS5 DualSense 無線手柄使用演示

Flight Booking AR application by Bala GN



概念闡述

現實生活中,人與人、人與物接觸產生的實體服務稱為線下服務,由網絡等技術支撐的人與硬件設備交互的服務稱為線上服務。在硬件設備、網絡技術成熟的當今社會,線下服務向線上服務遷移的過程中融入了更多 AR/VR 等虛擬服務,也帶來更多新的設計行為和交互方式。



應用場景

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



相關案例

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


Gucci APP 虛擬試表



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


中央美術學院 云端美院



香港理工大學 polyudesignshow



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



Balenciaga:《后世:明日世界》



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


Tempo Studio:家庭智能健身設備



POPMART 泡泡瑪特



概念闡述

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



應用場景

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



相關案例

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


網易云音樂的「抱一抱」動效



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


Switch:《集合啦!動物森友會》



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


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



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


Disney · Pixar《心靈奇旅》


OceanPlastic 廢棄塑料重造



概念闡述

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



應用場景

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



相關案例

運動品牌 Adidas 與 Nike 都推出了由回收廢料制作的充滿設計感的產品,在宣傳品牌環(huán)保意識的同時也引領了再生產品的潮流。


adidas 與 Parley Ocean 合作推出由海洋回收廢料制作的聯名產品


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


Nike 將生產車間加工過程中產生的邊角料轉化為產品設計的主要材料



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


TRASHAUS 真垃圾再生手機殼


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


F601 MALCOLM


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


結語

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


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


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




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

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

ui設計分享達人

Dribbble 平臺對于互聯網 UI 界面設計有著舉足輕重的定位,對 Dribbble 設計的研究會讓我們看清設計的方向。

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

總結

從挑選出的 828 件作品中,排名前十的作品中 9 件為 B 端設計,另一件作品也是 B 端產品 C 端化的產物。其中:

  • B 端界面設計占比 476/828,57.4%;
  • C 端界面設計占比 180/828,21.7%;
  • 視頻動效作品占比 223/828,26.9%;

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

Dribbble 年度最佳作品

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

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

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

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

最后來看下按鈕的設計,正常的按鈕要么文字加色塊,要么左圖標加右文字,它設計成左文本加右圖標,更加注重信息的可讀性和易讀性,也體現 B 端設計重功能和交互體驗,視覺點到為止的設計理念。

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

1. 易讀性(停頓感)

字體三原則:可讀性、易識性、易讀性。當你同時讀一篇文言文和一篇設計文章,肯定設計文章的內容可讀性更好。易識性是用在字體設計上,不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設計師都息息相關,因為我們都需要編排文本。當我們小時候寫作文時,不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感,更加適合用戶閱讀。

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

2. 曲線

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

除了突顯文本外,曲線還有視覺引導的作用。通過視覺引導讓用戶按照設計師編排的順序進行瀏覽界面。當然還有比這更科學的工具就是眼動儀測試,通過真實用戶眼睛瀏覽界面顯示對應的熱點圖。

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

3. 多彩高斯?jié)u變風

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

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

B 端界面設計

1. 側邊欄 Sidebar

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

2. 儀表盤設計

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

3. 流程設計

復雜的事情簡單化,簡單的事情標準化,標準的事情流程化,流程的事情自動化。流程設計是每一個企業(yè)核心功能和業(yè)務,可自定義的管理流程系統(tǒng)搭建也是 B 端產品設計的難點,需要對業(yè)務高度抽象,讓每一個業(yè)務人員可自定義的流程才是好的流程設計。

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

4. B 端 C 化

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

5. 輕代碼化

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

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

界面設計技巧

1. 人文氣息

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

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

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

2. 毛玻璃效果

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

3. 輕擬物

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

4. 簡潔設計

簡潔設計遵從了密斯·凡德羅的“少即是多”的設計原則,在 B 端產品界面中更加需要簡潔設計,我們最熟悉的 Sketch 軟件界面已經是相當的簡潔了?;氐浆F實當需求功能不斷增加,產品界面的編排如何取舍,如何保證界面的簡潔是設計師需要深度思考的問題?如何與上級溝通?該功能是否可做可不做?是否需要埋點用數據說話?如果只是一味競品有我們就需要有,功能不斷累加只會讓界面越來越重。

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

5. 幾何圖形

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

幾何圖形另一個場景化的地方就是品牌,作為一名 UI 設計師一定會經歷從圖標到幾何圖形到品牌設計的過程,品牌設計的技巧基本還是以幾何圖形為主,至于品牌的內涵需要更深層次的解讀。掌握主流品牌設計的技巧對產品定位、品牌宣傳打下扎實的基礎。

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

6. 暗黑設計

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

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

7. 模塊化(組件化)

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

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

8. 插畫

插畫作為設計的一大品類,不同的插畫師都有自己擅長的風格,本質是都有自己的個性,但是在產品設計中更多是需要共情、共性來講故事,表達產品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯網產品設計類的插畫風格。設計的本質是舊元素的重新組合,插畫不會過時,而是需要結合當下和產品找到最匹配的設計風格。

9. 幾何插畫

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

10. 線面插畫

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

動效

1. 微交互

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

2. Mg 動畫

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

三維

1. 三維圖標

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

2. 輕三維

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

3. P4D(PS+C4D)

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

4. 卡通 IP

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

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

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

5. 三維動畫

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

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

總結

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

存在即合理,趨勢流行稍縱即逝,注定是不長久的,只有大浪淘沙歷史遺留下來的風格才能更長久。但我們也不能不去關注,因為哪有什么所謂的創(chuàng)新,只不過是舊元素的重新組合,并符合當下這個時代人的審美需求。香奈兒的“時尚易逝,風格永存”大概就是這個意思吧。

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

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

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


設計趨勢ISUX報告-數字內容營銷篇

ui設計分享達人

背景

數字營銷是指借助于互聯網營銷方式,幫助業(yè)務方和消費者建立觸達渠道,實現業(yè)務的商業(yè)目標達成。按業(yè)務類型分為線下產品的數字廣告和數字內容(APP、影音、動漫、游戲等)線上推廣分發(fā)。本文主要聚焦在數字內容線上推廣分發(fā)上,嘗試從用戶獲取渠道、體驗方式、內容感知、新技術帶來的變化等幾個方面,為相關從業(yè)者梳理數字內容流行的營銷方式,以期提供一些啟發(fā)和借鑒。


近年來用戶內容消費呈碎片化、視頻化,多元化趨勢。短視頻內容強勢崛起,這種方式可以讓用戶更輕松、更深度消費內容。在各類營銷類型中,短視頻逐漸成為推廣的重要方式,不僅在實體產品電商領域,日益成為重要的銷售方式,在數字產品的推廣上,也發(fā)揮越來越重要的作用。漫威在短視頻平臺注冊虛構報社賬號宣傳《蜘蛛俠:英雄無歸》電影,獲得海量關注和點贊。


說唱歌手Lil Nas X用《Old Town Road》做BGM在短視頻平臺發(fā)起的牛仔挑戰(zhàn)(#Yeehaw challenge),使這首歌曲通過短視頻成為了全球爆款。這首歌在美國地區(qū)的流媒體播放量超過了25億次,在Billboard排行榜保持了19周的冠軍。



美國創(chuàng)作型歌手兼唱片制作人 Charlie Puth 嘗試在短視頻平臺上發(fā)布一些旋律,發(fā)起了標簽挑戰(zhàn) #writethelyrics,邀請粉絲們?yōu)樾商钤~,這個標簽累計視頻觀看量達到38億次。



在游戲領域,短視頻/直播內容也正成為分發(fā)重要形式。短視頻巨頭已深入游戲腹地,2020年移動游戲用戶與短視頻用戶重合率達82.5%,近六成移動游戲用戶會用短視頻主動搜索游戲內容。短視頻在和游戲內容結合上有先天優(yōu)勢,消費門檻低,體驗更沉浸,同時也可以快速獲取其他玩家的感受。除此外,對于游戲制作和發(fā)行方來說,這里也是通過內容創(chuàng)作獲取用戶的良好渠道。



游戲依托賽事直播、KOL直播,聚集了大量高質玩家,相較于傳統(tǒng)分發(fā)方式,直播具備互動性、真實性、及時性等三大特點。KOL主播可以將游戲最直觀的展現在玩家面前,更可以利用高人氣迅速提升游戲熱度。Facebook gaming現在采用直播feeds的方式進行游戲的推廣,使玩家對游戲體驗感受更直觀。




黑客帝國4在官網為用戶提供了一段可交互的宣傳視頻,根據用戶的選擇不同,觸發(fā)不同類型結局。讓用戶更有代入感和掌控感。有種“我”開啟了一段故事,也更容易帶來體驗上的驚喜感。



洛杉磯流行藝術家 BIIANCO 為其單曲That’s what friends are for制作了互動音樂視頻,以互動游戲的方式讓觀眾進行多次選擇,探索屬于自己的故事。



在游戲類內容宣傳上,為讓玩家更直接、更低成本的體驗到游戲的玩法和特點。借助2D、3D以及交互視頻素材高度還原游戲的真實場景,音效、視覺、玩法互動與游戲本身無異,將原有的游戲體驗前置,讓用戶在短暫的廣告展示時間中快速明白游戲的核心機制。




2021年音頻內容呈爆炸式增長,播客這種很早就有的形式,在今年煥發(fā)了蓬勃生機。因為疫情原因,音頻內容呈爆發(fā)式增長,相較于其他數字內容表達方式,音頻覆蓋了更多互動場景,用戶可以在通勤、運動和打掃房子的時候在車里播放。


21年初熱播的《流金歲月》不僅霸屏熱播熱榜,更首次將營銷可能性轉化到“看不見的”聲音領域,最終聯手十多家播客參與多方面討論了女性、友誼、成長等話題,精細化傳播,也讓更多電臺參與創(chuàng)作討論,最終“我的「流金歲月」”主題內容實現了全平臺百萬級的總播放量。


Beats 就聯合播客《大內密談》推出了一檔名為「一首歌的誕生」的系列節(jié)目,主播相征會在節(jié)目中和各位音樂聊一聊他們的某一首歌從譜曲、寫詞到錄制的全過程。2021年,《大內密談》連續(xù)7年獲得Apple Podcasts年度精選播,擁有400多萬忠實聽眾,單期節(jié)目收聽量超過400萬次。




影音、游戲聯動明星、品牌、知名IP、傳統(tǒng)文化產業(yè)、線下活動等等具有影響力的合作方進行戰(zhàn)略合作,擴大雙方影響力。如英雄聯盟和LV的跨界聯動,這款由LV設計的史上最昂貴、最奢侈的游戲皮膚,還未推出就捕獲了無數LOL玩家的心,在讓玩家興奮不已之余,還引發(fā)了“這款皮膚究竟有多貴”的討論。



自2017年騰訊和敦煌研究院達成戰(zhàn)略合作以來,王者榮耀飛天及九色鹿主題皮膚、QQ音樂“古樂重聲”音樂會、敦煌詩巾、“云游敦煌”小程序和敦煌動畫劇陸續(xù)推出。三年間,累計超過2.5億人次參與了“數字供養(yǎng)人”,超過4000萬年輕人在王者榮耀中遇見了敦煌飛天,“云游敦煌”小程序目前已接待超過3700萬人次線上游客,40多萬用戶設計了自己專屬的敦煌絲巾,24萬用戶在騰訊公益平臺為敦煌石窟保護項目捐款,15萬用戶在線用聲音演繹敦煌動畫劇。



2021年底熱劇《風起洛陽》聯動洛陽市文化單位正式發(fā)布“華夏古城宇宙”的全新概念,并宣布“華夏古城宇宙” 首發(fā)洛陽IP中的劇集《風起洛陽》、紀錄片《神都洛陽》、動畫片《風起洛陽之神機少年》,帶領觀眾開啟探索華夏文明的旅程。




1)內容二創(chuàng),形成粉絲傳播文化

影視劇宣發(fā)期,通過話題互動或設置傳播內容,讓用戶創(chuàng)作內容進行傳播,如《魷魚游戲》引發(fā)自發(fā)傳播的摳糖挑戰(zhàn)也引起更多受眾注意激發(fā)用戶觀看。



游戲也會在上線后逐步積攢口碑和玩家數量,官方在制作游戲時和后期推廣上會提供一些方便傳播的核心素材,由游戲粉絲玩家群體自發(fā)進行二次創(chuàng)作產生的UGC內容,也會引發(fā)大眾關注。很多玩家會圍繞游戲內容創(chuàng)作出新奇舞蹈、仿妝、COS、攻略、同人剪輯、漫畫等,提供廣泛的話題和討論度。例如《CS:GO》,它通過一條開箱視頻引爆短視頻平臺,打破了消費用戶的圈層,從游戲用戶到泛娛樂用戶,最終令游戲內箱子的價格從0.8元漲至2元,極大地促進了消費。



2)打造慶典活動,激發(fā)用戶共情

通過大型慶典活動,讓用戶共情,形成記憶共享,將志同道合的人聚在一起,形成文化傳播。如英雄聯盟每年都會舉辦盛大的全球總決賽開幕慶典,并加入一些讓人印象深刻的游戲元素。




相較于通過中心化推薦方式向用戶展示廣告內容,新的趨勢是廣告主利用用戶社交關系鏈,在facebook、微信、QQ等社交平臺進行分享傳播。通過社交流量的傳播內容,讓受眾覺得更貼近自己,也更可信。相較于其他數字內容,在游戲分發(fā)上私域流量日益重要,很多頭部社交渠道在嘗試如何更好的通過私域流量帶動游戲分發(fā)。

1)通過社交動態(tài)通知觸達

Facebook游戲智能助手會在玩家的對手參與游戲后,通過Facebook與Messenger提示對方繼續(xù)玩游戲,這種方式可以吸引玩家快速回歸玩過的游戲;同時在首頁好友動態(tài)中可以看到好友的游戲邀請動態(tài)和相關戰(zhàn)績,對游戲有較高的流量傳播;游戲的高活玩家也可以通過邀請好友對戰(zhàn)或分享游戲活動等方式進行裂變傳播;



2)線上社區(qū)深度觸達

Discord建立起玩家之間互推、互鑒,玩家與開發(fā)者間直接互動的社區(qū)平臺;社區(qū)內的種子玩家可以更直接地與開發(fā)者接觸,讓自己的聲音被聽到;同時他們也是優(yōu)質的渠道傳播者,將優(yōu)質的討論內容、游戲動態(tài)進行分享,讓渠道轉化效率更高;



同時Discord可以創(chuàng)建「臨時」游戲語音頻道,可以讓其他成員看到頻道內成員正在玩的游戲;玩家也可以將游戲實況傳輸到服務器,在語音頻道邀請朋友共同觀看自己的游戲“現場直播”,讓玩家的朋友在沙發(fā)上重現游戲的感覺;



3)利用核心玩家作為推廣資源觸達

游戲開發(fā)者利用多圈層KOL的優(yōu)勢,引導他們產出與游戲相關的UGC,OGC內容,形成話題熱議,從而觸達到目標用戶,這種方式可以增強游戲影響力,甚至產生出圈的效果;比如Youtube通過扶持優(yōu)秀的內容創(chuàng)作者,通過他們的粉絲圈或者社交關系進行游戲推廣。



2021年初爆火出圈的社交產品clubhouse,也是在早起利用名人明星和圈子的力量,通過采用邀請制的方式吸引了高質量的種子用戶,帶動app的影響力,提升其在世界產品和科技圈的熱度。




相較于傳統(tǒng)的機器人客服,機器人進化出了新能力,在數字內容推廣上展現新前景。在Discord中,由第三方機構提供各種數字內容服務能力的機器人,如將Patchbot機器人添加到頻道后,可以將用戶喜歡的游戲資訊/功能更新及時推送到頻道中,讓玩家獲取信息更及時;



在Discord和Telegram聊天群組中,有很多提供數字產品服務能力的機器人,為群中小伙伴定期推送和主動獲取影音資源。




隨著元宇宙、區(qū)塊鏈技術的火爆,數字內容也展現了不同以往的展示和推廣方式。2021作為元宇宙爆發(fā)年,向我們展示了未來的一角。通過虛實結合的互動體驗,數字營銷不再局限于單一的文字/畫面,而是通過多體感的交互,讓用戶全方位的體驗數字內容,為獵奇的互聯網用戶打開了數字營銷新篇章。


1)虛擬偶像成數字內容推廣重要方式

2021年,隨著元宇宙基建的推進和爆款案例的頻出,虛擬偶像也迎來了新一波發(fā)展高潮,引得不少音樂公司紛紛入局。19歲的加州虛擬網紅Lil Miquela代表了Z時代的社群偶像,她在instagram,youtube,discord等平臺分享自己的時尚穿搭,與名人或朋友的合影及生活想法,甚至她還在Spotify發(fā)布了自己的15首單曲。打造了跨平臺的Vmodel身份。



韓國虛擬模特Rozy,不僅在社交網絡分享自己的穿搭生活,還如同常人一樣,營造看電影的真實體驗,她的代言產品不僅涉及線下美妝,還為線上購物網站,電影等數字產品內容做宣傳推廣;




2)虛擬演唱會打造多感官音樂體驗

賈斯汀 比伯舉行了一場由真實動作捕捉的線上虛擬演唱會,比伯在演唱《Peaches》、《Hold On》等人氣單曲的同時,觀看直播的觀眾可以根據場景與比伯進行線上互動:場景切換到田野時,觀眾可以點擊不同顏色的花朵,讓田野生出花朵形狀的流光;



切換到街頭場景時,觀眾可以把聊天內容或愛心發(fā)送到比伯周圍;



這種虛擬演唱會的形式將全球的粉絲連接在一起,在虛擬場地形成萬人互動的沉浸式音樂體驗。寶可夢25周年,聯合說唱歌手Post Malone推出了自己的虛擬音樂會,馬龍在這次虛擬演唱中共演唱了《Psycho》、《Circles》、《Only Wanna Be With You》、《Congratulations》四首單曲,在虛擬世界中與知名寶可夢一起完成表演;也為新發(fā)售的《寶可夢:晶燦鉆石/明亮珍珠》起到宣傳作用;



3)利用虛擬社區(qū)打造游戲/影視宣發(fā)新方式

Decentraland提供了去中心化的社交世界,用戶可以創(chuàng)建自己的虛擬形象,在不同的游戲場館進行切換,為游戲品牌起到了更好的宣傳作用;同時Dcentraland提供了虛擬土地售賣,用戶或開發(fā)者購買土地后,通過制作3D場景,發(fā)布自己設計的各種產品或服務,這些場景也可以使用VR終端來體驗,用戶或開發(fā)者可以發(fā)揮無限的想象力進行宣傳創(chuàng)作。



韓國劇集《魷魚游戲》熱播后,劇集中的游戲關卡在羅布樂思公司的游戲社區(qū)被“1:1”還原,其中的游戲“1、2、3”木頭人進入推薦排行榜,吸引了眾多觀眾成為玩家,也讓很多玩家去奈飛追劇,擴大了該影視資源的影響力。



4)區(qū)塊鏈及NFT技術賦予數字內容流通新方式

伴隨著區(qū)塊鏈技術的發(fā)發(fā)展,有的游戲分發(fā)公司也在嘗試通過區(qū)塊鏈技術進行游戲發(fā)行。如Ultra試圖打造一個基于區(qū)塊鏈的游戲發(fā)行平臺,通過通證經濟實現更加合理的利益分配。對游戲玩家來說,可以在下載完成前就盡情享受新買的游戲,并在玩游戲時繼續(xù)下載缺失的數據。玩家可以自主選擇是否允許游戲內彈出廣告,觀看廣告可獲得通證獎勵,邀請朋友、參與測試和策劃游戲也可獲得相應通證獎勵。因此,游戲玩家既可以即時玩獨家游戲,又可以通過多種方式賺取通證獎勵。



NFT實現了虛擬物品的資產化與流通化,賦予了數字藏品/游戲/影音等內容的虛擬價值;藝術品數字資產化將拓展影視相關內容的產品鏈,因被賦予獨特的價值,使得其可以通過交易完成變現。2021年10月11日,王家衛(wèi)首個NFT作品《花樣年華——一剎那》以428.4萬港元價格成交,同時創(chuàng)下王家衛(wèi)個人作品與亞洲電影NFT作品拍賣價格新高。



總結

伴隨著用戶數字內容消費習慣的變化,數字內容呈現方式、渠道和分發(fā)方式都在發(fā)生變化??梢钥吹皆谖磥?,數字內容制作方和發(fā)行方,需要為用戶提供更多元的方式深度進行體驗,同時承載數字內容的平臺也逐步由傳統(tǒng)的中心化渠道向私域流量轉移。作為數字內容發(fā)行方,如何有效且長線輸出高品質內容,構建內容壁壘,探索更有吸引力的表現形式、縮短和用戶的溝通渠道,是未來需要深入思考的。

文章來源:站酷 作者:騰訊ISUX

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

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

2022年你需要抓住的 8 個UI/UX設計趨勢

純純

2022 年的 UI/UX 設計趨勢是什么呢?在本文中,我們將發(fā)現:

  1. 3D 視覺設計師的內卷將會越來越嚴重
  2. 數據可視化的工作將變得越來越重要
  3. 服務的移動化還需要做出更多努力
  4. scrollytelling 技術會越來越流行

滾動已死,滾動敘事興起

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

《紐約時報》是第一批在他們的文章《雪花飄落》中使用滾動敘事手法的機構之一。

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

2022 年,Scrollytelling 將會出現在你看到的每一個流行網站上。

另一方面,scrolllytelling 讓用戶真正去閱讀內容。你可以用動態(tài)文本讓他們產生興趣,比如谷歌的網站。他們的團隊知道如何讓信息看起來更好:

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

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

所以,最好的網站不可能在 2 天內建成,需要更多的時間去打磨。

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

IAmBinadam 令人驚艷的敘述設計

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

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

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

用戶喜歡看數據,數據可視化越來越被重視

如何在 2022 年做出一個還不錯的企業(yè)網站?你不會想告訴用戶你是“XX 領域公認的領導者,該領域最好的之一”。這種標準的廣告表達并不傳達任何有價值的信息。

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

不同級別的數據具有不同的大小,這樣用戶知道應該先從哪里查看

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

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

還有一種現象叫做“新冠后遺癥”。這是 Covid 對公司及其員工的長期影響。根據英國國家統(tǒng)計局的數據,2018 年,壓力和焦慮的平均得分約為 2.7/10。自新冠疫情發(fā)生以來,得分已升至 4.0/10,很少低于這一水平。同樣因為大流行,在過去兩年里工作量增加了 4 個小時。

人們壓力太大,卷的太辛苦,以至于不愿去看復雜的數據。

設計師做好數據可視化,以保持人們的注意力。記住,復雜的信息通常被忽略,因為讀者試圖節(jié)省他們的時間,更有可能使用滾動按鈕。

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

Illustration by Mona Chalabi

以下是我們推薦的一些表示數據的方式

  1. 圖表和曲線圖
  2. 插圖
  3. 靜態(tài)信息圖
  4. 互動信息圖

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

Illustration by Ink Factory

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

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

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

Graph by Hootsuite

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

Graph by Hootsuite

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

2022 年還有必要做 APP 嗎?

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

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

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

1)用戶主要通過移動設備訪問你的網站

這是你應該了解的重要數據??蛻艉湍阍谝黄鸬臅r間越長,你就有越多的機會去吸引他們,了解他們的習慣,并給他們想要的東西。(彩云注:這就是為什么各大廠之間都在拼命搶占用戶的在線時長。)

2)幫助內部業(yè)務流程更加有效

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

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

3)實現一些網站上沒有的新功能

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

4)競爭對手的情況

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

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

5)復購率

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

在正確的時間提供的報價越有吸引力,人們購買的可能性就越大。

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

出租車服務公司有回頭客,他們肯定需要一個應用

6)促銷工具

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

做原生 APP 還是移動端網站?

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

這部分是由于響應式設計的出現,它允許你根據打開網站的設備屏幕來調整網站。至于 APP,它們必須為許多移動平臺單獨編寫:Android、iOS、Windows 等。

一些設計師認為“前端驅動的網絡體驗”會是 2022 年的一個好機會,我非常同意!
(彩云注:在國內,現在開發(fā)小程序的肯定越來越多了。)

3D 設計具備更強競爭力

我們一開始并沒有將其放在首位,因為這并不是一個新的趨勢,在很久以前設計師們就已經設計了很多 3D 圖像和動畫了。

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

Cardi B rhymes with 3D

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

在過去的幾年里,3D 藝術和動畫已經出現在各種 UI 設計趨勢評論中。這意味著越來越多的設計師將它們整合到頁面中。

3D 當然應該成為 2022 年最熱門的趨勢和預測之一,因為與經典動畫相比,逼真的 3D 形狀結合動畫總是引人注目的。

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

“從技術上講,通過 3D 更容易傳達更多內容,因為它比平面圖片更接近我們的感知。3D 插圖更有深度,信息量更大,也更具互動性?!?

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

烏克蘭政府網站用 3D 手模擬了黑客帝國

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

元宇宙風潮

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

Meta logo 的變化

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

混合動畫

越來越多的公司在網站和移動應用中使用動畫,以提高用戶的沉浸感和體驗,使內容更有趣。

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

動畫是 2022 年重要的網頁設計趨勢。2022 年,如果沒有它,你的產品很可能會看起來就像個半成品。混合風格的動畫越來越受歡迎:定格動畫和 3D 動畫的結合,2D 動畫和 3D 動畫的結合。設計師這樣做是為了獲得不同尋常的風格解決方案,以及提高最終產品的質量。

2022 年,動畫設計將是品牌市場定位的重要組成部分,想想一個公司新的視覺形象——動畫形象。隨著這個領域的專業(yè)設計師數量的增長,實現新想法的機會也在增加。

2022 年如何使用網頁動畫?

1)講故事

動畫可以通過在界面和用戶之間建立情感聯系來傳達信息。

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

加載動畫 Yoichi Kobayashi

2)更有趣的加載

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

3)光標效果

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

4)動態(tài)排版

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

添加角色的動畫插圖

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

寶馬歷史動畫

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

1)用于解釋視頻

2)電商廣告

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

動畫解說的趨勢出現在幾年前,解說視頻清楚地顯示點擊的位置或公司的項目是關于什么的。

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

微交互,大影響

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

圖片來源 awwards

動畫交互將為你的設計注入活力,并有助于保持用戶粘性。關注每一個細節(jié)是設計師工作的關鍵,因為設計中的所有元素都可以帶來積極的用戶體驗。

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

CTA animated

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

動態(tài) logo,加深品牌印記

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

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

圖片來源 Toridori

動畫 logo 主要有以下幾點營銷優(yōu)勢:

  1. 吸引注意力。這意味著它們有助于提高品牌知名度。
  2. 有助于提高 SEO。谷歌更傾向于動態(tài)內容,帶有動態(tài)圖形的頁面更容易吸引用戶。
  3. 在移動端看起來更好。絲滑的動畫看起來比靜態(tài)的 logo 更有趣。
  4. 最重要的是展示了歷史。靜態(tài) logo 背后的想法正在動畫中發(fā)展。由于這一點,在幾秒鐘內,你可以展示品牌的使命,甚至它的價值!

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

一家洗衣機[公司]的標志

現在有很多設計模板,可以很容易地用字體制作一個動畫 logo:

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

國外專業(yè)機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

來源 Shabello, Bobby Voeten

最后的話

設計趨勢總是在變化的,但是設計的意義不會變。如果你不能深刻理解這一點,那么任何設計趨勢的文章不能幫你做好設計。

文章來源:優(yōu)設   作者:彩云Sky

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


免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


這些高級UI設計趨勢,我不允許你還不知道!

ui設計分享達人

正文


如果移動應用程序不符合最新的設計趨勢,那用戶可能會放棄你設計的產品。 

考慮到趨勢永遠不會保持不變,而且總會有新的趨勢出現,讓應用看起來既現代又漂亮是一項挑戰(zhàn),但遵循設計趨勢對于每個產品設計師來說都是必須的。 

我們了解到,跟蹤行業(yè)中的所有趨勢和趨勢并不總是可能的??偸怯行碌闹改?、動畫內容、視頻、新的插圖方法以及許多其他概念,您需要先抽出時間學習和測試。 


這是我們總結出的 2022 年移動應用 UI 設計趨勢

1、運動和動畫 
2、手勢和滑動體驗 
3、90年代風格 
4、圖形深度 
5、黑暗模式 
6、排版 
7、增強現實和虛擬現實 
8、漸變和透明元素 
9、舒適的視覺效果 



1、動效和動畫

我們都喜歡看視頻,并在 TikTok 或 YouTube 上花費大量時間。視頻內容和動畫更具吸引力和互動性。統(tǒng)計數據顯示,大多數人在使用應用程序之前都會觀看說明視頻。動畫和動作設計使內容更具吸引力。 

與具有長描述的靜態(tài)內容不同,動畫可以保留用戶的注意力并使應用程序更具吸引力。用動畫突出重要的東西是一個好主意。例如,您可以為應用程序中的按鈕設置動畫,以使用戶與應用程序的交互更好、更直接。像圖標動畫這樣的微動可以顯著改變您的應用程序的體驗。 

借助動畫,您可以強調應用功能、提高轉化率甚至銷售數據。 




2、手勢和滑動體驗

與電腦上的網頁端相反,手勢和滑動體驗使移動設備更具吸引力。我們每天花費數小時滾動和滑動操作。按鈕和其他動作可能會刺激和分散注意力。這種設計趨勢成為現代應用程序設計的最高優(yōu)先事項之一。一些應用程序創(chuàng)建者甚至根本不支持按鈕的使用。按鈕會造成混亂并占用過多的屏幕空間。 

建議用滑動功能替換按鈕。嘗試滑動動作的動畫會很有幫助。例如,圖書應用程序通常使用動畫來翻頁。 




3、90年代懷舊風格

90 年代的風格影響了所有領域,甚至是移動應用程序的設計。 

設計師使用類似于 90 年代流行的 PlayStation 游戲(例如,馬里奧或吃豆人)的復古字體、圖像、圖形。擁有 90 年代的氛圍,您有機會獲得兩代人的興趣:年輕人喜歡復古的東西,而老年人則喜歡懷舊。 

這種趨勢并不適合所有產品,但如果復古風格適合您的應用程序,嘗試一下也不錯。 



4、賦予圖形深度

扁平化設計看多了用戶會覺得很沉悶。人們喜歡看到更真實和互動的內容。圖形中的陰影和圖層賦予它們 3D 效果、體積和深度,使人們可以享受更逼真的圖像。 

這種趨勢可以與任何元素一起使用,在屏幕上創(chuàng)建對象層次結構并幫助用戶更輕松地瀏覽應用程序。 

然后,關于3D效果,我們來聊聊。3D 是一項革命性的技術。3D 圖形幾乎可以在任何應用程序中使用。例如,開發(fā)人員可以使用 3D 成像技術來構建存儲建筑物和房間內部地圖的應用程序。它可以非常適用于游戲并改變玩家的整體體驗。因此,在您的應用程序中為圖形添加深度時,請考慮 3D 趨勢。 




5、黑暗模式

暗模式是已在許多應用程序中高度使用的最大設計趨勢之一。最近,設計師也提供了在應用程序中在標準模式和暗模式之間切換的機會。所以用戶可以選擇他們最喜歡的任何模式。 

深色主題設計將背景變?yōu)樯钌J?,并使字體和其他元素變?yōu)闇\色/白色。 

例如,現在在 Facebook 等最受歡迎的應用程序中都可以使用深色模式。切換到深色模式有助于人們減輕眼睛疲勞并更方便地瀏覽。 




6、排版

選擇正確的字體是移動應用程序設計中必不可少的一步。用戶在瀏覽頁面的時候不是一個字一個字的讀的,而是成行的“掃描”方式來瀏覽。因此,使用能夠正確設置重點的字體非常重要。 

設計師已經開始使用不尋常的字體。文字不再看起來那么無聊,也不會迷失在背景中。其目的是使設計更明亮、更新穎。 

正確選擇的字體將有助于:
1、定下產品調性; 
2、提高品牌知名度; 
3、提供更好的視覺體驗; 
4、提高可讀性。 

通過組織排版為您的用戶提供愉悅且可讀的用戶體驗:設置點大小、行距和層次結構。 

請記住,不尋常的“瘋狂”排版并不適合所有產品。定義文本在您的應用程序中的具體功能。如果它提供了額外的信息功能,請不要對字體進行太多實驗。但是,例如,在在線雜志中,您可以使用各種版式,使布局更有趣。 



7、增強現實和虛擬現實

虛擬現實和增強現實為用戶提供了一個難得的機會,讓您只需通過手機即可獲得互動體驗。 

在新一年中,這種神奇的 UI 移動設計趨勢趨于增長和傳播。這種設計趨勢的關鍵在于應用程序的界面讓您感覺自己置身于應用程序中。引人入勝的設計元素和游戲化是這種體驗的關鍵。 

這是一個結合我們之前討論過的趨勢的絕佳機會,例如動畫和 3D 效果。首先,精心制作的動畫和 3D 觸摸可以在您的應用設計中支持 VR。 

你還記得那些來自 Instagram 的功能嗎?讓我們可以通過應用程序和移動相機將不同的角色放置在我們想要的任何地方嗎?然后你就知道這有多有趣了。此外,它不僅有趣而且高效。例如,宜家使用 AR 來展示一件家具在您家中不同位置的外觀。 




8、漸變和透明元素

這個UI設計趨勢是關于漸變和透明度的。設計師通常在按鈕和應用程序的背景上使用漸變。移動漸變趨勢突出了應用程序的基本部分,并使人們專注于特定方面,從而賦予他們層次感。 

移動應用程序設計中的透明元素表達了對某些應用程序部分的深度和驅動力,使設計更清晰、更具吸引力。 

您可以使用從淺色到深色主題的過渡,從而將屏幕分成兩個邏輯部分。此外,您可以在按鈕上使用漸變主題,使它們在屏幕上彈出。 

玻璃擬態(tài)的概念也值得一提。glassmorphism 背后的想法是柔化明暗設計元素之間的對比。設計理念使用類似于磨砂玻璃表面的透明模糊背景。 

玻璃態(tài)的主要特點:
1、透明度和背景模糊; 
2、透明物體上的細光邊框; 
3、分層; 
4、鮮艷的色彩。 




9、舒適的視覺效果

舒適的視覺效果是大部分用戶都喜歡的。用戶和應用程序開發(fā)人員都喜歡這種最近的移動應用程序設計趨勢。 

移動應用程序設計不應該只是美觀。它應該讓我們的眼睛看起來更舒適。因為一整天,我們可能都會盯著屏幕看,但看多了,我們會感到疲勞和眼睛疲勞。為了減少這種不利影響,應用程序開發(fā)人員創(chuàng)建了一種我們可以舒適使用的設計。 

舒適視覺設計趨勢的概念是為您的應用程序使用自然的色彩、舒緩的圖像和簡單的布局。這些技巧通??梢栽谮は霊贸绦蛑姓业?。它們包括自然的真實照片,具有平靜的色彩和結構簡單的輕元素,很少有深色主題設計。 




如果讓你的UI設計更好呢?

這里有一些建議: 

1. 多看別人的優(yōu)秀設計
分析它們的優(yōu)缺點,從他們的經驗中學習。 

2. 使用標準導航
不要使用異型的導航欄,這會讓你的用戶迷失在應用中。 

3. 使用優(yōu)質的配圖
抽象藝術、插圖、真實照片趨勢——一切都有助于吸引用戶的注意力。 

4. 多看前瞻設計趨勢
實時更新自己的設計知識庫,使設計水平使用保持一流。 

5. 擅于總結與回顧
可以計劃,三個月或半年總結回顧之前設計,總結不足之處。 

6. 多于他人分享
做設計不要怕被人看,或許有時候別人順口一說,就點開了難題。 

7. 保持良好的心情
遇到事不要慌,掌握好自己心情,才能掌握好你的設計。
文章來源:站酷   作者:UI范
分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


2022 年頂級網頁設計趨勢

ui設計分享達人

設計趨勢可以塑造一切,從設計師的創(chuàng)作方式到用戶界面設計,再到從網站到包裝設計的未來迭代。

讓我們深入探討2022年的一些頂級網頁設計趨勢。我們將著眼于 2021年末開始出現的趨勢,這些趨勢是為來年奠定基礎的,以及一些即將流行的趨勢設計。

有趣、樂觀的設計

時尚的形狀、顏色,甚至是面孔都可以帶來很多樂趣。設計師正在使用網頁設計趨勢,為從網站的所有內容提供有趣、樂觀的設計。這些設計的共同點是它們?yōu)槭澜缱⑷肓艘稽c額外的快樂。

充滿樂趣和樂觀的圖像具有面孔、較輕的字體,以及散發(fā)出積極情緒的顏色。為了充分利用這一趨勢,請考慮更輕的元素,并避免選擇較重的字體或顏色。

黑白配色方案

黑白配色方案是今年最鮮明、最美麗的設計趨勢。沒有顏色,你可以在限制范圍內思考和設計。

大膽和實驗性的排版

在2022年,沒有錯誤的排版方式。大粗體字體——甚至襯線字體——無處不在。在玩這種網站設計趨勢時,請考慮字體將如何響應以及如何最大限度地對訪問者產生影響。

三維設計元素

雖然2020年和2021年有很多設計師網站處理完整的3D 設計,但新興趨勢是將3D元素與更扁平的整體美感結合起來。

具有3D風格的元素可能包括陰影、動畫或圖層效果,以創(chuàng)建深度和維度。

三維設計也延伸到視覺敘事??紤]如何以突出景深和陰影的方式捕捉您的故事或產品。

近乎野獸派

野蠻主義是人們想要加入的網站設計趨勢,但對于大多數項目來說,它過于苛刻和尖銳。

這些設計使用了許多相同的鮮明效果。不是單色字體,更容易看到襯線是常態(tài)。即使有一些明顯的邊界和線條,元素之間也有足夠的空間。沒有太多的裝飾或其他視覺效果,只留下顏色和文字來真正承載這些項目。

滾動文本元素

雖然總是希望文本元素可讀,但它們也可以是動態(tài)的。滾動文本元素——通常使用超大字體、幾個詞、在一個位置——可以增加對關鍵詞的強調并激發(fā)用戶的興趣。

輪廓字體是一種流行的選擇,保持可讀性的關鍵是使用簡短、常用的單詞或短語。

玻璃態(tài)

玻璃態(tài)的第一個展示于2020年末和2021年初的新態(tài),并演變成現在流行的更完整的玻璃效應。

正是您可能想的那樣:設計元素的外觀讓人聯想到玻璃??赡苡型该鞫?、冷淡或光澤的元素。

設計師們一直在Dirbbble上以一種主要方式使用這種風格,并找到了網站設計的方法。

更多漸變

漸變是不斷出現的設計趨勢。2021年,設計中的大部分漸變出現在背景中。

到 2022 年,漸變將采用兩種新形式:

1) 用于文本顏色填充(例如上面的示例)以提供最大的影響和強調

2) 作為用其他線條填充插圖或圖標以創(chuàng)建紋理深度效果

沒有圖像的主頁

無需圖像即可設計,您將在 2022 年緊跟潮流。

使用不同類型的用戶界面或設計技巧來充分利用沒有圖像的主頁。在此處的示例中,Kirifuda 使用了漂亮的黑白配色方案,在文本元素之間具有疊印效果。超大的排版和手寫風格的字體有助于將它們融合在一起。

分屏美學

分屏美學重新奏效。幾年前的趨勢當時出于可用性和響應的原因而起作用,現在它更像是一種新設計。

這些視覺效果可以包括水平或垂直分割的屏幕,每一切面有不同的功能。

交互式字體

在屏幕上與您一起移動的文本是交互式字體背后的支柱。在大多數情況下,這可以使用懸停狀態(tài),盡管您可以嘗試一些其他更復雜的效果。

在考慮交互式文本元素時,請考慮可讀性和理解力。文本效果只有在其中的文字仍然可讀和可理解的情況下才有效。

包容性設計

設計師正在努力打造一個更具包容性的網絡,它幾乎在所有發(fā)布的內容中都有體現。從圖像到語言再到替代文本,沒有理由不嘗試讓您的項目更加包容所有人。

包容性延伸到種族、性別中立、文化、可及性和能力。共同的主題是您的網站應該以這樣的方式組合在一起,以便任何想要訪問內容的人都可以訪問內容,并且人們也可以在屏幕上看到他們可以與之相關的其他人。

結論

就網站設計趨勢而言,新的一年已經開始以非凡的方式爆發(fā)。如何將這些元素合并到現有項目中是作為設計師該考慮的問題。

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

文章來源:站酷 作者:對啊設計君
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


日歷

鏈接

個人資料

藍藍設計的小編 http://m.yvirxh.cn

存檔