对话式聊天界面系统 是做什么的？
目的
对话式聊天界面系统提供了一套系统化的方法论，用于设计和构建持久化的页面内聊天小部件、在线支持对话框和自动化聊天机器人界面。聊天窗口具有高度交互性、内容密集且空间受限，因此容易出现严重的可访问性和可用性问题。
该系统解决了异步消息覆盖层的视觉和结构设计挑战。它保证了消息流的高度可读性，交互式触发器（快速回复、操作卡片）的可访问性，辅助技术用户在不受焦点中断的情况下收到新消息通知，以及移动端覆盖层完美适配系统虚拟键盘和安全区域。
用例
- 在线聊天支持面板： 允许与人类客服代表直接通信的持久化小部件。
- 自动化AI聊天机器人： 应用内或网站内的自动化助手，引导用户完成入门、故障排除或产品发现。
- 交易型对话表单： 设计成交互式对话的分步式表单填写。
- 浮动帮助中心小部件： 固定在视口上的覆盖层，用于搜索支持文章并回退到在线聊天线程。
何时不使用
- 专用邮件/收件箱应用： 大规模、全屏通信仪表板（例如Gmail、Slack、Zendesk Agent Workspace），需要高密度多窗格布局；请使用
dashboard-layout-system。 - 全局页面导航： 除非作为辅助选项，否则不要用聊天取代持久的站点目录；请使用
site-navigation-system。 - 复杂层级评论： 带有嵌套线程回复的博客或文章评论；请使用
comment-and-discussion-system。
输入
- 对话场景： 映射主要流程（用户发起 vs. 系统触发，机器人 vs. 人工客服转接）。
- 视觉样式和调色板： 背景表面、传入与传出气泡、状态指示点和焦点指示器的设计令牌（来自
accessible-color-system和focus-indicator-design-system）。 - 排版比例： 适合紧凑布局的流畅、高度清晰的排版规则（来自
fluid-typography-system）。 - 触发指标： 决定聊天启动按钮或自动欢迎消息激活的滚动和事件阈值。
- 交互式媒体资源： 文件附件选项、图片预览模板和自定义快速回复格式。
输出
- 聊天小部件布局规范： 浮动启动按钮和固定面板的精确像素/rem边界。
- 消息线程结构： 组件间距、排版权重和区分发送者类型的颜色映射。
- 响应式移动端蓝图： 将桌面浮动面板转换为移动端全高度抽屉的过渡规则。
- 交互状态矩阵： 消息气泡、文本区域、操作按钮和加载状态的视觉反馈映射。
- 无障碍标记蓝图： ARIA角色（
role="log"、aria-live="polite"、aria-busy）和键盘Tab路径的地图。
工作流程
1. 定位浮动启动按钮（FAB）
浮动聊天触发按钮是主要入口点，必须保持持久化，同时不阻挡关键页面主体元素。
- 标准定位： 将启动按钮固定在视口右下角（RTL布局为左下角）。
- 桌面网格偏移： 启动按钮距视口底部和侧面边界各偏移
24px。 - 移动端网格偏移： 距边界偏移
16px以保留内容区域。 - 碰撞避免： 如果存在“返回顶部”按钮或持久性Cookie横幅，则将其垂直放置在相反位置，或与它们堆叠，最小间隔
16px以防止视觉重叠。
2. 构建聊天窗口容器
聊天窗口容器容纳整个交互框架。它位于基础页面之上，必须遵循标准的结构层级：
- 头部（框架锚点）： 持久化横幅，包含聊天伙伴（客服/机器人）的头像/身份、运营状态（在线指示器、营业时间）以及快速控制按钮（最小化
_、全屏/展开和关闭X）。 - 消息日志区域（线程视口）： 可滚动的对话正文。必须支持无限垂直滚动，滚动条在滚动操作期间始终可见。
- 快速回复面板（桥梁）： 位于输入栏正上方的一组水平/换行交互式按钮，提供一键提示回复。
- 输入栏（固定底部的实用区）： 持久化表单容器，包含文本输入区域、辅助功能触发器（表情、回形针文件附件）和主要“发送”按钮。
3. 设计消息气泡结构和节奏
为确保快速扫描性，使用视觉和物理方向区分消息：
- 传出（用户）消息：
- 对齐： 右对齐（RTL中左对齐）。
- 颜色： 品牌主色或高对比度深色背景，配白色/浅色文字。
- 边框半径： 所有角圆角，除了右下角（RTL中左下角），以形成视觉“语音气泡”锚点。
- 传入（客服/机器人）消息：
- 对齐： 左对齐（RTL中右对齐）。
- 颜色： 中性浅灰或辅助品牌色调，配高对比度文字。
- 边框半径： 所有角圆角，除了左下角（RTL中右下角）。
- 分组消息： 如果同一发送者连续发送多条消息，则紧密堆叠（
4px间隔），仅在最后一个气泡或组头显示发送者姓名、头像和时间戳。不同发送者之间使用16px间距。 - 系统/操作消息： 在线程内居中，小号、柔和的文字，样式为无边框平面文本，用于表示元事件（例如“客服已进入聊天”、“聊天记录已通过邮件发送”）。
4. 创建交互式输入区域
文本输入区域是高摩擦点。设计应最大化可用性：
- 自动扩展输入： 使用
<textarea>，起始为单行（最小高度44px），随用户输入垂直扩展（最多4-5行，内部启用垂直滚动），使长消息完全可见。 - 输入框边框和悬停状态： 给文本区域设置清晰的边框（最小
1px，高对比度3:1相对于白色聊天框）。悬停时边框对比度应增加，激活焦点时触发高对比度焦点环（最小2px）。 - 发送按钮提示： 当文本区域为空时，发送按钮应保持视觉无效（禁用且降低透明度）。一旦输入字符，将按钮过渡到其主要的激活颜色状态，以指示输入已就绪。
5. 建立移动端视口适配（抽屉式切换）
桌面聊天框是小覆盖层（通常360px到400px宽，500px到650px高）。在移动端，这些比例不可用，且与虚拟键盘冲突。
- 全视口接管： 低于
576px断点时，将聊天容器从浮动面板过渡到全屏抽屉（width: 100%; height: 100%; top: 0; left: 0; border-radius: 0;）。 - 虚拟键盘安全区域： 确保输入栏使用
position: sticky; bottom: 0;，并锚定到可见视口底部，考虑移动浏览器底部地址栏和虚拟键盘。 - 防止滚动泄露： 当移动端全屏聊天抽屉激活时，使用
body { overflow: hidden; }或标准触摸拦截类锁定背景页面滚动。
决策规则
- 触发按钮尺寸： 浮动启动按钮的视觉直径在桌面和移动端至少为
56px，交互触摸区域为64x64px，以确保轻松拇指激活。 - “未读徽章”优先级： 当面板最小化时有未读消息到达，在启动按钮上显示红色/品牌色数字徽章。如果消息非常关键，在启动按钮旁边显示一个临时、自动消失的文本预览气泡，持续
5秒，然后收拢到徽章。 - 输入指示器显示： 当客服/机器人正在输入时，显示一个包含三点弹跳动画的持久化气泡。将此指示器定位为最底部的传入消息，但一旦实际消息块到达，立即移除它。
- 通知时机和音频提示： 仅当标签页处于后台时，启用微妙的、高音调音频提示来通知传入消息。在聊天头部提供清晰、持久的开关，以完全静音通知。
- 动态滚动锚定： 当用户位于聊天日志底部时，自动向下滚动线程容器以显示新到达的消息。然而，如果用户已向上滚动阅读历史记录，则锁定滚动位置以防止跳跃，并在视口底部显示一个浮动的“新消息 ↓”药丸按钮。
约束条件
1. 可访问性（WCAG AA合规）
- 标记和ARIA角色：
- 将主聊天小部件包裹在标记容器中：
<section aria-label="Customer Chat">或<div role="region" aria-label="Support Chat">。 - 可滚动的消息日志区域必须使用
role="log"和aria-live="polite"。这告诉屏幕阅读器在新消息追加时进行播报，而不会中断用户的活跃键盘导航或文本输入。 - 输入指示器气泡必须设置
aria-busy="true"，并包含隐藏的文本替代（例如<span class="sr-only">Support agent is typing...</span>）。
- 将主聊天小部件包裹在标记容器中：
- 键盘访问和焦点陷阱：
- 标准
Tab导航必须按逻辑顺序移动通过头部控件、可滚动的消息流、快速回复按钮和输入字段。 - 当移动端全屏聊天抽屉打开时，将键盘焦点限制在抽屉内。按
Escape键必须立即最小化或关闭聊天面板，并将焦点返回给浮动启动按钮。
- 标准
- 文本和组件对比度：
- 消息气泡内的所有文本（传入和传出）必须与其各自气泡背景达到最低
4.5:1的对比度。 - 交互式图标（附件夹子、发送箭头、关闭X）和表单边界必须与相邻背景表面达到最低
3:1的对比度。
- 消息气泡内的所有文本（传入和传出）必须与其各自气泡背景达到最低
2. 响应式与布局保持
- 宽高比稳定性：
- 消息线程必须使用灵活百分比或flex-grow模型填充容器高度，防止文本溢出或容器塌陷。
- 聊天气泡内的图片或卡片必须具有固定的宽高比或最大宽度边界（
max-width: 80%的气泡宽度），以防止聊天布局视觉炸裂。
- 布局偏移预防：
- 加载历史消息时（例如向上无限滚动），使用滚动锚定技术防止活动滚动位置向下跳动，使用户的视口完美锁定在他们正在阅读的消息上。
常见失败模式
- “焦点劫持”陷阱： 页面加载时自动打开聊天小部件并立即将键盘焦点限制在聊天文本区域。这完全阻止了键盘和屏幕阅读器用户阅读主页面内容。
- “键盘遮挡”： 在移动端，使用
absolute坐标定位输入栏，导致设备虚拟键盘在活跃输入时覆盖并隐藏文本区域和发送按钮。 - “未声明流”： 仅通过视觉方式将新消息追加到线程中，而没有
role="log"或`aria-live"，使盲人和低视力用户完全不知道客服已回复。 - “跳跃滚动”错误： 每条传入消息强制滚动视口跳转到绝对底部，中断了正在尝试阅读线程顶部历史指示的用户。
- “对比度淡化”趋势： 将传入气泡设置为超浅灰色背景和细白色文字，违反对比度比率，使文字在正常环境光下不可读。
验证标准
- 无障碍标记检查： 聊天小部件包裹在具有描述性
aria-label的<section>或role="region"中。 - 屏幕阅读器播报检查： 消息线程使用
role="log"和aria-live="polite"，并已验证能动态播报传入文本。 - 对比度验证： 传出和传入气泡满足
4.5:1的文本与背景对比度标准，表单边界满足3:1标准。 - 键盘路径验证： 焦点陷阱在移动端视口正确工作，按
Escape键关闭小部件并将焦点返回给启动按钮。 - 移动端抽屉适配： 面板在
576px以下占据100%视口高度和宽度，且背景页面无滚动泄露。 - 最小触摸目标： 启动按钮、关闭按钮、发送控件和快速回复按钮的交互区域至少为
44x44px。 - 消息气泡节奏： 同一发送者的连续消息紧密聚集，间距
4px，而发送者变化时使用宽松的16px间隔。 - 空状态保护： 当输入文本区域仅包含空白时，发送按钮被禁用并降低透明度。