Du coup, j'ai cherché comment faire pour bloquer le mode portrait, j'ai trouvé des choses intéressante, mais il y a des conflits avec Obj-C...
Du coup, je ne sais pas comment faire...
C'est facile à faire. Une question quand même. Est-ce une application pour iPhone ou une application universelle (iPhone et iPad) ? La procédure est un peu différente selon le cas.
Franchement, je n'ai pas réfléchi à faire une application pour iPhone ou iPad.
Cependant, je pense que je vais faire une application pour iPhone pour le moment.
J'ai des idées pour l'améliorer, et donc, je verrai à ce moment là .
D'ailleurs, il faut deux storyboard, un pour iPhone et un pour iPad, mais je ne sais pas du tout comment on fait...
Et j'ai un autre problème avec mon scrollView. Lorsque je tappe sur un textField, je peux faire défiler le scrollView, et la page s'affiche entièrement. mais lorsque je passe à un autre textField, ou à un textView, je ne peux plus faire défiler le scrollView. C'est comme si le clavier avait disparu, alors qu'il est toujours là ...
J'ai cherché, mais je n'ai pas encore trouvé la cause de ce bug.
Draken, j'ai suivi ta solution. Le souci est que j'ai changé d'avis, car je pense qu'en faisant une application pour iPhone exclusivement, je vais vers la facilité, et je ne pourrai pas montrer tout ce que je sais faire avec l'auto layout.
Je pense que pour bloquer l'orientation sur les iPad (et peut-être l'iPhone X vu sa résolution), il faut cocher la case "Requires full screen". Me trompe-je ?
Joanna Carter, tu as raison. Je pensais qu'il fallait deux storyboard. Quoi qu'il en soit, il faut que je refasse le dégradé du navigation controller, car il est trop petit, et du coup, il apparait deux fois lorsque je teste avec un iPad. Mais faut-il que je fasse des boutons plus grands, des textFields plus grands ? Et oui, sur Ipad, mon application à l'air vide...
Je pense que pour bloquer l'orientation sur les iPad (et peut-être l'iPhone X vu sa résolution), il faut cocher la case "Requires full screen". Me trompe-je ?
Oui tu te trompes. Je te fais un petit tuto demain sur la question.
Joanna Carter, tu as raison. Je pensais qu'il fallait deux storyboard. Quoi qu'il en soit, il faut que je refasse le dégradé du navigation controller, car il est trop petit, et du coup, il apparait deux fois lorsque je teste avec un iPad. Mais faut-il que je fasse des boutons plus grands, des textFields plus grands ? Et oui, sur Ipad, mon application à l'air vide...
Il te reste beaucoup à apprendre sur Storyboard. Il faut définir les objets de manière relative, genre " ce contrôle doit faire la largeur de l'écran, moins 20 points à droite et 20 points à gauche ", pour que l'affichage s'adapte à n'importe quelle taille d'écran.
Je sais déjà comment fonctionne les width et height relative.
En fait, je ne m'en suis pas servi dans mon entêtement à faire des images pour les boutons : j'avais une image fixe, et donc, des boutons de largeur et hauteur fixes aussi.
D'ailleurs, il n'y a que pour les boutons que j'ai fait cela. Je ne l'ai pas fait pour les textFields par exemple, et je peux changer cela très vite !
Cependant, ce n'est plus le cas.
Encore une chose pour l'auto Layout... Si j'ai bien compris, pour le design des iPad, c'est toujours une height Regular et une width Regular. Si c'est le cas, ça va être facile de replacer les éléments.
Si j'ai bien compris, pour le design des iPad, c'est toujours une height Regular et une width Regular. Si c'est le cas, ça va être facile de replacer les éléments.
Non, ce serait trop facile !
Une interface iPad est normalement en Regular/Regular, mais il faut tenir compte de la fonction Split View permettant de diviser l'écran d'un iPad en deux fenêtres. A moins de cocher l'option Full Screen pour interdire le Split View.
Si tu veux gérer le Split View, l'interface iPad doit aussi fonctionner en wC/hR. Bon d'un autre coté, une application universelle doit déjà gérer ce mode pour l'iPhone ! Ce n'est donc pas un travail à faire en plus.
Oui, l'avantage de l'iPad pour l'utilisateur c'est justement le fait de pouvoir diviser l'écran en deux.
Je vais revoir l'auto Layout cette après-midi ! Comme j'avais commencé à m'occuper de la vue en paysage, il faut que je supprimer les contraintes inutiles.
Il faut aussi que je revois les boutons, et que je leur donne une hauteur et une largeur relative.
Cependant, pour mettre une image de fond sur mon navigation controller, j'ai du le faire avec le code. Le gros souci, c'est que l'image apparait deux fois sur les iPad, car elle n'est pas redimensionnée. J'ai trouvé une parage : mettre une image de fond sur toutes les pages, l'agrandir au maximum, afin qu'elle dépasse des marges de l'auto layout, et rendre voilà . Sauf que je ne sais pas comment faire pour rendre la couleur de fond du navigation controller 100% transparente. Je sais qu'il y a une option transparente, mais j'ai l'impression qu'il y a comme un voile dessus. Comment faire pour que mon image apparaisse clairement ?
EDIT :
J'ai trouvé ! Il suffisait de mettre une shadow vide.
Mais le résultat avec le dégradé ne me parait pas jolie du tout... On dirai qu'il y a du brouillard. C'est peut-être envisageable pour une application météo, mais pas là ...
Du coup, j'ai repris un autre vert, un peu comme celui de la tab bar. Qu'en pensez-vous ?
Oui, c'est simple, et ça m'a permis de comprendre quelque chose : la flèche vers le bas sert à ouvrir une liste à choix unique, alors que la double flèche sert à ouvrir une liste d'options, un peu comme des onglets. C'est noté.
Je reviens une fois de plus vers vous pour vous demander ce que vous pensez du design (terminé) de mon application.
Certes, il reste encore à télécharger Xcode 9 pour adapter le design à l'iPhone 8 et X, mais tous les bugs ont été corrigé et l'application est prête !
• L'eÌcran de loading on dirait que la classe de 3eme B va nous preÌsenter un powerpoint de leur voyage au centre de la DDE locale. WordArt c'eÌtait cool y'a 20 ans et ça peut encore l'être dans certains contextes mais là non.
• On a vu pas mal de screens ici et je n'ai pas encore compris le but et l'intérêt de l'application. Tu vas me dire que je peux lire mais je suis comme les gens sur le store, j'accorde une poignée secondes de mon temps à une fiche sur l'App Store. Si ce n'est ni beau ni cohérent je m'embête pas plus que ça.
• Sur la tab bar il y a un travail de custo, c'est bien. Mais quiconque a des yeux se rend compte que le contraste est un cauchemar. La couleur de fond peut rester, la couleur d'item sélectionné peut rester si elle pique un peu moins les yeux (c'est trop de vert), par contre ce gris qu'il est très compliqueÌ à distinguer sur le fond il faut le changer.
• Les pieÌ€ces de couleur or et argent sont à oublier. L'application manque deÌjaÌ€ de coheÌrence graphique mais ces pieÌ€ces ont l'air d'avoir été oubliées laÌ€. En plus elles sont énormes par rapport au contenu des cellules. Puis ça sert à quoi ? C'est un repère pour le prix, pour la qualiteÌ ? Or/Argent → Premier/Second ? C'est quoi ces trucs ??!
• Attention aussi au sens de lecture. Dans la culture occidentale on lit majoritairement de gauche à droite. Dans d'autres cultures c'est le contraire mais je pense que tu destine ton application au marcheÌ occidental donc gauche vers droite. Pourquoi tout ça ? À cause de ces deux boutons CreÌer et Effacer, ils sont inverseÌs.
On lit de gauche à droite ce qui implique que ce qu'on va lire se trouve sur la droite et ce qu'on a lu sur la gauche. Cela eÌtant on peut considérer que gauche → passeÌ et droite → futur. Si on part du principe que creÌer t'envoie vers le futur de ton workflow d'opeÌration mais par contre qu'effacer te fais revenir en arrière "et donc le passeÌ" le boutons qui permet l'action de creÌer doit se trouver sur la droite et celui d'effacer sur la gauche.
Seulement effacer n'est pas une composant globale de ton workflow. C'est une fonctionnaliteÌ locale à ton text field et y est donc exclusivement lieÌe. Opte plutôt pour un text field avec le bouton d'effacement standard du système.
De plus l'action de creÌer est ici une action terminale d'une chaine d'actions et ne provoquera pas de navigation vers une action suivante. C'est pourquoi il ne faut pas la mettre non plus vers la droite mais plutôt centreÌe et sous le text field parce qu'après ça c'est fini, on a ajouteÌ une cateÌgorie et on passe à autre chose.
• On reste sur cet eÌcran pour parler des options (qu'on ne voit pas). Si ces options portent sur la cateÌgorie qu'on ajoute il y a clairement la place pour les mettre sur cet eÌcran la quite à laisser la possibiliteÌ des les montrer/cacher. Si ça n'a rien à voir avec la cateÌgorie qu'on ajoute tu peux considérer que ça n'a rien à faire là .
• Ajouter une cateÌgorie est aussi une action unique et bloquante sur iPhone (on mettrait un pop over sur iPad) tu dois afficher la vue de manière modale pour empêcher à l'utilisateur de faire autre chose en meÌ‚me temps.
• Concernant l'icoÌ‚ne on dirait que t'as pris un fond à l'arrache, une police que tu trouvais plus ou moins sympa et avec l'outil texte tu as rajouteÌ un $ au milieu. Et c'est le cas. Ça fait pas propre ni flat design ni quoi que ce soit. C'est à changer d'urgence.
Il y a du mieux depuis la premieÌ€re version donc il n'y a pas de raison que tu n'y arrive pas avec encore du travail mais ça serait moi je réfléchirai à deux fois avant de publier ça...
Et lis ! Lis les guidelines chez Apple, lis des articles de design/UX sur Medium, documente toi, observe les applications qui existent et imagine toi utiliser ton application.
Pyroh, je te remercie beaucoup pour tes remarques constructives ! Je vais encore bosser dessus, et il est évident que je ne publierai pas mon application tel quel sur le store, car je veux me lancer en tant que freelance (avec le statut AE). Du coup, j'ai besoin d'une bonne application.
Je vais reprendre point par point ce que tu as écrit, dans l'ordre alphabêtanumérique...
- Pour l'écran du loading, je ne sais vraiment pas quoi faire, et je ne suis pas du tout inspiré... Je sais aussi que je dois revoir le logo et juste utiliser les lettres LA, car je trouve que LASA sonne faux...
- Pour les screens, oui, j'en ai montré beaucoup, mais à chaque fois, c'était la page du loading, la page des catégories et la page qui permet d'ajouter une catégorie. J'ai montré seulement 3 storyboards sur les 17 de mon application. Donc oui, personne ne peut comprendre le but de mon application. D'ailleurs, elle est très générale.
- J'ai revu les couleurs de la tab bar. Les images resteront blanches et les textes des icônes sélectionnées seront jaunes. Pour la couleur grise, c'est celle par defaut des icônes. J'ai du refaire ces icônes pour qu'elles apparaissent blanches.Est-ce mieux ?
- Pour les pièces, oui, je les avait laissé car j'ai eu du mal à les faire, et surtout, je pense qu'elle sont plus jolie que le billet de la Super NES que j'avais mis au départ... Je voulais juste images de favoris différents. Donc, oui, tu as compris le but des images. J'ai refait des étoiles, car c'est plus classique, plus petites que les pièces, mais j'ai pris du jaune, et on ne voit rien... Il faut juste que je change la couleur. Mais je ne sais pas encore quelle couleur choisir...
- Pour le sens de lecture, oui, tu as raison, et honnêtement, je me suis posé la question. Je ne savais pas qu'il y avait un bouton standard pour effacer un text field. J'ai corrigé dans la vue que j'ai montré. Je pense que c'est mieux.
- Je reste aussi sur les options qu'on ne voit pas, car ils sont sur la page que l'on peut afficher en cliquant sur le bouton " options ". En fait, le terme option est ici très mal choisi, car la page suivante montre une liste de catégories pré enregistrées que l'on peut, soit enregistrer, soit effacer. Mais ll faut que je revois le design, car il me faut des couleurs différentes pour dire si la catégorie est enregistrée ou pas.
Ce que je peux faire, c'est mettre ces catégories pré enregistrées dans la page d'ajout de catégories. Comme ça, la page paraitra moins vide et ce sera plus cohérent.
- Je n'ai pas bien compris ce que tu voulais dire par afficher l'ajout d'une catégorie de manière modale... Est-ce comme une alerte, par exemple, si l'on efface une partie des données ?
- Pour l'icône, je vais la revoir. Oui, tu as raison, il faut que je me documente !
J'ai suivi tes conseils, Pyroh, et j'ai fais une fenêtre modale pour l'ajout de catégorie. J'ai juste une question : Quel titre est le mieux ? Celui du navigation controller, ou celui du text field ?
J'ai aussi revu la page de présentation. J'ai repris les images de la tab bar et j'ai expliqué ce que l'on pouvait faire avec. J'ai aussi ajouté un effet visuel que je vous laisse découvrir...
Qu'en pensez-vous ? J'ai aussi penser mettre un logo en bas à gauche, et le bouton "Go !" à droite. Mais je n'ai pas encore de logo... Il faut aussi que je revois le design du bouton "Go !", mais je voulais avoir votre avis avant !
J'en pense que tu aimes bien les couleurs foncés ! Cela donne un look vraiment vieillot à ton application. La leçon de design d'iOS 7 a été des couleurs claires et de jouer sur les polices de caractères (taille, gras, italique).
Perso, je vois ça sur l'AppStore, je zappe l'application sans même lire la description.
En regardant tes écrans on voit que c'est une application couteau-suisse avec de nombreuses fonctions, pas forcément êtres liées.. Par exemple je ne vois pas l'intérêt d'une fonction pour suivre en temps réel le cours de l'or et de l'argent, dans une application servant à gérer des collections !
Oui !! Pour les couleurs foncées, j'avais peur que les couleurs claires fassent mal aux yeux !
Je n'ai pas modifier la taille des polices, ni mi de gras ou d'italique, ni changer de police. Je n'y ai pas pensé, et il faut que j'apprenne comment faire.
L'or est un point de repère pour mesurer la valeur de beaucoup d'objets.
Et j'ai fais cela pour toucher le plus grand nombre d'utilisateur ! Maintenant, je peux retirer cette page mais les utilisateurs ne sont pas obligés de l'ouvrir. Et j'ai prévu des améliorations et de nouvelles choses...
Et pour le reste ? Est-ce que ma page de présentation est une bonne idée ? Est-ce que le texte qui change de couleurs est une bonne idée ou pas ??
Est ce que la vue modale pour ajouter des catégories est bien ? Quel titre dois-je garder ? Celui de la navigation bar, sans doute !
Je vous montre la page des catégories, avec une couleur différente pour le segmented control.
Ce vert ne vas toujours pas. Il n'est pas chaleureux. On dirais un formulaire administratif tristounet. Si j'avais la fibre artistique je te trouverais une belle nuance, mais j'en suis incapable.
C'est toujours un peu froid. Tu devrais essayer un fond avec un texture reproduisant un vieux papier ou du parchemin. Cela iras peut-être avec le style de l'application. On trouve ça facilement sur le net, sans droit d'utilisation. Il y a aussi des tutos pour créer une texture de papier avec Gimp.
Si le souci est la couleur verte, je peux aussi changé totalement le thème de mon application. J'ai pris la couleur verte car c'est la couleur du dollar, tout simplement, mais ce n'est peut-être pas une bonne idée...
J'ai visité les sites que Colas m'a donné, et j'ai trouvé plusieurs palettes de 5 couleurs qui conviendrait. Peut-être que je vais devoir reprendre le choix des couleurs à 0...
J'ai suivi une tutoriel avec Gimp et voici le résultat (Il faudra revoir la couleur des étoiles) :
De mon point de vue, parce que ce n'est pas une tâche facile que celle du design.
En effet, tout l'monde peut critiquer le design, alors que le code, y'a déjà moins de monde, et si en plus le code est caché (du point de vue utilisateur)...
Par contre, je t'inviterai à regarder ce qu'il se fait à côté :
Trouver des apps que tu trouves esthétiques qui ont des TableView (car ça a l'air d'être le gros du problème).
Sur celles-ci, trouve les couleurs qui vont ensembles :
Le text des cellules est la même que celui des ...
Il est dans les mêmes tons, légèrement plus clair/foncé que celui des...
Regarde ensuite ce que les développeurs customisent exactement. Ces petits trucs en plus pourraient faire une belle différence.
Oui, c'est facile de programmer, mais c'est plus difficile de choisir un design qui plaira à un maximum de personnes.
J'ai eu tord dans la mesure où j'ai absolument voulu mettre une couleur verte (pour le dollar, et avec les pièces), au lieu de trouver 4 ou 5 couleurs que l'on peut mettre ensemble et qui vont bien. Je pense que je devrais abandonné le thème que j'avais prévu au départ, c'est-à -dire l'argent, au profil d'un design qui sera joli et qui plaira. Pour tout dire, je me suis trop focalisé sur le thème de l'argent. J'avais même pensé à faire des coffres (comme ceux des pirates, en bois) pour les favoris, avec des coffres fermés et d'autres ouverts avec plein de pièces !!!
Bref, j'ai commis l'une des pire erreur que l'on peut commettre : j'ai totalement manqué d'objectivité et d'ouverture d'esprit ! Je vais reprendre le design entièrement ! Tout effacé (juste le design) et tout recommencer !
Colas, je suis aller sur l'un des deux sites que tu m'as donné pour le choix des couleurs.
J'ai trouvé 4 panels de couleurs qui me plaisaient et qui pouvaient correspondre, soit à mon application actuelle, soit à mes autres projets... Seule la couleur orange des étoiles est de moi.
J'ai donc repris le design à 0, et j'ai suivi vos conseils, je me suis inspiré de ce qui me plaisait : j'ai donné plus d'importance aux cells. Pour le moment, je n'ai fait qu'une page, car j'attends de voir vos réactions, et j'ose espérer que vous ne me lancerez pas de tomates...
Une question : pour avoir le design que tu as au niveau des cellules de la tableView, tu as autant de sections que de cellules ? ou c'est une autre technique ?
Réponses
C'est facile à faire. Une question quand même. Est-ce une application pour iPhone ou une application universelle (iPhone et iPad) ? La procédure est un peu différente selon le cas.
Franchement, je n'ai pas réfléchi à faire une application pour iPhone ou iPad.
Cependant, je pense que je vais faire une application pour iPhone pour le moment.
J'ai des idées pour l'améliorer, et donc, je verrai à ce moment là .
D'ailleurs, il faut deux storyboard, un pour iPhone et un pour iPad, mais je ne sais pas du tout comment on fait...
Et j'ai un autre problème avec mon scrollView. Lorsque je tappe sur un textField, je peux faire défiler le scrollView, et la page s'affiche entièrement. mais lorsque je passe à un autre textField, ou à un textView, je ne peux plus faire défiler le scrollView. C'est comme si le clavier avait disparu, alors qu'il est toujours là ...
J'ai cherché, mais je n'ai pas encore trouvé la cause de ce bug.
Mais non. Il ne faut qu'un storyboard pour une appli universelle.
Pour bloquer l'orientation en mode Portrait sur iPhone, tu dois afficher les options de configuration de l'application, puis :
- Vérifier que Devices est bien réglé à iPhone
- Regarder l'option Device Orientation et ne sélectionner que Portait.
C'est tout. Pas bien compliqué ..
Joanna Carter, je ne savais pas pour le storyboard, c'est ce que j'ai lu sur Internet...
Draken, je te remercie ! En fait, j'avais trouvé une solution au niveau de la programmation. J'étais à côté de la plaque.
Draken, j'ai suivi ta solution. Le souci est que j'ai changé d'avis, car je pense qu'en faisant une application pour iPhone exclusivement, je vais vers la facilité, et je ne pourrai pas montrer tout ce que je sais faire avec l'auto layout.
Je pense que pour bloquer l'orientation sur les iPad (et peut-être l'iPhone X vu sa résolution), il faut cocher la case "Requires full screen". Me trompe-je ?
Joanna Carter, tu as raison. Je pensais qu'il fallait deux storyboard. Quoi qu'il en soit, il faut que je refasse le dégradé du navigation controller, car il est trop petit, et du coup, il apparait deux fois lorsque je teste avec un iPad. Mais faut-il que je fasse des boutons plus grands, des textFields plus grands ? Et oui, sur Ipad, mon application à l'air vide...
Oui tu te trompes. Je te fais un petit tuto demain sur la question.
Il te reste beaucoup à apprendre sur Storyboard. Il faut définir les objets de manière relative, genre " ce contrôle doit faire la largeur de l'écran, moins 20 points à droite et 20 points à gauche ", pour que l'affichage s'adapte à n'importe quelle taille d'écran.
Regarde ce tuto : http://forum.cocoacafe.fr/topic/15156-layout-image-texte-ne-se-positionne-pas/?hl=%2Bcontrainte+%2Bchaussure#entry146516
J'y explique quelques techniques de Storyboard pour adapter la taille d'un contrôle à la dimension de l'écran.
De la même manière on peut placer les boutons sur l'écran à partir de leurs centres et laisser iOS adapter la largeur et la hauteur au contenu.
Draken, je te remercie pour ces explications.
Je sais déjà comment fonctionne les width et height relative.
En fait, je ne m'en suis pas servi dans mon entêtement à faire des images pour les boutons : j'avais une image fixe, et donc, des boutons de largeur et hauteur fixes aussi.
D'ailleurs, il n'y a que pour les boutons que j'ai fait cela. Je ne l'ai pas fait pour les textFields par exemple, et je peux changer cela très vite !
Cependant, ce n'est plus le cas.
Encore une chose pour l'auto Layout... Si j'ai bien compris, pour le design des iPad, c'est toujours une height Regular et une width Regular. Si c'est le cas, ça va être facile de replacer les éléments.
Non, ce serait trop facile !
Une interface iPad est normalement en Regular/Regular, mais il faut tenir compte de la fonction Split View permettant de diviser l'écran d'un iPad en deux fenêtres. A moins de cocher l'option Full Screen pour interdire le Split View.
Si tu veux gérer le Split View, l'interface iPad doit aussi fonctionner en wC/hR. Bon d'un autre coté, une application universelle doit déjà gérer ce mode pour l'iPhone ! Ce n'est donc pas un travail à faire en plus.
Merci Draken !
Oui, l'avantage de l'iPad pour l'utilisateur c'est justement le fait de pouvoir diviser l'écran en deux.
Je vais revoir l'auto Layout cette après-midi ! Comme j'avais commencé à m'occuper de la vue en paysage, il faut que je supprimer les contraintes inutiles.
Il faut aussi que je revois les boutons, et que je leur donne une hauteur et une largeur relative.
Cependant, pour mettre une image de fond sur mon navigation controller, j'ai du le faire avec le code. Le gros souci, c'est que l'image apparait deux fois sur les iPad, car elle n'est pas redimensionnée. J'ai trouvé une parage : mettre une image de fond sur toutes les pages, l'agrandir au maximum, afin qu'elle dépasse des marges de l'auto layout, et rendre voilà . Sauf que je ne sais pas comment faire pour rendre la couleur de fond du navigation controller 100% transparente. Je sais qu'il y a une option transparente, mais j'ai l'impression qu'il y a comme un voile dessus. Comment faire pour que mon image apparaisse clairement ?
EDIT :
J'ai trouvé ! Il suffisait de mettre une shadow vide.
Mais le résultat avec le dégradé ne me parait pas jolie du tout... On dirai qu'il y a du brouillard. C'est peut-être envisageable pour une application météo, mais pas là ...
Du coup, j'ai repris un autre vert, un peu comme celui de la tab bar. Qu'en pensez-vous ?
Pour faire la même chose en mode Universal :
- Changer l'option Devices en iPad
- Désélectionner les réglages Device Orientation pour ne garder que Portrait
- Basculer l'option Devices sur iPhone
- Ne garder que Portait dans les réglages Device Orientation (comme pour l'iPad)
- Remettre l'option Devices à Universal
Et c'est tout ..
Je te remercie pour ton tutoriel, Draken !
Oui, c'est simple, et ça m'a permis de comprendre quelque chose : la flèche vers le bas sert à ouvrir une liste à choix unique, alors que la double flèche sert à ouvrir une liste d'options, un peu comme des onglets. C'est noté.
Je reviens une fois de plus vers vous pour vous demander ce que vous pensez du design (terminé) de mon application.
Certes, il reste encore à télécharger Xcode 9 pour adapter le design à l'iPhone 8 et X, mais tous les bugs ont été corrigé et l'application est prête !
J'ai refait l'icône de l'application.
Qu'en pensez-vous ?
Bon :
• L'eÌcran de loading on dirait que la classe de 3eme B va nous preÌsenter un powerpoint de leur voyage au centre de la DDE locale. WordArt c'eÌtait cool y'a 20 ans et ça peut encore l'être dans certains contextes mais là non.
• On a vu pas mal de screens ici et je n'ai pas encore compris le but et l'intérêt de l'application. Tu vas me dire que je peux lire mais je suis comme les gens sur le store, j'accorde une poignée secondes de mon temps à une fiche sur l'App Store. Si ce n'est ni beau ni cohérent je m'embête pas plus que ça.
• Sur la tab bar il y a un travail de custo, c'est bien. Mais quiconque a des yeux se rend compte que le contraste est un cauchemar. La couleur de fond peut rester, la couleur d'item sélectionné peut rester si elle pique un peu moins les yeux (c'est trop de vert), par contre ce gris qu'il est très compliqueÌ à distinguer sur le fond il faut le changer.
• Les pieÌ€ces de couleur or et argent sont à oublier. L'application manque deÌjaÌ€ de coheÌrence graphique mais ces pieÌ€ces ont l'air d'avoir été oubliées laÌ€. En plus elles sont énormes par rapport au contenu des cellules. Puis ça sert à quoi ? C'est un repère pour le prix, pour la qualiteÌ ? Or/Argent → Premier/Second ? C'est quoi ces trucs ??!
• Attention aussi au sens de lecture. Dans la culture occidentale on lit majoritairement de gauche à droite. Dans d'autres cultures c'est le contraire mais je pense que tu destine ton application au marcheÌ occidental donc gauche vers droite. Pourquoi tout ça ? À cause de ces deux boutons CreÌer et Effacer, ils sont inverseÌs.
On lit de gauche à droite ce qui implique que ce qu'on va lire se trouve sur la droite et ce qu'on a lu sur la gauche. Cela eÌtant on peut considérer que gauche → passeÌ et droite → futur. Si on part du principe que creÌer t'envoie vers le futur de ton workflow d'opeÌration mais par contre qu'effacer te fais revenir en arrière "et donc le passeÌ" le boutons qui permet l'action de creÌer doit se trouver sur la droite et celui d'effacer sur la gauche.
Seulement effacer n'est pas une composant globale de ton workflow. C'est une fonctionnaliteÌ locale à ton text field et y est donc exclusivement lieÌe. Opte plutôt pour un text field avec le bouton d'effacement standard du système.
De plus l'action de creÌer est ici une action terminale d'une chaine d'actions et ne provoquera pas de navigation vers une action suivante. C'est pourquoi il ne faut pas la mettre non plus vers la droite mais plutôt centreÌe et sous le text field parce qu'après ça c'est fini, on a ajouteÌ une cateÌgorie et on passe à autre chose.
• On reste sur cet eÌcran pour parler des options (qu'on ne voit pas). Si ces options portent sur la cateÌgorie qu'on ajoute il y a clairement la place pour les mettre sur cet eÌcran la quite à laisser la possibiliteÌ des les montrer/cacher. Si ça n'a rien à voir avec la cateÌgorie qu'on ajoute tu peux considérer que ça n'a rien à faire là .
• Ajouter une cateÌgorie est aussi une action unique et bloquante sur iPhone (on mettrait un pop over sur iPad) tu dois afficher la vue de manière modale pour empêcher à l'utilisateur de faire autre chose en meÌ‚me temps.
• Concernant l'icoÌ‚ne on dirait que t'as pris un fond à l'arrache, une police que tu trouvais plus ou moins sympa et avec l'outil texte tu as rajouteÌ un $ au milieu. Et c'est le cas. Ça fait pas propre ni flat design ni quoi que ce soit. C'est à changer d'urgence.
Il y a du mieux depuis la premieÌ€re version donc il n'y a pas de raison que tu n'y arrive pas avec encore du travail mais ça serait moi je réfléchirai à deux fois avant de publier ça...
Et lis ! Lis les guidelines chez Apple, lis des articles de design/UX sur Medium, documente toi, observe les applications qui existent et imagine toi utiliser ton application.
Pyroh, je te remercie beaucoup pour tes remarques constructives ! Je vais encore bosser dessus, et il est évident que je ne publierai pas mon application tel quel sur le store, car je veux me lancer en tant que freelance (avec le statut AE). Du coup, j'ai besoin d'une bonne application.
Je vais reprendre point par point ce que tu as écrit, dans l'ordre alphabêtanumérique...
- Pour l'écran du loading, je ne sais vraiment pas quoi faire, et je ne suis pas du tout inspiré... Je sais aussi que je dois revoir le logo et juste utiliser les lettres LA, car je trouve que LASA sonne faux...
- Pour les screens, oui, j'en ai montré beaucoup, mais à chaque fois, c'était la page du loading, la page des catégories et la page qui permet d'ajouter une catégorie. J'ai montré seulement 3 storyboards sur les 17 de mon application. Donc oui, personne ne peut comprendre le but de mon application. D'ailleurs, elle est très générale.
- J'ai revu les couleurs de la tab bar. Les images resteront blanches et les textes des icônes sélectionnées seront jaunes. Pour la couleur grise, c'est celle par defaut des icônes. J'ai du refaire ces icônes pour qu'elles apparaissent blanches.Est-ce mieux ?
- Pour les pièces, oui, je les avait laissé car j'ai eu du mal à les faire, et surtout, je pense qu'elle sont plus jolie que le billet de la Super NES que j'avais mis au départ... Je voulais juste images de favoris différents. Donc, oui, tu as compris le but des images. J'ai refait des étoiles, car c'est plus classique, plus petites que les pièces, mais j'ai pris du jaune, et on ne voit rien... Il faut juste que je change la couleur. Mais je ne sais pas encore quelle couleur choisir...
- Pour le sens de lecture, oui, tu as raison, et honnêtement, je me suis posé la question. Je ne savais pas qu'il y avait un bouton standard pour effacer un text field. J'ai corrigé dans la vue que j'ai montré. Je pense que c'est mieux.
- Je reste aussi sur les options qu'on ne voit pas, car ils sont sur la page que l'on peut afficher en cliquant sur le bouton " options ". En fait, le terme option est ici très mal choisi, car la page suivante montre une liste de catégories pré enregistrées que l'on peut, soit enregistrer, soit effacer. Mais ll faut que je revois le design, car il me faut des couleurs différentes pour dire si la catégorie est enregistrée ou pas.
Ce que je peux faire, c'est mettre ces catégories pré enregistrées dans la page d'ajout de catégories. Comme ça, la page paraitra moins vide et ce sera plus cohérent.
- Je n'ai pas bien compris ce que tu voulais dire par afficher l'ajout d'une catégorie de manière modale... Est-ce comme une alerte, par exemple, si l'on efface une partie des données ?
- Pour l'icône, je vais la revoir. Oui, tu as raison, il faut que je me documente !
Je te remercie beaucoup !
Me revoilà !
J'ai suivi tes conseils, Pyroh, et j'ai fais une fenêtre modale pour l'ajout de catégorie. J'ai juste une question : Quel titre est le mieux ? Celui du navigation controller, ou celui du text field ?
J'ai aussi revu la page de présentation. J'ai repris les images de la tab bar et j'ai expliqué ce que l'on pouvait faire avec. J'ai aussi ajouté un effet visuel que je vous laisse découvrir...
Qu'en pensez-vous ? J'ai aussi penser mettre un logo en bas à gauche, et le bouton "Go !" à droite. Mais je n'ai pas encore de logo... Il faut aussi que je revois le design du bouton "Go !", mais je voulais avoir votre avis avant !
J'en pense que tu aimes bien les couleurs foncés ! Cela donne un look vraiment vieillot à ton application. La leçon de design d'iOS 7 a été des couleurs claires et de jouer sur les polices de caractères (taille, gras, italique).
Perso, je vois ça sur l'AppStore, je zappe l'application sans même lire la description.
En regardant tes écrans on voit que c'est une application couteau-suisse avec de nombreuses fonctions, pas forcément êtres liées.. Par exemple je ne vois pas l'intérêt d'une fonction pour suivre en temps réel le cours de l'or et de l'argent, dans une application servant à gérer des collections !
Oui !! Pour les couleurs foncées, j'avais peur que les couleurs claires fassent mal aux yeux !
Je n'ai pas modifier la taille des polices, ni mi de gras ou d'italique, ni changer de police. Je n'y ai pas pensé, et il faut que j'apprenne comment faire.
L'or est un point de repère pour mesurer la valeur de beaucoup d'objets.
Et j'ai fais cela pour toucher le plus grand nombre d'utilisateur ! Maintenant, je peux retirer cette page mais les utilisateurs ne sont pas obligés de l'ouvrir. Et j'ai prévu des améliorations et de nouvelles choses...
Et pour le reste ? Est-ce que ma page de présentation est une bonne idée ? Est-ce que le texte qui change de couleurs est une bonne idée ou pas ??
Est ce que la vue modale pour ajouter des catégories est bien ? Quel titre dois-je garder ? Celui de la navigation bar, sans doute !
Je vous montre la page des catégories, avec une couleur différente pour le segmented control.
Dites-moi si je suis sur la bonne voie ou pas...
Ce vert ne vas toujours pas. Il n'est pas chaleureux. On dirais un formulaire administratif tristounet. Si j'avais la fibre artistique je te trouverais une belle nuance, mais j'en suis incapable.
Moi aussi j'ai beaucoup de mal à choisir les couleurs...
Comme tu n'as rien dit pour le reste, je pense que c'est mieux.
J'ai changé de vert pour un vert menthe, un peu plus foncé que le dernier, mais qui reste clair.
Est-ce mieux ?
C'est toujours un peu froid. Tu devrais essayer un fond avec un texture reproduisant un vieux papier ou du parchemin. Cela iras peut-être avec le style de l'application. On trouve ça facilement sur le net, sans droit d'utilisation. Il y a aussi des tutos pour créer une texture de papier avec Gimp.
Si le souci est la couleur verte, je peux aussi changé totalement le thème de mon application. J'ai pris la couleur verte car c'est la couleur du dollar, tout simplement, mais ce n'est peut-être pas une bonne idée...
J'ai visité les sites que Colas m'a donné, et j'ai trouvé plusieurs palettes de 5 couleurs qui conviendrait. Peut-être que je vais devoir reprendre le choix des couleurs à 0...
J'ai suivi une tutoriel avec Gimp et voici le résultat (Il faudra revoir la couleur des étoiles) :
De mon point de vue, parce que ce n'est pas une tâche facile que celle du design.
En effet, tout l'monde peut critiquer le design, alors que le code, y'a déjà moins de monde, et si en plus le code est caché (du point de vue utilisateur)...
Par contre, je t'inviterai à regarder ce qu'il se fait à côté :
Trouver des apps que tu trouves esthétiques qui ont des TableView (car ça a l'air d'être le gros du problème).
Sur celles-ci, trouve les couleurs qui vont ensembles :
Le text des cellules est la même que celui des ...
Il est dans les mêmes tons, légèrement plus clair/foncé que celui des...
Regarde ensuite ce que les développeurs customisent exactement. Ces petits trucs en plus pourraient faire une belle différence.
Larme, je te remercie de ton point de vue.
Oui, c'est facile de programmer, mais c'est plus difficile de choisir un design qui plaira à un maximum de personnes.
J'ai eu tord dans la mesure où j'ai absolument voulu mettre une couleur verte (pour le dollar, et avec les pièces), au lieu de trouver 4 ou 5 couleurs que l'on peut mettre ensemble et qui vont bien. Je pense que je devrais abandonné le thème que j'avais prévu au départ, c'est-à -dire l'argent, au profil d'un design qui sera joli et qui plaira. Pour tout dire, je me suis trop focalisé sur le thème de l'argent. J'avais même pensé à faire des coffres (comme ceux des pirates, en bois) pour les favoris, avec des coffres fermés et d'autres ouverts avec plein de pièces !!!
Bref, j'ai commis l'une des pire erreur que l'on peut commettre : j'ai totalement manqué d'objectivité et d'ouverture d'esprit ! Je vais reprendre le design entièrement ! Tout effacé (juste le design) et tout recommencer !
Lucas, je trouve que tu progresses mais que ce n'est pas encore ça.
Inspire-toi de ce qui existe !!
Je vous remercie pour vos encouragements !
Colas, je suis aller sur l'un des deux sites que tu m'as donné pour le choix des couleurs.
J'ai trouvé 4 panels de couleurs qui me plaisaient et qui pouvaient correspondre, soit à mon application actuelle, soit à mes autres projets... Seule la couleur orange des étoiles est de moi.
J'ai donc repris le design à 0, et j'ai suivi vos conseils, je me suis inspiré de ce qui me plaisait : j'ai donné plus d'importance aux cells. Pour le moment, je n'ai fait qu'une page, car j'attends de voir vos réactions, et j'ose espérer que vous ne me lancerez pas de tomates...
Voici :
Ce design aurait fait fureur y'a 10-15 ans !!
Mais plus maintenant
...
Voilà quelques liens utiles pour t'aider :
- Color, psychology and design
- Dribbble
- Les tables view chez Dribbble
- The ultimate guide for mobile developers, who want to design.
- How to use colors in UI Design
Salut,
Une question : pour avoir le design que tu as au niveau des cellules de la tableView, tu as autant de sections que de cellules ? ou c'est une autre technique ?
Merci.