visionOS: 理想的な UI デザインでは、非常に多くの詳細を考慮する必要があります

macOS、iPadOS、watchOS、iOS およびその他のシステムの開発経験を持つ Apple は、XR オペレーティング システムの設計においても固有の利点を持っており、XR システム インターフェイスを最初から構築する他の企業と比較して、Apple は、XR オペレーティング システムの設計から直接学ぶことができます。実証済みのデザイン美学。

同時に、WWDC 2023 で公開された一連の開発者チュートリアルから判断すると、同社は VST パースペクティブ モード UI のデザインについても深く考えています。この複合現実形式の背景は、VR のような制御可能な仮想シーンに設定されるのではなく、周囲の動的な環境に基づいているため、インターフェイスのデザインを再検討する必要があります。さらに、Vision Pro の目玉およびジェスチャー入力機能と組み合わせることで、visionOS の視覚的インタラクション体験は非常にユニークであり、他の XR システム設計にインスピレーションを与える可能性があります。

ここでは、visionOS UI のいくつかの機能を示します。

  • visionOS のインターフェイス デザイン要素は、サイドバー、タブ オプション、検索バー、その他の使い慣れた要素など、一部の iOS デザイン スタイルを維持します。
  • メニューインターフェイス(半透明ウィンドウ)のサイズは、実際の使用状況、表示コンテンツ、スペースに応じて調整でき、他の VR プラットフォームの固定サイズのインターフェイスよりも使いやすいです。さらに、異なるサイズのインターフェイスを同時に開いて、マルチタスクの効率を向上させることもできます。
  • インターフェイスは、デフォルトでユーザーの視線の高さおよび視野の中心に配置されます (ユーザーの実際の身長と姿勢を考慮して)。
  • Quest プラットフォームでは、ハンドルの Oculus ボタンをクリックしてメニューの位置をリセットできます。Vision Pro には公式のハンドルがありませんが、ヘッドセット本体のデジタル ノブをクリックすることでリダイレクトできます。
  • ユーザーが AR ウィンドウを特定の物理空間に正確に固定できるようにするために、visionOS はウィンドウが移動するときに微妙な変化を採用しており、たとえば、移動中にウィンドウが半透明になり、ユーザーがウィンドウの背後の環境を認識できるようになります。ウィンドウが再び高飽和になります。
  • AR 表示モードでは、visionOS システムは VST パースペクティブの透明度を自動的に下げ、表示エクスペリエンスをより没入型で集中させます。
  • visionOSでは、窓から周囲に投影される光や地面の影を空間に設置したスクリーンのように立体的に表現するなど、仮想と現実の融合を重視しています。または、写真やその他のコンテンツを表示するときに、写真の端をぼかします。
  • 弱い深度変更情報を完全に組み合わせて、ユーザーの注意を必要とするインターフェイスをユーザーの近くに配置し、他のインターフェイスを後から配置するなど、特定のインターフェイス要素を強調表示します。

01. インタラクションデザイン

visionOS 空間コンピューティング プラットフォームでは、ボタンを見て、ジェスチャーでタップするだけで入力できます。Vision Pro にはヘッドセットの下部にカメラが搭載されているため、腕を上げることなくジェスチャーを追跡できます。また、従来の VR システムで使用されていたカーソル投影制御方式と比較して、注視点はより自然な照準オプションとなり、マイクロジェスチャーと素早く連携することができます。

Vision Pro にはネイティブ ハンドルは装備されていませんが、入力方法のオプションは多数あります。注視点が主な照準方法であり、UI がユーザーからどれだけ離れていても、ユーザーの操作に応じて任意の部分を簡単に照準することができます。注視点情報。その後、音声入力に加えて、マイクロ ジェスチャを使用して選択を確認したり、手で UI 要素を直接操作したり、Bluetooth キーボード、マジック トラックパッド、またはゲームパッドを接続したりすることができます。

注視点の照準の精度を確保するために、Apple は Vision Pro ヘッドセットのセンサー設計を最適化しただけでなく、UI 設計においても次のような多くの考慮事項を講じました。

1) アプリケーションのメインコンテンツは視野の中心に配置する必要があります。空間コンピューティングには無限の余地がありますが、ユーザーが見ることができるのは視野内の画像だけであり、視野の最も中心部分だけです。視野は最も快適な視聴体験を提供します (下の写真では範囲内で 30 度)。

2) アプリケーションの二次コンテンツまたは操作メカニズムを視野の端に配置できます。

3) アプリケーションのレイアウトでは、肩と首の快適さも考慮する必要があります。

