2021-04-22 分類: 網(wǎng)站建設(shè)
網(wǎng)站的產(chǎn)品列表是網(wǎng)上商店很重要的頁(yè)面之一,同時(shí)也是用戶決定購(gòu)買或使用的關(guān)鍵頁(yè)面。合理的布局方案不僅能提升用戶的視覺體驗(yàn),同時(shí)還能挺高用戶的操作體驗(yàn),促進(jìn)用戶買單。一般來(lái)說(shuō),產(chǎn)品列表頁(yè)主要有列表布局、大圖布局、兩列網(wǎng)格布局、兩列瀑布流布局、兩列拼圖布局以及三列網(wǎng)格布局等六種布局方式。下面,北京網(wǎng)站建設(shè)創(chuàng)新互聯(lián)小編將為大家詳細(xì)分析這六種網(wǎng)站布局方式的特點(diǎn)。
布局方式一:列表布局
圖片細(xì)節(jié)展示:★ ★
承載產(chǎn)品數(shù):★ ★ ★ ★ ★
商品信息對(duì)比:★ ★ ★ ★ ★
趣味性和新鮮感:★ ★
列表布局是我們常見的圖文列表,著重文本內(nèi)容,由于圖片尺寸較小,因此圖片細(xì)節(jié)展示不豐富。這種布局方式常用于電商類或團(tuán)購(gòu)類產(chǎn)品中,適合產(chǎn)品圖片質(zhì)量不高,產(chǎn)品數(shù)量較多,需要通過(guò)優(yōu)惠信息、價(jià)格參數(shù)等來(lái)進(jìn)行對(duì)比時(shí)使用。
優(yōu)勢(shì):列表布局循自上而下的閱讀模式,有利商品信息的對(duì)比,同時(shí)一屏可展示產(chǎn)品數(shù)較多。
劣勢(shì):趣味性和新鮮感較差,因此瀏覽時(shí)間過(guò)長(zhǎng)會(huì)出現(xiàn)視覺疲勞。
布局方式二:大圖布局
圖片細(xì)節(jié)展示:★ ★ ★ ★ ★
承載產(chǎn)品數(shù):★ ★
商品信息對(duì)比:★ ★
趣味性和新鮮感:★ ★ ★ ★
大圖網(wǎng)格布局是指一行只展示一張圖片,由于圖片所占比例較大,往往一屏只能展示1-2張,但圖片細(xì)節(jié)比較清晰,用戶可根據(jù)圖片對(duì)商品進(jìn)行對(duì)比。此列表方式適合產(chǎn)品數(shù)量較少,圖片有專人維護(hù)時(shí)使用,多用于圖片類、商品推薦等列表中使用。
優(yōu)勢(shì):視覺效果好,適合以圖片為主的產(chǎn)品或商品數(shù)量較少的推薦列表等。
劣勢(shì):大圖布局頁(yè)面空間消耗大,一屏可展示內(nèi)容少,不利于信息的查找和對(duì)比。
布局方式三:兩列網(wǎng)格布局
圖片細(xì)節(jié)展示:★ ★ ★
承載產(chǎn)品數(shù):★ ★ ★ ★
商品信息對(duì)比:★ ★ ★ ★
趣味性和新鮮感:★ ★ ★
兩列網(wǎng)格布局主要是將屏幕一分為而,圖片和文字進(jìn)行上下展示,類似一個(gè)網(wǎng)格,而瀏覽次序則類似「Z」,能均衡地被用戶所看到。如果產(chǎn)品主要以圖片對(duì)比為主,但又不需要大圖展示,可采用該布局進(jìn)行設(shè)計(jì),一般來(lái)說(shuō),兩列網(wǎng)格布局往往和列表布局會(huì)一起使用。
特點(diǎn):相比于大圖展示,一屏可展示更多的商品,有利于信息的對(duì)比,相對(duì)于列表布局,兩列網(wǎng)格布局更適合用戶目標(biāo)不明確或者以圖片為主的產(chǎn)品。
布局方式四:兩列瀑布流布局
圖片細(xì)節(jié)展示:★ ★ ★ ★
承載產(chǎn)品數(shù):★ ★ ★ ★
商品信息對(duì)比:★ ★ ★ ★
趣味性和新鮮感:★ ★ ★ ★
兩列瀑布流布局即將屏幕一分為二,但圖片的高度會(huì)隨圖片的尺寸變化而變化,與兩列宮格布局不同,瀑布流布局采用不規(guī)則的Z字布局,讓界面更有趣味性,避免視覺疲勞。兩列瀑布流布局方式多用于用戶目標(biāo)不明確,同時(shí)產(chǎn)品數(shù)量多,可以無(wú)限下滑的時(shí)候。
優(yōu)勢(shì):由于布局的高度由圖片決定,因此,圖片細(xì)節(jié)的表達(dá)更為有力,同時(shí)可增加商品分類標(biāo)簽,方便用戶在操作疲勞時(shí)進(jìn)行選擇性篩選。
劣勢(shì):圖片大小不統(tǒng)一,大的容易被看到,而小的容易被忽略。
布局方式五:兩列拼圖布局
圖片細(xì)節(jié)展示:★ ★ ★ ★ ★
承載產(chǎn)品數(shù):★ ★
商品信息對(duì)比:★ ★
趣味性和新鮮感:★ ★ ★ ★
兩列拼圖布局,一般是以一張大banner的形式出現(xiàn),下面再有幾張圖片以各種拼圖形式呈現(xiàn)。一般來(lái)說(shuō),下面展示的信息都是與大banner相關(guān)列表的商品,適用于推薦類頁(yè)面。
優(yōu)勢(shì):采用拼圖的形式展現(xiàn),從不同角度進(jìn)行產(chǎn)品的展示,能更容易吸引用戶購(gòu)買。
劣勢(shì):因?yàn)椴灰?guī)則的拼圖會(huì)導(dǎo)致維護(hù)成本過(guò)高,同時(shí)小圖片很容易被忽略,因此多用于推薦頁(yè)面中。
布局方式六:三列網(wǎng)格布局
圖片細(xì)節(jié)展示:★ ★
承載產(chǎn)品數(shù):★ ★
商品信息對(duì)比:★ ★
趣味性和新鮮感:★ ★
三列網(wǎng)格布局,也是將屏幕一分為三進(jìn)行展示,這種方式能比兩列網(wǎng)格布局一屏可以展示更多的商品,但由于商品圖標(biāo)過(guò)小,因此對(duì)比性較弱,且內(nèi)容多,界面排版樣式單一,趣味性和新鮮感也會(huì)隨之降低。三列網(wǎng)格布局適合用戶再次操作目的性不強(qiáng),同時(shí)產(chǎn)品數(shù)量非常多,對(duì)圖片細(xì)節(jié)要求不高時(shí)使用。
優(yōu)勢(shì):一屏能展示更多商品。
劣勢(shì):商品圖片小,對(duì)比性較弱,趣味性和新鮮感也因內(nèi)容多和界面排版樣式單一而降低。
產(chǎn)品采用哪種圖片布局方式,主要還是以取決于產(chǎn)品本身的類型,例如:電商類產(chǎn)品適合列表頁(yè)布局,推薦頁(yè)適合兩列拼圖布局等。當(dāng)如果你對(duì)這方面還有哪些疑問(wèn),可以直接咨詢北京網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)客服,我們會(huì)以專業(yè)的知識(shí)為你解決網(wǎng)站建設(shè)、網(wǎng)上推廣等問(wèn)題。
文章名稱:網(wǎng)站建設(shè)技巧之頁(yè)面布局的六大方式及其特點(diǎn)
當(dāng)前鏈接:http://m.rwnh.cn/news22/109422.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容