視覚的なフィードバックのガイドライン

ユーザーの操作が検出され、解釈され、処理されたときに、視覚的なフィードバックをユーザーに表示します。視覚的なフィードバックは、ユーザーが対話を促すことで役立ちます。操作の成功を示し、ユーザーの制御感覚が向上します。また、システムの状態をリレーし、エラーを減らします。

重要な API: Windows.Devices.Input、 Windows.UI.Input、 Windows.UI.Core

推奨事項

コントロールテンプレートの変更は、コントロールとアプリケーションの両方のパフォーマンスとアクセシビリティに影響を与える可能性があり、設計意図に直接関連する変更に制限してください。
- ビジュアル状態プロパティなど、コントロールのプロパティをカスタマイズする方法の詳細については、 XAML スタイルに関するページを参照してください。
- コントロールテンプレートに変更を加える方法の詳細については、 UserControl クラスを参照してください
- コントロールテンプレートを大幅に変更する必要がある場合は、独自のカスタムテンプレートコントロールを作成することを検討してください。カスタムテンプレートコントロールの例については、カスタム編集コントロールのサンプルを参照してください。
アプリの使用を妨げる可能性がある状況では、タッチの視覚エフェクトを使用しないでください。詳細については、「 ShowGestureFeedback」を参照してください。
絶対に必要でない限り、フィードバックを表示しないでください。他の場所では使用できない値を追加しない限り、視覚的なフィードバックを表示しないことで、UI をクリーンで整然とした状態に保ちます。
組み込みの Windows ジェスチャの視覚的なフィードバック動作を大幅にカスタマイズしないようにしてください。これにより、一貫性がなく、混乱を招くユーザーエクスペリエンスが生じる可能性があります。

その他の使い方のガイダンス

接触の視覚化は、精度と精度を必要とするタッチ操作に特に重要です。たとえば、アプリでは、タップの場所を明確に示して、ユーザーがターゲットを見逃したかどうか、どの程度見逃したか、どのような調整を行う必要があるかをユーザーに知らせる必要があります。

使用可能な既定の XAML プラットフォームコントロールを使用すると、すべてのデバイスとすべての入力状況でアプリが正しく動作します。カスタマイズされたフィードバックを必要とするカスタム操作がアプリで機能する場合は、フィードバックが適切であり、入力デバイスにまたがることを確認し、ユーザーのタスクからユーザーの注意を引かないようにする必要があります。これは、視覚的なフィードバックが重要な UI と競合したり隠れたりする可能性がある、ゲームや描画アプリの特定の問題である可能性があります。

Important

組み込みのジェスチャの対話動作を変更することはお勧めしません。

デバイス間のフィードバック

視覚的なフィードバックは、通常、入力デバイス (タッチ、タッチパッド、マウス、ペン/スタイラス、キーボードなど) に依存します。たとえば、マウスの組み込みフィードバックには通常、カーソルの移動と変更が含まれますが、タッチとペンには連絡先の視覚化が必要であり、キーボードの入力とナビゲーションではフォーカスの四角形と強調表示が使用されます。

ShowGestureFeedback を使用して、プラットフォームジェスチャのフィードバック動作を設定します。

フィードバック UI をカスタマイズする場合は、すべての入力モードをサポートし、適切なフィードバックを提供してください。

Windows の組み込みの連絡先の視覚化の例を次に示します。


タッチの視覚化	マウス/タッチパッドの視覚化	ペンの視覚化	キーボードの視覚化

可視性の高いフォーカスビジュアル

すべての Windows アプリは、アプリケーション内の対話可能なコントロールに関して、より定義されたフォーカスビジュアルを提供します。これらの新しいフォーカスビジュアルは、必要に応じて完全にカスタマイズできるだけでなく、無効にすることもできます。

Xbox とテレビの一般的な 10 フィートエクスペリエンス では、Windows は 表示フォーカスをサポートしています。これは、ゲームパッドやキーボード入力でフォーカスを取得するときに、ボタンなどのフォーカス可能な要素の境界線をアニメーション化する照明効果です。

色のブランド化とカスタマイズ

罫線のプロパティ

視認性の高いフォーカスビジュアルには、プライマリ境界線とセカンダリ境界線の 2 つの部分があります。プライマリの境界線は、太さ2px、で、セカンダリの境界線の外側を囲んでいます。セカンダリ境界線は、1px幅ので、プライマリ境界線の内側をに沿って回ります。高視認性のフォーカス用視覚ガイドライン

罫線の種類 (プライマリまたはセカンダリ) の太さを変更するには、それぞれ FocusVisualPrimaryThickness または FocusVisualSecondaryThickness を使用します。

<Slider Width="200" FocusVisualPrimaryThickness="5" FocusVisualSecondaryThickness="2"/>

視認性の高いフォーカスの視覚的な余白の太さ

余白は Thickness 型のプロパティであるため、コントロールの特定の辺にのみ表示されるように余白をカスタマイズできます。下を参照: 高い可視性フォーカスの視覚的余白の厚さ (下部のみ)

余白は、コントロールのビジュアル境界とフォーカスビジュアルの セカンダリ境界線の開始の間のスペースです。既定の余白は、コントロールの境界から 1px 離れています。 FocusVisualMargin プロパティを変更することで、コントロールごとにこの余白を編集できます。

<Slider Width="200" FocusVisualMargin="-5"/>

視認性の高いフォーカスの視覚的な余白の違い

負の余白は、コントロールの中心から境界線をプッシュし、正の余白はコントロールの中心に近い境界線を移動します。

コントロールのフォーカスビジュアルを完全にオフにするには、 UseSystemFocusVisuals を無効にするだけです。

<Slider Width="200" UseSystemFocusVisuals="False"/>

太さ、余白、またはアプリ開発者がフォーカスビジュアルをまったく必要とするかどうかは、コントロールごとに決定されます。

カラープロパティ

フォーカスビジュアルには、プライマリ境界線の色と 2 番目の境界線の色という 2 つの色のプロパティしかありません。これらのフォーカスの視覚境界線の色は、ページレベルでコントロールごと、およびアプリ全体のレベルでグローバルに変更できます。

アプリ全体でフォーカスビジュアルをブランド化するには、システムブラシをオーバーライドします。

<SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="DarkRed"/>
<SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="Pink"/>

視認性の高いフォーカスの視覚的な色の変更

コントロールごとに色を変更するには、目的のコントロールのフォーカスビジュアルプロパティを編集するだけです。

<Slider Width="200" FocusVisualPrimaryBrush="DarkRed" FocusVisualSecondaryBrush="Pink"/>

デザイナーの場合

パンニングのガイドライン

開発者向け

カスタムユーザー操作

Samples

アーカイブサンプル

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-12-02