UI design
Eric P.
Membre
Bonjour à tous,
iPocket Draw progresse et je manque de place dans ma Toolbar.
C'est pourquoi j'ai cherché du côté des contrôles "pop-up" à la façon des touches du clavier avec les caractères accentués.
En fait, cette solution est complexe et ne pourra pas résoudre tous mes problèmes.
J'envisage donc de m'affranchir de la Toolbar et de l'éclater en boutons.
Les copies d'écran ci-dessous montrent l'ancienne UI et celle projetée avec :
En haut à gauche les boutons liés à la gestion des fichiers, icône de dossier = affichage de la page de gestion des fichiers, icône "roue" préférences du fichier;
En haut à droite, les info. sur le programme et le fichier en cours;
En bas à droite les icônes d'outils de dessin et l'icône "roue" (pour l'instant la même) pour le paramétrage des outils et des objets;
En bas à droite, la poubelle;
Ainsi, je pourrai plus tard ajouter des icônes d'Undo et Redo en haut à gauche et éventuellement d'autres outils en bas à gauche.
Que pensez-vous de cette évolution ?
J'ai actuellement un code fonctionnel avec cet UI.
Merci
iPocket Draw progresse et je manque de place dans ma Toolbar.
C'est pourquoi j'ai cherché du côté des contrôles "pop-up" à la façon des touches du clavier avec les caractères accentués.
En fait, cette solution est complexe et ne pourra pas résoudre tous mes problèmes.
J'envisage donc de m'affranchir de la Toolbar et de l'éclater en boutons.
Les copies d'écran ci-dessous montrent l'ancienne UI et celle projetée avec :
En haut à gauche les boutons liés à la gestion des fichiers, icône de dossier = affichage de la page de gestion des fichiers, icône "roue" préférences du fichier;
En haut à droite, les info. sur le programme et le fichier en cours;
En bas à droite les icônes d'outils de dessin et l'icône "roue" (pour l'instant la même) pour le paramétrage des outils et des objets;
En bas à droite, la poubelle;
Ainsi, je pourrai plus tard ajouter des icônes d'Undo et Redo en haut à gauche et éventuellement d'autres outils en bas à gauche.
Que pensez-vous de cette évolution ?
J'ai actuellement un code fonctionnel avec cet UI.
Merci
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
(CF : Sketch qui était dispo depuis le premier jailbreak des iPod Touch, iPhone)
Pour les outils principaux, je préfère un accès direct.
Merci.
Eric P.
Je ne suis pas graphiste.
Mais si certains ont des idées.
système de paging ?? kesako ?
Donc dans la "page 1" de ta ToolBar tu aurais les outils principaux, et si tu "swipes" sur la toolbar en donnant un "coup de doigt" vers la droite ou vers la gauche, ça va à la page suivante ou précédente de ta ToolBar, affichant les outils suivants ou précédents.
C'est pas une bête idée en effet. Le plus simple pour implémenter ça est d'utiliser un UIScrollView avec le mode "pagingEnabled" à YES. Prend exemple sur le code "PageControl" d'Apple où ils montrent comment faire.
Sinon moi j'imaginerais plus un fonctionnement à la Photoshop : un nombre limité de boutons affichés dans ta Toolbar, et un appui long sur l'un des boutons affiche une sous-palette (enfin en l'occurence ça pourrait être une "toolbar secondaire" que tu affiches en superposition et en semi-transparence par exemple, au dessus de la première, le temps que l'utilisateur sélectionne son outil).
Et une fois le "sous-outil" choisi, son icône remplace l'icône utilisée pour ce sous-menu dans la toolbar principale. Exemple : barre d'outil principale = contient les outils de haut niveau / générique {pointeur, forme, couleur, calques}, par défaut l'outil forme est en fait l'outil "rectangle" et c'est donc une icône de rectangle qui s'affiche à cette position dans la ToolBar, mais un appui long sur cette icône t'affiche une ToolBar au dessus, te permettant de choisir le "sous-outil" parmi {rectangle, ovale, rectangle à bords arrondis, polygone libre} par exemple. Et si tu choisis disons "ovale", ça va sélectionner cet outil, et pour te le montrer ça va utiliser l'icône de l'Ovale (que tu as sélectionnée dans la "sous-toolbar") dans la toolbar principale à la place de ce qui était avant l'icône de rectangle.
Tu peux même combiner les deux, une Toolbar "scrollable" via des "swipe" (cf exemple PageControl) et une sous-toolbar (scrollables ou non) :P
Un appui simple affiche la Toolbar secondaire.
Un second clic sur la même icône (de la Toolbar principale) masque la Toolbar secondaire... et sélectionne du coup l'outil.
Ainsi si on était sur l'outil "pointeur" et qu'on simple-clique sur l'icône "rectangle", ça affiche la Toolbar secondaire directement, permettant de choisir parmi les outils de forme genre {ovale, rectangle, polygone}. Mais si on clique une 2e fois sur cette même icône de rectancle de la toolbar principale, ça aura le mm effet que si on clique sur l'icône de rectangle de la toolbar secondaire, à savoir sélectionner l'outil rectangle.
Après, si on double-clique, plutôt que d'afficher (sur le 1er clic) puis masquer immédiatement (sur le 2e clic) la ToolBar, on peut pour faire plus joli directement sélectionner l'outil. Je veux dire on peut attendre de vérifier si c'est un double-clic (dans ce cas on sélectionne directement l'outil) et si ce n'est qu'un simple clic, on affiche la ToolBar secondaire. Exactement le même effet sauf qu'on a mm pas le temps de voir la Toolbar secondaire "flasher" si on double-clique. Mais ça garde le principe.
Si je comprends bien mon essai avec les boutons ne vous plaà®t pas.
Je le trouve pourtant simple et fonctionnel.
Bon les boutons ont besoin d'être retravaillés et grossis un peu.
Si certains ont du temps libre, je suis ouvert à tout proposition pour une aide au niveau graphisme.
Personnellement je préfère une interface moins jolie et plus fonctionnelle que l'inverse.
Eric P.
Mais dans la pratique, pense à ceux qui ont des gros doigts...
En effet, il y a une chose importante à prendre en compte dans le design d'applications iPhone, c'est que c'est une interface tactile... avec les doigts. Apple en parle dans certaines de leurs sessions WWDC, et c'est vrai que là pour le coup un prototype rapide de tes boutons (juste des Custum UIButtons avec tes icônes qui changent d'état quand tu tap dessus, histoire de voir s'il est facile de les manipuler) que tu testes vite fait sur device pour voir si c'est utilisable en pratique donne rapidement une idée de la chose et te permettra de voir si c'est ergonomique à utiliser
What Else ?
Et j'arrive à l'utiliser sans difficulté mais j'ai les doigts fins.
A la base j'avais un manque de place mais cette solution me permet de regrouper les boutons par "type" en fonction de leur action.
Je suis d'accord, l'interface ne fait pas "iPhone".
Dilemme.
Je vais faire tester par des gros doigts...
Eric P.
Il n'y a pas de quoi en mettre 6 en haut et 6 en bas ? Combien tu en as en tout ?
Perso, je trouve que 6 c'est le maximum en largeur.
EDIT : et sinon, forcer ton appli en mode paysage avec une largeur plus grande pour tout mettre dans la UITabBar ?
EDIT 2 : passer en mode paysage, ne pas utiliser une toolbar toute prête et faire 2 ou 3 lignes d'icones à gauche, de quoi obtenir un ecran plus "carré pour dessiner.