Comment concevoir des applications pour toutes les tailles d'écran d'Apple

Pomme

L'écosystème des applications d'Apple s'est considérablement développé ces derniers temps

Lorsque l'App Store est arrivé pour la première fois, la conception pour les appareils mobiles Apple était relativement simple. Bien sûr, les développeurs ont dû se familiariser avec les écrans tactiles et l'interaction gestuelle, et repenser le langage visuel pour les applications et les jeux pour smartphones, loin des conventions de bureau. Mais l'iPhone était un appareil, avec une taille d'écran et un modèle d'interaction.

Le paysage d'aujourd'hui est très différent. Les applications universelles peuvent tout prendre en charge, de l'Apple Watch à l'iPad Pro. Les tailles d'écran varient énormément, tout comme la mise à l'échelle - un écran iPad Air de 9,7 pouces possède le même nombre de pixels qu'un iPad Mini de 7,9 pouces. Et les modèles d'interaction entre les appareils iOS, watchOS et tvOS d'Apple varient également énormément.



Avec la gamme actuelle d'appareils à écran tactile d'Apple, l'entrée reste similaire à celle de ce premier iPhone, mais il existe de nouveaux gestes et des fonctionnalités supplémentaires dans iOS, principalement pour répondre aux plus grands écrans iPad. L'Apple Watch, cependant, accepte l'interaction tactile en plus de l'utilisation de la couronne numérique et de la saisie vocale. Et vous interagissez avec la nouvelle Apple TV à l'aide d'une télécommande plutôt qu'en manipulant directement des objets sur un écran.

Les développeurs d'applications ont du pain sur la planche.

Jouer le jeu

Les développeurs qui créent des jeux pour fonctionner sur des appareils iOS et tvOS semblent en grande partie indifférents. Mais les jeux se débrouillent souvent bien avec des écrans de tailles très différentes. `` Je fais toutes mes mises en page de manière à ce qu'elles soient mises à l'échelle par rapport aux dimensions d'un écran '', explique le concepteur de jeux. Paul Pridham , qui admet que «cela n'a pas beaucoup d'importance, car la plupart de mes jeux sont volumineux et lo-fi par nature». Nitrome MD Matthew Annal utilise une autre astuce courante pour les jeux mobiles multi-appareils: ses titres ont une «zone de sécurité». Les éléments importants sont conservés dans ce cadre, et les écrans allongés montrent simplement plus de l'environnement.

Ulysses est actuellement réservé à l

Ulysses est actuellement réservé à l'iPad, et l'application doit changer son apparence pour iPhone

Avec des applications proposant des menus, des boutons, des panneaux et des espaces de travail plus conventionnels, les choses deviennent plus délicates. Éditeur de texte Ulysse ne prend actuellement en charge que l'iPad, mais une version iPhone est imminente. Le co-créateur Max Seelemann de The Soulmen explique que l'application utilise donc deux modes d'écran: une vue fractionnée où les sections sont côte à côte et une disposition `` empilée '' plus étroite.

Les changements de mode sont automatiquement déclenchés par iOS, ce qui, selon Seelemann, est utile car le système d'exploitation d'Apple devient de plus en plus complexe - un iPhone 6 Plus en paysage singe un iPad, et l'iPad Split View s'apparente à un grand iPhone; Même dans ce cas, il faut réfléchir longuement à la façon dont les interfaces, même relativement simples, évoluent des plus petits iPhones à l'iPad Pro.

L'approche de Seelemann rappelle la conception Web moderne: se concentrer sur le contenu et montrer davantage à mesure que l'espace disponible augmente. Logiciel Eternal Storms Le fondateur Matthias Gansrigler estime que cela est encore plus important lorsque l'on s'attaque à l'Apple Watch et aux téléviseurs: «Commencez à concevoir votre interface avec le plus petit appareil que vous ciblez». À mesure que la taille des écrans augmente, vous pouvez introduire plus d'éléments, bien que Gansrigler avertisse que ce n'est pas toujours nécessaire: `` Parfois, garder les choses au minimum est bénéfique, même si l'espace permet plus. Tout dépend de l'expérience utilisateur: écraser quelqu'un peut être aussi mauvais que le décevoir.

Ce qui semble bien

