WWDC25:Design hover interactions for visionOS

visionOS に関連するセッションビデオから。カスタムでホバーエフェクトが実装できるようになったとは、登場当初から期待していたが、いざ対応されると驚きだった。これまでは形状しかカスタマイズできなかった。ウェブアプリと同様にホバー表現が多様化するだろう、視線操作においてどんなインタラクションが有効であるかは良い題材になりそうだ。


0:33 – 基本知識

  • 重要なコンテンツは正面に配置し、インタラクティブ要素は丸みのある形状(円、ピル、角丸長方形)を推奨
  • 正確な操作のため、各要素は最低60ポイントのスペースを確保
  • 3Dオブジェクトも同様に、60ポイントは1m先で約4.4cmに相当
  • すべてのインタラクティブ要素にハイライト効果を適用し、カスタムコンポーネントや3Dオブジェクトにも同様の効果を追加

1:57 – カスタムエフェクト

  • 標準のハイライト効果に加え、独自のアニメーション(カスタムホバーエフェクト)を作成可能
    • standard appearance
    • hovered appearance
  • カスタムエフェクトは、アクション実行には使えない
    • 例: ダウンロードボタンを見つめただけではダウンロードは実行できない
  • アニメーションは3タイプ、用途により使い分け
    • 即時 instant: 見たら即時アニメーション
      • ボタンの先にさらに選択肢があることを示すインジケータの表示
      • 動画シークバーに残り時間のtooltipを表示
    • 遅延 delayed: 遅れて表示
      • ボタン下に表示されるタイトル tooltip
      • Safari profile button
    • 段階的 ramp: インスタントx遅延の段階展開
      • Environment icons: はじめ拡大だけ→しばらく後カプセル型に展開
  • ベストプラクティス:
    • アンカー要素を組み込む: e.g. タイトル
    • テキストの位置を固定
    • 隠れた要素は可視要素から表示か、見た即時に表示
    • 効果は控えめに
    • 予期しない動きを避ける
  • 実機でのテストと細かな調整が重要

9:37 – 注視してスクロール

  • 「Look to Scroll」機能で、視線だけでスクロールが可能に
  • スクロールビューの端を見つめると自動でスクロールが始まる
  • 主にリーディングやブラウジング用途のビューで有効化を推奨
  • UIコントロールが多いリストや、パララックスなど特殊なアニメーションを伴うビューには不向き
  • スクロールビューはウィンドウ全体を使い、明確な境界を設けると自然な体験になる

12:23 – 持続的なコントロール

  • 動画プレイヤーなどの自動非表示UIは、ユーザーが注視している間は表示を持続し、視線を外すと非表示に
  • 標準では手を加えずに適用されるが、カスタムコントロールの場合は、持続表示の挙動を自分で有効化する必要がある
  • メディアコントロールやセッションコントロールなど、遅延非表示UI全般で推奨

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です