小紐扣

在上篇文章《2020年設計趨勢 · 交互篇》中,分享了科技發展對交互設計產生的影響和變化。這一期,我想和大家談談設計趨勢的第二部分:UI用戶界面的應用與最新趨勢,供大家參考。

 

01. 創意動畫

–?品牌加載

公眾喜歡有趣,可塑的動畫。Airbnb 和 Netfilx 將品牌logo動畫應用到了啟動頁和加載頁面。結合品牌特點、風格和符號,融合到產品設計中,從而提升視覺的一致性,創造屬于特有性格的產品界面。

Netflix?& Airbnb

 

– 圖標動畫

微交互是建立在移動端上微妙視覺效果的小動畫,而圖標動畫是微交互其中的一種。它的目的是吸引用戶,讓用戶感覺順暢、愉悅。為此設計師借此創造出打動人心的瞬間。

最近,讓我印象深刻的一個圖標動畫是 Facebook 的新消息提醒界面,這些由產品所包含的一個個小細節,創造出了新穎而有趣的設計。

Facebook?Website

 

02. 留白分隔

在UI界面中,最常見的分隔方式是用細線對模塊進行劃分。但隨著設計重心趨向簡約,注重內容本身,傳統的分隔線方式就略顯多余。

根據格式塔親密原則,通過留白控制間距大小,可以清晰的劃分模塊層級,同時界面看起來也更加透氣、富有張力。可以看到QQ、飛聊、Gmail、Messenger等應用都采用留白分隔。

Gmail & Messenger

 

03. 融入插圖

–?品牌形象插畫

一個好的插畫作品可以為產品帶來極佳的辨識度。Snapchat的頁面用了很多情感化設計和品牌形象。包括開啟通知引導動畫、查找好友landing page、下拉刷新頁、照片回憶等等。

從品牌的個性化設計,尋找一種基于插畫的設計語言,把產品塑造成一個高辨識度的ID。

Snapchat

 

–?3D插畫

隨著軟件技術的提升,3D插畫在這幾年中大受歡迎,很多應用都使用3D渲染產品,如:星巴克、Keep、毒App等等,因為它真實立體、有著更高的轉化率。

Starbucks by Wojciech

 

Keep?& 毒

 

04. 圓角卡片

圓角代表友好、親和力;而卡片模塊化的布局更為清晰、有效、整潔。

在上周的微信改版《微信 7.0.5 發布:9個細節提升體驗》的文章中,我講到了訂閱號的推送文章去掉了標題欄的背景,卡片變的更加簡潔。另外,公眾號詳情頁由原先的列表式,改成了圓角卡片式,彈窗也由直角改成圓角。

Broadcasting?&?微信

 

05. 視頻背景

長期以來,圖像在視覺設計中起著至關重要的作用,而視頻能夠更直觀的吸引用戶,傳達主要的思想。

在移動端中,視頻主要用于登錄頁背景,一般可以是幾秒鐘的循環剪輯視頻,它可以帶來一種身臨其境的感受體驗。

Lyft?&?Nike

 

06. 輕提示

Toast是一種輕量級的提示,它作為用戶操作后的反饋。UI形態上從居中浮層,慢慢趨向于底部通欄樣式。這樣設計的好處是不會擋住當前界面的內容。

舉一個反例就是,iOS的調整音量提示,大范圍的遮住了界面,特別是對正在玩游戲的用戶非常不友好,直到iOS13這個設計才被修改。

Google Earth?& Spotify

 

07.?色彩平鋪

隨著扁平化設計和 Material Design 進一步占據主流趨勢,簡約的界面,明亮,大膽的色彩一直都處于增長趨勢。色彩平鋪已經成為清新、酷炫、數字時代的代名詞。

Snapchat &?Spotify

 

08.?注重內容

重內容、輕UI。把注意力引導在重要內容和功能上。像Facebook、Instagram 這種以圖片社交為主的App都有一個特點,就是文字都是黑白灰,將彩色交給圖片去傳達,讓用戶關注內容即可。

Facebook?for Android

 

09. AR

增強現實類的技術,已經出現在很多Web、App等領域中。許多平臺開發者也將增強現實技術納入其開發工具里面,可預期的這種類型的App將會越來越多。

–?地圖導視界面

地圖+AR,讓你不再盯著二維平面上那個藍色的點,而是現實世界中的箭頭告訴你在哪個路口轉向。

Google Map

 

–?表情貼紙

還有像Instagram、Snapchat、Messenger等平臺上可用的AR濾鏡來創作,表情貼紙可以幫助用戶更直白有效地自我表達、獲取注意力。

Spark AR

 

10. 車載系統界面

隨著5G、車聯網、人工智能、自動駕駛的發展,車載界面也越來越受重視了。

在今年的 Google I/O 開發者大會上,針對車載系統Android Auto,推出了新的設計語言,它有著更好的可拓展性。在UI上,完全重新設計了導航欄,能夠更輕松的訪問應用、通知,和你的Google智能助理,最大限度的幫助駕駛者減少分心,將注意力集中在道路上。

Android Auto UI

此外,還開發了新的系統小部件?,在使用地圖進行導航時,仍然可以一鍵控制音樂應用,或者正在進行的電話,同時在屏幕上保持地圖的完整視圖。

 

總結

UI設計的趨勢除了側重內容和情感之外,還會根據不同設備載體、新的技術(3D、AR)而變化。但歸根結底還是以人為本,借用Adobe設計副總裁 Jamie Myrold 的一句話:如今設計師要思考的,絕不僅僅是設計一款App、網站或設計工具。我們要思考的是人類的需求,用戶的需求;打造真正人性化,多元化與包容性的設計。

 

原文地址:洋爺(公眾號)

作者:洋爺

轉載請注明:學UI網 » 2020年設計趨勢 · UI篇

登錄收藏
 
你可能喜歡的:
獨家 | 2020年交互設計趨勢獨家 | 2020年交互設計趨勢
Behance 年度好文!2020年設計趨勢全方位分析Behance 年度好文!2020年設計趨勢全方位分析
2019中國用戶體驗行業調查報告2019中國用戶體驗行業調查報告
扁平風格的問題在哪?扁平風格的問題在哪?
體驗設計“發展觀”- 期望能力模型體驗設計“發展觀”- 期望能力模型
重磅登場!2019,雙11創意貓頭秀重磅登場!2019,雙11創意貓頭秀
?iOS 13 做了哪些體驗升級?iOS 13 做了哪些體驗升級
動效賦能 助力用戶體驗設計動效賦能 助力用戶體驗設計
折疊屏場景設計探討折疊屏場景設計探討
iOS 13 隱秘的細節④:系統組件·下iOS 13 隱秘的細節④:系統組件·下
?
陕西快乐10分