虚拟旋钮：让交互更直观高效
关键词：人机交互，UI设计，移动开发，车载系统，VR/AR
摘要
本文提出了一种创新的虚拟旋钮交互方案。该方案基于多触点计算旋钮及其旋转角度，结合使用旋钮位置和大小扩展维度，以及改进的UI设计，实现了对大范围数值快速、精确地调整并具备很强的抗干扰能力。可广泛应用于桌面、移动、车载、VR和未来的交互环境中，提高使用效率和趣味性。该方案已在视频播放器YAP中成功应用，展现了良好的用户体验和广阔的应用前景。
背景
一切源自2024年初和二姐的一次闲聊，当时我们聊到实体旋钮又重新出现在电动车上的新闻。这件事引起了我的兴趣，为什么在触摸屏几乎一统天下的今天，仍然有实体旋钮的一席之地？接下来我做了一些研究，发现触摸屏和实体旋钮各有各的特点。
移动设备交互的的特点
移动设备中主要使用触摸屏+GUI的设计，有以下特点：
- 交互直观：直接对屏幕上的UI元素进行操作，符合人类本能。
- 应用场景丰富：触摸屏+GUI设计非常灵活，可以适应各种应用场景。
- 视觉依赖：当前的GUI的操作模式为“定位-操作”，即先找到UI元素，再对它操作。这样会大量消耗视觉注意力（例如多级菜单操作，需要多次定位+操作）。
- 认知负荷高：由于GUI的设计太灵活，同一个功能在不同的应用和场景下往往有不同的方法和方式，需要分别学习，造成认知负荷偏高。
- 缺乏实体设备的反馈。
- 抗干扰能力差：因为使用环境多为桌面设备或移动设备，在设计时完全没有考虑过抗干扰。
实体旋钮的特点
- 操作简单，适合调整连续值。
- 位置固定，肌肉记忆，无视觉依赖。
- 有明确的物理边界和触觉反馈(包括阻尼感、段落感等)。
- 数量有限
- 成本与复杂度递增：每个实体旋钮都会增加制造、安装、维护成本，提高故障风险，并占用更多空间。
- 认知限制：旋钮过多会影响肌肉记忆效果。
车载设备的需求
- 操作简单。
- 尽量少占用注意力，尤其是视觉注意力，避免操作分心。
- 类似实体旋钮的物理边界和触觉反馈。
- 抗干扰。
通过分析可以看出，车载环境要求安全、简单和抗干扰的交互方式。传统桌面和移动设备的触屏+GUI的方式并不适用，而实体旋钮的特点则十分适合。但实体旋钮的数量限制导致它通常仅用于关键或高频功能（温度、音量等）。所以核心问题变成了：怎样既获得物理旋钮的直观优势，又不增加相关的成本和空间需求？ 我认为是可以做到的，需要从两方面考虑：
- 设计虚拟旋钮模拟实体旋钮的使用体验和习惯。
- 改进UI设计，减少对视觉的依赖。
初步设计 - 模拟实体旋钮
数学模型
接下来我为旋钮建了一个简单的数学模型。虚拟旋钮可以用四个参数来完整描述：圆心位置c、半径r、旋转角度θ、对应数值v，即(c, r, θ, v)。
角度计算：旋钮的旋转角度通过相邻时刻的角度差值累积计算： Δθ = θ₁ - θ₀
数值映射：旋钮数值的变化与角度变化通过线性函数关联：
1
v₁ = v₀ + α × Δθ
其中：
- v₀, v₁：变化前后的数值
- θ₀, θ₁：变化前后的角度
- α：敏感度参数，控制角度到数值的转换比例
触摸屏实现算法：
- 计算所有触点间的距离，选择距离最大的两点p₁(x₁, y₁)和p₂(x₂, y₂)作为主向量（降低噪声影响）
- 旋钮圆心：c = ((x₁+x₂)/2, (y₁+y₂)/2)
- 旋钮半径：r = |p₁p₂|/2
- 旋转角度：通过主向量的角度变化计算Δθ
改进交互设计
传统的UI设计是以视觉为基础的，它的基本工作方式是“定位-操作”。具体的说，UI的元素位于屏幕的某个位置，用户需要先用视觉定位到需要操作的元素（如按钮、菜单等），再对那个元素进行操作（如双击、拖动等）。这种工作方式的特点是交互直观，应用场景丰富灵活（同时也带来比较高的认知负荷），对视觉依赖很严重。这种UI设计源于并适用于桌面和移动设备，但显然不适用于车载环境。在车载设备中，为了驾驶安全，需要尽量少的占用视觉注意力。改进方案如下：
- 虚拟旋钮没有固定位置，而是跟随手指的位置，这样可以减少用于定位的视觉注意力。
- 在屏幕上指定一块足够大的操作区域（足够做旋转操作，并为颠簸等干扰留出冗余空间），只要在操作区域中做旋转动作，就解释为旋转旋钮。操作区域可以从视觉、听觉、触觉方面加以区分。比如操作区域用显眼的颜色、条纹等作为背景；当手指接触操作区域时发出提示音；当在操作区域内操作时，有持续的震动反馈，当手指移出操作区域后，震动停止等。
- 因为应用场景会不断变化，同一操作区域会对应多种操作，需要定义激活动作（比如语音唤醒、从特定位置划入屏幕等），通过它激活操作区域。激活的操作区域可以是一个浮动的组件，在用户不需要它时，会自动消失，为其它应用让出空间。
- 通过不同的激活动作激活不同的旋钮，可以在不增加成本的同时，大大增加虚拟旋钮系统的容量。比如说“调整音量”，屏幕上就在特定位置显示出音量操作区域，在其中做旋转动作就可以调整音量；说“调整座椅”，屏幕上的特定位置就显示出座椅操作区域，在其中做旋转动作就可以调整座椅。不同的操作区域应明显可区分（比如用不同的背景，不同的提示音，不同的震动模式等）。
- 可以通过为屏幕增加震动等触觉反馈技术，增加虚拟旋钮操作的直观性和真实感。
初步结果
我用了大概两个星期在手机和平板上完成了虚拟旋钮的原型。我发现它效果惊艳，操作类似实体旋钮，直观自然；且性能良好，即使在低端手机上体验也很流畅，调整快速精确。相比在移动设备和桌面场景中常用来调整数值的Slider或Stepper之类的组件，其中Slider快速但不精确，Stepper精确但缓慢。并且因为使用旋转角度来调整数值，对横向和纵向的颠簸具有天然的抗干扰能力，非常适合车载环境。
进一步设计 - 超越实体旋钮
在完成初步设计之后，我意犹未尽，又做了一些思维上的拓展。初步设计的目标是模仿实体旋钮。原型的效果非常好，但它只用了旋转角度控制变量。虚拟旋钮还有位置（圆心c）和大小（半径r）可以改变，是否能把它们也利用起来？
我做了一些实验，在只需要轻度注意力的情况下，旋转、缩放和平移三种手势的特点和可以比较精确的控制的值的数量分别是:
- 旋转：最精确，抗干扰（颠簸、震动）能力最强。受每次旋转角度的限制，并且考虑到要为干扰预留空间，可控制的数量小于100，一般为30-80。
- 缩放：最不精确，抗干扰能力和使用方式有关。在手机这样的小屏幕情况下，可控制的值小于10。
- 平移：比较精确，但抗干扰能力差。在干扰很低的场景里，可控制的值小于旋转手势；在颠簸和震动的场景中则基本失效（很多播放器提供平移调整进度的功能，在车载环境里无法使用）。
基于以上实验，在干扰比较大的场景（如车载场景）中，旋转手势效果最好，其它手势效果比较差，应该避免；在普通场景（桌面应用、手持设备）中，旋转手势也比现有的调整手段（如stepper, slider）更精确且高效。
但在数值范围很大或精度很高的场合，以上所有手势都无法胜任。比如设置计时器的应用里，即便把时间范围缩小到一天，也有246060=86400秒。因为上述单个手势能精确控制的值的容量都只能到几十，无法对应到86400个值，只能要么缩小范围，要么降低精度。比如在苹果手机里的计时器，就把时间设置放在时分秒三个拨轮上，每个拨轮只需调整几十个值，但需分三次调整，导致效率低下。
但苹果手机的计时器也带来了启迪，如果把选择时分秒作为一个新维度，就可以把一个一维的有巨大范围的变量映射到二维的三个较小范围的变量中。这个思想同样可以用来扩展虚拟旋钮，具体的说就是利用虚拟旋钮的其它参数（c，r）引入新的维度，我称之为维度扩展。通过维度扩展，使得虚拟旋钮可表示的数值容量大大增加。
应用案例一：改进的定时器
仍以定时器为例，用旋钮的半径来选择小时、分钟或秒（比如，旋钮半径小于r1时，对应值为小时；旋钮半径在r1和r2之间，对应值为分钟；旋钮半径大于r2时，对应值为秒），用旋钮的旋转角度修改具体值。这时旋钮变为三个同心的环，用手指改变旋钮的大小可以方便地在不同的旋钮间切换。这样只用一个旋转手势就可以快速且精确的设置时间。
应用案例二：增强视频编辑
在视频编辑或监控浏览的应用里，常常需要以各种速度在视频中快进或快退。除了离散时间单位映射，还可以构造连续函数（简单起见，这里以线性函数为例）：
1
unit_t = β × r
其中：
- unit_t：时间单位（虚拟旋钮转动单位角度对应的时间）
- r：旋钮半径
- β：比例系数，根据应用场景调整
应用案例三：YAP媒体播放器
在我开发的视频播放器YAP中，同时用旋钮圆心的位置和大小来选择变量。播放时，当手指在屏幕左侧执行旋钮手势时，用较大的虚拟旋钮（手张开较大，旋钮半径大）控制音量，用较小的虚拟旋钮（手张开较小，旋钮半径小）控制亮度；类似的，当手指在屏幕右侧执行旋转手势时，用大中小三个虚拟旋钮分别对应1秒、30秒、10分钟控制前进或后退的进度。这样在播放器播放视频时，可快速精确地前进后退任意时间。
演示视频：
下载体验（免费应用，支持iOS/Android）：
VR/AR环境的拓展应用
因为虚拟旋钮只依赖指尖位置，它也能应用在VR/AR环境中。只要通过图像识别或其他手段得到指尖的实时位置，就可以计算出旋钮的旋转。在添加适当的激活和退出操作后，它在VR环境中也能操作自如。
未来展望
目前，我正在为旋钮手势申请专利。相信旋钮手势作为人机交互的一项基础技术，一定可以广泛地应用在桌面、移动、VR和未来的各种人机交互环境中，让人机交互变得更加有效和有趣！
后记：
本文按逻辑顺序重新整理了思考过程，但实际创新充满了跳跃性和偶然性！创新的过程是艰辛和坎坷的，但灵感闪现时的兴奋和产品完成时的满足总能带给我持续创新的动力！
p.s. 旋钮手势的介绍视频：
相关标签
人机交互 UI/UX设计 移动开发 车载系统
| *原创技术分享 | 欢迎转载请注明出处* |