web-dev-qa-db-fra.com

Interface pour l'application d'édition d'images avec de nombreux outils pour les petits écrans tactiles?

Je fais une application d'édition d'image pour les téléphones avec écrans tactiles. Il aura des outils similaires aux applications de bureau connexes comme les outils pinceau, crayon, caoutchouc, masque, maculage, recadrage, texte, etc.

Pour un flux de travail fluide, je pense que ceux-ci sont importants:

  • sur les petits écrans en particulier, la plupart de l'espace sur l'écran doit être dédié à la zone d'édition d'image et à des choses comme les barres d'outils.

  • l'utilisateur doit être en mesure de basculer rapidement entre certains outils avec un minimum d'agitation. J'imagine que pouvoir basculer rapidement entre l'outil pinceau et gomme et pouvoir appuyer rapidement sur annuler/rétablir serait important lors du dessin de quelque chose par exemple.

Je pense que l'interface basée sur la barre d'outils de GIMP et d'Inkscape fonctionne bien pour ce type d'applications, mais il n'y a tout simplement pas de place pour d'énormes barres d'outils sur les petits écrans.

J'ai déjà une barre d'outils en haut de l'écran qui a de la place pour environ 7 ou 8 icônes de raccourci, y compris les bases comme annuler et refaire car cela semble être un moyen simple de donner un accès en un clic aux opérations. Sans agrandir la barre d'outils, il n'y a que suffisamment de place pour une poignée d'autres icônes.

Je cherche des idées pour utiliser au mieux cet espace.

Quelques idées que j'ai eues:

  • Faites défiler horizontalement la moitié de la barre d'outils pour pouvoir faire glisser votre doigt vers la gauche/droite pour rendre les autres boutons d'outils visibles. Cela semble difficile et difficile à découvrir et n'est pas génial si vous utilisez régulièrement un outil qui apparaît à l'extrême gauche et un autre à l'extrême droite.

  • Réduisez le nombre d'outils en combinant certains. Par exemple, le crayon et le maculage deviennent des modes configurables de l'outil pinceau. Cela peut ne pas être intuitif dans certains cas et introduit des étapes supplémentaires pour basculer entre le mode crayon et le mode pinceau (mais si c'est rare, ce n'est pas grave).

  • Autorisez l'utilisateur à modifier les outils qui apparaissent dans la barre d'outils afin que l'utilisateur puisse décider rapidement entre quels outils il peut basculer. Par exemple, en appuyant deux fois sur une icône, un menu leur permettant d'afficher le bouton de la barre d'outils pour un autre outil s'affiche. Cela présente des similitudes avec le point précédent.

Y a-t-il quelque chose d'évident que je manque?

user-behaviorimagecustomisationtoolbar
4
jcdnton

Je pense que la chose la plus importante lorsque l'on travaille sur des images sur des écrans mobiles est l'immobilier d'écran. Vous voulez plus d'image et moins d'interface utilisateur afin de voir les détails fins que vous manipulez. Je vous propose donc de les emballer le plus possible.

Voici une maquette rapide d'une solution:

Le bouton est en bas à gauche et l'écran est propre. Ils peuvent pincer pour zoomer et dézoomer.

Button in lower left

Appuyez sur l'icône Outils pour afficher la navigation de tous les outils. Notez le triangle sombre sur # 3, cela indique que plus d'outils y sont cachés. Appuyer et maintenir l'icône vous amènerait au 3ème SS qui montre plus d'outils.

Tapped brings up nav of tools

2nd nav

L'édition d'image nécessite beaucoup de travail de précision et voir ces changements est le plus important.

2
jonshariat

Deux autres idées:

1.) Créez un bouton qui ouvre un calque avec tous les outils. Quelque chose comme ça (mais avec vos outils au lieu de boutons bien sûr):

enter image description here

2.) Faites un "tiroir" pour le retirer. Quelque chose comme la barre de notification Android Android: Android notification

Ou l'application Google iPhone:

Google App

Personnellement, je pense que le 1.) fonctionne probablement mieux. Et bien sûr, il est préférable d'avoir tous les outils disponibles en permanence, mais vous devez définir des priorités avec un espace limité.

Edit : Avez-vous jeté un œil à Photoshop pour iPhone? Il pourrait même être réduit à une seule barre d'outils avec les outils les plus utilisés 3-4 plus un bouton pour le reste des outils. Voici une capture d'écran (je pense que c'est une version obsolète, mais le principe n'a pas changé):

enter image description here

J'espère que ça aide, Phil

1
Phil

Dépensez 30 $ et prenez des dizaines d'applications sur l'App Store et essayez-les. Préférences personnelles sur le dessus de ma tête:

UI d'édition d'images que j'aime:

  • caméra +
  • TiltShiftGen
  • artRage

D'autres à considérer:

  • photoForge
  • photoForge2
  • TouchRetouch
  • PhotoWizard
  • Iris
  • Photo parfaite
  • Brosses

et plein d'autres...

0
DA01