2018年UI的13個主要設計趨勢

Tubik Studio

2018年時間過半，通過過去的觀察，已經可以對2018年的整個UI領域的設計趨勢有了一個更為清晰的判斷，今天就一起來回顧一下，在過去的半年當中，UI設計領域當中的一些流行趨勢。

1.全屏背景圖片

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

下面是Big City Guide的著陸頁設計，背景采用的是柏林當地的著名建筑，使得整體顯得優雅，信息量也足夠豐富。

2.多個可交互圖層

UI設計師一直在探索各種實驗性的設計，而如今就有越來越多的設計師開始在網頁中加入多個疊加的可交互的圖層，讓用戶可以同網頁進行復雜的交互。相比之下，單純的滾動瀏覽就顯得很原始了。

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

3.自定義插畫

自定義插畫一直廣泛存在于網頁和UI設計當中，不過如今的網頁和UI中的自定義插畫會更加成熟，在可用性、直觀性、隱喻和信息傳達上，有著更加突出的特點。圖片和插畫本身會提升整個設計的可訪問性，插畫和文本的互相支撐，讓整個設計更加統一。

自定義插畫讓網站的價值感得到了增強，不僅在美學上賦予網站和內容的一致感，而且在內容上顯得更加突出。

就像這副插畫，它是為文章《UI設計當中的3C要素：色彩，對比和內容》所設計的，這篇文章中的三個關鍵詞分別是色彩、對比度和內容，而這個是選取顏色作為核心的語義元素，并且非常貼合主題地選取了繪畫作為插畫內容的主體。在細節配色上，強烈的色彩對比又貼合了對比度這一關鍵詞。

4.故事和角色設計

越來越多的網站和APP開始試圖將專門的角色/吉祥物融入到整個設計當中來，借助視覺化的插畫、視頻、文本甚至圖標和細節來展示故事，營造氛圍、傳遞信息和表達情緒，采用更加貼合當前語境的方式，將內容形象生動地傳達給用戶，這是故事和角色的優勢所在。擬人化的形象能夠更容易讓用戶產生聯想，和現實世界勾連起來，承載情緒。在設計上，角色的設計也能夠在視覺上，讓頁面更加活潑。

上面這個案例是為Florence APP所設計的一套自定義插畫，在這個APP當中，英國的護理從業者能夠找到薪資更高的，更合理的業務。插畫讓角色形象擁有了故事般的呈現，也闡明了應用的功能和優點，搭配說明，能夠更好地讓用戶明白功能和服務的內在價值。

5.分屏式設計

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

上面這個著陸頁是采用了傾斜式的分屏設計，視覺元素和文本通過對角線分割開來，呼應之下相互依存，又保持著一致性。

6.大膽的排版

大膽而引人矚目的排版同樣在如今的網頁和APP中廣泛存在，甚至于在絕大多數的情況下，它是作為最關鍵的視覺設計元素而存在。設計師會非常在意這些文本和排版的可讀性和易讀性，排版的層次結構和字體的選擇，始終都是每個UI設計師最在意的問題。

同樣在上面提到過的Big City Guide這個案例當中，文本字體排版被作為整個視覺中最引人矚目的部分而拿出來。精細的裁切和大膽的選取讓文本和背景元素很好地融入到一起，充滿協調感和緊密的設計感。

Upper這個應用程序的設計同樣是簡約的，其中并沒有使用太過于獨特的插畫或者圖形，相反，文字排版在整個APP的設計當中，發揮著舉足輕重的作用。

7.無按鈕UI

雖然按鈕仍然是目前UI設計中最重要的元素之一，但是越來越多的設計開始在實驗性的UI交互案例當中，使用無按鈕的UI了。這種設計在節省空間的同時，采用了手勢驅動式的交互，而不是點擊。

上圖是一個百科全書類的APP的概念設計，提供各種交互式的信息圖表，數據和交互都采用滑動來實現的，沒有加入任何按鈕。

不過，絕大多數的情況下，設計師還是要倚靠按鈕來進行設計的。

8.活潑大膽的色彩

配色同樣是設計師最為在意的事情之一。現如今，UI設計師從之前所追求的微妙的配色，完全過渡到對于活潑大膽的色調的追求上來了。無論是深色系配色還是淺色系配色，總會試圖讓配色方案盡量出彩。越來越多的設計師開始將傳統的技術和創新的配色組合到一起，試圖營造出更加富有表現力的視覺體驗。

上圖這是一款音樂新聞類應用的的概念設計，這款配色極為鮮亮的應用當中，囊括了包括歌詞、音樂新聞和音樂測試等新鮮有趣的內容。整個APP給人很強的原創感，這很大程度上得益于配色和幾何圖形的運用。當用戶在屏幕上滑動瀏覽的時候，圖形、色彩和圖標的變化，會非常抓人眼球。

9.強化參與度的UI動畫

UI界面動效是目前當之無愧的熱點。雖然仍然有許多設計師會認為動效的必要性不強，動畫可能會讓界面變的更加復雜，但是就目前來看，動效確實對于整個交互體驗有明顯的提升。甚至于逐漸有成為設計中不可或缺的一部分的趨勢。因此，設計師和開發者開始通力協作，試圖找到在現代網頁中實現有效又體驗優異的動效的方法。動效和微交互搭配在一起，可以快速地為用戶建立反饋，使得導航和交互變得更加直觀。所有的這些，都能夠強化UI的參與度。

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

10.帶有超大圖片背景的著陸頁

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

HeartBeat的舞蹈學院的著陸頁設計在簡約的布局之下，搭配帶有動效的舞蹈人物背景，通過舞者的超大圖片來吸引對舞蹈感興趣的年輕人的興趣，營造情感吸引力。

11.海報樣式的頁面

海報的設計始終都是非常強調視覺吸引力的，海報式的網頁和APP的視覺設計，同樣也是強調視角、排版和氣氛。選擇正確的圖片、時尚的排版，讓布局和風格更加抓人眼球，從而達到吸引用戶的目的。

上圖Tasty Burger這個應用程序的著陸頁就是如此：通過富有表現力的字體來強化視覺，用令人垂涎的配色和美食來營造情感吸引力，凸顯視覺主體的布局讓用戶不會錯過關鍵的信息。

12.實驗性的配色和布局

實驗性的設計從來都沒有消失過，設計師努力在平庸和普遍的設計當中探索新鮮原創的配色和截然不同的布局。因為，不管怎么講，有效的實驗性配色不僅僅是因為它有著創造力，這種配色常常能夠產生令人驚訝的效果，在同樣的配色理論和色彩心理學中，探索出真正有趣的組合。

上面這個名為The Gourmet的網站，是一個銷售草藥和香料的電商網站，用戶界面的布局和配色都非常的創新，這種實驗性的布局在動效的加持下，營造出和其他網站截然不同的時尚感

13.個性化的用戶體驗

我們能在過去的6個月當中看到越來越多，逐漸成熟的個性化用戶體驗設計，設計師開始為用戶提供更多的功能，這些功能都是基于用戶的個人需求，提供足夠寬廣的自定義的空間。

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

如今的設計趨勢呈現出多樣性，然而不同的趨勢之間還呈現出一種內在的關聯性，這很大程度上源于設計師對于體驗和創意的不懈追求。將設計趨勢總結出來，另外一個好處在于，可為正在設計的你提供設計思路。