材质、动效、图标与图像

材质与圆角

半透明的模糊材质在不遮挡内容的前提下为界面分层；连续的圆角与同心规则让形状保持柔和一致。

模糊材质 — 材质随阴影高度增厚。在其上叠加 saturate 以保持背景颜色鲜活。

材质	模糊	用途
Ultra Thin	8	微妙的覆盖层
Thin	16	浮层
Regular	24	导航栏
Thick	40	底部弹层

backdrop-filter: saturate(180%) blur(<n>px)。→ 组件 Material（thickness="ultraThin|thin|regular|thick"）。

渐进模糊 — 模糊强度沿一个方向平滑递增，使内容溶入栏的边缘，而不是在一条硬边线上戛然而止。常见于底部标签栏和顶部导航。→ 带 progressive 的 Material。

圆角 — --radius-pill 980（按钮）、--radius-card 18、--radius-modal/--radius-sheet 20、--radius-input/--radius-inner 10、--radius-image 14。同心规则：内圆角 = 外圆角 − 内边距。

Liquid Glass（2025）

一种半透明的动态材质，带有实时折射与镜面高光；它会拾取其后内容的颜色与光线，让悬浮控件读起来像漂浮在 UI 之上的一片流动玻璃。→ 组件 LiquidGlass。

结构剖析

• 半透明 — 白色 α 0.12 → 0.34（渐变）

• 模糊 + 重新着色 — blur(8px) saturate(180%) brightness(1.06)

• 镜面高光 — inset 0 1px 0 rgba(255,255,255,.9)

• 边缘 + 阴影 — 1px 亮色内边缘 · 柔和投影 0 14px 44px

• ✓ DO — 仅用于悬浮控件层（导航、工具栏、浮层）；确保玻璃上的文本对比度达标；必要时叠加一层压暗底衬。

• ✕ DON'T — 不要玻璃叠玻璃；不要全屏玻璃（会丢失层级）；不要在玻璃上放低对比度文本。

动效

动效是有目的的：它解释事物从何而来、向何而去，并保持上下文。曲线偏向 ease-out；时长短促。

曲线	cubic-bezier	时长	用途
Standard	.4, 0, .2, 1	300ms	页面内过渡
Enter	0, 0, .2, 1	250ms	元素出现（ease-out）
Exit	.4, 0, 1, 1	200ms	元素离开（ease-in）
Emphasized	.2, 0, 0, 1	500ms	模态框、大幅位移

令牌：--ease-standard、--ease-enter、--ease-exit、--ease-emphasized；--dur-*。

• ✓ DO — 短促、ease-out、有方向感；尊重"减弱动效"并提供降级路径。
• ✕ DON'T — 不要线性缓动，日常过渡不要超过 500ms，不要为了动效而动效。

图标

统一的描边宽度、视觉重量和圆角。图标绘制在 24×24 的关键线栅格上，2px 描边、圆角端点——跨平台保持一致，不使用 emoji。

• 关键线栅格 — 所有图标都在 24×24 内构图，对齐到圆形 / 方形 / 横纵矩形关键线，以获得一致的视觉质量。
• 光学尺寸 — 一套尺寸阶梯；描边宽度在各尺寸下保持光学一致。
• ✓ DO — 统一描边与圆角，光学对齐到栅格，视觉重量一致。
• ✕ DON'T — 不要在同一套图标中混用描边与填充；不要任意缩放导致描边宽度漂移。

在组件中，图标为内联 SVG：viewBox="0 0 24 24"、stroke="currentColor"、stroke-width="2"、圆角端点/连接。

图像

真实、克制、光线一致。优先使用摄影而非插画。固定比例和圆角；当文本叠加时确保对比度。

• 比例 — 16:9（主视觉）/ 4:3 / 1:1 / 3:4
• 圆角 — 12–16，与卡片协调
• 叠层 — 在叠加文本下方加一层约 40% 的渐变压暗层
• ✓ DO — 统一的光线与色温，主体居中并留有呼吸空间，跨页面视觉一致。
• ✕ DON'T — 不要混用风格不同的素材，不要过度滤镜，不要把深色文字压在低对比度图像上。