商品评价图片展示设计规范.docVIP

商品评价图片展示设计规范

一、基础展示框架设计

（一）图片区域布局

商品评价图片展示区域需与整体页面风格保持统一，同时突出视觉焦点。在页面布局上，采用“主图+缩略图”的双层展示结构是主流且高效的方式。主图区域应占据评价模块核心位置，宽度建议设置为模块总宽度的70%-80%，高度根据不同品类商品特性进行调整，例如服装类商品主图高度可设为400-500px，电子产品类可设为350-450px，以完整呈现商品细节。

缩略图区域则位于主图一侧或下方，采用横向或纵向滚动排列。横向排列时，缩略图数量控制在4-6张为宜，每张缩略图尺寸建议为8080px至100100px之间，间距保持10-15px，避免过于拥挤影响用户点击体验。纵向排列时，缩略图数量可适当增加至6-8张，尺寸调整为6060px至8080px，同时设置固定高度的滚动区域，超出部分通过滚动条查看。

对于多规格商品，如不同颜色、尺寸的服装，可在缩略图区域增加规格筛选标签。用户点击对应标签后，缩略图列表自动切换为该规格下的评价图片，主图同步更新为该规格的首张评价图，实现精准展示。

（二）图片加载机制

为提升页面加载速度和用户体验，图片加载需采用渐进式加载和懒加载相结合的方式。渐进式加载即先加载低分辨率的模糊图片作为占位符，待页面其他元素加载完成后，再逐步替换为高清原图。这种方式能让用户快速看到图片轮廓，减少等待焦虑。

懒加载则针对非首屏