在這個(gè)火熱的8月,正在流行這3種網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

2018-8-1    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

設(shè)計(jì)趨勢(shì)總會(huì)在你迷茫的時(shí)候,給你一點(diǎn)靈光。在合適的時(shí)候,恰到好處地「跟風(fēng)」,借助流行的趨勢(shì)幫你作出更合時(shí)宜的好設(shè)計(jì)。炎熱的8月即將到來(lái),我們觀察到三個(gè)設(shè)計(jì)的趨勢(shì),當(dāng)下正在流行。

1. 以白色和淺色為主的配色方案

雖然以白色和淺色為主的配色方案似乎哪里都有,但是在最近,這種趨勢(shì)體現(xiàn)的非常的明顯。

色彩的運(yùn)用一直都是諸多設(shè)計(jì)趨勢(shì)當(dāng)中,最為醒目的組成部分。這種以白色和淺色為主的色彩美學(xué),似乎在和之前所流行的高飽和度霓虹色的流行做對(duì)抗,柔和的灰色,相對(duì)清冷的色調(diào),甚至是顯得沒(méi)有足夠溫度的粉色,這些色彩都在力圖淡化之前配色方案中濃稠的情感和激蕩的氛圍。

Verho

以白色和淺色為主的配色方案,相對(duì)而言是沒(méi)有那么醒目的,設(shè)計(jì)師在采用這種配色方案的時(shí)候,常常會(huì)結(jié)合其他的元素,來(lái)豐富整個(gè)設(shè)計(jì)的視覺(jué)感,這樣就避免了出現(xiàn)「過(guò)于普通」的視覺(jué)感受。這種配色設(shè)計(jì)還包括了使用片拍的圖片素材,就像 Verho 這個(gè)網(wǎng)站。

Omega Yeast

Alexandra Elise

不過(guò)圖片和色塊并不是唯一的實(shí)現(xiàn)這種配色的方案,采用視頻或者插畫元素同樣可以做到,比如 Omega Yeast 和 Alexandra Elise 這兩個(gè)網(wǎng)站,它們同樣足夠吸引人。

這一設(shè)計(jì)趨勢(shì)可以搭配風(fēng)格相對(duì)清爽、情緒比較清淺的網(wǎng)站主題,在炎熱的夏季顯得尤為有感覺(jué)。頁(yè)面中的文本內(nèi)容只需要采用相對(duì)較深色彩的字體,即可確保良好的可讀性。

在按鈕和為數(shù)不多最為重要的元素上,可以采用明亮的色彩,以示強(qiáng)調(diào),整體風(fēng)格則可以保持極簡(jiǎn)。

如果你喜歡極簡(jiǎn)主義的設(shè)計(jì),并且打算運(yùn)用這一趨勢(shì),這篇文章別錯(cuò)過(guò)了:

2. 數(shù)據(jù)可視化

數(shù)據(jù)可視化將數(shù)據(jù)的直觀性提到了一個(gè)全新的層次,它使得跨行業(yè)的數(shù)據(jù)展示和信息呈現(xiàn)變得更加有價(jià)值,也更加可靠,而大規(guī)模的可視化的數(shù)據(jù)呈現(xiàn)并不是奇怪的事情。

不過(guò)也正是因?yàn)閿?shù)據(jù)可視化讓數(shù)據(jù)變得更加親民,設(shè)計(jì)師開(kāi)始更多地將圖表和數(shù)據(jù)加入到日常的設(shè)計(jì)當(dāng)中來(lái),結(jié)合交互式動(dòng)畫,讓數(shù)據(jù)在整個(gè)網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中,開(kāi)始發(fā)揮更多的作用。借助可視化的設(shè)計(jì),數(shù)據(jù)信息更輕松地為用戶所理解,整體設(shè)計(jì)也開(kāi)始顯得更加富有吸引力。

而這種設(shè)計(jì)趨勢(shì)需要設(shè)計(jì)師花費(fèi)更多的精力來(lái)處理數(shù)據(jù),盡量多借助現(xiàn)成的數(shù)據(jù)可視化的工具來(lái)進(jìn)行設(shè)計(jì)。

