2018年上半年UI領域主要的13個設計趨勢

 

2018年時間過半，經過過去的6個月的觀察，其實咱們已經能夠對於2018年的整個UI領域的設計趨勢有了一個更爲清晰的判斷。

也是推出這篇文章比較合理的時機。下面咱們就一塊兒來回顧一下，過去的半年當中，UI設計領域當中的一些流行趨勢。

 

1. 全屏背景圖片

現在的全屏背景確實是最普遍的設計趨勢之一，不管是使用照片仍是通過特別渲染的可視化效果，均是在此範圍之內。

這種方法不管是在視覺上，仍是在情緒上都很是的吸引人。此外，它可以讓全部的佈局元素具備強烈的總體感。

這是 Big City Guide 的着陸頁設計，背景採用的是柏林當地的著名建築，使得總體顯得優雅，信息量也足夠豐富。

而這個室內設計工做室的首頁，也一樣採用了全屏的設計，大量的原建立模而構建出來的彩色場景所營造的背景，很好的凸顯了工做室自己的性質和特色。

 

2. 多個可交互圖層

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

這個拯救海洋爲主題的網站就是這樣作的。當輪播圖變化的時候，其餘的兩個交互層也會隨之而變化。

另外，這種設計當中有一個分支，就是圖片填充式排版，圖片甚至視頻被做爲紋理和素材填充到文本當中，有的是靜態的，有的會隨着交互而移動。

 

3. 自定義插畫

自定義插畫一直普遍存在於網頁和 UI設計當中，不過現在的網頁和 UI 中的自定義插畫會更加成熟，在可用性、直觀性、隱喻和信息傳達上，有着更加突出的特色。

圖片和插畫自己會提高整個設計的可訪問性，插畫和文本的互相支撐，讓整個設計更加統一。

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

就像這副插畫，它是爲文章《UI設計當中的3C要素：色彩，對比和內容》所設計的。

這篇文章中的三個關鍵詞分辨是色彩、對比度和內容，而這個是選取顏色做爲核心的語義元素，而且很是貼合主題地選取了繪畫做爲插畫內容的主體。

 

4. 故事和角色設計

愈來愈多的網站和 APP 開始試圖將專門的角色/吉祥物融入到整個設計當中來，藉助視覺化的插畫、視頻、文本甚至圖標和細節來展現故事。

營造氛圍，傳遞信息，表達情緒，採用更加貼合當前語境的方式，將內容形象生動地傳達給用戶。

這是故事和角色的優點所在。擬人化的形象可以更容易讓用戶產生聯想，和現實世界勾連起來，承載情緒。在設計上，角色的設計也可以在視覺上，讓頁面更加活潑。

這個案例是 Tubik Studio 的插畫師爲 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，就可以爲用戶提供個性化的健康的食譜。由於每一個用戶的狀況各不相同。

有的須要健身，有的須要增重，有的須要減肥，不一樣的人不一樣需求之下必然須要徹底個性化的定製，而這個應用就是爲了應對這樣的需求，來爲用戶提供真正可靠的、可信的服務。

 

結語

現在的設計趨勢呈現出一種多樣性，這得益於設計師的探索精神，而同時，不一樣的趨勢之間還呈現出一種內在的關聯性。

這很大程度上源於設計師對於體驗和創意的不懈追求。將設計趨勢總結出來，另一個好處在於，爲正在設計的你提供設計思路。

那麼若是你如今學UI設計還比較迷茫或者想打算學好UI設計，請點擊左下方閱讀原文學習更多UI設計知識。

 

編輯：千鋒HTML5

做者：Tubik Studio

譯者：優設網-陳子木