2019年UI設(shè)計師將如何迎接新的挑戰(zhàn)？

經(jīng)過大半年的觀察，綜合各大網(wǎng)站設(shè)計，51特地為大家總結(jié)了2018年UI設(shè)計的13個流行趨勢。

01全屏大圖背景

運(yùn)用超大的全屏背景圖片在網(wǎng)頁設(shè)計中已經(jīng)不算太新鮮的東西了。但最近這一方法的運(yùn)用有了新的形式：設(shè)計師開始逐漸將其他元素從整個首屏設(shè)計中剝離，讓充當(dāng)背景圖的圖片展示性更強(qiáng)，從而將屏幕填充的更加徹底。

這種方式使得整個界面除了背景大圖外，不會添加獨(dú)立區(qū)域或者其他元素，所有的前景元素都置于背景圖之中，視覺上的一體性和協(xié)調(diào)性更強(qiáng)。但由于缺乏其他元素，所以整個背景大圖承擔(dān)了“門面C位”作用，選擇圖片上必須足夠奪人眼球、契合主題。

??

上圖是Big City Guide 的登錄頁面設(shè)計。背景圖采用的是柏林當(dāng)?shù)氐慕ㄖ铮w沒有獨(dú)立的導(dǎo)航頁和其他元素，頁面設(shè)計統(tǒng)一協(xié)調(diào)，展示內(nèi)容的信息量也足夠豐富。

??

這個網(wǎng)頁首頁也是引用了一張背景圖，導(dǎo)航等其他功能都隱藏在大圖背景中，通過漢堡圖標(biāo)和其他方式來吸引用戶。

這樣的設(shè)計方法也有一定的難度，比如在處理前景元素和背景圖之間視覺上的沖突關(guān)系，和背景圖在識別性和對比度上的選擇問題，在頁面其他小元素如引導(dǎo)箭頭、線條等其他元素上也需要仔細(xì)斟酌。

02多個可交互圖層疊加

用戶已經(jīng)不滿足單純滾動鼠標(biāo)來瀏覽網(wǎng)頁的傳統(tǒng)方式了。越來越多設(shè)計師嘗試將多個可交互圖層進(jìn)行疊加在一個頁面上，而達(dá)到更為復(fù)雜的交互效果。

??

這是拯救海洋為主題的網(wǎng)頁設(shè)計，當(dāng)網(wǎng)站圖片變化時，其他兩個交互圖層也會發(fā)生變化。同時，當(dāng)圖片或者視頻作為背景或素材填充到文本時，也會隨著交互方式進(jìn)行相應(yīng)的變化。

03自定義插畫

找一張合適的背景圖是漫長且痛苦的過程，因此很多網(wǎng)頁中都會加入自定義的插畫。這一做法也是UI設(shè)計中的一貫手法，很多時候都有隱隱代替插畫的可能。相較于圖片，插畫的可控性更強(qiáng)，更能傳遞出設(shè)計師的想法。

而如今的UI設(shè)計中自定義插畫更加成熟，具有更強(qiáng)的可用性、直觀性、隱喻性，更能突出設(shè)計對象的特點(diǎn)。

??

利用插畫充分說明品牌的優(yōu)勢，非常傳神直觀，而這就是圖片代替不了的。

04故事和角色引入

故事版在選擇的網(wǎng)頁、UI設(shè)計中并不少見。如上圖就是運(yùn)用自定義動畫的一個故事版設(shè)計，借助插畫將品牌特色敘述的更加鮮明，同時也讓頁面設(shè)計生動有趣。除了加入故事版的元素，很多頁面也會插入專門設(shè)計的角色或者吉祥物。擬人化的形象能讓用戶的想象空間更大，同時賦予界面交互以生命力，保持用戶持續(xù)的注意力，成為整個用戶體驗(yàn)中無法忽略的重要元素，提升整體的參與度。

??

這就是電子郵件服務(wù)供應(yīng)商 Mailchimp 的首頁，通過品牌吉祥物——黑猩猩 Freddie 來扮演各種角色，演繹各故事。而這一形象也讓 Mailchimp的用戶粘性和用戶體驗(yàn)增強(qiáng)了不少。

05分屏式設(shè)計

分屏式設(shè)計也是最近UI設(shè)計的流行趨勢。通過分屏可以呈現(xiàn)兩方面的信息且互不打擾，此外還能針對不同尺寸的屏幕作出響應(yīng)。無論在分屏設(shè)計的好處在于它本身可以很好地呈現(xiàn)兩方面的信息，并且能夠針對不同尺寸的屏幕進(jìn)行響應(yīng)。

現(xiàn)在分屏式設(shè)計在細(xì)節(jié)和處理方式上有了新的形式。保留了分屏式設(shè)計基本的思路和精神，在將屏幕分為兩部分時采用了不同的分割形式來呈現(xiàn)信息。

??

??

上面兩張圖是對角線分屏的形式， Cap GunCup Creative 運(yùn)用黑白兩色的配色，而Reach Digital 分屏則采用對比強(qiáng)烈的黃白配色。

??

Weima這個網(wǎng)站則是采用傳統(tǒng)的左右分屏模式，運(yùn)用黑白配色，但分割比例為3:1,更加生動有趣。

分屏式設(shè)計的好處在于它可以應(yīng)對多種多樣的設(shè)計。無論是小型網(wǎng)站，還是大量的內(nèi)容，分屏的設(shè)計都可以讓用戶參與進(jìn)來。分屏式設(shè)計為用戶提供了兩種不同的選擇，不難理解，功能也很直觀。

06更大膽的排版

