現(xiàn)在，越來越多設(shè)計(jì)師在Dribbble分享他們的作品，和一些很新的概念。一些作品很商業(yè)，而另外一些作品可能影響未來的設(shè)計(jì)方向。無論如何，Dribbble都是我們尋找靈感分享設(shè)計(jì)的好地方。今天我們要從中挖掘出2018年的ui設(shè)計(jì)趨勢。希望能夠該大家?guī)韼椭?

1. 在網(wǎng)頁的突出位置加入插圖

在網(wǎng)頁中加入定制化設(shè)計(jì)的插畫是今年最流行的趨勢之一。這些插畫引人入勝。圖片的感知比文字更快，因此插圖可以吸引用戶的注意，讓用戶更了解產(chǎn)品和服務(wù)。

InVision?插圖介紹google的設(shè)計(jì)研究

Mike Creative Mints的著陸頁。推薦小孩設(shè)計(jì)的一款app。采用了大字體和可愛的吉祥物插圖。

來源：Dmitri Kharchenko

設(shè)計(jì)師Ksenia Shokorova? 的全屏插畫概念設(shè)計(jì)

2.為移動設(shè)備定制插圖

在移動界面中使用定制的插畫的趨勢也在不斷增加。特別在是在引導(dǎo)頁，各種風(fēng)格的插圖，可以為產(chǎn)品講述一個(gè)好故事。

Nimasha Perera的插圖

有趣的引導(dǎo)頁插圖

3.分屏

今天在dribbble出現(xiàn)的分屏設(shè)計(jì)比較多。根據(jù)設(shè)計(jì)的需要，分屏設(shè)計(jì)的原因主要有：

1，引起人注意的對比色彩

2，分離不同的內(nèi)容

3，分隔不同的交互區(qū)域

4，呈現(xiàn)多元化的選擇

5，讓內(nèi)容更具響應(yīng)性

Giga Tamarashvili的概念網(wǎng)頁設(shè)計(jì)使用分割背景

4.大膽而惹人注目的排版

精心設(shè)計(jì)和有吸引力的排版一直是設(shè)計(jì)趨勢。好的排版讓內(nèi)容有意義，也美觀。精心挑選的字體可以傳遞情感并構(gòu)建強(qiáng)大的視覺層次感。

Zhenya Rynzhuk設(shè)計(jì)的電影院主頁

Zhenya Rynzhuk的另外一個(gè)設(shè)計(jì)，沒有圖片，只有字體

5.多種色調(diào)的紫色

自從pantone發(fā)布了2018年的流行色為紫色后，越來越多的網(wǎng)頁也在使用這一個(gè)象征奢侈的顏色。在色彩心理學(xué)中，紫色被稱為與奢侈品（皇室和財(cái)富），激情和神秘相關(guān)的顏色;?它被描述為結(jié)合藍(lán)色穩(wěn)定性和紅色能量的顏色。我不敢說這是現(xiàn)在這么多設(shè)計(jì)師轉(zhuǎn)向這種顏色的原因 - 或者僅僅因?yàn)樗軙r(shí)尚。無論如何，今年它在所有各種色調(diào)，色調(diào)和漸變中處于領(lǐng)先地位。

Zahidul的概念網(wǎng)頁使用了紫色的插畫設(shè)計(jì)

Ted Kulakevich的概念著陸頁也將主題插圖應(yīng)用于屏幕的左半部分，并使用紫色。這里的插圖允許設(shè)計(jì)師將屏幕分成兩個(gè)內(nèi)容區(qū)域，使對比度更加生動。

Johny Vino的概念應(yīng)用設(shè)計(jì)了兩種背景色：白色和深紫色

Walid Beno 的概念網(wǎng)頁設(shè)計(jì)將時(shí)尚的紫色與英雄形象的插畫結(jié)合

6.動畫圖形

2018年，動畫和插畫的運(yùn)用變得原來越創(chuàng)新。為了讓頁面脫穎而出，設(shè)計(jì)師將復(fù)雜的動作融入到圖標(biāo)和插畫中，盡管是否在ui中加入大量的動畫效果有待商討，但Dribbble上每天都會更新大量引人注目的動畫設(shè)計(jì)。

用于分享內(nèi)容到社交網(wǎng)絡(luò)的動畫圖標(biāo)

Cuberto的亮度控制效果

7.文本用圖片填充

今年的另一個(gè)UI趨勢是文本使用背景圖片填充。通常用在最突出的單詞上。比如產(chǎn)品或公司名，標(biāo)題，口號等。

Green Chameleon的概念網(wǎng)頁使用這一效果。這種極簡主義風(fēng)格的構(gòu)圖看起來既時(shí)尚又完整。

8.全屏背景圖片

另一個(gè)經(jīng)常發(fā)現(xiàn)的趨勢是應(yīng)用全屏圖片，將主題和氛圍設(shè)置為背景。在大多數(shù)情況下，背景圖片使用的是高清圖，但也有是專門為項(xiàng)目渲染的2D或3D效果圖。

Dennis Shnelleberg的活動登陸頁，看起來像海報(bào)

9. 擬物設(shè)計(jì)元素

我們之前有談到擬物設(shè)計(jì)正在慢慢回歸。不過這邊的擬物使用了更多3D效果。

3D插圖設(shè)計(jì)的研究實(shí)驗(yàn)室概念網(wǎng)頁

運(yùn)用3D元素的著陸頁設(shè)計(jì)

可愛3D插圖

10. 概念轉(zhuǎn)場動畫設(shè)計(jì)

Dribbble是一個(gè)富有創(chuàng)造性的交流社區(qū)，我們可以看到很多設(shè)計(jì)師不斷創(chuàng)造出很新的頁面切換或過渡的動畫效果。

總結(jié)

雖然并不是每個(gè)趨勢都會被廣泛的商業(yè)使用，但是這些富有創(chuàng)造性的作品都很有價(jià)值：他們能突破常規(guī)，讓設(shè)計(jì)師自由發(fā)揮，討論新的技巧和方法。為了大家的成長，我們必須敢于探索和分析，誰知道這里的哪種趨勢會成為未來的主流呢？

如果您對這邊總結(jié)的10個(gè)趨勢有看法，或者有更好的推薦，歡迎評論。