最近我花了不少時(shí)間來(lái)觀察 UI 設(shè)計(jì)的發(fā)展趨勢(shì),我偶然間注意到了不少很有意思的苗頭,或者說(shuō)設(shè)計(jì)趨勢(shì)。我認(rèn)為這些設(shè)計(jì)趨勢(shì),能夠在不久的將來(lái)塑造更加獨(dú)樹(shù)一幟的UI 。下面是我所梳理總結(jié)出來(lái)的 10 種趨勢(shì)。
1、新擬物化
的確,新擬物化是2020年處于風(fēng)口浪尖的一種視覺(jué)風(fēng)格,無(wú)論你喜歡不喜歡,覺(jué)得它可行不可行,它現(xiàn)在都已經(jīng)是一個(gè)確定的、成型的風(fēng)格,并且會(huì)持續(xù)存在著。
不過(guò),新擬物化從最初誕生到現(xiàn)在,已經(jīng)有一定的改變了,并且在向著更加復(fù)雜、完善的方向發(fā)展,有著更為良好的可訪問(wèn)性,開(kāi)始具備更多擬物化的設(shè)計(jì)特征,但是更加新鮮、現(xiàn)代,并且更能渲染出獨(dú)特的氛圍感。
2、柔和漸變
漸變這種設(shè)計(jì)趨勢(shì)正在進(jìn)入兩極分化的一個(gè)階段。一方面,在視覺(jué)設(shè)計(jì)領(lǐng)域,一部分漸變變得更加夸張,但是在 UI 設(shè)計(jì)領(lǐng)域,無(wú)論是背景、UI元素(比如按鈕、卡片和圖形),漸變依然存在,只不過(guò)會(huì)顯得更加微妙柔和。
在 UI 設(shè)計(jì)領(lǐng)域,還有的設(shè)計(jì)師會(huì)使用雙色漸變,并且結(jié)合模糊效果,讓它更加柔和。
3、幾何元素
幾何元素既可以作為背景來(lái)使用,也可以作為裝飾細(xì)節(jié),讓你的設(shè)計(jì)越來(lái)越有趣。幾何元素在最近幾年受到的關(guān)注非常多,在設(shè)計(jì)上的應(yīng)用也頗為廣泛,甚至有人將幾何元素拼接成為馬賽克,最終呈現(xiàn)出來(lái)的視覺(jué)效果非常酷!
4、色調(diào)柔和背景
必須說(shuō),我個(gè)人是非常喜歡這種設(shè)計(jì)趨勢(shì)的。我已經(jīng)看到了很多令人驚艷的、輕巧且極富美學(xué)價(jià)值的背景設(shè)計(jì),它們用明亮柔和的色彩鋪滿背景,展現(xiàn)出極強(qiáng)的色彩和搭配的技巧。
使用色調(diào)柔和的背景能夠讓整個(gè)設(shè)計(jì)都顯得現(xiàn)代而沉靜,清新,讓內(nèi)容真正抓住用戶的注意力。
5、插畫和3D元素
插畫毫無(wú)疑問(wèn)是非常流行的。不過(guò),不論是配色還是視覺(jué)風(fēng)格,無(wú)論是什么樣的插畫風(fēng)格,最終的目標(biāo)依然是要契合產(chǎn)品和 UI,所以很多插畫都選擇了相對(duì)扁平的風(fēng)格,或者選擇模擬類似3D的視覺(jué)外觀。相比于每個(gè)數(shù)字項(xiàng)目都在使用的免費(fèi)圖片,插畫真的是向前走出了一大步!
6、抽象圖形
和傳統(tǒng)的規(guī)則的幾何圖形不同,抽象而不規(guī)則的圖形可以讓界面顯得更加不拘一格和好玩,更通俗的來(lái)講,就是讓 UI 界面更加「有機(jī)」,我認(rèn)為這是一件好事。使用鋼筆工具在原始的圓形和矩形上進(jìn)行編輯,嘗試不同的輪廓,承載不同的顏色和漸變效果,最后生成的效果會(huì)非常有趣。如果你不想去自己繪制,可以嘗試一下 Blobmaker 這個(gè)工具,能夠幫你節(jié)省時(shí)間~
7、深色模式
深色模式在這2年絕對(duì)是人所共知的一個(gè)設(shè)計(jì)風(fēng)尚了,如今的深色模式 UI 設(shè)計(jì)已經(jīng)深入到各個(gè)不同的應(yīng)用。簡(jiǎn)單來(lái)說(shuō)他是整個(gè)界面配色反轉(zhuǎn)之后的效果,便于用戶在深夜更輕松地瀏覽界面信息。只不過(guò)在具體的設(shè)計(jì)實(shí)施上,深色模式遠(yuǎn)不是簡(jiǎn)單的色彩反轉(zhuǎn)就可以實(shí)施的,有很多注意事項(xiàng),尤其是在對(duì)比度控制上。
8、傾斜角度呈現(xiàn)
最初大家在 Dribbble 上會(huì)傾向于使用非標(biāo)準(zhǔn)的排版布局方式來(lái)呈現(xiàn)UI界面,后來(lái)這種展現(xiàn)方式開(kāi)始逐漸在實(shí)際的設(shè)計(jì)項(xiàng)目中應(yīng)用開(kāi)來(lái)。在實(shí)際的設(shè)計(jì)當(dāng)中,絕大多數(shù)情況下都會(huì)挑選30度到50度之間的傾斜角度。這種方法非常不錯(cuò),可以多嘗試。
9、彌散的陰影
陰影是擬物化設(shè)計(jì)當(dāng)中最重要的視覺(jué)元素之一,而如今它又再次大規(guī)模流行開(kāi)來(lái)了。只不過(guò)相比于之前「沉重」的陰影,柔和的彌散陰影在美學(xué)上更加令人愉悅,通常,陰影會(huì)讓 UI 元素的「可點(diǎn)擊感」更強(qiáng),并且有助于區(qū)分界面中的層次結(jié)構(gòu)。在這篇文章當(dāng)中,我有詳細(xì)說(shuō)明:
10、簡(jiǎn)約加粗的字體
實(shí)際上早在 iOS 7 的時(shí)代,曾經(jīng)一度流行過(guò)筆觸纖細(xì)且字體寬度比較窄的字體,不過(guò)很慶幸這個(gè)時(shí)代過(guò)去了。現(xiàn)在所流行的字體更加講究字體的可讀性,字體的外輪廓都大體趨近于正方形,外觀顯得更加大氣而現(xiàn)代。如果你正在尋找類似這樣的字體,可以試試 Poppins、Montserrat、Gilroy、Sofia Pro、Proxima Nova 等字體。