web-dev-qa-db-ja.com

3つ以上の状態を持つマルチ状態トグルスライダーはどのように実装する必要がありますか?

トグルスライダーは、iOSおよび一部のWebアプリケーションのモバイルデバイスでは非常に一般的なパターンですが、デュアルステートスイッチングでのみ機能します。 enter image description here

3つ以上の状態になると、スライディングトグルの相互作用と動作は機能しなくなります。最も一般的な戦略は、以下のようなトグルのような動作を持つボタングループを実装することです(-とも呼ばれます)。 セグメント化されたコントロール iOSの場合):

enter image description here

3つ以上の状態があるスライド式トグルで見られる問題は次のとおりです。

  1. さまざまな状態/ステータスを明確に示す方法
  2. 良好なアフォーダンスと使いやすさを備えた対話を提供する方法
  3. より良い代替案があるかどうか、またはこれがUI設計の問題を解決するための最良のパターンである特定の状況があるかどうか。

3つ以上の状態が実装されたトグルスライダーの良い例を見た人はいますか?

5
Michael Lai

私はこれまでTwitter Bootstrapボタングループをこれと同じアイデアのために使用しました。これらは実際にはボタンであり、スライドの一部ではないため、選択された状態が混乱しているとは思いません(そして必要に応じて、それらを明確にするためにスタイルを設定できます。

私が尋ねる最も大きな質問は、それがあなたのニーズを満たしているかどうか、そしてあなたがこれを実装することによって解決しようとしていることだと思います。これはプロジェクトのスケーラブルなオプションですか?今後、州を追加する可能性はありますか?

bootstrap button group exampleanother bootstrap button group example

8
nachoproblem

正直に言うと、3つ以上の状態がある場合、おそらくトグルを使用するべきではありません-その性質上、トグルは/またはスイッチです-それが、この問題が発生している理由です。

アプリケーションの場合、状態の数とコンテキストに依存しますが、ほとんどのモバイルOSはドロップリストを適切に処理します。一連のラジオボタンは別のソリューションになります。

3
Mark C

上記の例に同意します。ラジオボタンをスライダーに変更する必要があります。下の画像のようにCSSを使用してもそれを行うことができます。

multistate toggle

あなたはソースを見つけていじることができます: http://cssdeck.com/labs/ufct35ys5t

2
Angelos Arnis

マルチステートの「トグル」とは、@ nachoproblemの画像に示すように、実際には単一のセグメント化されたボタンとしてスタイル設定されたラジオボタンのセットです。

「トグル」として扱うことの問題は、物理的なトグルがある状態から次の状態に「スライド」することです。状態が2つしかないため、オンからオフに、または再び「スライド」します。これは理にかなっています。

たとえば、4つの状態で、1から2に、次に2から3に、次に3から4に「スライド」するのはあなたの意図ですか?その場合は、移動止め付きのボリュームコントロールのようなものです。それとも、@ nachoproblemの例のように、ユーザーが任意の状態を選択できるようにするという意図ですか?

1
Dave Land