中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

產(chǎn)品列表是用戶挑選商品，決定是否購買或使用的關(guān)鍵頁面，合理的布局方案不僅能提升用戶的視覺體驗(yàn)，同時還能提高用戶的操作體驗(yàn)，從而促進(jìn)用戶買單。

產(chǎn)品列表采用什么樣的布局方案才是有效的呢？

我們不能拋開產(chǎn)品單獨(dú)分析，而是需要根據(jù)你的產(chǎn)品數(shù)量、用戶需求、產(chǎn)品目的等多方面來確定。不過最重要的在此之前我們還需要知道有哪些布局方案。

下面我總結(jié)了六大布局：

下面為了方便大家分析對比，我將對這六大布局進(jìn)行分析，同時從圖片細(xì)節(jié)展示、承載產(chǎn)品數(shù)多少、商品信息對比強(qiáng)弱、趣味性和新鮮感這四個決定采用何種布局方案的點(diǎn)進(jìn)行評分。

列表布局

列表布局也就是我們常見的圖文列表，一個列表垂直呈現(xiàn)多個連續(xù)的行元素。列表布局重在文本內(nèi)容，由于圖片尺寸較小，因此圖片細(xì)節(jié)展示不豐富。最常見的使用場景就是電商、團(tuán)購類列表，如：淘寶、大眾點(diǎn)評等。

其優(yōu)勢是，由于列表布局遵循自上而下的閱讀模式，因此有利于商品信息的對比，同時一屏可展示產(chǎn)品數(shù)較多。但是其趣味性和新鮮感較差，因此瀏覽時間過長會出現(xiàn)視覺疲勞。

如圖：

以大眾點(diǎn)評為例：其圖片直接采用產(chǎn)品圖，質(zhì)量較低而且統(tǒng)一性不強(qiáng)。同時針對團(tuán)購類的產(chǎn)品，我們需要快速瀏覽查看每個列表的信息，從而針對優(yōu)惠信息進(jìn)行對比，因此采用列表布局較為適合。

以淘票票為例：圖片主要起到視覺引導(dǎo)的作用，而用戶需要看的就是打折的詳細(xì)信息，因此采用列表布局有利于商品的對比使用。

綜上，如果滿分是五顆星，那么列表的圖片細(xì)節(jié)展示較差為2顆星；承載產(chǎn)品數(shù)多為5顆星；商品信息對比強(qiáng)為5顆星；趣味性和新鮮感低為2顆星。

什么時候使用？

當(dāng)你的產(chǎn)品圖片質(zhì)量不高，產(chǎn)品數(shù)量較多，你的產(chǎn)品需要通過優(yōu)惠信息、價格參數(shù)等來進(jìn)行對比，另外對界面效果要求較低時，我們可以采用列表布局。

大圖網(wǎng)格布局

大圖網(wǎng)格布局，也就是指一行只展示一張圖片，由于其圖片占比較大，因此往往一屏只能展示1到2張，圖片細(xì)節(jié)能夠清晰展現(xiàn)，用戶可直接根據(jù)圖片進(jìn)行商品對比。最常見的使用場景就是以圖片為主的APP推薦列表，例如：愛彼迎、螞蟻短租、懶人周末等。

相比于列表布局，大圖布局頁面空間的消耗大，一屏可展示內(nèi)容少，不利于信息的查找和對比，同時視覺效果較好，因此適合以圖片為主的產(chǎn)品，同時多用于商品數(shù)量較少或推薦列表中。

如圖：

以螞蟻短租和懶人周末為例，雖然他們一個是短租類APP，一個是生活類APP。其共同點(diǎn)是他們的圖片都是經(jīng)過專人編輯，圖片質(zhì)量較高，同時對界面視覺要求較高，采用大圖布局可展示更多的細(xì)節(jié)，幫助用戶篩選對比，提升整體的界面效果。

綜上，如果滿分是五顆星，那么大圖網(wǎng)格布局的圖片細(xì)節(jié)展示豐富為5顆星、承載產(chǎn)品數(shù)少為2顆星、商品信息對比弱為2顆星、趣味性和新鮮感較高為4顆星。

什么時候使用？

