cykj/shanxia2.0
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
afad78bf605b38b506bb5a0be8e2b81dd14a8dbe
shanxia2.0/docs/miniprogram-ui-spec-sanqiang.md
T

14 KiB
Raw Blame History

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

// 品牌主色
$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，便于后续脚本绑定。
Reference in new issue View Git Blame Copy Permalink