web-dev-qa-db-fra.com

Comment un curseur à bascule multi-états avec plus de deux états doit-il être implémenté?

Le curseur à bascule est un modèle très courant sur les appareils mobiles pour iOS et certaines applications Web, mais ils fonctionnent bien uniquement pour une commutation à deux états. enter image description here

Lorsqu'il s'agit de plus de deux états, l'interaction et le comportement de la bascule coulissante se décomposent, et la stratégie la plus courante consiste à implémenter un groupe de boutons qui a un comportement de bascule, tel que celui ci-dessous (également connu sous le nom de - contrôle segmenté pour iOS):

enter image description here

Les problèmes que je peux voir avec les bascules coulissantes qui ont plus de deux états sont:

  1. Comment indiquer sans ambiguïté les différents états/statuts
  2. Comment fournir des interactions avec une bonne accessibilité et une facilité de facilité
  3. S'il existe de meilleures alternatives ou s'il existe des circonstances spécifiques où il s'agit du meilleur modèle pour résoudre le problème de conception de l'interface utilisateur.

Quelqu'un a-t-il vu de bons exemples de curseurs à bascule avec plus de deux états mis en œuvre?

5
Michael Lai

J'ai utilisé Twitter Bootstrap groupes de boutons dans le passé pour cette même idée. Puisqu'il s'agit en fait de boutons et non de parties d'une diapositive, je ne pense pas que les états sélectionnés prêtent à confusion (et vous pouvez les styliser pour qu'elles soient aussi claires que vous le souhaitez).

Je pense que la plus grande question à poser est de savoir si cela répond à vos besoins et ce que vous essayez de résoudre en mettant en œuvre cela. Est-ce une option évolutive pour votre projet? Y a-t-il la possibilité à l'avenir d'ajouter d'autres États?

bootstrap button group exampleanother bootstrap button group example

8
nachoproblem

Pour être honnête, vous ne devriez probablement pas utiliser une bascule si vous avez plus de 2 états - une bascule de par sa nature est un commutateur soit/ou - c'est pourquoi vous rencontrez ce problème.

Pour votre application, cela dépendrait du nombre d'états et du contexte, mais la plupart des listes de gestion de systèmes d'exploitation mobiles gèrent très bien. Une série de boutons radio serait une autre solution.

3
Mark C

Je suis d'accord avec les exemples susmentionnés. Vous avez à peu près besoin de boutons radio transformés en curseur. Vous pouvez le faire même avec CSS comme l'image ci-dessous.

multistate toggle

Vous pouvez trouver et jouer avec la source: http://cssdeck.com/labs/ufct35ys5t

2
Angelos Arnis

Une "bascule" multi-états est en réalité un ensemble de boutons radio stylisés comme un bouton segmenté unique, comme le montrent les images de @ nachoproblem.

Le problème avec le traiter comme une "bascule" est qu'un bascule physique "glisse" d'un état à l'autre. Avec seulement deux états, il "glisse" d'avant en arrière ou de retour, ce qui est logique.

Avec quatre États, disons, avez-vous l'intention de "glisser" de 1 à 2, puis de 2 à 3, puis de 3 à 4? Dans ce cas, cela ressemble plus à un contrôle du volume avec des détentes. Ou avez-vous l'intention que l'utilisateur puisse choisir l'un des états, comme dans les exemples de @ nachoproblem?

1
Dave Land