影像与媒体系统

影像与媒体系统 是做什么的？

目的

影像与媒体系统提供了一种方法论，用于管理视觉资产如何集成到网站设计中。它确保图像、插图和视频不仅仅是“装饰品”，而是用户体验的功能性组成部分。该系统为宽高比、响应式艺术指导和文本可读性（叠加层） 建立了规则，确保无论屏幕尺寸或内容复杂性如何，媒体都能保持高冲击力和可访问性。

用例

• 为新网站建立艺术指导和视觉风格标准。
• 为UI组件库（例如卡片、英雄区）定义一致的宽高比矩阵。
• 为背景图像和视频设计高对比度的文本叠加层。
• 管理针对“艺术指导”型媒体的响应式裁剪和焦点保留。
• 标准化媒体密集型区域（如画廊、功能亮点和案例研究）的构图。

何时不使用

• 技术性资产优化： 使用 website-development 中的 responsive-images 处理压缩、文件格式和懒加载等技术问题。
• Logo与品牌设计： 用于主要品牌标识本身（如Logo、标志）的设计，这通常在网页设计之外确立。
• 图标设计： 使用 iconography-system 处理小型、功能性的UI符号。
• 纯装饰性图案： 用于不与内容交互的纯粹抽象、非语义的背景纹理。

输入

1. 品牌艺术指导： 预期的视觉“语言”（例如：真实、技术、高对比、极简）。
2. 内容清单： 所需的媒体类型（例如：产品照片、肖像、抽象背景）。
3. 响应式网格系统： 媒体将放置的布局上下文。
4. 排版系统： 将与媒体交互或叠加其上的文本样式。

输出

1. 宽高比矩阵： 一组定义的比率（例如：16:9、1:1、4:3），映射到特定的组件类型。
2. 叠加层可读性规范： 遮罩、渐变和模糊处理的标准，以确保文本对比度。
3. 艺术指导映射： 为移动端、平板和桌面端定义的焦点规则和裁剪策略。
4. 构图蓝图： 媒体与相邻内容（例如50/50分割、嵌入媒体、全屏出血）关系的规则。

工作流程

1. 定义视觉语言

为所有媒体建立一致的“滤镜”或风格以确保协调性：

• 处理： 定义饱和度、色温和对比度的规则。
• 密度： 决定图像应该复杂/细致还是简约/空旷。
• 构图： 为图像内部的“留白”设定标准（例如：“所有产品照片必须留出10%的边缘空白空间”）。

2. 建立宽高比标准

使用一组一致的比率以防止布局“跳动”并保持节奏：

• 宽银幕（16:9 / 21:9）： 最适合英雄区和沉浸式视频。
• 标准（4:3 / 3:2）： 最适合文章预览和常规摄影。
• 正方形（1:1）： 最适合产品列表、头像和社交网格。
• 竖屏（3:4 / 9:16）： 最适合移动优先内容和高大的功能亮点。

3. 设计文本可读性（叠加层）

将文本放置在媒体上时，使用“可读性层”：

• 遮罩： 一个微妙的、半透明的黑色或白色叠加层（通常为10-40%不透明度）。
• 渐变： 一种定向渐变（例如从下到上），使文本后方的区域变暗，同时保持图像的其他部分清晰。
• 模糊： 对文本后方的区域应用 backdrop-filter 模糊以减少视觉噪点。
• 文本位置： 将文本对齐到图像最“安静”的部分。

4. 设置响应式艺术指导

图像必须改变其“裁剪”以适应不同的屏幕形状：

• 焦点保留： 识别图像的“主体”，并确保当容器形状改变时它保持可见（例如 object-position 设置）。
• 移动端转向： 在移动设备上从水平桌面裁剪（16:9）切换到正方形或竖屏裁剪（1:1 或 4:5），以最大化视口利用率。
• 缩放而非拉伸： 绝不允许图像失去其宽高比；使用 object-fit: cover 在填满容器的同时保持比例，并使用CSS aspect-ratio 属性预留空间，以免资源加载前布局发生变化。
• 艺术指导裁剪： 当每个视口需要不同的裁剪（不仅仅是不同尺寸）时，使用包含多个 <source> 断点的 <picture> 元素；当仅分辨率发生变化而构图不变时，在单个 <img> 上使用 srcset/sizes。

5. 定义构图模式

确定媒体与周围布局的交互方式：

• 全屏出血： 媒体延伸至视口边缘。最适合高冲击力的引言区域。
• 嵌入/包含： 媒体保持在网格列内。最适合辅助性图像。
• 分层效果： 媒体与其他元素（如卡片或文本）重叠，以创造深度。

决策规则

• 可读性规则： 如果文本放置在图像上，则必须满足WCAG AA对比度（4.5:1）。如果不满足，请应用更深的遮罩或移动文本。
• 比率一致性： 同一行或网格中的所有卡片必须使用相同的宽高比以确保对齐。
• 主体优先裁剪： 当为移动端改变宽高比时，始终优先考虑图像的主体（例如人物的脸部或产品）。
• 空状态回退： 定义一种“占位符样式”，用于图像加载失败或未提供的情况，使用品牌颜色的品牌中性图形。
• 视频交互： 始终提供“播放/暂停”控件，并且绝不要自动播放带有声音的视频。
• 预留空间： 每个媒体容器必须具有定义的 aspect-ratio 或明确的 width/height，以便浏览器在资源下载前可以预留布局空间。

约束

• 可访问性： 图像上的文本必须能被屏幕阅读器读取（不要扁平化到图像中）。所有语义图像必须有 alt 文本。
• 性能（设计方面）： 避免对始终只会显示很小的元素（如头像）要求超高分辨率。
• 响应式： 媒体绝不能导致水平滚动。宽高比应保持稳定，以防止布局偏移（CLS）。

常见失败模式

• “对比度失败”： 浅色/杂乱图像上的白色文本，没有遮罩，导致文本不可读。
• “斩首”： 不当的响应式裁剪，切掉了移动端的主要主体或头部。
• 比率混乱： 在同一页面上使用5种不同的宽高比，造成支离破碎、混乱的视觉节奏。
• 资产不匹配： 将高质量摄影与“剪贴画”风格的插图混合，破坏了品牌的一致性。
• “拉伸”： 将图像强制放入与其比例不匹配的容器中，导致变形。

验证标准

• 每张带有文本叠加层的图像都满足 WCAG AA（4.5:1）对比度。
• 相似组件类型（例如所有博客卡片为4:3）内的宽高比一致。
• 在移动端、平板和桌面视口中，焦点内容被保留。
• 所有语义图像都定义了描述性的 alt 文本。
• 媒体不会引起水平溢出或布局变形。
• 所有资产保持清晰的视觉风格（艺术指导）。
• 每个媒体容器通过 aspect-ratio 或明确的尺寸预留空间，以防止累积布局偏移（CLS）。