2019 年用戶體驗設計趨勢回顧展

已發表: 2022-03-11

“創造力需要勇氣。” ——亨利·馬蒂斯

隨著豐富的數字內容爭奪數百萬眼球,我們的注意力之爭比以往任何時候都更加激烈。 隨著分心的猖獗,我們可能正在達到所謂的“認知危機高峰”。 圖片、視頻、文本、插圖、動畫和播客充斥著贊助帖子、假新聞、我們朋友的度假照片、火災中的澳大利亞、威尼斯市洪水和戰爭的徵兆,所有這些都在短短的時間內當我們滾動瀏覽社交網絡提要時,超過 10 秒。

通過這場風暴的媒介——數以百萬計的分心,都在爭奪我們的注意力——設計趨勢通過創新和實驗出現。 趨勢的形成通常是因為有創造力的人設想了一些東西,創造了它,人們喜歡它,然後它傳播開來。 有些趨勢的壽命很短,有些會持續更長時間,有些會在幾十年內被回收——見證 60 年代時尚和 Z 世代黑膠​​唱片的回歸。趨勢出現在許多領域和學科:從時尚到髮型,從食品到汽車,從建築到設計,甚至政治。

趨勢源於創造力和大膽的實驗。 1960 年,當髮型冠軍瑪格麗特·芬奇 (Margaret Vinci) 受到《現代美容沙龍》雜誌的編輯的鼓勵,去做定義未來十年的“真正不同的事情”時,她想出了蜂巢式髮型。 它像野火一樣蔓延開來,成為整個 60 年代的熱門趨勢。 奧黛麗赫本的蜂巢,她在經典電影《蒂凡尼的早餐》中精美展示,是最具標誌性的例子之一,碧姬芭鐸對它的凌亂演繹也是如此。

一些過去的設計趨勢,例如蜂巢,可以作為 2019 年 UX 趨勢的一個例子

與許多創新一樣,設計師們在各種媒體上展示他們新鑄造和精心製作的作品,以測試它們並展示它們。 一些用戶體驗設計是真正的努力,讓事情看起來和工作得更好。 有些是虛榮項目,旨在提升設計師並讓他們在 Dribbble 上宣佈設計半神,獲得 10,000 個贊——即使只是短暫的雷達。

在紛繁複雜的選擇中,有些設計被拋棄,有些被保留並成長為一種 UX 設計趨勢——不僅與消費者有關,也與同行有關。 同行們用豎起大拇指或豎起大拇指回應:哦,我喜歡這樣。 看起來不錯。 它使事情變得更好。 我喜歡那種風格。 或者,對我不起作用……有時,被 FOMO(害怕錯過)的症狀所克服,其他設計師也加入了潮流,廣播:看,我很時髦,現代,也很現代! 我與時俱進,檢查一下,這是最新的東西。

模仿是平庸對偉大的最真誠的奉承。 奧斯卡·王爾德

等距插圖 UX 設計趨勢 2019
等距插圖已從過去的工程繪圖技術中重新成為 2019 年 UX 設計趨勢。

一些用戶體驗設計師可能會抵制設計趨勢,因為他們不想被視為追隨者。 有些人完全拒絕設計趨勢,將它們視為曇花一現的時尚,並堅持良好設計的原則。 以“永遠的極簡主義者”為例,他們是任何極簡主義的死敵。 但持不同意見的設計師應該意識到,每種風格和趨勢在世界上都有自己的位置。 當錯誤的趨勢在錯誤的時間、錯誤的媒體、錯誤的背景下被使用時,就會造成嚴重破壞,人們會畏縮。

從設計趨勢中汲取靈感在其他方面也很有用。 當可怕的創意障礙使設計師癱瘓時,從設計趨勢中獲得靈感可能有助於克服它。 尋找新的靈感來源並沒有錯,只要它不會導致盲目的模仿。 受到特定設計趨勢的啟發是對它的創造者的一種認可,承認它有效,並且有效的方法很快就會成為最佳實踐、慣例和既定的設計模式。

讓我們回顧一下 2019 年的 UX 設計趨勢,並重點介紹十幾個重要的趨勢。

2019 年度用戶體驗趨勢:無處不在的插圖

在過去的幾年裡,異想天開的插圖已經滲透到數字設計世界,但在 2019 年被推到了最前沿。這種趨勢是由對視覺有機感性的渴望和遠離冰冷、數字化的渴望推動的,“技術外觀。” 這場運動與最近捲土重來的模擬媒體(黑膠唱片、復古服裝、凸版印刷)相結合,這些都是由實際原材料製成的。 人們渴望有形的東西——自然、有機和合理的東西。

