2018年下半年的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)

2018-6-7    博博


人人都是產(chǎn)品經(jīng)理 2018-06-06 16:08:27

逐漸熱起來(lái)的6月,這3種設(shè)計(jì)趨勢(shì)將會(huì)流行起來(lái)……

這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)

設(shè)計(jì)趨勢(shì)最有意思的地方在于,它總會(huì)有一些微妙的變化,而每一種趨勢(shì)的沉寂和回歸,總會(huì)伴隨著不同的轉(zhuǎn)變,甚至?xí)?chuàng)造出一些全新的設(shè)計(jì)模式。溫度回升進(jìn)入夏季,這個(gè)六月的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)都不是全新的東西,都是熟臉,但是仔細(xì)看看,會(huì)發(fā)現(xiàn)在細(xì)節(jié)上又略有不同。

接下來(lái),我們看看6月流行的這3種設(shè)計(jì)趨勢(shì):

1. 全屏大圖

超大的全屏圖片在網(wǎng)頁(yè)設(shè)計(jì)中已經(jīng)不算太新鮮的東西了。不過(guò),如果你仔細(xì)查看近期的這些使用高清全屏大圖的網(wǎng)頁(yè)設(shè)計(jì),會(huì)發(fā)現(xiàn)設(shè)計(jì)師們開(kāi)始越來(lái)越多地將其他的元素從整個(gè)首屏設(shè)計(jì)中剝離,讓位于背景的圖片展示性更強(qiáng),將屏幕填充得更加徹底。

全屏大圖以外,不再有獨(dú)立的導(dǎo)航區(qū)域或者其他的元素,所有的前景元素都位于圖片的籠罩之下,網(wǎng)站的一體性更加明顯。由于前景元素的缺乏,整個(gè)背景圖片承擔(dān)了更多的視覺(jué)展示的作用,只有最好、最引人矚目和有趣的圖片才更加契合這樣的設(shè)計(jì)。

下面的三個(gè)網(wǎng)站設(shè)計(jì)案例均是如此,導(dǎo)航等功能都隱藏在大圖背景當(dāng)中,通過(guò)漢堡圖標(biāo)和其他的方式來(lái)引導(dǎo)用戶點(diǎn)擊或者吸引用戶。所以,圖片的素質(zhì)必須非常的過(guò)硬才行。

這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)

而這種設(shè)計(jì)手法所面對(duì)的問(wèn)題也很具體,比如說(shuō)大圖背景所帶來(lái)的對(duì)比度和識(shí)別度上的可用性問(wèn)題,前景元素和背景圖片之間在視覺(jué)上的沖突等等。

其他的設(shè)計(jì)元素,比如線條和「查看更多」和箭頭等元素,能夠在視覺(jué)的引導(dǎo)上起到一定的作用,類似這樣的設(shè)計(jì)細(xì)節(jié)能夠很好的緩解一些上述的問(wèn)題,不過(guò)需要設(shè)計(jì)師仔細(xì)斟酌。

2. 全新分屏設(shè)計(jì)

我們?cè)?jīng)在設(shè)計(jì)趨勢(shì)相關(guān)的文章中多次提到分屏設(shè)計(jì),而分屏式設(shè)計(jì)也多次作為月度設(shè)計(jì)趨勢(shì)出現(xiàn)在同系列的文章當(dāng)中。

分屏設(shè)計(jì)的好處在于它本身可以很好地呈現(xiàn)兩方面的信息,并且能夠針對(duì)不同尺寸的屏幕進(jìn)行響應(yīng)。無(wú)論是在桌面端屏幕上還是在移動(dòng)端界面上,都能一次獲取兩種不同的信息。用戶不會(huì)錯(cuò)過(guò)重要的信息。

不過(guò)在的網(wǎng)頁(yè)設(shè)計(jì)作品當(dāng)中,分屏設(shè)計(jì)本身在功能和形式上并沒(méi)有太大的變化,不過(guò)在處理方式和細(xì)節(jié)上和以往不盡相同。

