
1對(duì)1定制服務(wù),PC端+手機(jī)端+小程序多端應(yīng)用
不采用全屏海報(bào)網(wǎng)站首頁(yè)照樣高級(jí)的設(shè)計(jì)技巧
2021年04月12日瀏覽:
隨著這幾年電商的迅速崛起,電商網(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ì)感。