Design for the iPadOS pointer

ハイライト

iPadOS ポインタは、アダプティブ精度を使用してボタン、テキスト、カスタム領域、ジェスチャ全体の精度を動的に調整し、ハイライト、リフト、ホバー、カスタム シェイプ、およびトラックパッド ジェスチャを使用して間接入力にタッチ インターフェイスを適応させます。

主要内容

The iPad’s interface is built for your fingers first. Buttons have larger click areas, space is left between controls, and dragging and selecting both accept a fingertip-sized input by default. When the trackpad comes to iPadOS, the question isn’t just “can it click?”従来のデスクトップ ポインタはピクセル単位で正確ですが、多くの iPad コントロールは、どのボタン、どのテキスト行、またはユーザーがどの時間帯をクリックしたかを知るだけで済みます。

Apple の答えは、Adaptive Precision です。 The pointer is usually a circle close to the size of a fingertip;ボタンに近づくと、ボタンにスナップしてボタンの形状に変わります。 when moved to the text, it will turn into a beam that matches the line height;カスタム スケジュール ビューに入ると、15 分のブロックにスナップできます。ポインタの精度はインターフェイスのセマンティクスによって変化するため、ユーザーは数ピクセルの境界でマウスを停止する必要はありません。

このセッションでは、ポインターを 3 つの層に分割します。最初のレベルは設計原則です。ポインタはタッチに代わるものではなく、タッチを補完するものである必要があります。 2 番目のレイヤーは視覚効果です。ハイライト、リフト、ホバー、カスタム シェイプはそれぞれ、異なるサイズ、背景、インタラクション密度のコントロールとして機能します。 3 番目のレイヤーはインタラクション アクセラレーションです。ホバーで事前にツールバーを表示でき、2 回目のクリックでコンテキスト メニューを直接開くことができ、2 本指のジェスチャはポインタが置かれているビューを基準にして有効になる必要があります。

If your app already makes heavy use of standard UIKit controls, basic pointer behavior for buttons and text is available for free. The areas that really require design judgment are customized canvases, dense toolbars, table borders, maps, readers, and schedule interfaces.これらの領域では、ポインタをどこにスナップするか、どのような形状にするか、ホバー フィードバックを表示するかどうか、トラックパッドとタッチ ジェスチャをどのように一貫させるかを決定する必要があります。

詳細

1. Adaptive Precision 先解决误点问题

(03:36) 従来のポインタと iPad コントロールの間には精度の不一致があります。ポインタはピクセル単位で移動し、ボタンはどの領域にヒットするかのみを考慮します。 iPadOS はデフォルトでポインタを円形に設計しており、ボタン グループに近づくとボタンに引き寄せられ、ボタンの輪郭に変形します。形状の変化自体はフィードバックであり、現在どのコントロールがターゲットになっているかをユーザーに伝えます。

(05:10) テキストの選択には別の精度が使用されます。ポインタが TextView に入ると、行の高さに一致するビームになります。垂直方向では行ごとに吸収され、水平方向ではピクセルレベルの精度が維持されます。これにより、前または次の行をクリックできなくなるだけでなく、特定の文字位置に挿入ポイントが配置されます。

(06:55) 標準 UIKit コントロールは、ボタンとテキストの動作に直接アクセスできます。カスタム ビューは、独自のセマンティクスを表現する必要があります。セッション スケジュール ビューの例は、垂直方向に 15 分の範囲にスナップするため、ユーザーはイベントをドラッグして作成するときに開始時間が 2:15 になるのか、2:30 になるのかを事前に知ることができます。

2. ポインタの背後には、モデル ポインタ、スナップ、センタリング、および磁気があります。

(08:50) 画面に表示されているのは目に見えるポインターであり、システム内には目に見えないモデル ポインターがあります。モデル ポインターは実際の位置を記録し、ホバーがどのヒット領域にヒットしたかを判断するために使用されます。目に見えるポインタは、視差を使用して実際の位置がまだ端にあることを示しながら、ターゲット コントロールにアニメーション化できます。

(10:11) 再センタリングにより、ユーザーが指を離した後にポインターがコントロールの中央に配置され、次のクリック時に指がわずかにスクロールするためにボタンから離れる可能性が低くなります。また、ユーザーに「今すぐトラックパッドを使用する」ことを常に通知することを避けるために、ポインタは自動的に非表示になり、タッチ、Apple Pencil、ポインタを自然に切り替えることができます。

(12:10) iPadOS は macOS の加速曲線を再利用し、慣性と磁気を追加します。慣性により、ユーザーは 1 回の素早いスワイプでより長い距離を移動できるようになります。磁気は、投影された位置とスライド方向に基づいて近くのターゲットをスキャンし、最も可能性の高いスナップ可能な要素にポインターを配置します。ポインターのスナップをサポートするコントロールはすべて、この動作を行います。

