La conception graphique pour le Web est une tendance populaire depuis des siècles. Et avec l’invention de l’iPhone d’Apple en 2007, l’app store a considérablement augmenté. Nous avons maintenant des concepteurs et des développeurs d'applications iOS qui se réunissent pour créer des conceptions vraiment fantastiques.
Mais si vous n'êtes pas amateur d’apprentissage de Xcode et de programmation Objective-C, il est possible que Photoshop suscite plus d’intérêt. Ci-dessous, je vais vous proposer quelques-uns des conseils que j'ai cités pour la conception de maquettes d'applications iOS tueuses. Et comme il y a toujours de nouvelles tendances, la communauté des concepteurs redéfinit constamment la création d'applications. Considérez cela comme davantage un guide de ressources pour débutants pour la conception d’appareils Apple.
Paramètres de document appropriés
Avant même de considérer des éléments sur la page, vous devez comprendre comment les graphiques de l'iPhone sont créés. Sur le nouvel écran Retina des modèles iPhone 4 / 4S, l’écran est toujours mesuré physiquement à la même taille. Cependant, l'affichage en pixels est en fait doublé par rapport à l'original - ce qui signifie que nous utilisons 640? 960 à une résolution de 326ppi.
De plus, les icônes de l'iPhone 3 / 3GS mesuraient généralement entre 57 et 57 pixels. Les écrans de l'iPhone 4 et 4S utilisent par défaut les options 114? 114 (mais seront étendues pour les anciennes résolutions). Heureusement, le processus de création d'icônes est assez indépendant de la création d'une disposition d'interface utilisateur. Mais en tant que designer, il ne fait jamais de mal de développer ces deux compétences.
Si vous utilisez beaucoup ces paramètres, je vous recommande de les enregistrer au format de document prédéfini. Dans la nouvelle fenêtre de document pour Photoshop, vous verrez un bouton intitulé? Enregistrer le préréglage? ?. Donnez-lui simplement un nom et vous pourrez le sélectionner dans la liste déroulante chaque fois que vous créez un nouveau document.
Au lieu de créer manuellement les éléments de l'interface utilisateur iPhone, un blog Teehan + Lax propose un téléchargement gratuit du kit d'interface utilisateur spécifiquement pour Photoshop. Cela inclut un rendu pour iPhone 4, les barres du haut, les boutons, les claviers et bien d'autres choses utiles. Il faut absolument saisir ceci en premier et le sauvegarder dans un répertoire local où vous aurez facilement accès à ces éléments.
Personnaliser les barres et les boutons
Les parties supérieure et inférieure de votre application contiendront probablement des barres de menus. La partie supérieure est utilisée pour étiqueter la vue actuelle, avec les boutons Précédent et Modifier. Le fond est généralement la navigation et utilise le plus souvent des onglets pour y parvenir.
Teehan + Lax utilise pour cela quelques exemples vraiment génériques. Mais il est beaucoup plus facile de les personnaliser avec vos propres couleurs, textures et autres friandises pour les yeux. Donc, à titre d'exemple, prenons la couche Groupe Barre (Gris-Bleu) et faites-le glisser dans une nouvelle fenêtre de document de la taille d'un iPhone. Puis cliquez sur le petit triangle à gauche et ouvrez un autre sous-groupe intitulé Bar Top. Tout en bas se trouve un calque d'arrière-plan avec un effet de recouvrement pour le dégradé.
Ouvrez FX sur ce calque d'arrière-plan et double-cliquez sur l'incrustation en dégradé. J'ai enlevé les couleurs par défaut d'Apple et ai défini (de gauche à droite) les numéros 3478a7 à 5eb0e7. De plus, les deux boutons devront perdre leurs gradients - pour ceux-ci, j'ai utilisé les valeurs # 052b50 à # 044a8e pour un effet sombre riche.
S'amuser avec les textures
Vous pouvez constater, grâce à ces petits changements de dégradé, que la personnalisation de votre application est une tâche assez simple. Pour un peu de détail, nous pouvons ajouter une texture ou un motif sur la zone de dégradé de la barre. Nous allons aller avec quelques rayures inclinées pour cet exemple de démonstration.
Commencez par créer un nouveau document de 7 à 7 pixels avec un arrière-plan transparent. Ensuite, réglez l’outil crayon sur la plus petite échelle possible (1 pixel sur 1 pixel) et connectez-le du coin supérieur droit au coin inférieur gauche. J'ai utilisé le noir HEX # 000000 mais cela ne devrait pas avoir d'importance, car vous pouvez toujours changer la couleur plus tard. Regardez la capture d'écran ci-dessous si vous ne suivez pas:
Maintenant frappé Édition -> Définir un motif? et donnez-lui un nom, puis cliquez sur Enregistrer. N'hésitez pas à fermer la fenêtre maintenant (sans enregistrer) puisque tout ce dont nous avions besoin était le motif. Maintenant dans le bar top groupe crée un nouveau calque au-dessus de l’arrière-plan. CMD + clic ou CTRL + clic sur le masque vectoriel qui sélectionnera l’ensemble de la barre de dégradé d’arrière-plan.
Mais assurez-vous de cliquer sur le nouveau calque que vous venez de créer pour le mettre en surbrillance en bleu. Nous allons le remplir avec ce nouveau motif, mais nous voulons seulement voir des bandes sur le dégradé de la barre supérieure (et sous les boutons). Dans le menu du haut, allez à Édition -> Remplir et sélectionnez? Pattern? dans le menu déroulant. Dans la zone ci-dessous, vous devez sélectionner le dernier motif en pointillé et appuyer sur OK.
Les lignes semblent assez rigides au début. Ainsi, dans la palette des couches, réduisez le remplissage à environ 20%. De plus, nous pourrions changer le mode de fusion en Superposition pour que les barres suivent les couleurs du dégradé. Effectuez un zoom arrière à 100% et découvrez l'effet impressionnant!
Vous pouvez créer une autre texture douce en configurant un doc 3px par 3px et en remplissant un symbole plus. J'ai ajouté un exemple ci-dessus sur la manière dont cela modifie de manière spectaculaire l'aspect de notre dégradé de barre supérieure. Vous pouvez également essayer de changer la couleur du noir pur au blanc pur #FFFFFF.
Icônes de la barre d'onglets
Les boutons de navigation situés au bas de votre application sont essentiels à l'expérience utilisateur globale. Les utilisateurs doivent déterminer où modifier les paramètres, comment effectuer des tâches et quoi faire rapidement dans votre application. Sinon, ils deviennent souvent frustrés ou ennuyés et cessent d'essayer. En guise d’autre astuce, mettons en valeur la zone de navigation dans la barre inférieure.
En utilisant le même fichier PSD d'interface graphique iPhone 4, localisez la barre d'onglets? groupe. Rappelez-vous que vous pouvez le faire en CMD / CTRL + en cliquant sur le bloc dans Photoshop. Semblable à la barre supérieure, nous pouvons éditer le dégradé d’arrière-plan FX pour certains styles correspondants. Mais alternativement, le dégradé de noir par défaut va bien avec la plupart des jeux de couleurs.
Pour certaines icônes, je recommande vivement le jeu de rétines du groupe de travail, disponible en 24px, 48px et 64px. Des styles de calque FX sont appliqués à chacune des icônes du PSD GUI - essentiellement une ombre portée et un dégradé.Ces petits détails contribuent vraiment à un design génial, alors portez une attention particulière à vos pixels. Essayez d’utiliser ce concepteur de couleurs si vous rencontrez des problèmes.
Vous devriez penser à l'impact des étiquettes de texte sur l'expérience utilisateur. Si vous estimez que les icônes des onglets suffisent à elles seules, le texte de l'étiquette risque de vous gêner. Cependant, il est important de garder vos options ouvertes et de jouer avec quelques idées différentes. Essayez de connaître l'opinion de vos amis et de vos collègues pour voir quelle méthode convient le mieux à votre application.
Une autre technique assez répandue consiste pour les concepteurs d’applications à créer un bouton central divisant la barre d’onglet en 5 emplacements. J'ai vu beaucoup d'applications vraiment créatives utiliser cette conception pour économiser de l'espace et ajouter de l'élégance à la navigation. Formspring est un exemple, j'ai ajouté l'écran ci-dessous.
Liens utiles
- Jeu d'icônes glyphiques
- Concevoir une application de banque pour iPhone dans Photoshop [Tutoriel]
- Concevoir des applications iPhone dans Photoshop [PDF]
- Collection utile d'outils et de ressources de développement d'applications iPhone / iPad
- Conseils et ressources de convivialité iOS pour les applications iPhone et iPad
- Comment créer votre première application iPhone
Conclusion
Ces stratégies d'utilisation des applications iOS et d'Adobe Photoshop vous seront utiles si vous développez vos sens de la conception. Les applications mobiles sont un jeu de balle complètement différent des sites Web et des logos. Gardez cela à l'esprit tout au long du processus, car vous apprendrez constamment de nouvelles techniques.
En plus des liens ajoutés ci-dessus, vous devriez vous sentir beaucoup plus à l'aise avec la conception de l'interface de l'application. Les maquettes de mise en page sont toujours difficiles et nécessitent du temps pour être construites et étudiées. Mais si vous avez suffisamment de dévouement, le marché de la téléphonie mobile est peut-être la zone la plus prospère. Si vous avez des questions ou des commentaires supplémentaires, veuillez nous en informer dans la zone de discussion ci-dessous.