エクスポート (0) 印刷
すべて展開

Windows Phone の Slider コントロールのデザイン ガイドライン

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

Slider コントロールを使用すると、トラック上で前後にスクラビングすることによって、値の範囲から値を選択することができます。

UI_Slider

このトピックは、次のセクションで構成されています。

Slider コントロールには、"トラック" と "サム" の 2 つのビジュアル要素が含まれます。"トラック" は直線で、"縮小サム" はトラックに沿って表示されているスライドのセレクターです。ユーザーはトラックに沿ってサムをドラッグし、Slider コントロールの値を変更します。また、Slider コントロールのトラックをタップして、特定の値に設定します。

Slider コントロールを使用すると、アプリ固有の値の範囲から、自然なジェスチャですばやく簡単に値を選択できます。スクリーン キーボードを使用する必要はありません。

Slider コントロールを使用して、わかっている範囲内の相対量から値を選択できます。一般的に、これらの値は直線的に表すとわかりやすく、予測どおりに増減します。

可能な場合は、Slider コントロールを使用することをお勧めします。このコントロールにより、適切かつ迅速に、さらに直観的な方法で一連の値から選択できるからです。ただし、Slider コントロールに適していない状況もあります。

  • Slider コントロールを使用して、ユーザーが正確な既知の数値を設定できるようにする場合は、TextBox コントロールを使用します。

  • ユーザーがこのコントロールで変更を設定するときに瞬時にフィードバックを得る必要がない場合は、CheckBox またはRadioButton コントロールの方が適切である可能性があります。

  • Slider コントロールで示す個別値の数が 4 個に満たない場合は、RadioButton コントロールを使用します。

Slider コントロールを使用して、連続する値の範囲からの特定の値の選択をユーザーが細かく管理できるようにします。一般的な例としては、ボリューム Slider コントロールや明るさのレベルの Slider コントロールなどが挙げられます。Slider コントロールを使用すると、Slider コントロールの値を調整したとき、アプリ内の他のビジュアル要素内にそのフィードバックが瞬時に示されます。

Slider コントロールには、最少増分値と最大増分値があります。Slider コントロールは垂直向きまたは水平向きのいずれかに配置できますが、その終端は必ずビューの範囲内に収まります。

Slider コントロールは、ユーザーが値を調整したことによるフィードバックを瞬時に得られると便利な場合に役立ちます。Slider コントロールの可用性または外観は、CheckBox コントロールなど、他のコントロールに依存することがあります。

Slider コントロールはさまざまなシナリオで効果的に使用でき、柔軟性に非常に優れています。Slider コントロールをカスタマイズする計画がある場合は、次の点に注意してください。

  • Slider コントロールの値は、ユーザーが慣れている方向に向かって増えるように設定します。西洋文化では、通常、Slider コントロールの値は左から右に向かって増えますが、右から左にまたは垂直方向に値が変化するようにしたいと考える地域もあります。

  • ユーザーがおおよその設定値を知る必要がある場合は、Slider コントロールの下で目盛の画像を使用します。

  • 一般的に、同じ設定に Slider コントロールと数値の TextBox コントロールを使用するのはお勧めできません。適切なコントロールのみを使用するようにしてください。冗長である場合、ユーザーが混乱することもあります。両方のコントロールを使用するのは、ユーザーが瞬時にフィードバックを必要とし、さらに正確な数値を設定する必要がある場合だけにします。

  • 表示されている Slider コントロールのサムは、ユーザーの指によってふさがれる可能性があるため、フィードバックを最大にし、Slider コントロールの値の変化を、Slider コントロールの操作に合わせて動的に調整されるラベルや何らかのパラメーターなど何らかの外部メカニズムに同期させることをお勧めします。

よくある誤り

効果的な Slider コントロールをデザインできるかどうかはデザイナーしだいですが、避けた方がよいことがいくつかあります。

  • Slider コントロールを無効にする場合は、関連するラベルも無効にします。

  • 進行状況インジケーターには、Slider コントロールは使用しません。

  • すべての目盛にラベルを付けないでください。

  • サムのサイズは既定のサイズから変更しないでください。

  • Slider コントロールのトラックは直線だけにしてください。

  • Slider コントロールには、大きなヒット ターゲット領域があります。タッチのしやすさを維持するため、Slider コントロールは、ディスプレイの端に近づけすぎないようにする必要があります。

  • ドラッグ対応コントロールと同様に、Slider コントロールは、Pivot コントロールや Panorama コントロールなど、それ自体がドラッグをサポートしているコントロールでは使用しないようにする必要があります。

カスタム Slider コントロールをデザインするときは、余計な情報はできるだけ排除しながら、必要な情報すべてをユーザーに示すように心がけてください。ユーザーが設定内容を理解するのに単位が必要な場合は値のラベルを使用しますが、これらの値は独創的な方法でグラフィカル表示する必要があります。たとえば、ボリュームを制御する Slider コントロールには、Slider コントロールの最小値を示す部分には非常に小さなスピーカーのグラフィックを、最大値を示す部分に非常に大きなスピーカーのグラフィックを表示します。

Slider コントロールの動作をカスタマイズすることもできます。Slider コントロールの使用方法によっては、次の動作が役に立つ場合があります。

  • 位置に移動: 接触した位置にサムがジャンプします。

  • 目盛にスナップ: 接触した方向にある、現在の位置から一番近い目盛の値にサムがジャンプします。

リファレンス

表示:
© 2014 Microsoft