4) 人間の目は一度に 1 つの深度にしか焦点を合わせることができず、焦点距離を頻繁に変更すると視覚疲労を引き起こすため、ユーザーが手間をかけずに UI を切り替えられるように、インタラクティブ コンテンツは同じ深度に保つ必要があります。

5) 微妙な深さの変化を使用して、UI の階層を伝えることができます。

6) 注視点の選択に適した最小領域のサイズは少なくとも 60 pt である必要があり、開発者はこの範囲内でアイコンやその他の要素 (サイズ約 44 pt) をデザインし、要素と選択領域の端の間の距離を確保することができます。注視点の選択をより正確かつ迅速に行うことができるほど十分な幅があります。

7) UI は動的にスケーリングできます (小さく、遠くに) 開発者が UI 比率を固定することを選択した場合、インターフェイスが遠くに配置されると、視界が小さく見え、ボタンで制御するのが難しくなります。目;

8)visionOS インタラクティブ システムの本来の目的は、ユーザーが離れた場所から UI を快適に操作できるようにすることであり、仮想キーボード上での指による入力など、近距離での直接入力もサポートしています。

9) 人間の目の素早い動きにタイムリーに反応するために、ホバーハイライト/ハイライトを使用して注視点の動きを表現します。この効果はより自然で微妙です。

10)注視点は、ユーザの興味と意図を表す位置上に長時間留まる。

11) ある場所を長時間見つめていると、visionOS インターフェイスには、ツールチップ、タブ バーの展開、音声検索のトリガーなどの追加情報と機能が表示されます。注意が UI からそらされると、UI はクリーンでシンプルなインターフェイスを復元します。

12) Vision Pro ヘッドマウント ディスプレイでは、目と声で操作でき、長時間注視することで入力を確認するジェスチャを置き換えることもできるため、目だけで UI を制御できます。

13) Eyeball + Gesture Positioning は、visionOS システムの主要なインタラクション方法です。正確でユーザーフレンドリーなインタラクションを提供し、いくつかのインテリジェントな組み合わせアクションを実現すると主張しています。たとえば、画像をズームインおよびズームアウトする場合、最初にズームします。ユーザーの注視点から出入りする ; または、注視点を使用して描画カーソルを制御し、より効率的なクリエイティブ エクスペリエンスを実現することもできます。

14) Vision Pro ヘッドセットのジェスチャ インタラクション デザインは、おなじみの携帯電話のタッチ スクリーン操作に近く、たとえば、指をつまむ動作は携帯電話の画面をクリックすることに相当し、ドラッグしてつまむジェスチャは携帯電話の画面上でクリックすることに相当します。インターフェースを閲覧したり、両手でズームしたりできます。

15) ジェスチャーインタラクションのロジックはマルチタッチジェスチャーのロジックに似ているため、使いやすく、クリック、ダブルクリック、グラブ、ドラッグアンドドロップ、ズームイン、回転などの操作を混練を通じて実現できます。片手または両手の動作。

16) システム標準のジェスチャに加えて、開発者はジェスチャをカスタマイズすることもできます。

17) 仮想キーボードは、動的なハイライト効果を使用して距離を促し、指がキーを狙うように誘導します。

18) 長時間腕を上げると疲労が生じる可能性が高いため、近距離タッチ ジェスチャは適切に使用し、エクスペリエンスの中核となるゲームプレイでのみ使用する必要があります。ユーザーが疲れると感じるようなジェスチャの繰り返しを避けるか、疲労を感じるジェスチャを使用する必要があります。間違いを犯しやすい。

19) 空間コンピューティング プラットフォームでは、ソフトウェア アプリケーションはもはやウィンドウに限定されず、ユーザーがいる物理空間を占有し、ユーザーの体の動きに応答することができます。

20) 注視点入力の精度を確保するために、visionOS インターフェースでは主に角の丸いグラフィックを使用しています。正方形やその他の鋭利な形状を使用すると、注視点が外側に出て認識の精度が低下する可能性があるためです。さらに、図の外側に注目が集まることを避けるために、グラフィックスでは太い輪郭線の使用を避ける必要があります。

02. 空間UIデザイン

開発者が空間コンピューティング プラットフォームにより早く適応できるようにするために、Apple は、iOS などの既存のプラットフォームとの一貫性を特徴とする使い慣れたビジュアル言語を構築し、いくつかの要素が空間プラットフォーム用に最適化されています。

◎ 基礎と設計原則

1. アプリアイコン

visionOSのアプリアイコンはiOSに近いスタイルを採用していますが、最も大きな違いは形状が角丸長方形から円形に変更されたことであり、このデザイン変更の理由の一つは注視点をより正確にするためです。また、visionOS のアプリロゴは立体的で、側面からも盛り上がった表面が見え、注視点と動的に連動し、ロゴを見つめるとロゴが拡大してハイライトとシャドウを表示します。繊細さを深め、視覚的な階層を作ります。

