2020 年 UI 趨勢:商店裡有什麼?

已發表: 2022-03-11

2020 年已經到來,隨之而來的是一個回顧去年哪些 UI 趨勢有效以及今年可能繼續有效的機會。 新年伊始提供了一個絕佳的機會來了解新興的 UI 設計趨勢,這些趨勢將繼續流行。

對於希望能夠為客戶提供創新想法的 UI 設計師來說,掌握設計行業的新事物、有用(或無用)以及失寵的事物至關重要。 回顧趨勢並研究它們如何向前發展對於這項努力至關重要。

2020 年 UI 趨勢將包括 UI 設計中的講故事(而不是僅根據 UX 考慮項目)、3D 圖形和動畫、獨特的微交互、黑暗主題、簡單性、語音交互等。

2020 年 UI 趨勢包括簡單、現代的 UI 設計
音樂應用程序 UI(由 Humayra Kabir Anamika 設計)。

評書

講故事通常只考慮到用戶體驗。 但是,UI 設計師也可以在講故事的過程中發揮重要作用。

通過使用顏色、排版、動畫和交互設計,UI 設計師可以實現良好 UX 所需的故事。

谷歌的 Pixel Earbuds 登陸頁面是 UI 講故事的一個引人注目的例子。 它通過周到的動畫、相關的圖像和出色的排版引導訪問者了解產品的好處,以產生積極的情緒反應。

UI 設計趨勢包括講故事,這是 Google 擅長的
通過動畫和圖像講述 UI 故事。

3D 圖形和動畫

3D 圖形和動畫並不是 UI 設計的新手。 近年來,它們在多個產品類別中的頻率有所增加。 尤其是 VR 和 AR 應用程序,已經利用這些元素來查看實際房間中的家具。 另一個常見的例子是在電子商務網站上流行的 360 度產品視圖。

誠聘美國全職自由 UI 設計師

如果 UI 設計需要特別引人注目,3D 圖形是實現這一目標的絕佳方式。 動畫增加了視覺吸引力。 雖然這些效果比 2D 版本更耗時,並且需要專門的技能,但在它們增加整體用戶體驗的情況下,它們值得額外的資源。

3D 圖形和動畫是 UI 設計 2020 的重要組成部分
選擇產品選項並將產品添加到購物車(作者 Dannniel)。

獨特的微交互

微交互是任何優秀數字產品設計的基本要素。 然而,它們仍然被許多 UI 設計師和利益相關者所忽視。

微交互為用戶提供了額外的洞察力和反饋。 它們可以包括交互動畫、顯示不同狀態的顏色變化以及移動應用程序中的觸覺反饋等內容。 微交互可以將設計從功能提升到卓越。

2020 年 UI 設計趨勢包括獨特的微交互
上傳和下載進度條(由 xjw 提供)。

黑暗主題

深色主題已經存在了幾年,但在 2019 年開始流行。Apple 在發布 Mojave 更新時為推動這一趨勢做了很多工作,該更新能夠在支持它的應用程序中自動默認為深色主題。 他們還發布了 iOS 更新,提供了相同的暗模式功能。

深色 UI 主題將在 2020 年繼續增長。除了視覺吸引力之外,最顯著的好處之一是,對於某些人來說,具有適當對比度的深色主題可以幫助緩解眼睛疲勞。

獲得黑暗主題處理的最新重要應用程序之一是 Gmail,它於 9 月開始推出該選項。 既然三大科技巨頭(蘋果、谷歌,甚至 Facebook 的移動應用程序)都加入了黑暗主題的行列,這種趨勢在不久的將來不太可能消失。

深色設計是一個重要的趨勢 UI
音樂播放器用戶界面(Martin Mroc)。

簡單

每隔幾年,簡單和極簡主義就會在 UI 設計中進進出出。 現在,他們進來了。

簡單的設計將功能放在首位。 簡單性更多是設計原則的集合,而不是單一趨勢。 簡單的設計通常包含格式塔原則、大膽的排版、極簡的調色板和大量的空白。

設計的簡單性並不容易創造。 這需要設計師的信心,每個元素都必須完美,因為沒有什麼可以隱藏有問題的設計選擇。 如果做得好,它會營造出人們喜歡使用的優雅、高品質的感覺。

