Conseils pour concevoir des mises en page d'interface utilisateur élégantes pour iPhone dans Photoshop
La conception graphique pour le Web est une tendance populaire depuis des lustres. Et avec l'invention de l'iPhone d'Apple en 2007, l'App Store a connu une croissance considérable. Maintenant, nous avons des concepteurs et des développeurs d'applications iOS qui se réunissent pour transformer des conceptions vraiment fantastiques en réalité.
Mais si vous n'aimez pas apprendre Xcode et programmer Objective-C, Photoshop pourrait vous intéresser davantage. Ci-dessous, je vais vous proposer quelques-uns des conseils que j'ai choisis pour concevoir des maquettes d'applications iOS géniales. Et comme de nouvelles tendances émergent toujours, la communauté du design redéfinit constamment la façon de créer des applications. Considérez cela comme un guide de ressources pour débutants sur la conception d'appareils Apple.
Paramètres de document appropriés
Avant même de considérer les éléments de la page, vous devez comprendre comment les graphiques iPhone sont créés. Dans le nouvel écran Retina sur les modèles iPhone 4 / 4S, l'écran est toujours physiquement mesuré dans 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 57 × 57 pixels. Les écrans iPhone 4 et 4S utilisent 114 × 114 par défaut (mais évolueront pour les anciennes résolutions). Heureusement, le processus de conception d'icônes est assez indépendant de la création d'une mise en page d'interface utilisateur. Mais en tant que designer, cela ne fait jamais de mal de développer les deux compétences.
Si vous utilisez beaucoup ces paramètres, je vous recommande de les enregistrer en tant que taille de document prédéfinie. 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 pouvez 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 de l'iPhone, un blog Teehan + Lax propose un kit de téléchargement gratuit spécialement pour Photoshop. Cela inclut un rendu iPhone 4, des barres supérieures, des boutons, des claviers et des tonnes d'autres choses utiles. Saisissez-le d'abord et enregistrez-le dans un répertoire local où vous avez facilement accès à ces éléments.
Personnalisez les barres et les boutons
Les zones supérieure et inférieure de votre application contiendront probablement des barres de menus. Le haut est utilisé pour étiqueter la vue actuelle, ainsi que les boutons de retour et d'édition. Le bas est généralement la navigation et utilise le plus souvent des onglets pour ce faire.
Teehan + Lax utilise pour cela des exemples vraiment génériques. Mais ils sont beaucoup plus faciles à personnaliser avec vos propres couleurs, textures et tout ce que vous avez. Par exemple, prenons la barre de calque de groupe (gris-bleu) et faites-la glisser dans une nouvelle fenêtre de document de la taille d'un iPhone. Cliquez ensuite 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 superposition pour le dégradé.
Ouvrez FX sur ce calque d'arrière-plan et double-cliquez sur la superposition de dégradé. J'ai supprimé les couleurs par défaut d'Apple et défini (de gauche à droite) # 3478a7 sur # 5eb0e7. Les deux boutons devront également perdre leurs dégradés - pour ceux-ci, j'ai utilisé les valeurs # 052b50 à # 044a8e pour un effet sombre riche.
Amusez-vous avec les textures
Vous pouvez constater par ces petits changements de dégradé que la personnalisation de votre application est une tâche assez simple. Pour juste un peu de détail, nous pouvons ajouter une texture ou un motif sur la zone de dégradé de la barre. Nous irons avec quelques rayures inclinées pour cet exemple de démonstration.
Commencez par créer un nouveau document 7 × 7 pixels avec un fond transparent. Ensuite, réglez votre outil crayon à la plus petite échelle (1px par 1px) et connectez-vous du coin supérieur droit au coin inférieur gauche. J'ai utilisé du noir HEX # 000000 mais cela ne devrait pas avoir d'importance car vous pouvez toujours changer la couleur plus tard. Découvrez la capture d'écran ci-dessous si vous ne suivez pas:
Maintenant, appuyez sur Édition -> Définir le motif… et donnez-lui un nom, puis appuyez sur Enregistrer. N'hésitez pas à fermer la fenêtre maintenant (sans enregistrer) car tout ce dont nous avions besoin était le motif. Maintenant, dans le groupe supérieur de la barre, créez un nouveau calque au-dessus de l'arrière-plan. CMD + clic ou CTRL + clic sur le masque vectoriel qui sélectionnera toute la barre de dégradé d'arrière-plan.
Mais assurez-vous de cliquer à nouveau sur le nouveau calque que vous venez de créer pour qu'il soit surligné en bleu. Nous allons le remplir avec ce nouveau motif, mais nous voulons seulement voir des rayures sur le dégradé de la barre supérieure (et sous les boutons). Dans le menu supérieur, allez dans Édition -> Remplir et sélectionnez «Motif» dans le menu déroulant. Dans la case ci-dessous, vous devez sélectionner le dernier motif en pointillés et cliquer sur OK.
Les lignes semblent assez rigides au premier abord. Ainsi, dans les couches, la palette laisse tomber le remplissage jusqu'à une valeur d'environ 20%. Nous pourrions également changer le mode de fusion en superposition afin que les barres coulent avec 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 document 3px par 3px et en remplissant un symbole plus. J'ai ajouté un exemple ci-dessus de la façon dont cela change radicalement l'apparence de notre gradient 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 en bas de votre application sont cruciaux pour l'expérience utilisateur globale. Les utilisateurs doivent déterminer où modifier les paramètres, comment effectuer des tâches et quoi faire dans votre application rapidement. Sinon, ils deviennent souvent frustrés ou ennuyés et cessent d'essayer. Donc, comme dernière astuce, embellissons la zone de navigation dans la barre inférieure.
En utilisant le même fichier PSD GUI iPhone 4, localisez le groupe «barre d'onglets». N'oubliez pas que vous pouvez le faire en CMD / CTRL + en cliquant sur le bloc dans Photoshop. Semblable à la barre supérieure, nous pouvons modifier le gradient FX d'arrière-plan pour certains styles correspondants. Mais alternativement, le dégradé noir par défaut va bien avec la plupart des jeux de couleurs.
Pour certaines icônes, je recommande fortement l'ensemble de rétine The Working Group, disponible en 24px, 48px et 64px. Chacune des icônes du GUI PSD a des styles de calque FX appliqués - essentiellement une ombre légère et un dégradé de superposition. Ces petits détails ajoutent vraiment à un design formidable, alors faites très attention à vos pixels. Essayez d'utiliser ce concepteur de couleurs si vous rencontrez des problèmes.
Vous devez penser à la façon dont les étiquettes de texte affecteront l'expérience utilisateur. Si vous pensez que les icônes de tabulation 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 d'obtenir les opinions de vos amis et collègues pour voir quelle méthode convient le mieux à votre application.
Une autre technique assez populaire consiste à créer un bouton central divisant la barre d'onglets en 5 emplacements pour les concepteurs d'applications. J'ai vu beaucoup d'applications vraiment créatives utilisant cette conception pour économiser de l'espace et ajouter de l'élégance à la navigation. Formspring en est un exemple, j'ai ajouté l'écran ci-dessous.
Liens utiles
- Jeu d'icônes de glyphes
- Concevoir une application iPhone Bank dans Photoshop [Tutoriel]
- Concevoir des applications iPhone dans Photoshop [PDF]
- Collection utile d'outils et de ressources pour développeurs d'applications iPhone / iPad
- Astuces et ressources de convivialité iOS pour les applications iPhone et iPad
- Comment créer votre première application iPhone
Conclusion
Ces stratégies de travail avec les applications iOS et Adobe Photoshop vous seront utiles au fur et à mesure que vous développerez vos sens du design. Les applications mobiles sont un tout autre jeu de balle par rapport aux sites Web et aux logos. Gardez cela à l'esprit tout au long du processus, car vous apprendrez constamment de nouvelles techniques.
Avec les liens ajoutés ci-dessus, vous devriez vous sentir beaucoup plus à l'aise pour aller de l'avant 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é mobile est probablement le domaine le plus prospère. Si vous avez d'autres questions ou commentaires, veuillez nous en faire part dans la zone de discussion ci-dessous.
