Comment implémenter une conception d'interface utilisateur iOS parfaite au pixel près

Vous avez probablement entendu l'expression "design au pixel près" d'innombrables fois, sans même vous demander ce que cela signifie ou ce qu'il devrait signifier. Ces derniers mois, il est possible que vous ayez entendu parler du déclin du concept de conception au pixel près, mais il y a un petit problème avec ces affirmations, en particulier en ce qui concerne la conception de l'interface utilisateur iOS.

À savoir, la définition de la conception au pixel près n'est pas gravée dans la pierre comme la plupart des directives de l'interface utilisateur iOS. Les gens l'interprètent de différentes manières, d'où le problème - la perfection des pixels peut sembler dépassée pour certains, mais d'autres continueront à utiliser le principe pour les années à venir, bien que sous un nom différent. C'est surtout un problème de nomenclature.

Qu'est-ce que la conception d'interface utilisateur au pixel près ?

Puisqu'il n'y a pas de définition claire de la perfection des pixels, ma compréhension du concept de conception parfaite des pixels est que tout est fait pour maximiser la netteté et la fidélité. Une fois la conception implémentée, elle semble identique sur n'importe quel écran d'iPhone sans artefacts ni problèmes d'aucune sorte.

La création d'une interface utilisateur d'application iOS au pixel près signifie que vous créez une conception avec des pixels à l'esprit et que vous implémentez exactement la même conception à l'écran, jusqu'à chaque pixel de la conception référencée, tout en vous assurant qu'elle est adaptée de manière réactive aux autres appareils.

Mais pourquoi un design parfait en pixels ?

Les concepteurs d'interface utilisateur font de leur mieux pour créer des interfaces faciles à percevoir et avec lesquelles interagir. Il est du devoir professionnel du développeur de respecter le travail du concepteur et de mettre en œuvre l'interface exactement telle qu'elle est livrée.

Avec des applications non parfaites au pixel près, les utilisateurs ne risquent pas de rencontrer des problèmes importants qui les empêcheront d'utiliser et d'apprécier l'application, mais les applications au pixel près sont définitivement plus nettes, plus propres et plus cohérentes.

En raison de la nature hautement compétitive de l'App Store d'Apple, chaque détail qui améliore l'apparence générale et l'expérience utilisateur est le bienvenu. Cela peut aider à différencier votre application et à la rendre plus visible, et donc plus rentable.

Ce guide de conception rapide de l'interface utilisateur iOS vous guidera tout au long du processus, de la phase de conception de base à la mise en œuvre, du point de vue du concepteur et du développeur.

Création d'une conception d'interface utilisateur iOS

Commençons. Les applications au pixel près commencent évidemment par des conceptions au pixel près, et nous savons tous d'où elles viennent de nos jours.

Outils de conception d'interface iOS essentiels

Je pense avoir raison de dire que Sketch est devenu la norme de facto pour les concepteurs d'UI/UX Web et mobiles. Bien qu'Adobe XD soit une alternative prometteuse, il est en retard sur Sketch en termes de popularité.

Ensuite, nous choisirons la taille du plan de travail. De nos jours, nous avons des appareils iOS avec différentes tailles d'écran et différents rapports d'aspect et nous devons choisir une taille pour créer notre design. Grâce à la mise en page automatique, il sera parfaitement adapté aux autres tailles d'affichage. Si nécessaire, vous pouvez créer différentes variantes de mise en page pour différentes classes de taille .

La seule vraie question ici est : comment le concepteur doit-il partager avec le développeur des informations sur l'adaptation des conceptions pour différents écrans ?

Heureusement, il n'est pas nécessaire d'écrire les spécifications de chacun, car le plugin Auto Layout pour Sketch s'en chargera. Le concepteur doit simplement définir la mise en page automatique souhaitée, exporter vers différentes tailles d'écran en un clic, et le développeur comprendra comment placer des contraintes de mise en page et s'assurer que tout a l'air bien, que ce soit sur un iPhone X ou le bon vieil iPhone 5.

Remarque : Depuis la version 44, l'équipe Sketch a considérablement amélioré les contrôles de redimensionnement, donnant aux utilisateurs plus de pouvoir et de contrôle sur le comportement des calques lorsque leur parent est redimensionné.

Configuration de votre conception