當(dāng)你的產(chǎn)品數(shù)量較少，圖片有專人維護(hù)，同時從產(chǎn)品屬性上看，用戶需要通過圖片來進(jìn)行對比時，我們就可以采用大圖展示，大圖展示往往視覺效果好，多用于圖片類、租房類、商品推薦等列表中。

兩列網(wǎng)格布局

兩列網(wǎng)格布局也就是將屏幕一分為二，圖片和文字進(jìn)行上下展示，類似一個網(wǎng)格，瀏覽次序類似一個Z字，因此產(chǎn)品都能均衡的被用戶看到。例如：天貓、嚴(yán)選等商品列表。

相比于大圖展示，一屏可展示更多的商品，有利于信息的對比，相對于列表布局，兩列網(wǎng)格布局更適合用戶目標(biāo)不明確或者以圖片為主的產(chǎn)品。

如圖：

以in和嚴(yán)選為例：雖然他們分別為圖片社交類和電商類，但其目的都是讓用戶通過圖片選擇自己感興趣的內(nèi)容。從產(chǎn)品細(xì)節(jié)展示來說，比列表布局更豐富；從產(chǎn)品信息對比來說，比大圖更便捷。因此目前兩列網(wǎng)格布局應(yīng)用較為廣泛。

綜上，如果滿分是五顆星，那么兩列網(wǎng)格布局的圖片細(xì)節(jié)展示一般為3顆星；承載產(chǎn)品數(shù)較多為4顆星；商品信息對比較強(qiáng)為4顆星；趣味性和新鮮感一般為3顆星。

什么時候使用？

如果你的產(chǎn)品是以圖片對比為主，同時又不需要大圖展示時，即可采用該布局進(jìn)行設(shè)計(jì)。兩列網(wǎng)格布局往往和列表布局會一起使用。

兩列瀑布流布局

兩列瀑布流布局也就是將屏幕一分為二，和常規(guī)布局類似，其中圖片的寬固定，高隨圖片的尺寸變化而變化。相比于兩列宮格布局，瀑布流布局采用不規(guī)則的Z字布局，讓界面更有趣味性，避免視覺疲勞。

由于布局的高度由圖片決定，因此，圖片細(xì)節(jié)的表達(dá)更為有力，但其不足的是圖片大小不統(tǒng)一，大的容易被看到，而小的容易被忽略。因此瀑布流布局多用戶用戶目的性不強(qiáng)，產(chǎn)品數(shù)量較多的情況。

如圖：

在匯總時我發(fā)現(xiàn)現(xiàn)在很多APP列表都采用了瀑布流的形式，以小紅書和淘寶為例：他們均是以圖片展示為主，同時圖片多為第三方上傳，圖片質(zhì)量不統(tǒng)一，產(chǎn)品數(shù)量較多，采用瀑布流提升了界面的趣味性，避免用戶視覺疲勞。

另外，瀑布流還有個好處就是，類似上面截圖淘寶的列表，可以增加商品分類標(biāo)簽，方便用戶在操作疲勞時進(jìn)行選擇性篩選。

綜上，如果滿分是五顆星，那么兩列瀑布流布局的圖片細(xì)節(jié)展示較高為4顆星；承載產(chǎn)品數(shù)較多為4顆星；商品信息對比較強(qiáng)為4顆星；趣味性和新鮮感較好為4顆星。

如下圖：

什么時候使用？

兩列瀑布流布局和兩列網(wǎng)格布局的使用場景類似，唯一區(qū)別就是兩列網(wǎng)格布局在數(shù)量少時，或者用戶目標(biāo)明確時都可以采用。而瀑布流多用于用戶目標(biāo)不明確，同時產(chǎn)品數(shù)量多，可以無限下滑的時候。

兩列拼圖布局

兩列拼圖布局，頭部常以一張大banner的形式出現(xiàn)，下面是由幾張圖片以各種拼圖形式呈現(xiàn)。一般來說，下面展示的信息都是和他相關(guān)列表的商品。

比如：嚴(yán)選的推薦、小紅書的推薦等。

拼圖布局往往圖片有大有小，小的也很容易被忽略，同時編輯成本高，往往適合平臺主動推薦的商品列表。我們可以將重要信息放到大圖上，次要信息放到小圖上。

