# 失焦 / AFTERIMAGE

UI Kit · Edition 01 · 2026

## 设计命题

物体还在，轮廓正在远去。

参考图中的孤树、纸上棕墨、雾中轮廓与炭黑负片，共同指向一种“隔着媒介观看”的感觉。将这种感觉变成界面语言，需要把情绪拆成可以控制的关系：

| 感受 | 空间与材质 | 交互表达 |
| --- | --- | --- |
| 疏离 | 主体略偏离中心，周围有明确留白；低饱和背景与清晰墨字并存 | 未聚焦图像退入雾中，标签始终清楚 |
| 解离 | 同一影像出现正片、旧纸与负片三种读法；余影比主体晚离开 | 悬停是暂时显影；离开后轻缓消退，不移动真实控件 |
| 寂寥 | 静止颗粒、细窄分隔线、近乎直角的纸片、克制的编号 | 没有持续闪烁的噪点；操作迅速回应，氛围慢慢退场 |

系统语法：**颗粒表达距离，清晰度表达注意力，墨迹表达确认。**

## 交付结构

- `index.html`：完整工作台入口，双击即可离线浏览。
- `kit.css`：可复用的语义 Token、字体、原生基础组件。
- `workbench.css`：标本工作台、材质实验和应用场景布局。
- `app.js`：组件状态、局部雾散、书写样本和环境声交互。
- `tokens.json`：颜色模式、字体、尺寸、空间、动效和组件状态映射。
- `assets/`：本地字体、纹理、标记与原创松树图像。
- `assets/fonts/`：字体文件与许可证。
- `design-notes.md`：本设计说明。

无需构建工具、网络字体、账户或服务端。字体与图片均随包提供。样本表单与归档浮层用于展示状态，不写入真实档案；手记明确只保存在当前浏览器设备。环境声只有点击播放后才开始。

## 三种材质模式

所有模式共享布局、状态语义与组件 API，切换材质时不改变内容结构。

| Token | 褪色纸本 paper | 旧画布 canvas | 胶片底 film | 用途 |
| --- | --- | --- | --- | --- |
| `--aa-ground` | `#E8E4D9` | `#DEDFD3` | `#252923` | 页面背景 |
| `--aa-sheet` | `#EFEDE5` | `#E9EADD` | `#2F332B` | 标本与内容面 |
| `--aa-raised` | `#F3F0E8` | `#F0F0E5` | `#383C32` | 输入纸面、菜单 |
| `--aa-ink` | `#36382F` | `#333B32` | `#E6E3D2` | 正文与主要动作 |
| `--aa-secondary` | `#64665A` | `#5B6354` | `#B4B8A5` | 辅助文字 |
| `--aa-rule` | `#B5B4A7` | `#A8B09C` | `#6E7563` | 装饰分隔线 |
| `--aa-accent` | `#565F46` | `#505C43` | `#CAD1B1` | 焦点、选中墨芯 |
| `--aa-accent-wash` | `#D8DCCF` | `#CED4BE` | `#454D39` | 选中纸面 |
| `--aa-on-ink` | `#F0EDE1` | `#F0EDE1` | `#282D24` | 反白按钮文字 |

纸本偏温暖、干燥；画布通过极轻的经纬纹理建立纤维感；胶片底使用温灰反白与银盐色，不使用纯白配纯黑。各模式色值直接见 `tokens.json`。

## 字体系统

| 角色 | 字体 | 尺寸与行高 | 工艺处理 |
| --- | --- | --- | --- |
| 英文字标、短标题 | Special Elite Regular | 28–64 px / 1.0–1.2 | 字体固有磨损 + 极轻侵蚀 |
| 中文展示标题 | Noto Serif SC Regular | 28–36 px / 1.3–1.75 | 小于 1 px 的轻微渗墨阴影 |
| 中文正文 | Noto Serif SC Regular | 16 px / 1.75–1.9 | 保持清晰，不做字形侵蚀 |
| 控件与标签 | 中文宋体 / 等宽英数 | 14–16 px / 1.5 | 不模糊文字 |
| 次要标注、编号 | IBM Plex Mono Regular | 12 px / 1.6 | 字距约 0.06–0.09 em |

