可互動的物件Interactable object

Interactible 物件

按鈕一直以來都是用來觸發2D 抽象世界中事件的比喻。A button has long been a metaphor used for triggering an event in the 2D abstract world. 在三維混合現實世界中,我們不再需要局限于這種抽象概念。In the three-dimensional mixed reality world, we don’t have to be confined to this world of abstraction anymore. 任何專案都可以是觸發事件的 互動物件Anything can be an interactable object that triggers an event. 互動物件可以是來自資料表咖啡杯的任何事物,以及 midair 中的氣球。An interactable object can be anything from a coffee cup on a table to a balloon in midair. 我們仍會在某些情況下(例如在對話方塊 UI 中)使用傳統按鈕。We still do make use of traditional buttons in certain situation such as in dialog UI. 按鈕的視覺標記法視內容而定。The visual representation of the button depends on the context.



互動物件的重要屬性Important properties of the interactable object

視覺提示Visual cues

視覺提示是從燈光感應式的提示,由眼睛所接收,並由視覺效果系統在視覺感知期間處理。Visual cues are sensory cues from light, received by the eye, and processed by the visual system during visual perception. 由於視覺系統在許多物種中是主要的,尤其是人們的視覺提示,是世界的認知方式的一大來源資訊。Since the visual system is dominant in many species, especially humans, visual cues are a large source of information in how the world is perceived.

因為全像是混合的真實世界環境混合,所以很難瞭解您可以與哪些物件互動。Since the holographic objects are blended with the real-world environment in mixed reality, it could be difficult to understand which objects you can interact with. 針對您體驗中的任何互動物件,請務必為每個輸入狀態提供差異的視覺提示。For any interactable objects in your experience, it's important to provide differentiated visual cues for each input state. 這可協助使用者瞭解您的體驗的哪個部分是互動,並使用一致的互動方法來確保使用者的信心。This helps the user understand which part of your experience is interactable and makes the user confident by using a consistent interaction method.



遠的互動Far interactions

對於使用者可以與注視、手光線和移動控制器光線互動的任何物件,建議您對這三種輸入狀態使用不同的視覺提示:For any objects that user can interact with gaze, hand ray, and motion controller's ray, we recommend having different visual cue for these three input states:

interactibleobject-狀態-預設值interactibleobject-states-default
預設 (觀察) 狀態Default (Observation) state
物件的預設閒置狀態。Default idle state of the object. 資料指標不在物件上。The cursor isn't on the object. 未偵測到手。Hand isn't detected.

interactibleobject-狀態-目標interactibleobject-states-targeted
目標 (將滑鼠停留) 狀態Targeted (Hover) state
當物件以注視游標、手指鄰近或移動控制器的指標為目標時。When the object is targeted with gaze cursor, finger proximity or motion controller's pointer. 資料指標位於物件上。The cursor is on the object. 偵測到手、準備就緒。Hand is detected, ready.

interactibleobject-狀態-已按下interactibleobject-states-pressed
已按下的狀態Pressed state
當您按下滑鼠按鍵時,按一下滑鼠右鍵或移動控制器的選取按鈕。When the object is pressed with an air tap gesture, finger press or motion controller's select button. 資料指標位於物件上。The cursor is on the object. 偵測到手,以空調的方式進行。Hand is detected, air tapped.



您可以使用醒目提示或調整之類的技術,提供使用者輸入狀態的視覺提示。You can use techniques such as highlighting or scaling to provide visual cues for the user’s input state. 在混合的現實情況下,您可以在 [開始] 功能表和使用應用程式列按鈕的情況下,找到將不同輸入狀態視覺化的範例。In mixed reality, you can find examples of visualizing different input states on the Start menu and with app bar buttons.

以下是這些狀態在「全像全像」 按鈕 上的樣子:Here's what these states look like on a holographic button:

interactibleobject-狀態-預設值interactibleobject-states-default
預設 (觀察) 狀態Default (Observation) state

interactibleobject-狀態-目標interactibleobject-states-targeted
目標 (將滑鼠停留) 狀態Targeted (Hover) state

