wangjia
40760aa884
- server：Go 网关（WS 流式识别中继/计费配额/微信登录支付 mock/反馈/埋点），gummy provider 已真实联调 - desktop：Tauri 2（全局快捷键 push-to-talk/浮层/托盘/设置/登录购买/反馈/首启引导） - android：Compose 主 App + IME（键盘内录音直传） - ios：App + 键盘扩展（1A spike 实证键盘内不可录音，走 deep link 听写） - design/design-pipeline：设计系统 + token 导出 iOS/Android 主题 - doc：前后端设计文档（HTML）；web：官网宣传页；todo：任务看板 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
102 lines
7.7 KiB
Markdown
102 lines
7.7 KiB
Markdown
# 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](https://lucide.dev)（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. 不画渐变，不加无意义阴影，不引入第二品牌色。
|