編輯導(dǎo)語(yǔ)：交互設(shè)計(jì)在近些年來(lái)的發(fā)展趨勢(shì)令人十分震驚，尤其是在2021年。這篇文章，作者為大家羅列了交互相關(guān)領(lǐng)域中UX/UI設(shè)計(jì)的最新發(fā)展趨勢(shì)，一起來(lái)看看吧。

交互設(shè)計(jì)在2021年呈現(xiàn)了驚人的發(fā)展趨勢(shì)，而它在2022年的發(fā)展也將是非凡的。根據(jù)相關(guān)調(diào)研表明，人們對(duì)于敘事、個(gè)性化和情感交互設(shè)計(jì)等體驗(yàn)的關(guān)注逐漸增加，而這些也為用戶(hù)體驗(yàn)帶來(lái)了更深的意義。

今天，小站就為大家羅列一下交互相關(guān)領(lǐng)域中UX/UI設(shè)計(jì)的最新發(fā)展趨勢(shì)。

一、用戶(hù)體驗(yàn)設(shè)計(jì)

1. Seamless Experience

Seamless Experience (無(wú)縫體驗(yàn))，主要?jiǎng)?chuàng)造一種從一個(gè)步驟流暢過(guò)渡到另一個(gè)步驟的用戶(hù)體驗(yàn)。

為了實(shí)現(xiàn)無(wú)縫體驗(yàn)，我們需要專(zhuān)注于創(chuàng)造連續(xù)性，其中包括：特定場(chǎng)景或流程的連續(xù)性（例如付款操作）、更高、更大圖景的連續(xù)性（例如從登陸網(wǎng)站開(kāi)始的完整用戶(hù)操作流程）等等。

在無(wú)縫體驗(yàn)中，最重要的是保持一致的用戶(hù)體驗(yàn)，同時(shí)給定體驗(yàn)中的每個(gè)元素都是彼此自然發(fā)展的。流暢的體驗(yàn)對(duì)用戶(hù)來(lái)說(shuō)就意味著積極的體驗(yàn)。

其實(shí)，我們可以看到無(wú)縫體驗(yàn)已經(jīng)被應(yīng)用于一些應(yīng)用程序中，它通過(guò)“小程序”或第三方集成為用戶(hù)提供更多的服務(wù)。

無(wú)論是視頻源還是社交和電子商務(wù)集成，其目標(biāo)都是為了保持用戶(hù)的關(guān)注度。例如，最初只是一個(gè)社交平臺(tái)的微信，現(xiàn)在也已經(jīng)包含了完整的電子商務(wù)體驗(yàn)。而在Instagram、Facebook和Twitter等社交平臺(tái)上也已經(jīng)集成了電子商務(wù)。

兩款微信小程序

左：餓了么；右：攜程旅行

如果我們想要呈現(xiàn)完美的Seamless Experience，那么在設(shè)計(jì)過(guò)程中可以遵循以下幾點(diǎn)：

• 保持簡(jiǎn)單而一致的操作：簡(jiǎn)單、干凈且一致是一種永遠(yuǎn)都不會(huì)消亡的設(shè)計(jì)趨勢(shì)。完美的交互體驗(yàn)可以幫助用戶(hù)輕松導(dǎo)航而不會(huì)出現(xiàn)任何混淆
• 縮短用戶(hù)操作流程：簡(jiǎn)短而簡(jiǎn)單的流程可以吸引訪問(wèn)者使用我們的服務(wù)
• 呈現(xiàn)出挑的登陸頁(yè)面：一個(gè)好的登陸頁(yè)面可以輕松幫助用戶(hù)找到我們的產(chǎn)品或服務(wù)

縮短用戶(hù)操作流程

2. Scrollytelling

一味地滾動(dòng)界面很無(wú)聊。

如果我們想吸引用戶(hù)注意力，就要實(shí)現(xiàn)Scrollytelling (滾動(dòng)敘述)。它可以在頁(yè)面和應(yīng)用程序中通過(guò)滾動(dòng)的方式呈現(xiàn)內(nèi)容敘述。

想象一下，當(dāng)我們?cè)谥谱饕粋€(gè)網(wǎng)站時(shí)，每個(gè)滾動(dòng)插圖、字體、文本片段和其他元素都開(kāi)始變得栩栩如生。

