工具栏统一设计 v0.3

4 按钮(😊📎🎤🎧)统一设计 + 高级拟人角色 + 克制 B 端配色 · 2026-08-04 凌晨

📌 本版核心改动(对比 v0.1 / v0.2):
• 4 个按钮**统一规格** + **统一设计语言**(35×35, 8px 圆角, 1px 边框, 浅色背景, 高级拟人 SVG 角色)
• 角色设计**克制**:几何抽象拟人(不夸张),符合 B 端 SaaS 工具审美(对标 Linear / Notion / Cursor)
• 配色**高级**:中性灰 + 点缀色(蓝/橙/红/绿/紫),不刺眼、有质感
• 动画**克制**:仅微动效(hover 浮起 + scale 0.96,6 态无夸张抖动/招手)

🎨 设计 token(可复用到全局)

配色色板

#f9fafb page
#ffffff surface
#f3f4f6 hover
#e5e7eb border
#6b7280 text-2
#1f2937 text-1
#2563eb accent
#059669 success
#d97706 warning
#dc2626 danger
#4f46e5 info

圆角与阴影

圆角: 8px(按钮)/ 12px(容器)/ 6px(tab)
阴影: 0 1px 2px rgba(0,0,0,0.04)(静态) / 0 2px 4px rgba(0,0,0,0.06)(hover 微浮)

🎭 4 按钮统一设计(角色图谱)

工具栏并排展示(模拟 InputBar 工具栏位置)

视觉特点: 35×35 统一尺寸, 8px 圆角, 1px 边框, 18px SVG 几何抽象拟人, 中性灰 + 蓝色点缀(active)

👤 角色详细设计(4 按钮的"角色")

1. 表情(😊) — 抽象圆形笑脸

设计: 圆形轮廓 + 两个点状眼睛 + 弧形嘴
意图: 极简笑脸,中性、克制、专业(不用 emoji 圆形笑脸)

2. 文件(📎) — 纸夹 + 折角

设计: 文档轮廓 + 右上折角(阴影) + 2 行文字线
意图: 拟人化的"文档",比回形针(📎)更明确表达"文件/附件"语义

3. 语音(🎤) — 麦克风(柱形 + 弧线底座)

设计: 圆角麦克风柱 + 弧形底座 + 支柱
意图: 经典麦克风几何,清晰表达"语音输入"

4. 客服(🎧) — 戴耳机的拟人客服

设计: 圆形头部(背景填充) + 两侧椭圆耳罩 + 简单眼睛弧形嘴
意图: 戴耳机的拟人客服,克制专业(不夸张卡通)
与之前对比: v0.2 卡通是"全身小人",v0.3 改为"头像 + 耳罩",更克制专业

🎬 客服按钮 6 态(克制设计)

📊 4 按钮 hover 状态对比

hover 状态: 背景 #f3f4f6 + 边框 #d1d5db + 文字色 #111827 + translateY(-1px) 微浮 + shadow-md

📊 与之前版本对比(为什么改方向)

维度 v0.1 方块按钮 v0.2 灵动岛卡通 v0.3 统一克制拟人 ⭐
4 按钮统一 × (只设计 1 个按钮) × (只设计 1 个按钮) ✓ 4 按钮统一规格 + 统一设计语言
角色设计 emoji(无设计) 夸张卡通小黄人(低龄) 克制几何拟人头像(Linear/Notion 风)
配色 朴素(单调) 卡通色(刺眼) 中性灰 + 点缀色(高级 SaaS)
动画克制度 无动画 抖动/招手/摇头(夸张) hover 微浮 + 状态边框变色(克制)
尺寸 36×36 / 8px 36×36 / 18px(不一致) 35×35 / 8px / 18px SVG(与现有对齐)
与现有工具按钮风格 ★★★★★ ★ ★★★★★(统一规格 + 统一语言)
B 端专业感 ★★★ ★ ★★★★★(对标 Linear/Notion)

❓ 待你拍板

  1. 整体方向 OK 吗?克制拟人 + 4 按钮统一 + Linear/Notion 风
  2. 客服角色:当前是"戴耳机圆形头像",可以吗?如需更精致,可以请设计师重画 SVG
  3. 客服按钮 6 态的"克制版"设计(仅边框/底色变化,无夸张动画)符合你的预期吗?
  4. 大小用 35×35 还是回归 36×36(与现有一致)?

v0.3 工具栏统一设计 · 2026-08-04 · Duckula 主理人 · 等待用户拍板