291 lines
6.8 KiB
Markdown
291 lines
6.8 KiB
Markdown
# 现代中医医院首页设计指南
|
|
|
|
## 设计理念
|
|
|
|
采用现代医疗应用的设计风格，结合中医特色，为60岁左右的用户提供专业、易用的医疗服务体验。
|
|
|
|
## 页面结构
|
|
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ 成都双流蜀养堂互联网医院 ⋯ ◯ │ <- 顶部信息栏
|
|
│ 📍 郑州市金水区 │
|
|
└─────────────────────────────────┘
|
|
|
|
┌─────────────────────────────────┐
|
|
│ 🔍 输入科室、疾病、医生搜索 搜索 │ <- 搜索栏
|
|
└─────────────────────────────────┘
|
|
|
|
┌─────────────────────────────────┐
|
|
│ [轮播图] │ <- 轮播图
|
|
└─────────────────────────────────┘
|
|
|
|
┌─────────────────────────────────┐
|
|
│ 问诊服务 │
|
|
├─────────────────────────────────┤
|
|
│ 专家问诊 │ 健康咨询 │ 快速问诊 │ <- 服务卡片
|
|
│ 去找专家 │ 前往咨询 │ 前往问诊 │
|
|
└─────────────────────────────────┘
|
|
|
|
┌─────────────────────────────────┐
|
|
│ 特色专科医师 更多 > │
|
|
├─────────────────────────────────┤
|
|
│ [头像] [头像] [头像] [头像] │ <- 医生横向滚动
|
|
│ 赵建欣 雷惧昱 稳骨 ... │
|
|
│ 主任医师 主治医师 主治医师 │
|
|
│ 内科 内科 内科 │
|
|
└─────────────────────────────────┘
|
|
|
|
┌─────────────────────────────────┐
|
|
│ 🏠 首页 📢 消息 👤 我的 │ <- 底部导航
|
|
└─────────────────────────────────┘
|
|
```
|
|
|
|
## 色彩方案
|
|
|
|
### 主色系
|
|
- **棕色**: #8B6F47 - 中医传统色
|
|
- **绿色**: #4CAF50 - 健康、生命力
|
|
- **背景**: #f5f5f5 - 页面背景
|
|
- **卡片**: #fff - 内容卡片
|
|
|
|
### 服务卡片色
|
|
- **专家问诊**: 橙色系 (#FFF3E0 - #FFE0B2)
|
|
- **健康咨询**: 绿色系 (#E8F5E9 - #C8E6C9)
|
|
- **快速问诊**: 紫色系 (#F3E5F5 - #E1BEE7)
|
|
|
|
## 组件设计
|
|
|
|
### 1. 顶部信息栏
|
|
```scss
|
|
.top-bar {
|
|
background: linear-gradient(135deg, #8B6F47 0%, #A0826D 100%);
|
|
padding: 16rpx 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
```
|
|
- 棕色渐变背景
|
|
- 显示医院名称和位置
|
|
- 右侧显示菜单和设置按钮
|
|
- 高度: 60rpx
|
|
|
|
### 2. 搜索栏
|
|
```scss
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #f5f5f5;
|
|
border-radius: 24rpx;
|
|
padding: 12rpx 16rpx;
|
|
}
|
|
|
|
.search-btn {
|
|
background: #4CAF50;
|
|
color: #fff;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
```
|
|
- 灰色背景，圆角搜索框
|
|
- 绿色搜索按钮
|
|
- 支持输入科室、疾病、医生
|
|
|
|
### 3. 轮播图
|
|
```scss
|
|
.banner {
|
|
height: 200rpx;
|
|
}
|
|
```
|
|
- 高度: 200rpx
|
|
- 自动轮播，5秒切换
|
|
- 圆角: 12rpx
|
|
- 阴影: 0 2rpx 8rpx
|
|
|
|
### 4. 问诊服务卡片
|
|
```scss
|
|
.service-card {
|
|
border-radius: 12rpx;
|
|
padding: 16rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.service-1 { background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%); }
|
|
.service-2 { background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%); }
|
|
.service-3 { background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%); }
|
|
```
|
|
- 3 列网格布局
|
|
- 渐变背景
|
|
- 标题 + 描述 + 按钮
|
|
- 按下有缩放效果
|
|
|
|
### 5. 医生卡片
|
|
```scss
|
|
.doctor-card {
|
|
flex-shrink: 0;
|
|
width: 120rpx;
|
|
background: #f9f9f9;
|
|
border-radius: 12rpx;
|
|
padding: 12rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.doctor-avatar {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
```
|
|
- 横向滚动布局
|
|
- 宽度: 120rpx
|
|
- 头像: 80x80rpx
|
|
- 显示名字、职位、科室
|
|
|
|
### 6. 底部导航
|
|
```scss
|
|
.bottom-nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 12rpx 0 16rpx 0;
|
|
}
|
|
```
|
|
- 固定底部
|
|
- 3 个导航项
|
|
- 图标 + 文字
|
|
- 高度: 80rpx
|
|
|
|
## 字体规范
|
|
|
|
### 字体大小
|
|
- **医院名称**: 22rpx
|
|
- **服务标题**: 24rpx
|
|
- **医生名字**: 22rpx
|
|
- **职位/科室**: 18rpx
|
|
- **搜索框**: 24rpx
|
|
- **按钮**: 18-22rpx
|
|
|
|
### 字体权重
|
|
- **标题**: 加粗 (600-700)
|
|
- **重要信息**: 加粗 (600)
|
|
- **正常文字**: 正常 (400)
|
|
|
|
## 间距规范
|
|
|
|
- **页面外边距**: 20rpx
|
|
- **卡片内边距**: 12-16rpx
|
|
- **元素间距**: 8-12rpx
|
|
- **底部空间**: 100rpx (留给导航)
|
|
|
|
## 圆角规范
|
|
|
|
- **卡片**: 12rpx
|
|
- **头像**: 8rpx
|
|
- **按钮**: 16-24rpx
|
|
- **搜索框**: 24rpx
|
|
|
|
## 交互设计
|
|
|
|
### 轮播图
|
|
- 自动轮播，5秒切换
|
|
- 支持手动滑动
|
|
- 底部指示器
|
|
|
|
### 服务卡片
|
|
- 点击进入对应服务
|
|
- 按下有缩放效果 (scale 0.95)
|
|
- 300ms 过渡动画
|
|
|
|
### 医生卡片
|
|
- 横向滚动
|
|
- 点击进入医生详情
|
|
- 按下有阴影效果
|
|
|
|
### 导航切换
|
|
- 点击切换导航
|
|
- 颜色和大小变化
|
|
- 300ms 过渡动画
|
|
|
|
## 响应式设计
|
|
|
|
### 使用 rpx 单位
|
|
- 自动适配不同屏幕
|
|
- 1rpx = 0.5px (375px 宽度)
|
|
|
|
### 布局适配
|
|
- 服务卡片 3 列
|
|
- 医生卡片横向滚动
|
|
- 自动适应屏幕宽度
|
|
|
|
## 性能优化
|
|
|
|
- 使用 CSS 动画
|
|
- 图片自动缩放
|
|
- 减少重排和重绘
|
|
- 支持图片懒加载
|
|
|
|
## 无障碍设计
|
|
|
|
- 足够的色彩对比度
|
|
- 清晰的文字标签
|
|
- 合理的点击区域 (最小 44x44rpx)
|
|
- 支持屏幕阅读器
|
|
|
|
## 数据流
|
|
|
|
```
|
|
页面加载
|
|
↓
|
|
调用 fetchDoctors()
|
|
↓
|
|
获取医生列表
|
|
↓
|
|
处理数据
|
|
↓
|
|
渲染医生卡片
|
|
```
|
|
|
|
## API 集成
|
|
|
|
### 获取医生列表
|
|
```javascript
|
|
const response = await proxy.apiUrl({
|
|
url: '/api/doctor/lists',
|
|
method: 'GET',
|
|
data: {
|
|
page_no: 1,
|
|
page_size: 10
|
|
}
|
|
})
|
|
```
|
|
|
|
## 点击事件
|
|
|
|
### 医生卡片点击
|
|
```javascript
|
|
selectDoctor(doctor) {
|
|
uni.navigateTo({
|
|
url: `/pages/order/index?doctorId=${doctor.id}&doctorName=${doctor.name}`
|
|
})
|
|
}
|
|
```
|
|
|
|
## 总结
|
|
|
|
这个设计方案特点：
|
|
- ✅ 现代医疗应用风格
|
|
- ✅ 中医特色色彩搭配
|
|
- ✅ 清晰的信息层级
|
|
- ✅ 多种问诊服务选择
|
|
- ✅ 医生横向滚动展示
|
|
- ✅ 易用的导航设计
|
|
- ✅ 适合60岁左右的用户
|
|
|
|
整个页面设计专业、现代、易用，为用户提供了多种医疗服务选择和便捷的医生查询体验。
|