這種UX設(shè)計(jì)趨勢(shì)非常有助于提高用戶(hù)的參與感。雖然用戶(hù)不能影響滾動(dòng)敘述的進(jìn)程，但整個(gè)內(nèi)容就像電子游戲一樣，帶領(lǐng)他們穿越符號(hào)迷宮。將故事敘述通過(guò)滾動(dòng)的方式也可以進(jìn)一步幫助用戶(hù)了解我們項(xiàng)目的方方面面，進(jìn)一步增加用戶(hù)體驗(yàn)。

以Anton&Irene的滾動(dòng)設(shè)計(jì)為例，它的好處就是用戶(hù)無(wú)需點(diǎn)擊和連續(xù)滾動(dòng)，即可了解該網(wǎng)站所提供的服務(wù)。

? Anton&Irene

此外，Google的動(dòng)態(tài)文本也以Scrollytelling的方式增加了用戶(hù)的閱讀體驗(yàn)。

滾動(dòng)敘事在用戶(hù)向下滾動(dòng)時(shí)被激活，用戶(hù)只需停留在一個(gè)地方，屏幕上的內(nèi)容就會(huì)自動(dòng)展開(kāi)。這不需要我們創(chuàng)造出酷炫的視覺(jué)效果，僅僅只需展現(xiàn)出真正想表達(dá)的內(nèi)容，以及表達(dá)對(duì)象。

我們需要知道，Scrollytelling是為用戶(hù)創(chuàng)建的，他們不需要前往任何頁(yè)面即可了解整個(gè)網(wǎng)站。因此，我們應(yīng)該使頁(yè)面變得生動(dòng)有趣，每一秒都展現(xiàn)出新事物，進(jìn)而降低用戶(hù)在閱讀時(shí)的無(wú)聊感。

? Google動(dòng)態(tài)文本

?IAmBinadam

3. DataVisualization

隨著疫情的常態(tài)化發(fā)展，如今出現(xiàn)了一種叫做COVID Hangover的現(xiàn)象。

這是疫情對(duì)公司及其員工的長(zhǎng)期影響：人們的壓力和焦慮明顯增加，而其工作量在過(guò)去的兩年中也在隨之增加。這也使得人們?cè)诿鎸?duì)繁瑣的數(shù)據(jù)時(shí)，表現(xiàn)得更加浮躁。

因此，在這一背景之下，我們需要改變?cè)O(shè)計(jì)思路，以數(shù)據(jù)可視化的方式保持大家的關(guān)注度。數(shù)據(jù)可視化有助于以引人入勝的方式傳達(dá)正確的信息。它與Scrollytelling直接相關(guān)。

以下是IAmBinadam顯示數(shù)據(jù)的方式：團(tuán)隊(duì)通過(guò)消除數(shù)據(jù)集的復(fù)雜性來(lái)設(shè)計(jì)了這一網(wǎng)站，進(jìn)而促使讀者更容易理解信息，并通過(guò)圖片迅速注意最后的結(jié)論。

? IAmBinadam

不同級(jí)別的不同數(shù)據(jù)，可以幫助用戶(hù)知道首先關(guān)注的點(diǎn)

有些數(shù)據(jù)圖表乍一看并不像圖表，這就使得它們更具戲劇性

數(shù)據(jù)可視化在某些體驗(yàn)中是絕對(duì)的、必不可少的部分。它在UX設(shè)計(jì)中可以使體驗(yàn)在視覺(jué)上變得易于理解。我們可以通過(guò)以下方式對(duì)數(shù)據(jù)進(jìn)行可視化表述：

• 圖表和圖形
• 插圖（包括帶有手寫(xiě)短語(yǔ)的插圖）
• 靜態(tài)信息圖表
• 交互式信息圖表

插圖

?InkFactory

交互式信息圖

? https://blog.hubspot.com/marketing/interactive-infographic

4. Microinteractions

交互為用戶(hù)創(chuàng)造了良好的體驗(yàn)，而帶有微交互的網(wǎng)站可以為用戶(hù)提供完美的反饋。微交互是幫助用戶(hù)瀏覽網(wǎng)站或應(yīng)用程序的小界面更改。通常，作為用戶(hù)提示的視覺(jué)或聲音效果，微交互會(huì)顯示發(fā)生了什么、將導(dǎo)致什么操作以及接下來(lái)需要做什么。

