Fun-ASR响应式设计体验：手机和平板也能操作

Fun-ASR响应式设计体验：手机和平板也能操作

你有没有试过在会议中途掏出手机，想立刻把刚听到的关键结论转成文字？或者在通勤路上用平板打开语音识别工具，边听播客边整理笔记？过去，这类操作往往卡在“界面缩放失真”“按钮点不中”“功能被裁切”上——不是模型不行，是WebUI没真正为移动而生。

Fun-ASR由钉钉与通义联合推出，由科哥构建的这套语音识别系统，从v1.0.0版本起就悄悄埋下了一个关键能力：原生响应式布局。它不靠浏览器缩放糊弄事，也不依赖用户手动调出桌面版；而是让同一套WebUI，在iPhone SE的4.7英寸屏、iPad Pro的12.9英寸屏、甚至折叠屏安卓设备上，都能自然适配、精准触控、完整呈现所有核心功能。这不是锦上添花的优化，而是把语音识别真正交还到用户手心的第一步。

---

1. 移动端可用性：从“能打开”到“好操作”的跨越

很多ASR工具标榜“支持浏览器访问”，但实际一上手机，就暴露真相：按钮小得像芝麻，滑动区域错位，输入框聚焦后键盘遮挡关键按钮，历史记录列表横向滚动才能看全……这些不是小问题，而是直接拦住用户使用意愿的门槛。

Fun-ASR的响应式设计，解决的正是这一连串“移动端失语症”。

1.1 真实场景下的三重适配逻辑

它没有采用简单的CSS媒体查询“一刀切”，而是基于设备能力分层响应：

• 触控优先（Touch-First）：所有按钮最小点击区域≥48×48px，间距留足防误触；滑动操作支持惯性滚动和边缘回弹，符合iOS/Android原生手感。
• 视口智能（Viewport-Aware）：自动识别设备DPR（设备像素比），在高分辨率屏上渲染清晰文字与图标；同时限制最大字体缩放比例，避免用户双指放大后内容溢出。
• 功能保全（Feature-Preserving）：不因屏幕变小而隐藏核心模块——语音识别、实时流式、批量处理、历史记录、VAD检测、系统设置六大功能全部可见，仅通过折叠式面板、分步引导、上下文感知菜单实现空间复用。

举个例子：在iPhone上进入“语音识别”页，上传按钮会变为居中大图标+文字标签；麦克风录音入口独立悬浮于右下角，半透明不遮挡预览区；参数配置区默认收起，点击“展开高级设置”才展开热词、语言、ITN开关——既保持界面清爽，又确保专业用户一步可达。

1.2 不是“缩放”，而是“重构”

对比传统ASR WebUI常见的“PC界面强制缩放”方案，Fun-ASR的移动端体验本质是交互逻辑重构：

对比维度	传统缩放方案	Fun-ASR响应式方案
按钮尺寸	原尺寸缩小，手指难精准点击	动态放大至触控安全区，图标+文字双重标识
表单填写	单行输入框占满宽度，键盘弹出后页面上移遮挡按钮	输入框自适应宽度，提交按钮固定底部悬浮，键盘升起时自动上推内容区
列表展示	横向滚动查看长字段（如文件路径、时间戳）	关键字段精简显示（如会议_20250412.mp3），悬停/长按显示完整路径；时间戳统一为昨天 14:22等相对格式
多步骤流程	所有步骤平铺，需反复滚动	分步卡片式设计，当前步骤高亮，进度条顶部固定，支持手势左右滑动切换

这种重构背后，是前端对@media (hover: none) and (pointer: coarse)等现代媒体特性的真实判断，而非简单检测UA字符串。它知道：当设备报告“无悬停能力+粗粒度指针”时，就是该启用触控模式了。

---

2. 六大功能在小屏上的落地实践

Fun-ASR的六大功能模块，在移动端并非简单“缩小摆放”，而是针对每类操作重新设计人机交互路径。我们逐一看它们如何在手机和平板上真正“活起来”。

2.1 语音识别：单手可完成的全流程

在手机上完成一次识别，只需三步：

1. 上传或录音

   • 点击中央大号“+”按钮，弹出操作菜单：
     • 选择文件→ 调用系统文件选择器（支持微信/QQ/钉钉内直接选取音频）
     • 录音→ 启动麦克风，界面实时显示声波动画，长按说话，松开即停止
   • 平板上则提供并排双按钮，兼顾效率与习惯。

2. 参数轻配置

   • “目标语言”变为顶部胶囊式标签栏（中文/英文/日文），一触切换；
   • “启用ITN”改为开关按钮，右侧附带简短说明：“开启后，‘二零二五’→‘2025’”；
   • 热词列表默认隐藏，点击“添加热词”才展开文本域，支持粘贴多行（自动按换行分割）。

3. 结果即时呈现

   • 识别中显示动态加载骨架屏，避免白屏焦虑；
   • 完成后上下分屏：上半区为原始识别文本（可双指缩放查看），下半区为规整后文本（带高亮差异标记，如<span class="diff-add">1234</span>）；
   • 底部固定操作栏：复制全文、导出TXT、返回重试。

<!-- 移动端结果页核心结构示意 --> <div class="result-container"> <div class="raw-text-section">