UI 素材与控件选型

要解决什么问题

前端里常见两类翻车：把会随接口变化、可编辑或可搜索的文案烙进图片；或用 CSS 硬搓一套和品牌稿不一致的复杂视觉。结果是维护成本高、无障碍不达标、状态（禁用、加载、错误）装不出来，布局还会在资源慢加载时抖动。

本技能面向「即将实现或替换一个可见元素」之前的决策，帮你在图片素材、真实控件与 HTML/CSS/JS、Canvas、视频 之间选最省事且能满足行为的方案。

技能如何工作

核心红线只有一条：不要把行为、动态数据或可编辑文本编码进图片；当品牌稿是权威来源时，也不要用 CSS 复刻复杂品牌美术。

工作流分五步：

1. 分类元素——区分品牌/编辑稿、内容媒体、操作与输入、状态指示、简单符号、动态可视化、装饰动效、复杂交互场景等。
2. 核对行为需求——是否依赖后端数据、是否需要点击/焦点/校验、文本是否需可选可搜、是否响应式、是否需要读屏语义与动效；对照决策矩阵选满足全部需求的最简实现。
3. 定义素材契约——对外部资源写明用途与负责人、源尺寸与宽高比、展示尺寸与响应策略、透明与裁切、格式与体积上限、加载与缺图兜底、是否允许图内嵌字。
4. 保护交互语义——按钮、输入等必须用真控件，保留键盘焦点、各状态、足够点击区域与稳定尺寸。
5. 验证——用最长的动态文案、缺图/慢网、桌面与窄屏、高分屏、prefers-reduced-motion 与真实触控做检查。

交付时需说明：选定实现类型、否决方案及理由、尺寸与行为契约、动态与无障碍要求、移动端与失败态验证结果。文档中还给出默认决策（如 Logo/横幅用图、按钮用控件）和失败模式对照表（图内可变文案、假按钮、缺图等的一线修复）。

适用边界

• 动效很重、粒子很多的空间交互优先考虑 Canvas/Three.js；复杂但非交互的宣传动效可考虑优化视频。
• 不要为「看起来够炫」选用比需求更重的技术栈；也不要在未定义尺寸、格式、兜底策略的情况下上线素材。