Premium Glass for Android 是做什么的?
目标:打造一个平静、有空间感且显得昂贵的界面。玻璃是一种用于悬浮在内容之上的控件的材质。它不是一种可以随处洒落的风格。成功的检验标准是:人们会说“这感觉干净、有层次感”,而不是“有人把所有东西都加了模糊”。
本技能控制材质、层次、深度、动效和无障碍。项目的自有品牌控制标识和文案。默认品牌值位于 assets/tokens.json(保留调色板)中,并且可以替换。
0. 安全与范围
- 仅在用户选定的项目内工作。不要读取秘钥、密钥或环境变量。不要发起网络请求或安装包;如果需要某个库,说出其名称,让用户决定。
- 非用户要求,不要覆盖已有文件;先提出建议(见第 2 节)。
- 仅使用虚构的示例内容。
- 绝不使用 Apple 字体(San Francisco)、SF Symbols、Apple 徽标或 iOS 界面元素。请使用 Inter 和 Material Symbols/Lucide 风格图标。
- 标记为 (VERIFY) 的事实可能过时(API、版本)。请让用户确认它们。
1. 五条硬性规则
- 内容绝不使用玻璃。卡片、列表行、表单、页面背景和媒体保持不透明或柔面。
- 玻璃仅用于浮动层:底部导航药丸、滚动内容上方的顶部栏、浮动操作按钮、底部面板和菜单、搜索字段、提示/小食条、小型浮动标签。
- 玻璃上不再叠加玻璃。在玻璃表面内部,使用填充、分隔线或透明度来区分项目。
- 可读性优先于外观。正文文本在最差背景上需要 4.5:1(大文本和图标 3:1)的对比度。运行
scripts/contrast_check.py。 - 每个玻璃表面都有一个固体回退(旧版 Android、减少透明度、高对比度、省电模式、设备禁用模糊)。
在将玻璃应用于任何元素之前,先问一个问题:“这种材质传达了什么样的功能角色?”有效的答案:它悬浮在滚动内容之上;它是临时的或上下文相关的;它必须在内容在其下方移动时保持可触及。没有答案 = 不使用玻璃。
2. 工作流
- 检查:平台、最低/目标 SDK、现有主题/令牌、导航结构、无障碍需求、性能目标。列出未解决的问题,而不是猜测。
- 层次图(在任何代码之前):元素 -> 层(内容/结构/浮动)-> 是否玻璃 -> 层级 -> 原因。与计划一同呈现。
- 令牌:从
assets/tokens.json开始;调整品牌颜色;在两种模式的每个层级都重新运行对比度检查。 - 使用
assets/GlassTheme.kt中的模板和references/compose-implementation.md中的指导进行构建。 - 使用
references/review-checklist.md和scripts/audit_compose.py验证。报告证据(对比度值、每屏幕的玻璃层数、回退截图)。如果没有证据,不要声称检查通过。
3. 材质层级(起始值,dp)
| 层级 | 用途 | 模糊 | 填充(深色模式) | 填充(浅色模式) |
|---|---|---|---|---|
| 无 | 内容、卡片、列表、背景 | - | - | - |
| 薄 | 仅图标或大标签控件 | 16 | 墨水色 @ 0.55 | 白色 @ 0.55 |
| 常规 | 导航药丸、顶部栏、搜索、FAB、提示 | 24 | 墨水色 @ 0.66 | 白色 @ 0.70 |
| 厚 | 面板、菜单、对话框、文字密集型覆盖层 | 32 | 墨水色 @ 0.78 | 白色 @ 0.82 |
| 遮罩 | 模态面板后的调暗层 | 0-8 | 黑色 @ 0.20-0.45 | 黑色 @ 0.20-0.45 |
详情和已验证的对比度数值:references/tokens.md。填充使用表面墨水色着色,而非纯白,因此深色模式文本能在明亮背景上存活。 |
4. Android 现实检查(在承诺任何事之前请先阅读)
Modifier.blur()/ RenderEffect 只模糊元素自身的内容,而不模糊其背后的内容。真正的背景模糊需要一个库(Haze 是 Apache-2.0 协议,支持 Android 上的 Compose)或对话框的窗口模糊。库的 API 名称在不同版本间会变化:请阅读已安装版本的 README (VERIFY)。- 模糊效果需要 Android 12(API 31)或更高版本 (VERIFY)。在其下版本,使用固体回退表面。
- 模态底部面板和对话框位于独立的窗口中,因此组合内的背景模糊可能无法看到它们背后的内容。在支持的地方使用窗口背景模糊,并检查
WindowManager.isCrossWindowBlurEnabled(VERIFY),否则使用带遮罩的厚近不透明面板。 - 在纯渐变上进行模糊是不可见的;玻璃背后需要内容(图像、纹理或刻意柔光)。否则只能白白消耗性能。
- 预算:每屏幕最多 2-3 个同时模糊的图层(低端手机 1-2 个)。永远不要模糊列表项或整个屏幕。不要在大表面上动画化模糊半径;动画化透明度或变换。
- 在低端手机(3-4 GB RAM)上以类似发布版本的构建进行测试。
5. 无障碍模式(全部实现)
- 减少透明度(应用内设置 + 系统“移除动画”/高对比度信号):将玻璃替换为带有可见 1 dp 边框的固体表面令牌。
- 大字体(200%)和 TalkBack:不单独使用颜色传达信息;仅图标控件上添加标签;焦点顺序合理。
- 减少动效:将移动替换为淡入淡出;保留状态反馈。
- 触摸目标至少 48 dp。手势(滑动)始终有一个按钮或
customActions替代方案。
6. 组件
导航药丸、顶部栏、FAB、面板、搜索字段、标签、卡片、滑动行、分类栈、聊天输入、遮盖值标签的规格:references/components.md。每个角色使用一个圆角(标签 999、控件 16、卡片 24、导航药丸 28、面板 32);嵌套圆角 = 外部圆角 - 内边距。
7. 动效
弹簧 250-350 毫秒,短淡入淡出 150 毫秒,无反弹过冲。滑动阈值处的触觉反馈。按下状态:缩放至 0.97 并加上柔光高亮。尊重减少动效设置。
8. 图像提示模式(参考画面)
当被要求提供模拟提示时,请遵循 references/image-prompts.md:每个提示一张屏幕,自包含样式块,准确的屏幕文字,玻璃仅用于浮动层,“卡片不透明”,Android 状态栏,无 Apple 元素。参考文档中有六个可用的屏幕提示。提醒用户图像生成器会搞乱小文字和天城文;将输出用作布局和氛围参考,然后在 Figma/Compose 中重建。
9. 审查模式
当被要求审查设计或代码时:按层分类每个元素,计算每屏幕的玻璃层数,运行审计脚本(python scripts/audit_compose.py <src>),运行对比度脚本,然后按严重程度列出发现并附带 references/review-checklist.md 中的修复建议。
10. 输出期望
对于任何任务,都要说明:哪些是玻璃及其原因;哪个层级;对比度证据;回退方案;任何近似或未经核实的事项。保持变更范围专注:不要重新设计无关的 UX;单独列出无关问题。
参考文献和文件
references/principles.md- 源自 Apple 的原理和来源references/tokens.md- 令牌表格和已验证的对比度结果references/compose-implementation.md- Compose 架构、代码片段、回退方案、性能references/components.md- 组件规格和状态references/image-prompts.md- 提示模板和工作流references/review-checklist.md- 质量关卡和反模式scripts/contrast_check.py,scripts/audit_compose.py- 本地检查器(无网络)assets/tokens.json,assets/GlassTheme.kt(可选:添加 45 屏幕 Retain 提示集作为assets/retain-screen-prompts.md)