2019年接近尾聲，最近一直在研究數(shù)字設(shè)計(jì)領(lǐng)域的未來(lái)趨勢(shì)。從各大設(shè)計(jì)網(wǎng)站上觀察到一些最受喜愛(ài)的作品，從中研究發(fā)現(xiàn)未來(lái)的界面設(shè)計(jì)趨勢(shì)，包括今年一些受歡迎的設(shè)計(jì)系統(tǒng)，從中提取一些未來(lái)可能的設(shè)計(jì)風(fēng)格走向。之前看過(guò)我文章的伙伴知道，我之前寫(xiě)過(guò)一篇圖標(biāo)趨勢(shì)的文章，里面就是探索明年趨勢(shì)走向。那么對(duì)于界面，同樣的我們需要提前掌握大致設(shè)計(jì)風(fēng)格走向，為自家產(chǎn)品改版做一些設(shè)計(jì)儲(chǔ)備。

黑夜模式

-

黑夜模式無(wú)疑是今年比較熱的一個(gè)設(shè)計(jì)方向，為什么這么說(shuō)？首先是Google材料設(shè)計(jì)語(yǔ)言更新了，增加暗夜模式。同時(shí)今年Q3季度蘋(píng)果發(fā)布IOS13設(shè)計(jì)語(yǔ)言系統(tǒng)，里面增加暗夜模式。不用說(shuō)后續(xù)很多APP應(yīng)用都會(huì)跟隨兩大廠商更新這個(gè)黑夜模式設(shè)計(jì)方向。無(wú)疑2020年這個(gè)將會(huì)持續(xù)。黑夜模式出現(xiàn)為減少用戶(hù)眼睛疲勞，提升產(chǎn)品使用體驗(yàn)。

Materials Design

IOS 13 Dark  

IOS 13 Dark  (宣傳視頻，由于視頻上傳麻煩，因此截圖)

MEDIUM

INSTAGRAM

留白設(shè)計(jì)

-

今年下半年觀察到Facebook旗下的Messenger應(yīng)用和前段時(shí)間雅虎更新他們家品牌語(yǔ)言的同時(shí)，也重新設(shè)計(jì)他們家所有產(chǎn)品。我們可以看到如下應(yīng)用截圖，基本去分割線，通過(guò)留白區(qū)分層級(jí)。這樣的好處可以減少分割線對(duì)內(nèi)容的干擾，界面呼吸感增強(qiáng)，達(dá)到簡(jiǎn)約設(shè)計(jì)的目的。

Messenger 和 Yahoo

