2018年UI的13個(gè)主要設(shè)計(jì)趨勢(shì)

Tubik Studio

2018年時(shí)間過(guò)半，通過(guò)過(guò)去的觀察，已經(jīng)可以對(duì)2018年的整個(gè)UI領(lǐng)域的設(shè)計(jì)趨勢(shì)有了一個(gè)更為清晰的判斷，今天就一起來(lái)回顧一下，在過(guò)去的半年當(dāng)中，UI設(shè)計(jì)領(lǐng)域當(dāng)中的一些流行趨勢(shì)。

1.全屏背景圖片

如今的全屏背景是最廣泛的設(shè)計(jì)趨勢(shì)之一，無(wú)論是使用照片還是經(jīng)過(guò)特別渲染的可視化效果，均是在此范圍以內(nèi)。這種方法無(wú)論是在視覺(jué)上，還是在情緒上都非常的吸引人。此外，它能夠讓所有的布局元素具有強(qiáng)烈的整體感。

下面是Big City Guide的著陸頁(yè)設(shè)計(jì)，背景采用的是柏林當(dāng)?shù)氐闹ㄖ沟谜w顯得優(yōu)雅，信息量也足夠豐富。

2.多個(gè)可交互圖層

UI設(shè)計(jì)師一直在探索各種實(shí)驗(yàn)性的設(shè)計(jì)，而如今就有越來(lái)越多的設(shè)計(jì)師開(kāi)始在網(wǎng)頁(yè)中加入多個(gè)疊加的可交互的圖層，讓用戶可以同網(wǎng)頁(yè)進(jìn)行復(fù)雜的交互。相比之下，單純的滾動(dòng)瀏覽就顯得很原始了。

上圖這個(gè)拯救海洋為主題的網(wǎng)站就是這樣做的。當(dāng)輪播圖變化的時(shí)候，其他的兩個(gè)交互層也會(huì)隨之而變化。另外，這種設(shè)計(jì)當(dāng)中有一個(gè)分支，就是圖片填充式排版，圖片甚至視頻被作為紋理和素材填充到文本當(dāng)中，有的是靜態(tài)的，有的會(huì)隨著交互而移動(dòng)。

3.自定義插畫

自定義插畫一直廣泛存在于網(wǎng)頁(yè)和UI設(shè)計(jì)當(dāng)中，不過(guò)如今的網(wǎng)頁(yè)和UI中的自定義插畫會(huì)更加成熟，在可用性、直觀性、隱喻和信息傳達(dá)上，有著更加突出的特點(diǎn)。圖片和插畫本身會(huì)提升整個(gè)設(shè)計(jì)的可訪問(wèn)性，插畫和文本的互相支撐，讓整個(gè)設(shè)計(jì)更加統(tǒng)一。

自定義插畫讓網(wǎng)站的價(jià)值感得到了增強(qiáng)，不僅在美學(xué)上賦予網(wǎng)站和內(nèi)容的一致感，而且在內(nèi)容上顯得更加突出。

就像這副插畫，它是為文章《UI設(shè)計(jì)當(dāng)中的3C要素：色彩，對(duì)比和內(nèi)容》所設(shè)計(jì)的，這篇文章中的三個(gè)關(guān)鍵詞分別是色彩、對(duì)比度和內(nèi)容，而這個(gè)是選取顏色作為核心的語(yǔ)義元素，并且非常貼合主題地選取了繪畫作為插畫內(nèi)容的主體。在細(xì)節(jié)配色上，強(qiáng)烈的色彩對(duì)比又貼合了對(duì)比度這一關(guān)鍵詞。

4.故事和角色設(shè)計(jì)

越來(lái)越多的網(wǎng)站和APP開(kāi)始試圖將專門的角色/吉祥物融入到整個(gè)設(shè)計(jì)當(dāng)中來(lái)，借助視覺(jué)化的插畫、視頻、文本甚至圖標(biāo)和細(xì)節(jié)來(lái)展示故事，營(yíng)造氛圍、傳遞信息和表達(dá)情緒，采用更加貼合當(dāng)前語(yǔ)境的方式，將內(nèi)容形象生動(dòng)地傳達(dá)給用戶，這是故事和角色的優(yōu)勢(shì)所在。擬人化的形象能夠更容易讓用戶產(chǎn)生聯(lián)想，和現(xiàn)實(shí)世界勾連起來(lái)，承載情緒。在設(shè)計(jì)上，角色的設(shè)計(jì)也能夠在視覺(jué)上，讓頁(yè)面更加活潑。

上面這個(gè)案例是為Florence APP所設(shè)計(jì)的一套自定義插畫，在這個(gè)APP當(dāng)中，英國(guó)的護(hù)理從業(yè)者能夠找到薪資更高的，更合理的業(yè)務(wù)。插畫讓角色形象擁有了故事般的呈現(xiàn)，也闡明了應(yīng)用的功能和優(yōu)點(diǎn)，搭配說(shuō)明，能夠更好地讓用戶明白功能和服務(wù)的內(nèi)在價(jià)值。

5.分屏式設(shè)計(jì)

