图片
Image
初级通用图片（Image）是在页面或 App 中展示的静态视觉内容，可以是照片、截图或插画。它能让用户直接看到文字难以讲清的外观或场景，比如在商品页查看衣服的实际样子。
你可能会说：「我想把产品截图放到介绍页，让用户能看清界面，手机上也别被裁掉。」
动手看看衬衫商品的外观展示
日常棉麻衬衫鼠尾草绿 · 宽松版型
¥ 269
外观示意图切换视角，查看口袋、背部结构和面料细节。
商品图片视角
切换下方的图片视角，再悬停外观图试试。这里用静态插画模拟商品图片；真实商品页通常会用照片展示实际外观。
只说“绿色宽松衬衫”还不够具体。正面图把颜色、轮廓、纽扣和胸袋放在一起，你能直接看出它大致长什么样。
要点放一张图片时，我们要想清楚什么？
- 1
先确定图片要传达什么
你放的是产品截图，就要让用户看清界面；放的是氛围照片，可能更在意整体观感。目的不同，展示尺寸、裁切方式和周围文字也会不同。
- 2
区分显示大小和文件大小
显示大小决定图片在页面占多少空间，文件大小影响加载速度。把一张很大的原图缩小显示，并不会自动减少下载量；我们可以按展示需求准备合适的图片资源。
- 3
给加载失败留出信息
图片可能因网络问题无法显示，读屏用户也未必能看到它。承载内容的图片可以配上说明其信息的替代文字；如果只是装饰，替代文字就不必重复旁边的内容。
容易混淆的地方
图片展示的是静态视觉内容；图标通常用更简化的图形表示一个功能或状态，比如搜索放大镜。视频则用连续画面表现过程。你想展示操作步骤如何发生时，单张图片可能只能说明其中一个瞬间，视频会更合适。
什么时候用
适合用
- 做商品详情页时展示实物照片，让用户判断颜色、外形和细节。
- 做 AI 工具介绍页时放入真实界面截图，让用户知道输出结果长什么样。
- 做团队成员页面时展示头像，帮助用户把姓名和具体的人对应起来。
不适合用
- 只是提供一段可复制的错误提示或操作说明时，用文字呈现更方便搜索和复制。
- 需要让用户比较随时变化的销售数据时，用图表呈现，比定期替换一张数据截图更合适。
- 想展示一套可随界面状态变化的操作符号时，用图标更容易保持尺寸和风格一致。
练一练选一个答案，看看解释
你在做一款记账 App 的介绍页，想让新用户看清「添加账单」页面实际长什么样。该怎么选？
让 AI 帮你做复制给 AI Agent 直接用
请在产品介绍页加入一张「添加账单」界面的图片，使用我提供的截图资源。桌面端让用户看清主要字段，手机端保持关键操作区域完整，并为这张承载信息的图片写合适的替代文字。