docs(uiux): 制定陪玩小程序uni-app静态UI规划与UIUX设计系统约束规范文档

2026-09-16 15:51:07 +08:00
--- a/docs/UIUX设计系统与约束规范文档.md
+++ b/docs/UIUX设计系统与约束规范文档.md
@@ -0,0 +1,204 @@
+# 游戏陪玩小程序 uni-app 静态 UI 架构规划与 UI/UX 约束规范文档
+
+> **编制标准**：基于 `/ui-ux-pro-max` 移动端设计智能规范，面向 750rpx 移动端栅格系统，兼顾电竞潮酷视觉质感、WCAG AA 级色彩无障碍对比度与严苛的触控交互体验。
+
+---
+
+## 1. 整体设计哲学与视觉调性定位
+
+### 1.1 风格定位：Cyber-Esports Dark Elegance（暗夜流光电竞风）
+- **核心气质**：高端电竞质感、沉浸式互动、年轻潮酷、信息轻盈清晰。
+- **避免的设计反模式（Anti-Patterns to Avoid）**：
+  - ❌ 杜绝花哨刺眼的廉价荧光大撞色；
+  - ❌ 杜绝使用任何系统 Emoji 代替产品功能操作图标（全部采用统一风格的矢量 SVG 图标）；
+  - ❌ 杜绝点击无反馈或延迟过长（点击态需在 100ms 内给予 0.98 缩放或透明度微反馈）；
+  - ❌ 杜绝按钮或卡片按压时引起页面排版位移（Layout Shift / CLS 必须 < 0.1）；
+  - ❌ 杜绝纯依靠单一颜色传递状态（成功/失败/在线必须辅以图标或文字辅助标签）。
+
+---
+
+## 2. 静态 UI 页面与路由架构规划
+
+整个小程序采用**“单套工程 + 双视图模式（买家玩家端 / 接单大神端）无缝切换”**架构：
+
+```mermaid
+graph TD
+    subgraph 玩家端视图 (Player Mode)
+        P1[pages/index/index 首页大厅: 推荐流/分类/即时匹配入口]
+        P2[pages/activity/list 活动大厅: AA制/项目制活动列表]
+        P3[pages/activity/detail 活动详情与报名]
+        P4[pages/activity/my-ticket 4位数字核销码凭证页]
+        P5[pages/expert/detail 陪玩大神个人主页与服务列表]
+        P6[pages/order/create 预约/下单结算页]
+        P7[pages/order/list 订单中心]
+        P8[pages/user/index 个人中心: 角色切换入口/钱包/分销]
+    end
+
+    subgraph 大神端视图 (Expert Mode)
+        E1[pages/expert-mode/workbench 接单工作台: 在线开关/实时派单]
+        E2[pages/expert-mode/service-manage 服务管理: 上下架/编辑]
+        E3[pages/expert-mode/activity-verify 4位核销码核销工作台]
+        E4[pages/expert-mode/finance 财务收益与多渠道提现]
+        E5[pages/expert-mode/certify 实名与段位资质认证]
+    end
+
+    subgraph 共享公共组件库 (Components)
+        C1[c-navbar 沉浸式导航栏]
+        C2[c-tabbar 动态双模底部栏]
+        C3[c-card 渐变电竞卡片]
+        C4[c-verify-input 4位核销码专用键盘]
+        C5[c-tag 段位/认证标签]
+    end
+
+    P8 -->|一键切换角色| E1
+    E1 -->|一键切回买家| P1
+```
+
+### 2.1 详细页面清单与功能规划
+| 路由路径 | 页面名称 | 归属端 | 核心内容与静态 UI 组件 |
+| :--- | :--- | :--- | :--- |
+| `pages/index/index` | 首页发现大厅 | 玩家端 | 顶部沉浸式搜素、热门游戏分类胶囊、Banner 轮播、大神瀑布流卡片（头像、在线呼吸灯、段位标、语音试听条、价格） |
+| `pages/activity/list` | 活动项目大厅 | 玩家端 | **AA制 / 项目制**双 Tab 切换、发起活动悬浮按钮、活动倒计时卡片、报名进度条、单人/总价标签 |
+| `pages/activity/detail` | 活动详情与报名 | 玩家端 | 活动规则介绍、发起人卡片、当前参与人头像组、AA平摊/项目包揽金额计算条、底部固定报名 CTA 栏 |
+| `pages/activity/my-ticket` | 活动凭证与核销码 | 玩家端 | **【核心重点】大号 4 位纯数字核销码（等宽大字）、条形码与二维码占位、活动时间地点、核销防伪动态时间戳** |
+| `pages/expert/detail` | 陪玩主页 | 玩家端 | 沉浸式背景大图、个人语音试听卡片、技能荣誉徽章、服务项目选择列表、战绩动态相册流、买家评价星级卡片 |
+| `pages/order/create` | 确认下单结算 | 玩家端 | 服务项明细卡片、预约日历/时间选择器、游戏ID备注输入、平台优惠券选择器、实付明细明晰看板、微信支付固定栏 |
+| `pages/order/list` | 订单列表 | 玩家端 | 待付款/待接单/服务中/待确认/已完成 Tab 切换，订单倒计时，联系TA/取消/退款/确认完成操作按钮组 |
+| `pages/user/index` | 个人中心 | 玩家端 | 用户信息卡、**“切换为大神接单端”醒目渐变卡**、我的钱包余额卡、分销裂变海报入口、系统设置列表 |
+| `pages/expert-mode/workbench` | 大神接单工作台 | 大神端 | 接单总开关（在线/离线大按钮）、今日营收/完成单量数据卡、新单实时广播抢单卡片（声光动效占位） |
+| `pages/expert-mode/service-manage` | 服务包管理 | 大神端 | 已发布服务项目列表、一键上下架 Switch 开关、新建/修改服务表单（定价模式、游戏段位、描述） |
+| `pages/expert-mode/activity-verify`| 现场核销工作台 | 大神端 | **【核心重点】现场签到核销专用页：4位大数字快速输入框/数字九宫格小键盘、一键核验、参与人身份确认弹窗、历史已核销记录** |
+| `pages/expert-mode/finance` | 收益与多渠道提现 | 大神端 | 可提现余额、冻结中资金卡片、近 7 天收益趋势简图、提现申请表单（微信零钱/支付宝/银行卡切换）、提现明细流水 |
+| `pages/expert-mode/certify` | 资质与实名认证 | 大神端 | 身份认证进度指示器（待审/已通过）、身份证正反面上传器、游戏段位截图凭证、语音自我介绍在线录制器 |
+
+---
+
+## 3. 设计规范系统（Design Tokens）
+
+### 3.1 色彩语义系统（Color Palette Tokens）
+全套界面以暗夜深空蓝黑为底色，强化高对比度与电竞发光氛围：
+
+```scss
+// 主题色彩 Tokens (uni.scss / tailwind tokens)
+$bg-primary: #0A0F1D;     // 页面全局最底色 (深邃暗夜黑)
+$bg-surface: #151D30;     // 卡片/模块容器底色 (暗夜深空蓝)
+$bg-surface-elevated: #1E2942; // 次级浮层/下拉/弹窗底色
+$bg-surface-glass: rgba(21, 29, 48, 0.85); // 玻璃拟态半透明底
+
+// 品牌核心与交互色
+$color-brand: #6366F1;    // 品牌核心蓝紫 (Primary CTA)
+$color-brand-light: #818CF8;
+$color-brand-glow: rgba(99, 102, 241, 0.35); // 发光阴影色
+
+// 业务强调色 (特别为活动项目与状态指示设定)
+$color-accent: #10B981;   // 翠绿高光色 (活动项目标签、在线呼吸灯、成功状态)
+$color-accent-glow: rgba(16, 185, 129, 0.3);
+$color-warning: #F59E0B;  // 暖橙金 (金牌大神等级标签、待支付倒计时)
+$color-danger: #EF4444;   // 警示红 (退款仲裁、违规警告)
+
+// 文本与无障碍对比色阶 (满足 WCAG AA 4.5:1 标准)
+$text-primary: #F8FAFC;   // 一级主文本 (纯白，对比度 > 12:1)
+$text-secondary: #94A3B8; // 二级描述文本 (冷灰蓝，对比度 5.2:1)
+$text-muted: #64748B;     // 三级占位与辅助说明 (对比度 3.5:1)
+$border-subtle: #1E293B;  // 卡片外描边/分割线
+$border-focus: #4F46E5;   // 激活描边色
+```
+
+---
+
+### 3.2 响应式栅格与间距阶梯（Spacing & Layout Scale）
+小程序基于 **750rpx** 经典基准设计稿，执行严格的 **8rpx 步进倍数**：
+
+| Token 名称 | 尺寸数值 | 应用场景规范 |
+| :--- | :--- | :--- |
+| `spacing-xs` | `8rpx` | 极小间距：标签内文字与图标间隙、徽章内边距 |
+| `spacing-sm` | `16rpx` | 元素间隙：卡片内部子元素垂直间距、头像间距 |
+| `spacing-md` | `24rpx` | 组件内边距：通用卡片 Padding、输入框左右内边距 |
+| `spacing-lg` | `32rpx` | 页面级边距：页面左/右主边距（Gutter）、卡片间上下间隙 |
+| `spacing-xl` | `48rpx` | 区块间距：页面大板块分组、表单大分区间隔 |
+| `spacing-2xl`| `64rpx` | 头部英雄区与列表的区隔高度 |
+
+---
+
+### 3.3 排版与字阶系统（Typography Scale）
+字体采用系统默认无衬线字体（PingFang SC / Helvetica Neue），数字强调用 Tabular 等宽数字：
+
+| 等级 | 字号 | 行高 | 字重 | 典型应用 |
+| :--- | :--- | :--- | :--- | :--- |
+| **Hero / Code** | `56rpx` ~ `64rpx` | 1.1 | 700 (Bold) | **4 位纯数字核销码**、总资产金额数字 |
+| **Heading 1** | `36rpx` | 1.3 | 600 (Semibold) | 页面大标题、大神个人主页昵称、活动主标题 |
+| **Heading 2** | `32rpx` | 1.4 | 600 (Semibold) | 卡片标题、服务包名称、弹窗大标题 |
+| **Body (正文)**| `28rpx` | 1.5 | 400 (Regular) | 服务介绍文本、活动规则正文、表单输入文字 |
+| **Caption/Tag**| `24rpx` | 1.4 | 500 (Medium) | 游戏段位标签、在线状态标签、辅助时间戳 |
+| **Micro (最小)**| `20rpx` | 1.2 | 400 (Regular) | 极小辅助说明、优惠券门槛小字（严禁低于 20rpx） |
+
+---
+
+### 3.4 触控目标与无障碍规范（Touch & Accessibility）
+1. **触控热区底线**：
+   - 任何可点击按钮、图标、选项的点击热区尺寸**必须 $\ge 88\text{rpx} \times 88\text{rpx}$**（等价于 iOS HIG 44×44pt 规范）。
+   - 小图标（如 32rpx 的关闭 X 号），需通过外层容器设置 `padding: 28rpx` 扩充点击响应区域。
+2. **安全区留白（Safe Area Awareness）**：
+   - 顶部自定义导航栏（`c-navbar`）必须预留系统状态栏高度：`padding-top: var(--status-bar-height);`。
+   - 底部固定操作条（如支付栏、核销提交按钮）必须预留 iPhone 底部横条区域：`padding-bottom: calc(24rpx + env(safe-area-inset-bottom));`。
+   - 列表页面底部滚动区必须预留垫底容器高度，防止最后一个卡片被固定底部栏遮挡。
+
+---
+
+### 3.5 动效与微交互约束（Motion & Feedback）
+1. **点击态反馈（Tap Feedback）**：
+   - 所有按钮、卡片在 `:active` 状态下统一增加优雅轻微的反馈：
+     ```css
+     .c-btn:active, .c-card-clickable:active {
+       transform: scale(0.98);
+       opacity: 0.9;
+       transition: transform 100ms ease-out, opacity 100ms ease-out;
+     }
+     ```
+   - 严禁点击时出现位移晃动（抖动）。
+2. **状态转移动效**：
+   - 弹窗与抽屉（Modal / Drawer）：进入动画 `200ms ease-out`（从底部向上滑入 + 淡入），退出动画 `150ms ease-in`。
+   - 在线状态脉冲（Pulse Glow）：在线大神头像右上角绿色指示灯配备周期为 2s 的柔和渐隐呼吸光晕。
+
+---
+
+## 4. 特色功能专有 UI 组件详细规格
+
+### 4.1 【核心特色一】4位数字核销码展示卡片 (`c-verify-ticket`)
+- **使用场景**：玩家参与活动后的门票凭证页面（`pages/activity/my-ticket`）。
+- **设计规格**：
+  - 卡片顶部：活动标题、开始时间、游戏项目名称。
+  - 卡片中部（视觉焦点）：
+    - 采用独立等宽大字槽展示 **4 位数字**（例如：`8` `3` `9` `2`），字号 `64rpx`，加粗，高亮翠绿带电竞微发光。
+    - 下方配套一维条形码/二维码伪占位（方便线下扫码枪或扫一扫识别）。
+  - 卡片底部：防伪动态刷新时间倒计时、活动发起人头像与联系入口。
+  - 状态水印：未核销（绿色“待核销”印记）、已核销（灰色“已核销”戳记，禁止再次交互）。
+
+### 4.2 【核心特色二】大神端 4位核销码键盘与校验弹窗 (`c-verify-keypad`)
+- **使用场景**：大神在现场或线上核销参与人（`pages/expert-mode/activity-verify`）。
+- **设计规格**：
+  - 页面顶部提供 4 个方块光标输入槽（Square PIN Inputs）。
+  - 下方自定义九宫格大按键数字键盘（1-9、0、删除、清空），避免调起系统原生输入法遮挡弹窗。
+  - 输满 4 位后自动触发校验并展示参与人信息确认卡（买家头像、昵称、支付金额、报名时间），核验无误点击一键确认核销。
+
+### 4.3 【核心特色三】玩家/大神双身份全局悬浮切换卡 (`c-mode-switcher`)
+- **使用场景**：玩家个人中心与大神工作台顶部。
+- **设计规格**：
+  - 采用双色流光渐变边框（从 Indigo 到 Emerald）。
+  - 左侧展示当前身份标签（“当前角色：娱乐玩家” / “当前角色：金牌大神”）。
+  - 右侧提供胶囊切换按钮：“一键切换至大神接单端” / “一键切回买家商城”。
+  - 未认证大神时，点击弹出友好的引导认证弹窗，而不是粗暴报错。
+
+---
+
+## 5. uni-app 静态工程落地实施规范
+
+1. **样式方案**：
+   - 采用标准 SCSS / CSS 变量体系，样式全作用域 Scoped 隔离。
+   - 样式类名严格遵循 BEM 规范（例如 `.activity-card__header`、`.activity-card--aa`）。
+2. **数据模拟规范**：
+   - 所有静态 UI 页面配备完善的 Mock 数据文件（`src/mock/`），涵盖：
+     - 5+ 款主流电竞游戏项目（王者荣耀、和平精英、英雄联盟、无畏契约、永劫无间）；
+     - 10+ 位不同风格与段位的大神卡片；
+     - 4 场具有代表性的真实活动样本（2场AA制、2场项目制）；
+     - 模拟完整的 4 位核销码核销闭环数据。