iPhone X : Comment s’assurer que votre application y sera adaptée ?

iPhone X : Comment s’assurer que votre application y sera adaptée ?

20 octobre 2017
[seopress_breadcrumbs]
L’iPhone X propose l’écran Super Retina de 5,8 pouces qui permet une immersion plus complète encore. La limite entre appareil et écran s’effacent un peu plus pour une expérience utilisateur toujours plus immersive. Mais cela suppose quelques vérifications, et peut-être des changements, à effectuer pour vous assurer que votre application sera compatible avec ce nouvel appareil. Voici donc quelques points à vérifier pour faire de l’iPhone X un avantage et non un frein à votre application !

Testez votre application sur Simulator

Téléchargez la dernière version de Xcode 9 et testez votre application sur Simulator. Repérez et réparez les problèmes d’interface utilisateur de votre application avant de la tester sur un appareil pour vous assurer qu’elle rendra bien sur iPhone X.Activez la résolution native en plein écran. Votre application fonctionnera en plein écran sur l’iPhone X si le SDK de votre projet est défini sur iOS 11 et si vous disposez d’une image de lancement Launch Storyboard ou iPhone X.Vérifiez chaque élément de votre application. Assurez-vous que votre interface utilisateur s’affiche correctement, qu’aucun élément n’est mal positionné (décalage, chevauchement, etc.), mal découpé, ou à la mauvaise échelle. Si vous rencontrez un problème, repositionnez correctement chaque élément en respectant les zones de sécurité de l’interface utilisateur.

Comment respecter les zones de sécurité de l’iPhone X ?

La mise en page de votre application doit remplir l’écran Super Retina de 5,8 pouces et chaque élément doit apparaître correctement et être cliquable facilement. Utilisez ces zones de sécurité de l’Iphone X pour vous assurer que votre application fonctionnera correctement dans ses nouvelles dimensions.

Les applications avec une mise en page personnalité peuvent facilement s’adapter à l’iPhone X, elles aussi. En particulier si votre application utilise la mise en page automatique et respecte les consignes suivantes.

iPhone X et zone de sécurité - Application mobile - Agence de communication digitale Lyon Http5000

La barre d’état

Ajoutez un espace aux bonnes dimensions sous la barre d’état, selon la zone de sécurité. Évitez de supposer une valeur pour la hauteur de la barre d’état, au risque de masquer ou de mal positionner le contenu en-dessous.

iPhone X et barre d'état - Application mobile - Agence de communication digitale Lyon Http5000

Les coins d’affichage arrondis et le capteur

Gardez le contenu et les commandes loin des coins et du boîtier du capteur pour remplir la totalité de l’écran sans couper la partie supérieure de votre application ou la faire apparaître derrière la barre d’état.

iPhone X et coins arrondis - Application mobile - Agence de communication digitale Lyon Http5000

 

L’indicateur de page d’accueil

Avec l’iPhone X, plus de bouton de retour à l’accueil ; il suffira de glisser sur le bas de l’écran tactile. Assurez-vous donc que votre application n’interfère pas avec cet indicateur de retour à l’accueil et que vos éléments n’apparaissent pas sous l’indicateur. Ainsi, votre contenu et vos commandes resteront lisibles, claires et compatibles en permanence.

iPhone X et accueil - Application mobile - Agence de communication digitale Lyon Http5000

 

Screen Edge Gestures, ou Mouvements sur les bords d’écran

L’affichage sur l’iPhone X permet, par un simple mouvement sur les bords de l’écran, d’aller sur l’accueil, dans le centre de notifications, le centre de contrôle ou encore le sélecteur d’applications. Évitez d’interférer avec ces gestes. Déplacez les commandes de votre application dans la zone de sécurité et ajustez votre interface utilisateur.

Si c’est vraiment essentiel, vous pouvez envisager l’utilisation de la protection des contours. Cela consiste à permettre le contrôle de l’application avec un premier balayage, un premier geste, et à utiliser les commandes de l’appareil dans un second mouvement, un second glissement.

iPhone X et glissement - Application mobile - Agence de communication digitale Lyon Http5000

Une application responsive qui s’adapte à toutes les orientations et formats

Le format et la hauteur de l’écran de l’iPhone X diffèrent des autres appareils iPhones. En mode portrait, la largeur de l’écran de l’iPhone X correspond à celle des écrans de 4,7 pouces des modèles précédents, mais la hauteur est plus grande de 145 point par rapport à un écran 4,7 pouces.

Le nouveau format

De nombreuses applications placent le contenu en fonction d’une largeur, d’une hauteur ou d’un ratio particulier. Assurez-vous que votre application soit adapté et votre contenu correctement positionné.

iPhone X et formats - Application mobile - Agence de communication digitale Lyon Http5000

Le mode paysage

Bien que le mode portait puisse révéler quelques problèmes, la majorité des changements à faire se trouveront probablement dans le mode paysage. Assurez-vous de tester toute votre interface utilisateur avec l’appareil en rotation, autant sur la gauche que sur la droite.

iPhone X et format paysage - Application mobile - Agence de communication digitale Lyon Http5000

Les dimensions des vidéos

Une vidéo sur l’iPhone X devrait remplir l’écran entier. Toutefois, si cela entraîne un recadrage en haut ou en bas, ou un recadrage trop important sur les côtés, la vidéo devra être mise à la bonne échelle pour s’adapter à l’écran. AVPlayerViewController gère cet aspect automatiquement, mais certains lecteurs vidéo personnalisés basés sur AVPlayerLayer doivent sélectionner le paramètre approprié et permettre aux utilisateurs de basculer entre les modes d’affichages selon leurs préférences.

iPhone X et vidéo - Application mobile - Agence de communication digitale Lyon Http5000

 

Nous espérons que cette liste vous permettra de bien vous préparer à l’arrivée de l’iPhone X sur le marché ou à résoudre au plus vite les possibles erreurs de compatibilité recensés ci-dessus.
Pour toute question, ou pour assurer les vérifications et améliorations de votre application mobile en vue de l’arrivée de l’iPhone X, demandez http5000. L’agence de communication digitale lyonnaise fera en sorte de donner à votre application l’aspect qu’elle mérite sur l’iPhone X !

Ceci peut vous intéresser

Comment créer une application mobile – Partie 3 – Étape finale

Comment créer une application mobile – Partie 3 – Étape finale

Si vous avez lu et suivi les parties 1 et 2 , vous êtes assez prêt pour l'étape de développement de votre application mobile. Il existe plusieurs façons de l'aborder, et toutes dépendent fortement de vos objectifs et de vos ressources. Budget En règle générale, nous...

Comment créer une application mobile – Partie 2 – UX & UI

Comment créer une application mobile – Partie 2 – UX & UI

Voici le moment de faire le premier investissement. Si vous avez déjà lu la partie 1 - Avant même de payer quoi que ce soit , vous devez savoir : Comment valider votre idée d'application. Qui utilisera votre application et quels en seront les avantages. Comment vous...

Comment créer une application mobile – Partie 1 – Planification

Comment créer une application mobile – Partie 1 – Planification

ASTUCE : cet article regorge de listes de contrôle pour vous aider à créer une base formidable qui vous accompagnera dans votre projet d'application mobile. Si vous envisagez vraiment de créer une application, préparez-vous déjà à faire un travail sérieux. L'une des...

Pin It on Pinterest