異想天開的插圖捲土重來,成為 2019 年 UX 設計的主要趨勢

庫存圖片和庫存插圖已發布。 從異想天開的數字插圖到黑白炭筆素描,任何具有有機感覺的東西都. 等距插圖風靡一時,不允許擬物化。 這一切都是關於網站和應用程序中的有機外觀的自定義插圖,甚至是按鈕和圖標。

等距插圖是最新 UX 趨勢的一部分
Lemonade 為他們的網站設計的異想天開的插圖完全符合當前的用戶體驗趨勢。

如果設計師可以在插圖中引入一點動作,那就更好了。 緩慢移動、微妙的動畫為靜態插圖添加了有趣的元素,使其栩栩如生。

動畫插圖是網站的下一個 UX 設計趨勢
2019 年最新的 UX 趨勢包括緩慢移動的動畫插圖(谷歌)。

2019 年用戶體驗趨勢包括網站的動畫插圖
動畫插圖引入動作並吸引參觀者的眼球(來源)。

插圖,特別是用於入職序列的插圖,也已進入移動用戶體驗設計。

用於移動引導的酷插圖是最新的 UX 設計趨勢的一部分
Daniel Tkatchenko 和 Pawel Olek 的移動入職序列。

混合趨勢並不少見。 創造性的登陸頁面呈現滾動觸發的視差多媒體動畫,有時將動畫插圖與移動的背景、排版、照片和視頻結合起來。

Gucci 的滾動觸發動畫網站,一種網頁設計用戶體驗趨勢
滾動觸發的動畫插圖在網上銷售 Gucci 包 - Gucci Zumi。

Let's Go Dark:黑暗模式/黑暗主題

由於黑暗主題的日益流行,越來越多的數字設計正在轉向“黑暗面”。 酷炫的新黑暗模式已經侵入了各種平台:操作系統、電視、移動設備和網絡。 Apple 通過他們的 TV UI,然後是 Mac OS Mojave,最後是 iOS 13 和他們的新 iPadOS,助長了黑暗模式的熱潮。 深色主題 UI 有幾個優點:它們看起來很舒服,可以更加時尚和優雅,並且可以節省電池壽命。

然而,如果設計師選擇走陰暗面,他們應該謹慎行事。 可用的調色板可能會受到限制,錯誤的顏色組合可能會折磨眼睛。 除此之外,還會出現各種可用性問題——主要與可掃描性、可讀性和對比度有關。 UX 設計師需要確保 UI 元素(例如按鈕、文本和背景)之間有足夠的對比度。 必須考慮使用的上下文,即查看環境,以及可能查看深色主題 UI 的設備。

Apple TV 深色模式
Apple TV 一直是深色主題 UI 的最早先驅之一。

YouTube 深色主題
桌面上的 YouTube 深色主題。

深色主題移動應用程序正在成為移動用戶體驗設計的趨勢
2019 年,深色主題移動應用程序在移動 UX 設計方面取得了進展(來源)。

最新的用戶體驗趨勢:大多數流行的移動應用程序都有暗模式選項
最受歡迎的移動應用程序也可以在暗模式下工作。

極簡主義/極簡主義

偉大的產品事半功倍。 正如最新的網絡和移動應用程序設計趨勢所表明的那樣,極簡主義作為 UX 設計趨勢很受歡迎。 作為極簡主義的典型代表,蘋果一直是其最有影響力和最有力的支持者。 向設計偶像 Dieter Rams 的理念和“突出設計”的力量致敬,Apple 以極簡主義為導向的硬件和軟件設計可謂是無與倫比。 借鑒蘋果的做法,用戶體驗設計師長期以來一直強調將數字設計降至最低限度的重要性,只為人們提供完成任務所需的絕對必需品。

極簡主義的擁護者認識到,人們的認知資源是有限的,他們處理和理解信息複雜性的能力也是有限的。 人們無法掌握賦予其完整含義所需的刺激的每一個細微差別。 顯著信息是在給定情況下最有可能引起注意的信息,並且對如何感知刺激具有最顯著的影響。

極簡主義網頁設計,2019 年眾多 UX 電子商務趨勢之一
極簡電子商務網站 Toke 的小童鞋。

2019 年用戶體驗設計趨勢:網頁設計中的極簡主義
Iskos Design 的極簡主義網站設計。

