UX/UI Spec · 设计系统 · 交互规范 · 新加坡本地化
| # | 原则 | 含义 | 落地示例 |
|---|---|---|---|
| 1 | 🎯 语音优先 | 一切设计服务于"听"和"说"，视觉是辅助 | 大字号字幕、简洁按钮、不抢注意力 |
| 2 | ⚡ 快即是美 | 速度感 = 高级感，加载态也是体验 | 匹配动画 3 秒出结果、Skeleton 骨架屏 |
| 3 | 🌏 双语对等 | 中文和英语用户获得完全平等的体验 | 所有文案双语、字体大小自适应 |
| 4 | 🔒 安全可感 | 让用户感知到"这里很安全" | 举报按钮常驻、安全提示微文案 |
| 5 | 💎 克制即奢华 | 不堆砌功能，留白即高级 | 首页只有 1 个核心按钮 |
所有 UI 元素必须引用设计令牌变量，禁止硬编码颜色/字号/间距。确保主题切换和本地化时一致性。
| Token | 值 | 使用场景 |
|---|---|---|
| --space-xs | 4px | 图标与文字间距、标签内边距 |
| --space-sm | 8px | 按钮内边距、列表项间距 |
| --space-md | 16px | 卡片内边距、页面左右边距 |
| --space-lg | 24px | 模块间距、弹窗内边距 |
| --space-xl | 32px | 页面区块间距、大弹窗 |
| Token | 值 | 使用场景 |
|---|---|---|
| --radius-sm | 6px | 按钮、输入框、标签 |
| --radius-md | 10px | 卡片、弹窗、Toast |
| --radius-lg | 14px | 底部弹层、Action Sheet |
| --radius-xl | 20px | 全屏弹窗、新手引导 |
| --shadow | 0 2px 12px rgba(0,0,0,.06) | 卡片、悬浮按钮 |
| 元素 | 规格 | 交互规则 |
|---|---|---|
| 页面背景 | 渐变：顶部品牌色 5% → 底部白色 | 不可滚动（内容固定） |
| 顶部信息条 | 高度 44px，显示剩余次数 + VIP 入口 | VIP 入口点击 → 订阅页 |
| 匹配按钮 | 圆形/大圆角，直径 ≥ 200px，品牌色 | 点击 → 进入匹配动画态 |
| 匹配中动画 | 脉冲波纹 + 趣味文案轮换 | 5 秒超时 → 弹窗"扩大范围？" |
| 活动 Banner | 高度 80px，圆角 10px，可关闭 | 运营后台配置，按用户分群 |
| 底部 Tab Bar | 高度 56px，4 个 Tab，图标+文字 | 当前 Tab 品牌色，其他灰色 |
| 元素 | 简体中文 | English (en-SG) |
|---|---|---|
| 匹配按钮 | 开始匹配 | Start Matching |
| 剩余次数 | 今日剩余 10 次 | 10 matches left today |
| VIP 入口 | 升级 VIP · 无限匹配 | Go VIP · Unlimited |
| 匹配中 | 正在为你寻找语伴… | Finding your language partner… |
| 超时提示 | 找不到匹配？扩大范围试试 | Can't find a match? Expand search |
| 元素 | 规格 | 交互规则 |
|---|---|---|
| 背景 | 深色渐变（不刺眼，利于聚焦字幕） | 对方头像模糊作为背景 |
| 字幕区域 | 占屏幕 50-60%，居中 | 新句子从底部滑入，旧句上移 |
| 对方字幕 | 白色 22sp，粗体，最大 2 行 | ASR 流式更新（非整句阻塞） |
| 翻译字幕 | 浅灰 17sp，常规，最大 2 行 | MT 结果替换时淡入淡出 |
| 计时器 | 顶部居中，白色 14sp | 格式 mm:ss，每 30 秒更新一次 |
| 信号指示 | 顶部右侧，三色 LED 样式 | 绿/黄/红 实时反映网络质量 |
| 挂断按钮 | 红色圆形，直径 64px，底部居中 | 点击 → 确认弹窗 → 结束 |
| 礼物按钮 | 金色圆形，直径 48px，右下 | 点击 → 底部弹出礼物面板 |
| 静音按钮 | 白色圆形，直径 48px，左下 | 点击切换，状态持久化 |
| 举报按钮 | 白色圆形，直径 48px，右上 | 点击 → 选择原因 → 即时处理 |
| 元素 | 规格 | 交互规则 |
|---|---|---|
| 页面标题 | "充值" / "Top Up"，居中 20sp | — |
| 当前余额 | 顶部卡片，大字号显示金币数 | 实时更新（WebSocket） |
| 金币套餐 | 4 张卡片，圆角 12px，推荐档高亮 | 点击 → 选择支付方式弹窗 |
| VIP 区域 | 横幅卡片，周/月/年三选项 | 月付默认选中（推荐标签） |
| 支付方式 | PayNow / Apple Pay / Google Pay / 信用卡 | PayNow 默认首位（新加坡） |
| 安全提示 | 底部小字"支付由 Vocalink 安全加密" | 点击 → 查看安全证书 |
| 设置项 | 类型 | 默认 | 说明 |
|---|---|---|---|
| 母语 | 选择器 | 中文 / English | 注册时设定，可改 |
| 目标语言 | 选择器 | English / 中文 | 注册时设定，可改 |
| 推送通知 | 开关 | 开 | 语伴上线/收到礼物时通知 |
| 匹配振动 | 开关 | 开 | 匹配成功时震动 |
| 字幕字号 | 滑块 | 中 | 小/中/大 三档 |
| 礼物特效 | 开关 | 开 | 关闭后仅显示文字 |
| 数据使用 | 按钮 | — | PDPA 数据管理入口 |
| 删除账号 | 按钮（红色） | — | 二次确认 + 30 天冷却 |
| 隐私政策 | 链接 | — | 打开浏览器查看 |
| 用户协议 | 链接 | — | 打开浏览器查看 |
| 手势 | 页面 | 行为 |
|---|---|---|
| 点击 | 全局 | 主操作（匹配/挂断/发送礼物） |
| 上滑 | 首页 | 查看语伴信息 / 活动详情 |
| 下拉 | 语伴列表 | 刷新列表 |
| 左滑 | 语伴列表 | 删除/拉黑语伴 |
| 右滑 | 匹配中 | 跳过当前匹配 |
| 长按 | 字幕 | 弹出"反馈翻译质量" |
| 双击 | 通话页 | 快速发送默认礼物（👍 赞） |
| 捏合 | 通话页 | 调整字幕字号（临时） |
| 场景 | 反馈方式 | 时长 |
|---|---|---|
| 按钮点击 | 触觉反馈（轻） + 0.95 缩放 | 100ms |
| 匹配成功 | 触觉反馈（中） + 成功音效 + 震动 2 下 | 500ms |
| 收到礼物 | 全屏特效 + 音效 + 震动 3 下 | 2 秒 |
| 网络断开 | 顶部红色横幅 + 无触觉 | 持续显示 |
| 支付成功 | 绿色 Toast "充值成功 ✓" + 金币动画 | 2 秒 |
| 举报提交 | 蓝色 Toast "已收到，我们会处理" | 2 秒 |
| 翻译错误反馈 | 长按字幕 → 底部弹层 → 选择原因 → 确认 | — |
| 页面 | 空态文案（中/英） | 引导行动 |
|---|---|---|
| 语伴列表 | "去匹配你的第一个语伴吧！" / "Match your first language partner!" | 按钮"开始匹配" → 跳首页 |
| 私聊 | "说声你好吧～" / "Say hello~" | 输入框直接聚焦 |
| 充值失败 | "支付未成功，再试一次？" / "Payment failed, retry?" | 按钮"重试" + "换方式" |
| 网络断开 | "网络不太好，检查一下？" / "Network issue, check connection?" | 按钮"重试" + 设置入口 |
| 匹配超时 | "找不到匹配，扩大范围试试" / "No match, expand search?" | 按钮"扩大" + "稍后再来" |
🇸🇬 核心原则：Phase 1 只做两种语言 UI——简体中文（zh-CN）和新加坡英语（en-SG）。不做繁体中文、不做马来语/泰米尔语 UI（Phase 2 再加）。
| 规则 | 逻辑 | 示例 |
|---|---|---|
| 首次启动 | 检测系统语言 → 中文系统默认中文 UI / 其他默认 English | iPhone 语言=中文 → App 中文 |
| 手动切换 | 设置页 → 语言 → 选择 → 即时切换（无需重启） | 任意位置切换中/英 |
| 通话中 | 字幕始终显示"对方原文 + 我的母语翻译" | 我说中文 → 对方看英文翻译 |
| 通知语言 | 跟随 UI 语言设置 | 中文 UI → 中文推送 |
⚠️ 为什么用 en-SG 而非 en-US/en-UK：
| 场景 | 简体中文 | English (en-SG) | 备注 |
|---|---|---|---|
| App 名称 | Vocalink 声链 | Vocalink | 副标题仅中文版显示 |
| 匹配按钮 | 开始匹配 | Start Matching | — |
| VIP 标签 | 升级 VIP | Go VIP | 不用"Premium"（太正式） |
| 礼物名称 | 鲜花 / 掌声 / 旋律 / 皇冠 | Flowers / Applause / Melody / Crown | 中性命名（合规） |
| 举报选项 | 骚扰 / 色情 / 诈骗 / 其他 | Harassment / NSFW / Scam / Other | NSFW 比"色情"更国际 |
| 网络提示 | 网络不太好 | Connection's a bit shaky | 口语化（非"网络连接失败"） |
| 匹配超时 | 找不到语伴 | Can't find a partner | 用 partner 非 match |
| 支付成功 | 充值成功 | Top up successful | 新加坡用"top up" |
| 年龄验证 | 请确认你已满 18 岁 | Please confirm you're 18+ | — |
| 维度 | 注意事项 | 原因 |
|---|---|---|
| emoji 使用 | 适度使用，不堆砌 | 新加坡职场文化偏英式克制 |
| 颜色禁忌 | 避免大面积纯黑背景 | 部分华裔关联丧事 |
| 宗教敏感 | 礼物不用猪/狗形象 | 穆斯林/印度教用户 |
| 日期格式 | DD/MM/YYYY | 新加坡标准（非美国格式） |
| 时间格式 | 24 小时制优先 | 新加坡官方用 24h |
| 货币显示 | S$ 前置 + 2 位小数 | S$4.99（非 $4.99SGD） |
| 名字排序 | 按名排序（非姓） | 新加坡习惯叫名字 |
| 要求 | 规范 | 实现方式 |
|---|---|---|
| 屏幕阅读器 | VoiceOver (iOS) / TalkBack (Android) 全页面支持 | 所有交互元素设 accessibilityLabel |
| 对比度 | 正文文字对比度 ≥ 4.5:1 | 深色字 on 浅色底 / 白色字 on 品牌色 |
| 字号适配 | 支持系统大字号（最大 200%） | 字号用 sp（Android）/ dynamic type（iOS） |
| 触控目标 | 最小 44×44pt | 所有按钮/图标 ≥ 44px |
| 颜色盲友好 | 不仅靠颜色传递信息 | 信号强度用图标+颜色双通道 |
| 减少动效 | 尊重系统"减少动效"设置 | 检测 prefers-reduced-motion |
| 语音控制 | 支持 iOS Voice Control / Android Voice Access | 所有按钮有唯一 label |
| 组件名 | 类型 | 使用场景 | 状态 |
|---|---|---|---|
| VButton | 按钮 | 主操作/次操作/文字按钮/图标按钮 | P0 |
| VInput | 输入框 | 昵称/搜索/验证码 | P0 |
| VTabBar | 导航 | 底部 4 Tab | P0 |
| VCard | 容器 | 套餐卡片/语伴卡片/设置项 | P0 |
| VSubtitle | 字幕 | 通话中双语字幕（核心组件） | P0 |
| VModal | 弹窗 | 确认/选择/礼物面板 | P0 |
| VToast | 提示 | 操作反馈（2 秒自动消失） | P0 |
| VSpinner | 加载 | 匹配动画/加载态 | P0 |
| VAvatar | 头像 | 语伴列表/通话页/个人中心 | P0 |
| VBadge | 角标 | 未读消息数/VIP 标识 | P1 |
| VSwitch | 开关 | 设置页（通知/静音/特效） | P0 |
| VSlider | 滑块 | 字幕字号调节 | P1 |
| VActionSheet | 底部弹层 | 举报选项/支付方式选择 | P0 |
| VGiftPanel | 礼物面板 | 5 级礼物网格 + 发送 | P0 |
| VSignalLED | 信号指示 | 通话页网络质量（绿/黄/红） | P0 |
| VEmptyState | 空态 | 语伴列表/私聊/搜索无结果 | P1 |
| 页面 | 内容 |
|---|---|
| 🎨 Design Tokens | 色彩/字号/间距/圆角/阴影/动效参数 |
| 📐 Components | 所有组件（VButton/VCard/VModal 等） |
| 📱 iPhone 15 Pro | 首页/通话页/充值页/设置页（中文+英文） |
| 📱 Pixel 8 | 同上（Android 适配） |
| 📱 iPad (P2) | 平板适配布局 |
| 🌓 Dark Mode | 所有页面的深色模式版本 |
| 🚫 Error States | 空态/错误态/网络断开/支付失败 |
| 🎁 Gift Effects | 5 级礼物动画（Lottie JSON） |
| 文档 | 关联内容 |
|---|---|
| 04 PRD 产品需求文档 | 功能规格 → UI 设计依据 |
| 05 产品特性与差异化说明书 | 特性层 → 交互设计依据 |
| 07 产品 Roadmap 与里程碑 | 设计交付节奏 |
| 17 内容安全与审核规范 | 举报 UI / 审核反馈设计 |
| 版本 | 日期 | 修改内容 | 作者 |
|---|---|---|---|
| V1.0 | 2026-08-15 | 初始版本 | 设计团队 |