モバイルフレンドリーな価格スライダー

Question

モバイルユーザー向けの優れたUXを備えたeコマースプラットフォーム用の範囲フィルターを設計したいと考えています。

ここに私が作ることができる基本的な相互作用があります

1）現在の範囲はどこに配置しますか（スライダーが動かない場合）？

• オプション1：中央を固定。これは不必要な空白につながります

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

• オプション2：各ハンドルの上。これはユーザーの親指で覆われる可能性があります。

^{bmmlソースをダウンロード}

Answer 1

質問に表示されているスライダーを使用したい場合は、オプション2を使用することをお勧めします

さらに、トラックスライダーを指で正確に表示するのは少し難しいため、これは携帯電話で完全に機能すると思います。

このページにはいくつかのオプションとコードもあります http://www.jqueryrain.com/?ot4e1H_o

Answer 2

その例では値がハンドルに明確にマッピングされているため、オプション2。

また、指や親指で覆われている価値について心配する必要はないと思います。範囲を設定するシナリオでは、インタラクションは完全にこのタスクに集中しています。つまり、値をかなりのスペースで占有できるため、指の上に表示できます。ユーザーがハンドルを離すと、レイアウトの他の要素に合わせて値が縮小されます。