スライダーが実行できるステップを視覚化する良い方法は、次のようにティックで視覚化することです。
ティックを使用せずに特定のステップにのみ設定できるスライダーを視覚化する良い方法は何ですか?
実際の例:
2つのスライダーを取得しました。両方とも0〜300の範囲です。上のスライダーは30秒(11ステップ)のステップでのみ設定できます。下の方にはこの制限がなく、0から300(301ステップ)の間で設定できます。
一般に、スライダーは正確な値が相対よりも重要でない場合にのみ、より良いユーザーエクスペリエンスを提供します値。
古典的な例は、スライダーのつまみがa little bit of sound
、all the way up
、no sound
などの値に調整されると音量が増減するボリュームコントロールです。
一般的な相対値があなたの状況で問題なければ、おそらくあなたはこの質問をするつもりはないでしょう。そのため、有効な量であることを確認する簡単な方法でユーザーが任意の値を入力できるソリューションを検討してください...
210
」と入力するか、210リンクをクリックするだけでも同じ結果になります動的なツールチップを使用して、コントロールの特異性を視覚化し、スライダーコントロールのフィードバックを表示することができます。図を参照してください。
ツールチップ内に固定点があるスケールがあります。左と右の次は、エッジに近い透明なポイントを示し、ドットはスケールの連続性を示します。必要に応じて、「主な」目盛りをスライダーに表示でき、効果は物理的な「マイクロメーター」ツールに似ています。
アニメーションを使用して目盛りを表すことができます。顕著な「イーズインアウト」タイプの加速/減速曲線を想像してみてください。スライダーコントロールは、目盛りの位置に近づくにつれて遅くなり、目盛りから離れるにつれて速くなります。これは、物理的なノッチスライダーで発生する可能性のある物理的な摩擦の構築を模倣します。
摩擦を模倣することは、マウスユーザーよりもタッチデバイスの方が効果的だと思います。 Alexyが提案するようなフライアウトと組み合わせて使用できます。
例として アニメーションのマテリアルデザインガイドライン をご覧ください。 CodepenのユーザーAna Tudorにもいくつかの 素敵な例 があります。