huangzhenbao/medical-mall

Fork 0

Files

comlibmb fdbee0fa32 登录注册/数据分析

2026-01-22 21:15:02 +08:00

17 KiB

Raw Blame History

UI 设计规范文档

📋 文档说明

本文档基于 CRMEB 项目的 UI 设计理念和交互模式，提取设计思想、布局方式、组件模式等，为项目提供统一的 UI 设计规范。所有实现均为原创，不复制任何源码。

设计原则

参考不复制：仅参考 CRMEB 的设计理念，不复制任何代码
现代简约：遵循现代电商 UI 设计趋势
用户体验优先：注重交互流畅性和视觉舒适度
一致性：保持整体设计风格统一

一、设计风格分析

1.1 CRMEB 设计特点

基于对 CRMEB 项目的分析，提取以下设计特点：

1.1.1 视觉风格

色彩：以红色系为主色调（#E93323），体现电商活力
圆角：大量使用圆角设计（20rpx-24rpx），柔和现代
阴影：轻微阴影效果，增强层次感
间距：宽松的间距设计，提升可读性

1.1.2 布局特点

卡片式设计：信息以卡片形式呈现，清晰分组
瀑布流布局：商品列表采用瀑布流，提升浏览体验
模块化设计：首页采用模块化组件，灵活配置
响应式适配：适配不同屏幕尺寸

1.1.3 交互特点

流畅动画：页面切换和操作有平滑过渡
即时反馈：操作有明确的视觉反馈
加载状态：优雅的加载动画和骨架屏
错误处理：友好的错误提示和空状态

二、颜色系统

2.1 主色调

基于 CRMEB 的设计理念，定义以下颜色系统：

// 主题色
$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 中性色

// 文字颜色
$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 间距系统

// 基础间距单位（基于 rpx）
$spacing-xs: 8rpx;      // 极小间距
$spacing-sm: 16rpx;     // 小间距
$spacing-md: 24rpx;     // 中等间距
$spacing-lg: 32rpx;     // 大间距
$spacing-xl: 48rpx;     // 超大间距

// 页面边距
$page-padding: 24rpx;   // 页面左右边距
$section-margin: 20rpx; // 模块间距

3.2 圆角规范

$radius-sm: 8rpx;       // 小圆角
$radius-md: 12rpx;      // 中等圆角
$radius-lg: 20rpx;      // 大圆角
$radius-xl: 24rpx;      // 超大圆角
$radius-circle: 50%;    // 圆形

3.3 阴影规范

// 轻微阴影（卡片）
$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）

// 样式特点
- 背景：渐变色（#FF4D4F → #FF7A45）
- 文字：白色
- 圆角：18rpx
- 高度：92rpx
- 阴影：0 16rpx 32rpx rgba(255, 77, 79, 0.24)

4.1.2 次要按钮（Secondary）

// 样式特点
- 背景：白色
- 文字：主题色
- 边框：1rpx solid 主题色
- 圆角：18rpx
- 高度：92rpx

4.1.3 文字按钮（Text）

// 样式特点
- 背景：透明
- 文字：主题色
- 无边框
- 无圆角

4.2 输入框组件

4.2.1 标准输入框

// 样式特点
- 背景：#F6F7F9
- 边框：2rpx solid rgba(0, 0, 0, 0.06)
- 圆角：14rpx
- 高度：84rpx
- 内边距：0 14rpx
- 错误状态：边框变红，背景变浅红

4.3 商品卡片组件

4.3.1 商品列表卡片

// 布局特点
- 图片：180rpx × 180rpx，圆角 20rpx
- 信息：商品名称、价格、销量
- 间距：左右 30rpx，上下 20rpx
- 活动标签：左上角显示（秒杀/砍价/拼团）

4.3.2 商品网格卡片

// 布局特点
- 图片：宽高比 1:1，圆角 20rpx
- 信息：商品名称、价格、原价（删除线）
- 间距：网格间距 16rpx
- 两列或三列布局

4.4 订单卡片组件

4.4.1 订单列表卡片

// 布局特点
- 背景：白色
- 圆角：20rpx
- 内边距：24rpx
- 阴影：轻微阴影
- 内容：订单号、商品信息、价格、状态

4.5 导航栏组件

4.5.1 顶部导航栏

// 样式特点
- 背景：白色或透明（滚动时变化）
- 高度：88rpx（含状态栏）
- 文字：主题色或白色
- 返回按钮：左侧
- 搜索框：居中（可选）

4.6 标签组件

4.6.1 活动标签

// 样式特点
- 背景：主题色或渐变色
- 文字：白色
- 圆角：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 文件：

// 颜色变量
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> 标签：

/* 卡片样式 */
.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 商品卡片组件

<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 性能优化

图片优化
- 使用合适的图片尺寸
- 启用图片懒加载
- 使用 WebP 格式（如支持）
列表优化
- 使用虚拟列表（长列表）
- 分页加载数据
- 避免不必要的重新渲染
动画优化
- 使用 CSS 动画而非 JS 动画
- 避免过度动画
- 使用 transform 和 opacity 做动画

8.2 可访问性

文字大小
- 最小字号：24rpx
- 主要文字：28rpx-32rpx
- 标题文字：36rpx-40rpx
点击区域
- 最小点击区域：88rpx × 88rpx
- 按钮高度：至少 80rpx
颜色对比
- 文字与背景对比度：至少 4.5:1
- 重要信息使用高对比度

8.3 响应式设计

屏幕适配
- 使用 rpx 单位
- 使用 flex 布局
- 适配不同屏幕尺寸
横竖屏适配
- 考虑横屏布局
- 使用媒体查询（如需要）

九、设计资源

9.1 图标系统

图标库：使用 uni-app 内置图标或自定义图标
图标大小：24rpx、32rpx、48rpx
图标颜色：主题色或中性色

9.2 字体规范

字体家族：系统默认字体
字重：Regular（400）、Medium（500）、Bold（600）
字号：24rpx、28rpx、32rpx、36rpx、40rpx

十、总结

本文档基于 CRMEB 项目的设计理念，提取了以下核心要点：

设计风格：现代简约，以红色系为主色调
布局方式：卡片式、列表式、网格式
交互模式：流畅动画、即时反馈、友好提示
组件设计：统一的组件样式和交互规范

所有实现均为原创，遵循现代 UI 设计最佳实践，确保用户体验和视觉一致性。

文档版本: v1.0
创建时间: 2025-01-XX
状态: ✅ 待实施

17 KiB Raw Blame History Unescape Escape