隨著這幾年電商的迅速崛起，電商網(wǎng)店裝修可謂熱火朝天。在網(wǎng)店首頁(yè)裝修設(shè)計(jì)中，有一個(gè)最重要最吸引人的組件就是全屏海報(bào)輪播設(shè)計(jì)。全屏海報(bào)幾乎成了一個(gè)網(wǎng)店最核心的商品或賣點(diǎn)展示的區(qū)域。其實(shí)，電商的這個(gè)輪播，更早的時(shí)候是從企業(yè)網(wǎng)站的banner頭圖設(shè)計(jì)演變過(guò)來(lái)的。在咱們國(guó)內(nèi)很多企業(yè)網(wǎng)站首頁(yè)高頻率采用全屏海報(bào)輪播組件依然是趨勢(shì)和熱門。但是，如果一個(gè)網(wǎng)站首頁(yè)不采用這個(gè)組件的話，是否照樣能打造高級(jí)的設(shè)計(jì)風(fēng)格呢？

帶著這個(gè)問(wèn)題，suma設(shè)計(jì)團(tuán)隊(duì)通過(guò)近年受到關(guān)注度比較高的14個(gè)網(wǎng)站首頁(yè)設(shè)計(jì)精選作品進(jìn)行分析，看看非全屏海報(bào)組件下，網(wǎng)站首頁(yè)如何排版布局依然獲得高逼格的設(shè)計(jì)感。

01.

海報(bào)圖片與海報(bào)廣告詞對(duì)半布局。視覺(jué)上看起來(lái)，海報(bào)輪播區(qū)域只占了一般核心視覺(jué)區(qū)域。實(shí)際上，圖片+廣告詞組合起來(lái)，依然是一個(gè)“全屏”概念。

02.

這個(gè)作品海報(bào)區(qū)域采用的是半全屏概念。通常來(lái)說(shuō)，在企業(yè)網(wǎng)站建設(shè)中，根據(jù)網(wǎng)站版式的不同需求，海報(bào)的高度可以是自適應(yīng)設(shè)備屏幕的高度，也可以是固定的高度。但這個(gè)作品似乎重點(diǎn)并非輪播的內(nèi)容，而是與之緊密結(jié)合的下半部分的內(nèi)容板塊。

03.

這個(gè)網(wǎng)站首頁(yè)設(shè)計(jì)作品，網(wǎng)站頭圖圖片占了7成，借助翻頁(yè)，標(biāo)題、廣告詞等視覺(jué)元素進(jìn)行布局，即使不是“全屏”，看起來(lái)依然簡(jiǎn)潔大氣。

04.

當(dāng)屏幕出現(xiàn)多個(gè)焦點(diǎn)圖時(shí)，需要處理大小對(duì)比和先后呈現(xiàn)的關(guān)系，否則統(tǒng)一規(guī)格的話，就變成多圖輪播了。

05.

這個(gè)網(wǎng)站首頁(yè)作品展示給人的感覺(jué)，超越了慢慢的全屏輪播。

06.

多個(gè)焦點(diǎn)圖時(shí)，注意對(duì)比關(guān)系。

07.

巧妙運(yùn)用色塊與焦點(diǎn)圖的關(guān)系來(lái)布局。

08.

這個(gè)家具品牌網(wǎng)站首頁(yè)設(shè)計(jì)，從大的框架架構(gòu)來(lái)看，header, menu，links就已經(jīng)形成了一個(gè)L的布局結(jié)構(gòu)。剩余的區(qū)域?yàn)閱纹梁?bào)輪播區(qū)域。有意思的是海報(bào)區(qū)域還劃分為圖片、廣告詞、行為召喚按鈕、海報(bào)輪播切換bar,等多個(gè)組件。

09.

這個(gè)網(wǎng)站設(shè)計(jì)作品首頁(yè)結(jié)構(gòu)有些復(fù)雜，顏色的布局劃分，多個(gè)內(nèi)容板塊的劃分均集合在首屏里面，有挑戰(zhàn)。

10.

這個(gè)網(wǎng)站首頁(yè)設(shè)計(jì)沒(méi)有采用全屏海報(bào)輪播方式，結(jié)合上一張、下一張、廣告詞、主圖形成的虛實(shí)結(jié)合的輪播模式，更透氣，更有設(shè)計(jì)感。比一張全屏大圖，上面壓著幾個(gè)字，更有效果。

11.

這個(gè)網(wǎng)站首頁(yè)版式設(shè)計(jì)特有意思。線條、豎著排版、橫著排版都有，但整體看起來(lái)并不覺(jué)得分散和混亂。這個(gè)界面的交互設(shè)計(jì)動(dòng)效設(shè)計(jì)一定很出彩。

12.

三個(gè)焦點(diǎn)圖，展示不同的服裝細(xì)節(jié)和場(chǎng)景，加上廣告詞一起融合成首頁(yè)風(fēng)格。

13.

服裝行業(yè)或者家具行業(yè)的網(wǎng)站常常會(huì)遇到豎著比例的圖片。

14.

界面越簡(jiǎn)潔，越有利于做出彩的交互設(shè)計(jì)。

小結(jié)

-

事實(shí)上，不管網(wǎng)站首頁(yè)如何布局排版，從內(nèi)容框架的角度來(lái)看，其實(shí)還是“全屏”的，與頁(yè)頭、頁(yè)尾有著對(duì)比和融合的關(guān)系。只是這十四個(gè)優(yōu)秀的網(wǎng)站首頁(yè)設(shè)計(jì)作品巧妙的運(yùn)用了屏幕布局的關(guān)系，把一部分區(qū)域運(yùn)用來(lái)展示焦點(diǎn)圖片，一部分用來(lái)展示核心廣告詞。圖片與文字的排版形成有效的留白和韻律，因此即使看起來(lái)這個(gè)網(wǎng)站設(shè)計(jì)作品沒(méi)有采用全屏海報(bào)輪播組件，依然獲得高級(jí)的設(shè)計(jì)感。