2020年UI界面設計的7個趨勢

8 評論 25562 瀏覽 171 收藏 12 分鐘

2019年接近尾聲,最近一直在研究數字設計領域的未來趨勢。從各大設計網站上觀察到一些最受喜愛的作品,從中研究發現未來的界面設計趨勢,包括今年一些受歡迎的設計系統,從中提取一些未來可能的設計風格走向。

之前看過我文章的伙伴知道,我之前寫過一篇圖標趨勢的文章,里面就是探索明年趨勢走向。那么對于界面,同樣的我們需要提前掌握大致設計風格走向,為自家產品改版做一些設計儲備。

Dark Mode?黑夜模式

黑夜模式無疑是今年比較熱的一個設計方向,為什么這么說?

首先是Google材料設計語言更新了,增加暗夜模式。同時今年Q3季度蘋果發布IOS13設計語言系統,里面增加暗夜模式。

不用說后續很多APP應用都會跟隨兩大廠商更新這個黑夜模式設計方向,無疑2020年這個將會持續。黑夜模式出現為減少用戶眼睛疲勞,提升產品使用體驗。

Materials Design Dark Theme

IOS 13 Dark mode

Medium

Instagram

Blank design?留白設計

今年下半年觀察到Facebook旗下的Messenger應用和前段時間雅虎更新他們家品牌語言的同時,也重新設計他們家所有產品。

我們可以看到如下應用截圖,基本去分割線,通過留白區分層級。這樣的好處可以減少分割線對內容的干擾,界面呼吸感增強,達到簡約設計的目的。

Messenger 和 Yahoo

McDonald`s

PINTEREST 和 VSCO

Apple Design?蘋果設計風格

蘋果風一直盛行至今天,包括大圓角卡片設計、大標題、粗字體。蘋果今年剛剛更新的IOS13設計語言同樣的是增強了卡片設計。

這種風格將會在2020年繼續盛行,因此作為設計師我們更應該提前去對這種趨勢熟練掌握。

卡片設計作為承載內容的容器,其實更適用今天移動互聯網的大方向,因為卡片可以作為一個容器封裝復雜的內容,使得模塊層級區分明顯,適配性也是更強,更聚焦,來看下具體案例。

PINTEREST 和 APPSTORE

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

BEHANCE 和 MEDIUM

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

Brand?品牌滲透

為什么要說品牌滲透?Google 在系統設計語言里面增加圖形特征模塊,是什么?就是通過連接品牌元素到產品設計中。

到今天很多應用已經開始熟練掌握這種設計思路了,比如運用到圖標里面或者界面設計中。

蘋果雖然沒有很明確公開說明,但是我們可以從蘋果家族設計語言可以看出,包括線下體驗店、手機硬件、包裝盒以及各種各種物料設計,都是一種白色語言設計風格。

通過顏色與圖形特征做品牌區分,蘋果算是目前做的最好的,史無前例。那么這種趨勢在2020將會一直保持。

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

IBM設計跟隨LOGO有一致基因

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

Grid Design?網格化布局

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

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

Motion?微動效

5G時代已經到來,加上目前硬件升級,動效的普及已經不再是難題。我們可以慢慢發現目前很多產品設計里面都開始加入動效,來提升產品體驗,同時動效也有很強的指導性質。

在某些場景下,使用動效能夠很好與用戶進行互動交流,因此在2020年動效的使用將會越來越多。

GoogleTab Motion

washing-app-ui

logo_corti_

3D Animation?3D動畫

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

restaurant_app_welcome_animation

show_files_natura

3Dflip menu

3D Product Swipe

總結

今天分析了2020年流行的7大設計趨勢,這些設計趨勢也是伴隨著外在關系一起存在的。比如5G來了,那么自然視頻領域肯定是未來值得期待,這就是為什么微信公眾號都開始流行小視頻也是一個原因。

硬件升級自然能支持更多的設計元素融入產品里面。因此作為設計師我們要多觀察這個行業、多看、多思考,來掌握未來產品設計方向。

希望本篇文章能帶給你一些新的觀點與啟發。最后如果你喜歡我的文章,歡迎點贊和轉發,感謝大家!

#專欄作家#

Tony,微信公眾號:洞見設計,人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長,簡歷指導,每周分享最有價值的設計經驗,擅長產品體驗設計,關注【洞見設計】后臺回復“彩蛋”領取設計資料。

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

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 前端表示準備轉后端了

    來自香港 回復
    1. 為什么?

      回復
    2. 開發難吧

      來自廣東 回復
    3. 現在前端比后端好

      回復
  2. 前端要自閉

    來自北京 回復
  3. 這些動效是用怎么做的呀?用什么軟件可以做么?

    來自江西 回復
    1. ps轉的哦,AE可以做

      回復
  4. 不錯不錯

    來自山東 回復