分屏式設(shè)計(jì)本身很早就出現(xiàn)過(guò)，只不過(guò)不如最近出現(xiàn)的這么頻繁，廣泛地出現(xiàn)在不同的設(shè)計(jì)作品當(dāng)中。首先，分屏式設(shè)計(jì)可以很好地契合當(dāng)前的響應(yīng)式設(shè)計(jì)，另一方面，它本身可以在一致的設(shè)計(jì)下承載不同的內(nèi)容，設(shè)計(jì)師可以在不同的色彩和布局之下，探索各種可能性。通過(guò)分屏式設(shè)計(jì)，設(shè)計(jì)師能夠更好地呈現(xiàn)網(wǎng)頁(yè)內(nèi)容本身的二元性。

上面這個(gè)著陸頁(yè)是采用了傾斜式的分屏設(shè)計(jì)，視覺(jué)元素和文本通過(guò)對(duì)角線分割開(kāi)來(lái)，呼應(yīng)之下相互依存，又保持著一致性。

6.大膽的排版

大膽而引人矚目的排版同樣在如今的網(wǎng)頁(yè)和APP中廣泛存在，甚至于在絕大多數(shù)的情況下，它是作為最關(guān)鍵的視覺(jué)設(shè)計(jì)元素而存在。設(shè)計(jì)師會(huì)非常在意這些文本和排版的可讀性和易讀性，排版的層次結(jié)構(gòu)和字體的選擇，始終都是每個(gè)UI設(shè)計(jì)師最在意的問(wèn)題。

同樣在上面提到過(guò)的Big City Guide這個(gè)案例當(dāng)中，文本字體排版被作為整個(gè)視覺(jué)中最引人矚目的部分而拿出來(lái)。精細(xì)的裁切和大膽的選取讓文本和背景元素很好地融入到一起，充滿協(xié)調(diào)感和緊密的設(shè)計(jì)感。

Upper這個(gè)應(yīng)用程序的設(shè)計(jì)同樣是簡(jiǎn)約的，其中并沒(méi)有使用太過(guò)于獨(dú)特的插畫或者圖形，相反，文字排版在整個(gè)APP的設(shè)計(jì)當(dāng)中，發(fā)揮著舉足輕重的作用。

7.無(wú)按鈕UI

雖然按鈕仍然是目前UI設(shè)計(jì)中最重要的元素之一，但是越來(lái)越多的設(shè)計(jì)開(kāi)始在實(shí)驗(yàn)性的UI交互案例當(dāng)中，使用無(wú)按鈕的UI了。這種設(shè)計(jì)在節(jié)省空間的同時(shí)，采用了手勢(shì)驅(qū)動(dòng)式的交互，而不是點(diǎn)擊。

上圖是一個(gè)百科全書(shū)類的APP的概念設(shè)計(jì)，提供各種交互式的信息圖表，數(shù)據(jù)和交互都采用滑動(dòng)來(lái)實(shí)現(xiàn)的，沒(méi)有加入任何按鈕。

不過(guò)，絕大多數(shù)的情況下，設(shè)計(jì)師還是要倚靠按鈕來(lái)進(jìn)行設(shè)計(jì)的。

8.活潑大膽的色彩

配色同樣是設(shè)計(jì)師最為在意的事情之一。現(xiàn)如今，UI設(shè)計(jì)師從之前所追求的微妙的配色，完全過(guò)渡到對(duì)于活潑大膽的色調(diào)的追求上來(lái)了。無(wú)論是深色系配色還是淺色系配色，總會(huì)試圖讓配色方案盡量出彩。越來(lái)越多的設(shè)計(jì)師開(kāi)始將傳統(tǒng)的技術(shù)和創(chuàng)新的配色組合到一起，試圖營(yíng)造出更加富有表現(xiàn)力的視覺(jué)體驗(yàn)。

上圖這是一款音樂(lè)新聞?lì)悜?yīng)用的的概念設(shè)計(jì)，這款配色極為鮮亮的應(yīng)用當(dāng)中，囊括了包括歌詞、音樂(lè)新聞和音樂(lè)測(cè)試等新鮮有趣的內(nèi)容。整個(gè)APP給人很強(qiáng)的原創(chuàng)感，這很大程度上得益于配色和幾何圖形的運(yùn)用。當(dāng)用戶在屏幕上滑動(dòng)瀏覽的時(shí)候，圖形、色彩和圖標(biāo)的變化，會(huì)非常抓人眼球。

9.強(qiáng)化參與度的UI動(dòng)畫

UI界面動(dòng)效是目前當(dāng)之無(wú)愧的熱點(diǎn)。雖然仍然有許多設(shè)計(jì)師會(huì)認(rèn)為動(dòng)效的必要性不強(qiáng)，動(dòng)畫可能會(huì)讓界面變的更加復(fù)雜，但是就目前來(lái)看，動(dòng)效確實(shí)對(duì)于整個(gè)交互體驗(yàn)有明顯的提升。甚至于逐漸有成為設(shè)計(jì)中不可或缺的一部分的趨勢(shì)。因此，設(shè)計(jì)師和開(kāi)發(fā)者開(kāi)始通力協(xié)作，試圖找到在現(xiàn)代網(wǎng)頁(yè)中實(shí)現(xiàn)有效又體驗(yàn)優(yōu)異的動(dòng)效的方法。動(dòng)效和微交互搭配在一起，可以快速地為用戶建立反饋，使得導(dǎo)航和交互變得更加直觀。所有的這些，都能夠強(qiáng)化UI的參與度。

