商品聚合頁核心使命：最大化商品曝光 → 最小化跳出率 → 最高轉化率。優質視覺體驗與流暢交互體驗是雙引擎。本文系統拆解三大主流佈局模式、核心資訊模塊、交互增強策略。

三大主流佈局模式深度對比

1. 行列網格制（淘寶商城、京東模式）

結構穩定、適配性強、用戶認知成本低。適合 SKU 豐富、標準化程度高的品類。挑戰：視覺單調、難以製造重點。

2. 瀑布流（蘑菇街模式）

不等高卡片流式佈局，最大化首屏商品曝光量，適配圖片優質、長短不一的內容(服裝、家居、圖片社區)。挑戰：底部加載閃動、定位困難、SEO 不友好。

3. 重點突出+自適應（優眾模式）

每個品類大圖推薦 2-3 款核心商品+Banner，錯落有致佈局。適合高客單價、決策周期長、圖片素材優質的品類(家電、美妝、高端服飾)。

商品卡片核心資訊模塊標準化

模塊	內容要素	設計關鍵
商品圖	200×200px 基準，適度放大減少進詳情頁跳轉	電器類可縮小，外形同質化時標題權重>圖片
商品名	品牌+系列+描述+特性+營銷文案+活動標	關鍵詞加粗/變色，兩行截斷+展開
價格體系	原價(劃線)+現價(突出)+折扣(輔助)	現價視覺權重最高，原價弱化但可識別
信用/標簽	信用評價、新品/包郵/限時等標簽	圖標化、色碼化，閱讀零成本
社會證明	評論數(最真實反饋)、銷量(排序依據+從眾心理)	高銷量/高評分商品視覺加權
顏色/規格	列表態直接顯示可選顏色	色塊+數量徽標，減少進詳情頁確認步驟

交互增強：微細節的轉化杠桿

Hover 狀態設計

• 區域高亮：邊框/陰影明確選中範圍
• 附加信息展示：化妝品展示使用感受、優眾多角度圖+視頻、韓國 Ogage 預覽/收藏/加購車三合一

點擊行為策略

1. 直接跳轉詳情頁：淘寶/京東/亞馬遜模式，通用性強，利於 SEO
2. 彈層詳情框：優眾模式，適用內容簡潔、需保持列表上下文、元素位置固定場景

選型決策框架

無最好佈局，只有最適配業務階段的佈局：
• SKU>5000、標準化高 → 行列網格
• 視覺內容為王、長尾分發 → 瀑布流
• 高客單、決策複雜、素材優 → 重點突出自適應

設計終點統一：用最小認知成本，讓用戶做對的購買決策。