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

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

01、海報圖片與海報廣告詞對半布局。視覺上看起來，海報輪播區(qū)域只占了一般核心視覺區(qū)域。實(shí)際上，圖片+廣告詞組合起來，依然是一個"全屏"概念。

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

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

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

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

06、多個焦點(diǎn)圖時，注意對比關(guān)系。

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

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

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

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

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

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

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

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

小結(jié)

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