dudu/design

dudu 语音输入法 · 设计系统

dudu（嘟嘟） 是一款付费语音输入法，核心卖点：大模型识别准确度 + 流式实时上屏 + 极简交互。全平台覆盖（Mac / Windows / iPhone / iPad / Android），桌面端按住全局快捷键说话、移动端键盘按住大麦克风说话，微信登录 + 微信支付按识别时长购买（时长包，不过期），每天免费试用 3 分钟。

设计基调：简约、克制、快。 输入法是"消失在使用中"的工具——界面越少越好，反馈越快越好。支持 Light / Dark 双模式，桌面与移动端共用同一套令牌。

来源

• 本地代码库 dudu/（File System Access 挂载）— 目前仅含 dudu/doc/plan/design.html：MVP 前后端设计方案 v0.1（2026-06-11），内含全部界面清单与粗略 mockup。本设计系统的页面设计以该文档第八章为需求来源。
• 技术栈（影响设计决策）：桌面 Tauri 2 + Rust（浮层不抢焦点）、移动端原生键盘扩展（iOS/Android）、后端 Go。

产品表面

表面	界面
桌面端（Mac/Win）	① 识别浮层（核心，两态）② 系统托盘菜单 ③ 设置窗口 ④ 登录/购买窗口
移动端键盘扩展	① 语音为主键盘（大麦克风）② partial 文本条 ③ 未登录/超额提示态
移动端主 App	① 启用引导 ② 微信登录 ③ 购买时长 ④ 我的（余额/试用/权限）

品牌标识

"嘟嘟"= 撅起嘴发出的声音。Logo 以圆形嘴巴为母题：一个线条圆环（嘟起的嘴）+ 内部三条声波竖线（说话中）。纯线条、3.5px 圆头笔画、单色 currentColor。字标 "dudu" 用同一笔画语言手绘（圆 + 竖线 = d/u）。

• assets/logo-mark.svg — 标准线条 mark（currentColor，随前景色）
• assets/logo-mark-ink.svg / -blue.svg / -white.svg — 固定色变体
• assets/wordmark.svg — "dudu" 字标（currentColor）
• assets/app-icon.svg / app-icon-dark.svg — 圆角方形应用图标（22/96 圆角比）
• 中文标准写法："dudu 语音输入"或"嘟嘟语音输入"；品牌名永远小写 dudu

CONTENT FUNDAMENTALS（文案基调）

• 语言：简体中文为主；品牌名小写 dudu。技术词（partial/final）不出现在用户界面，界面上只说"实时识别""上屏"。
• 人称：对用户用"你"，不用"您"（简约、平等、工具感）。
• 句式：短句、动宾结构、无营销腔。"按住说话""松开完成""上滑取消"——三到六个字说清一个动作。
• 标点：界面微文案不带句号；提示语用"·"分隔（"松开完成 · 上滑取消"）。
• 数字：半角数字 + 空格："472 / 600 分钟""00:04"。
• emoji：界面文案不用 emoji（规划稿 mockup 里的 🎙️ 在正式设计中为线条 mic 图标）。
• 示例语料（演示识别文本用）：日常办公对话——"帮我把这份周报整理一下，重点突出本周的进展""好的，我马上把文件发给你"。

VISUAL FOUNDATIONS（视觉基础）

