# UDID UI 设计规范

本仓库各工具（UDID / P12 / 描述文件签名 / Plist 等）共用同一套视觉语言。  
**演示页**：同目录 [`index.php`](./index.php)（含扩展动效、控件与机制）。  
**扩展样式**：`assets/css/extras.css` · **交互**：`assets/js/kit.js`

## 1. 设计原则

| 原则 | 说明 |
|------|------|
| **单色** | 仅黑白灰，无品牌色、无渐变按钮、无彩色强调（错误提示可用克制红灰） |
| **无卡片** | 不用圆角卡片、多阴影、浮层徽章；分隔用 1px 细线 |
| **系统主题** | 默认 `prefers-color-scheme`；可选 Light/Dark 覆盖（调试用） |
| **Motion 优先** | 入场、滚动显现、扫光、磁吸、视图模糊切换 |
| **直角** | `border-radius: 0`（圆点 / orbit / radio 除外） |
| **无边框优先** | `box-shadow: inset 0 0 0 1px var(--line)` |
| **可访问** | 遵守 `prefers-reduced-motion` |

## 2. 设计令牌

见 `base.css` 的 `:root`。扩展缓动：

```css
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast / --dur / --dur-slow
```

主题覆盖：`html[data-theme="light"|"dark"]`（`kit.js` + localStorage `udid-ui-theme`）。

## 3. 排版与布局

- Eyebrow / Hero H1 / Section H2 / Label / Mono — 同前版
- 内容宽 `min(1120px, 100%)`；表单工具常限 `640–720px`
- 背景双径向柔光；禁止首屏堆 stats 卡片化（演示页 count-up 为例外说明）

## 4. 核心组件（base）

导航、按钮 Primary/Ghost、Hero、Section、Feature、Steps、FAQ、结果字段、Toast、Orbit、Footer、视图切换。

## 5. 扩展控件（extras）

| 控件 | Class |
|------|--------|
| 开关 | `.switch` |
| 复选 / 单选 | `.check` / `.radio` |
| 滑块 / 进度 | `.slider` / `.progress` |
| 步进器 | `.stepper` |
| 搜索 | `.search-field` |
| 下拉 / 多行 | `.select` / `.textarea` |
| 直角标签 | `.chip` |
| 徽章 / 键盘 | `.badge` / `.kbd` |
| Tabs | `.tabs` / `.tab` |
| 时间线 | `.timeline` |
| 提示条 | `.callout` |
| 代码块 | `.code-block` |
| 空状态 | `.empty-state` |
| 骨架屏 | `.skeleton` |
| 头像 / 面包屑 | `.avatar` / `.breadcrumb` |
| Tooltip | `.has-tip[data-tip]` |
| Modal | `.modal-root` |
| 命令面板 | `.cmdk-root` |
| 滚动文字 | `.marquee` + 变体 · `.ticker-step` |
| 警戒线 | `.hazard-showcase` 内的 `.hazard-tape` / `.hazard-frame` / `.hazard-bar` / `.hazard-badge` / `.hazard-callout` |

## 6. 动效

| 名称 | 用途 |
|------|------|
| `rise` / `reveal` | 入场 · 滚动显现（模糊→清晰） |
| `shimmer` | 骨架扫光 |
| `marquee` | Display / rail / slash / blocks / outline / sheen / duel / vertical / bleed |
| `ticker-step` | 步进新闻条 |
| `hazard-tape` / `hazard-frame` / `hazard-bar` / `hazard-badge` / `hazard-callout` | 克制的工业警戒系统；仅文字轨道低频移动 |
| `typewriter` | 打字机标题 |
| `count-up` | 数字递增 |
| `btn-magnetic` | 指针磁吸 |
| `split-link` | 文字上下翻 |
| `viewIn` / `viewOut` | SPA 视图 |
| `indeterminate` | 不确定进度 |
| Primary `::after` | 按钮扫光 |
| `ping` / `spin` / `corePulse` | 状态 |

## 7. 机制（kit.js）

| 机制 | 说明 |
|------|------|
| **命令面板** | ⌘K / Ctrl+K，过滤、方向键、Enter |
| **滚动进度** | 顶栏 2px 进度 |
| **目录 Spy** | IntersectionObserver 高亮 TOC |
| **滚动显现** | `.reveal` 进入视口 |
| **主题覆盖** | System / Light / Dark |
| **多语言** | `lib/i18n.php`：Accept-Language / Cookie / `?lang=`；导航 `.lang-seg` |
| **Modal** | Esc / 遮罩关闭 |
| **磁吸按钮** | pointer 位移 |
| **复制反馈** | Toast + icon-btn `.is-ok` |
| **减弱动效** | `prefers-reduced-motion` |

## 8. 不要做的事

- 紫色渐变、奶油衬线、新闻纸细栏
- `rounded-full` 胶囊、多层阴影、霓虹
- Hero 浮层 badge / 统计卡片化堆砌
- 默认仅用 Inter / Roboto / Arial

## 9. 新工具接入

```text
base.css          → 必选
forms.css         → 表单 / dropzone
extras.css        → 新控件与动效（按需）
kit.js 片段       → 按需复制命令面板 / reveal / theme
```

结构：`nav` → `stage` → `footer` + `#toast`（+ 可选 cmdk / modal）。

## 许可

MIT
【闲鱼】https://m.tb.cn/h.8ynHiAn?tk=JiQTTKggrsw CZ001 「这是我的闲鱼号，快来看看吧～」
点击链接直接打开
作者：BYLIN