205 lines
5.8 KiB
Markdown
205 lines
5.8 KiB
Markdown
# AIView 移动端设计规范
|
||
|
||
> 基于 TDesign Mobile、Material Design 3、微信设计规范，结合项目实际制定。
|
||
> 适用于 UniApp + wot-design-uni 框架，设计基准宽度 750rpx。
|
||
|
||
---
|
||
|
||
## 1. 字体排版 (Typography)
|
||
|
||
### 字号阶梯
|
||
|
||
| Token | rpx | px | 行高 | 字重 | 用途 |
|
||
|-------|-----|-----|------|------|------|
|
||
| `--font-display` | 60rpx | 30px | 1.2 | 900 | 品牌标题（仅 Logo） |
|
||
| `--font-h1` | 48rpx | 24px | 1.3 | 700 | 大数字、统计数值 |
|
||
| `--font-h2` | 36rpx | 18px | 1.3 | 700 | 页面标题 |
|
||
| `--font-h3` | 32rpx | 16px | 1.4 | 600 | 卡片标题、表单标签 |
|
||
| `--font-body` | 28rpx | 14px | 1.5 | 400 | 正文、列表项 |
|
||
| `--font-caption` | 24rpx | 12px | 1.5 | 400 | 辅助说明、时间戳 |
|
||
| `--font-overline` | 22rpx | 11px | 1.5 | 600 | 标签、Badge、Tab 文字 |
|
||
|
||
### 字重规则
|
||
|
||
| 字重 | 值 | 使用场景 |
|
||
|------|-----|----------|
|
||
| Regular | 400 | 正文、描述、占位符 |
|
||
| Semi-bold | 600 | 标签、Badge、次级标题、按钮文字 |
|
||
| Bold | 700 | 卡片标题、页面标题 |
|
||
| Black | 900 | 统计数字、品牌 Logo |
|
||
|
||
---
|
||
|
||
## 2. 间距系统 (Spacing)
|
||
|
||
基于 **8rpx** 网格，所有间距为 8 的倍数。
|
||
|
||
| Token | rpx | 用途 |
|
||
|-------|-----|------|
|
||
| `--space-xs` | 8rpx | 图标与文字间距、微间距 |
|
||
| `--space-s` | 16rpx | 元素内小间距、列表项内 |
|
||
| `--space-m` | 24rpx | 卡片内间距、组件间距 |
|
||
| `--space-l` | 32rpx | 屏幕边距、卡片间距 |
|
||
| `--space-xl` | 48rpx | 分区间距、大卡片内间距 |
|
||
|
||
### 应用规则
|
||
|
||
- **屏幕左右边距**: 32rpx (`mx-32rpx`)
|
||
- **卡片内间距**: 32rpx（标准）/ 48rpx（宽松，如表单）
|
||
- **卡片间距**: 24rpx (`mt-24rpx`)
|
||
- **列表项间距**: 24rpx
|
||
- **图标与文字**: 8rpx ~ 16rpx
|
||
|
||
---
|
||
|
||
## 3. 圆角系统 (Border Radius)
|
||
|
||
| Token | rpx | 用途 |
|
||
|-------|-----|------|
|
||
| `--radius-s` | 16rpx | 进度条、小徽标 |
|
||
| `--radius-m` | 24rpx | 按钮、输入框、小卡片 |
|
||
| `--radius-l` | 48rpx | 标准卡片 (`.ai-card`) |
|
||
| `--radius-xl` | 80rpx | 页面级弧形（Header 底部） |
|
||
| `--radius-full` | 999rpx | 圆形元素、胶囊按钮 |
|
||
|
||
### 登录页特殊圆角
|
||
|
||
- 表单容器顶部: `88rpx 88rpx 0 0`（与页面级弧度衔接）
|
||
|
||
---
|
||
|
||
## 4. 组件尺寸 (Component Sizing)
|
||
|
||
### 按钮
|
||
|
||
| 尺寸 | 高度 | 字号 | 圆角 | 用途 |
|
||
|------|------|------|------|------|
|
||
| Large | 96rpx | 32rpx / 600 | 24rpx | 主操作（登录、提交） |
|
||
| Medium | 72rpx | 28rpx / 600 | 24rpx | 次级操作 |
|
||
| Small | 56rpx | 24rpx / 600 | 999rpx | 胶囊按钮（切换区域等） |
|
||
|
||
### 输入框
|
||
|
||
| 属性 | 值 |
|
||
|------|-----|
|
||
| 最小高度 | 96rpx |
|
||
| 内边距 | 24rpx 32rpx |
|
||
| 背景色 | #F9FAFB |
|
||
| 圆角 | 24rpx |
|
||
| 字号 | 32rpx |
|
||
| 图标大小 | 20px |
|
||
| 图标颜色 | #F97316 |
|
||
|
||
### 头像
|
||
|
||
| 尺寸 | 大小 | 用途 |
|
||
|------|------|------|
|
||
| XL | 160rpx | 个人中心大头像 |
|
||
| L | 96rpx | 用户头部、列表头像 |
|
||
| M | 72rpx | 工单卡片头像 |
|
||
| S | 40rpx | 头像堆叠、小头像 |
|
||
|
||
### 图标
|
||
|
||
| 场景 | 大小 (px) | 大小 (rpx) |
|
||
|------|-----------|-----------|
|
||
| 表单输入前缀 | 20px | — |
|
||
| 导航栏操作 | 22px | — |
|
||
| 第三方登录 | 24px | — |
|
||
| 卡片操作图标 | — | 40rpx |
|
||
| 宫格菜单图标 | — | 40rpx |
|
||
| 扫码页大图标 | — | 48rpx |
|
||
| Logo / 品牌 | — | 64rpx ~ 80rpx |
|
||
|
||
> wot-design-uni 的 `wd-icon` 使用 px 单位；UnoCSS 图标类使用 rpx。
|
||
|
||
### 触控区域
|
||
|
||
所有可点击元素最小触控区域: **88rpx × 88rpx** (44px)，符合 iOS HIG 标准。
|
||
|
||
---
|
||
|
||
## 5. 颜色系统 (Colors)
|
||
|
||
### 品牌色
|
||
|
||
| Token | 色值 | 用途 |
|
||
|-------|------|------|
|
||
| `--color-primary` | #F97316 | 主色、按钮、链接 |
|
||
| `--color-secondary` | #FBBF24 | 渐变起始色 |
|
||
| `--color-primary-light` | #FFF7ED | 浅底色、边框 |
|
||
| `--color-primary-bg` | rgba(249,115,22,0.06) | 表单背景、次级按钮底色 |
|
||
|
||
### 文字色
|
||
|
||
| Token | 色值 | 用途 |
|
||
|-------|------|------|
|
||
| `--color-text-primary` | #1F2937 | 标题、正文 |
|
||
| `--color-text-secondary` | #9CA3AF | 说明文字、标签 |
|
||
| `--color-text-tertiary` | #D1D5DB | 箭头、禁用文字 |
|
||
| `--color-text-inverse` | #FFFFFF | 深色背景上的文字 |
|
||
|
||
### 背景色
|
||
|
||
| Token | 色值 | 用途 |
|
||
|-------|------|------|
|
||
| `--color-bg-page` | #FFFDF5 | 页面背景 |
|
||
| `--color-bg-card` | #FFFFFF | 卡片背景 |
|
||
| `--color-bg-input` | #F9FAFB | 输入框背景 |
|
||
|
||
### 状态色
|
||
|
||
| Token | 色值 | 用途 |
|
||
|-------|------|------|
|
||
| `--color-success` | #22C55E | 成功、在线 |
|
||
| `--color-error` | #EF4444 | 错误、紧急 |
|
||
| `--color-warning` | #F97316 | 警告（复用主色） |
|
||
| `--color-info` | #3B82F6 | 信息 |
|
||
|
||
---
|
||
|
||
## 6. 全局样式类 (Utility Classes)
|
||
|
||
| 类名 | 作用 |
|
||
|------|------|
|
||
| `.yd-page-container` | 页面容器：`min-h-screen` + 页面背景色 |
|
||
| `.ai-card` | 卡片：白底 + 48rpx 圆角 + #FFF7ED 边框 + 橙色阴影 |
|
||
| `.ai-gradient-header` | 渐变头部：135° #FBBF24→#F97316 + 80rpx 底部圆角 |
|
||
| `.ai-btn-primary` | 主按钮：渐变 + 24rpx 圆角 + 96rpx 高 + 阴影 |
|
||
| `.ai-badge--orange/red/green` | 状态标签 |
|
||
|
||
---
|
||
|
||
## 7. 页面结构模板
|
||
|
||
### 标准列表页
|
||
|
||
```
|
||
yd-page-container
|
||
├── wd-navbar (fixed + placeholder + safe-area-inset-top)
|
||
├── 搜索区域 (mx-32rpx mt-24rpx)
|
||
├── 列表区域 (px-32rpx pt-24rpx)
|
||
│ └── ai-card (mb-24rpx p-32rpx) × N
|
||
└── FAB 按钮 (fixed bottom-right)
|
||
```
|
||
|
||
### 认证页
|
||
|
||
```
|
||
auth-container (全屏渐变背景)
|
||
├── Header (Logo + 品牌名，透明背景)
|
||
└── form-container (白色卡片，88rpx 顶圆角)
|
||
├── input-item × N
|
||
├── auth-links (操作链接行)
|
||
├── login-btn-wrapper (主按钮)
|
||
└── 第三方登录区域
|
||
```
|
||
|
||
---
|
||
|
||
## 变更记录
|
||
|
||
| 日期 | 说明 |
|
||
|------|------|
|
||
| 2026-02-07 | 初始创建，基于 TDesign/MD3/微信规范 |
|