用科技温暖每一个生命——心智障碍者就业支持工具开发实践

SOLO挑战赛专区
1

用科技温暖每一个生命——心智障碍者就业支持工具开发实践

摘要

本项目旨在为心智障碍群体（孤独症谱系障碍、智力发育迟缓、唐氏综合征、脑瘫伴随智力障碍等）开发一套可落地的工作现场支持工具系统。项目覆盖工作流程拆解、沟通辅助、环境适应三大核心需求，按岗位分类设计，兼顾不同能力层级，并提供低成本纸质方案与数字化智能方案两套选择。

通过本次开发实践，我们成功构建了包含11个功能页面的完整Web应用系统，并实现了基于Web Speech API的智能语音交互助手，能够通过语音对话实现任务提醒、状态管理和个性化指导。项目成果可直接应用于超市理货员、餐饮服务、数据标注员等适合心智障碍者的就业岗位。

一、背景

1.1 社会痛点

心智障碍群体成人就业率不足10%，核心挑战集中在三个方面：

挑战类型 具体表现 影响
表达困难 难以清晰表达需求、情绪、身体状况 影响与同事、上级的沟通协作
理解困难 对抽象指令、多步骤流程理解能力有限 难以独立完成工作任务
执行困难 多步任务记忆与执行易中断 工作效率低、易出错

1.2 设计理念

基于国内外实践验证，我们确立了以下核心设计原则：

  • 视觉提示替代文字：心智障碍者对图像的识别和记忆优于文字
  • "灯塔式"渐进引导：用颜色/图标清晰标注进度状态，降低认知负荷
  • 步骤可视化拆分：将复杂任务分解为3-5个可独立完成的子步骤
  • 多感官反馈：语音+触觉+视觉三重确认，强化任务记忆

1.3 能力分级支持

等级 特征描述 支持强度
轻度 基本语言沟通，可执行5步以内任务，需偶尔提醒 低度支持
中度 沟通需辅助，可执行3步任务，需定期确认 中度支持
重度 非语言或有限语言，需全程引导，支持刻板行为优势 高度支持

二、开发过程

2.1 项目规划阶段

首先对需求文档《心智障碍就业支持工具方案.md》进行深入分析，明确了三大核心功能模块：

  1. 工作流程拆解工具：视觉任务卡系统、步骤进度追踪器、时间可视化工具
  2. 沟通辅助工具：情绪与需求表达卡、语音转文字辅助设备
  3. 环境适应方案：岗位分类设计、能力层级适配系统

2.2 技术选型

  • 前端框架：原生HTML + Tailwind CSS（快速构建响应式界面）
  • 交互实现：JavaScript + Web Speech API（语音识别与合成）
  • 部署方案：Python HTTP Server（轻量级本地服务）

2.3 开发迭代

第一阶段：基础页面开发

开发了核心功能页面：

  • index.html - 项目首页与导航

image
image1866×839 180 KB

  • workflow-template.html - 视觉任务卡模板

image
image1900×731 92.1 KB

  • communication-tool.html - 沟通辅助工具

image
image1891×816 61.8 KB

  • job-classification.html - 岗位分类方案

image
image1920×829 78.4 KB

  • low-cost-solution.html - 低成本方案

image
image1899×819 65.6 KB

  • digital-solution.html - 数字化方案

image
image1901×770 57.3 KB

第二阶段：功能完善

补充了配套支持页面：

  • ability-level-adaptation-system.html - 能力层级适配系统
  • case-studies.html - 成功案例分享
  • integration.html - 整合方案
  • training-support.html - 培训支持
  • workflow-examples.html - 工作流程示例

第三阶段：智能化升级

开发了核心亮点功能——智能工作助手：

image
image1920×755 66.7 KB

  • ai-assistant.html - 基于语音交互的智能任务管理助手

实现了以下智能功能：

  • 语音输入识别与文字转语音播报
  • 任务状态实时联动更新
  • AI智能判断当前工作节点
  • 个性化指导与进度分析

image
image1855×719 52.1 KB

第四阶段：问题修复与优化

在开发过程中解决了多个实际问题：

  • 修复了白色字体配白色背景的显示问题
  • 完善了导航栏和返回按钮
  • 补充了缺失的图标
  • 优化了语音对话与任务状态的联动逻辑
  • 添加了"切换任务"、"重新开始"等语音指令

三、成果展示

3.1 项目结构

/workspace/
├── index.html                    # 项目首页
├── workflow-template.html        # 视觉任务卡模板
├── workflow-examples.html        # 工作流程示例
├── communication-tool.html       # 沟通辅助工具
├── job-classification.html       # 岗位分类方案
├── low-cost-solution.html        # 低成本方案
├── digital-solution.html         # 数字化方案
├── ai-assistant.html             # 智能工作助手（核心亮点）
├── ability-level-adaptation-system.html  # 能力层级适配
├── case-studies.html             # 成功案例
├── integration.html              # 整合方案
├── training-support.html         # 培训支持
└── MindDisabilitySupportApp/     # React Native移动端应用

3.2 核心功能展示

功能一：视觉任务卡系统

采用"三步灯塔式"引导设计，使用红-黄-绿颜色编码表示"待办-进行-完成"状态：

┌─────────────────────────────────────┐
│  📋 任务卡 #01：整理货架牛奶区      │
├─────────────────────────────────────┤
│  ○ 待办   ● 进行中   ○ 已完成       │
│  ┌───┐   ┌───┐   ┌───┐             │
│  │🔴│   │🟡│   │🟢│             │
│  └───┘   └───┘   └───┘             │
├─────────────────────────────────────┤
│  📝 步骤：                          │
│  1️⃣ 推车到冷柜区                    │
│  2️⃣ 拿取左→右的牛奶盒              │
│  3️⃣ 按日期摆放（早→晚）            │
│  4️⃣ 确认"整齐"后放回推车           │
└─────────────────────────────────────┘

