工具栏统一设计 v0.4 — WB 专家团队风格
圆形按钮 + 渐变色客服头像 + 高级感设计 · 2026-08-04 凌晨
📌 本版核心改动(对比 v0.3 克制拟人):
• 4 按钮改为圆形(35×35 圆按钮, WB 企微/钉钉生态风格)
• 客服按钮采用渐变边框 + 渐变背景 + 白色客服图标设计(类似企微客服小助手)
• 配色更大胆:紫粉渐变(默认)/ 红橙(urgent)/ 绿(end)/ 橙黄(waiting)/ 蓝(reopen)
• 整体感觉更"专业 SaaS",类似企微客服、钉钉智能客服、飞书服务台
🎨 配色色板(渐变色为主)
客服 6 态渐变色
active 紫粉渐变 (默认 · 客服在线)
disabled 灰度
urgent 红渐变 (紧急)
waiting 橙渐变 (排队)
end 绿渐变 (已接入)
reopen 蓝渐变 (重新打开)
🎭 4 按钮统一设计(WB 风格 — 圆形)
工具栏并排展示(模拟 InputBar 工具栏)
视觉特点: 35×35 圆形按钮 + 客服按钮 1.5px 渐变边框(紫粉) + 渐变背景 + 白色客服图标
🎬 客服按钮 6 态切换
📊 与之前版本对比
| 维度 |
v0.1 方块按钮 |
v0.2 灵动岛卡通 |
v0.3 克制拟人 |
v0.4 WB 渐变 ⭐ |
| 按钮形态 |
方块 8px 圆角 |
方块 18px 圆角 |
方块 8px 圆角 |
圆形(35×35) |
| 4 按钮统一 |
× |
× |
✓ 4 按钮 |
✓ 4 按钮(圆形) |
| 角色设计 |
emoji |
夸张卡通 |
克制拟人 |
渐变头像 + 客服图标(企微风) |
| 配色 |
单调 |
卡通色 |
中性灰 |
渐变色(紫粉/红/橙/绿/蓝) |
| 专业感 |
★★★ |
★ |
★★★★ |
★★★★★(企微/钉钉/飞书级) |
| 技术实现 |
纯 CSS 简单 |
CSS + SVG |
CSS + SVG |
CSS + SVG + 渐变(中等) |
❓ 待你拍板
- WB 风格(圆形 + 渐变)符合你期望吗?如果"WB 专家团队"指具体产品(如企微、钉钉、飞书的客服),可能需要我再调整
- 默认渐变色是紫粉(更年轻/活泼)还是其他(更专业/冷静)?如蓝色、蓝绿、暗色等
- 客服图标是戴耳机小人(当前)还是纯文字"客服"两字/品牌 logo 缩写?
- 圆形 vs 方块:WB 风格如果太"活泼",我可以做方形 + 渐变(更克制)
v0.4 WB 风格 · 2026-08-04 · Duckula 主理人 · 等待用户拍板