万物说明书
真实交互演示
有语音播报，建议开启声音
01 产品概述
万物说明书是一款面向老年人的AI物体识别助手产品。用户只需打开手机摄像头对准身边的家电或日用品，App就会通过AI技术自动识别物体，并以语音播报的方式告诉您这件物品是什么、怎么用、注意事项是什么。全程无需打字、无需翻说明书，打开就能用，听得就能懂。
产品理念
技术应该服务于每一个人，而不是淘汰那些学得慢的人。万物说明书让科技的便利，真正抵达每一位长辈的手中。
三大核心价值
看得见
大字体、高对比度、简洁界面
每一处细节都为长辈的视力着想
听得懂
全程语音播报、语音输入优先
不用看屏幕也能完成全部操作
用得来
点击即可、无需学习、零门槛
打开App就能用，没有任何学习成本
02 用户痛点
在数字化快速发展的今天，数以亿计的老年人正面临严重的"技术使用困境"。复杂的操作流程、细小的按钮文字、多层嵌套的菜单，让许多长辈对现代家电和智能设备望而却步。
2.97亿
中国65岁以上人口
占总人口21.1%
占总人口21.1%
2.96亿
中国60岁及以上
老年网民规模
老年网民规模
68%
老年人不会使用
智能手机基础功能
智能手机基础功能
54%
老年人因看不懂
说明书放弃使用家电
说明书放弃使用家电
核心洞察
老年人不是学不会，而是没有适合他们的学习方式。万物说明书用"看 + 听"的自然方式，让使用家电变得像问邻居一样简单。
03 产品功能架构
万物说明书以摄像头取景为入口，AI物体识别为核心引擎，语音播报为输出通道，构建了一套完整的银发族智能辅助系统。
graph TD
A["摄像头取景"] --> B["AI物体识别"]
B -->|识别成功| C["语音播报说明"]
B -->|识别失败| A
C --> D["步骤操作引导"]
D --> E{"是否需要追问?"}
E -->|是| F["语音问答"]
F --> C
E -->|否| A
A -->|"侧边通话按钮"| G["语音通话连接"]
G --> H["AI语音问答"]
H --> I{"继续提问?"}
I -->|是| H
I -->|否| A
style A fill:#DBEAFE,stroke:#1769E0,stroke-width:2px
style B fill:#E0E7FF,stroke:#4338CA,stroke-width:2px
style C fill:#D1FAE5,stroke:#0D9E6E,stroke-width:2px
style D fill:#FEF3C7,stroke:#F59E0B,stroke-width:2px
style F fill:#D1FAE5,stroke:#0D9E6E,stroke-width:2px
style G fill:#DBEAFE,stroke:#1769E0,stroke-width:2px
style H fill:#E0E7FF,stroke:#4338CA,stroke-width:2px
图：万物说明书核心功能模块流程图
辅助功能分支
个性化设置
用户可自定义助手昵称（如"小万"、"小明"），系统会将昵称融入语音播报和问答交互中，让产品更具亲和力。同时支持语音速度、音量调节等适老化配置。
04 核心交互流程
万物说明书的核心体验仅需三步，从打开App到获取物品说明，整个过程不超过10秒钟。
1
打开App，摄像头自动对准
启动即进入取景模式，屏幕显示实时摄像头画面，底部状态栏提示"点点屏幕识别"
2
AI识别物体，语音播报
点击屏幕拍照后，AI自动识别物体并开始语音播报名称和用途，识别进度实时可见
3
屏幕展示详情，支持追问
结果卡片展示物品详情和操作步骤，用户可语音追问更多问题，获得更深入的说明
graph LR
S1["Step 1
打开摄像头"] -->|"点击屏幕"| S2["Step 2
AI识别 + 语音播报"] S2 -->|"识别完成"| S3["Step 3
展示详情 + 追问"] S3 -->|"追问"| S2 S3 -->|"完成"| S1 style S1 fill:#DBEAFE,stroke:#1769E0,stroke-width:2px style S2 fill:#D1FAE5,stroke:#0D9E6E,stroke-width:2px style S3 fill:#FEF3C7,stroke:#F59E0B,stroke-width:2px
打开摄像头"] -->|"点击屏幕"| S2["Step 2
AI识别 + 语音播报"] S2 -->|"识别完成"| S3["Step 3
展示详情 + 追问"] S3 -->|"追问"| S2 S3 -->|"完成"| S1 style S1 fill:#DBEAFE,stroke:#1769E0,stroke-width:2px style S2 fill:#D1FAE5,stroke:#0D9E6E,stroke-width:2px style S3 fill:#FEF3C7,stroke:#F59E0B,stroke-width:2px
图：三步核心交互流程
05 状态机设计
万物说明书的交互逻辑由一个完整的状态机驱动，确保每个用户操作都能得到正确的系统响应。以下是完整的App状态转换图：
stateDiagram-v2
[*] --> idle: 打开App
state "待机状态" as idle
state "识别中" as recognizing
state "讲解中" as explaining
state "等待操作" as waiting
state "通话中" as connected
state "回答中" as answering
idle --> recognizing: 点击画面
recognizing --> explaining: 识别成功
recognizing --> idle: 识别失败
explaining --> waiting: 讲解完毕
waiting --> explaining: 用户追问
waiting --> idle: 超时无操作(30s)
idle --> connected: 用户点击通话按钮
connected --> answering: 用户提问
answering --> connected: 回答完毕
connected --> idle: 用户挂断
waiting --> idle: 用户挂断
explaining --> idle: 用户挂断
recognizing --> idle: 用户挂断
connected --> idle: 通话结束
answering --> idle: 通话结束
note right of idle
默认状态：摄像头取景
显示提示文案和底部导航
end note
note right of recognizing
显示加载动画
AI进行物体识别
end note
note right of explaining
语音播报物品说明
同时显示文字详情卡片
end note
note right of waiting
等待用户追问或新操作
30秒无操作自动返回待机
end note
note right of connected
语音通话已建立
可自由语音对话
end note
note right of answering
AI处理语音问题
生成回答并播报
end note
图：万物说明书完整App状态机
状态说明
idle - 待机状态
默认状态，摄像头取景中。用户可点击画面触发识别，或点击通话按钮进入语音对话。
recognizing - 识别中
显示加载动画和进度提示，AI进行物体识别。识别成功进入讲解，失败回到待机。
explaining - 讲解中
语音播报物品说明，同时展示文字详情卡片。播报完毕进入等待操作状态。
waiting - 等待操作
等待用户追问或新操作。30秒无操作自动返回待机状态，用户也可主动挂断。
connected - 通话中
语音通话已建立，用户可自由语音提问，AI实时回答。
answering - 回答中
AI处理用户语音问题，生成回答并通过语音播报，回答完毕回到通话状态。
06 适老化设计特色
万物说明书从视觉、听觉、交互三个维度出发，为老年人打造了一套完整的适老化设计方案，确保每一位用户都能获得舒适、安心的使用体验。
最小字号18px
全页面字号不低于18px，确保老年人无需佩戴老花镜也能清晰阅读
最小点击区域48px
所有可点击元素的触控区域不小于48x48px，降低误触率
语音优先交互
所有信息默认语音播报，状态栏文字同步滚动，双重保障
动画减速20%
所有界面动画速度降低20%，避免快速变化造成视觉不适
自动挂断机制
超时30秒无操作自动返回待机，避免长时间占用资源
助手昵称个性化
支持自定义助手昵称，语音播报中融入昵称，更亲切自然
大按钮高对比
按钮采用大尺寸设计，深色背景配浅色文字，对比度满足WCAG AA标准
桌面端自适应
桌面浏览器自动缩放至手机尺寸，保持与真实设备一致的体验
设计原则
万物说明书遵循"三不"原则：不让用户看小字、不让用户找按钮、不让用户记操作。每一步操作都通过语音引导，让技术真正"隐形"。
07 技术架构
万物说明书采用纯前端技术栈，零后端依赖，轻量高效，即开即用。所有计算和处理均在用户设备本地完成。
纯前端架构
HTML + CSS + JavaScript，无服务器依赖，加载即运行。部署简单，维护成本低。
Web Speech API
浏览器原生语音合成（TTS），将识别结果转为自然流畅的中文语音播报。
Canvas 2D 文本测量
使用Canvas API精确测量文本像素宽度，实现文字自动换行和自适应布局。
localStorage 持久化
用户偏好设置（助手昵称、音量等）存储在本地，关闭App后下次打开自动恢复。
响应式设计
自适应手机、平板、桌面端三种设备尺寸。桌面端自动缩放至手机模拟视图。
状态机驱动
核心交互逻辑由有限状态机（FSM）管理，状态转换清晰可控，易于调试和扩展。
技术选型总览
graph TB
subgraph 前端技术栈
UI["HTML5 + CSS3
界面渲染"] JS["Vanilla JavaScript
交互逻辑"] SM["状态机 FSM
流程控制"] end subgraph 浏览器能力 CAM["getUserMedia
摄像头取景"] TTS["Web Speech API
语音合成"] LStorage["localStorage
本地存储"] Canvas["Canvas 2D
文本测量"] end subgraph 适配能力 RWD["CSS Media Query
响应式布局"] SCALE["桌面端缩放
手机模拟"] end JS --> SM JS --> CAM JS --> TTS JS --> LStorage JS --> Canvas UI --> RWD UI --> SCALE style UI fill:#DBEAFE,stroke:#1769E0,stroke-width:2px style JS fill:#E0E7FF,stroke:#4338CA,stroke-width:2px style SM fill:#FEF3C7,stroke:#F59E0B,stroke-width:2px style CAM fill:#D1FAE5,stroke:#0D9E6E,stroke-width:2px style TTS fill:#D1FAE5,stroke:#0D9E6E,stroke-width:2px style LStorage fill:#D1FAE5,stroke:#0D9E6E,stroke-width:2px style Canvas fill:#D1FAE5,stroke:#0D9E6E,stroke-width:2px style RWD fill:#DBEAFE,stroke:#1769E0,stroke-width:2px style SCALE fill:#DBEAFE,stroke:#1769E0,stroke-width:2px
界面渲染"] JS["Vanilla JavaScript
交互逻辑"] SM["状态机 FSM
流程控制"] end subgraph 浏览器能力 CAM["getUserMedia
摄像头取景"] TTS["Web Speech API
语音合成"] LStorage["localStorage
本地存储"] Canvas["Canvas 2D
文本测量"] end subgraph 适配能力 RWD["CSS Media Query
响应式布局"] SCALE["桌面端缩放
手机模拟"] end JS --> SM JS --> CAM JS --> TTS JS --> LStorage JS --> Canvas UI --> RWD UI --> SCALE style UI fill:#DBEAFE,stroke:#1769E0,stroke-width:2px style JS fill:#E0E7FF,stroke:#4338CA,stroke-width:2px style SM fill:#FEF3C7,stroke:#F59E0B,stroke-width:2px style CAM fill:#D1FAE5,stroke:#0D9E6E,stroke-width:2px style TTS fill:#D1FAE5,stroke:#0D9E6E,stroke-width:2px style LStorage fill:#D1FAE5,stroke:#0D9E6E,stroke-width:2px style Canvas fill:#D1FAE5,stroke:#0D9E6E,stroke-width:2px style RWD fill:#DBEAFE,stroke:#1769E0,stroke-width:2px style SCALE fill:#DBEAFE,stroke:#1769E0,stroke-width:2px
图：万物说明书技术选型总览