Conditions météorologiques pour CARROT

Les applications de différentes tailles de CARROT Weather ont été créées de manière organique

Lors de la création de CARROT Weather pour iOS, watchOS et tvOS, développeur Brian Mueller admet qu'il est souvent allé avec ce qui semblait juste: `` J'ai joué avec des mises en page, donc je me sentais bien sur mon appareil de test principal, un iPhone 6 Plus, mais en sachant ce qui fonctionnerait ailleurs. J'ai dû couper certains éléments pour des écrans plus petits et ajouter des éléments sur iPad pour que l'écran ne soit pas vide. Mais c'était fondamentalement ça - faire ce qui venait naturellement, tout en réfléchissant à la façon dont les choses pourraient fonctionner lorsqu'elles étaient mises à l'échelle ou en rotation.

Développeur James Thomson's PCalc est également disponible sur toutes les plates-formes Apple, et son processus consiste à «déterminer ce qui a du sens sur un appareil donné». Il explique: `` Je ne peux pas avoir plus de 15 boutons utilisables sur un écran de montre, et même ceux-ci peuvent être à l'étroit. Mais sur un téléviseur, vous serez de l'autre côté de la pièce, alors voulez que tout soit aussi grand que possible.

Comme avec Ulysses, la distinction sur iPad et iPhone est plus confuse - PCalc sur le premier utilise l'espace via les barres latérales et les popovers plutôt que de basculer entre les vues plein écran, mais dans les modes multitâches de l'iPad, l'application utilise la disposition de l'iPhone lorsque l'espace disponible se rétrécit.

Parfois, d'autres considérations pratiques ont un impact sur la mise en page, comme Traces Le créateur Quentin Zervaas explique: «Construire des séries pour travailler avec plus de vingt langues nous a obligés à réfléchir à la façon dont le texte s'adapterait et serait mis en page, ce qui a naturellement facilité l'adaptation à différentes tailles d'appareils. Par exemple, une chaîne de texte allemand prend plus de place que l'anglais - «ce qui revient à insérer quelque chose de conçu pour un écran de 4,7 pouces dans un écran de 3,5 pouces» - tandis que les caractères chinois nécessitent moins d'espace. La mise en page automatique d'Apple était une aubaine, facilitant la mise en page sur plusieurs appareils et une prise en charge robuste des langues.

Une question d'échelle

L

La vue partagée de l'iPad signifie que les développeurs d'applications doivent penser latéralement

Les tailles d'écran ne sont pas le seul problème lié à plusieurs tailles d'affichage - la densité de pixels doit également être prise en compte. Même les iPad de dimensions différentes ont les mêmes résolutions; et certains appareils Apple nécessitent des graphiques @ 2x, tandis que d'autres préfèrent @ 3x. «Cela m'a dérangé lors de la création de CARROT Fit», admet Mueller. «J'ai créé des centaines de poses d'exercices sous forme d'images raster à @ 2x, car c'est tout ce dont j'avais besoin à l'origine. Lorsque les appareils @ 3x sont apparus, tous les actifs ont dû être refaits. Mueller recommande désormais les vecteurs: «Avec CARROT Weather, tout est enregistré au format PDF et Xcode gère la génération d'actifs. J'utilise également PaintCode de PixelCut pour générer des actifs dans le code, pour créer dynamiquement différentes tailles.

Les rasters peuvent toujours fonctionner, mais vous devez planifier à l'avance. Producteur Ron Packard, Jr. dit que lui aussi a eu «des difficultés à avoir besoin de mettre à niveau la taille des images» et «a dû faire face à la tâche ardue de refaire tous nos rendus». Donc, pour le jeu Castle Breakout, «tous les rendus sont énormes et peuvent être rétrogradés sur des écrans plus petits si nécessaire». Pour Annal, dont les jeux utilisent principalement le pixel art, la mise à l'échelle peut également être un problème: `` Nous avons donc tendance à nous en tenir à une taille de pixel bien inférieure à la densité d'écran qui correspond à la densité des appareils les plus bas pris en charge. De cette façon, les pixels semblent nets sur les appareils plus anciens, et les plus récents ont une densité de pixels si élevée que tout semble bien de toute façon.