在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中,將數(shù)據(jù)以可視化的方式嵌入進(jìn)去有很多不同的方式,而這一趨勢(shì)最吸引人的地方也是交互式的動(dòng)態(tài)信息展現(xiàn)。

Tree Tree Tree

Tree Tree Tree 這個(gè)網(wǎng)站就很好的利用了數(shù)據(jù)可視化來(lái)展示天氣,當(dāng)你輸入你感興趣的地方的時(shí)候,它會(huì)使用可視化的樹(shù)木來(lái)呈現(xiàn)當(dāng)?shù)仫L(fēng)力大小。此外,你還能和底部的交互式的地圖進(jìn)行互動(dòng)。

Tomorrow’s World

Tomorrow’s World 這個(gè)網(wǎng)站則始于一項(xiàng)調(diào)研,而網(wǎng)站最終會(huì)將一系列的調(diào)查使用可視化的方式呈現(xiàn)出來(lái),幫助用戶了解周圍的世界。

Qravity

Qravity 在網(wǎng)站中加入了多個(gè)數(shù)據(jù)輸入點(diǎn),用戶可以通過(guò)滾動(dòng)交互來(lái)調(diào)整時(shí)間軸,信息的呈現(xiàn)也會(huì)隨之發(fā)生改變(比如日期和事件),這比起簡(jiǎn)單的列表要好懂得多。

3. 多邊形2.0

多邊形元素從2017年開(kāi)始成為設(shè)計(jì)師們的心頭好,作為一種持續(xù)流行的、泛用型的設(shè)計(jì)趨勢(shì),一直流行到現(xiàn)在。有意思的是,多邊形元素也不再維持以往常見(jiàn)的樣子,開(kāi)始在外觀和視覺(jué)上發(fā)生改變?,F(xiàn)如今的多邊形不再是以往小巧玲瓏、成群結(jié)隊(duì)的樣子,設(shè)計(jì)師開(kāi)始有意識(shí)地挑選一些多邊形,賦予它們超大的外觀造型,而不再是簡(jiǎn)單的點(diǎn)綴和堆砌。

這些超大的多邊形元素可以在不同的設(shè)計(jì)風(fēng)格之下良好地運(yùn)作,結(jié)合不同的樣式和色彩,發(fā)揮作用。它們可以作為整個(gè)設(shè)計(jì)模式中的一員,作為裝飾元素也可以用來(lái)作為強(qiáng)調(diào)特定內(nèi)容的容器(比如圖片和文本)。

多邊形元素的有點(diǎn)在于,它們?cè)煨投嘧?,可以區(qū)別于常見(jiàn)的原型和矩形,更容易吸引用戶的注意力。這種不同的使用方式,我們姑且稱之為 多邊形 2.0。

The Alan Turing Institute

多邊形的特征、角度可以隨著你的設(shè)計(jì)需求來(lái)靈活選擇,比如 The Alan Turing Institute 這個(gè)網(wǎng)站會(huì)在右側(cè)露出三角形的一部分,Evoluted 這個(gè)網(wǎng)站則將簡(jiǎn)單的線條和多邊形搭配在一起,互相疊加營(yíng)造出聚合的感覺(jué),而 Iqor 這個(gè)網(wǎng)站則更加傾向于使用多邊形來(lái)承載內(nèi)容。

Evoluted

iqor

多邊形和不同的色彩搭配,所帶來(lái)的視覺(jué)體驗(yàn)和強(qiáng)調(diào)效果都是非常突出的。不過(guò)要將內(nèi)容和多邊形結(jié)合起來(lái),設(shè)計(jì)師還是得花點(diǎn)心思。

更多多邊形元素的玩法看這里:

結(jié)語(yǔ)

對(duì)于設(shè)計(jì)趨勢(shì)而言,它是存在時(shí)效性的,它之所以在特定的階段流行有諸多因素的影響。當(dāng)你在設(shè)計(jì)的時(shí)候沒(méi)有想法的時(shí)候,設(shè)計(jì)趨勢(shì)能夠給你的不僅僅是當(dāng)下設(shè)計(jì)方向上的選取,也為你提供了一個(gè)可供參考的選擇。

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制  用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