以小紅書為例：該頁面可看成是專題頁，采用拼圖的形式展現(xiàn)，從不同角度進(jìn)行產(chǎn)品的展示，最后在用列表進(jìn)行產(chǎn)品信息展示，引導(dǎo)用戶購買。

綜上，如果滿分是五顆星，那么兩列拼圖布局的圖片細(xì)節(jié)展示豐富為5顆星；承載產(chǎn)品數(shù)較少為2顆星；商品信息對比較弱為2顆星；趣味性和新鮮感較好為4顆星。

如下圖：

什么時候使用？

兩列拼圖布局，在列表中使用較少，因?yàn)椴灰?guī)則的拼圖會導(dǎo)致維護(hù)成本過高，同時小圖片很容易被忽略，因此多用于推薦頁面中，圖片由編輯經(jīng)過處理之后在進(jìn)行上傳。

三列網(wǎng)格布局

三列網(wǎng)格布局，也就是將屏幕一分為三進(jìn)行展示，也可以叫宮格布局。

相比于兩列網(wǎng)格布局一屏可以展示更多的商品，只是商品圖片過小，不管是從圖片對比性還是文字的對比性來說，三列網(wǎng)格都較弱，同時由于由于內(nèi)容多，界面排版樣式單一，趣味性和新鮮感都較低，如圖：

以陌陌直播附近和嗶哩嗶哩番劇為例，這兩個欄目用戶在使用時目的性都較弱，用戶的需求是通過查看圖片進(jìn)行快速篩選和對比。對于圖片細(xì)節(jié)展示要求不高，對于趣味性和新鮮感要求也不高。

綜上，如果滿分是五顆星，那么三列網(wǎng)格布局的圖片細(xì)節(jié)展示較弱為2顆星；承載產(chǎn)品數(shù)非常多為2顆星；商品信息對比較弱為2顆星；趣味性和新鮮感較好為2顆星。

如下圖：

什么時候使用？

當(dāng)你的用戶再次操作目的性不強(qiáng)，同時產(chǎn)品數(shù)量非常多，對圖片細(xì)節(jié)要求不高時，我們可以采用三列網(wǎng)格布局。

三列網(wǎng)格布局主要用于用戶無目的操作，產(chǎn)品數(shù)量較大時使用，和列表式的區(qū)別是列表式以文字為主進(jìn)行對比。而三列網(wǎng)格布局其圖片對比和文字對比都較弱，往往用于用戶目標(biāo)不明確，需要通過展示大量圖片供用戶選擇，同時圖片對比性質(zhì)教弱的產(chǎn)品。

總結(jié)

（1）列表布局?

當(dāng)你的產(chǎn)品圖片質(zhì)量較差，產(chǎn)品數(shù)量較多，需要進(jìn)行文字信息進(jìn)行對比的產(chǎn)品時，我們可以采用列表布局。

（2）大圖網(wǎng)格布局

如果你的產(chǎn)品數(shù)量較少，你可以采用大圖展示。如果你的產(chǎn)品是圖片類，圖片質(zhì)量較高，同時產(chǎn)品以圖片對比為主時，你可以采用大圖布局。

（3）兩列網(wǎng)格布局

如果你的產(chǎn)品是以圖片對比為主，同時又不需要大圖展示時，即可采用該布局進(jìn)行設(shè)計(jì)。

（4）兩列拼圖布局

兩列拼圖布局，在列表中使用較少，因?yàn)椴灰?guī)則的拼圖會導(dǎo)致維護(hù)成本過高，同時小圖片很容易被忽略，因此多用于推薦頁面中，圖片由編輯經(jīng)過處理之后在進(jìn)行上傳。

（5）三列網(wǎng)格布局

三列網(wǎng)格布局主要用于用戶無目的操作，產(chǎn)品數(shù)量較大時使用，和列表式的區(qū)別是列表式以文字為主進(jìn)行對比，而三列網(wǎng)格布局主要以圖片進(jìn)行對比。

作者：風(fēng)箏KK，公眾號：海鹽社

本文由 @ 風(fēng)箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議