354 lines
14 KiB
Markdown
354 lines
14 KiB
Markdown
# 小程序端 UI 规范（山峡化工）
|
||
|
||
> **适用范围**：`miniprogram`（客户端 / 供应商端 / 配送员端）
|
||
> **设计基准文件（Demo）**：
|
||
> - `mobile-ui/sanqiang-client-ui-demo.html`
|
||
> - `mobile-ui/sanqiang-client-cart-ui-demo.html`
|
||
> - `mobile-ui/sanqiang-client-order-ui-demo.html`
|
||
> - `mobile-ui/sanqiang-client-profile-ui-demo.html`
|
||
> - `mobile-ui/sanqiang-supplier-ui-demo.html`
|
||
> - `mobile-ui/sanqiang-deliverer-ui-demo.html`
|
||
|
||
---
|
||
|
||
## 目录
|
||
|
||
1. 设计目标与适配范围
|
||
2. 设计 Token（颜色 / 字体 / 间距 / 圆角）
|
||
3. 三端统一视觉骨架
|
||
4. 客户端页面规范
|
||
5. 供应商端页面规范
|
||
6. 配送员端页面规范
|
||
7. 组件规范（分类、卡片、结算条、状态标签、菜单宫格）
|
||
8. 交互与可用性规范
|
||
9. 页面改造检查清单
|
||
10. 约束与落地策略
|
||
11. 从 Demo 到 uni-app 的 class 映射建议
|
||
|
||
---
|
||
|
||
## 1. 设计目标与适配范围
|
||
|
||
- 目标：在不改变业务流程的前提下，提升小程序三端的视觉一致性、操作效率和信息可读性。
|
||
- 原则：
|
||
- 同品牌：统一绿色与大麦黄品牌感。
|
||
- 同骨架：标题区、统计区、功能区、任务/列表区的结构节奏一致。
|
||
- 角色可分：允许角色页面在信息密度和状态强调上有差异，但不打破整体系统。
|
||
- 设备宽度：以 `375px` 为主基线，兼容 `414px`。
|
||
|
||
---
|
||
|
||
## 2. 设计 Token（颜色 / 字体 / 间距 / 圆角）
|
||
|
||
### 2.1 颜色
|
||
|
||
```scss
|
||
// 品牌主色
|
||
$brand-green: #0a9f6d;
|
||
$brand-green-dark: #087f57;
|
||
$brand-green-soft: #e9f9f2;
|
||
|
||
// 品牌辅助
|
||
$barley-yellow: #d6a343;
|
||
$barley-yellow-soft: #fff7e8;
|
||
|
||
// 中性色
|
||
$bg-page: #f5f8f7;
|
||
$surface: #ffffff;
|
||
$text-primary: #1f2a26;
|
||
$text-muted: #6b7b74;
|
||
$border: #dcebe4;
|
||
|
||
// 语义色
|
||
$danger: #d14343;
|
||
$warning: #cf8a19;
|
||
$success: #189b65;
|
||
```
|
||
|
||
### 2.2 字体与字号
|
||
|
||
- 字体：`-apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif`
|
||
- 标题：`18px / 20px`
|
||
- 正文：`13px / 14px`
|
||
- 辅助：`11px / 12px`
|
||
- 数字金额：`16px / 20px`，建议半粗体以上（600/700）
|
||
|
||
### 2.3 间距与圆角
|
||
|
||
- 间距节奏：`8 / 10 / 12 / 14 / 16`
|
||
- 卡片圆角：`12px / 14px / 16px`
|
||
- 大容器圆角：`18px / 22px`
|
||
- 胶囊按钮：`14px / 17px / 20px`
|
||
|
||
---
|
||
|
||
## 3. 三端统一视觉骨架
|
||
|
||
### 3.1 页面结构
|
||
|
||
- 顶部 Header（渐变品牌区）
|
||
- 统计或关键提示区（可选）
|
||
- 功能入口区（宫格）
|
||
- 主业务区（商品/任务/订单列表）
|
||
- 底部固定区（仅客户端：首页结算条 + TabBar）
|
||
|
||
### 3.2 Header 统一规则
|
||
|
||
- 渐变：绿色系 `linear-gradient(145deg, $brand-green-dark, $brand-green)`
|
||
- 标题左对齐，退出/操作按钮右对齐
|
||
- 下缘采用较大圆角（20~24px）形成模块感
|
||
|
||
#### 自定义导航与微信胶囊（SHALL）
|
||
|
||
- 使用 `navigationStyle: custom` 的页面，业务顶栏 SHALL 避开状态栏与右上角胶囊。
|
||
- 量纲 SHALL 来自 `statusBarHeight` 与 `getMenuButtonBoundingClientRect`（见 `utils/safeArea.js`）。
|
||
- CSS 变量：`--sq-safe-top`、`--sq-nav-height`、`--sq-header-height`、`--sq-capsule-right-safe`；微信端 SHALL 通过顶栏根节点内联 style 注入，不得仅依赖 H5 `document`。
|
||
- 白底顶栏：总高 `--sq-header-height`，内容行高 `--sq-nav-height`，右侧列预留 `--sq-capsule-right-safe`，该列 SHALL NOT 放置可点击业务按钮。
|
||
- 渐变大头：`padding-top` 含 `--sq-safe-top`，`padding-right` 含 `--sq-capsule-right-safe`。
|
||
|
||
### 3.3 卡片与容器
|
||
|
||
- 默认白底 + 浅边框（`$border`）
|
||
- 阴影轻量，避免厚重
|
||
- 卡片内部信息按“标题 -> 次级说明 -> 操作”组织
|
||
|
||
---
|
||
|
||
## 4. 客户端页面规范
|
||
|
||
### 4.1 首页（`sanqiang-client-ui-demo.html`）
|
||
|
||
- 顶部：地址 + 搜索框
|
||
- 分类区：
|
||
- 一级分类为“两行五列（每页 10 个）”
|
||
- 多页横向滑动，页数对应滑块数量
|
||
- 滑块支持点击翻页
|
||
- 二级分类：左侧竖向列表 + 右侧商品区
|
||
- 商品卡：图、名称、规格、价格、加购按钮
|
||
- 底部结算条：数量、总价、去结算主按钮
|
||
|
||
### 4.2 购物车（`sanqiang-client-cart-ui-demo.html`）
|
||
|
||
- 供应站分组展示
|
||
- 商品行含规格、价格、加减数量器
|
||
- 结算区固定在底部，主按钮突出
|
||
|
||
### 4.3 订单（`sanqiang-client-order-ui-demo.html`）
|
||
|
||
- 顶部状态筛选（全部/待支付/待配送/配送中/已完成）
|
||
- 订单卡片显示：订单号、状态、时间、配送节点、金额
|
||
- 操作按钮按主次分层（主按钮优先关键操作）
|
||
|
||
### 4.4 个人中心（`sanqiang-client-profile-ui-demo.html`）
|
||
|
||
- 头部用户信息 + 统计
|
||
- 常用功能列表（地址/发票/结算/退款/客服）
|
||
- 优惠券与退出登录操作置于可快速触达区域
|
||
|
||
---
|
||
|
||
## 5. 供应商端页面规范
|
||
|
||
对应：`sanqiang-supplier-ui-demo.html`
|
||
|
||
- 结构：工作台头部 -> 统计 -> 常用功能 -> 备货任务列表
|
||
- 常用功能采用 4 列宫格，标签简短直观
|
||
- 任务卡展示关键信息：
|
||
- 任务号
|
||
- 状态标签（待备货 / 备货中）
|
||
- 配送员与截止时间
|
||
- 商品缩略信息
|
||
- 件数与金额、主操作按钮
|
||
|
||
---
|
||
|
||
## 6. 配送员端页面规范
|
||
|
||
对应：`sanqiang-deliverer-ui-demo.html`
|
||
|
||
- 与供应商端保持同风格、同配色、同布局节奏
|
||
- 功能菜单放在任务列表上方（与供应商端摆放逻辑一致）
|
||
- 任务区域需突出：
|
||
- 取货信息
|
||
- 配送信息
|
||
- 联系动作
|
||
- 件数和主操作按钮（如“导航并取货”）
|
||
|
||
---
|
||
|
||
## 7. 组件规范
|
||
|
||
### 7.0 商品图片与多媒体规范（强约束）
|
||
|
||
> 目的：统一三端商品图片展示口径，避免运营上传图片后在不同页面“变形/撑高/被截断”。
|
||
|
||
#### 7.0.1 商品主图（列表缩略图）
|
||
|
||
- **推荐比例**：`1:1`（正方形）
|
||
- **推荐尺寸**：`800×800` ~ `2000×2000` 像素（JPG/PNG/WebP）
|
||
- **小程序展示规则**：
|
||
- 列表/购物车/订单/任务里的商品缩略图容器为固定方图
|
||
- 图片采用 **居中裁切填充**（`aspectFill`）：非 1:1 的图片会被裁切到方形，主体请尽量居中
|
||
|
||
#### 7.0.2 商品轮播图（详情页顶部 Banner）
|
||
|
||
- **推荐比例**：`4:3`
|
||
- **推荐尺寸**：宽度约 `750px`（例如 `750×562`）
|
||
- **小程序展示规则**：
|
||
- 详情页顶部轮播区域按 **4:3** 容器展示
|
||
- 图片采用 **居中裁切填充**（`aspectFill`）：非 4:3 的图片会被裁切，主体请尽量居中
|
||
|
||
#### 7.0.3 商品详情媒体（详情图/视频列表）
|
||
|
||
- **图片比例**：不强制比例（建议宽度约 `750px`）
|
||
- **小程序展示规则（图片）**：
|
||
- 采用 **宽度自适应高度**（`widthFix`）：图片按屏幕宽度铺满，高度随原图等比变化
|
||
- 建议避免在图片最顶部/最底部放置关键小字，留出适当上下留白以适配不同机型
|
||
- **小程序展示规则（视频）**：
|
||
- 建议 `720p` 以内，并尽量缩短时长以利加载
|
||
|
||
### 7.1 分类卡片（客户端首页）
|
||
|
||
- 每页 2 行 * 5 列
|
||
- 卡片允许“无背景/无边框”简洁样式，但激活态需可辨识
|
||
- 图标/图片占位应较大（提高扫读效率）
|
||
|
||
### 7.2 分类分页滑块
|
||
|
||
- 有几页就有几个滑块
|
||
- 当前页滑块高亮
|
||
- 可点击切换页，并与滑动同步
|
||
|
||
### 7.3 状态标签
|
||
|
||
- `warning`：待处理（琥珀）
|
||
- `success`：进行中/完成（绿色系）
|
||
- `danger`：异常/风险（红色）
|
||
- 避免同屏过多高饱和颜色
|
||
|
||
### 7.4 底部结算条（客户端）
|
||
|
||
- 信息结构：数量 -> 总价 -> 主按钮
|
||
- 主按钮保持最高视觉优先级
|
||
- 结算条整体与页面保持品牌一致（浅色底或深色底二选一，保持统一）
|
||
|
||
### 7.5 功能宫格
|
||
|
||
- 推荐 3 或 4 列
|
||
- 图标尺寸、文字字号、卡片高度统一
|
||
- 文案优先“动词 + 对象”（如：查看任务、我的报价）
|
||
|
||
---
|
||
|
||
## 8. 交互与可用性规范
|
||
|
||
- 触达尺寸：可点击元素不小于 `44x44`
|
||
- 点击反馈：按钮/卡片需有明确反馈（颜色/阴影/位移之一）
|
||
- 滑动冲突：一级分类横滑区域不要与主内容纵向滚动冲突
|
||
- 信息层级：同一块内容避免超过 2 个主视觉焦点
|
||
- 文本策略：长文本省略 + 关键字段完整可见（订单号、金额、状态）
|
||
|
||
---
|
||
|
||
## 9. 页面改造检查清单
|
||
|
||
- [ ] 是否遵循本规范 Token（颜色/间距/圆角/字号）
|
||
- [ ] 三端是否保持同品牌风格和一致骨架
|
||
- [ ] 客户端分类是否满足“2 行 5 列 + 分页滑块”
|
||
- [ ] 配送员端菜单是否在任务列表上方
|
||
- [ ] 供应商端与配送员端配色和组件风格是否一致
|
||
- [ ] 底部结算条层级是否清晰、按钮是否突出
|
||
- [ ] 状态标签颜色语义是否一致
|
||
|
||
---
|
||
|
||
## 10. 约束与落地策略
|
||
|
||
- 以本文档和 `mobile-ui/sanqiang-*.html` 为小程序 UI 改造的视觉权威。
|
||
- 改造时优先顺序：
|
||
1) 统一 Token
|
||
2) 统一布局骨架
|
||
3) 页面组件映射
|
||
4) 细节与动效优化
|
||
- 后续新增页面需先在本规范补充“页面结构和组件映射”，再落代码。
|
||
|
||
---
|
||
|
||
## 11. 从 Demo 到 uni-app 的 class 映射建议
|
||
|
||
> 目的：让开发可直接按 Demo 结构迁移到 `miniprogram/src/pages/**.vue`，减少“重命名 + 重排”成本。
|
||
> 建议：优先保留 Demo class 名，若历史页面已存在 class，可做“旧类名 = 新类名别名”过渡。
|
||
|
||
### 11.1 客户端首页映射（`pages/client/home/home.vue`）
|
||
|
||
| Demo 区块 | Demo class | 建议 uni-app class |
|
||
|---|---|---|
|
||
| 页面根容器 | `phone` | `client-home-page` |
|
||
| 顶部头部 | `top`, `top-row`, `search` | `client-header`, `client-header-row`, `client-search` |
|
||
| 一级分类分页容器 | `first-level` | `client-first-level` |
|
||
| 一级分类分页项 | `first-page` | `client-first-page` |
|
||
| 一级分类卡片 | `first-chip` | `client-first-chip` |
|
||
| 一级分类滑块组 | `first-level-indicator` | `client-first-indicator` |
|
||
| 一级分类滑块项 | `indicator-dot` | `client-first-indicator-dot` |
|
||
| 分类主布局 | `category-layout` | `client-category-layout` |
|
||
| 二级分类侧栏 | `second-level`, `second-item` | `client-second-level`, `client-second-item` |
|
||
| 商品区 | `goods-area`, `goods-list`, `goods-card` | `client-goods-area`, `client-goods-list`, `client-goods-card` |
|
||
| 底部结算条 | `cart-bar`, `cart-inner`, `settle` | `client-cart-bar`, `client-cart-inner`, `client-settle-btn` |
|
||
|
||
### 11.2 客户端购物车映射（`pages/client/cart/cart.vue`）
|
||
|
||
| Demo 区块 | Demo class | 建议 uni-app class |
|
||
|---|---|---|
|
||
| 页面头部 | `top`, `title`, `sub` | `cart-header`, `cart-title`, `cart-sub` |
|
||
| 店铺分组卡 | `store`, `store-head`, `store-name` | `cart-store-card`, `cart-store-head`, `cart-store-name` |
|
||
| 商品行 | `item`, `thumb`, `name`, `spec` | `cart-item-row`, `cart-item-thumb`, `cart-item-name`, `cart-item-spec` |
|
||
| 数量控制 | `qty`, `qbtn`, `qnum` | `cart-qty`, `cart-qty-btn`, `cart-qty-num` |
|
||
| 底部结算 | `bar`, `total`, `btn` | `cart-footer`, `cart-total`, `cart-checkout-btn` |
|
||
|
||
### 11.3 客户端订单映射（`pages/client/order/order.vue`）
|
||
|
||
| Demo 区块 | Demo class | 建议 uni-app class |
|
||
|---|---|---|
|
||
| 顶部筛选 | `tabs`, `tab` | `order-tabs`, `order-tab-item` |
|
||
| 订单卡 | `order`, `head`, `no` | `order-card`, `order-card-head`, `order-no` |
|
||
| 状态标签 | `status pending/delivering` | `order-status status-pending/status-delivering` |
|
||
| 订单商品摘要 | `goods`, `img`, `meta` | `order-goods-row`, `order-goods-thumb`, `order-goods-meta` |
|
||
| 卡片底部动作 | `ft`, `actions`, `btn` | `order-footer`, `order-actions`, `order-action-btn` |
|
||
|
||
### 11.4 客户端个人中心映射（`pages/client/profile/profile.vue`）
|
||
|
||
| Demo 区块 | Demo class | 建议 uni-app class |
|
||
|---|---|---|
|
||
| 头部用户区 | `header`, `user`, `avatar`, `name` | `profile-header`, `profile-user`, `profile-avatar`, `profile-name` |
|
||
| 统计区 | `stats`, `s` | `profile-stats`, `profile-stat-item` |
|
||
| 功能列表 | `card`, `row`, `left`, `arrow` | `profile-menu-card`, `profile-menu-row`, `profile-menu-left`, `profile-menu-arrow` |
|
||
| 退出按钮 | `logout` | `profile-logout-btn` |
|
||
|
||
### 11.5 供应商端映射（`pages/supplier/home/home.vue`）
|
||
|
||
| Demo 区块 | Demo class | 建议 uni-app class |
|
||
|---|---|---|
|
||
| 头部 | `header`, `topline`, `merchant` | `supplier-header`, `supplier-header-top`, `supplier-merchant` |
|
||
| 统计卡 | `stats`, `stat` | `supplier-stats`, `supplier-stat-item` |
|
||
| 功能宫格 | `tools`, `tool`, `icon` | `supplier-tools`, `supplier-tool-item`, `supplier-tool-icon` |
|
||
| 任务列表 | `tasks`, `task` | `supplier-task-list`, `supplier-task-card` |
|
||
| 任务状态 | `tag pending/stocking` | `supplier-task-tag tag-pending/tag-stocking` |
|
||
|
||
### 11.6 配送员端映射（`pages/deliverer/home/home.vue`）
|
||
|
||
| Demo 区块 | Demo class | 建议 uni-app class |
|
||
|---|---|---|
|
||
| 头部与统计 | 同供应商结构 | `deliverer-header`, `deliverer-stats` |
|
||
| Tab 区 | `tabs`, `tab` | `deliverer-tabs`, `deliverer-tab-item` |
|
||
| 菜单宫格（在任务上方） | `tools`, `tool` | `deliverer-tools`, `deliverer-tool-item` |
|
||
| 任务卡 | `task`, `line1`, `status` | `deliverer-task-card`, `deliverer-task-head`, `deliverer-task-status` |
|
||
| 取货/配送信息块 | `blk`, `phone-row`, `dial` | `deliverer-info-block`, `deliverer-phone-row`, `deliverer-dial-btn` |
|
||
|
||
### 11.7 实施建议（迁移顺序）
|
||
|
||
1. **先挂 class，不改业务逻辑**：先在现有模板上补 class，确保样式可落。
|
||
2. **再替换样式变量**：将页面颜色/间距替换为本规范 Token。
|
||
3. **最后收敛重复样式**：把通用样式抽到 `src/styles` 或公共组件。
|
||
4. **状态类统一命名**：统一 `tag-*` / `status-*`，减少后续维护成本。
|
||
5. **交互类保持语义化**：如 `*-indicator-dot`、`*-checkout-btn`，便于后续脚本绑定。
|