108 lines
3.4 KiB
Markdown
108 lines
3.4 KiB
Markdown
# 前端 UI 规范（petstore）
|
||
|
||
## 目标
|
||
|
||
- 统一视觉风格，避免页面“各写各的”。
|
||
- 保证移动端可读性和可点击性。
|
||
- 降低后续新增页面的设计与维护成本。
|
||
|
||
## 设计基线
|
||
|
||
- 主色：`#16a34a`
|
||
- 页面背景：`var(--pet-bg)`
|
||
- 主文案：`var(--pet-text)`
|
||
- 次级文案：`var(--pet-subtext)`
|
||
- 分割/边框：`var(--pet-border)`
|
||
- 卡片阴影：`var(--pet-card-shadow)`
|
||
|
||
以上变量统一在 `src/assets/global.css` 维护，页面中不要写死同类颜色。
|
||
|
||
## 字体与层级
|
||
|
||
- 页面标题：18px / 700（用 `.text-title`）
|
||
- 正文：14px / 400~500（用 `.text-body`）
|
||
- 说明/辅助：12px / 400（用 `.text-sub`）
|
||
- 避免 11px 及以下文本，移动端可读性较差。
|
||
|
||
## 间距规范
|
||
|
||
- 统一间距标尺：8 / 12 / 16 / 24（优先使用全局变量）
|
||
- 页面左右基础边距：16px（`.page-section`）
|
||
- 模块间距：12px（`.section-gap`）
|
||
- 卡片圆角：12~18px
|
||
- 表单项垂直间距：8~12px
|
||
- 底部保留区：至少 `120rpx`（避免被底栏遮挡）
|
||
|
||
推荐使用：
|
||
|
||
- 页面容器：`.page-shell`
|
||
- 模块容器：`.page-section`
|
||
- 模块间隔：`.section-gap`
|
||
- 表单项包装：`.form-field-wrap`
|
||
- 模块标题：`.module-title`
|
||
|
||
## 组件规范
|
||
|
||
### 顶部导航
|
||
|
||
- 使用绿色渐变背景 + 轻阴影（`.nav-gradient`）。
|
||
- 标题使用 18/700。
|
||
- 左侧返回统一使用 `AppIcon(back)`。
|
||
- 返回按钮触达区保持足够（建议 40px 以上），并使用统一按压反馈（`.nav-back:active`）。
|
||
|
||
### 按钮
|
||
|
||
- 主按钮：绿色渐变，白字，12px 圆角，高度 44px。
|
||
- 次按钮：浅底 + 边框，颜色低于主按钮一个层级。
|
||
- 同区域最多一个高强调按钮，避免视觉噪音。
|
||
|
||
### 输入框
|
||
|
||
- 使用统一 `.van-field` 样式。
|
||
- 聚焦态有明显边框和光晕反馈。
|
||
- 文本域最小高度 84~96px，行高 1.45+。
|
||
|
||
### 卡片
|
||
|
||
- 白底 + 细边框 + 轻阴影。
|
||
- 不要叠加过多投影层。
|
||
- 卡片内信息按“标题 > 关键值 > 说明”组织。
|
||
- 卡片点击态统一轻微下沉 + 透明度变化，避免“有的会动有的不会动”。
|
||
|
||
### 图标
|
||
|
||
- 全站优先使用统一 `AppIcon`，避免 emoji 与图标混用。
|
||
- 新增图标时先补充到 `src/components/AppIcon.vue`，再在页面内复用。
|
||
- 空态/占位图（如图片占位、头像角标）也使用同一套图标风格（如 `camera`）。
|
||
|
||
### 空状态
|
||
|
||
- 用统一 `.empty`，文案简短明确。
|
||
- 避免裸文本直接贴在背景上。
|
||
|
||
## 交互与可用性
|
||
|
||
- 可点击区域建议不小于 40x40。
|
||
- 反馈闭环完整：点击后要有 loading / toast / 状态变化。
|
||
- 关键操作（删除、取消）保持二次确认。
|
||
- 统一微交互：按钮、卡片、列表项按压反馈节奏一致（约 160ms）。
|
||
|
||
## 禁止项
|
||
|
||
- 禁止在模板里堆叠大量内联 `style`。
|
||
- 禁止同一功能页使用多个不同风格按钮。
|
||
- 禁止页面之间同类元素样式明显不一致（例如顶部导航、卡片、输入框）。
|
||
- 禁止在业务页面重复定义全局已有的间距/标题样式（如 `.module-title`、`.form-field-wrap`）。
|
||
- 禁止新增 emoji 图标作为主视觉元素。
|
||
|
||
## 新页面接入清单
|
||
|
||
- 引入并复用全局样式，不重复造轮子。
|
||
- 先搭框架：`page-shell -> nav -> sections -> bottom safe area`。
|
||
- 自检 4 项：
|
||
- 视觉是否与已有页一致
|
||
- 小屏是否可读
|
||
- 点击区域是否足够
|
||
- 是否存在硬编码颜色/间距
|
||
|