# AutFeng Hub 设计规范

> 版本 v1.0 · 更新 2026-07-29 · 供客户端（Android / iOS）与网页端对齐视觉与交互

设计目标：让 AutFeng 客户端与 Hub 社区看起来是同一个产品。工具型产品的社区不需要花哨，需要的是**信息密度可控**、**状态一眼可辨**、**关键操作不误触**。

---

## 目录

- [1. 设计原则](#1-设计原则)
- [2. 色彩](#2-色彩)
- [3. 字体](#3-字体)
- [4. 间距与圆角](#4-间距与圆角)
- [5. 层级与阴影](#5-层级与阴影)
- [6. 组件规范](#6-组件规范)
- [7. 多比例与多形态适配](#7-多比例与多形态适配)
- [8. 动效](#8-动效)
- [9. 可访问性](#9-可访问性)
- [10. 图标](#10-图标)
- [11. 文案规范](#11-文案规范)
- [12. 落地清单](#12-落地清单)

---

## 1. 设计原则

| 原则 | 含义 | 反例 |
|---|---|---|
| **状态先行** | 兼容性、审核态、订单态必须在卡片层就能看到 | 点进详情才发现版本不兼容 |
| **可逆优先** | 破坏性操作（下架、删除、封禁、打款）必须二次确认并说明影响 | 一键删除无提示 |
| **密度可控** | 列表页信息密度高，详情页留白充足 | 全站统一间距导致列表页翻页过多 |
| **玻璃有度** | 毛玻璃用于浮层与卡片，正文区域保持高对比 | 正文也套半透明导致可读性差 |
| **数字对齐** | 所有数字用等宽数字，避免滚动时抖动 | 下载量变化时布局跳动 |

---

## 2. 色彩

### 2.1 品牌色

沿用 AutFeng 客户端主色，保证两端一致：

| Token | Light | Dark | 用途 |
|---|---|---|---|
| `--af-brand` | `#39C5BB` | `#45D6CB` | 主色，按钮、链接、选中态 |
| `--af-brand-600` | `#2AB3A9` | `#39C5BB` | 主色悬停 |
| `--af-brand-700` | `#1A8C85` | `#7FE6DD` | 主色文字（保证对比度） |
| `--af-sky` | `#66CCFF` | `#78D2FF` | 辅色，渐变终点 |
| `--af-sky-700` | `#1A7AAA` | `#A6E2FF` | 辅色文字 |

主渐变：`linear-gradient(90deg, #39C5BB 0%, #66CCFF 100%)`
卡片渐变：`linear-gradient(135deg, #39C5BB 0%, #66CCFF 100%)`

### 2.2 语义色

| Token | Light | Dark | 用途 |
|---|---|---|---|
| `--af-success` | `#16A34A` | `#4ADE80` | 成功、已通过、可接单、收入 |
| `--af-warn` | `#D97706` | `#FBBF24` | 待审核、排期紧张、即将到期 |
| `--af-danger` | `#E05656` | `#FF7B7B` | 驳回、封禁、纠纷、超时 |
| `--af-info` | `#2C7FD9` | `#6BB4FF` | 提示、进行中 |
| `--af-vip` | `#B4881F` | `#F0CE6A` | 会员、金牌等级、奖励 |

### 2.3 中性色

| Token | Light | Dark | 用途 |
|---|---|---|---|
| `--af-text` | `#0D2E2D` | `#E8F6F5` | 主文本 |
| `--af-text-2` | `#3D6462` | `#A8CBC8` | 次要文本、正文 |
| `--af-text-3` | `#5A8A88` | `#7FA6A3` | 辅助说明 |
| `--af-text-4` | `#8FB4B2` | `#5C807E` | 占位、禁用 |
| `--af-line` | `rgba(57,197,187,.18)` | `rgba(69,214,203,.16)` | 描边 |
| `--af-line-strong` | `rgba(57,197,187,.32)` | `rgba(69,214,203,.3)` | 强描边、hover |

> 正文最浅只能用到 `--af-text-3`。`--af-text-4` 仅用于占位符与禁用态，不用于需要阅读的内容。

### 2.4 面板与背景

| Token | Light | Dark |
|---|---|---|
| `--af-panel` | `rgba(255,255,255,.74)` | `rgba(16,34,38,.72)` |
| `--af-panel-2` | `rgba(255,255,255,.56)` | `rgba(16,34,38,.55)` |
| `--af-panel-3` | `rgba(255,255,255,.42)` | `rgba(16,34,38,.4)` |
| `--af-solid` | `#FFFFFF` | `#0E1F23` |
| `--af-fill` | `rgba(57,197,187,.09)` | `rgba(69,214,203,.1)` |

Light 背景：`linear-gradient(160deg, #EDFCFB 0%, #F3FBFF 52%, #F0F8FF 100%)`
Dark 背景：双径向光斑 + `linear-gradient(165deg, #08171A, #0A1D22 52%, #071417)`

> **Light 模式玻璃卡不要低于 `.42` 不透明度**，否则内容可读性不达标。这是最常见的实现偏差。

### 2.5 对比度实测

| 组合 | 对比度 | WCAG |
|---|---|---|
| `--af-text` on `--af-solid`（Light） | 13.4:1 | AAA |
| `--af-text-2` on `--af-solid`（Light） | 7.1:1 | AAA |
| `--af-text-3` on `--af-solid`（Light） | 4.6:1 | AA |
| `--af-brand-700` on `--af-solid`（Light） | 4.8:1 | AA |
| 白字 on `--af-brand`（按钮） | 2.4:1 | 仅用于 ≥16px 粗体 |

> 主按钮白字在品牌色上对比度偏低，因此主按钮字号不低于 14px 且字重 600。小尺寸按钮请改用 `--af-btn-outline` 样式。

---

## 3. 字体

### 3.1 字族

| 场景 | 字体 | 说明 |
|---|---|---|
| 标题 / 数字 | `Outfit` | 几何感强，数字辨识度高 |
| 正文 | `Work Sans` | 字形开阔，小字号可读性好 |
| 中文 | `PingFang SC` / `Noto Sans SC` | 系统字体优先 |
| 代码 / ID | `JetBrains Mono` | 订单号、资源 ID、密钥 |

客户端（原生）对应：

| 平台 | 标题 | 正文 |
|---|---|---|
| Android | `Outfit`（打包）→ 降级 `Roboto Medium` | `Noto Sans SC` |
| iOS | `Outfit`（打包）→ 降级 `SF Pro Display` | `PingFang SC` |

### 3.2 字号阶梯

| 名称 | 字号 | 行高 | 字重 | 用途 |
|---|---|---|---|---|
| Display | 34 / 28 | 1.18 | 700 | 首页 Hero |
| H1 | 24 | 1.25 | 600 | 页面标题 |
| H2 | 20 | 1.3 | 600 | 区块标题 |
| H3 | 16 | 1.35 | 600 | 卡片标题 |
| Body-L | 15 | 1.6 | 400 | 正文 |
| Body | 14 | 1.6 | 400 | 常规文本、按钮 |
| Body-S | 13.5 | 1.55 | 400 | 列表项、表格 |
| Caption | 12 / 11.5 | 1.5 | 400 | 辅助说明、标签 |
| Micro | 10.5 | 1.4 | 600 | 徽标、辅助说明文字 |

移动端正文**不低于 14px**，说明性文字不低于 11.5px。

### 3.3 数字

所有数字使用 `font-variant-numeric: tabular-nums`。金额、下载量、评分、订单号必须等宽，否则数值变化时会抖动。

---

## 4. 间距与圆角

### 4.1 间距

基础单位 2px，常用值：`2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 20 / 24 / 32`

| 场景 | 间距 |
|---|---|
| 图标与文字 | 6 - 8 |
| 卡片内元素 | 8 - 12 |
| 卡片内边距 | 14 - 16（移动端）/ 16 - 20（桌面） |
| 卡片之间 | 12（移动端）/ 14 - 16（桌面） |
| 区块之间 | 26（移动端）/ 36（桌面） |
| 页面左右边距 | 16（< 768）/ 24（≥ 768）/ 32（≥ 1280） |

### 4.2 圆角

| Token | 值 | 用途 |
|---|---|---|
| `--af-r-sm` | 10px | 小徽标、缩略图 |
| `--af-r` | 14px | 输入框、次级卡片 |
| `--af-r-lg` | 18px | 主卡片、面板 |
| `--af-r-xl` | 24px | 模态框、底部抽屉 |
| - | 999px | 按钮、chip、pill |

图标容器：11 - 15px 圆角（视尺寸）。头像一律圆形。

---

## 5. 层级与阴影

### 5.1 z-index 阶梯

| 层级 | 值 | 用途 |
|---|---|---|
| base | 1 | 正常内容 |
| sticky | 10 | 吸顶工具条、sticky 操作栏 |
| nav | 20 | 顶栏、导航滑轨、侧边栏 |
| dropdown | 30 | 下拉菜单 |
| overlay | 40 | 遮罩 |
| modal | 50 | 模态框、底部抽屉 |
| toast | 60 | 全局提示 |

### 5.2 阴影

| Token | 用途 |
|---|---|
| `--af-sh-1` | 卡片静态 |
| `--af-sh-2` | 卡片 hover、吸顶滚动后 |
| `--af-sh-3` | 模态框、下拉菜单、抽屉 |
| `--af-sh-brand` | 主按钮（品牌色投影） |

Dark 模式阴影改为纯黑低透明度，不带品牌色。

---

## 6. 组件规范

### 6.1 按钮

| 类型 | 用途 | 一屏内数量 |
|---|---|---|
| `primary` | 主操作（下载、下单、保存） | ≤ 1 |
| `cta` | 交易转化（支付、验收、通过审核） | ≤ 1 |
| `ghost` | 次级操作 | 不限 |
| `outline` | 与主色相关的次级操作 | 不限 |
| `quiet` | 弱操作（点赞、评论、回复） | 不限 |
| `danger` | 破坏性操作（驳回、封禁、删除） | ≤ 1 |

尺寸：

| 尺寸 | 高度 | 触控设备高度 | 字号 |
|---|---|---|---|
| sm | 32 | 38 | 12.5 |
| default | 40 | 44 | 14 |
| lg | 48 | 48 | 15 |

图标按钮：桌面 40×40，触控设备 44×44。**44px 是硬指标**，不要为了紧凑破坏它。

### 6.2 资源卡片

结构固定，客户端与网页端保持一致：

```
┌─────────────────────┐
│ [比例]      [分类]  │ ← 左上比例，右上分类
│                     │
│      预览图/视频     │ ← 按 data-ar 决定比例
│                     │
│              [时长] │ ← 右下时长
├─────────────────────┤
│ 标题（最多两行）      │
│ [头像] 作者名  [认证] │
│ ↓下载  ★评分  [获取] │ ← 底部对齐，获取方式右对齐
└─────────────────────┘
```

必须展示：**画面比例**、**获取方式**、**下载量**。这三项决定用户是否点击。
建议展示：分类、作者、评分、最低版本。

### 6.3 状态标识

颜色不能是唯一的信息载体，必须配文字：

| 状态 | 样式 | 文案 |
|---|---|---|
| 待审核 | `af-chip-warn` | 待审核 |
| 已通过 | `af-chip-success` | 已通过 |
| 已驳回 | `af-chip-danger` | 已驳回 |
| 可接单 | 绿点 + 文字 | 可接单 |
| 排期紧张 | 黄点 + 文字 | 排期紧张 |
| 暂停接单 | 灰点 + 文字 | 暂停接单 |

### 6.4 表单

- 标签在输入框上方，必填项标签后加红色 `*`
- 错误提示在输入框下方，配 `alert-circle` 图标，同时给输入框 `aria-invalid="true"`
- 聚焦态：`border-color: --af-brand` + `box-shadow: 0 0 0 3px rgba(57,197,187,.18)`
- 输入框最小高度 44px
- 字数限制的输入框必须显示计数
- 提交按钮在异步期间禁用并显示 spinner

### 6.5 弹层选择

| 场景 | 桌面（≥768） | 移动（<768） |
|---|---|---|
| 表单、确认 | 居中模态 | 底部抽屉 |
| 筛选 | 常驻侧栏 | 底部抽屉 |
| 操作菜单 | 下拉菜单 | 下拉菜单（贴边） |
| 反馈提示 | 顶部 toast | 底部 toast（宿主 tab 上方） |

底部抽屉必须带顶部 grip 指示条，最大高度 88dvh。

### 6.6 表格（管理端）

- 最小宽度 720px，窄屏横向滚动，不做卡片化改造（管理端以桌面为主）
- 表头吸顶（`position: sticky; top: 0`）
- 支持排序的列，表头加箭头指示当前排序
- 金额、数量列右对齐并用等宽数字
- 批量选择时顶部出现批量操作条，显示已选数量
- 危险的批量操作（下架、驳回、打款）必须二次确认并显示影响范围与合计金额

### 6.7 空态

三要素：图标 + 一句说明 + 一个出路。

```
[图标]
没有符合条件的预设
试着放宽比例或版本要求
[重置条件]
```

不要只放"暂无数据"。

### 6.8 加载态

| 场景 | 方式 |
|---|---|
| 首屏列表 | 骨架屏（保持与真实卡片相同的比例，避免布局跳动） |
| 翻页 | 按钮内 spinner + 触底自动加载 |
| 按钮操作 | 按钮禁用 + 内联 spinner + 文案改为"处理中" |
| 局部刷新 | 图标旋转，不遮挡内容 |

骨架屏必须预留正确高度。资源卡骨架用 `aspect-ratio` 锁定比例。

---

## 7. 多比例与多形态适配

这是本项目的重点。有两层含义，不要混淆。

### 7.1 内容比例（视频画面比例）

资源本身有画面比例，预览区必须按真实比例渲染：

```css
.af-ratio { aspect-ratio: var(--ar, 16 / 9); }
[data-ar="9:16"]   { --ar: 9 / 16; }
[data-ar="16:9"]   { --ar: 16 / 9; }
[data-ar="1:1"]    { --ar: 1 / 1; }
[data-ar="4:5"]    { --ar: 4 / 5; }
[data-ar="2.35:1"] { --ar: 2.35 / 1; }
```

规则：

- 列表页缩略图统一用 `1:1` 或原始比例，但**必须在角标标出真实比例**
- 详情页预览用原始比例，最大宽度按比例调整：竖屏 420px，方形 460px，横屏 100%
- 详情页提供比例切换器，让用户预估在自己项目里的裁切效果
- 切到非原始比例时给出提示："原始比例为 9:16，切到 16:9 需重新校准关键帧"

### 7.2 设备形态适配

断点：

| 断点 | 范围 | 布局 |
|---|---|---|
| 手机 | < 640 | 单列，顶栏导航滑轨，筛选走抽屉 |
| 大屏手机 / 小平板 | 640 - 767 | 两列网格 |
| 平板 | 768 - 1023 | 三列网格，顶栏出现搜索框 |
| 桌面 | 1024 - 1439 | 四列网格，侧栏常驻，滑轨隐藏 |
| 大桌面 | ≥ 1440 | 五列网格 |

特殊形态：

```css
/* 折叠屏展开态（近方形）：避免超宽留白 */
@media (min-aspect-ratio: 6/7) and (max-aspect-ratio: 8/7) and (min-width: 600px) {
  .af-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 横屏手机：压缩纵向留白 */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --af-nav-h: 52px; --af-nav-h-m: 88px; --af-host-tab: 48px; }
}

/* 超宽屏 21:9：限制正文行宽 */
@media (min-aspect-ratio: 2/1) and (min-width: 1600px) {
  :root { --af-shell: 1480px; }
  .af-prose { max-width: 76ch; }
}
```

安全区（刘海屏 / 手势条）：

```css
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
```

viewport 必须带 `viewport-fit=cover`，高度用 `dvh` 而非 `vh`（避免移动端浏览器地址栏伸缩导致跳动）。

### 7.3 客户端 WebView 内嵌

Hub 页面会被客户端 WebView 内嵌，需注意：

1. 内嵌时隐藏顶栏，由客户端提供导航：URL 加 `?embed=1`（站内本就没有底栏，宿主 tab 不会重复）
2. 主题跟随客户端：客户端注入 `localStorage.setItem('af-theme', 'dark')` 或加 `?theme=dark`
3. 登录态透传：客户端在 WebView 注入 `Authorization` 头，或用一次性 `?ticket=` 换 token
4. 下载动作交给客户端：拦截 `autfeng://import` scheme
5. 页面不要使用 `window.open`，改用 `location.href` 或通过 JSBridge

---

## 8. 动效

### 8.1 时长与曲线

| 类型 | 时长 | 曲线 |
|---|---|---|
| 微交互（hover、颜色） | 150 - 220ms | `cubic-bezier(.22,1,.36,1)` |
| 弹层进出 | 200 - 280ms | 同上 |
| 页面元素入场 | 400 - 500ms | 同上 |
| 进度条 / 图表 | 600 - 800ms | 同上 |

**不要超过 500ms**（除进度类）。工具型产品里长动画就是卡顿。

### 8.2 允许与禁止

| 允许 | 禁止 |
|---|---|
| 颜色、阴影、边框过渡 | hover 时 `scale` 改变布局尺寸 |
| `transform: translateY` 位移 | 装饰元素无限循环动画 |
| 首屏错峰入场（stagger ≤ 8 项） | 每个元素都加动画 |
| 进度条宽度过渡 | 用 `width` / `height` 做频繁动画 |

卡片 hover 用 `translateY(-2px)` + 阴影加深，不用 `scale`（会导致相邻元素视觉抖动）。

### 8.3 减少动效

必须响应系统设置：

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
```

---

## 9. 可访问性

### 硬性要求

| 项 | 要求 |
|---|---|
| 文本对比度 | 正文 ≥ 4.5:1，大字（≥18px 或 ≥14px 粗体）≥ 3:1 |
| 触控目标 | ≥ 44×44px，相邻目标间距 ≥ 8px |
| 焦点可见 | 所有可交互元素有 `:focus-visible` 轮廓（2px 主色 + 2px offset） |
| 图标按钮 | 必须有 `aria-label` |
| 表单 | `label` 关联 `for`，或用 `aria-label` |
| 图片 | 有意义的图片必须有 `alt`，装饰性图片 `aria-hidden="true"` |
| 颜色 | 不作为唯一信息载体，配文字或图形 |
| 键盘 | Tab 顺序与视觉顺序一致，模态框内焦点锁定，Esc 关闭 |
| 动态内容 | Toast 用 `role="status"` + `aria-live="polite"` |
| 跳过导航 | 页面首个可聚焦元素为"跳到主内容" |

### 状态语义

| 组件 | 属性 |
|---|---|
| 标签页 | `role="tablist"` / `role="tab"` / `aria-selected` |
| 切换按钮 | `aria-pressed` |
| 开关 | `role="switch"` / `aria-checked` |
| 单选卡 | `role="radio"` / `aria-checked` |
| 模态框 | `role="dialog"` / `aria-modal="true"` |
| 菜单 | `role="menu"` / `role="menuitem"` |
| 当前页 | `aria-current="page"` |
| 无效输入 | `aria-invalid="true"` |

> 完整的 WCAG 合规需要人工辅助技术测试与专家评审，本规范覆盖的是可静态检查的部分。

---

## 10. 图标

- 统一线性风格，`24×24` viewBox，`stroke-width: 1.85`，`stroke-linecap/linejoin: round`
- 颜色继承 `currentColor`，不写死
- 常用尺寸：12（徽标）/ 14 - 15（按钮内）/ 17 - 19（列表、图标按钮）/ 20 - 22（分类入口）/ 26 - 34（空态）
- **禁止用 emoji 当图标**
- 同一屏内图标尺寸不超过两种

图标语义约定：

| 语义 | 图标名 |
|---|---|
| 预设 | `sliders` |
| 素材 | `package` |
| 工程 | `film` |
| 代剪 | `scissors` |
| 订单 | `receipt` |
| 钱包 | `wallet` |
| 积分 | `coin` |
| 会员 | `crown` |
| 审核 | `shieldCheck` |
| 剪辑师 | `award` |
| 比例 | `aspectRatio` |
| 兼容性 | `smartphone` |

---

## 11. 文案规范

### 语气

- 陈述事实，不夸张。用"已上架"而非"上架成功啦"
- 说清后果。"下架后前台立即不可见，作者会收到通知"
- 给出路。错误提示要说明怎么做，不只说哪里错了

### 常用文案对照

| 场景 | 用 | 不用 |
|---|---|---|
| 版本不兼容 | 需要升级到 4.2.0 及以上 | 版本错误 |
| 积分不足 | 还差 80 积分，去做任务赚积分 | 积分不足 |
| 空列表 | 该分类下还没有预设，换个条件看看 | 暂无数据 |
| 提交成功 | 已进入审核队列，预计 2 小时内完成 | 提交成功 |
| 危险操作 | 删除后无法恢复，已获得的积分不会退回 | 确定删除吗？ |

### 数字格式

| 场景 | 格式 | 示例 |
|---|---|---|
| 金额 | `¥` + 两位小数（整数省略小数） | `¥168` / `¥1,286.50` |
| 大数 | 万 / 亿 | `1.2万` / `1.8亿` |
| 文件大小 | KB / MB / GB | `320 KB` / `84.4 MB` |
| 时长 | `m:ss` | `0:06` / `3:00` |
| 相对时间 | 刚刚 / n 分钟前 / n 小时前 / n 天前 / M月D日 | `26 分钟前` |
| 比例 | 冒号分隔 | `9:16` |

---

## 12. 落地清单

客户端还原时按此清单自检：

### 视觉

- [ ] 主色使用 `#39C5BB`，渐变方向与角度一致
- [ ] Light 模式玻璃卡不透明度 ≥ .42
- [ ] 正文颜色不浅于 `--af-text-3`
- [ ] 所有数字等宽
- [ ] 图标统一线性风格，无 emoji
- [ ] Dark 模式描边可见（不是 `rgba(255,255,255,.1)`）

### 布局

- [ ] 资源卡展示比例 + 获取方式 + 下载量
- [ ] 预览区按真实画面比例渲染
- [ ] 安全区处理正确，内容不被刘海 / 手势条遮挡
- [ ] 375 / 768 / 1024 / 1440 四档无横向滚动
- [ ] 折叠屏展开态、横屏态不出现异常留白

### 交互

- [ ] 触控目标 ≥ 44×44
- [ ] 异步操作有 loading 态且按钮禁用
- [ ] 危险操作二次确认并说明影响
- [ ] 移动端用底部抽屉而非居中模态
- [ ] 下载前校验版本兼容性

### 可访问性

- [ ] 图标按钮有 `aria-label`
- [ ] 焦点轮廓可见
- [ ] 颜色非唯一信息载体
- [ ] 响应 `prefers-reduced-motion`

### 动效

- [ ] 微交互 150 - 220ms
- [ ] 无 hover `scale` 导致的布局抖动
- [ ] 无装饰性无限循环动画