2019年UI設計師將如何迎接新的挑戰？

經過大半年的觀察，綜合各大網站設計，51特地為大家總結了2018年UI設計的13個流行趨勢。

01全屏大圖背景

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

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

??

上圖是Big City Guide 的登錄頁面設計。背景圖采用的是柏林當地的建筑物，整體沒有獨立的導航頁和其他元素，頁面設計統一協調，展示內容的信息量也足夠豐富。

??

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

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

02多個可交互圖層疊加

用戶已經不滿足單純滾動鼠標來瀏覽網頁的傳統方式了。越來越多設計師嘗試將多個可交互圖層進行疊加在一個頁面上，而達到更為復雜的交互效果。

??

這是拯救海洋為主題的網頁設計，當網站圖片變化時，其他兩個交互圖層也會發生變化。同時，當圖片或者視頻作為背景或素材填充到文本時，也會隨著交互方式進行相應的變化。

03自定義插畫

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

而如今的UI設計中自定義插畫更加成熟，具有更強的可用性、直觀性、隱喻性，更能突出設計對象的特點。

??

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

04故事和角色引入

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

??

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

05分屏式設計

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

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

??

??

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

??

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

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

06更大膽的排版

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

??

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

07無按鈕的UI界面

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

??

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

08更具表現力的色彩

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

??

Mito Swim Wear的網頁采用鮮亮的橘色，讓人一下子聯想到炎熱的夏天。色彩奪人眼球的同時也非常契合網站的業務。

??

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

09動效的加入

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

??

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

10超大背景圖的登陸頁面

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

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

吸引用戶的注意力；

直觀的傳遞信息；

強化風格；

創建主題，營造氛圍；

展示核心的特征，凸顯項目屬性。

??

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

11海報樣式

越來越多網頁會設計成海報樣式。因為海報設計往往具有超高的視覺吸引力，而運用海報樣式的網頁和APP設計也是為了吸引用戶注意，強調視角、排版和氣氛。

??

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

12低透明度色彩疊加

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

這種設計當中，透明度的控制是極為關鍵的一個步驟。通常，設計師不會讓色彩疊加層透明度太低，這樣用戶就可以一目了然地看到背景的圖片信息。此外低透明度讓背景以紋理的形式呈現，更加富有深度，創造出吸引人的視覺效果。但這種方法不適合傳遞背景信息，因為低透明度確實很難讓背景的細節清晰地傳達出來。

??

?

?

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

13個性化用戶體驗

千篇一律的UI界面讓產品的雷同性越來越大。而現在越來越多的UI設計師更關注用戶體驗設計，為用戶提供更多的功能，滿足他們的個人需求。

??

Perfect Recipe 是個健康類的 APP，能夠為用戶提供個性化的健康的食譜。因為每個用戶的情況各不相同，有的需要健身，有的需要增重，有的需要減肥，不同的人不同需求之下必然需要完全個性化的定制，而這個應用就是為了應對這樣的需求，來為用戶提供真正可靠的、可信的服務。

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