语音优先多模态Voice-First Multimodal
以波形、聆听脉冲与状态色表达「在听 / 在想 / 在说」，屏幕只做辅助确认。需要处理无视觉、弱网与打断等边界。
典型场景语音助手 · 车载 · 无障碍产品
编号63
年代2025+ Voice Era
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
以波形、聆听脉冲与状态色表达「在听 / 在想 / 在说」，屏幕只做辅助确认。需要处理无视觉、弱网与打断等边界。
关键词
Voice UImultimodalaudio feedbackconversationalhands-freeambientcontextualspeech recognition
效果与动效
Voice waveform visualization, listening pulse, processing spinner, speak animation, smooth transitions
设计系统变量
--listening-color#6B8FAF--speaking-color#22C55E--waveform-height60px--pulse-duration1.5s--indicator-size24px--voice-accent#9B8FBB配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Calm neutrals: Soft White #FAFAFA, Muted Blue #6B8FAF, Gentle Purple #9B8FBB
辅色 / Secondary
Audio waveform colors, status indicators (listening/processing/speaking), success/error tones
强调色在页面底色上的对比度约 3.3:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Voice assistants
- accessibility apps
- hands-free tools
- smart home
- automotive UI
- cooking apps
避开 / Do Not Use For
- Visual-heavy content
- data entry
- complex forms
- noisy environments
框架兼容
web-speech-apireact
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Voice recognition works,
- Visual feedback clear,
- Listening state obvious,
- Speaking animation smooth,
- Fallback UI provided,
- Accessibility excellent
CSS / 技术关键词
Web Speech API integration, canvas for waveform, animation: pulse for listening, status indicators (color change), audio visualization (Web Audio API), minimal chrome, large touch targets
AI 提示词
Design a voice-first multimodal interface. Use: voice waveform visualization, listening state indicator, speaking animation, minimal visible UI, audio feedback cues, hands-free optimized, conversational flow, ambient design.