工作台中的极小英文编号属于辅助装饰，不承载唯一信息。真正的控件名称、当前状态与错误消息始终有清晰文字对应。

Special Elite 用于表现旧打印的语气，IBM Plex Mono 用于维持等宽数字的秩序，中文通过宋体的横竖反差带出铅字感。不要给长段中文加噪点遮罩或字形位移。

字体来源：[Special Elite](https://fonts.google.com/specimen/Special+Elite)、[IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono)、[Noto Serif SC](https://fonts.google.com/noto/specimen/Noto+Serif+SC)。字体许可随文件放在 `assets/fonts/`。

## 材质分层

1. **底色层**：稳定的纸、布或胶片色。
2. **大范围色晕层**：模糊的非语义形状，只在材质样本与影像实验中明显出现。
3. **细颗粒层**：静态 SVG 噪声，低透明度、`pointer-events: none`。
4. **内容层**：真实 DOM 文本与控件。
5. **状态层**：清晰的勾选、墨芯、边框、状态文字。

效果预算：纸面细颗粒透明度 0.06–0.14；未聚焦影像模糊 2–3 px；按钮外缘墨晕 2–8 px；大英文字标位移约 2.2 px、微模糊 0.14 px。不要把这些上限同时叠满。

主图本身已有胶片颗粒。界面使用另一层更轻的纸纹，避免把图像固有纹理再次当作一层高强度滤镜覆盖。清晰模式去除额外雾层和颗粒，原始图片的固有纹理保留。

## 空间、形状与图标

- 空间阶梯：4、8、12、16、24、32、48、64 px。
- 控件高度通常 44–46 px；触控主要目标至少 44 × 44 px。
- 桌面目录固定在左侧；工作区以两列标本为主。窄屏目录转为顶部，标本单列重排。
- 纸片圆角为 2 px，细分隔线 1 px。浮层有轻阴影，普通卡片不堆叠厚重阴影。
- 图标使用 1.35 px 的单线与明确轮廓；不对小图标做侵蚀。方括号与画幅角标用于取景及档案感，不作为不可解释的装饰按钮。
- 大尺度留白应与一个明确主体相邻；避免每张卡片都设置庞大空白，削弱扫描效率。

## 组件清单

| 组件族 | 已提供的组件 | 关键状态与行为 |
| --- | --- | --- |
| 动作 | 主按钮、次按钮、文字按钮、危险按钮、图标按钮 | Default / Hover / Focus / Pressed / Disabled |
| 输入 | 文本输入、下拉选择、多行输入、手记编辑器 | 空、聚焦、填写、错误、已保存 |
| 选择 | Checkbox、Radio、Switch、Chip、Range | 选中不依赖 Hover；值可用键盘改变 |
| 导航 | 目录、Tabs、Breadcrumb、Pagination | 当前项有文字与墨线；Tabs 支持方向键 |
| 信息 | 选择卡片、Badge、Notice、Progress | 成功、等待、错误均有文字或符号 |
| 浮层 | Dialog、操作菜单、Tooltip、Toast | 关闭恢复焦点；Esc 退出；状态通过 live region 反馈 |
| 容器 | Accordion、空状态、Skeleton、档案列表 | 占位静止；展开不位移真实输入内容 |
| 影像 | 正片 / 旧纸 / 负片、雾散取景、记忆选择卡 | 影像可以退远，名称与选中标记保持清晰 |

危险按钮已在 `kit.css` 提供 `.aa-button-danger`；实际产品需按动作不可逆程度决定是否需要确认。本工作台的所有示例操作均可重新体验。

## 六种状态的语法

| 状态 | 视觉表现 | 语义 |
| --- | --- | --- |
| Default | 清晰标签、细纸边、轻颗粒 | 可以操作 |
| Hover | 墨晕轻度外扩、图像雾层退去 | 暂时靠近 |
| Focus | 2 px 实线外框 + 4 px 偏移 | 键盘位置，必须清楚 |
| Pressed | 墨迹收拢、最多下移 1 px | 动作已经接收 |
| Selected | 持续的纸色、墨边或勾选 | 已确认的选择 |
| Disabled | 虚线或较弱墨色，并使用原生 disabled | 当前不可操作 |

Hover 与 Selected 是两种不同关系。不能因为鼠标移开，就让用户失去选中了哪一个元素的线索。

## 三项代表性交互

### 局部雾散 / Local reveal

指针位置只控制图像上雾层的径向遮罩中心，图像的真实内容与布局保持不变。精细指针可以移动取景，触摸可点按位置；“让轮廓显影”按钮为键盘与触控提供等价操作。滑块改变雾与颗粒强度，输出准确数值。

### 墨迹凝聚 / Ink settling

按钮的 `::before` 负责背景色晕。Hover 让晕染外扩，Pressed 让边缘收拢。文字留在前景，点击面积不受模糊边界影响。Checkbox / Radio 通过墨芯与形状表达确认。

### 选择残影 / Persistent trace

未选影像被 2–3 px 的模糊与纸色覆盖。Hover 临时变清晰，Selected 保留边框与勾选，退出 Hover 后依然可辨认。其他卡片的标题不会变模糊，不以降低正文透明度制造“解离”。

## 动效

- 接触反馈：160 ms，尽快开始回应。
- 聚焦显影：360 ms，`cubic-bezier(.2,.7,.2,1)`。
- 离场余影：520 ms，影像缓慢退远。
- 稳定纹理始终静止，不逐帧随机噪声。
- 保存、提交、选择的业务结果不等待动画完成。
- 支持 `prefers-reduced-motion: reduce`，另提供全局减少动态开关。

## 三个应用场景

**私人档案**：列表纸色承担选中状态，主图依照正片、纸印、负片变换；日期保持等宽与清晰。主次图像不反复跳位。

**未寄出的信**：纸行承载正文，主要动作留在书写区下沿。本机保存状态明确标记，也可导出纯文本。诗意放在标题，保存结果说清楚。

**远处的声音**：温灰字浮在胶片暗部，进度像一道银盐亮痕。模拟风声通过浏览器音频能力生成，只在点击播放后启动；切换视图后停止。

## 接入项目

复制 `kit.css` 和 `assets/`，在页面引入样式：

```html
<html lang="zh-CN" data-material="paper">
<link rel="stylesheet" href="kit.css">

<button class="aa-button aa-button-primary">收入档案 ↗</button>

<label class="aa-field">
  片刻的名字
  <input class="aa-input" placeholder="给这一刻起个名字">
</label>

<label class="aa-check">
  <input type="checkbox" checked>
  保留颗粒
</label>
```

全局材质设置在根元素的 `data-material="paper|canvas|film"`。减少动态使用 `data-motion="still"`，清晰阅读使用 `data-clarity="high"`。若需要 `.aa-print` 的微侵蚀，复制 `index.html` 中的 `.aa-filters` SVG 定义；其余组件不依赖该滤镜。

`app.js` 是完整样本交互脚本，不是框架组件库。集成到 React / Vue / Svelte 时，可保留 class 和 Token，将状态事件映射到对应框架。不要直接把工作台的演示保存逻辑当成后端持久化。

## 可读性与验证范围

设计实现提供：语义化标签、原生输入、键盘焦点、Tabs 方向键、Dialog、Esc 关闭、减少动态、清晰阅读、移动端重排。颜色已按纯色底计算正文和辅助文字的对比关系；复杂影像上使用深色渐变托住标题。

交付前执行静态入口、资源引用与 JavaScript 语法检查。未执行浏览器视觉与端到端测试。迁入真实产品后，需要结合目标设备、实际内容和平台辅助技术做最终验收。

## 素材说明

松树图像为本次 UI Kit 生成的原创视觉素材，灵感来自用户提供的雾中树影与褪色摄影。参考图片未作为直接发布的图库素材使用。

生成提示概要：孤松位于遥远的低矮山脊，浓密灰绿雾，褪色纸张高光，炭色剪影，细微银盐颗粒、墨色扩散与纸纤维，大面积留白，无人物、文字、界面或水印。生成方式：内置图像生成。

字体为第三方资产，其许可证随文件附带。原创界面代码、Token、纹理与本说明均可继续修改复用。
