304 lines
12 KiB
Markdown
304 lines
12 KiB
Markdown
# 智绘微刻 Design System
|
||
|
||
## Overview
|
||
|
||
智绘微刻是一个面向微信小程序的定制设计系统，服务于激光微雕笔记本、铜质杯垫、竹制笔盒、词云纪念等定制商品。它把现有手账感的装饰风格收敛为一套更克制、更现代、但仍保留品牌温度的设计语言。
|
||
|
||
整套系统以 `design-system.html` 交互样例为视觉基线，以 `设计变更文档.md` 为落地规则。落地到小程序时使用一套 token、两套主题（浅色 / 深色），所有组件行为都由统一变量驱动，不允许在页面内继续引入新的硬编码颜色、字号或组件形态。
|
||
|
||
---
|
||
|
||
## Colors
|
||
|
||
所有颜色来自 `:root` 与 `.theme-dark` 的 CSS 变量，Web 版使用 `px`，小程序使用同一语义的 `rpx`。
|
||
|
||
- **页面背景** `--bg-page`: 浅色 `#FAF7F2` / 深色 `#191919`，暖白与深墨底色
|
||
- **卡片背景** `--bg-card`: 浅色 `#FFFFFF` / 深色 `#23201D`，卡片、弹窗、浮层表面
|
||
- **弱化背景** `--bg-muted`: 浅色 `#F3EEE7` / 深色 `#2B2622`，分组背景、Tabs 容器、骨架屏
|
||
- **输入背景** `--bg-input`: 浅色 `#F5F1EB` / 深色 `#2B2622`，输入框、搜索框
|
||
- **主文字** `--text-primary`: 浅色 `#2E2622` / 深色 `#F5EFE8`
|
||
- **次要文字** `--text-secondary`: 浅色 `#8A7E76` / 深色 `#B3A79C`
|
||
- **弱提示** `--text-muted`: 浅色 `#B3A89E` / 深色 `#82766C`，占位符、弱说明
|
||
- **主色** `--accent-primary`: 浅色 `#D96C6A` / 深色 `#F09198`，主按钮、选中态、价格
|
||
- **主色按压** `--accent-primary-strong`: 浅色 `#C75B59` / 深色 `#FFA7AD`
|
||
- **主色浅底** `--accent-primary-soft`: 浅色 `#F6E0DC` / 深色 `rgba(240,145,152,.14)`
|
||
- **辅助蓝紫** `--accent-secondary`: 浅色 `#6C7BDB` / 深色 `#8E97E8`，链接、地址、聚焦
|
||
- **成功** `--success`: 浅色 `#4FA477` / 深色 `#67C58E`
|
||
- **提醒** `--warning`: 浅色 `#D99A4E` / 深色 `#E0AD68`
|
||
- **危险** `--danger`: 浅色 `#D85D5D` / 深色 `#EF7A7A`，删除、错误、取消
|
||
- **常规边框** `--border`: 浅色 `#EDE5DC` / 深色 `#37312C`
|
||
- **强调边框** `--border-strong`: 浅色 `#E0D5C8` / 深色 `#463E37`
|
||
- **毛玻璃** `--glass`: 浅色 `rgba(255,255,255,.72)` / 深色 `rgba(25,25,25,.72)`
|
||
- **毛玻璃描边** `--glass-line`: 浅色 `rgba(255,255,255,.55)` / 深色 `rgba(255,255,255,.14)`
|
||
|
||
禁止事项：
|
||
|
||
- 禁止整页彩色渐变背景。
|
||
- 禁止大面积使用超过 2 种高饱和色。
|
||
- 禁止浅色页使用纯黑 `#000` 作为正文，禁止深色页使用纯白 `#fff` 作为正文。
|
||
- 禁止在 UI 内使用 emoji 替代图标。
|
||
|
||
---
|
||
|
||
## Typography
|
||
|
||
统一使用系统字体栈，不打包自定义字体：
|
||
|
||
```
|
||
-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
|
||
'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', sans-serif
|
||
```
|
||
|
||
字号以 750rpx 设计稿为准：
|
||
|
||
- **Display** 56rpx / 800 / 1.15：品牌大字、营销页主标题
|
||
- **Title-LG** 44rpx / 700 / 1.2：页面主标题
|
||
- **Title** 36rpx / 700 / 1.25：区块标题、卡片标题
|
||
- **Heading** 32rpx / 600 / 1.3：小节标题、列表项名称
|
||
- **Body** 28rpx / 400 / 1.6：正文、表单内容
|
||
- **Caption** 24rpx / 400 / 1.4：说明文字、辅助信息
|
||
- **Micro** 20rpx / 500 / 1.2：标签、角标、时间
|
||
|
||
字重使用：
|
||
|
||
- `400`：正文
|
||
- `500`：次级强调、输入内容
|
||
- `600`：按钮、小标题
|
||
- `700`：页面标题、卡片标题
|
||
- `800`：仅 Display 使用
|
||
|
||
排版规则：
|
||
|
||
- 标题不换行时使用 `ellipsis` 省略。
|
||
- 正文行高默认 1.6，长条款可用 1.8。
|
||
- 数字与货币使用 `tabular-nums`，避免跳动。
|
||
- 段落间距 16-24rpx，不靠空行制造层级。
|
||
|
||
---
|
||
|
||
## Spacing
|
||
|
||
间距梯度：
|
||
|
||
```
|
||
4rpx · 8rpx · 12rpx · 16rpx · 24rpx · 32rpx · 48rpx · 64rpx · 96rpx
|
||
```
|
||
|
||
布局规则：
|
||
|
||
- 页面左右留白统一 32rpx。
|
||
- 页面底部安全区：`calc(24rpx + env(safe-area-inset-bottom))`。
|
||
- 卡片之间间隙 24rpx。
|
||
- 卡片内边距 24-32rpx。
|
||
- 分组标题与内容间距 24rpx。
|
||
- 顶部标题与内容之间至少保留 24rpx。
|
||
|
||
固定底栏的场景，需要在可滚动内容底部预留额外留白，避免悬浮栏遮挡内容：
|
||
|
||
- 页面正文底部留白不小于 88px（Web 样例值），小程序落地时按 `112rpx + env(safe-area-inset-bottom)` 计算。
|
||
- 只有真正不需要上下滚动的页面可以不加底部预留。
|
||
|
||
---
|
||
|
||
## Border Radius
|
||
|
||
| 场景 | 圆角 |
|
||
| --- | --- |
|
||
| 输入框、小标签 | 16rpx |
|
||
| 普通卡片 | 24rpx |
|
||
| 弹窗、底部弹层 | 32rpx |
|
||
| 按钮、胶囊、分页 chip | 999rpx |
|
||
| 圆形头像 / 圆形图标按钮 | 50% |
|
||
|
||
小程序中不使用 `3px dashed` 卡片，不使用星星贴纸做装饰边框。
|
||
|
||
---
|
||
|
||
## Elevation
|
||
|
||
阴影只表达层级，不做发光或浓重投影。
|
||
|
||
- **卡片阴影** `--shadow-card`：浅色 `0 2px 10px rgba(46,38,34,.06)`；深色 `0 2px 12px rgba(0,0,0,.3)`
|
||
- **浮层阴影** `--shadow-elevated`：浅色 `0 12px 30px rgba(46,38,34,.14)`；深色 `0 12px 36px rgba(0,0,0,.48)`
|
||
|
||
毛玻璃是本系统最重要的浮层质感，只用于需要浮在内容之上的场景。
|
||
|
||
```css
|
||
.glass-surface {
|
||
background: var(--glass);
|
||
backdrop-filter: blur(24rpx);
|
||
-webkit-backdrop-filter: blur(24rpx);
|
||
border: 1rpx solid rgba(255, 255, 255, 0.42);
|
||
}
|
||
```
|
||
|
||
底部 TabBar 与底部操作栏需要比普通玻璃更透、更明显地透出内容，使用更低透明度与更强模糊：
|
||
|
||
```css
|
||
.floating-glass {
|
||
background: rgba(255, 255, 255, 0.55); /* dark: rgba(25, 25, 25, 0.55) */
|
||
backdrop-filter: blur(32px) saturate(1.2);
|
||
-webkit-backdrop-filter: blur(32px) saturate(1.2);
|
||
border: 1rpx solid var(--glass-line);
|
||
}
|
||
```
|
||
|
||
毛玻璃使用场景：
|
||
|
||
- 自定义 TabBar
|
||
- 页面吸顶信息条
|
||
- 底部操作栏
|
||
- 底部弹窗背景
|
||
- 需要盖在图片上的卡片
|
||
|
||
---
|
||
|
||
## Components
|
||
|
||
### Buttons
|
||
|
||
| 变体 | 背景 | 文字 | 边框 |
|
||
| --- | --- | --- | --- |
|
||
| Primary | `--accent-primary` | 白 | 无 |
|
||
| Secondary | `--bg-card` | `--text-primary` | 1rpx `--border-strong` |
|
||
| Ghost | 透明 | `--accent-primary` | 无 |
|
||
| Destructive | `--danger` | 白 | 无 |
|
||
|
||
尺寸：
|
||
|
||
- 大按钮：高度 96rpx，圆角 999rpx，字号 32rpx / 600
|
||
- 中按钮：高度 80rpx
|
||
- 小按钮：高度 64rpx，字号 26rpx / 600
|
||
|
||
状态：
|
||
|
||
- 按压：`scale(0.98)` + 主色加深 4%
|
||
- 禁用：`opacity: 0.45`，无点击反馈
|
||
- Loading：按钮内显示 24rpx 环形 loading 后再显示文案
|
||
- 危险操作必须二次确认（`showModal`）
|
||
|
||
### Cards
|
||
|
||
- **Surface Card**：默认内容容器，`--bg-card` + 1rpx border + `--shadow-card`
|
||
- **Glass Card**：信息浮层 / 图片上覆盖，使用毛玻璃
|
||
- **Media Card**：图片在上或居左，使用 `aspect-ratio` 固定比例，文字区域带留白
|
||
- 卡片禁止再次嵌套 dashed-card，同一个视觉层最多出现一张卡片。
|
||
|
||
### Forms
|
||
|
||
- 输入框高度 88rpx，圆角 16rpx，内边距 0 24rpx。
|
||
- 占位符用 `--text-muted`，输入文字用 `--text-primary`。
|
||
- 聚焦边框 `--accent-primary`，并保留轻位移 / 轻阴影反馈。
|
||
- 错误信息用 `--danger`，显示在控件下方 8rpx。
|
||
- `textarea` 最小高度 240rpx，内边距 24rpx，行高 1.6。
|
||
- 搜索框同样使用 `--bg-input`，聚焦时切到 `--bg-card` + 主色描边。
|
||
|
||
### Lists
|
||
|
||
- 列表行最小高度 112rpx。
|
||
- 左侧图标 48rpx，标题 32rpx / 600，辅助信息 24rpx。
|
||
- 右侧箭头 28rpx，使用 `--text-muted`。
|
||
- 分隔线：`1rpx solid var(--border)`，默认左右留 32rpx。
|
||
|
||
### Tags & Badges
|
||
|
||
- 标签高度 40rpx，圆角 999rpx，字号 22rpx / 600。
|
||
- 标签底色使用功能色的 12-15% 透明底，文字用对应功能色。
|
||
- 徽标数字使用深色底或主色底、白字，最小宽高 28rpx。
|
||
|
||
### Tabs & Segmented Controls
|
||
|
||
- Tab 高度 88rpx，字号 28rpx / 500。
|
||
- 选中态：`--accent-primary` + 600 字重 + 48rpx 宽圆角指示条。
|
||
- 分段控件置于 `--bg-muted` 容器，选中项为 `--bg-card` 浮起。
|
||
|
||
### Modals & Bottom Sheets
|
||
|
||
- 遮罩：`rgba(0,0,0,.45)`。
|
||
- 居中弹窗：圆角 32rpx，内边距 40rpx，最大宽度 640rpx。
|
||
- 底部弹层：顶部圆角 32rpx，底部延伸到安全区，顶部带 64rpx 宽拖动条。
|
||
- 内容超过一屏时允许滚动，操作按钮固定在弹层底部。
|
||
|
||
### Empty States
|
||
|
||
- 图标 96rpx，主题色 12% 透明圆形底。
|
||
- 标题 32rpx / 700，说明 26rpx / `--text-secondary`。
|
||
- 主 CTA 默认 80rpx 高度。
|
||
- 空状态必须给出下一步动作。
|
||
|
||
### Steppers & Sliders
|
||
|
||
- 步进器按钮 60rpx，圆角 16rpx，中缝数字宽度不小于 48rpx。
|
||
- 滑块轨道高度 8rpx，圆角 999rpx。
|
||
- 滑块圆点 32rpx，主色描边，拖动时 40rpx。
|
||
- 滑块值实时显示在右侧，格式如 `80%`、`+12`。
|
||
|
||
### Toast & Skeleton
|
||
|
||
- Toast 使用 `rgba(40,35,32,.92)` 深色底、白字，圆角 24rpx。
|
||
- 短文案优先 `icon: 'none'`，成功才使用 `icon: 'success'`。
|
||
- 骨架屏用 `--bg-muted`，以 1.4s 透明度呼吸动画，不闪烁。
|
||
|
||
### Custom Navigation & TabBar
|
||
|
||
- 所有页面使用 `navigationStyle: custom`，自行避让状态栏和胶囊。
|
||
- 页面结构：状态栏空白 + 返回/标题/右侧操作，同一水平线，左右留 24rpx。
|
||
- 返回按钮触控区 48rpx，旧 `←` 字符替换为线性返回图标。
|
||
- 标题 34rpx / 600，居中，最多 8 个字。
|
||
- 右侧操作与左侧占位保持同宽，保证标题真正居中。
|
||
|
||
自定义 TabBar：
|
||
|
||
- 高度 96rpx + `env(safe-area-inset-bottom)`。
|
||
- 毛玻璃半透明底，悬浮在内容之上。
|
||
- 图标 44rpx，选中态填充 + 轻放大；文字 20rpx / 600。
|
||
- 5 个 tab 均分，最大宽度 160rpx。
|
||
|
||
固定操作栏：
|
||
|
||
- 高度 112rpx + 安全区。
|
||
- 背景使用毛玻璃，不透明底 `--bg-card` 作为降级。
|
||
- 主 CTA 永远在屏幕右下角或通栏。
|
||
|
||
---
|
||
|
||
## Motion
|
||
|
||
- 时长：160-240ms。
|
||
- 缓动：`cubic-bezier(0.22, 1, 0.36, 1)`。
|
||
- 只动画 `opacity` 和 `transform`，避免重排。
|
||
- 按压反馈：按钮 `scale(0.98)`，卡片 `scale(0.975)`。
|
||
- 页面进入：内容区上移 24rpx + 淡入，不做满屏位移动画。
|
||
- Tab 切换、列表筛选不添加横向滑动动画，除非用户手势触发。
|
||
|
||
---
|
||
|
||
## Do's and Don'ts
|
||
|
||
1. **Do** 使用统一 token 管理颜色、字号、间距、圆角、阴影与毛玻璃。
|
||
2. **Don't** 在页面里写硬编码颜色，尤其不要继续出现 `#b08d8d`、`#fce4ec` 等旧值。
|
||
3. **Do** 用留白和字重建立层级，卡片和边框只表达真实容器。
|
||
4. **Don't** 恢复 `3px dashed` 卡片和 `star-badge` 星星贴纸装饰。
|
||
5. **Do** 让固定 TabBar 和底部操作栏保持悬浮毛玻璃，可滚动页面底部要预留空白，内容滑到顶部时不被底栏遮挡。
|
||
6. **Don't** 把底栏做成完全不透明的纯色块，除非是降级兜底。
|
||
7. **Do** 在深色模式下检查所有文字与背景对比度，页面背景由系统实时同步，避免顶部闪白。
|
||
8. **Don't** 使用 emoji 代替图标，功能图标优先线性，选中态使用填充变体。
|
||
9. **Do** 保证主要点击目标不小于 88rpx，所有尺寸基于 750rpx 设计稿。
|
||
10. **Don't** 在一个视觉层里嵌套多个卡片，或把页面区块全部做成浮起的可滚动卡片。
|
||
|
||
---
|
||
|
||
## Acceptance
|
||
|
||
- 所有页面使用同一套 CSS 变量，无新增硬编码颜色。
|
||
- 页面没有 `3px dashed` 卡片和星星装饰。
|
||
- 自定义导航在所有机型避让状态栏与胶囊按钮。
|
||
- 深浅色切换后页面文字与背景可读。
|
||
- 主要点击目标 ≥ 88rpx。
|
||
- 表单有聚焦、错误、禁用状态。
|
||
- 空状态都有下一步动作。
|
||
- TabBar、吸顶栏、底部弹层为毛玻璃。
|
||
- 页面横向留白统一 32rpx。
|
||
- 图片有固定比例，加载前后不跳动。
|
||
- 可滚动页面在底部悬浮栏下预留足够空白。
|