Awwwards的懸停效果

在設(shè)計(jì)過(guò)程中，重要的是要達(dá)到界面元素的和諧。微交互的一個(gè)重要部分就是顏色，它會(huì)為界面元素帶來(lái)不同的意義。

此外，動(dòng)畫(huà)交互也將為我們的設(shè)計(jì)注入活力，并有助于保持用戶(hù)的參與度。關(guān)注每一個(gè)細(xì)節(jié)是我們進(jìn)行設(shè)計(jì)的一個(gè)關(guān)鍵方面，因?yàn)樗梢詭?lái)更好的用戶(hù)體驗(yàn)。

我們所創(chuàng)建的微交互也可以通過(guò)游戲化的方式來(lái)改善用戶(hù)體驗(yàn)。以CTA這一品牌為例，它展示了一些用戶(hù)操作的重要性，并明確表達(dá)了一個(gè)觀點(diǎn)，即：它關(guān)心讀者是如何看待信息的。

CTA動(dòng)畫(huà)效果

二、用戶(hù)界面設(shè)計(jì)

1.? Metaverse

今年，元宇宙 (Metaverse)火爆全網(wǎng)，扎克伯格將Facebook正式更名為 “Meta”，并創(chuàng)建了專(zhuān)屬標(biāo)志。而在2022年，元宇宙的勢(shì)頭也將繼續(xù)持續(xù)下去。在2022年，隨著VR和AR技術(shù)的不斷完善，用戶(hù)在數(shù)字世界中將會(huì)獲得逼真的虛擬形象(avatar)，而這也將會(huì)為用戶(hù)呈現(xiàn)出全新的交互體驗(yàn)。

扎克伯格

Meta

此外，3D頭像也將隨之被推動(dòng)起來(lái)。

微軟宣布明年將Mesh(一個(gè)虛擬體驗(yàn)協(xié)作平臺(tái))直接引入Microsoft Teams。它將公司的混合現(xiàn)實(shí)和HoloLens與會(huì)議和視頻通話(huà)相結(jié)合，同時(shí)借助動(dòng)畫(huà)形象，使得任何人都能參與其中。

大家不需要戴上VR耳機(jī)即可使用這些頭像。而Microsoft也將會(huì)使用AI來(lái)聆聽(tīng)員工的聲音，隨后為他們的3D頭像制作動(dòng)畫(huà)。如果他們切換到3D會(huì)議中，那么AI也會(huì)為他們制作動(dòng)畫(huà)表情符號(hào)。

3D頭像的運(yùn)用將推動(dòng)整個(gè)元宇宙環(huán)境。在這個(gè)虛擬數(shù)字空間中，大家可以通過(guò)游戲進(jìn)行社交，甚至進(jìn)行項(xiàng)目協(xié)作。

3D頭像

?Microsoft

虛擬會(huì)議世界

?Microsoft

2. 3D Design

3D雖然已經(jīng)存在了很久，且也不會(huì)很快消失。但在2022年，也許3D設(shè)計(jì)將變得多樣化和具有包容性。

在過(guò)去的幾年里，3D藝術(shù)和動(dòng)畫(huà)已經(jīng)出現(xiàn)在各種媒體資源和眾多UI設(shè)計(jì)中。這也就意味著越來(lái)越多的設(shè)計(jì)師將它們集成于網(wǎng)站和登陸頁(yè)面中。

與經(jīng)典動(dòng)畫(huà)相比，逼真的3D形狀與動(dòng)效相結(jié)合，總是會(huì)吸引更多人的眼球。

衛(wèi)星著陸頁(yè)3D效果

?Conzeptzilla

在3D設(shè)計(jì)過(guò)程中，我們可以將3D對(duì)象的樣式無(wú)縫地“穿插”在2D空間中，它可以幫助我們創(chuàng)作出更多有趣的作品，同時(shí)這也是一種具有巨大潛力的設(shè)計(jì)方法。如果我們想呈現(xiàn)出良好的3D效果，可以參考以下兩點(diǎn)：

