8.4 KiB
8.4 KiB
中医医院小程序首页 UI 设计指南
设计理念
核心特点
- 中医文化融合 - 采用中医传统色彩（棕色、金色）
- 专业医疗感 - 简洁现代的布局，突出医疗专业性
- 用户友好 - 清晰的信息层级，便捷的操作流程
- 视觉层次 - 通过色彩、大小、间距创建清晰的视觉层次
色彩方案
主色系
- 主色:
#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 动画
扩展建议
可以添加的功能
- 个性化推荐 - 根据用户历史推荐医生
- 预约提醒 - 显示即将到来的预约
- 健康数据 - 显示用户的健康指标
- 在线客服 - 右下角浮窗
- 活动促销 - 轮播中添加促销信息
可以优化的方面
- 深色模式 - 支持系统深色模式
- 多语言 - 支持多种语言
- 主题切换 - 允许用户自定义主题色
- 动画增强 - 添加更多微交互
- 数据统计 - 追踪用户行为
总结
这个设计方案结合了中医文化特色和现代医疗应用的需求，通过合理的色彩、布局和交互设计，为用户提供专业、友好的医疗服务体验。