小红书手机详情页多大

摘要： 这是一个非常好的问题,但答案并不是一个固定的数字，因为它涉及到多个尺寸和不同场景，小红书手机详情页的核心尺寸是 *1080px 1920px**，但你需要根据不同的展示位置和设备进...

这是一个非常好的问题,但答案并不是一个固定的数字，因为它涉及到多个尺寸和不同场景。

小红书手机详情页的核心尺寸是 *1080px 1920px**，但你需要根据不同的展示位置和设备进行适配。

下面我为你详细拆解一下,让你彻底搞懂：

核心尺寸：主图轮播图

这是用户在手机上打开商品详情页时,最先看到的部分，也是最重要的视觉区域。

• 标准尺寸：1080px × 1920px

  
  （图片来源网络，侵删）
  • 这是目前主流智能手机的屏幕分辨率（iPhone 12/13/14/15, 安卓大部分中高端机型）。
  • 建议： 所有主图都按照这个尺寸来制作，确保在绝大多数手机上都能完整、清晰、无变形地展示。

• 制作建议：

  • 竖版构图： 必须使用竖版图片，因为用户是竖屏浏览的。
  • 主体突出： 商品要放在视觉中心，信息清晰。
  • 安全区域： 避免将最重要的文字或logo放在屏幕最边缘，因为不同手机的刘海/挖孔区域会遮挡内容，可以预留出上下约50px的安全边距。
  • 背景简洁： 避免使用与商品背景色相近的图片，防止在缩略图时看不清。

其他关键尺寸和区域

一个完整的详情页不仅仅是主图,还包括其他模块，这些模块也有各自的尺寸要求。

详情页缩略图

当用户向下滑动浏览详情时,主图区域会缩小并固定在顶部，此时显示的就是缩略图。

• 尺寸：通常为 1080px × 408px

  这个高度是根据主图高度（1920px）按比例缩小得到的，确保缩略图能完整展示主图的中间部分，保持商品主体不被裁切。

视频

视频的尺寸要求和主图轮播图完全一致。

• 推荐尺寸：1080px × 1920px (竖版)
• 视频比例：9:16
• 文件格式： MP4, MOV等常见格式。
• 时长： 建议控制在15-60秒，节奏要快，前3秒必须抓住用户眼球。

SKU / 颜色/尺寸选择弹窗

当用户点击选择不同颜色或尺码时,会弹出一个新的窗口。

• 弹窗尺寸：通常为屏幕宽度的 90% 左右
  • 高度会根据内容自适应。
  • 设计要点： 背景要有一定的透明度（如半透明黑色遮罩），让用户知道他们仍在当前页面，只是弹出了一个选择层，里面的商品小图也需要清晰，建议尺寸不小于 300px × 300px。

特殊情况：适配不同手机屏幕

虽然1080px是主流,但市场上还有其他分辨率的手机。

• 适配原则： 使用矢量图形和响应式设计。
  • Logo和图标： 必须使用矢量格式（如SVG），这样无论在什么分辨率的屏幕上都能保证边缘清晰锐利。
  • 图片： 使用1080px × 1920px的高清图，在更高分辨率的屏幕（如2K屏）上，它会被自动放大，虽然会有轻微的模糊，但这是目前行业内成本和效果的最佳平衡点，为所有分辨率单独制作图片成本太高。
  • 文字： 使用相对单位（如 sp 或 rem）而不是固定像素（px），这样文字可以根据系统设置自动缩放，保证在不同设备上都易于阅读。

总结与最佳实践

给你的最终建议：

1. 以1080px × 1920px为黄金标准，来设计你的所有主图和视频。
2. 在设计时,始终想象你的内容是在一部竖屏手机上展示的。
3. 如果你是设计师,请在交付文件时，同时提供1080px × 1920px的切图和矢量源文件，方便前端开发进行适配。
4. 实际测试！ 在不同型号的手机（iPhone, 华为, 小米, OPPO等）上亲自查看你的详情页，检查是否有变形、模糊或文字看不清的问题。