簡単に言うと、visionOS のアプリロゴは通常、奥行きを表現するため、両眼視差効果を表現するために 3 つの平面レイヤー (1 つの背景レイヤー、2 つの表面レイヤー) で構成されています。さらに、「ガラス レイヤー」効果が重ね合わされて、奥行き、ハイライト、シャドウが表現されます。

2.背景素材

注目に値するのは、visionOS のアプリケーション ロゴは、物理的な遠近背景に直接重ね合わされるのではなく、すりガラスのような半透明のインターフェイスに固定されることです。Appleは、このデザインの利点は、軽さの感覚、物理的な空間の感覚、そして狭い空間、夜間、明るい日中などのさまざまな使用シナリオへの適応性であると指摘しています。さらに、半透明の機能は、物理空間が完全に遮断されるわけではありませんが、周囲光の動的浸透の効果をシミュレートできることを意味します。

ユーザーが空間エクスペリエンスで環境を適切に認識できるようにするために、Apple は開発者が単色のメニュー背景を使用することを推奨していません。

3. 文字組版

文字の可読性と背景とのコントラストを向上させるため、visionOSのフォントはiOSのフォントをベースに太字で強調されています。ただし、小さな説明文などはウィンドウを拡大しても読みにくい場合がありますので、フォントの太さや太さをできるだけ大きくすることをお勧めします。

特に、Apple は、より幅広い編集スタイルのレイアウトを特徴とする、visionOS 用の 2 つの新しいフォント スタイルも導入しました。

4. バイブランシーモード

原理は、テキストの光と色を強調することです (背景とのコントラスト)。これをオンにすると、テキストがより明るく見え、読みやすくなります。visionOS メニューのウィンドウの背景が周囲の環境に応じて外観を変えることを考慮して、テキストのバイタリティ モードもリアルタイムで明るさを調整し、テキストがはっきりと見えるようにします。

それだけでなく、バ​​イタリティ モードには 3 つの明るさレベルがあり、異なるキャラクター間の階層を明らかにします。

5. カラー

Apple は、開発者がテキストの色をシステムのデフォルトの白に設定することを推奨しています。これは、Apple が白いテキストの読みやすさを調整しており、背景ウィンドウのトーンとコントラストに動的に適応できるためです。

6. その他の提案:

  • ユーザーの首の可動範囲を考慮すると、ほとんどの人は頭を上下よりも左右に回すことに慣れているため、UI インターフェイスの配置は高すぎず、低すぎず、横型のレイアウトを選択するのが最適です。大規模なインターフェイスの垂直レイアウトの代わりに。
  • ホバー効果は視覚的なフォーカスフィードバックであり、ユーザーの注視点の位置をよく確認し、どの要素を操作できるかをユーザーに知らせることができます。
  • Apple は、インタラクティブ要素の角の形状だけでなく、慎重な UI デザインを要求しており、UI が均一に見えるように、上層と下層の角が同心円の一部である必要があります。
  • visionOS のすべてのシステム コンポーネントは、目玉、ジェスチャ、Bluetooth キーボード/タッチパッドなどを含むさまざまな入力方法をサポートしています。

03. 視覚体験デザイン

2D インターフェイスと比較して、空間コンピューティング プラットフォームには、奥行きや 360° の視野など、よりユニークなゲームプレイがあります。さらに、開発者は人体の制限を考慮する必要があります。そうしないと、XR アプリケーションのエクスペリエンスに影響を与える可能性があります。つまり、XR コンテンツのデザイン上の決定は、ユーザーの視覚的な快適さに大きな影響を与えます。

◎視覚的な奥行き感の手がかり

XR コンテンツは、正しい視覚的な奥行きの手がかり (人間の目が実際に焦点を当てているものと一致するもの) を提供する必要があります。どうやってするの?色、ブラー、相対的なサイズ、ソフト モーション、背景、光と影、オクルージョン、テクスチャ密度などの信号を使用して、ターゲットの位置と深さを視覚的に暗示します。たとえば、まばらなシーンでレモンのスライスが緑色で表示されると、人間の脳は自動的に現実のレモンと一致し、視覚的なサイズに基づいてレモンの深さを分析します。

開発者は、パターンの繰り返しなど、誤解を招く視覚的な合図を避ける必要があることに注意してください。そうしないと、左右の目が異なるオブジェクトに焦点を合わせた場合、認識される焦点距離がオブジェクトの実際の焦点距離と一致せず、結果としてゴーストが発生する可能性があります。

