où doit être le "point de coordonnée" d'un bouton coulissant?
I fait un outil pour mes élèves , afin qu'ils puissent ralentir la musique et l'apprendre à leur rythme.
Dans les outils, il y a quelques boutons, et spécifiquement 3 d'entre eux interagissent avec une fonctionnalité de "boucle". L'idée est d'avoir 2 boutons délimitant le début et la fin de la boucle, et l'autre la position du joueur qui se repositionnera (reviendra) lorsque la plage de boucle sera atteinte.
Ma question est: où en forme de bouton le "point de coordonnée" doit-il être?
Par exemple, dans l'image ci-dessous, j'ai utilisé le "centre" du bouton comme point de mesure des distances, cela fait que les boutons se chevauchent et réduisent la zone de contact,
Si le "point de coordonnées" serait le côté intérieur de chaque bouton l'un par rapport à l'autre, où dois-je positionner le bouton de jeu?
Dans le monde physique, nous avons un pied à coulisse, qui est un excellent exemple d'outil de sélection et de mesure. Vous pouvez utiliser une approche rapprochée, et il semble que cela résout votre problème. L'indication de l'heure augmente la convivialité et les grandes commandes sont bonnes comme cibles tactiles. Pendant le balayage, vous devez afficher les chiffres sur le contrôle pour les rendre visibles.
.
[~ # ~] mise à jour [~ # ~]
Comme l'a suggéré Jonas Dralle, nous n'avons pas besoin de deux barres. Et la suggestion d'Andrew Martin sur l'alignement a également été prise en compte.
J'ai implémenté quelque chose de similaire il y a quelque temps. Ce qui a le mieux fonctionné pour moi, c'est de considérer le bord intérieur du bouton comme la coordonnée pour définir la plage.
Le problème avec cette approche était que je ne pouvais plus sélectionner toute la gamme.
J'ai résolu cela en ajoutant un faux rembourrage visuel sur les côtés de la barre de suivi. ces régions étaient colorées exactement comme la barre, vous ne les remarqueriez donc pas.
L'heure actuelle peut alors être affichée entre les deux boutons avec une ligne verticale.
Cette astuce m'a permis de définir des zones d'interaction généreuses à l'intérieur des limites du composant. L'ensemble du bouton est en fait la zone de glissement.
iMovie gère très bien cela. Au lieu d'utiliser deux "pouces" séparés sur la chronologie, il utilise une simple boîte où chaque extrémité est déplaçable:
La boîte est un excellent choix car: 1. Les côtés gauche et droit de la boîte sont des lignes verticales qui n'occupent aucun espace horizontal, donc le "point de coordonnée" est implicite. 2. Les côtés supérieur et inférieur de la boîte indiquent clairement l'étendue de la boucle.
La position actuelle de la "tête de lecture" est indiquée par une ligne verticale séparée avec un triangle déplaçable en haut. Des boutons séparés sont fournis pour la lecture/pause et pour déplacer la tête de lecture au début ou à la fin de la boucle.
Pour déplacer le début et la fin de la boucle, l'utilisateur fait simplement glisser les extrémités de la boîte:
Une bonne touche ici est que vous pouvez réellement faire glisser le côté Début de la boîte à droite du côté Fin de la boîte, après quoi il devient la nouvelle Fin (ou vice-versa). C'est un excellent moyen pour l'utilisateur d'avancer dans la pièce, car il peut toujours simplement faire glisser le début vers la droite (après la fin actuelle) et savoir que le nouveau début (la fin précédente) commencera exactement là où il s'était arrêté avant !
La réponse est donc:
N'utilisez pas un curseur avec des "boutons" qui chevauchent la chronologie en raison de leur largeur horizontale. Indiquez plutôt des positions avec des lignes verticales qui peuvent être glissées, comme les côtés de la boîte de sélection d'iMovie.
Je ferai référence aux "curseurs" de contrôle de début et de fin de boucle, et puisqu'ils remplissent des fonctions similaires mais différentes:
- Donnez aux curseurs des formes similaires mais différentes
Puisque le temps entre eux est plus important que le temps en dehors d'eux (puisque le marqueur de temps de jeu sera à l'intérieur):
- Préférez les parties d'occlusion de la timeline (si vous devez le faire) qui ne seront pas jouées par rapport aux parties qui seront jouées.
... et puisque ces curseurs asymétriques cessent de couvrir la chronologie dans leurs bords intérieurs:
- Les bords intérieurs des curseurs de boucle doivent être leurs points de référence temporels.
Pour aller un peu plus loin ...
Pour le marqueur de temps de lecture, même sans marqueurs de début et de fin de boucle, il serait préférable de ne pas obstruer la chronologie (pour permettre au marqueur d'indiquer le début et la fin de la chronologie, et juste pour la précision), mais à cause de votre début de boucle et finissez les curseurs, cela vaut encore plus la peine de le faire, donc:
- Avoir un marqueur de temps de jeu de largeur zéro ou presque nulle (largeur de ligne) sur la timeline ... qui laisse au-dessus ou en dessous
Donc, cela laisserait quelque chose comme ceci:
v
----]---|-----[---
Le point de coordonnées devrait être au centre du bouton rectangulaire que vous proposez. Pour sélectionner un point spécifique et voir à travers le processus de boucle (pendant la lecture), vous avez besoin de précision. Et c'est une bonne raison pour laquelle ces boutons ne fonctionnent pas correctement pour la fonction de bouclage .
Une sorte de bouton qui vous permet de faire la même action mais sans interférer avec la position qu'ils indiquent serait une bonne solution. Quelque chose de similaire à la façon dont vous pouvez sélectionner le texte dans Android:
Notez dans cet exemple que les boutons sont disposés indiquant où la sélection commence et où elle se termine. Mais ce n'est qu'une chose "extra" sympa, l'idée que je mena est de garder l'interface utilisateur avec laquelle l'utilisateur interagit en dehors de l'endroit où il obtient le résultat .
Si les boutons sont censés être au-dessus du lecteur, gardez-les au minimum pour ne pas interférer avec le bouton du lecteur. Aussi sous une forme qui indique facilement le point exact (plutôt qu'un rectangle où le point pourrait être interprété comme étant au centre ou sur les côtés.)
Gardez vos coordonnées centrées
Oui! Vous devez absolument faire du centre du bouton la coordonnée . Vous voulez réellement changer le chemin que le bouton peut parcourir , pas le bouton lui-même!
Changez simplement le chemin parcouru par le bouton d'une demi-largeur de bouton vers la droite (probablement en ajoutant au x-pos), et soustrayez une largeur de boutons entière de la longueur que le bouton se déplacerait autrement = (peut-être en soustrayant les boutons x la longueur de l'axe). Ce que vous faites ici est de raser la moitié de la largeur d'un bouton à chaque extrémité du chemin de déplacement du bouton! Il en résulte un chemin de déplacement qui ne se chevauche pas, et utilise la totalité de l'espace:
Cela s'applique également au scénario à double bouton , où au lieu du chemin de déplacement de chaque bouton, ils s'arrêtent à la place de l'autre:
Dans cet exemple, vous pouvez voir beaucoup plus facilement le trajet de bout en bout.
J'espère que tout cela a du sens, je viens de supprimer mon répertoire d'utilisateurs plus tôt dans la journée et, en tant que tel, j'ai déjà répondu d'une manière qui aurait pu vous induire en erreur.
Ne placez pas le "point de référence" au milieu du bouton virtuel à moins que vous ne rendiez les boutons transparents avec des lignes verticales, comme les curseurs des règles de glissement:
... ou traitez-les comme des parenthèses, comme le suggère Ovidiu.
Voir l'exemple intuitif d'Audacity.