我花了两个小时为我最畅销的产品制作了一幅精美的信息图像。详细的特征标注、精确的尺寸线，以及一个包含三列的对比图表。在我的27英寸显示器上看起来令人难以置信。
但在我的手机上，文本变得难以阅读。尺寸线不可见。对比图表则变成一片模糊的小数字。两个小时的工作，对我70%的客户而言，完全是浪费。
这就是我觉醒的时刻。从那以后，我设计每个产品图片都以移动优先，并在上传前先在手机上检查每一张图片。
移动现实
- 亚马逊: 70%以上的浏览是在移动设备上进行
- Shopify: 65-75%的流量来自移动设备（因店铺而异）
- Etsy: 60-70%为移动端
- 抖音店铺: 100%为移动端
- eBay: 60-65%为移动端
如果你只在桌面显示器上检查你的图片，那么你就是在为少数客户进行优化。
移动端的变化
文本变得难以阅读
在桌面显示器上24pt的文本在手机上变得微小。图像在手机屏幕上可能显示为400px宽——你2500px的图像缩小到了16%的原始大小。
规则: 产品图片中的任何文本必须在显示400px宽时可读。实际上，这意味着：
- 最小36pt字体（在2500px图像大小）
- 每个标注最多4-5个单词
- 高对比度（深色文本在浅色背景上或反之）
- 无衬线字体（在小尺寸下更易读取）
细节消失
那美丽的缝合细节？在移动设备上不可见。皮革的细腻纹理？消失了。产品上的小标志？模糊不清。
规则: 如果某个细节重要，为其提供专门的特写图像。不要依赖于客户放大——大多数移动用户不会对产品图像进行放大。
产品看起来更小
在桌面上占据70%画面的产品，在移动设备上也仅占据70%一个更小的框架。产品在小屏幕上显得成为了一个小物件。
规则: 主图像应占据85-90%的框架。在移动端，越大越好。
切换与滚动
在桌面上，客户可以同时看到多张图像（缩略图带）。在手机上，他们是逐张滑动查看图像。这改变了你应该如何排列图像。
规则: 优先展示你最好的图像。前3张图像在移动端获得最多的查看。将你的主图、生活方式图和关键特征信息图放在1-3的位置。
我的移动优化检查清单
在上传任何产品图片之前，我都会在手机上检查：
- [ ] 我能否立即在缩略图尺寸下识别产品？
- [ ] 我能否在不放大的情况下阅读所有文本？
- [ ] 重要细节在不放大的情况下是否可见？
- [ ] 产品是否占据了足够的画面？
- [ ] 前3张图像是否完整讲述了一个故事？
如果任何答案是“否”，我会在上传前修正它。
移动端信息图重设计
我旧的信息图风格：6个特征标注、带有测量的尺寸线、对比表。
我新的信息图风格：3个特征标注，2-3个字的标签，大图标，粗体文本。每张图像包含一条信息，而不是把所有信息挤在一张图上。
之前（一个繁忙的信息图）：
- 6个带描述的特征
- 带有测量的尺寸
- 材料规格
- 对比图表
之后（三个简单的信息图）：
- 图像1: 3个关键特征，配有大图标和短标签
- 图像2: 具有大数字和清晰线条的尺寸
- 图像3: 材料特写，配有单词标签
更多的图像，每张图像中的信息更少。每张图像清晰地传达一件事情，而不是六件事情模糊不清。
放大神话
“客户可以放大查看细节。”
在桌面上，是的。悬停放大是直观的，大多数客户都会使用它。
在移动设备上，放大需要一个刻意的捏合手势。根据我的分析，少于15%的移动用户会放大查看产品图像。其余的85%根据他们在默认显示大小下所能看到的内容作出购买决定。
为85%的人设计，而不是15%。
移动测试
我使用三个设备进行测试：
- 我的手机 (iPhone) — 主要检查
- 我伴侣的手机 (Android) — 不同的屏幕尺寸和渲染
- Chrome DevTools移动仿真 — 快速检查，无需拿起手机
Chrome DevTools方法：右键点击 → 检查 → 切换设备工具条 → 选择一个手机型号。这并不完美（屏幕亮度和颜色与真实设备不同），但它可以捕捉到明显的问题。
影响
在重新设计所有移动端产品图像后：
- 移动转化率: +28%（从2.1%提升至2.7%）
- 移动跳出率: -15%（从52%降至44%）
- 移动页面停留时间: +22%（从35秒提升至43秒）
桌面指标保持不变——移动优化的图像在桌面上也能正常使用。但桌面优化的图像在移动设备上失败了。
对于图像处理，我使用 pic1.ai，它为每个平台输出适当的分辨率。但仅仅解决分辨率也不能解决移动问题——你还需要考虑每张图像的内容设计，以适应移动观众。
关于技术图像优化（文件大小、延迟加载、核心网页指标），请查看 我如何修复我的PageSpeed得分。关于信息图设计技巧，这里是 我在测试30个亚马逊信息图设计中学到的。