タッチパッドのデザインガイドライン

[アーティクル]
01/19/2024

ユーザーがタッチパッドで操作できるようにアプリを設計します。タッチパッドは、間接的なマルチタッチ入力と、マウスなどのポインティングデバイスの精度入力の両方を組み合わせたものです。この組み合わせにより、タッチパッドはタッチ最適化 UI と生産性アプリの小さなターゲットの両方に適しています。

touchpad

タッチパッドの操作には、次の 3 つのことが必要です。

標準のタッチパッドまたは Windows プレシジョンタッチパッド。

高精度タッチパッドは、Windows アプリデバイスに最適化されています。これにより、システムは、指の追跡や手のひら検出など、タッチパッドエクスペリエンスの特定の側面をネイティブに処理して、デバイス間でより一貫性のあるエクスペリエンスを実現できます。
タッチパッド上の 1 本以上の指の直接接触。
タッチ接点の移動(または時間閾値に基づいて、その欠如)。

タッチパッドセンサーによって提供される入力データは次のとおりです。

1つまたは複数の UI 要素 (パン、回転、サイズ変更、移動など) を直接操作するための物理的なジェスチャーとして解釈されます。これに対し、プロパティウィンドウまたはその他のダイアログボックスを通して要素と対話することは、間接的な操作と見なされます。
マウスやペンなどの代替入力方法として認識されます。
ペンで描画されたインクストロークのスマッジなど、他の入力方法の側面を補完または修正するために使用されます。

タッチパッドは、間接的なマルチタッチ入力と、マウスなどのポインティングデバイスの精度入力を組み合わせたものです。この組み合わせにより、タッチ最適化 UI と生産性アプリとデスクトップ環境の一般的に小さいターゲットの両方に適したタッチパッドになります。 Windows アプリの設計はタッチ入力用に最適化し、既定のタッチパッドのサポートを利用します。

タッチパッドでサポートされる操作エクスペリエンスが収束するため、PointerEntered イベントを使用して、タッチ入力の組み込みサポートに加えてマウススタイルの UI コマンドを提供することをお勧めします。たとえば、前へと次へのボタンを使用して、ユーザーがコンテンツのページをめくったり、コンテンツをパンしたりできるようにします。

このトピックで説明するジェスチャーとガイドラインは、アプリが最小限のコードでシームレスにタッチパッド入力をサポートするのに役立ちます。

タッチパッド言語

Windows には、システム全体で使用されている簡潔なタッチパッド操作のセットが用意されています。アプリをタッチ入力やマウス入力に最適化することで、この言語がユーザーにとってアプリをすぐに馴染みのあるものに感じさせ、ユーザーの信頼度が高まり、アプリの学習と使用が容易になります。

ユーザーは、標準のタッチパッドよりもはるかに多くの高精度タッチパッドジェスチャーと対話動作を設定できます。次の 2 つの画像は、それぞれ標準のタッチパッドと高精度タッチパッドのさまざまなタッチパッド設定ページ ([設定] > [デバイス] > [マウスとタッチパッド]) を示しています。

standard touchpad settings

^{標準タッチパッドの設定}

windows precision touchpad settings

^{Windows 高精度タッチパッドの設定}

一般的なタスクを実行するためのタッチパッド最適化ジェスチャーの例を次に示します。

用語	説明
3 本指でのタップ	Cortana で検索したり、アクションセンターを表示したりするためのユーザー設定。
3 本指のスライド	仮想デスクトップのタスクビューを開いたり、デスクトップを表示したり、開いているアプリを切り替えたりするユーザー設定。
１本の指のタップによるプライマリアクション	１本の指で要素をタップし、その主なアクション (アプリの起動やコマンドの実行など) を呼び出します。
2 本の指でタップして右クリック	要素を 2 本の指で同時にタップして選択し、コンテキストコマンドを表示します。
2 本の指でスライドしてパンへ	スライドは主に対話のパンに使用されますが、移動、描画、書き込みにも使用できます。
ピンチとストレッチによるズーム	ピンチジェスチャーとストレッチジェスチャーは、通常、サイズ変更とセマンティックズームに使用されます。
1 本の指で押しながらスライドして並べ替える	要素をドラッグします。
1 本の指で押しながらスライドしてテキストを選択する	選択可能なテキスト内を押し、スライドして選択します。ダブルタップして単語を選択します。
左クリックと右クリックゾーン	マウスデバイスの左右ボタン機能をエミュレートします。

ハードウェア

マウスデバイス機能(MouseCapabilities)を照会して、タッチパッドハードウェアが直接アクセスできるアプリUIの部分を特定します。タッチ入力とマウス入力の両方に UI を提供することをお勧めします。

デバイス機能のクエリの詳細については、「入力デバイスの識別」を参照してください。

視覚的なフィードバック

タッチパッドカーソルが (移動またはホバーイベントを通じて) 検出された場合は、マウス固有の UI を表示して、要素によって公開される機能を示します。タッチパッドカーソルが一定の時間移動しない場合、またはユーザーがタッチ操作を開始した場合は、タッチパッドの UI を徐々にフェードアウトさせます。これにより、UI のクリーンと整理が保たれます。
カーソルをホバーフィードバックに使用しないでください。要素によって提供されるフィードバックで十分です (下記のカーソルセクションを参照)。
要素が相互作用 (静的テキストなど) をサポートしていない場合は、視覚的なフィードバックを表示しません。
タッチパッドの操作でフォーカス四角形を使用しないでください。キーボード操作用にこれらを取っておきます。
同じ入力ターゲットを表すすべての要素に対して視覚的フィードバックを同時に表示します。

視覚的フィードバックに関する一般的なガイダンスについては、視覚的フィードバックのガイドラインを参照してください。

カーソル

タッチパッドポインター用の標準カーソルセットが用意されています。これらは、要素の主なアクションを示すために使用されます。

各標準カーソルには、対応する既定のイメージが関連付けられています。ユーザーまたはアプリは、標準カーソルに関連付けられている既定のイメージをいつでも置き換えることができます。 UWP アプリでは、PointerCursor関数を通してカーソルイメージを指定します。

マウスカーソルをカスタマイズする必要がある場合:

クリック可能な要素には常に矢印カーソル(矢印カーソル)を使用します。リンクやその他ののインタラクティブな要素には手の形のポインティングカーソル(手の形のポインティングカーソル)を使用しないでください。代わりに、ホバー効果を使用します (前述)。
選択可能なテキストにはテキストカーソル (テキストカーソル) を使用します。
ドラッグやトリミングなど、移動が主なアクションである場合は、移動カーソル (移動カーソル) を使用します。主なアクションがナビゲーション(スタートタイルなど) である要素には、移動カーソルを使用しないでください。
オブジェクトのサイズを変更できる場合は、水平、垂直、および斜めのサイズ変更カーソル (,, ) を使用します。
地図など、固定キャンバス内のコンテンツのパンを行うときは、手でつかむ形のカーソル (手でつかむ形のカーソル (開いた状態)、手でつかむ形のカーソル (つかんだ状態)) を使用します。