作者 : Tubik Studio
2018 年時間過半，通過過去的 6 個月的觀察，其實我們已經(jīng)可以對于 2018 年的整個 UI 領(lǐng)域的設(shè)計趨勢有了一個更為清晰的判斷，也是推出這篇文章比較合理的時機(jī)。今天，我們一起來回顧一下，過去的半年當(dāng)中，UI設(shè)計領(lǐng)域當(dāng)中的一些流行趨勢。
如今的全屏背景確實是最廣泛的設(shè)計趨勢之一，無論是使用照片還是經(jīng)過特別渲染的可視化效果，均是在此范圍以內(nèi)。這種方法無論是在視覺上，還是在情緒上都非常的吸引人。此外，它能夠讓所有的布局元素具有強烈的整體感。
這是 Big City Guide 的著陸頁設(shè)計，背景采用的是柏林當(dāng)?shù)氐闹ㄖ�，使得整體顯得優(yōu)雅，信息量也足夠豐富。
而這個室內(nèi)設(shè)計工作室的首頁，也同樣采用了全屏的設(shè)計，大量的原創(chuàng)建模而構(gòu)建出來的彩色場景所營造的背景，很好的凸顯了工作室本身的性質(zhì)和特點。
UI設(shè)計師一直在探索各種實驗性的設(shè)計，而如今就有越來越多的設(shè)計師開始在網(wǎng)頁中加入多個疊加的可交互的圖層，讓用戶可以同網(wǎng)頁進(jìn)行復(fù)雜的交互。相比之下，單純的滾動瀏覽就顯得很原始了。
這個拯救海洋為主題的網(wǎng)站就是這樣做的。當(dāng)輪播圖變化的時候，其他的兩個交互層也會隨之而變化。另外，這種設(shè)計當(dāng)中有一個分支，就是圖片填充式排版，圖片甚至視頻被作為紋理和素材填充到文本當(dāng)中，有的是靜態(tài)的，有的會隨著交互而移動。
自定義插畫一直廣泛存在于網(wǎng)頁和 UI設(shè)計當(dāng)中，不過如今的網(wǎng)頁和 UI 中的自定義插畫會更加成熟，在可用性、直觀性、隱喻和信息傳達(dá)上，有著更加突出的特點。圖片和插畫本身會提升整個設(shè)計的可訪問性，插畫和文本的互相支撐，讓整個設(shè)計更加統(tǒng)一。
自定義插畫讓網(wǎng)站的價值感得到了增強，不僅在美學(xué)上賦予網(wǎng)站和內(nèi)容的一致感，而且在內(nèi)容上顯得更加突出。
就像這副插畫，它是為文章《UI設(shè)計當(dāng)中的3C要素：色彩，對比和內(nèi)容》所設(shè)計的，這篇文章中的三個關(guān)鍵詞分辨是色彩、對比度和內(nèi)容，而這個是選取顏色作為核心的語義元素，并且非常貼合主題地選取了繪畫作為插畫內(nèi)容的主體。在細(xì)節(jié)配色上，強烈的色彩對比又貼合了對比度這一關(guān)鍵詞。
越來越多的網(wǎng)站和 APP 開始試圖將專門的角色/吉祥物融入到整個設(shè)計當(dāng)中來，借助視覺化的插畫、視頻、文本甚至圖標(biāo)和細(xì)節(jié)來展示故事，營造氛圍，傳遞信息，表達(dá)情緒，采用更加貼合當(dāng)前語境的方式，將內(nèi)容形象生動地傳達(dá)給用戶。這是故事和角色的優(yōu)勢所在。擬人化的形象能夠更容易讓用戶產(chǎn)生聯(lián)想，和現(xiàn)實世界勾連起來，承載情緒。在設(shè)計上，角色的設(shè)計也能夠在視覺上，讓頁面更加活潑。
這個案例是 Tubik Studio 的插畫師為 Florence APP 所設(shè)計的一套自定義插畫，在這個 APP 當(dāng)中，英國的護(hù)理從業(yè)者能夠找到薪資更高的，更合理的業(yè)務(wù)。插畫讓角色形象擁有了故事般的呈現(xiàn)，也闡明了應(yīng)用的功能和優(yōu)點，搭配說明，能夠更好地讓用戶明白功能和服務(wù)的內(nèi)在價值。
QQ客服