【标签】 按所选赛道选择话题标签：社会服务，社会公益
【标题】 社会服务 · 长辈手机远程协助台
【正文】 0. 先和大家打个招呼吧
-
你是谁： 一名关注老年人数字生活的产品设计师，希望用技术帮助长辈跨越数字鸿沟。
-
你是怎么用 TRAE 把 Demo 做出来的： 我告诉 TRAE 我想做一个帮助子女远程指导父母用手机的工具，描述了双端设计（长辈端极简操作、子女端标注回复）、截图求助、共享屏幕、教程库等核心功能。TRAE 帮我完成了从单文件 HTML 到多页面拆分的重构，实现了所有按钮的真实交互，包括屏幕共享、截图标注、录音播放等功能。最让我惊喜的是它能理解长辈端的特殊需求——大字界面、极简操作流程，帮我设计了适合老年人的交互体验。
1. Demo 简介
-
是什么： 一个帮助子女远程指导父母使用智能手机的双端 Web 应用（网站）。
-
面向谁： 60 岁以上智能手机用户及其子女。父母经常遇到操作问题，子女不在身边电话教不会。
-
主要功能：
- 一键求助：长辈端点击「选择求助方式」，可选择「截图求助」或「共享屏幕求助」，操作简单直观
- 截图标注回复：子女端接收求助后，可在截图上绘制箭头标注操作步骤，录制语音指引发回
- 图文教程库：内置大字大图的常用教程（医保电子凭证、视频通话、查公交等），支持子女添加自定义教程
- 屏幕共享：支持长辈端开启屏幕共享，子女实时查看并指导操作
2. Demo 创作思路
-
灵感来源： 我妈每次手机出问题都打电话问我，但她描述不清、我电话也教不会。有一次她为了给我看一个弹窗，拍了十几张照片都没拍清楚。我想如果能让她一键截图发给我，我在图上画箭头发回去，不就简单多了？
-
想解决的问题： 子女不在身边时，父母遇到手机操作问题无法远程指导。电话教学「鸡同鸭讲」，父母描述不清、子女也看不到屏幕，双方都崩溃。
-
为什么做这个方向： 数字鸿沟是老年人普遍面临的问题，而手机操作是最常见的痛点。相比于复杂的远程控制软件，截图+标注+语音的轻量级方案更适合长辈使用——不需要安装复杂软件，操作门槛极低。
3. Demo 体验地址（三选一）
09-长辈手机远程协助台.zip (1.6 MB)
4. TRAE 实践过程
开发完整流程：
- 项目初始化：使用 TRAE 创建项目，设置基础结构和样式
- 页面拆分：从单文件 HTML 拆分为登录页、子女端主页、长辈端主页、教程库四个独立页面
- 交互功能实现：为所有按钮添加真实交互，包括登录切换、求助发送、截图标注、录音播放等
- 屏幕共享功能：实现屏幕共享状态管理，长辈端可自动开启共享，子女端实时预览
- 教程库开发：开发图文教程展示功能，支持学习进度记录
- 子女添加教程：实现子女端自定义添加教程功能，数据持久化到 localStorage
- 求助方式选择：将一键截图求助扩展为可选择截图或共享屏幕两种方式
关键步骤截图：
**关键任务对话 Session ID：**1167011640257764:3068a87f6251de279fac1998f4e35ec6_6a4fad46b8622ab5ae5cb36b.6a4fb852b8622ab5ae5cb5c1.6a4fb852b8622ab5ae5cb5bf:TRAE Work CN.0.1.31.no_sid.no_ppe.T(2026/7/9 23:03:46)
1167011640257764:0fc4282c0c0d30efa3b970a531346d03_6a4fad46b8622ab5ae5cb36b.6a4fb6bdb8622ab5ae5cb562.6a4fb6bcb8622ab5ae5cb560:TRAE Work CN.0.1.31.no_sid.no_ppe.T(2026/7/9 22:57:01)
1167011640257764:0d948b3187388b9ea088c31f8594a692_6a4fad46b8622ab5ae5cb36b.6a4fb350b8622ab5ae5cb4ee.6a4fb34fb8622ab5ae5cb4ec:TRAE Work CN.0.1.31.no_sid.no_ppe.T(2026/7/9 22:42:24)