Ajustement optimal de ton design pour l'iPhone X

L' iPhone X a fondamentalement changé le design des applications. Avec son format unique et les nouveaux éléments de l'interface utilisateur, les designers doivent montrer plus de flexibilité et de créativité pour créer des applications impressionnantes. Ce guide explique étape par étape comment utiliser Sketch pour adapter votre design aux exigences de l'iPhone X.

Principales conclusions

• La hauteur de l'écran de l'iPhone X est de 812 pixels, ce qui crée de la place pour de nouveaux éléments UI.
• La navigation et la barre d'onglets sont plus hautes et nécessitent des ajustements dans la mise en page.
• Il est important de respecter la Safe Area pour s'assurer qu'aucun contenu ne tombe dans la zone arrondie de l'écran.
• Le Home Indicator est un nouvel élément d'interface qui doit être pris en compte lors du design.

Guide étape par étape

Commence par créer un nouveau design iPhone X dans Sketch. Appuie sur A pour ajouter un nouvel élément, puis clique sur le design de l'iPhone X.

La largeur reste à 375 pixels, tandis que la hauteur est réglée à 812 pixels. Cela te donne plus de place pour concevoir ton interface utilisateur. Prends en compte que les coins arrondis de l'écran sont importants pour la mise en page.

Copie le Home Controller et adapte le design. Il est conseillé de ne pas utiliser les bibliothèques standards, mais la bibliothèque spécifique à l'iPhone X pour un ajustement plus précis. Va dans les paramètres de Sketch et active la bibliothèque iOS 11, si elle n'est pas déjà présente.

Ajoute une barre de navigation standard pour rendre l'interface cohérente. Assure-toi que la hauteur de la navigation est de 88 pixels par rapport aux 44 pixels de l'iPhone 8.

Recherche la barre d'état dans la bibliothèque iOS 11 et ajoute-la également. Elle doit être placée en haut de l'écran.

Pour la barre d'onglets, c'est la même chose: choisis une version avec trois onglets dans la bibliothèque iOS 11 et assure-toi qu'elle mesure 83 pixels de haut pour bien s'intégrer dans la mise en page.

Fais attention à ce que lors du design, aucun élément ne dépasse dans la zone arrondie. En programmation, cela s'appelle le Safe Area Layout Guide - c'est l'espace dont tu as besoin pour une vue sécurisée.

Ajoute le Home Indicator comme élément essentiel de ton design. Celui-ci doit être placé au centre du bord inférieur.

Une fois que tu as ajouté les éléments de base, tu peux copier l'ensemble de la section et le coller à l'endroit souhaité. N'oublie pas d'ajuster les espacements après la copie.

Répète ce processus pour le Chat Controller. Crée une copie du design et renomme-la en conséquence.

Remplace les icônes pour les onglets et ajuste l'affichage. Il est important de choisir soigneusement la bonne symbolique et les textes.

Fais attention aux espacements, en particulier entre les bulles de chat et la barre d'onglets. Maintiens un écart de 16 pixels pour garantir que les éléments s'harmonisent bien ensemble.

Ces étapes montrent à quel point tu peux rapidement adapter ton design au nouveau format. En cas de doutes, il n'est cependant pas problématique de continuer à affiner le design.

Dans la prochaine leçon, tu apprendras comment travailler avec des effets supplémentaires dans la zone de profil, y compris l'utilisation d'effets de flou.

Résumé – Design efficace de l'iPhone X dans Sketch

Adapter tes designs à l'iPhone X ouvre de nouvelles possibilités. Avec la bonne compréhension des nouveaux formats d'écran et des éléments UI, tu peux créer des interfaces utilisateur impressionnantes.