medical-mall/docs/UI_DESIGN_GUIDELINES.md

# 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` 或使用 `<style>` 标签：

```css
/* 卡片样式 */
.card {
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

/* 按钮样式 */
.btn-primary {
  background: linear-gradient(135deg, #FF4D4F 0%, #FF7A45 100%);
  color: #FFFFFF;
  border-radius: 18rpx;
  height: 92rpx;
  box-shadow: 0 16rpx 32rpx rgba(255, 77, 79, 0.24);
}

/* 输入框样式 */
.input {
  background: #F6F7F9;
  border: 2rpx solid rgba(0, 0, 0, 0.06);
  border-radius: 14rpx;
  height: 84rpx;
  padding: 0 14rpx;
}
```

### 7.3 组件实现示例

#### 7.3.1 商品卡片组件

```vue
<template>
  <view class="product-card" @click="handleClick">
    <view class="product-image">
      <image :src="product.image_url" mode="aspectFill" />
      <view v-if="product.activity" class="activity-tag">
        {{ activityText }}
      </view>
    </view>
    <view class="product-info">
      <text class="product-name">{{ product.name }}</text>
      <view class="product-price">
        <text class="price-symbol">¥</text>
        <text class="price-value">{{ product.price }}</text>
      </view>
      <text class="product-sales">已售 {{ product.sales }}</text>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const props = defineProps<{
  product: ProductType
}>()

const activityText = ref<string>('')
// 根据活动类型设置标签文字
</script>

<style>
.product-card {
  background: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.product-image {
  width: 100%;
  height: 360rpx;
  position: relative;
}

.product-image image {
  width: 100%;
  height: 100%;
}

.activity-tag {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  background: linear-gradient(135deg, #FF4D4F 0%, #FF7A45 100%);
  color: #FFFFFF;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  font-size: 20rpx;
}

.product-info {
  padding: 16rpx;
}

.product-name {
  font-size: 28rpx;
  color: #111111;
  display: block;
  margin-bottom: 12rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price {
  display: flex;
  align-items: baseline;
  margin-bottom: 8rpx;
}

.price-symbol {
  font-size: 24rpx;
  color: #FF4D4F;
}

.price-value {
  font-size: 36rpx;
  color: #FF4D4F;
  font-weight: 600;
}

.product-sales {
  font-size: 22rpx;
  color: #999999;
}
</style>
```

---

## 八、最佳实践

### 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  
**状态**: ✅ 待实施