面向对话式AI界面设计者，提供可收起/展开的提问卡片方案，保…

# 「健康咨询」提问卡片：可收起/展开改造方案

一、交互设计要点

• 收起态：卡片收起为一条摘要条（高度约 40–56px），显示标题 + 草稿预览（截断的前 10–15 字）+「未保存」提示点
• 展开态：完整显示输入框、发送按钮等原有内容
• 默认状态：有草稿时默认展开，避免老人误以为内容丢失
• 动画：高度过渡 150–250ms，使用缓动曲线；尊重系统「减弱动态效果」设置

二、草稿保留实现

• 触发时机：监听输入框 input 事件（Vue 用 v-model，React 用受控组件 + 防抖 300–500ms）
• 存储方案（按优先级）：
• 页面内：组件 state / 状态管理，切 Tab 不丢
• 页面卸载/收起时：写入 wx.setStorageSync('ask_draft', content)（小程序）
• 回显时机：onLoad / 组件挂载时读取并回填
• 补充建议：
• 收起时不销毁组件，优先用 v-show / CSS 折叠而非 v-if，输入焦点与原生键盘状态不易丢失
• 草稿发送成功后清除；可加「清空草稿」入口

三、无障碍（屏幕阅读器）实现

• 按钮语义：收起按钮使用原生 <button>，通过 aria-expanded="true/false" 标注当前状态（小程序可用 aria-role="button" + aria-expanded，微信基础库已支持）
• 朗读文案：不要只写「收起」，改为动态文案，如：
• 展开时按钮朗读「健康咨询，已展开，点按收起」
• 收起时朗读「健康咨询，已收起，有未发送草稿，点按展开」
• 关联区域：按钮通过 aria-controls 关联内容容器 id；内容区加 aria-live="polite"（或小程序 aria-live）提示展开/收起结果
• 触达区域：点击热区不小于 44×44pt，适配老人手指

四、验证清单

• [ ] 输入一半→收起→展开，文字完整保留
• [ ] 切出页面再回来，草稿仍在
• [ ] VoiceOver / TalkBack 朗读按钮时能报出「已展开/已收起」
• [ ] 键盘弹起时收起，无布局跳动异常

如需，我可以基于你使用的技术栈（原生小程序 / uni-app / Taro）给出具体代码片段。