17 KiB
17 KiB
智绘微刻小程序设计规范
版本：v1（草案）
适用范围：Taro + React + TypeScript 微信小程序的全部页面与组件
交付物：本规范DESIGN.md+ 交互式样例页design-system.html
原则：一套 token、两套主题、统一组件行为，让设计语言先于页面实现。
1. 文档定位
这份规范把「智绘微刻」的小程序从现有的手账感装饰风，收敛为一套更现代、更克制、但保留品牌浪漫感的设计语言。
它同时承担三种角色：
- 设计 Token 定义：颜色、字体、间距、圆角、阴影、毛玻璃等全部由变量驱动。
- 组件行为定义：按钮、卡片、表单、弹窗、导航等组件的尺寸、状态和交互。
- 微信适配约束：rpx、安全区、自定义导航、深浅色、触控目标等微信小程序硬约束。
后续修改页面时，只允许从本规范取值，不允许继续引入新的硬编码颜色、字号或组件形态。
2. 设计原则
2.1 去装饰化
- 不再使用
3px dashed虚线卡片作为默认容器。 - 移除
star-badge星星贴纸装饰。 - 装饰只承担功能：状态、层级、动效提示，不承担“氛围”。
2.2 留白优先
- 用间距和字重建立信息层级，而不是用边框和卡片嵌套。
- 页面横向统一 32rpx 留白，内容区不贴边。
- 卡片之间用间距分隔，卡片内部用 padding 分隔。
2.3 克制色彩
- 珊瑚粉只用于主操作、选中态和价格等关键信息。
- 大面积背景使用暖白/深墨等中性色。
- 蓝紫只做次级信息色（链接、地址、聚焦状态）。
2.4 现代质感
- 毛玻璃只出现在需要浮层的场景：TabBar、吸顶栏、弹窗、底部操作区。
- 阴影保持低饱和、低扩散，强调层级而不是“发光”。
- 支持 160-240ms 的轻量过渡，不做夸张动画。
2.5 微信原生一致性
- 全局使用
navigationStyle: custom自定义导航，自行留出状态栏和胶囊区域。 - 全部使用系统字体栈，不打包自定义字体。
- 全部尺寸基于 750rpx 设计稿，最终在微信中由 rpx 转换。
3. 设计 Token 总览
/* 浅色主题 */
.theme-light {
--bg-page: #faf7f2;
--bg-card: #ffffff;
--bg-muted: #f3eee7;
--bg-input: #f5f1eb;
--text-primary: #2e2622;
--text-secondary: #8a7e76;
--text-muted: #b3a89e;
--accent-primary: #d96c6a;
--accent-primary-strong: #c75b59;
--accent-primary-soft: #f6e0dc;
--accent-secondary: #6c7bdb;
--accent-secondary-soft: rgba(108, 123, 219, 0.12);
--success: #4fa477;
--warning: #d99a4e;
--danger: #d85d5d;
--border: #ede5dc;
--border-strong: #e0d5c8;
--glass: rgba(255, 255, 255, 0.72);
--shadow-card: 0 8rpx 24rpx rgba(46, 38, 34, 0.08);
--shadow-elevated: 0 12rpx 40rpx rgba(46, 38, 34, 0.12);
}
/* 深色主题 */
.theme-dark {
--bg-page: #191919;
--bg-card: #23201d;
--bg-muted: #2b2622;
--bg-input: #2b2622;
--text-primary: #f5efe8;
--text-secondary: #b3a79c;
--text-muted: #82766c;
--accent-primary: #f09198;
--accent-primary-strong: #ffa7ad;
--accent-primary-soft: rgba(240, 145, 152, 0.14);
--accent-secondary: #8e97e8;
--accent-secondary-soft: rgba(142, 151, 232, 0.14);
--success: #67c58e;
--warning: #e0ad68;
--danger: #ef7a7a;
--border: #37312c;
--border-strong: #463e37;
--glass: rgba(25, 25, 25, 0.72);
--shadow-card: 0 8rpx 24rpx rgba(0, 0, 0, 0.35);
--shadow-elevated: 0 12rpx 40rpx rgba(0, 0, 0, 0.5);
}
design-system.html 中使用的 Web 版本会把这些值转为 px，但命名、层级和语义完全一致。
4. 色彩系统
4.1 中性色（占视觉面积最大）
| Token | 浅色 | 深色 | 用途 |
|---|---|---|---|
--bg-page |
#FAF7F2 暖白 |
#191919 |
页面背景 |
--bg-card |
#FFFFFF |
#23201D |
卡片、弹窗、浮层表面 |
--bg-muted |
#F3EEE7 |
#2B2622 |
分组背景、表格表头 |
--bg-input |
#F5F1EB |
#2B2622 |
输入框、搜索框 |
--text-primary |
#2E2622 深墨 |
#F5EFE8 |
主标题、正文 |
--text-secondary |
#8A7E76 |
#B3A79C |
说明、标签、辅助信息 |
--text-muted |
#B3A89E |
#82766C |
弱提示、占位符 |
4.2 品牌色（珊瑚粉）
| Token | 浅色 | 深色 | 用途 |
|---|---|---|---|
--accent-primary |
#D96C6A |
#F09198 |
主按钮、价格、选中态 |
--accent-primary-strong |
#C75B59 |
#FFA7AD |
按压态、强调文本 |
--accent-primary-soft |
#F6E0DC |
rgba(240,145,152,.14) |
标签底、浅色选中背景 |
4.3 辅助色
| Token | 浅色 | 深色 | 用途 |
|---|---|---|---|
--accent-secondary |
#6C7BDB |
#8E97E8 |
二级链接、地址、聚焦 |
--success |
#4FA477 |
#67C58E |
完成、成功、已下单 |
--warning |
#D99A4E |
#E0AD68 |
待处理、提醒 |
--danger |
#D85D5D |
#EF7A7A |
删除、错误、取消 |
4.4 边框与阴影
- 常规边框：
1rpx solid var(--border) - 强调边框：
1rpx solid var(--border-strong) - 聚焦边框：
1rpx solid var(--accent-primary) - 卡片阴影：
var(--shadow-card) - 弹窗/吸顶：
var(--shadow-elevated)
4.5 禁止事项
- 禁止整页彩色渐变背景。
- 禁止大面积使用超过 2 种高饱和色。
- 禁止在浅色页使用
#000纯黑作为正文。 - 禁止深色页使用
#fff纯白作为正文。
5. 字体与排版
5.1 字体栈
-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', sans-serif
不引入包内字体，控制小程序包体积并保证 iOS/Android 渲染一致。
5.2 字号阶梯（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 | 标签、角标、时间 |
5.3 字重用例
400：正文500：次级强调、输入内容600：按钮、小标题700：页面标题、卡片标题800：仅 Display 使用
5.4 排版规则
- 标题不换行时使用
ellipsis省略。 - 正文行高默认 1.6，长条款可用 1.8。
- 数字与货币使用
tabular-nums风格，避免跳动。 - 段落间距 16-24rpx，不靠空行制造层级。
- 页面顶部大标题与内容之间至少保留 24rpx。
6. 间距与布局
6.1 间距梯度
所有间距从以下数值取：
4rpx · 8rpx · 12rpx · 16rpx · 24rpx · 32rpx · 48rpx · 64rpx · 96rpx
6.2 页面布局
- 页面左右留白：32rpx
- 页面底部安全区：
calc(24rpx + env(safe-area-inset-bottom)) - 卡片之间间隙：24rpx
- 卡片内边距：24-32rpx
- 分组标题与内容间距：24rpx
6.3 安全区
- 顶部：用
Taro.getMenuButtonBoundingClientRect()计算状态栏和胶囊位置，Header 下方再留 16-24rpx。 - 底部：
env(safe-area-inset-bottom)，TabBar/操作栏必须避让。
7. 圆角、边框、阴影与毛玻璃
7.1 圆角
| 场景 | 圆角 |
|---|---|
| 输入框、小标签 | 16rpx |
| 普通卡片 | 24rpx |
| 弹窗、底部弹层 | 32rpx |
| 按钮、胶囊 | 999rpx |
7.2 边框
- 只有一种默认边框：
1rpx solid var(--border)。 - 弹窗和吸顶层可以换成
1rpx solid rgba(255,255,255,.16)（深色同理）。 - 不再使用 3px 虚线卡片。
7.3 毛玻璃
.glass-surface {
background: var(--glass);
backdrop-filter: blur(24rpx);
-webkit-backdrop-filter: blur(24rpx);
border: 1rpx solid rgba(255, 255, 255, 0.42);
}
深色主题自动由 --glass 和 border 变量接管。
毛玻璃使用场景：
- 自定义 TabBar
- 页面吸顶信息条
- 底部操作栏
- 底部弹窗背景
- 需要盖在图片上的卡片
8. 图标与图片
- 图标统一放
src/icon/，构建时随包输出。 - 图标尺寸只允许 24 / 32 / 40 / 48 / 56 / 80rpx。
- 功能图标优先使用线性风格，选中态使用填充变体。
- 禁止在 UI 中使用 emoji 代替图标。
- 商品大图走 OSS，
/icon/*小图标继续本地打包。 - 图片统一
aspectFill，商品缩略图使用aspect-ratio固定比例，避免加载后跳动。
9. 组件规范
9.1 按钮
| 变体 | 背景 | 文字 | 边框 |
|---|---|---|---|
| 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）
9.2 卡片
- Surface Card：默认内容容器，
--bg-card+ 1rpx border +--shadow-card。 - Glass Card：信息浮层/图片上覆盖，使用毛玻璃。
- Media Card：图片在上或居左，使用
aspect-ratio，文字区域带留白。 - 卡片禁止再次嵌套
dashed-card，同一个视觉层最多出现一张卡片。
9.3 表单
- 输入框高度 88rpx，圆角 16rpx，内边距 0 24rpx。
- 占位符用
--text-muted，输入文字用--text-primary。 - 聚焦时边框
--accent-primary，并保留 1px 位移/轻阴影反馈。 - 错误信息：
--danger，24rpx，显示在控件下方 8rpx。 textarea最小高度 240rpx，内边距 24rpx，行高 1.6。
9.4 列表行
- 最小高度 112rpx。
- 左侧图标 48rpx，标题 32rpx/600，辅助信息 24rpx。
- 右侧箭头 28rpx，使用
--text-muted。 - 分隔线：
1rpx solid var(--border)，默认左右留 32rpx。
9.5 标签与徽标
- 高度 40rpx，圆角 999rpx，字号 22rpx/600。
- 底色使用功能色的 12-15% 透明底，文字用对应功能色。
- 徽标数字使用深色底或主色底，白字，最小宽高 28rpx。
9.6 Tabs 与分段控件
- Tab 高度 88rpx，字号 28rpx/500。
- 选中态：
--accent-primary+ 600 字重 + 48rpx 宽圆角指示条。 - 分段控件置于
--bg-muted容器，选中项为--bg-card浮起。
9.7 弹窗与底部弹层
- 遮罩：
rgba(0,0,0,0.5) - 居中弹窗：圆角 32rpx，内边距 40rpx，最大宽度 640rpx。
- 底部弹层：顶部圆角 32rpx，底部延伸到安全区，顶部带 64rpx 宽拖动条。
- 内容超过一屏时允许滚动，操作按钮固定在弹层底部。
9.8 空状态
- 图标 96rpx，主题色 12% 透明圆形底。
- 标题 32rpx/700，说明 26rpx/
--text-secondary。 - 主 CTA 默认 80rpx 高度。
- 空状态必须给出下一步动作，不让用户停在死胡同。
9.9 步进器与滑块
- 步进器按钮 60rpx，圆角 16rpx，中缝数字宽度不小于 48rpx。
- 滑块轨道高度 8rpx，圆角 999rpx。
- 滑块圆点 32rpx，主色描边，拖动时 40rpx。
- 滑块值实时显示在右侧，格式如
80%、+12。
9.10 Toast 与骨架屏
- Toast 使用
rgba(40,35,32,0.92)深色底、白字，圆角 24rpx。 - 短文案优先
icon: 'none'，成功才使用icon: 'success'。 - 骨架屏用
--bg-muted，以 1.4s 透明度呼吸动画，不闪烁。
10. 页面结构规范
10.1 自定义导航
所有页面使用自定义导航，不再依赖系统导航栏背景：
// app.config.ts
window: {
navigationStyle: 'custom',
navigationBarTextStyle: 'black'
}
页面 Header 结构：
[状态栏空白]
[返回/标题/右侧操作]（与胶囊按钮同一水平线，左右留 24rpx）
[16-24rpx 内容间距]
规则：
- 返回按钮 48rpx 触控区，旧页面
←字符统一替换为线性返回图标。 - 标题 34rpx/600，居中，最多 8 个字。
- 右侧操作与左侧占位保持同宽，保证标题真正居中。
10.2 页面层级
自定义导航 Header
页面内容区（左右 32rpx）
固定操作栏 / TabBar（毛玻璃 + 安全区）
10.3 固定操作栏
- 高度 112rpx + 安全区，圆角仅保留顶部 24rpx。
- 背景使用毛玻璃，不透明底
--bg-card作为降级。 - 主 CTA 永远在屏幕右下角或通栏。
10.4 自定义 TabBar
- 高度 96rpx +
env(safe-area-inset-bottom)。 - 毛玻璃半透明底。
- 图标 44rpx，选中态填充 + 轻放大；文字 20rpx/600。
- 5 个 tab 均分，最大宽度 160rpx。
11. 微交互动效
- 时长：160-240ms
- 缓动：
cubic-bezier(0.22, 1, 0.36, 1) - 只动画
opacity和transform，避免重排。 - 按压反馈：按钮
scale(0.98)，卡片scale(0.975)。 - 页面进入：内容区上移 24rpx + 淡入，不要做成满屏位移动画。
- Tab 切换、列表筛选不添加横向滑动动画，除非用户手势触发。
12. 深浅色模式
- 沿用现有
theme.json+darkmode: true作为系统探测通道。 - 页面根节点统一
theme-light/theme-dark。 - 顶部状态栏文字只有黑/白两种，以
useStatusBar控制。 - 页面背景由
applyPageBackground实时同步，避免顶部闪白。 - 所有颜色必须走 token，不允许页面内再出现
#b08d8d、#fce4ec等硬编码。
13. 微信官方约束与应用
本项目相关约束都来自微信官方文档，引用如下：
| 约束 | 官方说明 | 链接 |
|---|---|---|
| 小程序设计指南 | 官方对导航、触控、反馈等设计建议 | https://developers.weixin.qq.com/miniprogram/design/ |
| rpx 尺寸单位 | 750rpx 屏幕宽度设计稿 | https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html |
| app.json 全局配置 | navigationStyle、darkmode、themeLocation |
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html |
| 深色模式适配 | theme.json、onThemeChange |
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html |
| 自定义 tabBar | custom: true 与组件实现 |
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html |
本规范落地时必须满足：
- 尺寸：一律使用 rpx，基于 750 设计稿。
- 触控：主要点击目标不小于 88rpx（约 44pt）。
- 导航：
navigationStyle: custom，自行避让胶囊按钮和状态栏。 - 背景：系统顶栏文字只有黑/白，因此所有页面背景必须通过自定义导航的留白与
backgroundColorTop/Bottom协同控制。 - 包体积：小于 2MB，图标本地打包，大图走 OSS。
- 字体：使用系统字体，降低排版与体积风险。
- 深色模式：所有颜色走
theme-light/theme-darktoken。
14. 当前代码映射
将现有 src/app.scss 变量迁到新规范：
| 现有变量 | 新规范 |
|---|---|
--bg-page: #ffffff |
--bg-page: #faf7f2 |
--bg-card: #ffffff |
--bg-card: #ffffff |
--line-card: 3px dashed #ffb7c5 |
删除，卡片改 1rpx solid var(--border) |
--line-star: #ffb7c5 |
删除，统一用 --border |
--text-primary: #5c3a3a |
--text-primary: #2e2622 |
--text-secondary: #b08d8d |
--text-secondary: #8a7e76 |
--text-muted: #d28a8a |
--text-muted: #b3a89e |
--accent-pink: #ff9a9e |
--accent-primary: #d96c6a |
--accent-blue: #5b8cff |
--accent-secondary: #6c7bdb |
--btn-gradient |
Primary 按钮改实色 --accent-primary，可保留极淡渐变 |
--shadow-card |
--shadow-card: 0 8rpx 24rpx rgba(46,38,34,.08) |
--bg-input: #f8f9fa |
--bg-input: #f5f1eb |
页面迁移检查项：
- 删除
.dashed-card与.star-badge的视觉依赖。 src/pages/orders/index.scss等硬编码颜色改为 token。- 全项目统一在 SCSS 中直接书写
rpx，减少px/rpx混用。 - 弹窗、TabBar、底部操作栏统一使用毛玻璃。
- 空状态、Toast、骨架屏按第 9.8/9.10 节统一。
15. 验收清单
- 所有页面使用同一套 CSS 变量，无新增硬编码颜色。
- 页面没有
3px dashed卡片和星星装饰。 - 自定义导航在所有机型避让状态栏与胶囊按钮。
- 深浅色切换后所有页面文字与背景可读。
- 主要点击目标 ≥ 88rpx。
- 表单有聚焦、错误、禁用状态。
- 空状态都有下一步动作。
- TabBar、吸顶栏、底部弹层为毛玻璃。
- 页面横向留白统一 32rpx。
- 图片有固定比例，加载前后不跳动。
16. 下一步
- 打开
design-system.html检查样例细节。 - 按反馈修订本规范。
- 将 token 落地到
src/app.scss。 - 按页面迁移清单逐页替换，最后真机回归深浅色与安全区。