小程序端 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

设计目标与适配范围
设计 Token（颜色 / 字体 / 间距 / 圆角）
三端统一视觉骨架
客户端页面规范
供应商端页面规范
配送员端页面规范
组件规范（分类、卡片、结算条、状态标签、菜单宫格）
交互与可用性规范
页面改造检查清单
约束与落地策略
从 Demo 到 uni-app 的 class 映射建议

1. 设计目标与适配范围

目标：在不改变业务流程的前提下，提升小程序三端的视觉一致性、操作效率和信息可读性。
原则：
- 同品牌：统一绿色与大麦黄品牌感。
- 同骨架：标题区、统计区、功能区、任务/列表区的结构节奏一致。
- 角色可分：允许角色页面在信息密度和状态强调上有差异，但不打破整体系统。
设备宽度：以 375px 为主基线，兼容 414px。

2. 设计 Token（颜色 / 字体 / 间距 / 圆角）

2.1 颜色

// 品牌主色
$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）形成模块感

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.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 实施建议（迁移顺序）

先挂 class，不改业务逻辑：先在现有模板上补 class，确保样式可落。
再替换样式变量：将页面颜色/间距替换为本规范 Token。
最后收敛重复样式：把通用样式抽到 src/styles 或公共组件。
状态类统一命名：统一 tag-* / status-*，减少后续维护成本。
交互类保持语义化：如 *-indicator-dot、*-checkout-btn，便于后续脚本绑定。

miniprogram-ui-spec-sanqiang.md 11 KB

Lien permanent Historique Raw

小程序端 UI 规范（叁强鲜配）

目录

1. 设计目标与适配范围

2. 设计 Token（颜色 / 字体 / 间距 / 圆角）

2.1 颜色

2.2 字体与字号

2.3 间距与圆角

3. 三端统一视觉骨架

3.1 页面结构

3.2 Header 统一规则

3.3 卡片与容器

4. 客户端页面规范

4.1 首页（`sanqiang-client-ui-demo.html`）

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. 供应商端页面规范

6. 配送员端页面规范

7. 组件规范

7.1 分类卡片（客户端首页）

7.2 分类分页滑块

7.3 状态标签

7.4 底部结算条（客户端）

7.5 功能宫格

8. 交互与可用性规范

9. 页面改造检查清单

10. 约束与落地策略

11. 从 Demo 到 uni-app 的 class 映射建议

11.1 客户端首页映射（`pages/client/home/home.vue`）

11.2 客户端购物车映射（`pages/client/cart/cart.vue`）

11.3 客户端订单映射（`pages/client/order/order.vue`）

11.4 客户端个人中心映射（`pages/client/profile/profile.vue`）

11.5 供应商端映射（`pages/supplier/home/home.vue`）

11.6 配送员端映射（`pages/deliverer/home/home.vue`）

11.7 实施建议（迁移顺序）

miniprogram-ui-spec-sanqiang.md 11 KB Lien permanent Historique Raw

小程序端 UI 规范（叁强鲜配）

目录

1. 设计目标与适配范围

2. 设计 Token（颜色 / 字体 / 间距 / 圆角）

2.1 颜色

2.2 字体与字号

2.3 间距与圆角

3. 三端统一视觉骨架

3.1 页面结构

3.2 Header 统一规则

3.3 卡片与容器

4. 客户端页面规范

4.1 首页（sanqiang-client-ui-demo.html）

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. 供应商端页面规范

6. 配送员端页面规范

7. 组件规范

7.1 分类卡片（客户端首页）

7.2 分类分页滑块

7.3 状态标签

7.4 底部结算条（客户端）

7.5 功能宫格

8. 交互与可用性规范

9. 页面改造检查清单

10. 约束与落地策略

11. 从 Demo 到 uni-app 的 class 映射建议

11.1 客户端首页映射（pages/client/home/home.vue）

11.2 客户端购物车映射（pages/client/cart/cart.vue）

11.3 客户端订单映射（pages/client/order/order.vue）

11.4 客户端个人中心映射（pages/client/profile/profile.vue）

11.5 供应商端映射（pages/supplier/home/home.vue）

11.6 配送员端映射（pages/deliverer/home/home.vue）

11.7 实施建议（迁移顺序）

miniprogram-ui-spec-sanqiang.md 11 KB

Lien permanent Historique Raw

4.1 首页（`sanqiang-client-ui-demo.html`）

4.2 购物车（`sanqiang-client-cart-ui-demo.html`）

4.3 订单（`sanqiang-client-order-ui-demo.html`）

4.4 个人中心（`sanqiang-client-profile-ui-demo.html`）

11.1 客户端首页映射（`pages/client/home/home.vue`）

11.2 客户端购物车映射（`pages/client/cart/cart.vue`）

11.3 客户端订单映射（`pages/client/order/order.vue`）

11.4 客户端个人中心映射（`pages/client/profile/profile.vue`）

11.5 供应商端映射（`pages/supplier/home/home.vue`）

11.6 配送员端映射（`pages/deliverer/home/home.vue`）