imagery

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

必须的准备工作

用户使用 /imagery 启动此工作流。激活此技能后，加载 $frontend-design——其中包含设计原则、反模式和 Context Gathering Protocol。继续之前，请遵循该协议；如果尚无设计背景，必须先加载 $setup。此外，还要了解图像在此处发挥的作用（品牌、说明、证明、装饰、内容）。

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

---

评估图像问题

分析视觉媒体在哪些方面发挥作用或造成影响：

1. 照片质量和适用性：

   • 图像质量是否足以支撑预期的品牌形象？
   • 图像是否显得普通、不协调，或明显只是占位内容？

2. 图像上的文本：

   • 背景图上的文本是否易于阅读？
   • 对比度问题是否由图像而非排版造成？

3. 屏幕截图和图标：

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

4. 用户上传的内容：

   • 用户图像是否因纵横比杂乱而破坏布局？
   • 背景是否溢出到界面中？

5. 协调性：

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

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

重要：糟糕的图像会毁掉原本出色的设计。图像应当帮助建立层级并传达信息，而非造成可读性问题或视觉混乱。

规划图像改进

围绕以下方面制定计划：

• 作用：图像用于营造氛围、进行说明、展示产品，还是呈现用户内容？
• 收纳：应如何裁剪、缩放和框定图像？
• 可读性：需要采取哪些措施，才能确保叠加文本易于阅读？
• 视觉一致性：照片、插画、屏幕截图和图标在风格上应如何协调？

系统性地改进图像

使用合适的照片

• 使用真正符合产品品质和受众预期的照片
• 避免使用会拉低界面观感、质量如同占位内容的图像
• 使图像符合产品的情绪基调，例如活泼、编辑风或专业等

提高图像上的文本对比度

• 当图像明暗变化过于剧烈时，添加叠加层
• 当文本需要更稳定的衬托时，降低图像对比度
• 如果有助于图像与品牌调色板协调，可为图像着色
• 只有在能提升局部可读性、又不会形成明显效果时，才使用轻微的文本阴影

屏幕截图使用规则

• 不要将完整应用的屏幕截图缩小到界面难以辨认
• 细节很重要时，优先使用更紧凑的裁切、局部屏幕截图，或采用尺寸更小的源布局进行截取
• 如果目的是展示结构而非细节，应简化屏幕截图，而不是把所有内容都塞进极小的空间里

图标缩放规则

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

用户上传媒体的容纳方式

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

防止边缘融入背景

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

插画与照片的协调性

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

切勿：

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

检查图像质量

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

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