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

千千小助手發表於2018-08-02


2018年時間過半,通過過去的6個月的觀察,其實我們已經可以對於2018年的整個UI領域的設計趨勢有了一個更為清晰的判斷。

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

1. 全屏背景圖片

如今的全屏背景確實是最廣泛的設計趨勢之一,無論是使用照片還是經過特別渲染的視覺化效果,均是在此範圍以內。

這種方法無論是在視覺上,還是在情緒上都非常的吸引人。此外,它能夠讓所有的佈局元素具有強烈的整體感。

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

這是 Big City Guide 的著陸頁設計,背景採用的是柏林當地的著名建築,使得整體顯得優雅,資訊量也足夠豐富。

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

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

2. 多個可互動圖層

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

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

這個拯救海洋為主題的網站就是這樣做的。當輪播圖變化的時候,其他的兩個互動層也會隨之而變化。

另外,這種設計當中有一個分支,就是圖片填充式排版,圖片甚至視訊被作為紋理和素材填充到文字當中,有的是靜態的,有的會隨著互動而移動。

3. 自定義插畫

自定義插畫一直廣泛存在於網頁和 UI設計當中,不過如今的網頁和 UI 中的自定義插畫會更加成熟,在可用性、直觀性、隱喻和資訊傳達上,有著更加突出的特點。

圖片和插畫本身會提升整個設計的可訪問性,插畫和文字的互相支撐,讓整個設計更加統一。

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

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

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

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

4. 故事和角色設計

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

營造氛圍,傳遞資訊,表達情緒,採用更加貼合當前語境的方式,將內容形象生動地傳達給使用者。

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

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

這個案例是 Tubik Studio 的插畫師為 Florence APP 所設計的一套自定義插畫,在這個 APP 當中,英國的護理從業者能夠找到薪資更高的,更合理的業務。

插畫讓角色形象擁有了故事般的呈現,也闡明瞭應用的功能和優點,搭配說明,能夠更好地讓使用者明白功能和服務的內在價值。

5. 分屏式設計

分屏式設計本身很早就出現過,只不過不如最近出現的這麼頻繁,開始廣泛地出現在不同的設計作品當中。

首先,分屏式設計可以很好地契合當前的響應式設計,另一方面,它本身可以在一致的設計下承載不同的內容,設計師可以在不同的色彩和佈局之下,探索各種可能性。

通過分屏式設計,設計師能夠更好地呈現網頁內容本身的二元性。

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

這個著陸頁是為一個約會應用所設計的,採用了傾斜式的分屏設計,視覺元素和文字通過對角線分割開來,呼應之下相互依存,又保持著一致性。

6. 大膽的排版

大膽而引人矚目的排版同樣在如今的網頁和 APP 當中廣泛地存在,甚至於在絕大多數的情況下,它是作為最關鍵的視覺設計元素而存在。

設計師會非常在意這些文字和排版的可讀性和易讀性,排版的層次結構和字型的選擇,始終都是每個 UI設計師最在意的問題。

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

同樣的,上面提到過的 Big City Guide 這個案例當中,文字字型排版被作為整個視覺中最引人矚目的部分而拿出來。

精細的裁切和大膽的選取讓文字和背景元素很好地融入到一起,充滿協調感和緊密的設計感。

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

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

7. 無按鈕UI

雖然按鈕仍然是目前 UI設計中最重要的元素之一,但是我們發現越來越多的設計開始在實驗性的 UI 互動案例當中,開始使用無按鈕的UI了。

這種設計在節省空間的同時,採用了手勢驅動式的互動,而不是點選。

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

這是我們的團隊所製作的一個百科全書類的 APP 的概念設計,提供各種互動式的資訊圖表,資料和互動都採用滑動來實現的,沒有加入任何按鈕。

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

8. 活潑大膽的色彩

配色同樣是設計師最為在意的事情之一。現如今,UI設計師從之前所追求的微妙的配色,完全過渡到對於活潑大膽的色調的追求上來了。

無論是深色系配色還是淺色系配色,總會試圖讓配色方案儘量出彩。越來越多的設計師開始將傳統的技術和創新的配色組合到一起,試圖營造出更加富有表現力的視覺體驗。

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

這是一款音樂新聞類應用的的概念設計,這款配色極為鮮亮的應用當中,囊括了包括歌詞、音樂新聞和音樂測試等新鮮有趣的內容。

整個 APP 給人很強的原創感,這很大程度上得益於配色和幾何圖形的運用。當使用者在螢幕上滑動瀏覽的時候,圖形、色彩和圖示的變化,會非常抓人眼球。

9. 強化參與度的UI動畫

UI介面動效是目前當之無愧的熱點。雖然仍然有許多設計師會認為動效的必要性不強,動畫可能會讓介面變的更加複雜。

但是就目前來看,動效確實對於整個互動體驗有明顯的提升,甚至於逐漸有成為設計中不可或缺的一部分的趨勢。

因此,設計師和開發者開始通力協作,試圖找到在現代網頁中實現有效又體驗優異的動效的方法。

動效和微互動搭配在一起,可以快速地為使用者建立反饋,使得導航和互動變得更加直觀。所有的這些,都能夠強化 UI 的參與度。

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

這是一個用來幫助使用者跟蹤每天的消費,管理收支的 APP 的概念設計。

採用深色系的配色和高識別度的字型,讓整個設計的可讀性更強也更加沉穩,動效的加入則讓整個 APP 更加富有生命力,讓使用者感覺上更加舒適。

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

著陸頁是許多網站的重要組成部分,使用超大背景圖片能夠讓著陸頁更加引人矚目,創造出更加富有特色的視覺。

在情緒和氛圍的傳遞上,超大圖片的功能會顯得非常的突出,在著陸頁這樣的頁面當中,效果更加拔群。著陸頁當紅的超大圖片同時可以滿足多個需求:

吸引使用者的注意力

直觀的傳遞資訊

強化風格

建立主題,營造氛圍

展示核心的特徵,凸顯專案屬性

這就是為什麼如今設計師會如此的青睞這種著陸頁的設計。

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

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

11. 海報樣式的頁面

海報的設計始終都是非常強調視覺吸引力的,海報式的網頁和 APP 的視覺設計,同樣也是強調視角、排版和氣氛。

選擇正確的圖片、時尚的排版,讓佈局和風格更加抓人眼球,從而達到吸引使用者的目的。

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

Tasty Burger 這個應用程式的著陸頁就是如此:通過富有表現力的字型來強化視覺,用令人垂涎的配色和美食來營造情感吸引力,凸顯視覺主體的佈局讓使用者不會錯過關鍵的資訊。

12. 實驗性的配色和佈局

實驗性的設計從來都沒有消失過,設計師努力在平庸和普遍的設計當中探索新鮮原創的配色和截然不同的佈局。

因為,不管怎麼講,有效的實驗性配色不僅僅是因為它有著創造力,這種配色常常能夠產生令人驚訝的效果,在同樣的配色理論和色彩心理學中,探索出真正有趣的組合。

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

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

13. 個性化的使用者體驗

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

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

Perfect Recipe 這個健康類的 APP,就能夠為使用者提供個性化的健康的食譜。因為每個使用者的情況各不相同。

有的需要健身,有的需要增重,有的需要減肥,不同的人不同需求之下必然需要完全個性化的定製,而這個應用就是為了應對這樣的需求,來為使用者提供真正可靠的、可信的服務。

結語

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

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

那麼如果你現在學UI設計還比較迷茫或者想打算學好UI設計,請點選左下方閱讀原文學習更多UI設計知識。

作者:Tubik Studio

譯者:優設網-陳子木


相關文章