首先,這些設(shè)計(jì)保留了分屏設(shè)計(jì)的基本思路和精神,也就是將屏幕分為兩個(gè)部分來(lái)呈現(xiàn)信息,但是在劃分區(qū)域的時(shí)候,設(shè)計(jì)師換了新的思路。Reach Digital 分屏采用的是對(duì)角線方向的不對(duì)稱分屏,黃白雙色對(duì)比強(qiáng)烈,而同樣采用對(duì)角線分屏的 Cap GunCup Creative 則使用了更為簡(jiǎn)約的黑白配色風(fēng)格,Weima 這個(gè)網(wǎng)站則采用了傳統(tǒng)的左右分屏,但是分割的比例是按照3:1來(lái)劃分的,這種分割方式更加有趣。

這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)

分屏設(shè)計(jì)的好處在于它可以應(yīng)對(duì)多種多樣的設(shè)計(jì)。無(wú)論是小型網(wǎng)站,還是大量的內(nèi)容,分屏的設(shè)計(jì)都可以讓用戶參與進(jìn)來(lái)。分屏式設(shè)計(jì)為用戶提供了兩種不同的選擇,不難理解,功能也很直觀。

3. 低透明度色彩疊加

在圖片和視頻上疊加色彩也不是什么新鮮的玩法,它是非常受歡迎的設(shè)計(jì)手法和趨勢(shì)。這種設(shè)計(jì)技法讓設(shè)計(jì)師可以更輕松地創(chuàng)建層次分明的效果,可以通過(guò)色彩疊加來(lái)創(chuàng)建更為統(tǒng)一的視覺(jué)效果,控制對(duì)比度,營(yíng)造氛圍和情緒。

這種設(shè)計(jì)當(dāng)中,透明度的控制是極為關(guān)鍵的一個(gè)步驟。通常,設(shè)計(jì)師不會(huì)讓色彩疊加層透明度太低,這樣用戶就可以一目了然地看到背景的圖片信息。不過(guò),在今天的這幾個(gè)案例當(dāng)中,用戶需要仔細(xì)分辨才能看清背景中被蓋住的內(nèi)容,因?yàn)樯石B加層的透明度不高,對(duì)背景圖片的遮蓋力很強(qiáng)。對(duì)于這種設(shè)計(jì)趨勢(shì),我們可以簡(jiǎn)單分析一下:

  • 這種設(shè)計(jì)看起來(lái)是很酷的,低透明度讓背景以紋理的形式呈現(xiàn),更加富有深度,創(chuàng)造出吸引人的視覺(jué)效果。
  • 這種設(shè)計(jì)趨勢(shì)不適合傳遞背景信息,因?yàn)榈屯该鞫却_實(shí)很難讓背景的細(xì)節(jié)清晰地傳達(dá)出來(lái)。

那么,這種設(shè)計(jì)趨勢(shì)是否值得追隨呢?這個(gè)就要具體問(wèn)題具體看待了。

不要使用這種趨勢(shì)來(lái)呈現(xiàn)關(guān)鍵性的圖片信息,如果你僅僅只是要借助圖片搭配色彩疊加來(lái)強(qiáng)化層次感、增加信息量,那么另當(dāng)別論。

在下面的每個(gè)案例當(dāng)中,前景的元素都足以傳遞出清晰的內(nèi)容和信息,彩色疊加層后的圖片內(nèi)容更多是裝飾性的。圖片雖然都提供了一些附加的信息,但是這些信息都不是關(guān)鍵,它們更多的是強(qiáng)化視覺(jué)。

這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)這個(gè)6月,將流行的3種設(shè)計(jì)趨勢(shì)

這是一個(gè)適用范圍相對(duì)較窄的趨勢(shì),如果你想使用的話,同樣需要控制好透明度。

結(jié)語(yǔ)

跟隨設(shè)計(jì)趨勢(shì)是一個(gè)非常有趣的事情,它可以讓你的設(shè)計(jì)保持新鮮,讓你的設(shè)計(jì)在激烈的競(jìng)爭(zhēng)中脫穎而出,它同時(shí)可能還存在一些風(fēng)險(xiǎn),需要你在使用的時(shí)候仔細(xì)衡量。


分享本文至:

日歷

鏈接

個(gè)人資料

存檔