在這些趨勢里面,有的會持續(xù)性地流行好幾年,也有一些,會被淘汰。幾乎每年年底,都會有一些網(wǎng)站,根據(jù)過去一年中 UI 設(shè)計(jì)風(fēng)格的更迭,來預(yù)測下一年的趨勢。
在線網(wǎng)站 creative bloq 就以網(wǎng)頁設(shè)計(jì)為主,列舉了十個(gè) 2017 年的 UI 設(shè)計(jì)趨勢的例子,希望對你有所幫助。
一、有沉浸感的全屏式設(shè)計(jì)
Immersive 沉浸感,說的是一種讓你猶如身臨其境的模擬真實(shí)的效果。就像最初的美術(shù)來自于對現(xiàn)實(shí)的模擬一樣,這種擬真的設(shè)計(jì),至今仍然受用。
因而我們能看到像這樣的網(wǎng)頁設(shè)計(jì),它以全屏式的大幅圖像和視頻為主,以一種簡單卻有效的方式,迅速把你帶入它所設(shè)定的情境之中。
這是一個(gè)不錯(cuò)的網(wǎng)頁設(shè)計(jì)的例子,來自 Campos Coffee,動態(tài)的全屏設(shè)計(jì)簡單卻蘊(yùn)含豐富的信息。
Dutch airline KLM's magazine iFly50
技術(shù)的發(fā)展給這種擬真化的表達(dá)提供了更多的選擇。與靜態(tài)的圖像不同,視頻有著更為強(qiáng)烈的“敘事性”。盡管圖像在長久以來始終占據(jù) UI 和網(wǎng)頁設(shè)計(jì)的主流,不過,在 2017 年,也許全屏式的互動視頻設(shè)計(jì)會更吸引你的眼球。
二、長滾動式設(shè)計(jì)
“滾動”,并不算是一個(gè)新的設(shè)計(jì)趨勢。
在過去的幾年內(nèi),滾動式的閱讀體驗(yàn)在小屏幕設(shè)備上的發(fā)展尤為突出。想想你手機(jī)上的 app,一定有很多采取的是這種滾動式設(shè)計(jì)。
National Geographic
正如你所看到的這個(gè)國家地理的官方網(wǎng)站一樣,這種滾動設(shè)計(jì)的好處非常直白:它提供給用戶一個(gè)更為流暢的瀏覽體驗(yàn),以一個(gè)線性的方式,引導(dǎo)用戶在短時(shí)間內(nèi)不受打擾地閱讀到更多的內(nèi)容。
Riding the new silk road by New York Times
現(xiàn)在,“滾動”從小屏幕越來越多地轉(zhuǎn)向大屏幕設(shè)計(jì)。也有很多的設(shè)計(jì)師在研究大屏幕上的“滾動”機(jī)制如何處理,才能帶來更為卓越的使用感受。
在 2017 年,這種長條狀的滾動式網(wǎng)頁設(shè)計(jì)也許將成為主流。
三、漸變色的運(yùn)用
2013 年開始盛行的扁平化設(shè)計(jì)中,強(qiáng)調(diào)簡潔的功能界面區(qū)分,拋棄多余的元素。至今,這種設(shè)計(jì)風(fēng)格依然有著借鑒的價(jià)值。
不過,隨著扁平化的流行,它的弊端也開始顯現(xiàn)出來:一時(shí)之間幾乎是所有的平面設(shè)計(jì)都在強(qiáng)調(diào)扁平化,這使得它們趨于雷同,看上去毫無個(gè)性。
想要在扁平化設(shè)計(jì)中,加點(diǎn)不一樣的元素讓它更為生動,漸變色不失為一個(gè)好的選擇。
Spotify 的網(wǎng)站,就是一個(gè)極好的例子。它的主頁面把 2016 年最流行的粉色和藍(lán)色糅合,產(chǎn)生了雙色漸變,看起來十分絢麗。
再往下拉,就變成了橙色的漸變色,顯得十分有夏天的感覺。
雖然此前設(shè)計(jì)界對于 Instagram 的扁平化漸變色 logo 的設(shè)計(jì)褒貶不一,不過,它也意味著一種設(shè)計(jì)的趨勢:漸變色能讓設(shè)計(jì)看起來更活潑有趣,毫無疑問,它是 2017 年的十大設(shè)計(jì)趨勢之一。
四、插畫的運(yùn)用
插畫可以讓設(shè)計(jì)具有“性格”,比起傳統(tǒng)的攝影,它是一種直觀的與用戶進(jìn)行情感交流的視覺語言。
對于品牌來說,沒有什么能比用插畫來塑造品牌形象、傳遞品牌性格還要簡單有效的方式了。作為一種有趣的情感表達(dá),插畫可以是量身定制的,因而它能幫助獲得用戶的信任,讓人感覺更為親切。
Dropbox 和 payplan 都是不錯(cuò)的例子,它們的首頁以簡筆畫的形式很直觀地表達(dá)了產(chǎn)品的幾大功能,能夠幫助用戶快速理解。
此外,插畫的實(shí)現(xiàn)途徑并不唯一。它提供多種創(chuàng)意方向的選擇,不同的插畫也可以傳遞不同的情緒。比如簡筆風(fēng)的手繪看上去單純可愛,精細(xì)繁復(fù)的筆觸可以產(chǎn)生一種“高級”質(zhì)感,當(dāng)插畫與攝影結(jié)合,則給人一種虛實(shí)難辨的奇幻感。
平面設(shè)計(jì)
工業(yè)設(shè)計(jì)
CG插畫
UI交互
室內(nèi)設(shè)計(jì)
建筑環(huán)境