interactibleobject-狀態-已按下interactibleobject-states-pressed
已按下的狀態Pressed state



接近互動 (直接) Near interactions (direct)

HoloLens 2 支援明確的手追蹤輸入,可讓您與物件互動。HoloLens 2 supports articulated hand tracking input, which allows you to interact with objects. 如果沒有 haptic 的意見反應和完美的深度感知,就很難分辨出您手中的手離物件或您是否觸及。Without haptic feedback and perfect depth perception, it can be hard to tell how far away your hand is from an object or whether you're touching it. 請務必提供足夠的視覺提示來傳達物件的狀態,特別是以該物件為依據的實際狀態。It's important to provide enough visual cues to communicate the state of the object, in particular the state of your hands based on that object.

使用視覺效果意見反應來傳達下列狀態:Use visual feedback to communicate the following states:

  • 預設 (觀察):物件的預設閒置狀態。Default (Observation): Default idle state of the object.
  • 停留:當手近了全像影像時,變更視覺效果以傳達該手的目標是全像全像。Hover: When a hand is near a hologram, change visuals to communicate that hand is targeting hologram.
  • 距離和互動點:當手進行全像投影、設計意見反應以傳達預期的互動時間點,以及物件與手指之間的距離Distance and point of interaction: As the hand approaches a hologram, design feedback to communicate the projected point of interaction, and how far from the object the finger is
  • 連絡人開始:變更視覺效果 (淺色、色彩) ,以傳達觸控已發生的情況Contact begins: Change visuals (light, color) to communicate that a touch has occurred
  • Grasped:在 Grasped 物件時,變更視覺效果 (淺色、色彩) Grasped: Change visuals (light, color) when the object is grasped
  • 連絡人結束:當觸控結束時,變更視覺效果 (淺色、色彩) Contact ends: Change visuals (light, color) when touch has ended


將游標暫留 () Hover (Far)
將游標暫留 ()Hover (Far)
根據手近距離的醒目提示。Highlighting based on the proximity of the hand.

將滑鼠停留 (附近) Hover (Near)
將滑鼠停留 (附近)Hover (Near)
根據右邊的距離醒目提示大小變更。Highlight size changes based on the distance to the hand.

觸控/按下Touch / press
觸控/按下Touch / press
視覺效果加上音訊意見反應。Visual plus audio feedback.

把握Grasp
把握Grasp
視覺效果加上音訊意見反應。Visual plus audio feedback.




HoloLens 2 上的按鈕是如何視覺化不同輸入互動狀態的範例:A button on HoloLens 2 is an example of how the different input interaction states are visualized:

DefaultDefault
預設值Default

暫留Hover
暫留Hover
顯示以鄰近性為基礎的光源效果。Reveal a proximity-based lighting effect.

觸控Touch
觸控Touch
顯示 ripple 效果。Show ripple effect.

按鍵Press
按鍵Press
移動 front 盤子。Move the front plate.



HoloLens 2 上的「環形」視覺提示The "ring" visual cue on HoloLens 2

在 HoloLens 2 上有一個額外的視覺提示,可協助使用者深入瞭解。On HoloLens 2, there's an extra visual cue, which can help the user's perception of depth. 當 fingertip 接近物件時,靠近其 fingertip 的環形會顯示並縮小。A ring near their fingertip shows up and scales down as the fingertip gets closer to the object. 當觸達已按下的狀態時,環形最終會聚合成點。The ring eventually converges into a dot when the pressed state is reached. 此 visual affordance 可協助使用者瞭解它們與物件之間的距離。This visual affordance helps the user understand how far they are from the object.

影片迴圈:根據鄰近範圍方塊的視覺效果意見反應範例Video loop: Example of visual feedback based on proximity to a bounding box

spacespace
關於手近距離的視覺回饋Visual feedback on hand proximity



音訊提示Audio cues

