動(dòng)態(tài)設(shè)計(jì)、干凈的設(shè)計(jì)、多色柔和漸變沉浸感、高對(duì)比/單色 UI、真實(shí)材料模仿等UI風(fēng)格的興起。

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

從左上到右：雅詩(shī)蘭黛、Apple、Duolingo、Wishes In Words、虛擬經(jīng)濟(jì)?、Wickret

動(dòng)態(tài)設(shè)計(jì)已經(jīng)變得非常龐大，你可能隨處可見。從微交互到復(fù)雜的動(dòng)畫，UI 不再是一個(gè)靜態(tài)的東西——用戶希望它在視覺上“生動(dòng)活潑”。由于 抖音、快手等短視頻和用戶每天消耗注意力的持續(xù)動(dòng)態(tài)，人們的注意力跨度越來越低。有人推測(cè)我們現(xiàn)在處于金魚的水平，甚至更低。為了保持用戶的參與度和好奇心，我們需要使用動(dòng)態(tài)效果并嘗試在靜態(tài)屏幕和圖像中添加一些生命力，讓他們更加身臨其境。如果你使用多鄰國(guó)APP，你可以清楚地看到他們最近的更新包括更多的動(dòng)畫插圖和屏幕過渡效果。大多數(shù) UI 組件都是通過各種視覺效果以一種或另一種方式與用戶交互。幾乎所有用戶采取行動(dòng)時(shí)，屏幕上都會(huì)發(fā)生一些事情。

在多鄰國(guó)APP的最新更新中，該應(yīng)用程序幾乎在每個(gè)級(jí)別都與您互動(dòng)。說到運(yùn)動(dòng)，就不能不提視差效應(yīng)。
視差基本上是一組不同的圖形層，它們?cè)谝苿?dòng)時(shí)以不同的速度移動(dòng)。這創(chuàng)造了一種非常迷人、令人賞心悅目的效果，就好像內(nèi)容具有實(shí)際的深度，而所有內(nèi)容都被放置在一個(gè)維度上。視差使用了一個(gè)簡(jiǎn)單的基礎(chǔ)，即移動(dòng)最近的元素要比后面的元素快。在現(xiàn)實(shí)生活中發(fā)生的例子，當(dāng)你開車時(shí)，從車窗望向遠(yuǎn)處的山脈，會(huì)發(fā)現(xiàn)山脈移動(dòng)很慢。

如果你想更多地探索動(dòng)態(tài)設(shè)計(jì)——這對(duì)你有好處。我堅(jiān)信，在不久的將來，這將成為一種不可避免的設(shè)計(jì)技能。最好現(xiàn)在已經(jīng)開始學(xué)習(xí)了。

干凈的設(shè)計(jì)

左上到右：Coinbase、Airbnb、Tran Mau Tri Tam、Squareblack、Foh&Boh、Revolut

多年來，我的設(shè)計(jì)風(fēng)格不斷演變，我逐漸走向更簡(jiǎn)單、更簡(jiǎn)潔和更干凈的方法。對(duì)每個(gè)設(shè)計(jì)師來說，這可能是一種自然的方式，但我很高興在所有的趨勢(shì)中，一個(gè)干凈的設(shè)計(jì)是你永遠(yuǎn)不會(huì)出錯(cuò)的——實(shí)現(xiàn)這一點(diǎn)既令人大開眼界又令人欣慰。每次我瀏覽不同的應(yīng)用程序和網(wǎng)站時(shí)，我發(fā)現(xiàn)那些干凈、簡(jiǎn)潔的應(yīng)用程序看起來最令人愉快，也最專業(yè)。您無需跟隨每一個(gè)趨勢(shì)來創(chuàng)建出色的現(xiàn)代數(shù)字產(chǎn)品。受到一些流行趨勢(shì)的啟發(fā)是很好的——但只要它看起來仍然是經(jīng)典的，并且讓你的設(shè)計(jì)經(jīng)得起未來的考驗(yàn)。因?yàn)橛袝r(shí)趨勢(shì)可能太過強(qiáng)大，這樣的做法這對(duì)任何設(shè)計(jì)師來說都是一種解脫。

Apple 網(wǎng)站 - 專注于產(chǎn)品功能的永恒、簡(jiǎn)約、簡(jiǎn)潔的 UI 設(shè)計(jì)之王。著名的 Apple“Masonry grid”現(xiàn)在本身就是一種趨勢(shì)——你可以在許多網(wǎng)站上看到它！

多色柔和漸變

從左到右：Sketch、LS Graphics、Winamp、Cosmos、Until、Stripe

極光漸變、抽象的漸變形式和形狀、按鈕、卡片上的漸變，或者在具有視差效果的背景中使用的色彩鮮艷、充滿活力的飛濺——這種趨勢(shì)似乎仍然非常真實(shí)和強(qiáng)烈。

極光漸變使用的漂亮例子。

您還可以發(fā)現(xiàn)放置在文本上的漸變，例如在標(biāo)題中突出某個(gè)短語(yǔ)。

從左到右：Apple、Vercel、Memorisely

高對(duì)比度/單色

從左上角開始：Uber、Endel、Revolut Business、Homey、Klarna、Dropbox

您可以在許多網(wǎng)站和應(yīng)用程序（包括業(yè)內(nèi)最大的參與者）上發(fā)現(xiàn)強(qiáng)烈對(duì)比的元素，有時(shí)甚至是整個(gè)界面。我個(gè)人認(rèn)為，這種趨勢(shì)背后的原因與我在本文前面提到的原因相似——當(dāng)你滾動(dòng)界面時(shí)，強(qiáng)烈對(duì)比的元素/表面不斷閃爍可以激發(fā)你的注意力。由于元素和文本的良好可見性，它還使界面非常易于訪問，除非你在對(duì)比度做得太過分，從而導(dǎo)致眼睛疲勞。

