Design System v1.0 更新 2026-07-29

AutFeng Hub 设计规范

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

下载 DESIGN.md API 文档

设计原则

出现取舍时按这个顺序决策

色彩

沿用 AutFeng 客户端主色，保证两端一致。点击色块复制 hex

品牌色

渐变

语义色

中性色与文本层级

正文最浅只能用到 --af-text-3。 --af-text-4 仅用于占位符与禁用态。

对比度实测

主要文本与背景组合的对比度
组合对比度WCAG
Light 模式玻璃卡不透明度不要低于 .42， 否则内容可读性不达标。这是最常见的实现偏差。

字体

标题 Outfit + 正文 Work Sans，中文 PingFang SC / Noto Sans SC

字号阶梯

客户端字体降级

各平台字体与降级方案
平台标题正文
等宽数字（必须）
正确：tabular-nums
1,286.50
11,111.11
错误：默认字宽（数值变化时抖动）
1,286.50
11,111.11

间距与圆角

基础单位 2px

间距刻度

场景间距

不同场景的推荐间距
场景间距

圆角

组件规范

实际组件预览，客户端按此还原

按钮

按钮类型与使用约束
类型用途一屏内数量

资源卡结构

卡片必须展示画面比例、获取方式、下载量——这三项决定用户是否点击。

状态标识

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

表单

辅助说明文字
手机号格式不正确
开关 / 单选卡
自动播放预览

弹层选择

不同场景在桌面与移动端的弹层形态
场景桌面 ≥768移动 <768

空态与加载态

空态：图标 + 一句说明 + 一个出路
没有符合条件的预设
试着放宽比例或版本要求
骨架屏：必须锁定真实比例，避免布局跳动

多比例与多形态适配

两层含义，不要混淆：内容画面比例 / 设备形态

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

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; }

设备断点

各断点下的布局策略
断点范围布局

当前视口

特殊形态

MEDIA QUERIES
/* 折叠屏展开态（近方形）：避免超宽留白 */
@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; }
}
viewport 必须带 viewport-fit=cover， 高度用 dvh 而非 vh， 安全区用 env(safe-area-inset-*)。

动效

工具型产品里长动画就是卡顿

动效时长与曲线
类型时长曲线
REDUCED MOTION（必须实现）
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

可访问性

硬性要求，实现时不可省略

可访问性硬性要求
项要求

状态语义（ARIA）

各组件应使用的 ARIA 属性
组件属性
完整的 WCAG 合规需要人工辅助技术测试与专家评审，本规范覆盖的是可静态检查的部分。

图标

统一线性风格，24×24 viewBox，stroke-width 1.85，禁止用 emoji 当图标

语义约定

全部图标（0 个）

文案规范

陈述事实、说清后果、给出路

对照表

常用文案的推荐与不推荐写法
场景用不用

数字格式

数字与时间格式约定
场景格式示例

落地清单

客户端还原时按此自检，可勾选

0 / 0