🎧 人工坐席按钮设计方案 v0.1

4 套候选方案 · 6 态对比 · 与现有 😊📎🎤 工具按钮视觉统一 | 设计时间: 2026-08-04

📐 现有工具按钮基准(😊📎🎤)

规格: 36×36 / 8px 圆角 / 1px 边框 / 18px 图标
正常
hover

方案 A: 轻量图标态(⭐推荐)

推荐 最轻量

36×36 与现有工具按钮完全一致的尺寸,默认无背景无边框(透明),仅 emoji 图标 + 颜色变化区分 6 态。最符合"工具栏统一"的设计意图。

6 态对比(实际 HTML/CSS 渲染效果)
disabled
🔒 无会话 / 不可点击
active
🎧 可呼叫人工坐席(默认蓝)
urgent
🚨 紧急关键词命中(脉冲动画)
waiting
⏳ 排队等待中(橙色)
end
📴 已接入坐席(红色)
reopen
🔄 会话已关闭,可重新打开

✓ 优点

  • 视觉与现有工具按钮完全统一
  • 工具栏最干净,无视觉噪音
  • hover 状态与现有 😊📎 完全一致
  • 代码量最少(CSS 简单)

✗ 缺点

  • 6 态仅靠图标 + 颜色区分,变化幅度小
  • 重要状态(urgent 红 + 脉冲)可能不够醒目
  • disabled 状态可能与其他工具按钮混淆(都是灰色图标)

方案 B: 边框+底色态(沿用 v1.3 风格,8px 圆角)

视觉强

36×36 与现有按钮尺寸一致,8px 圆角与现有工具按钮对齐,1px 边框 + 底色变化区分 6 态。继承 v1.3 整合区 .call-agent-btn 视觉风格,只是缩小到与现有按钮一致。

6 态对比
disabled
灰色边框 + 浅灰背景
active
蓝色边框 + 浅蓝背景
urgent
红色边框 + 浅红背景 + 脉冲
waiting
橙色边框 + 浅橙背景
end
红色填充 + 白字
reopen
蓝色边框 + 浅蓝背景

✓ 优点

  • 6 态视觉变化最明显(边框 + 底色 + 文字色)
  • 继承 v1.3 整合区 .call-agent-btn 风格,代码复用高
  • disabled 状态明显区别于正常态
  • end 态红色填充强警示

✗ 缺点

  • 比其他工具按钮视觉更"重"(有底色)
  • 工具栏看起来像"3 个轻 + 1 个重",略不协调

方案 C: 仅 disabled/active 两态(其他用 title 提示)

最简洁

36×36 与现有工具按钮完全一致,只有 disabled 和 active 在工具栏有视觉变化。其他 4 态(urgent/waiting/end/reopen)保持 active 蓝边框,靠 title 属性 + 整合区 toast 提示。

6 态对比(除 disabled 外,其他都用 active 蓝边框)
disabled
灰色 + 不可点击
active
蓝边框(可点击)
urgent
同 active 视觉,靠 title 提示
waiting
同 active 视觉,靠 title 提示
end
同 active 视觉,靠 title 提示
reopen
同 active 视觉,靠 title 提示

✓ 优点

  • 工具栏最简洁(只有蓝/灰两态视觉)
  • 完全不会"视觉抢戏"其他工具按钮

✗ 缺点

  • 用户错过重要状态(urgent 红 + 脉冲 失效)
  • 必须依赖整合区 toast 提示,体验割裂
  • disabled 状态和其他工具按钮可点击状态难以区分
  • 功能降级感明显,用户可能不知道当前是哪种状态

方案 D: 边框+底色+右上角小圆点(角标方案)

状态最强

36×36 与现有工具按钮完全一致,8px 圆角,默认无边框(与其他工具风格统一),靠右上角小圆点(8×8 圆)区分 6 态。状态最显眼的方案,但视觉复杂。

6 态对比(右上角小圆点不同色)
disabled
灰色 + 灰色角标
active
蓝色角标
urgent
红色边框 + 红色角标(脉冲)
waiting
橙色边框 + 橙色角标
end
红色边框 + 红色角标
reopen
蓝色边框 + 蓝色角标

✓ 优点

  • 状态最强视觉(角标 + 边框 + 颜色三重提示)
  • 图标不变(只用角标),不切换图标含义
  • 扩展性好(可加更多状态)

✗ 缺点

  • CSS 最复杂(角标需要 ::after 伪元素)
  • 小圆点在 36×36 空间内视觉占比偏大
  • 多个状态同时存在时可能视觉混乱
  • 其他工具按钮没有角标,只这一个有"特殊"

📊 4 套方案对比表

维度 方案 A(轻量) 方案 B(边框底色) 方案 C(仅两态) 方案 D(角标)
尺寸 / 圆角 36×36 / 8px ✓ 36×36 / 8px ✓ 36×36 / 8px ✓ 36×36 / 8px ✓
与现有工具按钮视觉一致 ★★★★★ ★★★ ★★★★★ ★★★
6 态视觉变化强度 ★★ ★★★★★ ★ ★★★★★
disabled 区分度 ★★ ★★★★ ★★★★ ★★★★
紧急态(urgent)醒目度 ★★★(脉冲动画) ★★★★★(红+脉冲) ★(无变化) ★★★★★(角标脉冲)
CSS 复杂度 低 中 低 高(::after)
代码改动量 最小 中 最小 中
工具栏整体协调性 ★★★★★ ★★★ ★★★★★ ★★

💡 我的推荐

方案 A(轻量图标态)⭐推荐

备选:方案 B(边框底色态)

❓ 待你拍板

  1. 选 A / B / C / D 哪套?(或需要微调?)
  2. 6 态 emoji 选用是否同意?(🔒/🎧/🚨/⏳/📴/🔄)
  3. 动画(urgent 脉冲 + waiting 黄色 + end 红色填充)是否都保留?
  4. 如选 B 或 D:边框颜色是否与现有工具按钮 hover 色(--accent)一致?

原型 v0.1 · 2026-08-04 · Duckula 主理人 · 等待用户拍板后实施