• 包含動(dòng)畫(huà)和插圖：一個(gè)具有管理良好的動(dòng)畫(huà)和插圖的3D設(shè)計(jì)，會(huì)使得網(wǎng)站脫穎而出
• 選擇正確的對(duì)象和顏色：根據(jù)我們的項(xiàng)目受眾進(jìn)行3D設(shè)計(jì)，選擇正確的設(shè)計(jì)并提供合適的顏色，以此在網(wǎng)站上輕松吸引用戶(hù)

烏克蘭政府網(wǎng)站在2D空間里使用了3D手來(lái)模仿黑客帝國(guó)

3. Animation

動(dòng)畫(huà)是2022年的重要設(shè)計(jì)趨勢(shì)，它可以在網(wǎng)站和移動(dòng)應(yīng)用程序中提高用戶(hù)的沉浸感和體驗(yàn)，使得內(nèi)容更加有趣?；旌巷L(fēng)格的動(dòng)畫(huà)越來(lái)越受歡迎，即：定格動(dòng)畫(huà)與3D以及2D與3D動(dòng)畫(huà)的結(jié)合。

那么在2022年，我們?cè)撊绾斡行褂脛?dòng)畫(huà)呢？

• 良好敘事：動(dòng)畫(huà)可以通過(guò)在界面和用戶(hù)之間建立情感聯(lián)系來(lái)傳達(dá)某種信息
• 使加載頁(yè)面變得有趣：帶有百分比的加載動(dòng)畫(huà)不僅可以?shī)蕵?lè)用戶(hù)，還可以告知他們加載時(shí)長(zhǎng)。我們可以使用進(jìn)度條或任何能想得到的元素，以此來(lái)展示時(shí)間流失
• 使用光標(biāo)效果：用戶(hù)可以準(zhǔn)確地看到光標(biāo)所在位置。通過(guò)添加對(duì)該光標(biāo)做出反應(yīng)的智能交互動(dòng)畫(huà)，來(lái)幫助用戶(hù)進(jìn)行瀏覽
• 破壞動(dòng)態(tài)排版

VectorClock的加載動(dòng)畫(huà)

懸停動(dòng)畫(huà)

破壞動(dòng)態(tài)排版-Kilm

4. AnimatedLogos

動(dòng)畫(huà)標(biāo)志雖然對(duì)印刷產(chǎn)品沒(méi)有意義，但它對(duì)于在線(xiàn)品牌來(lái)說(shuō)卻意義非凡。動(dòng)畫(huà)標(biāo)志設(shè)計(jì)將會(huì)成為一種新趨勢(shì)。它也具備了以下幾個(gè)優(yōu)勢(shì)：

• 吸引注意力。這就意味著動(dòng)畫(huà)標(biāo)志有助于提高我們產(chǎn)品的知名度
• 有助于改進(jìn)SEO (引擎優(yōu)化)。例如，Google偏愛(ài)動(dòng)態(tài)內(nèi)容，而帶有動(dòng)態(tài)圖形的頁(yè)面則會(huì)更快速地吸引用戶(hù)
• 在移動(dòng)設(shè)備上具備良好效果。吸引人的動(dòng)畫(huà)logo看起來(lái)比靜態(tài)logo更有趣
• 展示產(chǎn)品歷史。動(dòng)畫(huà)標(biāo)志可以在短短幾秒內(nèi)展示該產(chǎn)品的使命，甚至是價(jià)值觀

動(dòng)畫(huà)標(biāo)志

?Toridori

某家洗衣機(jī)公司的動(dòng)畫(huà)標(biāo)志

除此之外，我們也可以為現(xiàn)有的logo設(shè)置動(dòng)畫(huà)效果，或根據(jù)源文件重新考慮其動(dòng)態(tài)設(shè)計(jì)。例如，我們可以輕松制作帶有字體的動(dòng)畫(huà)標(biāo)志。

動(dòng)畫(huà)字體

?Shabello, Bobby Voeten

以上這些2022年最新UX/UI設(shè)計(jì)趨勢(shì)非常值得大家關(guān)注。大家可以在其中進(jìn)行挑選，適當(dāng)應(yīng)用在自己的項(xiàng)目之中。

作者： 交互設(shè)計(jì)小站；微信公眾號(hào)：交互設(shè)計(jì)小站

來(lái)源：https://mp.weixin.qq.com/s/cFd3qy9xM5rV1AdyYP1J_A

本文由 @交互設(shè)計(jì)小站 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pexels，基于CC0協(xié)議。