En termes d'interactions utilisateur spécifiques, nous nous demandons si l'échelle peut être un problème, notamment sur l'iPad Mini. Seelemann, dont Ulysse est principalement piloté par le clavier, pense que `` Apple a déterminé que 44 pt est la taille minimale que chaque élément devrait avoir '' et tant que vous suivez cela, vous devriez être d'accord. «Ainsi, bien que certains appareils aient des valeurs PPI différentes, les utilisateurs s'y seront adaptés. Nous ne voyons pas la nécessité de s'écarter des recommandations d'Apple.

Un sens de la concentration

Apple Watch a présenté un autre ensemble de défis aux développeurs d

Apple Watch a présenté un autre ensemble de défis aux développeurs d'applications

Une autre chose dont il faut être conscient, dit Logiciel Open Planet Co-fondateur Gordon Murrison, vous trouverez parfois qu'une application est parfaite pour un appareil spécifique et peut donc `` prendre la décision de ne pas soutenir les autres ''. Ce fut le cas avec l'outil stop-motion Smoovie, dont l'interface utilisateur riche était si idéale pour iPad qu'une version iPhone ne s'est jamais matérialisée. En d'autres termes, vos applications ne ont être partout.

En fait, certains développeurs affirment que l'écosystème en pleine expansion d'Apple pourrait bientôt rendre ces décisions banales. «Je conçois pour un appareil` `principal '', puis j'adapte mon travail à d'autres, mais les développeurs indépendants n'ont pas accès à la gamme complète d'appareils à tester '', explique le développeur. Álvaro Maroto Conde . Les développeurs se plaignant ne peuvent pas tous se permettre de continuer à investir dans du nouveau matériel tous les six mois, Conde dit qu'ils doivent tenter leur chance avec un ou deux et l '«émulateur de buggy». Il ajoute que le secret d'Apple combiné à la `` course contre les dates de lancement '' aboutit également à des App Stores remplis de logiciels qui `` ne sont pas correctement testés '', et affirme que cela pourrait avoir incité la décision surprenante d'Apple à publier des kits de développement Apple TV.

Dans la mesure du possible, cependant, Gansrigler dit que les développeurs devraient essayer d'obtenir au moins un exemple de chaque élément majeur du kit pour lequel ils ont l'intention d'expédier quelque chose. Principalement, c'est parce que les simulateurs sont rarement aussi nuancés que la réalité: «Le simulateur Xcode tvOS ne rend pas justice à Siri Remote, par exemple. Vous utilisez une souris ou un trackpad, mais la zone tactile de la télécommande est utilisée avec un pouce. Vous devez l'essayer et avoir une idée de son fonctionnement. De plus, il dit que de nouvelles méthodes d'interaction peuvent nécessiter une réflexion lors du portage d'applications à partir d'autres systèmes: `` Appuyez sur un bord du pavé tactile Siri Remote et la mise au point avance d'un pas dans cette direction. Cette interaction n'est pas disponible directement sur iOS et doit donc être prise en compte lors de l'introduction d'une application sur Apple TV.

Ensemble, mais séparés

iPad et iPhone, autrefois disponibles en deux tailles, sont désormais disponibles en six variétés

iPad et iPhone, autrefois disponibles en deux tailles, sont désormais disponibles en six variétés

Compte tenu des écarts entre les appareils, devraient-ils donc être considérés comme des plates-formes distinctes? Et si oui, comment créer de la cohérence lorsqu'une seule application universelle (en réalité des binaires séparés, mais cela est invisible pour l'utilisateur) est mise à disposition pour tous? «Beaucoup se résume à l'image de marque et à rester fidèle à l'esprit de votre application», suggère Annal. 'Si vous faites écho à la même identité visuelle tout en conservant ce qui rend votre produit spécial, peu importe que les entrées ou la taille des écrans changent.'

Ceci, selon Zervaas, doit être jumelé avec une conscience de l'usage. Avec Streaks, une caractéristique clé est le gain que les gens ressentent en appuyant sur une tâche pour la marquer comme terminée. «Mais ce modèle d'interaction n'est pas possible sur Apple Watch ou Apple TV», dit-il. `` Sur Apple Watch, nous utilisons donc Force Touch, qui est un modèle d'interaction différent mais qui donne toujours ce sentiment viscéral d'avoir accompli une tâche. Sur Streaks Workout pour Apple TV, nous utilisons un simple clic sur la télécommande pour marquer l'exercice comme terminé. Cela convient au style de l'application, mais vous obtenez toujours le gain d'une animation remplissant la barre de progression et affichant la grande coche.

