# UI 设计规范文档 ## 📋 文档说明 本文档基于 **CRMEB 项目的 UI 设计理念和交互模式**，提取设计思想、布局方式、组件模式等，为项目提供统一的 UI 设计规范。**所有实现均为原创，不复制任何源码**。 ### 设计原则 1. **参考不复制**：仅参考 CRMEB 的设计理念，不复制任何代码 2. **现代简约**：遵循现代电商 UI 设计趋势 3. **用户体验优先**：注重交互流畅性和视觉舒适度 4. **一致性**：保持整体设计风格统一 --- ## 一、设计风格分析 ### 1.1 CRMEB 设计特点 基于对 CRMEB 项目的分析，提取以下设计特点： #### 1.1.1 视觉风格 - **色彩**：以红色系为主色调（#E93323），体现电商活力 - **圆角**：大量使用圆角设计（20rpx-24rpx），柔和现代 - **阴影**：轻微阴影效果，增强层次感 - **间距**：宽松的间距设计，提升可读性 #### 1.1.2 布局特点 - **卡片式设计**：信息以卡片形式呈现，清晰分组 - **瀑布流布局**：商品列表采用瀑布流，提升浏览体验 - **模块化设计**：首页采用模块化组件，灵活配置 - **响应式适配**：适配不同屏幕尺寸 #### 1.1.3 交互特点 - **流畅动画**：页面切换和操作有平滑过渡 - **即时反馈**：操作有明确的视觉反馈 - **加载状态**：优雅的加载动画和骨架屏 - **错误处理**：友好的错误提示和空状态 --- ## 二、颜色系统 ### 2.1 主色调 基于 CRMEB 的设计理念，定义以下颜色系统： ```scss // 主题色 $theme-primary: #FF4D4F; // 主色（红色系，体现电商活力） $theme-primary-light: #FF7875; // 主色浅色 $theme-primary-dark: #CF1322; // 主色深色 // 渐变色 $gradient-start: #FF4D4F; // 渐变起始色 $gradient-end: #FF7A45; // 渐变结束色 // 功能色 $success: #52C41A; // 成功色 $warning: #FAAD14; // 警告色 $error: #FF4D4F; // 错误色 $info: #1890FF; // 信息色 ``` ### 2.2 中性色 ```scss // 文字颜色 $text-primary: #111111; // 主要文字 $text-secondary: #333333; // 次要文字 $text-tertiary: #666666; // 辅助文字 $text-disabled: #999999; // 禁用文字 $text-placeholder: #CCCCCC; // 占位文字 // 背景颜色 $bg-primary: #FFFFFF; // 主背景 $bg-secondary: #F7F8FA; // 次背景 $bg-tertiary: #F5F5F5; // 三级背景 $bg-hover: #F1F1F1; // 悬停背景 // 边框颜色 $border-color: rgba(0, 0, 0, 0.06); // 边框色 $border-color-light: rgba(0, 0, 0, 0.08); // 浅边框 ``` ### 2.3 使用规范 - **主色**：用于按钮、链接、重要信息 - **渐变色**：用于主要操作按钮、强调元素 - **中性色**：用于文字、背景、边框 - **功能色**：用于状态提示、警告信息 --- ## 三、布局规范 ### 3.1 间距系统 ```scss // 基础间距单位（基于 rpx） $spacing-xs: 8rpx; // 极小间距 $spacing-sm: 16rpx; // 小间距 $spacing-md: 24rpx; // 中等间距 $spacing-lg: 32rpx; // 大间距 $spacing-xl: 48rpx; // 超大间距 // 页面边距 $page-padding: 24rpx; // 页面左右边距 $section-margin: 20rpx; // 模块间距 ``` ### 3.2 圆角规范 ```scss $radius-sm: 8rpx; // 小圆角 $radius-md: 12rpx; // 中等圆角 $radius-lg: 20rpx; // 大圆角 $radius-xl: 24rpx; // 超大圆角 $radius-circle: 50%; // 圆形 ``` ### 3.3 阴影规范 ```scss // 轻微阴影（卡片） $shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); // 中等阴影（悬浮） $shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); // 大阴影（弹窗） $shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.12); ``` ### 3.4 布局模式 #### 3.4.1 卡片布局 - **特点**：信息以卡片形式呈现，有圆角和阴影 - **应用**：商品卡片、订单卡片、信息卡片 - **实现**：使用 `view` 容器，添加圆角和阴影样式 #### 3.4.2 列表布局 - **特点**：信息以列表形式呈现，清晰有序 - **应用**：订单列表、地址列表、设置列表 - **实现**：使用 `view` 容器，添加分割线 #### 3.4.3 网格布局 - **特点**：信息以网格形式呈现，整齐排列 - **应用**：商品网格、分类网格、功能入口 - **实现**：使用 `view` 容器，配合 flex 布局 --- ## 四、组件设计规范 ### 4.1 按钮组件 #### 4.1.1 主要按钮（Primary） ```scss // 样式特点 - 背景：渐变色（#FF4D4F → #FF7A45） - 文字：白色 - 圆角：18rpx - 高度：92rpx - 阴影：0 16rpx 32rpx rgba(255, 77, 79, 0.24) ``` #### 4.1.2 次要按钮（Secondary） ```scss // 样式特点 - 背景：白色 - 文字：主题色 - 边框：1rpx solid 主题色 - 圆角：18rpx - 高度：92rpx ``` #### 4.1.3 文字按钮（Text） ```scss // 样式特点 - 背景：透明 - 文字：主题色 - 无边框 - 无圆角 ``` ### 4.2 输入框组件 #### 4.2.1 标准输入框 ```scss // 样式特点 - 背景：#F6F7F9 - 边框：2rpx solid rgba(0, 0, 0, 0.06) - 圆角：14rpx - 高度：84rpx - 内边距：0 14rpx - 错误状态：边框变红，背景变浅红 ``` ### 4.3 商品卡片组件 #### 4.3.1 商品列表卡片 ```scss // 布局特点 - 图片：180rpx × 180rpx，圆角 20rpx - 信息：商品名称、价格、销量 - 间距：左右 30rpx，上下 20rpx - 活动标签：左上角显示（秒杀/砍价/拼团） ``` #### 4.3.2 商品网格卡片 ```scss // 布局特点 - 图片：宽高比 1:1，圆角 20rpx - 信息：商品名称、价格、原价（删除线） - 间距：网格间距 16rpx - 两列或三列布局 ``` ### 4.4 订单卡片组件 #### 4.4.1 订单列表卡片 ```scss // 布局特点 - 背景：白色 - 圆角：20rpx - 内边距：24rpx - 阴影：轻微阴影 - 内容：订单号、商品信息、价格、状态 ``` ### 4.5 导航栏组件 #### 4.5.1 顶部导航栏 ```scss // 样式特点 - 背景：白色或透明（滚动时变化） - 高度：88rpx（含状态栏） - 文字：主题色或白色 - 返回按钮：左侧 - 搜索框：居中（可选） ``` ### 4.6 标签组件 #### 4.6.1 活动标签 ```scss // 样式特点 - 背景：主题色或渐变色 - 文字：白色 - 圆角：4rpx 或 圆形 - 位置：商品图片左上角 - 文字：秒杀/砍价/拼团 ``` --- ## 五、交互模式 ### 5.1 页面切换 - **动画**：使用 uni-app 的页面切换动画 - **返回**：支持滑动返回（iOS 风格） - **加载**：页面切换时显示加载状态 ### 5.2 数据加载 - **骨架屏**：数据加载时显示骨架屏 - **下拉刷新**：列表页面支持下拉刷新 - **上拉加载**：列表页面支持上拉加载更多 - **加载状态**：显示加载动画和提示文字 ### 5.3 操作反馈 - **点击反馈**：使用 `hover-class` 提供点击反馈 - **成功提示**：使用 `uni.showToast` 显示成功提示 - **错误提示**：使用 `uni.showModal` 显示错误信息 - **加载提示**：使用 `uni.showLoading` 显示加载状态 ### 5.4 表单交互 - **实时验证**：输入时实时验证，显示错误信息 - **提交反馈**：提交时显示加载状态，防止重复提交 - **成功跳转**：提交成功后自动跳转或提示 --- ## 六、页面设计规范 ### 6.1 首页设计 #### 6.1.1 布局结构 ``` ┌─────────────────────────┐ │ 顶部搜索栏（可选） │ ├─────────────────────────┤ │ 轮播图（Banner） │ ├─────────────────────────┤ │ 分类导航（横向滚动） │ ├─────────────────────────┤ │ 营销模块（可选） │ │ - 秒杀/拼团/砍价 │ ├─────────────────────────┤ │ 商品推荐 │ │ - 瀑布流布局 │ └─────────────────────────┘ ``` #### 6.1.2 设计要点 - **模块化**：首页由多个模块组成，可配置 - **瀑布流**：商品列表采用瀑布流布局 - **懒加载**：图片和内容懒加载，提升性能 - **下拉刷新**：支持下拉刷新 ### 6.2 商品详情页 #### 6.2.1 布局结构 ``` ┌─────────────────────────┐ │ 商品轮播图 │ ├─────────────────────────┤ │ 商品信息 │ │ - 价格（突出显示） │ │ - 标题 │ │ - 标签 │ ├─────────────────────────┤ │ 优惠信息 │ │ - 优惠券 │ │ - 活动 │ ├─────────────────────────┤ │ 规格选择（弹窗） │ ├─────────────────────────┤ │ 商品详情（Tab切换） │ │ - 详情 │ │ - 评价 │ │ - 推荐 │ ├─────────────────────────┤ │ 底部操作栏（固定） │ │ - 购物车/立即购买 │ └─────────────────────────┘ ``` #### 6.2.2 设计要点 - **图片展示**：轮播图展示商品图片 - **价格突出**：价格使用大字号和主题色 - **规格选择**：点击规格弹出选择弹窗 - **底部固定**：操作按钮固定在底部 ### 6.3 购物车页面 #### 6.3.1 布局结构 ``` ┌─────────────────────────┐ │ 商品列表 │ │ ┌───────────────────┐ │ │ │ ☑ 商品卡片 │ │ │ │ 数量选择 │ │ │ └───────────────────┘ │ ├─────────────────────────┤ │ 底部结算栏（固定） │ │ - 全选 │ │ - 合计金额 │ │ - 结算按钮 │ └─────────────────────────┘ ``` #### 6.3.2 设计要点 - **选择状态**：每个商品可单独选择 - **数量编辑**：支持增减数量 - **价格计算**：实时计算总价 - **底部固定**：结算栏固定在底部 ### 6.4 订单确认页 #### 6.4.1 布局结构 ``` ┌─────────────────────────┐ │ 收货地址（可选） │ ├─────────────────────────┤ │ 商品列表 │ ├─────────────────────────┤ │ 优惠券选择（可选） │ ├─────────────────────────┤ │ 配送方式 │ ├─────────────────────────┤ │ 备注信息 │ ├─────────────────────────┤ │ 价格明细 │ │ - 商品总额 │ │ - 运费 │ │ - 优惠金额 │ │ - 实付金额 │ ├─────────────────────────┤ │ 提交订单按钮（固定） │ └─────────────────────────┘ ``` ### 6.5 个人中心页 #### 6.5.1 布局结构 ``` ┌─────────────────────────┐ │ 用户信息卡片 │ │ - 头像 │ │ - 昵称 │ │ - 会员信息 │ ├─────────────────────────┤ │ 订单状态（快捷入口） │ │ - 待付款/待发货等 │ ├─────────────────────────┤ │ 功能菜单 │ │ - 我的订单 │ │ - 我的地址 │ │ - 我的优惠券 │ │ - 设置 │ └─────────────────────────┘ ``` --- ## 七、实现指南 ### 7.1 样式变量定义 创建 `styles/variables.uts` 文件： ```typescript // 颜色变量 export const THEME_PRIMARY = '#FF4D4F' export const THEME_GRADIENT_START = '#FF4D4F' export const THEME_GRADIENT_END = '#FF7A45' // 间距变量 export const SPACING_XS = '8rpx' export const SPACING_SM = '16rpx' export const SPACING_MD = '24rpx' export const SPACING_LG = '32rpx' // 圆角变量 export const RADIUS_SM = '8rpx' export const RADIUS_MD = '12rpx' export const RADIUS_LG = '20rpx' ``` ### 7.2 通用样式类 创建 `styles/common.uvue` 或使用 ` ``` --- ## 八、最佳实践 ### 8.1 性能优化 1. **图片优化** - 使用合适的图片尺寸 - 启用图片懒加载 - 使用 WebP 格式（如支持） 2. **列表优化** - 使用虚拟列表（长列表） - 分页加载数据 - 避免不必要的重新渲染 3. **动画优化** - 使用 CSS 动画而非 JS 动画 - 避免过度动画 - 使用 `transform` 和 `opacity` 做动画 ### 8.2 可访问性 1. **文字大小** - 最小字号：24rpx - 主要文字：28rpx-32rpx - 标题文字：36rpx-40rpx 2. **点击区域** - 最小点击区域：88rpx × 88rpx - 按钮高度：至少 80rpx 3. **颜色对比** - 文字与背景对比度：至少 4.5:1 - 重要信息使用高对比度 ### 8.3 响应式设计 1. **屏幕适配** - 使用 rpx 单位 - 使用 flex 布局 - 适配不同屏幕尺寸 2. **横竖屏适配** - 考虑横屏布局 - 使用媒体查询（如需要） --- ## 九、设计资源 ### 9.1 图标系统 - **图标库**：使用 uni-app 内置图标或自定义图标 - **图标大小**：24rpx、32rpx、48rpx - **图标颜色**：主题色或中性色 ### 9.2 字体规范 - **字体家族**：系统默认字体 - **字重**：Regular（400）、Medium（500）、Bold（600） - **字号**：24rpx、28rpx、32rpx、36rpx、40rpx --- ## 十、总结 本文档基于 CRMEB 项目的设计理念，提取了以下核心要点： 1. **设计风格**：现代简约，以红色系为主色调 2. **布局方式**：卡片式、列表式、网格式 3. **交互模式**：流畅动画、即时反馈、友好提示 4. **组件设计**：统一的组件样式和交互规范 所有实现均为原创，遵循现代 UI 设计最佳实践，确保用户体验和视觉一致性。 --- **文档版本**: v1.0 **创建时间**: 2025-01-XX **状态**: ✅ 待实施