Cela sonne bien, mais nous n'avons toujours pas choisi la taille que nous utiliserons pour créer notre design. Selon les statistiques iOS de David Smith, 57 % de tous les utilisateurs d'iPhone comptent sur des écrans de 4,7 pouces, introduits dans l'iPhone 6/6s et ensuite utilisés dans l'iPhone 7 et même l'iPhone 8 récemment lancé.

Je suis sûr que vous connaissez tous les écrans de 4,7 pouces d'Apple, mais si vous n'êtes pas un amateur de chiffres, nous parlons d'écrans de 750 x 1334 pixels avec 326 pixels par pouce (PPI). Il s'agit d'un affichage Retina standard et dans le code, nous aurons la moitié de la résolution. Par conséquent, je vous suggère de commencer avec 375x667 pixels.

Ensuite, nous devons nous assurer que la conception de notre interface utilisateur iOS maximise la netteté. Pour atteindre cet objectif, vous devez activer l'ajustement des pixels :

Voici un exemple de rectangle simple avec et sans ajustement de pixel :

Utilisez Arrondi : Pixels complets lors de la modification d'objets vectoriels :

Ce ne sont évidemment que les bases, et pour regarder de plus près les éléments de l'interface utilisateur iOS au pixel près dans Sketch, vous devriez consulter le didacticiel officiel.

N'hésitez pas à utiliser des animations vectorielles complexes, car un développeur peut facilement les lire à l'aide de la bibliothèque Lottie. Vous pouvez lire des animations Adobe After Effects sur un appareil mobile sans souffrir d'artefacts de mise à l'échelle. Fournissez simplement le fichier JSON au développeur et c'est tout.

Utilisez le profil de couleur sRGB autant que possible. Si sRGB n'est pas suffisant sur les écrans à large gamme, vous devrez fournir des couleurs ou des éléments graphiques (un sRGB et un autre avec un profil de couleur intégré). Des informations détaillées sur les profils de couleur sont disponibles dans les directives HID d'Apple si vous en avez besoin.

Code personnalisé pour des résultats au pixel près

Génial! Nous en savons maintenant assez pour créer un design au pixel près ; comment le partageons-nous avec le développeur ? Nous devons évidemment puiser dans notre boîte à outils.

Choisir les bons outils

Il existe des outils incroyablement utiles pour partager le travail du concepteur avec les développeurs - Zeplin. Utilisez-le simplement et le développeur disposera de presque toutes les informations nécessaires pour s'assurer que la conception de votre interface utilisateur fonctionne : ressources graphiques, polices et couleurs utilisées dans la conception, texte et bien plus encore. À peu près la seule chose que le concepteur peut avoir besoin de fournir à ce stade sont les fichiers de police, au cas où il utiliserait des polices non incluses dans iOS.

Un autre outil sympa est PaintCode, qui peut générer du code à partir d'images vectorielles. PaintCode utilise vos chemins SVG et vos données de couleur pour générer des classes Swift ou ObjC. Avec PaintCode, vous pouvez utiliser des expressions, des variables, etc. pour créer des états passifs/actifs de vos boutons, des états haut/bas, du texte dynamique, des animations à partir de variables, et bien plus encore.

Vous devrez évidemment vous fier à Xcode et à quelques outils de développement iOS standard, mais nous y reviendrons plus tard.

Il est extrêmement utile si vous devez mettre à jour dynamiquement uniquement une partie spécifique d'un élément de conception, par exemple, modifier la couleur de base pour un arrière-plan dégradé sur l'icône de chat. Et, en prime pratique, votre application perdra du poids.

Ok, le développeur a enfin tout ce dont il a besoin, alors comment implémenter parfaitement un design au pixel près (pardonnez le jeu de mots) ?

Configuration et synchronisation de vos outils

Avec Zeplin, vous devriez obtenir presque tout ce dont vous avez besoin, à condition que le concepteur configure tout correctement. Si quelque chose est négligé ou peu clair, Zeplin fournit une fonctionnalité de commentaires efficace, permettant au concepteur et au développeur d'identifier et de résoudre rapidement les problèmes potentiels. Même si tout est fait correctement, les commentaires peuvent être utilisés pour des commentaires et des améliorations mineures.

Cependant, comme nous le savons tous, les choses ne se passent pas toujours comme prévu, donc parfois le développeur devra choisir une couleur, même si le concepteur a fourni la palette de couleurs utilisée dans l'application.

