Share
Il y a beaucoup de «processus» dans la conception d'appareils mobiles, mais parfois, vous voulez juste vous lancer et vous salir les mains! Cet article est conçu pour vous donner les outils dont vous aurez besoin, ainsi que la conception de base et les exigences techniques pour vous permettre de démarrer rapidement..
Si vous n'avez pas encore lu les directives d'interface Apple pour iPhone et iPad, vous devriez le faire. C’est beaucoup d’informations, mais le temps passé à comprendre comment Apple conçoit la conception d’applications mérite vraiment la peine. Ces guides définissent également des spécifications détaillées pour la taille de l’écran, la taille des icônes et la résolution. Ensuite, je vais aborder quelques questions fréquemment posées et résumer ces spécifications dans un format facile à digérer.!
L'écran de la rétine de l'iPhone est une chose spectaculaire à voir. Lorsque vous consultez côte à côte l'ancien et le nouvel écran, il est évident que certains changements dans cet affichage affectent la conception de votre application. Voir cette vidéo de comparaison d'écran côte à côte.
En comparant les deux appareils, vous pouvez constater que les dimensions de l'écran pour iPhone 4 sont identiques à celles du modèle précédent. Cependant, la taille de l'écran de l'iPhone 4 et la densité de pixels de l'écran sont DOUBLES, ce qui lui confère une taille d'écran de 640 x 960px (par rapport à la taille précédente de 320 x 480px) et un impressionnant 326 pixels par pouce (comparé à 163 ppp). Ce nouvel écran réduit de 4 pixels là où il y en avait un auparavant. C’est pourquoi les images sont si nettes et si délicieuses.!
Lors de la lecture à propos de la résolution de l'écran, il est facile de se perdre rapidement. Le fait est que le type de fichier final exporté sur l'iPhone est généralement .png et Xcode ne prend pas en compte la valeur ppi enregistrée lors du rendu des images. Si vous suivez les dimensions indiquées ci-dessous, vous serez en bonne forme.!
| iPhone 3.0 Résolution d'écran: 72 ppi Taille de l'écran: 320 x 480 px Taille de l'icône: 57 x 57 px Format de fichier: PNG-24 | iPhone 4.0 Résolution d'écran: 72 ppi Taille de la toile: 640 x 960 px Taille de l'icône: 114 x 114 px Format de fichier: PNG-24 | iPad Résolution d'écran: 72 ppi Taille de la toile: 768 x 1024 px Taille de l'icône: 72 x 72 px Format de fichier: PNG-24 |
Icône: 512 x 512 px (.tif, .jpg ou .png, 72dpi, RGB)
Captures d'écran iPhone: 320 x 480 px ou 640 x 860 px (.tif, .jpg ou .png, 72dpi, RGB)
Captures d'écran iPad: 1024 x 768 px (.tif, .jpg ou .png, 72dpi, RGB)
Pendant que nous discutons de la taille des écrans, il est important de parler de l'avenir des appareils numériques en général. Je ne suis pas une diseuse de bonne aventure, mais rien que l'année dernière, ce ne sont pas des appareils secrets à écran tactile qui se multiplient comme des lapins et qui produisent une progéniture avec des tailles d'écran variables. Toujours! En tant que concepteurs, cela signifie que nous devons être prêts à transformer les conceptions en plusieurs périphériques et systèmes d'exploitation..
Un cycle de vie d'application peut exécuter l'un des nombreux cours. Certaines applications vivent exclusivement sur une plate-forme, d'autres sur d'autres appareils mobiles ou même sur le Web. La création de graphiques évolutifs vous évite d'avoir à créer de nouveaux graphiques pour chaque plate-forme spécifique. Utiliser des calques de forme ou des objets intelligents vectoriels est le meilleur moyen de gérer la prolifération des tailles d'écran et des systèmes d'exploitation..
Concevoir des icônes pour iPhone a été ma première introduction à la décision «Commencez petit à petit et redimensionnez» ou «Commencez grand et démultipliez.» Pour moi, il est devenu évident après quelques exécutions de concevoir pour la taille d’écran de 320 x 480px et ensuite de dimensionner jusqu'à 640 x 960 pixels est la meilleure option. Concevoir pour la plus petite taille d'écran élimine la déception de perdre des détails lorsqu'un dessin doit être redimensionné plus tard.
Supposons que vous ayez conçu une application pour un iPhone 3.0 et que vous souhaitiez préparer cette application pour l'écran Retina de l'iPhone 4. Que faire? Vous avez juste la taille de 320 x 480 à 640 x 960? Oui. Le problème est que, si vous n'avez pas créé tous vos graphiques en utilisant des calques de forme ou des objets intelligents vectoriels, les images auront un aspect pixellisé et granuleux..
Pour les iPhone et iPad, la taille minimale recommandée pour le toucher de la cible est de 44 x 44 pixels. Laissez à Apple le soin de quantifier la taille moyenne du bout des doigts chez l’être humain. :) Si vous voulez réduire la taille, veillez à bien espacer les zones de frappe pour éviter les erreurs de frappe..
"Tester" une conception peut sembler étrange, mais concevoir un appareil mobile sur un ordinateur portable ou un moniteur de bureau peut être délicat. Même si vous suivez les instructions standard telles que la règle de cible cible 44 x 44px, les proportions et les tailles peuvent être très différentes les unes des autres lorsqu'elles sont affichées sur l'appareil par rapport à l'écran de votre ordinateur.
Le moyen le plus simple de tester votre conception consiste à «Enregistrer pour le Web» chaque conception d'écran au format .png et à la synchroniser avec votre téléphone à l'aide d'iPhoto. Une fois les images synchronisées, vous pouvez parcourir et simuler l’application réelle. C'est également un excellent moyen de partager des maquettes avec les clients pour leur donner un véritable aperçu de l'application..
Maintenant que vous avez quelques bases à votre actif, il est temps de commencer à concevoir! Heureusement, de nombreuses ressources sont disponibles pour vous aider à vous familiariser avec les divers éléments d'interface iPhone et iPad. Même si votre objectif est de créer des interfaces entièrement personnalisées, ces modèles sont utiles pour obtenir une grille de base ou des dimensions d'éléments à l'écran bien proportionnées..
iPhone GUI PSD de Teehan + Lax
iPhone GUI PSD Retina de Teehan + Lax
Pochoir iPhone pour OmniGraffle de Patrick Crowley
Éléments de vecteur d'interface utilisateur iPhone de Mercury Intermedia
Pochoir iPad pour OmniGraffle de Information Architects
iPad GUI PSD de Teehan + Lax
iPad graphique vectoriel de la bibliothèque d'icônes
Toutes les ressources graphiques qui seront utilisées pour créer une application sont exportées au format Portable Network Graphics (.png). Techniquement, l'iPhone peut également afficher d'autres formats de fichiers, mais les fichiers PNG sont automatiquement optimisés par le SDK iOS et devraient par conséquent être le format préféré..
Cela s'applique à tous les éléments (boutons de navigation, barres, etc.) et à toute autre image présentée dans l'application. Par exemple, supposons que votre application soit un portefeuille pour un photographe. Les photos présentées seront également exportées au format .png.
Le paramètre d'exportation du format .png dans Photoshop (Fichier> Enregistrer pour le Web et les périphériques) se présente comme suit:
Avant de confier vos fichiers à un développeur, il est important de comprendre ses capacités en matière de découpage et de découpe de votre fichier. Si votre développeur est expérimenté dans le découpage et l'exportation, le déchargement de cette tâche peut représenter un gain de temps considérable. Personnellement, je préfère couper tous mes fichiers pour que toutes les images soient découpées correctement.
Lorsque vous enregistrez vos images finales, essayez d’utiliser des conventions de nommage de fichiers intuitives qui faciliteront la recherche et la référence des fichiers d’image corrects pour votre développeur. Voici quelques exemples de préfixes et de suffixes que j'utilise:
Un autre outil que j'utilise pour communiquer avec les développeurs est un fichier .pdf qui comprend tous les écrans, ainsi que des notes relatives à la conception. Je définis les polices de caractères, les tailles, l’espacement des lignes et tous les autres styles, de sorte qu’il existe une référence simple que le développeur peut utiliser sans avoir à ouvrir Photoshop. Une autre ressource que je fournis, en particulier lorsque je travaille avec des développeurs externes, est un screencast (ScreenFlow et iShowU sont mes favoris) de l’application, en les guidant à travers tous les aspects de la conception. Ceci est particulièrement utile si l'application contient des animations et / ou des transitions qui sont mieux illustrées dans une vidéo..
Les spécifications techniques ne sont pas sexy mais elles sont importantes. Conservez ces détails en mémoire et vous éviterez beaucoup de maux de tête sur la route!
Accentsconagua