手势交互界面的光标设计#

点击 --> 星标 ,收藏知识

如何设计垃圾的用户体验?

用户采纳AI建议的研究

如何构建用于伦理推测的设计小说?

HCI Deep Dives#一个专注于人机交互(HCI)领域播客节目

个性化技术如何在不同领域"搞事情"?

构建一个可解释的AI系统的简明指南

如果你在设计手势交互相关的系统,这篇论文里提到的 动态光标区域 和 控制显示增益,能帮你改进用户体验。

https://youtu.be/xxgR7d-_1UM?si=waz_ocIvjPGrdvu6

https://dl.acm.org/doi/10.1145/3706598.3714021

手势交互界面的光标设计建议:

Control-Display Gain

什么是CDG,简单点理解就是光标的移动增量。

研究表明,提高控制-显示增益(CDG),有助于提高手势交互的性能。需要根据显示器尺寸和界面布局,选择适当的增益水平。

以下是根据显示器尺寸、任务类型和目标密度给出的具体建议:

整体原则:

1 提高增益可以最大限度地减少手臂移动,尤其是在大型显示器上。

2 动态区域光标通过隐式定位最近的对象,帮助补偿因高增益可能导致的定位不准确或目标遗漏。用户知道不需要将光标精确移动到目标上,可以用更小的移动进行交互。

3 目标密度会影响性能。更密集的布局会限制区域光标的大小,降低其优势。确保 UI 元素之间有足够的空间,可以帮助区域光标补偿定位不准确性。研究建议,目标密度的合理上限约为 0.3,超过此值性能可能开始下降。

按显示器尺寸和任务类型划分的设计建议

小型显示器 (~27英寸):目标物理距离较近。

适合较低的增益 (~1--1.5),输入更快。

粗略指向任务(目标较少/较大): 增益约 1--2.513。布局建议:目标可以靠边放置,边缘留出额外空间。优点:快速指向,光标有更多扩张空间。

精细指向任务(目标较多/较小): 增益约 1--1.513。布局建议:目标放在屏幕中央或用户躯干前方,以减少物理移动。优点:提高精度,更受控的手部移动。

密度建议: 低 (~≤0.15--0.3)13。对于精细任务,密度应更低 (~≤0.1)13。


大型显示器 (~55英寸):目标物理距离较远。

适合较高的增益 (~1.5--3.5),区域光标特性支持用户在屏幕上移动更远距离。

粗略指向任务: 增益约 2.5--3.5。布局建议:目标可以靠边放置,边缘留出额外空间。优点:改善人机工程学,光标有更多扩张空间。

精细指向任务: 增益约 1.5--2.5。布局建议:目标放在屏幕中央或用户躯干前方。优点:平衡精度与人机工程学。

密度建议: 适度 (~≤0.45)。对于精细任务,密度应较低 (~≤0.3)。

用户在大型显示器上更能利用区域光标的特性,进行更远距离的指向。

其他布局考虑:

目标不应放置得离屏幕边缘太近,这样即使光标超出目标,用户仍能看到区域光标并进行辨别。

在局部密集的布局中,界面"外部"边缘额外的空间可能会鼓励用户故意稍微移过头,以避开干扰项,让区域光标有更多扩张空间。



动态增益的可能性:

尽管论文研究测试的是恒定增益,但结果表明不同任务对增益的需求不同(例如,调整滑块的精细任务中高增益可能更不利)。

动态调整增益以适应不同的输入任务(例如,粗略定位使用较高增益,精细调整使用较低增益)可能有助于提高可用性。例如,在密集区域(如键盘)附近使用较低增益,在其他区域使用较高增益。这是一个有潜力的未来研究方向。

总而言之,合理选择并结合使用动态区域光标和适当的增益,可以提高手势交互的效率和舒适度,尤其是在大型公共显示器上。

欢迎加入社群,探索下一代人机交互

shadow: " 迫不及待的想给最近做的 伪3D 显示加上手势交互了"

相关推荐
晚霞的不甘18 小时前
Flutter for OpenHarmony 实现高级视差侧滑菜单:融合动效、模糊与交互动画的现代 UI 设计
flutter·ui·前端框架·交互·鸿蒙
木斯佳19 小时前
HarmonyOS 6实战(源码教学篇)— PinchGesture 图像处理【仿证件照工具实现手势交互的canvas裁剪框】)
图像处理·交互·harmonyos
听麟19 小时前
HarmonyOS 6.0+ PC端手绘板协同创作工具开发实战:压感交互与跨端流转落地
华为·交互·harmonyos
晚霞的不甘19 小时前
Flutter for OpenHarmony构建全功能视差侧滑菜单系统:从动效设计到多页面导航的完整实践
前端·学习·flutter·microsoft·前端框架·交互
灰灰勇闯IT20 小时前
Flutter for OpenHarmony:悬浮按钮(FloatingActionButton)最佳实践 —— 强化核心操作,提升用户效率
flutter·华为·交互
雨季66620 小时前
Flutter 三端应用实战:OpenHarmony “心流之泉”——在碎片洪流中,为你筑一眼专注的清泉
开发语言·前端·flutter·交互
听麟1 天前
HarmonyOS 6.0+ PC端系统级桌面插件开发实战:ArkUI Widget进阶与系统交互深度集成
华为·交互·harmonyos
RFCEO1 天前
前端编程 课程十四、:CSS核心基础2:选择器优先级 + 伪类选择器(解决冲突+交互效果)
前端·css·交互·css选择器优先级判断规则详解·css important使用·css链接伪类lvha顺序·实现悬浮交互效果
HyperAI超神经1 天前
【TVM教程】设备/目标交互
人工智能·深度学习·神经网络·microsoft·机器学习·交互·gpu算力
小雨下雨的雨1 天前
HarmonyOS 应用开发实战:高精图像处理与头像裁剪持久化技术深度解析
图像处理·人工智能·华为·ai·交互·harmonyos·鸿蒙系统