應用程序設計趨勢包括簡單的 UI 設計
White Noise 應用程序(由 Romeo M. 為 Queble 設計)。

語音交互

語音交互曾經被保留在科幻小說領域。 智能手機和移動應用程序改變了這一點,使語音交互不僅成為可能,而且成為主流。 允許人們通過語音命令與應用程序交互打開了與產品交互的可能性世界。 當消費者可以發出語音命令時,他們可以在觸摸界面不安全或不實用的情況下使用應用程序——例如在開車或遵循食譜或教程時。

語音交互並不新鮮,但早期的迭代很笨拙,而且通常效果不佳。 在過去的幾年裡,語音交互已經發展成為一種與應用程序進行通信的實用方法(通常有人工智能輔助)。 隨著語音控制的進一步改進,這種趨勢不太可能消失。 谷歌在 2019 年 I/O 大會上宣布對其 Google Assistant 功能進行重大升級,一些人推測這可能是語音交互幾乎完全取代觸摸交互的開始。

UI 設計師將受益於熟悉語音交互的工作原理以及如何將它們最好地集成到他們的產品中,尤其是移動應用程序中。 最終,語音交互可能會超過其他類型的交互,包括在網絡上。

2020 年移動 UI 趨勢包括語音交互
語音微交互(由 Filipe Ferrari 提供)。

排版 UI 設計趨勢

每年都會出現新的排版趨勢,去年也不例外。 一些可能會在 2020 年持續的更突出的 UI 趨勢包括回歸襯線字體、不太大的英雄文本以及與其他元素分層的字體。

當圖形用戶界面設計首次出現時,襯線字體通常被認為難以在屏幕上閱讀。 低屏幕分辨率意味著字體更精細的細節(以及一般的小規模視覺細節)丟失,使得許多傳統上在印刷中效果很好的字體在計算機屏幕上看起來很糟糕。

隨著屏幕分辨率的提高,襯線字體在屏幕上難以閱讀的想法一直存在。 近年來這種情況發生了變化,襯線字體隨處可見,包括在標題和英雄文本中,它們通常不如無襯線字體和顯示字體對應物那麼常見。

似乎英雄文本每年都在變得越來越大,經常佔據網站“首屏”的整個空間。 這種情況在 2019 年發生了變化,在英雄和標題圖像上使用了更小的(儘管仍然很突出)文本。 這是一個可喜的變化,它重新引入了空白作為英雄設計的一個有價值的部分。

具有圖形元素的分層類型,無論是在圖像下方還是在圖像頂部(或有時兩者兼而有之),是另一個增長趨勢。 有時,文本被盒裝圖像或顏色覆蓋或覆蓋,而其他時候,它與其他視覺元素完全集成。

用戶界面趨勢包括排版趨勢
A-LAB 設計工作室網站(由 Mike | Creative Mints 提供)。

展望 2020 年 UI 趨勢

最好的 UI 趨勢在視覺上具有吸引力,同時改善了數字產品的整體體驗和實用性。 上述趨勢將繼續發展,2020 年可能會出現新的趨勢。

隨著大品牌採用趨勢,它們變得越來越普遍,它們演變成標準並成為數字環境的一部分。 這種演變已經隨著黑暗主題等趨勢而發生。

在其他情況下,趨勢會持續幾年,然後隨著更好的想法和方法的出現而被淘汰。 這方面的一個例子是視差滾動 UI,它在幾年前非常流行,但到 2020 年就不再那麼突出了。

新趨勢將在 2020 年出現,其中一些趨勢可能會在今年年底消失。 專業的 UI 設計師一直在尋找更好的方式來呈現內容,這意味著 2020 年的一些 UI 趨勢將在 2021 年之前從數字時代精神中消失。

• • •

進一步閱讀 Toptal 設計博客:

  • 展望未來——2020年設計趨勢
  • Toptal 設計博客 2020 年度色彩
  • 2019 年用戶體驗設計趨勢回顧展
  • 所有的趨勢都值得嗎? 網頁設計師最常見的 5 個用戶體驗錯誤
  • 跟隨趨勢:致敬與設計抄襲