imagery

评估并改进图像的使用方式，让摄影作品、插画、屏幕截图、图标和上传的媒体都显得恰当、清晰且妥善收纳。

必须完成的准备工作

阅读 frontend-design，并遵循其上下文收集流程。复用已有上下文，只针对影响重大的信息缺口提问。此外，还要了解图像在此处扮演什么角色（品牌塑造、说明、佐证、装饰或内容）。

当图像造成可读性问题、需要添加叠加层，或需要与配色协调时，请参阅 color and contrast。 当图像涉及状态、警报、含义或带色调的上下文表面，而非纯粹营造氛围时，请参阅 semantic color。 请将 image treatment 作为叠加层、屏幕截图尺寸、图标缩放、媒体收纳和背景溢出防止措施的统一权威参考。 当图像或媒体需要与周围表面更清晰地区分时，请参阅 surface separation。

使用已批准的视觉参考时，请遵循 reference fidelity。保留让参考内容具有意义的主体和媒介；如果缺少关键素材，应报告缺失情况，而不是默默用通用形状替代。

---

评估图像问题

分析视觉媒体在哪些方面有帮助，哪些方面会造成问题：

1. 照片质量与适用性：

   • 图像质量是否足以支撑预期的品牌形象？
   • 它们是否显得泛泛、格格不入，或明显只是占位图？

2. 图像上的文字：

   • 背景图上的文字是否清晰可读？
   • 对比度问题是否由图像而非排版造成？

3. 屏幕截图和图标：

   • 屏幕截图是否缩得太小，以至于难以辨认？
   • 小图标是否被放大到超出其预期视觉尺寸？
   • 细节丰富的图标是否被缩得模糊不清？

4. 用户上传的内容：

   • 用户图片是否因长宽比混乱而破坏布局？
   • 背景是否溢出到界面中？

5. 协调性：

   • 摄影作品、插画、屏幕截图和图标是否看起来像同一款产品的一部分？

如果无法从代码库中判断以上任何一点，请直接询问用户，澄清无法推断的内容。

重要提示：糟糕的图像可能毁掉原本出色的设计。图像应强化层级和信息传达，而不是造成可读性问题或视觉混乱。

制定图像改进计划

围绕以下方面制定计划：

• 角色：图像用于营造氛围、说明内容、展示产品，还是呈现用户内容？
• 收纳：应如何裁剪、缩放和框定图像？
• 可读性：需要采取什么措施，才能确保叠加的文字清晰可读？
• 视觉一致性：照片、插画、屏幕截图和图标应如何保持风格协调？

系统地改进图像

使用恰当的照片

• 使用与产品品质和受众预期真正匹配的照片
• 避免使用会拉低界面观感的占位图质量图像
• 让照片符合产品的情绪基调——俏皮、编辑风、专业等

提高图像上的文字对比度

• 图像的明暗变化过于剧烈时，添加叠加层
• 文字需要更稳定的衬托时，降低图像对比度
• 有助于图像与品牌配色协调时，对图像进行着色
• 仅在能提升局部可读性且不会形成明显特效时，使用轻微的文字阴影

屏幕截图使用规则

• 不要把完整应用的屏幕截图缩小到界面内容无法辨认
• 细节重要时，优先使用更紧凑的裁剪、局部屏幕截图，或以较小的源布局截取的图像
• 如果目的是展示结构而非细节，应简化屏幕截图，而不是把所有内容都挤进狭小空间

图标缩放规则

• 不要把小图标放大到远超其原始设计尺寸
• 不要把细节丰富的图标缩小到模糊不清或过于密集
• 如果需要更强的视觉存在感，可以考虑将较小的图标放在更大的造型容器中

用户上传媒体的容纳方式

• 将上传的图片放入精心设计、宽高比一致的容器中
• 保留原始尺寸会破坏布局时，使用类似 cover 的裁剪方式
• 要接受这样一点：妥善容纳图片比保留原始图片的每一处边缘更重要

防止边缘融入背景

• 图片与页面背景融为一体时，添加细微的内阴影或内边框
• 优先采用低调的容纳方式；醒目的边框往往会与图片本身争抢视觉焦点

插画与照片的协调性

• 在整个产品中保持插画风格一致
• 确保插画和摄影作品看起来不像来自毫不相关的品牌
• 如果混用照片和插画，通过配色、取景框或使用场景让它们风格统一

切勿：

• 在杂乱的图片上放置难以辨认的文字，然后归咎于字体
• 使用小到让用户恨不得用眼睛放大查看的截图
• 把小图标放大到显得笨重又业余
• 让用户上传的图片决定布局形状
• 混用摄影、插画和图标风格，却没有统一的设计逻辑

检查图像质量

• 可读性：图片上的文字是否始终清晰易读？
• 容纳效果：用户上传和编辑使用的图片是否都能自然地融入布局？
• 尺寸：截图和图标的显示尺寸是否合理？
• 协调性：所有视觉媒体看起来是否属于同一套设计系统？
• 适切性：图像是否符合产品的品质和个性？

请记住：图像应当强化设计要传达的信息和层级。当图像开始与 UI 相冲突时，就需要改进图像处理方式。