McDonald`s

PINTEREST 和 VSCO

蘋(píng)果風(fēng)格設(shè)計(jì)

-

蘋(píng)果風(fēng)一直盛行至今天，包括大圓角卡片設(shè)計(jì)、大標(biāo)題、粗字體。蘋(píng)果今年剛剛更新的IOS13設(shè)計(jì)語(yǔ)言同樣的是增強(qiáng)了卡片設(shè)計(jì)。這種風(fēng)格將會(huì)在2020年繼續(xù)盛行，因此作為設(shè)計(jì)師我們更應(yīng)該提前去對(duì)這種趨勢(shì)熟練掌握。卡片設(shè)計(jì)作為承載內(nèi)容的容器，其實(shí)更適用今天移動(dòng)互聯(lián)網(wǎng)的大方向，因?yàn)榭ㄆ梢宰鳛橐粋€(gè)容器封裝復(fù)雜的內(nèi)容，使得模塊層級(jí)區(qū)分明顯，適配性也是更強(qiáng)，更聚焦，來(lái)看下具體案例。

PINTEREST 和 APPSTORE

Pinterest是今年9月份左右剛更新的設(shè)計(jì)，圓角卡片大范圍的運(yùn)用。

BEHANCE 和 MEDIUM

Medium對(duì)重點(diǎn)欄目在今年更新設(shè)計(jì)時(shí)候啟用了卡片。

品牌穿透

-

為什么要說(shuō)品牌穿透？Google 在系統(tǒng)設(shè)計(jì)語(yǔ)言里面增加圖形特征模塊，是什么？就是通過(guò)連接品牌元素到產(chǎn)品設(shè)計(jì)中。到今天很多應(yīng)用已經(jīng)開(kāi)始熟練掌握這種設(shè)計(jì)思路了，比如運(yùn)用到圖標(biāo)里面或者界面設(shè)計(jì)中。蘋(píng)果雖然沒(méi)有很明確公開(kāi)說(shuō)明，但是我們可以從蘋(píng)果家族設(shè)計(jì)語(yǔ)言可以看出，包括線下體驗(yàn)店、手機(jī)硬件、包裝盒以及各種各種物料設(shè)計(jì)，都是一種白色語(yǔ)言設(shè)計(jì)風(fēng)格。通過(guò)顏色與圖形特征做品牌區(qū)分，蘋(píng)果算是目前做的最好的，史無(wú)前例。那么這種趨勢(shì)在2020將會(huì)一直保持。

APPle體系產(chǎn)品與LOGO相粘性強(qiáng)，具有超強(qiáng)的記憶點(diǎn)

Google家族品牌穿透（由于視頻原因，此部分截圖）

IBM設(shè)計(jì)跟隨LOGO有一致基因

網(wǎng)格化布局

-

網(wǎng)格化是一切設(shè)計(jì)系統(tǒng)的基礎(chǔ)，Materials Design,Apple Design,IBM Design,Naver Design,等等這幾家在設(shè)計(jì)語(yǔ)言基礎(chǔ)上對(duì)網(wǎng)格研究與應(yīng)用算是比較成熟的，Naver方形網(wǎng)格，Google的8px網(wǎng)格，IBM 2PX網(wǎng)格，蘋(píng)果其實(shí)沒(méi)有很強(qiáng)調(diào)他們家網(wǎng)格系數(shù)，其實(shí)我們可以細(xì)看他們已經(jīng)提到8px Grid 。因此網(wǎng)格化在2020將是非常重要的。

IBM 2PX網(wǎng)格語(yǔ)言

微動(dòng)效

-

5G時(shí)代已經(jīng)到來(lái)，加上目前硬件升級(jí)，動(dòng)效的普及已經(jīng)不再是難題。我們可以慢慢發(fā)現(xiàn)目前很多產(chǎn)品設(shè)計(jì)里面都開(kāi)始加入動(dòng)效，來(lái)提升產(chǎn)品體驗(yàn)，同時(shí)動(dòng)效也有很強(qiáng)的指導(dǎo)性質(zhì)。在某些場(chǎng)景下，使用動(dòng)效能夠很好與用戶(hù)進(jìn)行互動(dòng)交流，因此在2020年動(dòng)效的使用將會(huì)越來(lái)越多。

Google Tab Motion

E Google01

G 圖標(biāo)動(dòng)畫(huà)

washing-app-ui

細(xì)節(jié)動(dòng)畫(huà)

3D動(dòng)畫(huà)

-

隨著硬件升級(jí)，5G時(shí)代開(kāi)始大面積推廣與普及，在應(yīng)用程序里面使用3D動(dòng)畫(huà)來(lái)展示產(chǎn)品是一個(gè)很不錯(cuò)的選擇，3D更加貼近真實(shí)環(huán)境，貼近我們真實(shí)物理世界。

3D展示商品

3D登錄頁(yè)

3D Product Swipe

總結(jié)

-

今天分析了2020年流行的7大設(shè)計(jì)趨勢(shì)，這些設(shè)計(jì)趨勢(shì)也是伴隨著外在關(guān)系一起存在的。比如5G來(lái)了，那么自然視頻領(lǐng)域肯定是未來(lái)值得期待，這就是為什么微信公眾號(hào)都開(kāi)始流行小視頻也是一個(gè)原因。硬件升級(jí)自然能支持更多的設(shè)計(jì)元素融入產(chǎn)品里面。因此作為設(shè)計(jì)師我們要多觀察這個(gè)行業(yè)、多看、多思考，來(lái)掌握未來(lái)產(chǎn)品設(shè)計(jì)方向。希望本篇文章能帶給你一些新的觀點(diǎn)與啟發(fā)。

轉(zhuǎn)自：站酷-設(shè)計(jì)TNT