タッチ操作

このトピックでは、Windows アプリでカスタムのタッチ最適化エクスペリエンスを構築するための設計ガイドラインについて説明します。

概要

タッチは、1 本以上の指 (またはタッチ連絡先) の使用を伴う Windows アプリと Windows アプリ全体の入力の主要な形式です。 これらのタッチ連絡先とその動きは、さまざまなユーザー操作をサポートするタッチ ジェスチャと操作として解釈されます。

Windows SDK と Windows アプリ SDK の両方に、Windows アプリ全体で堅牢で一貫したエクスペリエンスを提供するタッチ最適化コントロールの包括的なコレクションが含まれています。

Windows アプリのカスタム コントロール、エクスペリエンス、フレームワークを作成するときは、次のガイドラインを使用します。

設計の原則

Windows アプリでタッチ エクスペリエンスを設計するときは、次の点を考慮してください。

タッチ最適化

Windows アプリのエクスペリエンスは、タッチを招待し、直接操作を可能にし、より精度の低い操作に対応する必要があります。 ジェスチャやペン、音声の統合など、タッチ アクセラレータを検討します。

姿勢間の一貫性

ユーザーが入力方法や姿勢に関係なく、アプリのエクスペリエンスは一貫している必要があります。 従来のデスクトップの姿勢からタブレットの姿勢への変更 ( タブレット エクスペリエンスを向上させるために推奨される設定を参照) と向きの変更は、見当違いではなく、必要に応じて微妙である必要があります。 アプリは、ユーザーの現在の状況に合わせた慣れ親しんだ統一感のある体験を作成するために、UI を控えめに再配置する必要があります。

速い

アプリと対話は、ユーザーの既存の状態に応答しながら、可能なアクションを示すアニメーションを使用して、操作の各フェーズ (タッチダウン、アクション、タッチアップ) でユーザーにフィードバックを提供する必要があります。 アニメーションは、滑らかでモダンな感じにするために、少なくとも 60 fps を維持する必要があります。

タッチ慣例の尊重

レスポンシブ フィードバック

アプリとの対話式操作中に適切な視覚的フィードバックがあれば、ユーザーはアプリと Windows プラットフォームの両方で自分の操作がどのように解釈されるかを認識し、理解を深め、適応できます。 ユーザーのタッチに応じて、すぐに継続的なフィードバックを提供します。これは目立ち、理解でき、気が散ることで失われません。 この即時のフィードバックは、ユーザーがアプリの対話型要素を学習して探索する方法です。

• フィードバックはタッチダウン時に直ちに行う必要があり、オブジェクトの移動はユーザーの指に留まるべきです。
• UI は、ユーザーの速度と動きを一致させてジェスチャに応答する必要があります。キーフレーム アニメーションの使用は避けてください。
• 視覚的なフィードバックは、ユーザーがアクションにコミットする前に、可能な結果を伝える必要があります。

詳細については、「Windows 11での視覚的フィードバックとモーションのガイドライン」を参照してください。

タッチ操作パターン

これらの一般的な操作とジェスチャ のパターンを尊重して、一貫性を持ち、予測どおりにエクスペリエンスを実現します。

一般的な相互作用

ユーザーが慣れている一般的なタッチ動作とジェスチャのセットがあり、すべての Windows エクスペリエンスで一貫して動作することが期待されています。

• タップ してアイテムをアクティブ化または選択する
• 短押しとドラッグ でオブジェクトを移動する
• 長押しして、サブのコンテキスト コマンド メニューにアクセスする
• コンテキスト コマンドの場合はスワイプ (またはドラッグアンドリリース)
• 時計回りまたは反時計回りに回転してピボットする

詳細については、「Windows 11での視覚的フィードバックとモーションのガイドライン」を参照してください。

ジェスチャ

ジェスチャを使用すると、ユーザーが移動して一般的な操作を行うために必要な作業が減ります。 可能であれば、タッチ ジェスチャを使用して UI をサポートし、ユーザーがアプリ内を簡単に移動して操作できるようにします。

ビュー間を移動する場合は、接続されたアニメーションを使用して、既存の状態と新しい状態の両方がドラッグ中に表示されるようにします。 UI と対話する場合、項目はユーザーの移動に従い、フィードバックを提供し、リリース時にドラッグ位置のしきい値に基づいて追加のアクションに対応する必要があります。

ジェスチャは、慣性に基づいてフリックやスワイプを行い、快適なモーション範囲内に収まるようにする必要もあります。

• ドラッグまたはフリックして前後に移動する
• ドラッグして閉じる
• 引っ張って更新

詳細については、「 ページ切り替え」 と「 更新するプル」を参照してください。

カスタム ジェスチャ

カスタム ジェスチャを使用して、高周波数キーボード ショートカット キーとトラックパッド ジェスチャをタッチ操作に取り込む。 アニメーションと表示状態を持つ専用のアフォーダンスを使用して検出可能性と応答を支援します (たとえば、画面に 3 本の指を配置すると、視覚的なフィードバックのためにウィンドウが縮小されます)。