極簡主義網頁設計,2019 年用戶體驗趨勢之一
建築集團梅森的極簡主義網頁設計。

“創造力是承擔風險的能力。 真正讓自己處於危險之中,冒著被嘲笑、嘲笑、批評的風險。 但是……你必須冒這個險。” - 刺

與稀疏、冷酷的極簡主義相反,極簡主義是一種高風險、高回報的設計運動,需要承諾和信念的飛躍。 顛覆性、叛逆的用戶體驗設計師——反文化的“設計嬉皮士”——轉向極簡主義,以擴大、響亮並產生影響。 但從墨守成規的極簡主義者中脫穎而出的願望並非沒有風險。 極簡主義可以打出一拳,但也可能適得其反。 這只適用於那些願意冒險並偶爾陷入火焰的大膽大膽的人。

極簡主義者相信頭腦喜歡刺激。 有時近乎奇異,極簡主義的色彩、紋理和圖案層層引起人們的注意,它的宣言宣稱:“我們不會被忽視!” 極簡主義設計涉及設計的許多方面:平面設計、網頁設計、移動設計、室內設計、時尚、建築等等——它是設計師激發和吸引人的一種方式。

2019 年用戶體驗設計趨勢:Hattie Stewart 極簡主義網頁設計
平面藝術家 Hattie Stewart 的極簡主義網頁設計。

南方學生平面設計展的極簡主義設計海報
尼爾·威廉姆斯為阿肯色州立大學南方學生平面設計展設計的海報。

極簡主義設計內飾也可以與用戶體驗設計的下一個大趨勢聯繫起來
Sasha Bikoff 和 Peggy Bell 的室內設計中的極簡主義。

新擬態

設計師想出新擬態是為了保持極簡主義的感覺,同時結合最好的擬物化和材料設計。 擬物化有點過分——試圖模仿現實世界中的物體——而且材料設計太扁平了。 新擬態介於兩者之間。 然而,根據一些批評者的說法,儘管表面上看起來令人興奮,但這種 UX 設計趨勢可能是短暫的。

Neumorphism 允許“乾淨的設計”,去除顏色(通常用於表示 UI 中的元素),取而代之的是,該技術使用略微凸起或縮進的軟陰影來分隔 UI 組件。 與許多趨勢一樣,設計趨勢也可以混合在一起,設計師可以創造“設計趨勢秋葵湯”,這是最新口味的令人興奮的混合體。 例如,新擬態可以與其他趨勢相結合,例如深色主題 UI。

當前的 UX 趨勢:Neumorphism 與暗模式混合
Neumorphism 與暗模式混合用於移動應用程序設計概念(來源)。

最新的 UX 趨勢:Neumorphism 應用概念
neumorphist 趨勢風格的兩個金融應用程序(來源和來源)。

2019 年 UX 設計趨勢,新擬態風格的手機銀行登錄屏幕
以 neumorphist 風格設計的移動銀行應用程序屏幕(來源)。

Neumorphic 時鐘應用程序,另一種移動 UX 設計趨勢
一個神經擬態時鐘應用程序(來源)。

有意義的微交互

“細節不是細節。 他們負責設計。” ——查爾斯·伊姆斯。

正是這些小細節才能將一款好的數字產品變成一款出色的產品。 《微交互》一書的作者 Dan Saffer 將微交互定義為“圍繞單個用例的包含產品時刻——它們有一個主要任務。” 除了美學之外,執行良好、流暢的微交互可以在交互的時刻引起人們的愉悅。 微交互是關於在友好體驗和令人沮喪體驗之間產生差異的關鍵細節。

微交互不僅僅適用於移動應用程序; 它們還可以設計用於網站、桌面應用程序和 Web 應用程序 (SaaS)。 不過,設計師要小心,就像黑暗主題趨勢一樣,小心行事。 在錯誤的地方太多會適得其反並破壞用戶體驗; 因此,謹慎考慮提供多少以及在什麼情況下提供它至關重要。

2019 年交互設計趨勢:網站和移動應用程序中執行良好的微交互
上傳桌面應用程序的序列微交互:暫停、取消和成功(來源)。

滑塊控制微交互:UX 設計的下一個大趨勢
一個異想天開的氣球選擇器滑塊控制微交互(來源)。

拉動刷新動畫微交互移動端UX設計趨勢
拉動刷新動畫微交互(來源)。

更多移動端手勢交互

