6.8 KiB
6.8 KiB
现代中医医院首页设计指南
设计理念
采用现代医疗应用的设计风格，结合中医特色，为60岁左右的用户提供专业、易用的医疗服务体验。
页面结构
┌─────────────────────────────────┐
│ 成都双流蜀养堂互联网医院 ⋯ ◯ │ <- 顶部信息栏
│ 📍 郑州市金水区 │
└─────────────────────────────────┘
┌─────────────────────────────────┐
│ 🔍 输入科室、疾病、医生搜索 搜索 │ <- 搜索栏
└─────────────────────────────────┘
┌─────────────────────────────────┐
│ [轮播图] │ <- 轮播图
└─────────────────────────────────┘
┌─────────────────────────────────┐
│ 问诊服务 │
├─────────────────────────────────┤
│ 专家问诊 │ 健康咨询 │ 快速问诊 │ <- 服务卡片
│ 去找专家 │ 前往咨询 │ 前往问诊 │
└─────────────────────────────────┘
┌─────────────────────────────────┐
│ 特色专科医师 更多 > │
├─────────────────────────────────┤
│ [头像] [头像] [头像] [头像] │ <- 医生横向滚动
│ 赵建欣 雷惧昱 稳骨 ... │
│ 主任医师 主治医师 主治医师 │
│ 内科 内科 内科 │
└─────────────────────────────────┘
┌─────────────────────────────────┐
│ 🏠 首页 📢 消息 👤 我的 │ <- 底部导航
└─────────────────────────────────┘
色彩方案
主色系
- 棕色: #8B6F47 - 中医传统色
- 绿色: #4CAF50 - 健康、生命力
- 背景: #f5f5f5 - 页面背景
- 卡片: #fff - 内容卡片
服务卡片色
- 专家问诊: 橙色系 (#FFF3E0 - #FFE0B2)
- 健康咨询: 绿色系 (#E8F5E9 - #C8E6C9)
- 快速问诊: 紫色系 (#F3E5F5 - #E1BEE7)
组件设计
1. 顶部信息栏
.top-bar {
background: linear-gradient(135deg, #8B6F47 0%, #A0826D 100%);
padding: 16rpx 20rpx;
display: flex;
justify-content: space-between;
}
- 棕色渐变背景
- 显示医院名称和位置
- 右侧显示菜单和设置按钮
- 高度: 60rpx
2. 搜索栏
.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. 轮播图
.banner {
height: 200rpx;
}
- 高度: 200rpx
- 自动轮播，5秒切换
- 圆角: 12rpx
- 阴影: 0 2rpx 8rpx
4. 问诊服务卡片
.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. 医生卡片
.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. 底部导航
.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 集成
获取医生列表
const response = await proxy.apiUrl({
url: '/api/doctor/lists',
method: 'GET',
data: {
page_no: 1,
page_size: 10
}
})
点击事件
医生卡片点击
selectDoctor(doctor) {
uni.navigateTo({
url: `/pages/order/index?doctorId=${doctor.id}&doctorName=${doctor.name}`
})
}
总结
这个设计方案特点：
- ✅ 现代医疗应用风格
- ✅ 中医特色色彩搭配
- ✅ 清晰的信息层级
- ✅ 多种问诊服务选择
- ✅ 医生横向滚动展示
- ✅ 易用的导航设计
- ✅ 适合60岁左右的用户
整个页面设计专业、现代、易用，为用户提供了多种医疗服务选择和便捷的医生查询体验。