• ユーザーが混乱する可能性があるため、一般的なジェスチャをオーバーライドしないでください。
• カスタム アクションには複数指ジェスチャを使用することを検討しますが、アプリとデスクトップを迅速に切り替えるための複数指ジェスチャがシステムによって予約されていることに注意してください。
• エッジ ジェスチャは OS レベルの動作用に予約されており、誤って呼び出される可能性があるので、画面の端付近で発生するカスタム ジェスチャに注意してください。

誤ったナビゲーションを回避する

アプリまたはゲームが画面の端付近で頻繁に操作を行う場合は、システム ポップアップが誤ってアクティブ化されないように、 全画面表示排他 (FSE) モード でエクスペリエンスを表示することを検討してください (関連するシステム ポップアップをプルするには、ユーザーが一時的なタブで直接スワイプする必要があります)。

タッチ キーボードエクスペリエンス

タッチ キーボードを使用すると、タッチをサポートするデバイスのテキスト入力が可能になります。 Windows アプリのテキスト入力コントロールは、ユーザーが編集可能な入力フィールドをタップすると、既定でタッチ キーボードを呼び出します。

テキスト フィールドのタップ時に呼び出す

ユーザーがテキスト入力フィールドをタップするとタッチ キーボードがポップアップ表示されます。これは、システム API を使用してキーボードの表示と非表示を切り替えることで自動的に機能します。 「タッチ キーボードの存在に応答する」を参照してください。

標準テキスト入力コントロールを使用する

一般的なコントロールを使用すると、予期される動作が提供され、ユーザーの驚きを最小限に抑えることができます。

Text Services Framework (TSF) をサポートするテキスト コントロールは、図形の書き込み (スワイプ キーボード) 機能を提供します。

タッチ キーボード信号

入力、姿勢、タッチ キーボードを入力のメイン モードにするハードウェア信号を考慮します (ハードウェア キーボードがデタッチされ、エントリポイントがタッチで呼び出され、ユーザーの意図が明確になります)。

適切にリフローする

• キーボードは、小さなデバイスで画面の 50% を占めることができることに注意してください。
• タッチ キーボードでアクティブなテキスト フィールドを隠さないでください。
• タッチ キーボードがアクティブなテキスト フィールドを隠している場合は、フィールドが表示されるまでアプリのコンテンツを上にスクロールします (アニメーション付き)。
• タッチ キーボードがアクティブなテキスト フィールドを隠しているが、アプリのコンテンツを上にスクロールできない場合は、(アニメーションを使用して) アプリ コンテナーを移動してみてください。

目標達成

ヒットターゲットが快適で、触れたくなるようなものであることを確認します。 ヒット ターゲットが小さすぎるか、混雑している場合、ユーザーはより正確である必要があります。これはタッチでは困難であり、エクスペリエンスが低下する可能性があります。

タッチ可能

視覚エフェクトが小さい場合でも、タッチ可能は 40 x 40 epx 以上、幅が 120 epx 以上の場合は高さが 32 epx と定義されています。

当社の共通コントロールはこの標準に準拠しています(マウスとタッチの両方のユーザー向けに最適化されています)。

タッチ最適化

タッチ最適化 UI の場合は、ターゲットサイズを 44 x 44 epx に増やし、ターゲット間に少なくとも 4 epx の可視領域を設定することを検討してください。

2 つの既定の動作をお勧めします。常にタッチが最適化されているか、デバイス信号に基づいて遷移します。

特にアプリが主にタッチで使用されている場合は、マウス ユーザーを損なうことなくタッチ用にアプリを最適化できる場合は、常にタッチの最適化を行います。

デバイスの姿勢に関する信号に基づいてUIを切り替える場合は、常に姿勢にかかわらず一貫した体験を提供してください。

ビジュアルをタッチ対象と一致させる

タッチ ターゲットのディメンションが変更されたときにビジュアルを更新することを検討してください。 たとえば、ユーザーがタブレットの姿勢に入ったときにヒット ターゲットが増える場合は、ヒット ターゲットを表す UI も更新して、ユーザーが状態の変化と更新されたアフォーダンスを理解できるように更新する必要があります。 詳細については、「 Windows アプリのコンテンツ デザインの基本」、 タッチ ターゲットのガイドライン、 コントロールのサイズと密度に関するページを参照してください。

ポートレート最適化

縦長のウィンドウと幅の広いウィンドウの両方を考慮したレスポンシブ レイアウトをサポートして、アプリが横向きと縦向きの両方に最適化されるようにします。

これにより、向きや画面サイズに関係なく、マルチタスク シナリオ (縦向きの縦横比で並べてスナップされたアプリ) で、アプリ ウィンドウにコア UI ビジュアルが適切に表示されるようになります。