尋找界麵線索和點擊圖標已成為移動設備上的禁忌。 人們越來越希望移動設備上的各種 UI 元素可滑動,這正在成為移動設計的最佳實踐。 它提供了更好的用戶體驗,因為人們可以以不精確的方式執行手勢。 例如,刷卡比查找並點擊圖標關閉卡片更快、更容易。 在大多數情況下,提供了兩種交互選項。

對於較小的移動交互,例如共享、保存、偏好、放大圖像或在社交信息流中觀看視頻,越來越多地使用分層的可刷卡。 在 Apple 最新的 iOS 13 中,分層卡片模式在其原生應用程序中被廣泛使用。 其他應用程序也在利用這種自然而快速的移動交互技術。

分層卡片模式是另一個不斷增長的移動用戶體驗設計趨勢
對於某些移動交互,可滑動的分層卡片效果更好——這是另一個移動 UX 趨勢。

3D 可視化為產品帶來真實世界的感覺

高端、複雜的攝影很昂貴,而且庫存照片已經過時了。 3D 可視化位於. 當對像以 3D 呈現時,幾乎可以想像它們在那裡被觸摸。 從電子商務產品的數字版本和產品包裝概念到室內設計可視化和等距辦公室平面圖,3D 幫助人們可視化事物的外觀和感覺。 與攝影不同,3D 渲染的圖像可以立即更改為另一種配色方案、縮放並放置在不同的環境中。

3D 可視化是 2019 年 UX 設計的另一個趨勢
專門從事外部和室內設計可視化的設計工作室的網站(來源)。

2019 年用戶體驗趨勢:耐克的 3D 渲染
Nike Sneakerboot 促銷(由 Chris Labrooy 設計)。

Bose 揚聲器的 3D 可視化,2019 年用戶體驗趨勢的一部分
BOSE SoundLink Revolve+ 揚聲器的 3D 渲染(由 Peter Tarka 提供)。

Apple 農曆新年促銷 2019 UX 設計趨勢的 3D 渲染
2019 Apple 中國新年促銷的 3D 渲染圖(作者 Peter Tarka)。

語音交互

人們對語音交互的舒適度正在提高。 我們與無生命的物體交談,它們與我們交談。 不僅當我們的雙手滿了、髒了或者我們正在開車時,我們才會在手機上使用語音交互。 越來越多的人通過語音進行搜索、口述短信以及通過語音命令播放音樂。

為了獲得更多主流媒體的認可,我們與數字語音助手 Alexa、Cortana、Google Assistant 和 Siri 交談,以獲取旅行和天氣信息、購物和訂車。 除了流行的語音助手,使用語音交互的能力越來越多地內置到各種設備和應用程序中。 最近的一項調查發現,人們喜歡使用語音進行交互的原因是因為它快速、準確且無需打字。 換句話說,它減少了摩擦並提供了更好的用戶體驗。

VUI 和語音交互是當前 UX 的一些趨勢
智能家居可以通過內置語音命令的應用程序輕鬆控制(來源)。

增加語音交互是 2019 年及以後的另一個主要用戶體驗趨勢
增加語音交互是 2019 年的另一個主要用戶體驗趨勢。

對話式 UI 和聊天機器人

帶有大型主圖、按鈕、鏈接和表單的傳統登錄頁面正逐漸讓位於最直觀、最自然的交互模式之一——對話。 對話式 UI 提供了令人愉悅、更加個性化和順暢的體驗。

通常,聊天機器人是使用即時消息作為應用程序接口的人工智能平台。 聊天機器人不是通過要求他們填寫表格來給用戶增加負擔,而是通過使交互更加自然和對話來減輕這種負擔。 一些機器人不是人工智能,而是真正的人類通過聊天進行交互以提供更引人注目的用戶體驗。

即使某些事情所花費的時間可能是相同的(例如完成旅行預訂),因為交互是對話式的並且被分解成多個塊,因此減少了認知壓力並改善了用戶體驗。

2019 年最新的 UX 設計趨勢包括對話式 UI
中國四川醬電子商務網站 Flybyjing 使用聊天小工具來吸引人們。

當前的 UX 趨勢包括對話式 UI
Bombom 尿佈在其網站上使用 Messenger 聊天機器人來吸引訪問者。

旅行者可以用來預訂酒店房間的聊天機器人是最新的用戶體驗趨勢之一
使用 Messenger,凱悅酒店使用其客戶關係人員幫助客人進行預訂。

滾動觸發動畫講述故事、銷售產品和服務

