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. 顶部标题栏

.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. 轮播图

.banner {
  height: 300rpx;
}

• 高度: 300rpx
• 自动轮播，5秒切换
• 圆角: 12rpx
• 阴影: 0 2rpx 8rpx

3. 医生卡片

.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 集成

获取医生列表

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岁左右的用户

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