◎アプリケーションシナリオの最適化

さまざまなアプリケーション シナリオでは、視覚的な快適性を向上させ、眼圧を軽減するために、XR コンテンツの視覚パラメータを最適化する必要があります。たとえば、長時間注視する必要がある XR 読書などのアプリケーションでは、片腕の距離に電子書籍を置くのが最適です。同時に、ユーザーがインターフェイスの深さ/距離を調整できるようにします。対照的に、一時的な視覚効果や直接インタラクティブなコンテンツ (直接ジェスチャ入力をサポート) は人間の目の近くに表示できます。

さらに、テキストを表示する場合は高いコントラストを使用する必要があります。注意をそらす仮想信号の場合は、コントラストを下げたり、透明度を下げたり、ぼかし効果を追加したりするように設定できます。XR インターフェイスが暗い色から明るい色に切り替わるときは、人間の目がその移行に快適に適応できるように、切り替えプロセスを遅くするようにしてください。

空間内の画像の位置も特殊です。たとえば、人間の目は下、左、右を見るのが最も快適ですが、上を向いて斜めにスキャンすると、より多くの目の動きが必要になります。開発者は、XR アプリケーションの機能を設計するときにこれらを考慮して機能を強化する必要があります視覚的な体験。XR コンテンツで極端な目の動きが必要な場合は、短いインタラクションとしてデザインするか、目の動きを減らすために視野の中心にコンテンツが配置されないようにすることをお勧めします。

人間の目に一時停止があるようにするには、開発者は XR インタラクティブ エクスペリエンスに自然な一時停止を組み込む必要があります。

テキストを読むときに、テキストを拡大し、ウィンドウのサイズと深さを調整してテキストの視覚的な明瞭さを高め、ユーザーが読むために頻繁に頭を向けるのを防ぐことができます。

04. 動きを意識したデザイン

多くの人が XR に対して抱く印象は「めまいを起こしやすい」ですが、人間の感覚システムの特性と限界により、XR コンテンツ内での移動はエクスペリエンスの快適さに影響を与える可能性があります。Appleは、人間の視覚系は光を受け取り、人間自身の動きを含む周囲の動的なコンテンツを感知する役割を担っていると指摘した。同時に、内耳の前庭系も人間の動きを認識します。

通常、前庭系で知覚される視覚情報と運動情報は常に一致していますが、視覚運動情報が欠落していたり​​、前庭系の情報と矛盾したりすると、人は不快感を感じ、めまいや吐き気を引き起こします。

XR シーンでは、通常、人体は 1 つの位置に固定されていますが、視覚的には仮想コントロール内で体が動き回るため、明らかに動きの認識に矛盾が生じます。この目的を達成するために、Apple は、脳に XR シーンが比較的静的であると思わせるようにコンテンツを慎重に設計することで、ユーザーの快適性を最適化したいと考えています。たとえば、XR で移動オブジェクトを半透明に設定し、VST シーンがはっきりと見えるようにすることで、人間の脳が体の静的な状態を確実に認識できるようになります。

Appleは、開発者に対し、UIインターフェースがユーザーの頭の動きに追従しないようにすることを推奨しており、そのように設計する必要がある場合は、インターフェースのサイズを小さくして遠くに配置するか、遅延追従を使用することを推奨しています。ユーザーの頭の動きにゆっくり追従する方式です。

UIインターフェースの動きのデザインにも注意が必要で、例えば、ウィンドウ内の水平線と実際のシーンの水平線を一致させたり、コンテンツの動きの中心方向が画面の視野内に収まるようにする必要があります。人間の目では認識できないため、高速回転または純粋な回転動作を回避できます (高速フェードアウトを使用して瞬時のステアリングをレンダリングできます)。

同時に、視覚的な快適さを最適化するために、XR スポーツ要素では大規模なオブジェクトの使用を避け、低輝度コントラストの単色のテクスチャを使用して人間の目のスポーツ認識を軽減する必要があります。

つまり、開発者コースでは、visionOS の設計ロジックが非常にわかりやすく説明されており、そこから Apple の AR と VR の設計思想が見えてきます。Apple はほとんどのファーストパーティ アプリケーションとサービスをvisionOS に統合したと言えます。

今月末にリリースされるvisionOS SDKを楽しみにしている開発者も増えていると思いますが、iOSアプリケーションを移行しようとしているのか、visionOS用に開発しようとしているのかに関係なく、それまでに開発者はより完全な検討を行うことができるようになります。やっぱり自分で試してみたほうが説得力がありますね。

参考:アップル

おすすめ

転載: blog.csdn.net/qingtingwang/article/details/131312242