web-dev-qa-db-fra.com

Traçage sur un écran tactile: atteindre la convivialité des gros doigts

Que pourrait-on faire pour améliorer la capacité de tracer le contour des éléments sur un écran tactile, sans obliger l'utilisateur à utiliser un stylet ou un autre outil physique supplémentaire?

La "grosseur" des doigts rend difficile de toucher l'endroit exact que vous souhaitez, et le doigt lui-même obscurcit votre vue d'une partie de l'image que vous essayez de tracer.

Un exemple serait un traçage d'une plaie cutanée (afin de mesurer la zone, etc.) où la précision est cruciale comme vous pouvez l'imaginer.

Edit: j'ai supprimé l'exemple de photo à cause de son facteur gore

18
Kyle Wilson

Voici 3 façons d'accomplir un contour de haute précision de style trace sans l'effet de gros doigt.

3 approaches

Approche 1: similaire à l'excellente réponse de Kit Grose. Un masque est appliqué et vous pouvez utiliser un pinceau et une gomme pour ajuster la limite. La seule différence ici est que si vous avez besoin de voir l'intérieur détaillé de la plaie, le masque fonctionne à l'envers, c'est-à-dire que le masque est appliqué et vous effacez sélectivement la zone sur laquelle vous devez vous concentrer. De cette façon, la sélection devient plus et non moins visible.

Approche 2: utilisez un pavé de trace proxy. Cela vous permet d'utiliser des pointeurs arbitrairement petits pour effectuer la trace, et l'utilisateur dessine à l'aide du pavé de trace. Une précision très fine peut être obtenue en ajustant le rapport de mouvement entre le pavé tactile et l'écran, ainsi qu'en permettant à l'utilisateur de pincer le zoom.

Vous souhaiterez peut-être ajouter un curseur de "sensibilité" pour ajuster le rapport de suivi. Étant donné que vous tracez une limite continue, l'utilisateur peut à tout moment lever son doigt de la trace et une fois qu'il la redescend, la trace continue simplement à partir de sa position existante. Ainsi, vous ne rencontrez pas de problèmes "hors écran" avec la ligne de dessin.

Approche 3: Glissez et déposez le stylo pour le placer, puis poussez et tirez le stylo autour de l'écran pour continuer à dessiner. Cela permet à l'utilisateur de décider où elle veut placer son doigt, et le point de contact est séparé de la pointe du stylo afin que vous puissiez voir où vous dessinez. Cette approche a également l'avantage de permettre à l'utilisateur de lever le doigt et de zoomer/recadrer l'image avant de poursuivre la trace. Vous devrez déterminer comment retirer la goupille une fois qu'elle est placée ... Un bouton de suppression peut faire le travail facilement.

Les wireframes sont juste une esquisse vraiment grossière et vous devrez ajouter quelques raffinements. Mais il suffit que, conceptuellement, vous puissiez l'obtenir.

J'aime vraiment cette question, car il s'agit de savoir comment repousser les limites d'une interface tactile omniprésente tout en conservant tous les mouvements naturels de balayage/pincement/glissement auxquels les utilisateurs se sont habitués.

20
tohster

Je retournerais le problème sur sa tête: au lieu de tracer autour de la blessure, demandez à l'utilisateur de peindre une couleur sur la blessure. Donnez-leur deux outils; un pinceau et une gomme.

Ce comportement est similaire à le mode Masque rapide dans Photoshop et il fonctionne très bien car vous pouvez d'abord utiliser une très grande taille de pinceau, puis venir sur les côtés avec une grande gomme pour clarifier les bords.

Adobe a une fonctionnalité similaire dans Photoshop Touch appelée Scribble Select qui vaut la peine d'être consultée pour référence.

16
Kit Grose

Vous pouvez utiliser un pointeur/réticule décalé au-dessus du centre du point de contact avec une largeur appropriée. Cela vous permettra de voir où la ligne est tracée, sans être masquée par votre doigt ou votre main.

4
Tom Engh