值得關注! 2022最新交互設計趨勢

12 評論 14615 瀏覽 96 收藏 17 分鐘

編輯導語:交互設計在近些年來的發展趨勢令人十分震驚,尤其是在2021年。這篇文章,作者為大家羅列了交互相關領域中UX/UI設計的最新發展趨勢,一起來看看吧。

交互設計在2021年呈現了驚人的發展趨勢,而它在2022年的發展也將是非凡的。根據相關調研表明,人們對于敘事、個性化和情感交互設計等體驗的關注逐漸增加,而這些也為用戶體驗帶來了更深的意義。

今天,小站就為大家羅列一下交互相關領域中UX/UI設計的最新發展趨勢。

一、用戶體驗設計

1. Seamless Experience

Seamless Experience (無縫體驗),主要創造一種從一個步驟流暢過渡到另一個步驟的用戶體驗。

為了實現無縫體驗,我們需要專注于創造連續性,其中包括:特定場景或流程的連續性(例如付款操作)、更高、更大圖景的連續性(例如從登陸網站開始的完整用戶操作流程)等等。

在無縫體驗中,最重要的是保持一致的用戶體驗,同時給定體驗中的每個元素都是彼此自然發展的。流暢的體驗對用戶來說就意味著積極的體驗

其實,我們可以看到無縫體驗已經被應用于一些應用程序中,它通過小程序”或第三方集成為用戶提供更多的服務。

無論是視頻源還是社交和電子商務集成,其目標都是為了保持用戶的關注度。例如,最初只是一個社交平臺的微信,現在也已經包含了完整的電子商務體驗。而在Instagram、Facebook和Twitter等社交平臺上也已經集成了電子商務。

兩款微信小程序

左:餓了么;右:攜程旅行

如果我們想要呈現完美的Seamless Experience,那么在設計過程中可以遵循以下幾點:

  • 保持簡單而一致的操作:簡單、干凈且一致是一種永遠都不會消亡的設計趨勢。完美的交互體驗可以幫助用戶輕松導航而不會出現任何混淆
  • 縮短用戶操作流程:簡短而簡單的流程可以吸引訪問者使用我們的服務
  • 呈現出挑的登陸頁面:一個好的登陸頁面可以輕松幫助用戶找到我們的產品或服務

縮短用戶操作流程

2. Scrollytelling

一味地滾動界面很無聊。

如果我們想吸引用戶注意力,就要實現Scrollytelling (滾動敘述)。它可以在頁面和應用程序中通過滾動的方式呈現內容敘述。

想象一下,當我們在制作一個網站時,每個滾動插圖、字體、文本片段和其他元素都開始變得栩栩如生。

這種UX設計趨勢非常有助于提高用戶的參與感。雖然用戶不能影響滾動敘述的進程,但整個內容就像電子游戲一樣,帶領他們穿越符號迷宮。將故事敘述通過滾動的方式也可以進一步幫助用戶了解我們項目的方方面面,進一步增加用戶體驗。

Anton&Irene的滾動設計為例,它的好處就是用戶無需點擊和連續滾動,即可了解該網站所提供的服務。

? Anton&Irene

此外,Google的動態文本也以Scrollytelling的方式增加了用戶的閱讀體驗。

滾動敘事在用戶向下滾動時被激活,用戶只需停留在一個地方,屏幕上的內容就會自動展開。這不需要我們創造出酷炫的視覺效果,僅僅只需展現出真正想表達的內容,以及表達對象。

我們需要知道,Scrollytelling是為用戶創建的,他們不需要前往任何頁面即可了解整個網站。因此,我們應該使頁面變得生動有趣,每一秒都展現出新事物,進而降低用戶在閱讀時的無聊感。

? Google動態文本

?IAmBinadam

3. DataVisualization

隨著疫情的常態化發展,如今出現了一種叫做COVID Hangover的現象。

這是疫情對公司及其員工的長期影響:人們的壓力和焦慮明顯增加,而其工作量在過去的兩年中也在隨之增加。這也使得人們在面對繁瑣的數據時,表現得更加浮躁。

因此,在這一背景之下,我們需要改變設計思路,以數據可視化的方式保持大家的關注度。數據可視化有助于以引人入勝的方式傳達正確的信息。它與Scrollytelling直接相關。

以下是IAmBinadam顯示數據的方式:團隊通過消除數據集的復雜性來設計了這一網站,進而促使讀者更容易理解信息,并通過圖片迅速注意最后的結論。

? IAmBinadam

不同級別的不同數據,可以幫助用戶知道首先關注的點

有些數據圖表乍一看并不像圖表,這就使得它們更具戲劇性

數據可視化在某些體驗中是絕對的、必不可少的部分。它在UX設計中可以使體驗在視覺上變得易于理解。我們可以通過以下方式對數據進行可視化表述

  • 圖表和圖形
  • 插圖(包括帶有手寫短語的插圖)
  • 靜態信息圖表
  • 交互式信息圖表

插圖

?InkFactory

交互式信息圖

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

4. Microinteractions

交互為用戶創造了良好的體驗,而帶有微交互的網站可以為用戶提供完美的反饋。微交互是幫助用戶瀏覽網站或應用程序的小界面更改。通常,作為用戶提示的視覺或聲音效果,微交互會顯示發生了什么、將導致什么操作以及接下來需要做什么。

Awwwards的懸停效果

