risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come dovrebbe essere implementato un dispositivo di scorrimento multi-stato con più di due stati?

Il cursore a levetta è un modello molto comune su dispositivi mobili per iOS e alcune applicazioni Web, tuttavia funziona bene solo per un cambio a doppio stato. enter image description here

Quando si tratta di più di due stati, l'interazione e il comportamento dell'interruttore scorrevole si interrompono e la strategia più comune è quella di implementare un gruppo di pulsanti che ha un comportamento a levetta, come quello sotto (noto anche come - controllo segmentato per iOS):

enter image description here

I problemi che posso vedere con le levette scorrevoli con più di due stati sono:

  1. Come indicare i diversi stati/stati senza ambiguità
  2. Come fornire interazioni con buona convenienza e facilità
  3. Se ci sono alternative migliori o se ci sono circostanze specifiche in cui questo è il modello migliore per risolvere il problema di progettazione dell'interfaccia utente.

Qualcuno ha visto buoni esempi di interruttori a levetta con più di due stati implementati?

5
Michael Lai

Ho usato Twitter Bootstrap gruppi di pulsanti in passato per questa stessa idea. Dato che in realtà sono pulsanti e non parti di una diapositiva, non penso che gli stati selezionati siano confusi (e puoi modellarli in modo che siano inequivocabili come vuoi).

Penso che la domanda più grande da porsi sia se soddisfa le tue esigenze e cosa stai cercando di risolvere implementando questo. È un'opzione scalabile per il tuo progetto? Esiste la possibilità in futuro di aggiungere più stati?

bootstrap button group exampleanother bootstrap button group example

8
nachoproblem

Ad essere onesti, probabilmente non dovresti usare un interruttore se hai più di 2 stati - un interruttore per sua natura è uno o/o interruttore - ecco perché hai questo problema.

Per la tua applicazione dipenderà dal numero di stati e dal contesto, ma la maggior parte dei SO mobili gestisce molto bene gli elenchi a discesa. Una serie di pulsanti di opzione sarebbe un'altra soluzione.

3
Mark C

Sono d'accordo con gli esempi di cui sopra. Hai praticamente bisogno di pulsanti di opzione trasformati in cursore. Puoi farlo anche con CSS come l'immagine qui sotto.

multistate toggle

Puoi trovare e giocherellare con la fonte: http://cssdeck.com/labs/ufct35ys5t

2
Angelos Arnis

Un "interruttore" multi-stato è in realtà un insieme di pulsanti di opzione definiti come un singolo pulsante segmentato, come mostrato nelle immagini di @nachoproblem.

Il problema nel trattarlo come un "interruttore" è che un interruttore fisico "scorre" da uno stato all'altro. Con solo due stati, "scorre" da acceso a spento o viceversa, il che ha senso.

Con quattro stati, diciamo, è tua intenzione che "scivoli" da 1 a 2, quindi da 2 a 3, quindi da 3 a 4? In tal caso, è più simile a un controllo del volume con fermi. O è tua intenzione che l'utente possa scegliere uno qualsiasi degli stati, come negli esempi di @nachoproblem?

1
Dave Land