上圖是一個(gè)用來(lái)幫助用戶跟蹤每天的消費(fèi)，管理收支的APP的概念設(shè)計(jì)。采用深色系的配色和高識(shí)別度的字體，讓整個(gè)設(shè)計(jì)的可讀性更強(qiáng)也更加沉穩(wěn)，動(dòng)效的加入則讓整個(gè)APP更加富有生命力，讓用戶感覺(jué)更加舒適。

10.帶有超大圖片背景的著陸頁(yè)

著陸頁(yè)是許多網(wǎng)站的重要組成部分，使用超大背景圖片能夠讓著陸頁(yè)更加引人矚目，創(chuàng)造出更加富有特色的視覺(jué)。在情緒和氛圍的傳遞上，超大圖片的功能會(huì)顯得非常的突出，在著陸頁(yè)這樣的頁(yè)面當(dāng)中，效果更加出眾。

HeartBeat的舞蹈學(xué)院的著陸頁(yè)設(shè)計(jì)在簡(jiǎn)約的布局之下，搭配帶有動(dòng)效的舞蹈人物背景，通過(guò)舞者的超大圖片來(lái)吸引對(duì)舞蹈感興趣的年輕人的興趣，營(yíng)造情感吸引力。

11.海報(bào)樣式的頁(yè)面

海報(bào)的設(shè)計(jì)始終都是非常強(qiáng)調(diào)視覺(jué)吸引力的，海報(bào)式的網(wǎng)頁(yè)和APP的視覺(jué)設(shè)計(jì)，同樣也是強(qiáng)調(diào)視角、排版和氣氛。選擇正確的圖片、時(shí)尚的排版，讓布局和風(fēng)格更加抓人眼球，從而達(dá)到吸引用戶的目的。

上圖Tasty Burger這個(gè)應(yīng)用程序的著陸頁(yè)就是如此：通過(guò)富有表現(xiàn)力的字體來(lái)強(qiáng)化視覺(jué)，用令人垂涎的配色和美食來(lái)營(yíng)造情感吸引力，凸顯視覺(jué)主體的布局讓用戶不會(huì)錯(cuò)過(guò)關(guān)鍵的信息。

12.實(shí)驗(yàn)性的配色和布局

實(shí)驗(yàn)性的設(shè)計(jì)從來(lái)都沒(méi)有消失過(guò)，設(shè)計(jì)師努力在平庸和普遍的設(shè)計(jì)當(dāng)中探索新鮮原創(chuàng)的配色和截然不同的布局。因?yàn)椋还茉趺粗v，有效的實(shí)驗(yàn)性配色不僅僅是因?yàn)樗兄鴦?chuàng)造力，這種配色常常能夠產(chǎn)生令人驚訝的效果，在同樣的配色理論和色彩心理學(xué)中，探索出真正有趣的組合。

上面這個(gè)名為The Gourmet的網(wǎng)站，是一個(gè)銷售草藥和香料的電商網(wǎng)站，用戶界面的布局和配色都非常的創(chuàng)新，這種實(shí)驗(yàn)性的布局在動(dòng)效的加持下，營(yíng)造出和其他網(wǎng)站截然不同的時(shí)尚感

13.個(gè)性化的用戶體驗(yàn)

我們能在過(guò)去的6個(gè)月當(dāng)中看到越來(lái)越多，逐漸成熟的個(gè)性化用戶體驗(yàn)設(shè)計(jì)，設(shè)計(jì)師開(kāi)始為用戶提供更多的功能，這些功能都是基于用戶的個(gè)人需求，提供足夠?qū)拸V的自定義的空間。

下圖Perfect Recipe這個(gè)健康類的APP，就能夠?yàn)橛脩籼峁﹤€(gè)性化的健康的食譜。因?yàn)槊總€(gè)用戶的情況各不相同，有的需要健身，有的需要增重，有的需要減肥，不同的人不同需求之下必然需要完全個(gè)性化的定制，而這個(gè)應(yīng)用就是為了應(yīng)對(duì)這樣的需求，為用戶提供真正可靠的、可信的服務(wù)。

如今的設(shè)計(jì)趨勢(shì)呈現(xiàn)出多樣性，然而不同的趨勢(shì)之間還呈現(xiàn)出一種內(nèi)在的關(guān)聯(lián)性，這很大程度上源于設(shè)計(jì)師對(duì)于體驗(yàn)和創(chuàng)意的不懈追求。將設(shè)計(jì)趨勢(shì)總結(jié)出來(lái)，另外一個(gè)好處在于，可為正在設(shè)計(jì)的你提供設(shè)計(jì)思路。