在設計過程中,重要的是要達到界面元素的和諧。微交互的一個重要部分就是顏色,它會為界面元素帶來不同的意義。

此外,動畫交互也將為我們的設計注入活力,并有助于保持用戶的參與度。關注每一個細節是我們進行設計的一個關鍵方面,因為它可以帶來更好的用戶體驗。

我們所創建的微交互也可以通過游戲化的方式來改善用戶體驗。以CTA這一品牌為例,它展示了一些用戶操作的重要性,并明確表達了一個觀點,即:它關心讀者是如何看待信息的。

CTA動畫效果

二、用戶界面設計

1.? Metaverse

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

扎克伯格

Meta

此外,3D頭像也將隨之被推動起來。

微軟宣布明年將Mesh(一個虛擬體驗協作平臺)直接引入Microsoft Teams。它將公司的混合現實和HoloLens與會議和視頻通話相結合,同時借助動畫形象,使得任何人都能參與其中。

大家不需要戴上VR耳機即可使用這些頭像。而Microsoft也將會使用AI來聆聽員工的聲音,隨后為他們的3D頭像制作動畫。如果他們切換到3D會議中,那么AI也會為他們制作動畫表情符號。

3D頭像的運用將推動整個元宇宙環境。在這個虛擬數字空間中,大家可以通過游戲進行社交,甚至進行項目協作。

3D頭像

?Microsoft

虛擬會議世界

?Microsoft

2. 3D Design

3D雖然已經存在了很久,且也不會很快消失。但在2022年,也許3D設計將變得多樣化和具有包容性。

在過去的幾年里,3D藝術和動畫已經出現在各種媒體資源和眾多UI設計中。這也就意味著越來越多的設計師將它們集成于網站和登陸頁面中。

與經典動畫相比,逼真的3D形狀與動效相結合,總是會吸引更多人的眼球。

衛星著陸頁3D效果

?Conzeptzilla

在3D設計過程中,我們可以將3D對象的樣式無縫地“穿插”在2D空間中,它可以幫助我們創作出更多有趣的作品,同時這也是一種具有巨大潛力的設計方法。如果我們想呈現出良好的3D效果,可以參考以下兩點:

  • 包含動畫和插圖:一個具有管理良好的動畫和插圖的3D設計,會使得網站脫穎而出
  • 選擇正確的對象和顏色:根據我們的項目受眾進行3D設計,選擇正確的設計并提供合適的顏色,以此在網站上輕松吸引用戶

烏克蘭政府網站在2D空間里使用了3D手來模仿黑客帝國

3. Animation

動畫是2022年的重要設計趨勢,它可以在網站和移動應用程序中提高用戶的沉浸感和體驗,使得內容更加有趣。混合風格的動畫越來越受歡迎,即:定格動畫與3D以及2D與3D動畫的結合。

那么在2022年,我們該如何有效使用動畫呢?

  • 良好敘事:動畫可以通過在界面和用戶之間建立情感聯系來傳達某種信息
  • 使加載頁面變得有趣:帶有百分比的加載動畫不僅可以娛樂用戶,還可以告知他們加載時長。我們可以使用進度條或任何能想得到的元素,以此來展示時間流失
  • 使用光標效果:用戶可以準確地看到光標所在位置。通過添加對該光標做出反應的智能交互動畫,來幫助用戶進行瀏覽
  • 破壞動態排版

VectorClock的加載動畫

懸停動畫

破壞動態排版-Kilm

4. AnimatedLogos

動畫標志雖然對印刷產品沒有意義,但它對于在線品牌來說卻意義非凡。動畫標志設計將會成為一種新趨勢。它也具備了以下幾個優勢:

  • 吸引注意力。這就意味著動畫標志有助于提高我們產品的知名度
  • 有助于改進SEO (引擎優化)。例如,Google偏愛動態內容,而帶有動態圖形的頁面則會更快速地吸引用戶
  • 在移動設備上具備良好效果。吸引人的動畫logo看起來比靜態logo更有趣
  • 展示產品歷史。動畫標志可以在短短幾秒內展示該產品的使命,甚至是價值觀

動畫標志

?Toridori

某家洗衣機公司的動畫標志

除此之外,我們也可以為現有的logo設置動畫效果,或根據源文件重新考慮其動態設計。例如,我們可以輕松制作帶有字體的動畫標志。

動畫字體

?Shabello, Bobby Voeten

以上這些2022年最新UX/UI設計趨勢非常值得大家關注。大家可以在其中進行挑選,適當應用在自己的項目之中。

 

作者: 交互設計小站;微信公眾號:交互設計小站

來源:https://mp.weixin.qq.com/s/cFd3qy9xM5rV1AdyYP1J_A

本文由 @交互設計小站 授權發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Pexels,基于CC0協議。

作者:周雨潔;公眾號:運營派(id:yunyingpai666)

本文由@運營派 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 是“登錄”不是“登陸”,錯別字

    來自北京 回復
  2. 周思岐到此一游

    回復
    1. 黃煦焓

      回復
  3. 哈哈

    回復
    1. hi

      回復
    2. 你好你好小同桌

      回復
  4. zsq

    回復
    1. 你好

      回復
  5. 6

    回復
  6. 沒想到每天用的餓了嗎還有這么大的學問

    來自山東 回復
  7. 寫的很棒,作者介紹的非常詳細,先碼住,感謝分享

    來自河南 回復
  8. 作者寫的很詳細,感謝分享

    來自福建 回復