テキストと画像の選択
この記事では、テキスト、画像、コントロールの選択と操作について説明し、アプリでこれらのメカニズムを使用する際に考慮する必要があるユーザー エクスペリエンスガイドラインを提供します。
重要な API: Windows.UI.Xaml.Input、 Windows.UI.Input
すべきこととやってはいけないこと
独自のグリッパー UI を実装する場合は、フォント グリフを使用します。 グリッパーは、システム全体で使用できる 2 つの Segoe UI フォントの組み合わせです。 フォント リソースを使用すると、さまざまな dpi でのレンダリングの問題が簡略化され、さまざまな UI スケーリング プラトーで適切に機能します。 独自のグリッパーを実装するときは、次の UI 特性を共有する必要があります。
- 円形の図形
- 背景に対して表示
- 一貫性のあるサイズ
グリッパー UI に合わせて、選択可能なコンテンツの周囲に余白を指定します。 アプリでパン/スクロールしない領域でテキストの選択を有効にする場合は、テキスト領域の左右に 1/2 グリッパー余白を、テキスト領域の上下に 1 つのグリッパーの高さを許可します (次の図を参照)。 これにより、グリッパー UI 全体がユーザーに公開され、他のエッジ ベースの UI との意図しない操作が最小限に抑えられます。
操作中にグリッパー UI を非表示にします。 相互作用中にグリッパーによるオクルージョンを排除します。 これは、グリッパーが指で完全に隠されていない場合や、複数のテキスト選択グリッパーがある場合に便利です。 これにより、子ウィンドウを表示するときの視覚的なアーティファクトが排除されます。
コントロール、ラベル、画像、独自のコンテンツなどの UI 要素の選択を許可しないでください。 通常、Windows アプリケーションでは、特定のコントロール内でのみ選択を許可します。 ボタン、ラベル、ロゴなどのコントロールは選択できません。 選択がアプリの問題であるかどうかを評価し、問題がある場合は、選択を禁止する UI の領域を特定します。
その他の使い方のガイダンス
テキストの選択と操作は、タッチ操作によって発生するユーザー エクスペリエンスの課題に特に影響を受けやすくなります。 マウス、ペン/スタイラス、キーボードの入力は非常に細かく、マウス クリックまたはペン/スタイラスの接触は通常、1 つのピクセルにマップされ、キーが押されたり押されたりしません。 タッチ入力は詳細ではありません。テキストキャレットを正確に配置するために、指先の表面全体を画面上の特定のx-y位置にマップすることは困難です。
考慮事項と推奨事項
Windows の言語フレームワークを通じて公開されている組み込みコントロールを使用して、選択や操作の動作など、プラットフォーム全体のユーザー操作エクスペリエンスを提供するアプリを構築します。 ビルトイン コントロールの対話式操作の機能は、大部分の Windows アプリにとって十分なものです。
標準の Windows テキスト コントロールを使う場合、このトピックで説明した選択の動作と視覚効果はカスタマイズできません。
テキストの選択
アプリでテキスト選択をサポートするカスタム UI が必要な場合は、ここで説明する Windows の選択動作に従うことをお勧めします。
編集可能なコンテンツと編集できないコンテンツ
タッチを使用すると、選択操作は、主に、挿入カーソルを設定したり単語を選択したりするためのタップや、選択範囲を変更するスライドなどのジェスチャによって実行されます。 他の Windows タッチ操作と同様に、タイミングの設定された操作は、情報 UI を表示するための長押しジェスチャに限定されます。 詳細については、視覚的なフィードバックについては、「 Guidelines」を参照してください。
Windows では、編集可能と編集不可の 2 つの選択操作の状態が認識され、それに応じて選択 UI、フィードバック、および機能が調整されます。
編集可能なコンテンツ
単語の左半分内をタップすると、カーソルが単語の右左に配置され、右半分内をタップすると、カーソルが単語の右に配置されます。
次の図は、単語の先頭または末尾の近くをタップして、グリッパーで最初の挿入カーソルを配置する方法を示しています。
次の図は、グリッパーをドラッグして選択範囲を調整する方法を示しています。
次の図は、選択範囲内またはグリッパー上でタップしてコンテキスト メニューを呼び出す方法を示しています (長押しすることもできます)。
注 これらの対話的操作は、綴りに間違いのある単語の場合は若干異なります。 スペルミスとしてマークされている単語をタップすると、単語全体が強調表示され、スペル候補のコンテキスト メニューが呼び出されます。
編集できないコンテンツ
次の図は、単語内をタップして単語を選択する方法を示しています (最初の選択にはスペースは含まれません)。
編集可能なテキストの場合と同じ手順に従って、選択範囲を調整し、コンテキスト メニューを表示します。
オブジェクト操作
Windows アプリでカスタム オブジェクト操作を実装する場合は、できる限り、テキストの選択と同じ (類似する) グリッパー リソースを使います。 これは、プラットフォーム全体で一貫した対話エクスペリエンスを提供するのに役立ちます。
たとえば、グリッパーは、次の図に示すように、サイズ変更とトリミングをサポートする画像処理アプリや、調整可能な進行状況バーを提供するメディア プレーヤー アプリでも使用できます。
調整可能な進行状況バーを備えたメディア プレーヤー。
トリミング グリッパーを含む画像エディター。
関連記事
開発者向け
サンプル
サンプルのアーカイブ
Windows developer