# 中医医院小程序首页 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. **数据统计** - 追踪用户行为 ## 总结 这个设计方案结合了中医文化特色和现代医疗应用的需求，通过合理的色彩、布局和交互设计，为用户提供专业、友好的医疗服务体验。