3. 3 つのポインター効果は異なるコントロール サイズに対応します

(14:23) ポインター効果は、ホバー時のポインターとコンテンツの間のフォーカス状態の合成です。ハイライトは、バー ボタンやタブ バーなど、背景のない小さなコントロールに適しています。ポインタはコンテンツの背後に移動し、コントロールの背景となり、視差と光効果を通じてジェスチャの位置を接続します。

(15:40) Lift は、アプリ アイコンやコントロール センター モジュールなど、既に背景がある中型の要素に適しています。ポインタが要素の後ろに消え、要素が拡大して影が投影され、色によって背景にラジオシティが作成されます。鏡面反射光は、下にあるポインタの真の位置を表示するという 2 番目のタスクも実行します。

(17:16) ホバーは、形状に直接変化するポインターがあるとパフォーマンスが低下する大きなオブジェクトに適しています。ホバーはオブジェクトの外観のみを変更し、ポインタはデフォルトの形状のままでオブジェクト上に留まります。また、スケール、シャドウ、色合い、カスタム形状を組み合わせることもできます。

4. まず自動エフェクトを試してから、一貫性とヒット領域に対処します。

(17:55) Apple は、最初に自動効果を使用することをお勧めします。効果はオブジェクトのタイプ、場所、サイズ、形状に基づいて選択され、これらのルールは将来更新される予定です。手動による指定は、自動結果がコンテキストと矛盾する場合にのみ必要です。

(18:31) Books のブックマーク アイコンには独自の背景があるため、Lift を使用できるように見えます。ただし、これはツールバーにあり、その隣のボタンはハイライトを使用します。グループとの一貫性を保つために、ハイライトも使用する必要があります。セグメント化されたコントロールの選択されたオプションは反例です。長方形のオブジェクトの周囲に Highlight をラップするのは冗長であり、Lift の方が適切です。

(20:01) ヒット領域は、ポインター エフェクトの有効範囲に影響します。小さすぎるとユーザーは非常に正確でなければならないと感じ、大きすぎるとポインタを外すのが難しくなります。ベゼルのある要素は約 12 ポイントのパディングを考慮でき、ベゼルのない要素は約 24 ポイントのパディングを考慮できます。ポインタが中央の円に戻って不要なアニメーションが発生するのを防ぐため、同じグループ内のオブジェクト間に穴を残さないでください。

5. カスタム ポインターを使用すると、形状で意図を直接表現できます。

(24:28) iPadOS ポインターのマテリアルは、背景に基づいて色を自動的に調整し、コンテンツをブロックせずにコントラストを維持します。ボタンの形に変わると、ラベルが読みやすくなるように色が明るくなります。クリックすると、円が縮小して暗くなり、明確なクリック フィードバックが得られます。

(25:40) デフォルトの円はタッチを表します。角丸長方形、垂直棒、水平丸薬、または任意の形状にすることができます。十字形状の方がより精度の高い領域を表現できます。三角形のペアはドラッグ方向を表すことができます。また、Command キーを押してポインタの機能を変更すると、形状がモードの変更を示すこともあります。

(28:03) カスタム ポインターの形状はシンプルで理解しやすいものにし、立体的な形状を使用するようにしてください。デフォルトのポインタは 19 ポイントの円です。細い図形は視覚的な重みを維持するためにサイズを変更する必要があり、セッションの×マークは 24 ポイントです。アンカー ポイントには注意してください。方向性のある形状では、変形が偏心しているように見えます。中心のターゲット形状で表現できる場合は、中心のアンカーポイントを維持することを優先します。

(30:02) テキストを読み取って注釈を付ける例は非常に具体的です。ポインタをマーカー ペンのグリフにする代わりに、マーカーの先端の形状にした方がよいでしょう。後者はテキスト選択の高さも表し、I ビームのスナップおよび適応精度の動作と一致します。 Apple はまた、装飾用のカスタム ポインタを作成しないように警告しています。ユーザーはポインタの変更を利用可能な機能として解釈します。

6. ポインタ対話により既存の操作を高速化できる

(32:50) ポインターはより高い精度をもたらしますが、アプリにレイアウトのやり直し、密度の増加、またはポインターでのみ実現できる機能の追加を強制するべきではありません。 Numbers の列幅調整の例は、正しい方向を示しています。指を使用する場合、ユーザーは最初に列ヘッダーを選択し、次にハンドルをドラッグします。ポインタを使用する場合、ユーザーは列間の分割線に直接移動してドラッグできます。これは同じ機能ですが、パスが短くなります。

(36:24) ポインターのホバーは意図の合図です。書籍では、読書中にツールバーを非表示にし、ポインタが上部領域に移動するとすぐにツールバーを表示できます。全画面再生または没入型エクスペリエンスでは、ポインターの動きが現れたときにコントロール バーを復元することもできます。クリック アンド ドラッグでは、ドラッグ アンド ドロップまたはドラッグ選択を直接入力することもできるため、タッチ シーンでスクロールを区別するために必要な長押しと待機が不要になります。

