🎧 人工坐席按钮 - 灵动岛风格 v0.1
参考 iPhone 灵动岛(Dynamic Island)动画 + 拟人卡通客服 · 设计时间: 2026-08-04 凌晨
⚠️ 这是新方向(灵动岛)的概念原型,只做 1 套主方案。如认可,再扩成 2-3 套横向对比(不同卡通风格/不同灵动岛形状)。
📐 与现有工具按钮对比(尺寸/位置)
现有工具按钮
36×36 / 8px 圆角 / 1px 浅灰边框 / 18px 图标
灵动岛按钮
36×36 / 18px 圆角胶囊 / 纯黑背景 / 24px SVG 卡通
🎮 6 态实时切换(点击下方 tab 切换)
🎨 6 态设计详解
disabled(无会话/坐席离线)
视觉: 灰色 (#6b7280) 背景 + 灰色卡通闭眼/打盹姿态
动画: sleepBreath 3s 呼吸(微缩放 0.95-1.0),表达"睡着了/不在"
交互: cursor: not-allowed + opacity 0.7,点击无响应
active(可呼叫人工坐席)
视觉: 深灰 (#1f2937) 背景 + 卡通标准姿态(眼睛+微笑)
动画: idleBounce 2s 微弹跳(上下 1.5px),表达"待机/有活力"
交互: hover 弹出文字标签"客服在线",点击触发 shakeAgent
urgent(检测到紧急关键词)
视觉: 红色 (#dc2626) 背景 + 卡通惊恐表情(大眼睛+张嘴)
动画: urgentShake 0.4s 抖动(左右摇) + urgentPulse 1.2s 脉冲(box-shadow 扩散)
交互: hover 弹出"紧急!"提示,点击直接 shakeAgent(跳过 AI 拦截)
waiting(排队等待中)
视觉: 橙色 (#ea580c) 背景 + 卡通思考姿态(问号/挠头)
动画: waitingThink 2.5s 摇头(左右 8°-6°-8°),表达"思考/等待"
交互: hover 弹出"排队中 · 前面 N 人",点击取消排队
end(已接入坐席)
视觉: 绿色 (#16a34a) 背景 + 卡通+耳机图标(电话通话中)
动画: phoneTalk 1s 缩放脉冲(1.0-1.15),表达"对话/活跃"
交互: hover 弹出"通话中 · 客服小王",点击结束会话
reopen(会话已关闭,可重新打开)
视觉: 蓝色 (#2563eb) 背景 + 卡通招手姿态(嘴笑+招手)
动画: reopenWave 1.5s 招手(左右 15° 旋转)
交互: hover 弹出"重新打开 · 24h 内有效",点击 reopenCurrentConversation
📊 与之前方案对比(为什么改方向)
| 维度 | v0.1(4 套方块按钮) | v0.2(灵动岛 + 卡通) |
|---|
| 视觉 |
方块按钮 + emoji |
黑色胶囊 + 拟人卡通 |
| 动画 |
静态 6 态切换,无过渡 |
每态有专属动画(呼吸/抖动/摇头/招手)+ 状态间过渡 |
| iPhone 灵动岛感 |
无 |
黑色胶囊 + 弹性动画 + label 弹出 |
| 视觉吸引力 |
功能可见,情感弱 |
卡通表情 + 动作,情感化(用户会"喜欢"这按钮) |
| 与现有工具按钮统一性 |
★★★★★(同尺寸/同边框) |
★★★(尺寸 36×36 一致,但黑色胶囊 + 圆角 18px 与方块 8px 不同) |
| hover 反馈 |
背景变灰 |
scale 1.05 + label 弹出文字"客服在线"等 |
| 6 态区分度 |
靠颜色(普通) |
颜色 + 卡通表情 + 动画(强区分) |
| 技术实现 |
纯 CSS 简单 |
CSS + SVG 卡通(中等) |
❓ 待你拍板
- 这个 灵动岛 + 拟人小客服 方向 OK 吗?(如 OK,我会做 2-3 套不同卡通风格对比)
- 卡通角色是 拟人客服(戴耳机小黄人风格) 还是其他?(动物?机器人?抽象图形?)
- hover 时是否要 弹出文字标签?("客服在线" / "排队中" 等)——这与"图标 only"工具有冲突
- 如整体 OK,要 画 2-3 个不同卡通风格 让你挑,还是先微调当前这套?
v0.1 高保真原型 · 2026-08-04 · Duckula 主理人 · 等待用户拍板方向