2020年UI界面設計趨勢 [復制鏈接]

2019-11-6 10:01
Torr 閱讀:200 評論:1 贊:1
Tag:  UI設計

2019年接近尾聲,最近一直在研究數字設計領域的未來趨勢。從各大設計網站上觀察到一些最受喜愛的作品,從中研究發現未來的界面設計趨勢,包括今年一些受歡迎的設計系統,從中提取一些未來可能的設計風格走向。之前看過我文章的伙伴知道,我之前寫過一篇圖標趨勢的文章,里面就是探索明年趨勢走向。那么對于界面,同樣的我們需要提前掌握大致設計風格走向,為自家產品改版做一些設計儲備。


Dark Mode

黑夜模式

-

黑夜模式無疑是今年比較熱的一個設計方向,為什么這么說?首先是Google材料設計語言更新了,增加暗夜模式。同時今年Q3季度蘋果發布IOS13設計語言系統,里面增加暗夜模式。不用說后續很多APP應用都會跟隨兩大廠商更新這個黑夜模式設計方向。無疑2020年這個將會持續。黑夜模式出現為減少用戶眼睛疲勞,提升產品使用體驗。



Materials Design Dark Theme

2020年UI界面設計趨勢


IOS 13 Dark mode


IOS 13 Dark mode 宣傳視頻


2020年UI界面設計趨勢


Medium


2020年UI界面設計趨勢

Instagram

2020年UI界面設計趨勢


2020年UI界面設計趨勢


Blank design

留白設計

-

今年下半年觀察到Facebook旗下的Messenger應用和前段時間雅虎更新他們家品牌語言的同時,也重新設計他們家所有產品。我們可以看到如下應用截圖,基本去分割線,通過留白區分層級。這樣的好處可以減少分割線對內容的干擾,界面呼吸感增強,達到簡約設計的目的。


2020年UI界面設計趨勢


Messenger 和 Yahoo

2020年UI界面設計趨勢


McDonald`s


2020年UI界面設計趨勢


PINTEREST 和 VSCO


2020年UI界面設計趨勢


Apple Design

蘋果設計風格

-

蘋果風一直盛行至今天,包括大圓角卡片設計、大標題、粗字體。蘋果今年剛剛更新的IOS13設計語言同樣的是增強了卡片設計。這種風格將會在2020年繼續盛行,因此作為設計師我們更應該提前去對這種趨勢熟練掌握。卡片設計作為承載內容的容器,其實更適用今天移動互聯網的大方向,因為卡片可以作為一個容器封裝復雜的內容,使得模塊層級區分明顯,適配性也是更強,更聚焦,來看下具體案例。


2020年UI界面設計趨勢


PINTEREST 和 APPSTORE

Pinterest是今年9月份左右剛更新的設計,圓角卡片大范圍的運用。


2020年UI界面設計趨勢


BEHANCE 和 MEDIUM


Medium對重點欄目在今年更新設計時候啟用了卡片。


2020年UI界面設計趨勢


2020年UI界面設計趨勢


Brand

品牌滲透

-

為什么要說品牌滲透?Google 在系統設計語言里面增加圖形特征模塊,是什么?就是通過連接品牌元素到產品設計中。到今天很多應用已經開始熟練掌握這種設計思路了,比如運用到圖標里面或者界面設計中。蘋果雖然沒有很明確公開說明,但是我們可以從蘋果家族設計語言可以看出,包括線下體驗店、手機硬件、包裝盒以及各種各種物料設計,都是一種白色語言設計風格。通過顏色與圖形特征做品牌區分,蘋果算是目前做的最好的,史無前例。那么這種趨勢在2020將會一直保持。


2020年UI界面設計趨勢


2020年UI界面設計趨勢


2020年UI界面設計趨勢

Apple體系產品與LOGO相粘性強,具有超強的記憶點

Google家族品牌穿透

IBM設計跟隨LOGO有一致基因


2020年UI界面設計趨勢


2020年UI界面設計趨勢

ibm文字特征與圖標語言庫某些元素一致

2020年UI界面設計趨勢


2020年UI界面設計趨勢


2020年UI界面設計趨勢


2020年UI界面設計趨勢



2020年UI界面設計趨勢


2020年UI界面設計趨勢



Grid Design

網格化布局

-

網格化是一切設計系統的基礎,Materials Design,Apple Design,IBM Design,Naver Design,等等這幾家在設計語言基礎上對網格研究與應用算是比較成熟的,Naver方形網格,Google的8px網格,IBM 2PX網格,蘋果其實沒有很強調他們家網格系數,其實我們可以細看他們的設計規范,已經提到8px Grid。因此網格化布局在2020將是非常重要的一個工具。


IBM 2PX網格語言


2020年UI界面設計趨勢



2020年UI界面設計趨勢


2020年UI界面設計趨勢



2020年UI界面設計趨勢


2020年UI界面設計趨勢

一致的網格基因能夠沿用到設計體系的任何地方,包括布局、字體行高,圖標網格等等

Motion

微動效

-

5G時代已經到來,加上目前硬件升級,動效的普及已經不再是難題。我們可以慢慢發現目前很多產品設計里面都開始加入動效,來提升產品體驗,同時動效也有很強的指導性質。在某些場景下,使用動效能夠很好與用戶進行互動交流,因此在2020年動效的使用將會越來越多。


2020年UI界面設計趨勢


Google Tab Motion


2020年UI界面設計趨勢


washing-app-ui


2020年UI界面設計趨勢


logo_corti_

3D Animation

3D動畫

-

隨著硬件升級,5G時代開始大面積推廣與普及,在應用程序里面使用3D動畫來展示產品是一個很不錯的選擇,3D更加貼近真實物理環境,貼近我們生活。


2020年UI界面設計趨勢


restaurant_app_welcome_animation

2020年UI界面設計趨勢

show_files_natura


2020年UI界面設計趨勢


3D flip menu



2020年UI界面設計趨勢


3D Product Swipe


我來說兩句
您需要登錄后才可以評論 登錄 | 立即注冊
facelist
所有評論(1)
gunner880101 2019-11-7 20:20
  
回復
領先的中文移動開發者社區
18620764416
7*24全天服務
意見反饋:[email protected]

掃一掃關注我們

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粵ICP備15117877號 )

安卓版28杠游戏