Toute idée d'essayer d'aller trop loin, de créer efficacement la même application sur toutes les plateformes, est catégoriquement rejetée. «Notre objectif en tant que concepteurs et développeurs n'est pas de réduire notre charge de travail, mais de créer d'excellents produits», déclare Murrison. 'Vous vous souvenez des cadres d'interface utilisateur courants sur Mac et Windows? Horrible. Vous vous retrouvez avec quelque chose qui n'est nulle part chez vous. C'est la même chose lors de la création d'applications pour différentes familles d'appareils dans l'écosystème Apple.

OfficeTime sur l

OfficeTime sur l'Apple Watch

OfficeTime Le fondateur Stephen Dodd est d'accord: «Il ne suffit pas de simplement porter les conceptions sur les plates-formes. Vous pourriez être tenté de concevoir une version `` allégée '' d'une application iPhone pour Apple Watch, mais ce dernier appareil est utilisé lors de brèves rencontres. Vous devriez plutôt demander ce qui est suffisamment précieux pour montrer à un utilisateur lors de telles mini interactions, plutôt que de simplement retirer son iPhone.

Ajustement parfait

Le développement réussi de l'écosystème Apple moderne est donc principalement une question de contexte; comme le note Thomson, vous devez «lorsque c'est possible, concevoir les points forts de chaque plate-forme». Avec PCalc, il raisonne que les gens n'effectueront pas de longs calculs en plusieurs étapes sur une montre, mais pourraient faire l'épicerie ou diviser une facture. «Ainsi, bien que mon application sur tvOS, iOS et watchOS soit similaire du point de vue du codage, les interfaces sont conçues pour s'adapter - même sur iPhone et iPad, vous faites les choses différemment.

Dodd a trouvé la même chose avec OfficeTime - les gens utilisent le chronomètre sur différentes plates-formes, mais pas pour les mêmes tâches: `` Ils peuvent démarrer une minuterie sur une montre, l'arrêter sur un iPhone, modifier les détails sur un iPad et créer des factures. sur un Mac: «Chaque application a progressivement plus de puissance mais un coût d'interaction légèrement plus élevé. Chacun joue sur les atouts de l'appareil. '

Mais tout ce choix pourrait également servir d'avertissement sur un avenir toujours plus complexe. Nous avons commencé par noter que les choses étaient autrefois simples: un seul appareil; une taille d'écran; un modèle d'interaction. Maintenant, même si l'écosystème d'Apple n'aura jamais la diversité d'Android, il continuera de croître. «Vous verrez de nouveaux défis, tels que le Split View de l'iPad», déclare Seelemann. «Dans une version, cela a introduit cinq toutes nouvelles tailles d'interface utilisateur avec des proportions sans précédent. Il est devenu clair que les applications doivent prendre en charge toute taille d'écran arbitraire. Optimiser pour tous n'est plus faisable et n'a plus de sens.

Selon le développeur Enrico Susatyo , quiconque crée des applications pour le kit Apple ne devrait plus être surpris par de tels changements. «Apple sait bien guider les développeurs vers l'avenir de ses plates-formes sans en révéler grand-chose», dit-il. «En 2011, nous avons eu la mise en page automatique, un an avant l'iPhone 5. Les classes de taille sont apparues un an avant l'iPhone 6, ce qui a permis aux développeurs de prendre en charge plus facilement des iPhones et des iPad plus grands. Les ressources d'image ont été introduites avant les appareils @ 3x Retina. '

Il conseille donc de faire attention à ce que fait Apple pour ne pas être surpris: «Apple veut que nous adoptions les nouvelles technologies. Ils ne sont peut-être pas immédiatement évidents, mais tôt ou tard, ils seront tous adoptés pour de nouvelles fonctionnalités.

Articles Liés:

  • Comment Apple Watch changera les applications pour toujours
  • Comment créer une application : commencez avec ces excellents tutoriels
  • Maquette d'applications smartwatch avec le Générateur CSS Apple Watch