在網絡上銷售產品時,產品的超特寫、高端 3D 渲染正在風靡一時。 以生活方式營銷為重點的滾動觸發動畫以引人注目的視覺效果講述引人入勝的電影故事。 它們通常將定格動畫、攝影和視頻與優雅的排版相結合,旨在吸引和吸引人們。

最新的 UX 趨勢是滾動觸發的動畫,講述一個故事並展示產品
Apple 一直是滾動觸發動畫的先驅,這些動畫講述一個故事並展示他們的產品。

最新的用戶體驗趨勢包括展示科技產品的網頁滾動觸發動畫
谷歌也不甘示弱,還通過滾動觸發動畫以引人入勝的方式展示其科技產品。

專注於比人們以老式方式瀏覽的靜態網頁更吸引人的獨特訪問者體驗,各種服務公司也在利用滾動觸發動畫 UX 趨勢來銷售從創意服務到數字設計和品牌的所有內容。

滾動觸發的動畫講故事銷售服務,是最新 UX 設計趨勢的一部分
滾動觸發的動畫故事講述也銷售服務——這是最新的 UX 設計趨勢 (Bukwild) 的一部分。

具有強大排版的混合媒體網站

在過去的幾年裡,網絡以充滿自我播放視頻、動畫 GIF、3D 動畫和滾動觸發動畫插圖的多媒體頁面而生機勃勃。 再加上響亮的排版和視差滾動,感覺就像除了廚房水槽之外的所有東西都被扔進去了——但如果做得好,加上一些克制和精緻的風格,它們肯定會吸引遊客的注意力。 體驗不再被設計為線性的,而是豐富且引人入勝的。

混合媒體滾動觸發動畫和強大的排版是 2019 年的另一個 UX 趨勢
更多帶有視頻、不尋常的顏色和強大的排版 (Awwwards) 的滾動觸發動畫。

用戶體驗設計的下一個大趨勢可能是網頁上更大膽的排版和動畫
大膽的排版和簡單的動畫——KathArt Interactive。

2019 年用戶體驗設計趨勢包括網站上的多媒體動畫
Brand Studio Russia 的一個異想天開的動畫網站。

最新的用戶體驗趨勢包括帶有視頻的滾動觸發動畫、不尋常的顏色和強大的排版
支付平台網站 Plink 上的 3D、視頻和動畫。

電子商務通過 3D、AR 和 Motion 活躍起來

在現實世界中購物是一種觸覺體驗。 研究表明,電子商務網站產品頁面上的視頻或 3D 動畫往往會銷售更多產品,因為人們可以更好地了解它們。 通過增強現實 (AR) 插入現實生活的產品也往往效果更好,因為人們可以“試戴”或將產品放入現實生活環境中。 隨著快速互聯網連接的增加和瀏覽器在呈現各種多媒體內容方面的能力越來越強,這些電子商務用戶體驗趨勢必將繼續下去。

2019 年用戶體驗電子商務趨勢
提供 360 度全方位視圖的 3D 產品渲染是 2019 年的另一個 UX 電子商務趨勢(RIMOWA)。

UX設計的下一個大趨勢:增強現實電子商務傾向於更好地銷售產品
Chrono24 上的手錶可以通過計算機視覺進行掃描,並通過增強現實“試戴”。

用戶體驗設計的下一個大趨勢:電子商務中的運動銷售更多產品
UX 設計的下一個大趨勢——電子商務網站上的視頻往往會銷售更多產品(Alo Yoga)。

選擇 UX 設計趨勢將繼續存在

儘管如果不明智地跟上最新的 UX 趨勢可能是一個陷阱,但跟上最新趨勢至關重要。 這樣做可以幫助用戶體驗設計師成為或保持領先地位。 UX 設計趨勢可以促進 UX 設計師努力滿足人們的高期望,因為在大多數情況下,它們已經通過 UX 設計實驗過濾並被證明是有效的。

每年,都會出現熱門的新用戶體驗設計趨勢。 有些會流行,有些會衰落並最終消失。 通過一個無情的淘汰過程,只有最有用和最耐用的才能存活下來,這對於推進設計卓越用戶體驗的藝術和科學非常有用。

• • •

進一步閱讀 Toptal 設計博客:

  • 展望未來——2020年設計趨勢
  • UX 久經考驗的真實法則(附信息圖)
  • 通過這些 Photoshop 教程掌握熱門設計趨勢
  • 顯著的電子商務趨勢及其對設計的影響(附信息圖)
  • 所有的趨勢都值得嗎? 網頁設計師最常見的 5 個用戶體驗錯誤