首頁 > 網頁教程 > 設計分享 > 13個最新的網頁設計趨勢:全屏背景圖片、自定義插畫等

江苏十一选五开奖图:13個最新的網頁設計趨勢:全屏背景圖片、自定義插畫等

時間:2018-07-18    作者:Tubik Studio   來源:優設網

江苏十一选五开奖公告 www.ervgn.com 2018 年時間過半,通過過去的 6 個月的觀察,其實我們已經可以對于 2018 年的整個 UI 領域的設計趨勢有了一個更為清晰的判斷,也是推出這篇文章比較合理的時機。今天,我們一起來回顧一下,過去的半年當中,UI設計領域當中的一些流行趨勢。

1. 全屏背景圖片

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

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

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

2. 多個可交互圖層

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

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

3. 自定義插畫

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

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

add_color_illustration_tubik.jpg

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

4. 故事和角色設計

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

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

相關推薦
前瞻:2012年Web設計和開發的15個最新趨勢
2013年web開發者最需要了解的開發趨勢和技能
2013年最受歡迎的20大網頁設計趨勢分享
最新的七個WEB設計趨勢及其生存技巧預測
展望2015年網頁設計趨勢
網頁設計師必看:2015全球網站設計趨勢推薦
最值得關注的21個網頁設計趨勢:單色網站、視頻背景等
四大設計趨勢教你如何你玩轉2015年網頁設計
從日本設計機構看日本的網頁設計文化與趨勢
2015上半年最具代表性的網站設計趨勢TOP 10
不一樣的角度!老外設計師眼中的國內設計趨勢
盤點2015下半年網頁設計的9大趨勢
讀懂十大未來設計趨勢,別讓你的設計白費力氣
明年最值得關注的16個網頁設計趨勢
年度總結:最新視覺設計六大趨勢分享
底部導航設計、Box元素、豎線元素3種最新網頁設計趨勢
網頁設計新趨勢:非對稱布局、感知化設計、自定義字體等
這5種網頁設計趨勢已經過時,你還在用嗎?
海報式首頁、漸變式文本等3種網頁設計趨勢分享
網頁設計趨勢:斑點和氣泡元素、“懸浮的”矩形元素等
20個精致漂亮的視頻播放器界面設計欣賞及點評
視覺設計:頁面構建的審圖與細節
15個超棒的無線移動終端UI設計案例賞析
響應式網頁設計正成為移動互聯網大勢所趨
淺談界面設計中的結構設計
分享:5招助你打造更加簡潔的用戶界面
淺談界面UI設計中的包容性設計
國外精彩網頁界面設計案例賞析
Photoshop教程:提高IOS設計效率的30個要訣分享
網站專題頁面的視覺設計及結構布局要點分享
另眼觀看用戶界面扁平化設計的不足之外
產品視覺設計與用戶心理的有趣現象
10個漂亮實用并附帶源碼的Web設計教程分享
優秀移動APP應用圖標設計指南
在視覺設計中對像素的深度解析
什么是扁平設計?如何創建扁平化設計風格?

精彩推薦

熱門教程