看膩了千篇一律的國際式風(fēng)格排版和扁平化的設(shè)計風(fēng)格，現(xiàn)在的UI設(shè)計師更愿意采用風(fēng)格較為大膽的排版。但從UX的角度來說，這些排版更注重版面的可讀性和易讀性，排班的層次和字體的選擇都是設(shè)計師在意的地方。

??

如Big City Guide 這個網(wǎng)頁設(shè)計中，大膽、突破的字體是整個頁面中最亮眼的視覺元素。通過精細(xì)裁切和排版讓文字與北京元素很好的融合，保留可讀性，整體充滿協(xié)調(diào)感和緊密的設(shè)計感。

07無按鈕的UI界面

雖然很多界面依然保留著按鈕設(shè)計，但有越來越多的概念性UI方案中開始使用無按鈕的UI了。這種設(shè)計拋棄傳統(tǒng)的點(diǎn)擊，采用手勢驅(qū)動豐富了交互方式，同時也節(jié)省了頁面空間。

??

上圖就是一款沒有加入任何按鈕的UI界面，可以充分展示圖表、數(shù)據(jù)等信息。

08更具表現(xiàn)力的色彩

道理類似更大膽的排版。關(guān)于配色一直是設(shè)計師討論的焦點(diǎn)，而現(xiàn)在UI設(shè)計師逐漸從微妙的配色過渡到活潑、大膽的配色上。如何讓自己的方案配色更具表現(xiàn)力、更出彩也是UI設(shè)計師目前追逐的。

??

Mito Swim Wear的網(wǎng)頁采用鮮亮的橘色，讓人一下子聯(lián)想到炎熱的夏天。色彩奪人眼球的同時也非常契合網(wǎng)站的業(yè)務(wù)。

??

這是一個音樂新聞類的軟件，整個界面用的都是飽和度極高的撞色，色彩上就能迅速吸引到用戶。

09動效的加入

之前很多UI設(shè)計師都會覺得界面中加入動效會讓界面看上去復(fù)雜，沒有必要。但目前發(fā)現(xiàn)，動效能夠增強(qiáng)用戶體驗(yàn)，已經(jīng)成為UI設(shè)計中不可或缺的一部分。動效和微交互搭配在一起，可以快速地為用戶建立反饋，使得導(dǎo)航和交互變得更加直觀。

??

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

10超大背景圖的登陸頁面

登錄頁往往是一個網(wǎng)站的第一印象，如何利用登錄頁面抓住用戶的眼球成了UI設(shè)計師的設(shè)計重點(diǎn)。而登錄頁面上的超大背景圖能夠非常矚目，造成極大的視覺沖擊力；在情緒和氛圍的傳遞上，也會非常突出。

這里歸納下登錄頁面超大背景圖的作用：

吸引用戶的注意力；

直觀的傳遞信息；

強(qiáng)化風(fēng)格；

創(chuàng)建主題，營造氛圍；

展示核心的特征，凸顯項(xiàng)目屬性。

??

這是Tasty Burger 的登錄頁面設(shè)計。簡約的布局之下，搭配帶有動效的漢堡圖片，整齊有序排列的漢堡和更方便快捷的定制頁面也能快速吸用戶注意。

11海報樣式

越來越多網(wǎng)頁會設(shè)計成海報樣式。因?yàn)楹笤O(shè)計往往具有超高的視覺吸引力，而運(yùn)用海報樣式的網(wǎng)頁和APP設(shè)計也是為了吸引用戶注意，強(qiáng)調(diào)視角、排版和氣氛。

??

依然是Tasty Burger 的登錄頁面，這就是典型的海報樣式效果：通過富有表現(xiàn)力的字體來強(qiáng)化視覺，用令人垂涎的配色和美食來營造情感吸引力，凸顯視覺主體的布局讓用戶不會錯過關(guān)鍵的信息。

12低透明度色彩疊加

在圖片和視頻上疊加色彩也不是什么新鮮的玩法，它是非常受歡迎的設(shè)計手法和趨勢。這種設(shè)計技法讓設(shè)計師可以更輕松地創(chuàng)建層次分明的效果，可以通過色彩疊加來創(chuàng)建更為統(tǒng)一的視覺效果，控制對比度，營造氛圍和情緒。

這種設(shè)計當(dāng)中，透明度的控制是極為關(guān)鍵的一個步驟。通常，設(shè)計師不會讓色彩疊加層透明度太低，這樣用戶就可以一目了然地看到背景的圖片信息。此外低透明度讓背景以紋理的形式呈現(xiàn)，更加富有深度，創(chuàng)造出吸引人的視覺效果。但這種方法不適合傳遞背景信息，因?yàn)榈屯该鞫却_實(shí)很難讓背景的細(xì)節(jié)清晰地傳達(dá)出來。

??

?

?

上述兩張圖片中，背景圖片往往作為裝飾性元素存在，圖片雖然都提供了一些附加的信息，但是這些信息都不是關(guān)鍵，它們更多的是強(qiáng)化視覺。

13個性化用戶體驗(yàn)

千篇一律的UI界面讓產(chǎn)品的雷同性越來越大。而現(xiàn)在越來越多的UI設(shè)計師更關(guān)注用戶體驗(yàn)設(shè)計，為用戶提供更多的功能，滿足他們的個人需求。

??

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

跟隨設(shè)計趨勢是一個非常有趣的事情，它可以讓你的設(shè)計保持新鮮，讓你的設(shè)計在激烈的競爭中脫穎而出。今年大半年的UI設(shè)計趨勢的總結(jié)希望能為大家提供新的設(shè)計思路。