不得不說,網(wǎng)頁設(shè)計(jì)絕對是有套路的!網(wǎng)頁布局雖然千變?nèi)f化,但是如果你仔細(xì)觀察,會(huì)發(fā)現(xiàn)有一些布局適用范疇相當(dāng)廣,經(jīng)久不衰。今天的文章,我們就來聊一下5種經(jīng)典的網(wǎng)頁布局。
1、頂部大圖Banner+簡單的柵格
無論屏幕多大,這種布局都能夠?yàn)橛脩粽故境渥愕膬?nèi)容,供用戶瀏覽和探索。雖然這種布局隨著屏幕、設(shè)備而有所差異,有的設(shè)計(jì)師會(huì)傾向于設(shè)計(jì)成固定寬或者橫跨整個(gè)頁面的布局,但是總體的模式都大同小異。
這種布局設(shè)計(jì)干凈清爽,有足夠強(qiáng)的視覺表現(xiàn)力,并且常常采用的響應(yīng)式設(shè)計(jì),斷點(diǎn)也很好控制。頂部大面積的輪播圖或者Banner 也有許多插件或者應(yīng)用來幫你實(shí)現(xiàn)。
2、單頁設(shè)計(jì),單欄布局
單頁式設(shè)計(jì)這幾年非?;?,它非常適宜于展現(xiàn)極簡的內(nèi)容,或者專注呈現(xiàn)一個(gè)主題。當(dāng)網(wǎng)站的主題集中,內(nèi)容也比較固定的時(shí)候,無需復(fù)雜的布局來呈現(xiàn),單頁單列式的布局足以應(yīng)付一切。
采用這種布局模式的時(shí)候,空間的控制至關(guān)重要,相當(dāng)考驗(yàn)設(shè)計(jì)師設(shè)計(jì)留白和布局平衡的功力。元素和元素之間的疏密關(guān)系是需要設(shè)計(jì)師反復(fù)推敲的,如果空間控制不合理會(huì)給用戶一種混亂的感覺,如果過于緊密則會(huì)產(chǎn)生局促感。
3、自定義柵格
那些被整齊分割出來的網(wǎng)頁布局從來都沒有過時(shí)過。無論是分割得細(xì)碎的網(wǎng)頁區(qū)域還是大塊的頁面區(qū)塊,大多都需要借助一套干凈整齊的柵格來支撐。在此基礎(chǔ)上,內(nèi)容按部就班地被置于不同的區(qū)塊中,被精心地組織展示出來。
在設(shè)計(jì)師的作品集頁面中,你可以發(fā)現(xiàn)各種各樣自定義的柵格布局。自定義柵格展示內(nèi)容的優(yōu)勢在于,它可以同時(shí)呈現(xiàn)大量的視覺化的內(nèi)容,看起來足夠豐富又不會(huì)落于下乘。下面這個(gè)圖庫的效果看起來就相當(dāng)震撼。
在柵格中填充色彩,還可以用來承載文字內(nèi)容。不同的區(qū)塊之間不一定非要用線條進(jìn)行分割,可供選擇的方案有很多,不過千萬要控制好柵格尺寸和間距。控制不好的細(xì)節(jié),整個(gè)設(shè)計(jì)的平衡感可能會(huì)被破壞。
4、經(jīng)典的F式布局
研究表明,用戶在瀏覽網(wǎng)頁的時(shí)候,習(xí)慣于沿著F式的閱讀軌跡來瀏覽信息,也就是說,用戶喜歡從左到右閱讀,然后向下移動(dòng),再繼續(xù)從左到右閱讀。
這種F式的閱讀模式對應(yīng)的網(wǎng)頁布局就是F式布局,最關(guān)鍵的信息靠左顯示,從上到下盡量保持在一條線上。
5、極簡分層
極簡化的設(shè)計(jì)一直都在流行,它的流行不是沒有原因的。開放式的空間讓用戶感覺更加輕松,也使得其中展現(xiàn)的內(nèi)容更容易被聚焦。如果極簡化的頁面中加入不多的幾個(gè)并列的內(nèi)容層,可以讓信息更有層次,也使得極簡的頁面擁有了細(xì)節(jié)。
這種設(shè)計(jì)并不復(fù)雜,但是讓頁面更加有趣了,它可以適配更多不同類型的項(xiàng)目了。這也解釋了為什么用戶如此的喜愛類似Apple 官網(wǎng)這樣的設(shè)計(jì)。