針對直接互動,適當的音訊意見反應可大幅改善使用者體驗。For direct hand interactions, proper audio feedback can dramatically improve the user experience. 使用音訊意見反應來傳達下列提示:Use audio feedback to communicate the following cues:

  • 連絡人開始:觸控開始時播放音效Contact begins: Play sound when touch begins
  • 連絡人結束:觸控端播放音效Contact ends: Play sound on touch end
  • 抓取開始:抓取開始時播放音效Grab begins: Play sound when grab starts
  • 抓取結束:抓取結束時播放音效Grab ends: Play sound when grab ends


語音命令Voice commanding

針對任何互動物件,請務必支援替代的互動選項。For any interactable objects, it's important to support alternative interaction options. 根據預設,我們建議針對任何互動的物件支援 語音命令By default, we recommend that voice commanding be supported for any objects that are interactable. 若要改善可搜尋性,您也可以在停留狀態期間提供工具提示。To improve discoverability, you can also provide a tooltip during the hover state.

影像: voice 命令的工具提示Image: Tooltip for the voice command

語音命令



大小調整建議Sizing recommendations

為了確保所有的互動物件都能輕易地觸及,建議您確定互動符合其與使用者的距離,以符合最小的大小。To ensure all interactable objects can easily be touched, we recommend making sure the interactable meets a minimum size based on the distance it's placed from the user. 視覺角度通常是以視覺弧線的角度來測量。視覺角度取決於使用者的眼睛和物件之間的距離,並保持不變,而目標的實體大小可能會隨著使用者的距離變更而改變。The visual angle is often measured in degrees of visual arc. Visual angle is based on the distance between the user's eyes and the object and stays constant, while the physical size of the target may change as the distance from the user changes. 若要根據與使用者之間的距離來判斷物件的必要實體大小,請嘗試使用視覺角度計算機(如 這一)。To determine the necessary physical size of an object based on the distance from the user, try using a visual angle calculator such as this one.

以下是互動內容的最小大小建議。Below are the recommendations for minimum sizes of interactable content.

直接接觸互動的目標大小Target size for direct hand interaction

距離Distance 視角Viewing angle 大小Size
45 cm45 cm 小於2°no smaller than 2° 1.6 x 1.6 cm1.6 x 1.6 cm

直接接觸互動的目標大小Target size for direct hand interaction
直接接觸互動的目標大小Target size for direct hand interaction


按鈕的目標大小Target size for buttons

建立直接互動的按鈕時,建議使用較大的大小(3.2 x 3.2 cm),以確保有足夠的空間可包含圖示且可能有一些文字。When creating buttons for direct interaction, we recommend a larger minimum size of 3.2 x 3.2 cm to ensure that there's enough space to contain an icon and potentially some text.

距離Distance 最小大小Minimum size
45 cm45 cm 3.2 x 3.2 cm3.2 x 3.2 cm

按鈕的目標大小Target size for the buttons
按鈕的目標大小Target size for the buttons


手動光線或注視互動的目標大小Target size for hand ray or gaze interaction

距離Distance 視角Viewing angle 大小Size
2分鐘2 m 不小於1°no smaller than 1° 3.5 x 3.5 cm3.5 x 3.5 cm

手動光線或注視互動的目標大小Target size for hand ray or gaze interaction
手動光線或注視互動的目標大小Target size for hand ray or gaze interaction



MRTK 中的互動物件 (Unity 的混合現實工具組) Interactable object in MRTK (Mixed Reality Toolkit) for Unity

MRTK 中,您可以使用腳本 互動 讓物件回應各種類型的輸入互動狀態。In MRTK, you can use the script Interactable to make objects respond to various types of input interaction states. 它支援各種類型的主題,可讓您藉由控制物件屬性(例如色彩、大小、材質和著色器)來定義視覺狀態。It supports various types of themes that allow you define visual states by controlling object properties such as color, size, material, and shader.

MixedRealityToolkit 的標準著色器提供各種選項,例如可協助您建立視覺和音訊提示的 相近光源MixedRealityToolkit's Standard shader provides various options such as proximity light that helps you create visual and audio cues.



請參閱See also