(37:50) 1 本指のインタラクションは主にポイントとクリックに任せられ、3 本指のジェスチャはシステムに任せられ、ほとんどのアプリは 2 本指のトラックパッド ジェスチャに重点を置く必要があります。ジェスチャはポインタの下のビューで発生する必要があります。マップの例は、2 本の指を画面上の同じ位置に置くのと同じように、2 本の指でのスクロール、ズーム、回転がすべてポインターの位置に固定されていることを示しています。

(39:35) 二次クリックは、トラックパッドの 2 本指のクリック、二次マウス ボタン、または Control キーを押しながらクリックすることで発生する可能性があります。デフォルトでは、システムはこれを使用してコンテキスト メニューをすぐに表示します。カスタム インターフェイスの場合、長押しまたは特別なモードをトリガーする必要がある代替操作を高速化するのに適しています。

重要ポイント

• スケジュールとタイムラインの間隔スナップ: 内容: イベントの作成、クリップの編集、またはタイム ブロックのドラッグ時にポインタを実際に許容可能な時間粒度にスナップさせます。 実行する価値がある理由: セッションのスケジュール ビューでは、開始時間が 15 分間隔に調整されるため、境界までドラッグする際のユーザーの推測が軽減されます。 開始方法: まず、ビジネスで受け入れられる範囲を定義し、次にホバー フィードバックとドラッグ プレビューが常に同じ範囲セットに収まるようにします。

• リーダーとプレイヤーにホバーを使ってコントロール バーを表示させる: 内容: コンテンツ領域は没入型のままで、ポインターがツールバー領域に移動するか動き始めるとコントロールが表示されます。 実行する価値がある理由: 書籍の例では、ポインターの位置によって次のステップの意図を表現できること、およびユーザーがツールを取得するために 1 回クリックする必要がないことが示されています。 開始方法: コントロール バーの表示ルールをタップのみからホバー領域、ポインターの動き、非アクティブ タイマーの組み合わせに調整します。

• テキスト マークアップ ツールのマーカー チップ ポインターをデザイン: 作業方法: 読み取り、注釈、PDF、またはコード レビュー ツールで、ハイライト ツール ポインターを選択範囲の高さを表すことができる先端の形状にします。 実行する価値がある理由: セッションでは、選択の高さと I ビームのような動作の両方を表現するため、マーカー ペン グリフよりも優れたソリューションとしてマーカー チップを明示的に支持しています。 開始方法: デフォルトのポインターの視覚的な重みに近いソリッド形状を使用し、中央のアンカーを維持し、選択動作を実際に変更する領域にのみアンカーを表示します。

• テーブルとキャンバスを正確なドラッグ エントリに公開: 内容: ポインタが近くにある場合、列幅の区切り線、トリミング境界、制御点、および小さなハンドルを直接ドラッグできます。 実行する価値がある理由: Numbers の例は新しい機能を追加するものではなく、ポインターの精度を使用して「最初に選択してからハンドルを見つける」ステップをスキップするだけです。 開始方法: 長押しが必要なタッチ パス内のドラッグ操作を見つけ、ファースト モードまたはオープン モードを選択し、ホバー フィードバックとより適切な吸着範囲をこれらの境界に追加します。

• 2 本指のジェスチャをポインターの下のオブジェクトにバインドします: 何をするか: マップ、ホワイトボード、画像エディター、または複数列インターフェイスでは、2 本指のスクロール、ズーム、回転はすべて、ポインターが置かれているビューに作用します。 実行する価値がある理由: マップの例は、ポインタをジェスチャ アンカーとして使用した後、ユーザーがマップとカードの間で操作オブジェクトを自然に切り替えることができることを示しています。 開始方法: まず、各領域でどの 2 本指ジェスチャがサポートされているかを明確にしてから、ポインタの位置を中心にスケーリングと回転が行われることを確認します。

関連セッション

• iPadOS ポインター用のビルド - ポインター インタラクション API を使用して、ポインターの効果、領域、形状のカスタマイズを実現する方法について説明します。
• トラックパッドとマウス入力の処理 — ポインターの移動、ポインターのロック、スクロール入力、トラックパッドのジェスチャー、マウス ボタン、修飾キーについて説明します。
• アプリでハードウェア キーボードをサポートする — iPad および Mac 用の Catalyst アプリのキーボード ショートカット、修飾キー、レスポンダー チェーンについて説明します。
• iPad 向けに設計 — iPad のデザイン パターンから始まり、サイドバー、ドラッグ アンド ドロップ、マルチタッチ、ペンシル、キーボード、トラックパッドについて説明します。