250 lines
8.4 KiB
Markdown
250 lines
8.4 KiB
Markdown
# 中医医院小程序首页 UI 设计指南
|
|
|
|
## 设计理念
|
|
|
|
### 核心特点
|
|
1. **中医文化融合** - 采用中医传统色彩（棕色、金色）
|
|
2. **专业医疗感** - 简洁现代的布局，突出医疗专业性
|
|
3. **用户友好** - 清晰的信息层级，便捷的操作流程
|
|
4. **视觉层次** - 通过色彩、大小、间距创建清晰的视觉层次
|
|
|
|
## 色彩方案
|
|
|
|
### 主色系
|
|
- **主色**: `#8B6914` (棕色) - 代表中医传统、稳重、专业
|
|
- **辅助色**: `#A0826D` (浅棕) - 用于渐变和背景
|
|
- **强调色**: `#FFB800` (金色) - 用于星级评分、重要信息
|
|
- **警告色**: `#FF6B6B` (红色) - 用于通知、提醒
|
|
|
|
### 中性色
|
|
- **背景**: `#f8f8f8` - 整体背景
|
|
- **卡片**: `#fff` - 内容卡片
|
|
- **文字**: `#333` - 主文字
|
|
- **辅助**: `#999` - 辅助文字
|
|
|
|
## 页面结构
|
|
|
|
### 1. 顶部导航栏 (Header)
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ 中医医院 🔔 (3) │
|
|
└─────────────────────────────────┘
|
|
```
|
|
- 固定顶部，背景为棕色渐变
|
|
- 左侧显示医院名称
|
|
- 右侧显示通知图标和未读数
|
|
|
|
### 2. 搜索栏 (Search Bar)
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ 🔍 搜索医生或科室 │
|
|
└─────────────────────────────────┘
|
|
```
|
|
- 圆角搜索框，背景为浅灰色
|
|
- 支持搜索医生和科室
|
|
|
|
### 3. 快速导航 (Quick Navigation)
|
|
```
|
|
┌──────┬──────┬──────┬──────┐
|
|
│ 📋 │ 💬 │ 📄 │ ❤️ │
|
|
│ 挂号 │ 咨询 │ 记录 │ 档案 │
|
|
└──────┴──────┴──────┴──────┘
|
|
```
|
|
- 4 个快速入口
|
|
- 图标 + 文字组合
|
|
- 点击跳转到对应页面
|
|
|
|
### 4. 轮播区域 (Banner)
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ │
|
|
│ [轮播图片] │
|
|
│ │
|
|
│ 中医药文化 │
|
|
│ 传承千年中医精粹，守护您的健康 │
|
|
│ [了解更多] │
|
|
│ │
|
|
└─────────────────────────────────┘
|
|
```
|
|
- 高度: 300rpx
|
|
- 自动轮播，5秒切换
|
|
- 底部显示标题、描述和按钮
|
|
- 使用渐变遮罩
|
|
|
|
### 5. 科室推荐 (Departments)
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ 科室推荐 查看全部 > │
|
|
├─────────────────────────────────┤
|
|
│ 🫀 👩 👶 │
|
|
│ 内科 妇科 儿科 │
|
|
│ 中医内科 中医妇科 中医儿科 │
|
|
│ │
|
|
│ 🦴 🧴 💉 │
|
|
│ 骨科 皮肤科 针灸科 │
|
|
│ 中医骨科 中医皮肤 针灸推拿 │
|
|
└─────────────────────────────────┘
|
|
```
|
|
- 3 列网格布局
|
|
- 6 个科室卡片
|
|
- 卡片背景为浅米色
|
|
- 点击进入科室详情
|
|
|
|
### 6. 医生推荐 (Doctors)
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ 名医推荐 查看全部 > │
|
|
├─────────────────────────────────┤
|
|
│ ┌─────────────────────────────┐ │
|
|
│ │ [头像] 张医生 [咨询] │ │
|
|
│ │ 专家 主任医师 │ │
|
|
│ │ 中医内科 │ │
|
|
│ │ ★★★★★ 4.9 (256) │ │
|
|
│ └─────────────────────────────┘ │
|
|
│ ┌─────────────────────────────┐ │
|
|
│ │ [头像] 李医生 [咨询] │ │
|
|
│ │ 副主任医师 │ │
|
|
│ │ 中医妇科 │ │
|
|
│ │ ★★★★★ 4.8 (189) │ │
|
|
│ └─────────────────────────────┘ │
|
|
└─────────────────────────────────┘
|
|
```
|
|
- 列表布局，每行一个医生
|
|
- 左侧: 头像 + 专家标签
|
|
- 中间: 医生信息（名字、职位、科室、评分）
|
|
- 右侧: 咨询按钮
|
|
- 点击进入医生详情
|
|
|
|
### 7. 健康资讯 (News)
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ 健康资讯 更多 > │
|
|
├─────────────────────────────────┤
|
|
│ [图] 春季养生：如何调理脾胃 │
|
|
│ 中医养生 2小时前 │
|
|
│ │
|
|
│ [图] 中医药在预防疾病中的作用 │
|
|
│ 医学资讯 4小时前 │
|
|
│ │
|
|
│ [图] 穴位按摩缓解颈椎疲劳 │
|
|
│ 健康指南 6小时前 │
|
|
└─────────────────────────────────┘
|
|
```
|
|
- 列表布局
|
|
- 左侧: 新闻图片
|
|
- 右侧: 标题、来源、时间
|
|
- 标题最多显示 2 行
|
|
|
|
## 交互设计
|
|
|
|
### 按钮状态
|
|
- **正常**: 棕色背景，白色文字
|
|
- **按下**: 背景变深，有缩放动画
|
|
- **禁用**: 灰色背景，不可点击
|
|
|
|
### 卡片交互
|
|
- **正常**: 浅色背景，细边框
|
|
- **按下**: 背景变深，有阴影效果
|
|
- **悬停**: 轻微缩放
|
|
|
|
### 动画效果
|
|
- **轮播**: 500ms 切换动画
|
|
- **卡片**: 300ms 过渡效果
|
|
- **按钮**: 100ms 按下效果
|
|
|
|
## 响应式设计
|
|
|
|
### 断点
|
|
- **小屏幕** (< 375px): 调整间距和字体
|
|
- **中屏幕** (375-414px): 标准设计
|
|
- **大屏幕** (> 414px): 增加间距
|
|
|
|
### 适配方案
|
|
- 使用 rpx 单位（响应式像素）
|
|
- 1rpx = 0.5px (在 375px 宽度下)
|
|
- 自动适配不同屏幕尺寸
|
|
|
|
## 字体规范
|
|
|
|
### 字体大小
|
|
- **标题**: 32rpx (主标题), 28rpx (副标题)
|
|
- **正文**: 24rpx (主要内容), 22rpx (次要内容)
|
|
- **辅助**: 20rpx (提示信息), 18rpx (标签)
|
|
|
|
### 字体权重
|
|
- **加粗**: 500-700 (标题、重要信息)
|
|
- **正常**: 400 (正文)
|
|
- **轻细**: 300 (辅助信息)
|
|
|
|
## 间距规范
|
|
|
|
### 外间距 (Margin)
|
|
- **大**: 30rpx (主要分区)
|
|
- **中**: 20rpx (卡片间距)
|
|
- **小**: 10rpx (元素间距)
|
|
|
|
### 内间距 (Padding)
|
|
- **大**: 30rpx (卡片内部)
|
|
- **中**: 20rpx (按钮、输入框)
|
|
- **小**: 10rpx (文字间距)
|
|
|
|
## 圆角规范
|
|
|
|
- **大**: 12rpx (卡片、按钮)
|
|
- **中**: 8rpx (小卡片、图片)
|
|
- **小**: 4rpx (标签、徽章)
|
|
- **圆形**: 50% (头像、通知徽章)
|
|
|
|
## 阴影规范
|
|
|
|
- **轻**: `0 2rpx 8rpx rgba(0, 0, 0, 0.08)`
|
|
- **中**: `0 4rpx 12rpx rgba(0, 0, 0, 0.12)`
|
|
- **重**: `0 8rpx 24rpx rgba(0, 0, 0, 0.15)`
|
|
|
|
## 图片规范
|
|
|
|
### 尺寸
|
|
- **轮播图**: 750x300px
|
|
- **医生头像**: 100x100rpx
|
|
- **新闻图片**: 140x100rpx
|
|
- **科室图标**: 48rpx (emoji)
|
|
|
|
### 处理
|
|
- 使用 `mode="aspectFill"` 保持宽高比
|
|
- 圆角处理: 8-12rpx
|
|
- 加载占位符: 灰色背景
|
|
|
|
## 无障碍设计
|
|
|
|
- 足够的色彩对比度
|
|
- 清晰的文字标签
|
|
- 合理的点击区域 (最小 44x44rpx)
|
|
- 支持屏幕阅读器
|
|
|
|
## 性能优化
|
|
|
|
- 图片懒加载
|
|
- 列表虚拟滚动
|
|
- 减少重排和重绘
|
|
- 使用 CSS 动画而非 JS 动画
|
|
|
|
## 扩展建议
|
|
|
|
### 可以添加的功能
|
|
1. **个性化推荐** - 根据用户历史推荐医生
|
|
2. **预约提醒** - 显示即将到来的预约
|
|
3. **健康数据** - 显示用户的健康指标
|
|
4. **在线客服** - 右下角浮窗
|
|
5. **活动促销** - 轮播中添加促销信息
|
|
|
|
### 可以优化的方面
|
|
1. **深色模式** - 支持系统深色模式
|
|
2. **多语言** - 支持多种语言
|
|
3. **主题切换** - 允许用户自定义主题色
|
|
4. **动画增强** - 添加更多微交互
|
|
5. **数据统计** - 追踪用户行为
|
|
|
|
## 总结
|
|
|
|
这个设计方案结合了中医文化特色和现代医疗应用的需求，通过合理的色彩、布局和交互设计，为用户提供专业、友好的医疗服务体验。
|