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