zyt/TUICallKit-Vue3/ELDERLY_FRIENDLY_DESIGN.md

# 老年人友好的首页设计指南

## 设计理念

针对60岁左右的用户群体，设计简洁、清晰、易操作的界面。

### 核心原则
1. **字体大** - 所有文字都要足够大，便于阅读
2. **操作简单** - 减少复杂操作，一键直达
3. **色彩清晰** - 高对比度，清晰易辨
4. **布局简洁** - 信息不过载，重点突出
5. **反馈明确** - 每个操作都有清晰的反馈

## 页面结构

```
┌─────────────────────────────────┐
│ 养生堂              ⋯  ◯        │  <- 顶部标题栏
└─────────────────────────────────┘

┌─────────────────────────────────┐
│                                 │
│  [轮播图]                       │
│                                 │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│ [头像] 赵建欣                   │
│        咨询 8次                 │
│                                 │
│ 主任医师  中医内科              │
│                                 │
│ ⭐ 名医中医                     │
│                                 │
│ 👍 好评率 95%  ❤️ 服务人数 256人│
│                                 │
│ 🌐 互联网医院执业许可           │
│ 📋 医师执业许可证               │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│ [头像] 李医生                   │
│ ...                             │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│ 🏠 首页      👤 我的            │  <- 底部导航
└─────────────────────────────────┘
```

## 字体规范

### 字体大小
- **顶部标题**: 36rpx (大标题，易识别)
- **医生名字**: 32rpx (重要信息)
- **职位/科室**: 24rpx (次要信息)
- **其他文字**: 22-24rpx (保证可读性)
- **底部导航**: 24rpx (便于点击)

### 字体权重
- **标题**: 加粗 (700)
- **重要信息**: 加粗 (600)
- **正常文字**: 正常 (400)

## 色彩方案

### 主色系
- **绿色**: #4CAF50 - 健康、生命力
- **浅绿**: #E8F5E9 - 背景色
- **黄色**: #FFF9C4 - 强调色
- **灰色**: #f5f5f5 - 页面背景

### 文字色
- **主文字**: #333 - 深灰色，高对比度
- **次文字**: #666 - 中灰色
- **辅助**: #999 - 浅灰色

## 组件设计

### 1. 顶部标题栏
```scss
.header {
  padding: 24rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
}

.icon-btn {
  width: 50rpx;
  height: 50rpx;
  font-size: 32rpx;
  border-radius: 50%;
}
```
- 标题: 36rpx，加粗
- 按钮: 50x50rpx，便于点击
- 高对比度

### 2. 轮播图
```scss
.banner {
  height: 300rpx;
}
```
- 高度: 300rpx
- 自动轮播，5秒切换
- 圆角: 12rpx
- 阴影: 0 2rpx 8rpx

### 3. 医生卡片
```scss
.doctor-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
```
- 白色背景，清晰易读
- 内边距: 24rpx (充足的空间)
- 圆角: 12rpx
- 阴影: 0 2rpx 8rpx

### 4. 医生头部
```
[头像]  医生名字 (32rpx)
        咨询 8次 (24rpx, 绿色)
```
- 头像: 100x100rpx
- 名字: 32rpx，加粗
- 描述: 24rpx，绿色

### 5. 医生标签
```
主任医师  中医内科
```
- 绿色背景，绿色文字
- 字体: 24rpx
- 圆角: 20rpx
- 高对比度

### 6. 专家标签
```
⭐ 名医中医
```
- 黄色背景
- 字体: 22rpx
- 圆角: 16rpx

### 7. 评分和服务
```
┌──────────────┬──────────────┐
│ 👍 好评率    │ ❤️ 服务人数  │
│    95%       │    256人     │
└──────────────┴──────────────┘
```
- 两列布局
- 绿色背景
- 字体: 28rpx (数值)，22rpx (标签)
- 图标: 32rpx

### 8. 资质信息
```
🌐 互联网医院执业许可
📋 医师执业许可证
```
- 列表展示
- 字体: 22rpx
- 图标: 24rpx

### 9. 底部导航
```
🏠 首页      👤 我的
```
- 固定底部
- 图标: 36-40rpx
- 文字: 24rpx
- 高对比度

## 交互设计

### 点击区域
- **最小点击区域**: 44x44rpx
- **医生卡片**: 整个卡片可点击
- **底部导航**: 每个导航项 >= 60rpx

### 反馈效果
- **卡片按下**: 阴影增强
- **按钮按下**: 背景变深
- **导航切换**: 颜色和大小变化

### 动画
- **过渡时间**: 300ms
- **轮播**: 5秒自动切换
- **缓动函数**: ease

## 易用性设计

### 1. 大字体
- 所有文字 >= 22rpx
- 标题 >= 32rpx
- 便于老年人阅读

### 2. 高对比度
- 文字和背景对比度 >= 4.5:1
- 清晰易辨

### 3. 简单操作
- 一键咨询
- 直接进入医生详情
- 无复杂交互

### 4. 清晰反馈
- 每个操作都有视觉反馈
- 按下时有阴影变化
- 导航切换有颜色变化

### 5. 充足空间
- 卡片内边距: 24rpx
- 元素间距: 16-20rpx
- 不拥挤

## 响应式设计

### 使用 rpx 单位
- 自动适配不同屏幕
- 1rpx = 0.5px (375px 宽度)

### 布局适配
- 医生卡片宽度 100%
- 自动适应屏幕宽度
- 文字自动换行

## 性能优化

- 使用 CSS 动画
- 图片自动缩放
- 减少重排和重绘

## 无障碍设计

- 足够的色彩对比度
- 清晰的文字标签
- 合理的点击区域
- 支持屏幕阅读器

## 数据流

```
页面加载
  ↓
调用 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岁左右的用户

整个页面设计充分考虑了老年人的使用习惯和需求，提供了友好、易用的医疗服务体验。