值得關(guān)注! 2022最新交互設(shè)計(jì)趨勢(shì)

12 評(píng)論 14558 瀏覽 96 收藏 17 分鐘

編輯導(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é)議。

作者:周雨潔;公眾號(hào):運(yùn)營(yíng)派(id:yunyingpai666)

本文由@運(yùn)營(yíng)派 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于CC0協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 是“登錄”不是“登陸”,錯(cuò)別字

    來(lái)自北京 回復(fù)
  2. 周思岐到此一游

    回復(fù)
    1. 黃煦焓

      回復(fù)
  3. 哈哈

    回復(fù)
    1. hi

      回復(fù)
    2. 你好你好小同桌

      回復(fù)
  4. zsq

    回復(fù)
    1. 你好

      回復(fù)
  5. 6

    回復(fù)
  6. 沒(méi)想到每天用的餓了嗎還有這么大的學(xué)問(wèn)

    來(lái)自山東 回復(fù)
  7. 寫(xiě)的很棒,作者介紹的非常詳細(xì),先碼住,感謝分享

    來(lái)自河南 回復(fù)
  8. 作者寫(xiě)的很詳細(xì),感謝分享

    來(lái)自福建 回復(fù)