功能二：沟通辅助工具

设计了情绪表达卡和工作场景需求卡：

情绪表达卡 工作场景需求卡
:anxious_face_with_sweat: 我不舒服 :wrench: 工具问题
:persevering_face: 我需要帮助 :loudspeaker: 通知我
:blush: 我准备好了 :person_walking: 带我去
:sleeping_face: 我累了 :sos_button: 紧急求助

功能三：岗位分类方案

针对三个核心岗位设计了完整的支持方案：

岗位 核心任务 优势契合 工具配置
超市理货员 货架整理、商品归位、库存盘点 刻板行为→喜欢重复性整理 任务卡+进度追踪+Time Timer
餐饮服务 食材备料、碗碟清洗、简单摆盘 喜欢重复性动作、注重清洁 步骤卡+颜色标记+定时提醒
数据标注员 图像框选、分类标注、内容校验 注重细节、遵循规则、耐心重复 标注教程+语音引导+错题回放

功能四：智能工作助手（核心亮点）

基于Web Speech API开发的语音交互助手，实现了：

语音指令支持：

指令 功能
“我完成了” 完成当前任务，进度+25%
“完成当前” 同上
“完成” 完成所有任务
“切换任务” 将当前任务重置为未开始
“重新开始” 重置所有任务，从头开始
“任务状态” 语音播报当前进度
“需要帮助” 获取当前步骤指导

智能功能：

  • 实时进度环显示
  • 步骤卡片状态联动
  • AI效率分析与建议
  • 语音播报回复

3.3 成本可行性

方案 成本 适用场景
低成本纸质版 100-200元/人 小规模机构、快速实施
数字化方案 1000-25000元/人 中大规模、数据追踪需求

四、经验总结

4.1 技术经验

1. 无障碍设计原则

  • 高对比度：确保文字与背景对比度≥7:1
  • 大字体：界面字号24pt以上
  • 颜色编码：使用红黄绿三色系统，直观易懂
  • 多感官反馈：语音+视觉双重确认

2. 语音交互实现

Web Speech API的使用要点：

// 语音合成
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.8;  // 语速稍慢，便于理解
speechSynthesis.speak(utterance);

// 语音识别（需用户授权）
const recognition = new webkitSpeechRecognition();
recognition.lang = 'zh-CN';
recognition.start();

3. 状态管理

使用简单的JavaScript对象管理任务状态：

const tasks = [
    { id: 1, name: '整理货架', status: 'completed', time: '10:30' },
    { id: 2, name: '商品归位', status: 'active', time: '10:45' },
    { id: 3, name: '库存盘点', status: 'pending', time: '' },
    { id: 4, name: '整理记录', status: 'pending', time: '' }
];

4.2 产品经验

1. 用户中心设计

  • 始终从心智障碍者的视角出发
  • 避免复杂的操作流程
  • 提供即时、明确的反馈
  • 尊重用户的自尊心

2. 渐进式支持

  • 目标是逐步减少辅助，而非永久依赖
  • 根据能力进步动态调整工具配置
  • 建立自然支持网络，促进社会融合

3. 多方协作

  • 就业辅导员是关键角色
  • 自然支持者（普通同事）的培训很重要
  • 家庭参与能延续技能训练效果

4.3 遇到的挑战与解决方案

挑战 解决方案
白色字体配白色背景显示不清 全面检查并修改为深色字体配浅色背景
语音对话与任务状态不同步 重构状态管理逻辑，实现实时联动
导航栏缺失导致无法返回 为所有页面添加统一导航栏
图标缺失影响用户体验 补充Font Awesome图标，确保兼容性
"完成"与"完成当前"混淆 区分两个指令，一个完成全部，一个完成当前

4.4 未来展望

  1. 移动端应用：开发React Native跨平台应用
  2. AI增强：接入大语言模型，提供更智能的对话指导
  3. 数据分析：建立工作表现数据追踪系统
  4. 个性化配置：支持根据个体差异定制界面和流程
  5. 多语言支持：扩展到更多语言环境

五、结语

每一个生命都值得被尊重，每一份劳动都应该被认可。心智障碍者虽然面临着常人难以想象的挑战，但他们同样渴望通过工作实现自我价值、融入社会。

本项目通过科技手段，将复杂的工作流程转化为简单易懂的视觉任务卡，将难以表达的需求转化为直观的沟通卡片，将抽象的时间概念转化为可视化的进度指示。更重要的是，我们开发了智能语音助手，让心智障碍者可以通过最自然的语言方式与系统交互，降低了技术使用门槛。

我们相信，科技的力量不仅在于创造效率，更在于创造包容。希望这套工具能够帮助更多心智障碍者找到属于自己的工作岗位，实现"就业一人，幸福一家，稳定一方"的美好愿景。

项目地址：本地运行于 http://localhost:8888

代码地址：为科技向善

技术栈：HTML + Tailwind CSS + JavaScript + Web Speech API

开发时间：2026年4月

参考资料：

  1. 《心智障碍者融合就业用人单位操作指引 T ZGZX 0002—2024》
  2. 北京如常集团AI就业工坊"三步灯塔式"引导实践
  3. 兰州市心连心工坊UI界面适配实践
  4. NICE Guidance NG93 及英国Buckland Review of Autism Employment (2024)

用科技温暖每一个生命，让包容成为社会的底色。