Pour le faire correctement, vous devez synchroniser vos outils :

• Définissez votre profil de couleur d'affichage sur sRGB : allez dans Préférences Système - Affichages - Couleur et choisissez sRGB IEC61966-2.1 .

• Dans Digital Color Meter , ou tout autre outil de sélection de couleurs, choisissez d'afficher en sRGB .

• Vérifiez que le profil de couleur dans la palette de couleurs Xcode est défini sur Device RGB.

Remarque : Les images peuvent avoir un profil de couleur intégré. Si tel est le cas, vous devrez adapter vos outils à ce profil si vous souhaitez saisir la bonne couleur de cette image. Heureusement, cela devrait être une exception et vous ne devriez pas rencontrer de tels cas trop souvent.

Dans Xcode 9, n'oubliez pas de conserver les données vectorielles si nécessaire. Bien que cela augmente la taille de l'application, cela vous permettra également d'utiliser votre image pour n'importe quelle taille d'affichage. Cependant, sur iOS 10 et les versions antérieures du système d'exploitation mobile d'Apple, les images ne seront pas mises à l'échelle à l'aide des données vectorielles supplémentaires.

Au lieu de cela, les anciennes versions du système d'exploitation utiliseront des mécanismes de mise à l'échelle hérités et vous laisseront une image floue lors de la mise à l'échelle au-delà de la taille d'origine. Vous pouvez consulter la documentation officielle d'Apple pour plus d'informations sur ce problème particulier.

Enfin, le développeur devra s'assurer que les tailles et les distances correspondent le plus possible à la conception d'origine. S'il y a des informations douteuses dans Zeplin, vous pouvez mesurer les distances entre les différents composants de l'interface utilisateur iOS avec des variations sur les règles d'écran. L'un d'eux est xScope, une règle à l'écran avec de nombreuses fonctionnalités pratiques.

Donnez vie à la conception de votre interface utilisateur iOS

Lorsqu'il s'agit de mettre en œuvre la conception de l'interface utilisateur iOS, vous avez le choix entre plusieurs approches : Storyboard, XIB et code personnalisé.

• Storyboard - Visualise les écrans et la navigation entre eux, mais il n'y a pas d'options pour hériter d'une conception d'un contrôleur dans un autre.

• XIBs - Visualise un écran ou sa partie, facile à hériter. Avant Xcode 9, il n'y avait pas d'option pour utiliser les guides de mise en page haut/bas, alors que dans Xcode 9, nous pouvons utiliser Safe Area .

• Code - De loin l'option la plus flexible, mais ne fournit pas de visualisation immédiate.

Pour les storyboards, vous devrez diviser votre conception en flux, par exemple, LoginFlow.storyboard, SettingsFlow.storyboard ou NewsFeedFlow.storyboard. De cette façon, vous garderez vos storyboards légers.

Regroupez les éléments de l'interface utilisateur en blocs. Cela simplifie la prise en charge de toutes les contraintes. Ne soyez pas paresseux et placez les vues nommées dans l'ordre, car elles apparaissent à l'écran de haut en bas. Gardez à l'esprit que le bas sera affiché au-dessus du haut. Cela vous aidera à trouver plus rapidement différentes vues.

Consultez l'exemple suivant pour les éléments non groupés et groupés :

Si vous avez plusieurs objets alignés à gauche/droite, ne les alignez pas sur le bord avec un décalage. La meilleure approche consiste à s'aligner sur l'élément précédent ou à implémenter une vue spéciale _ffset_avec une contrainte de largeur. Si vous avez besoin de modifier le décalage dans le futur, cela facilitera les choses.

Pour utiliser les couleurs dans IB, vous pouvez préparer une palette au bas de Xcode Color Picker.

Remarque : Si la version iOS minimale de votre application est 11, vous pouvez utiliser l'option "Couleurs nommées" dans le catalogue d'actifs.

Emballer

C'est ça. Il ne nous reste plus qu'à envoyer le résultat à l'équipe QA, vérifier que tout est en ordre, et le tour est joué ! Notre application au pixel près est prête.

Le but de cet article était de fournir un exemple linéaire et simple de conception d'interface utilisateur iOS au pixel près, obtenant les meilleurs résultats en un minimum de temps. La collaboration entre les concepteurs d'interface utilisateur et les développeurs n'est pas toujours aussi simple et sans friction, mais c'est un problème pour un autre article.