• 色彩：单一品牌蓝 --accent（light #4F6EF7 / dark #6E89F9）+ 冷灰中性阶梯。绿=录音中/成功，琥珀=超额/警告，红=错误。大面积界面是中性色，蓝色只出现在主操作与品牌处——一屏最多一个蓝色主按钮。禁用渐变（规划稿的蓝紫渐变弃用），纯色填充。
• 双模式：light 页面底 #F6F7FA + 白卡片；dark 页面底 #0F1116 + #171A22 卡片。识别浮层在两种模式下都是深色玻璃（--overlay-bg 95% 不透明 + blur(12px)）——它叠在任意用户界面上，深色最不打扰。
• 字体：中文 UI 走系统字体（PingFang SC / MiSans / HarmonyOS Sans / 雅黑）；Outfit 仅用于 "dudu" 字标、数字与价格。正文 14px（桌面）/ 15px（移动与浮层），微文案 12–13px。字重 400/500/600（700 仅大数字）。
• 间距：4px 网格；卡片内边距 16–24px；控件高度 28/36px（桌面）、44/56px（移动触控）。
• 圆角：呼应圆嘴 logo——按钮/输入框 6px、菜单 10px、卡片/浮层 14px、大容器 20px、麦克风条/胶囊 999px。
• 边框与阴影：1px 实线边框（--border-1）是主要分隔手段；页面内卡片仅 --shadow-card（极轻）；浮起元素用 --shadow-menu/window/overlay 三档。dark 模式阴影加深、靠边框提层级。无内阴影。
• 背景：纯色，无图片、无纹理、无插画。空状态用 logo 线条图形 + 一句话。
• 动效：快入慢出 --ease-out，120/200/320ms 三档；浮层淡入+上移 4px；波形条高度动画是唯一循环动画（仅录音中）。无弹跳、无旋转、无视差。
• Hover：背景加一层（surface-2/3）；主按钮加深为 --accent-hover。按压：再深一档 --accent-press，桌面无缩放；移动端键帽按压可缩 0.97。
• 焦点：3px 柔和蓝环 --focus-ring，仅键盘聚焦显示。
• 透明与模糊：仅两处——识别浮层与托盘菜单（95–98% 不透明 + blur）。普通卡片不透明。
• 图片色调：产品几乎无摄影图；若营销需要，冷色调、低饱和、留白多。
• 卡片范式：--surface-card + 1px --border-1 + 14px 圆角 + --shadow-card；浮起卡片才用更重阴影。

ICONOGRAPHY（图标）

• 图标系统：Lucide（ISC 许可）线条图标——24 网格、2px 圆头描边，与线条 logo 同语言。组件内已内嵌所需 Lucide 路径（mic、settings 等），新界面可从 lucide.dev 复制同风格路径或经 CDN unpkg.com/lucide-static 引用。
• 描边统一 2px，颜色跟随 currentColor。
• 不用 emoji 作图标；不用 unicode 符号作图标。例外：键帽符号 ⌘ ⇧ ⌫ ↵ ——它们是键盘标准字符，出现在 Kbd / HotkeyCombo 组件中。
• 无 png 图标，全部 SVG。

索引

styles.css            全局入口（@import 全部令牌）
tokens/               colors / typography / spacing / effects / fonts
assets/               logo-mark(.ink/.blue/.white) · wordmark · app-icon(±dark)
guidelines/           基础规范卡片（品牌、色板、字体、间距、动效）
components/core/      Button · IconButton · Badge · Kbd · HotkeyCombo · Card · ProgressBar
components/forms/     Input · Switch · SettingRow
components/voice/     Waveform · MicBar · RecognitionOverlay
ui_kits/desktop/      桌面端：识别浮层 / 托盘菜单 / 设置 / 登录购买（交互演示）
ui_kits/mobile/       移动端：语音键盘（多态）+ 主 App（引导 / 购买 / 我的）
SKILL.md              供 Claude Code 等代理使用的技能入口

组件速查

组件	关键 props
Button	variant: primary/secondary/ghost/danger · size: sm/md/lg · block
IconButton	size · label（无障碍必填）
Badge	tone: green/blue/orange/red/neutral
Kbd / HotkeyCombo	keys={['⌘','⇧','Space']}
Card	padding
ProgressBar	value/max · warnAt=0.9（超阈值自动变警告色）
Input	size: md/lg
Switch	checked · onChange
SettingRow	label · description · children 放右侧控件
Waveform	bars · active · height · color
MicBar	state: idle/recording/disabled/quota（文案内置）
RecognitionOverlay	state: listening/text · finalText · partialText · hint

使用规则速查

1. 先链 styles.css；dark 模式给容器加 data-theme="dark"。
2. 一屏一个蓝色主按钮；其余操作 secondary/ghost。
3. 浮层永远深色玻璃；键盘/设置跟随系统模式。
4. 文案：短、用"你"、无句号、无 emoji。
5. 不画渐变，不加无意义阴影，不引入第二品牌色。