在跳躍動作上觸摸手勢的更好方法

Question

我正在嘗試開發一個菜單，在該菜單中我可以將鼠標懸停在圖標上，然后通過向前移動來單擊它們。 為此，我使用了我的手在z軸上的速度，以及您在此代碼段中看到的觸摸區域和觸摸距離。

var controller = new Leap.Controller({ enableGestures: flag });

controller.on('frame', function(frame) {
  if (frame.pointables.length > 0) {
    var pointable = frame.pointables[0];

    // Params used to navigation and touching on menu interfaces
    var touchZone = pointable.touchZone, // None, hovering, or touching
        touchDistance = pointable.touchDistance, // [+1, 0, -1]
        zNotFinger= pointable.tipVelocity[0], // For the case pointable isnn't a hand
        zIndex = pointable.tipVelocity[1], // Index finger velocity on z-axis
        zMiddle = pointable.tipVelocity[2], // Middle finger velocity on z-axis
        x = pointable.tipPosition[0],
        y = pointable.tipPosition[1],

        // Getting highest tipVelocity
        tempVelocity = zIndex >= zNotFinger ? zIndex : zNotFinger,
        velocity = zMiddle > tempVelocity ? zMiddle : tempVelocity;

    // The circle is defined as a gesture to go back to homepage
    if (frame.hands.length === 1 && origin !== 'home' && frame.gestures.length > 0) {
      var gesture = frame.gestures[0],
          hand = frame.hands[0],
          oneExtended = hand.fingers[1].extended && !hand.fingers[3].extended;

      if (gesture.type === 'circle' && oneExtended && gesture.pointableIds.length >= 1) {
        window.open('../html/home.html','_self');
      }
    }

    // Sending data...
    if (origin === 'home') {
      homeHover(x, y, touchZone, touchDistance, velocity);
    } else if (origin === 'bio') {
      bioHover(x, y, touchZone, touchDistance, velocity);
    } else if (origin === 'nature') {
      natureHover(x, y, touchZone, touchDistance, velocity);
    }

  }
});
controller.connect();

}

接着...

if (velocity > 150) {
if ($(".hovered").attr("href") && touchZone === 'touching' && touchDistance <= -0.4) {
  window.location.replace($(".hovered").attr("href"));
}

}

主要問題是在將鼠標懸停在圖標上時，意外地“單擊”了鏈接，或者將需求設置得太高而難以點擊。

有人可以幫我嗎？ 也許我應該使用新方法，甚至是完全不同的方法。

OBS：我已經嘗試過screenTap和keyTap。

非常感謝！

Answer 1

太難或太容易單擊是一個常見問題。 內置水龍頭也有同樣的問題。

您可以探索穩定的TipPosition而不是速度（或除了速度之外），並使用戶在懸停后向前移動預定的量。 使用穩定的提示位置應使用戶更容易向前推動，而不會意外移開目標。 僅當運動主要沿z軸移動時單擊才能大大減少意外的單擊，既包括在用戶移動到目標菜單項時發生的點擊，也包括在用戶僅移動其手時發生的意外單擊（與菜單無關）。

菜單的其他常見方法包括：

1. 將鼠標懸停以激活-光標顯示倒數指示器，用戶只需將光標停留在菜單項或按鈕上所需的時間即可。 它可以工作，但是有點笨拙，並且讓用戶在決定要做什么時會稍等一下。 這是最常見的方法之一，可以在Leap Motion應用程序商店的許多應用程序中看到。
2. 拉出即可激活-用戶將鼠標懸停在菜單項上，然后用手指將其“拖動”到側面以激活。 您可以在Sculpting應用程序中看到此類菜單的示例。
3. 物理-菜單和按鈕通過3D空間中的“觸摸”（碰撞）激活。 這項技術在VR風格的應用程序中效果很好，因為用戶對深度的感知更好。 它也可以用於非VR 3D應用程序（經過精心設計）。 您可以制作一個混合2D-3D Web應用程序，其中內容本質上是2D，但是指針是3D並顯示在內容上方。

這里有一些菜單設計指南（較舊）： https : //developer.leapmotion.com/documentation/javascript/practices/Leap_Menu_Design_Guidelines.html

還有幾個示例（雖然不是所有菜單）： https : //developer.leapmotion.com/gallery/category/javascript