黑暗未來/宇宙風(fēng)格UI

從左上到右：GitHub、Zenly、Railway、Linear、Notion AI、Create

深色 UI 演變成比“夜間/深色模式”選項(xiàng)更大的東西。實(shí)際上，越來越多的品牌正在轉(zhuǎn)向其產(chǎn)品和頁(yè)面的深色版本。我個(gè)人認(rèn)為，使用深色 UI 可能更容易吸引用戶的注意力，因?yàn)樗鹊湫偷摹鞍咨尘皟?nèi)容”外觀更不尋常、更吸引人，并且營(yíng)造出一種未來主義有時(shí)甚至是“宇宙”的氛圍。

Linear 的網(wǎng)站是深色 UI 的一個(gè)很好的例子。它還充滿了玻璃元素。

模擬真實(shí)材質(zhì)

從左上到右：Solana、Letter、Thoughtlab、Youtube Music、Next.js、Mural

我們已經(jīng)有了玻璃態(tài)、粘土態(tài)、金屬/變色等等。我還注意到，具有水晶或類似珍珠效果的元素正在成為相當(dāng)重要的東西。我認(rèn)為把它歸為一個(gè)標(biāo)簽下是合理的——似乎整體上對(duì)現(xiàn)實(shí)生活材料的模仿是近年來的一個(gè)強(qiáng)烈趨勢(shì)，而且不會(huì)很快結(jié)束。這里要補(bǔ)充的重要觀察結(jié)果——玻璃形態(tài)似乎正在上升。您現(xiàn)在可以在許多網(wǎng)站上輕松看到玻璃形態(tài)效果，例如導(dǎo)航欄、按鈕或裝飾元素。

Letter真的很喜歡他們的水晶。另外，請(qǐng)注意導(dǎo)航欄上強(qiáng)烈的玻璃形態(tài)效果。

巨大的排版

從左上到右：Apple、Heart Aerospace、Stand With Ukraine、Increase、Gumroad、Instagram

如今，這是一個(gè)非常明顯、強(qiáng)烈的趨勢(shì)。由于更大的屏幕分辨率，主要用于網(wǎng)站，以實(shí)現(xiàn)最小/野蠻/原始的氛圍。通常帶有全屏照片和引人注目的動(dòng)畫。

看起來真的很棒！圖片來源：Heart Aerospace

無襯線的字體是不會(huì)消失的，它將永遠(yuǎn)是界面的一個(gè)安全、實(shí)用的選擇。
感性設(shè)計(jì)

從左上到右：海港、美麗、假期、弗蘭基、我們的感受、Express VPN

正如我喜歡每天整理東西一樣--讓我們把所有的新古典主義、復(fù)古、復(fù)古浪潮、80-90年代、雜志/海報(bào)外觀的趨勢(shì)都放到一個(gè)帶有 "感性設(shè)計(jì) "標(biāo)簽的盒子里。就像他們可以根據(jù)他們?cè)噲D銷售的產(chǎn)品或服務(wù)來達(dá)到偉大的視覺目的一樣，他們往往是形式大于功能的勝利者。
與此同時(shí)，時(shí)不時(shí)地看到一些原創(chuàng)的、完全與眾不同的東西也是讓人耳目一新。一個(gè)嚴(yán)肅的問題——它們真的適合 UI 設(shè)計(jì)嗎？舉個(gè)例子，許多決定轉(zhuǎn)向野獸派設(shè)計(jì)的品牌都收到了非常負(fù)面的用戶反饋。Figma 和 Gumroad 是受歡迎的例外，但這種風(fēng)格并不適合所有產(chǎn)品?？雌饋泶蟛糠重?fù)責(zé)重新設(shè)計(jì)的設(shè)計(jì)團(tuán)隊(duì)實(shí)際上對(duì)結(jié)果很滿意。抱歉這么說——像野蠻主義這樣的風(fēng)格很少對(duì)用戶有用和吸引。最近的 The Verge 重新設(shè)計(jì)就是一個(gè)典型的例子，在改變之后，該網(wǎng)站每月的瀏覽量下降了近5.5百萬(wàn)?；靵y的布局和極端的對(duì)比可能是這里的主要罪魁禍?zhǔn)住?strong>可以說，當(dāng)涉及到數(shù)字產(chǎn)品時(shí)，功能和視覺之間的平衡是關(guān)鍵。附言。想知道將我在文章中提到的幾乎所有趨勢(shì)混合起來會(huì)是什么樣子？我已經(jīng)滿足你了。

當(dāng)您可以擁有所有趨勢(shì)時(shí)，為什么要專注于一種趨勢(shì)？

聲明：發(fā)布此文是出于傳遞更多知識(shí)以供交流學(xué)習(xí)之目的。若有來源標(biāo)注錯(cuò)誤或侵犯了您的合法權(quán)益，請(qǐng)作者持權(quán)屬證明與我們聯(lián)系，我們將及時(shí)更正、刪除，謝謝。?

來源：Diana Malewicz 地址：https://uxdesign.cc/2023-visual-design-trends-guide-82e84f09cbdf

編輯：FariedLee

各位觀眾老爺可以關(guān)注個(gè)人公眾號(hào)“CG數(shù)字藝術(shù)“,多多點(diǎn)贊收藏!!?