Ce guide vous aide à vous lancer dans la conception Android en traduisant les conceptions mobiles iOS existantes en Android à l'aide de modèles UX Android fondamentaux, ainsi que de Material Design.
Les éléments sont décrits pour assurer la parité de conception et ordonnés pour l'efficacité. Si vous suivez un système de conception de base partagé, vous pouvez traduire les conceptions avec votre propre système au lieu de Material 3. Android et iOS adhèrent à l'idée que le contenu passe avant tout.
Ensuite, l'image de marque peut se manifester par la couleur, la typographie et la forme. Cela permet non seulement de rendre le contenu lisible, mais aussi de créer plus facilement de la cohésion.
Commencer avec vos conceptions iOS
Avant de commencer, faites une copie de votre application iOS. Les applications iOS sont divisées en trois zones : barres, vues et commandes. Vous pouvez utiliser cette structure pour effectuer la traduction, en laissant la mise en forme pour la fin.
Découvrez les composantes d'une application Android.
1. Supprimer l'UI système iOS
Supprimez la barre d'état et l'indicateur de page d'accueil. C'est désormais plus simple.
2. Redimensionner vos cadres
Vous pouvez utiliser la taille compacte Android, soit 412 dp. Toutefois, tenez compte d'une gamme d'appareils, même dans une classe de taille de fenêtre. Par exemple, testez à 360 dp pour tenir compte des écrans plus petits et adaptez-vous à toutes les classes de taille de fenêtre.
3. Remplacer par les barres système Android
L'UI du système Android peut varier en fonction de l'appareil et des paramètres de l'utilisateur, mais l'affichage d'une UI système standard peut aider à donner plus de contexte à vos conceptions. Placez la barre de notification en haut et une barre de navigation par gestes ou à trois boutons en bas.
Pour en savoir plus, consultez Barres système Android.
4. Selon votre navigation
Remplacez la barre d'onglets (navigation inférieure) par la barre de navigation.
Reprenez votre cartographie des flux. Votre application iOS utilise-t-elle un menu "Plus" ? (Les bonnes pratiques HIG suggèrent de ne pas utiliser ce modèle.) Limitez-vous à cinq éléments ou moins, réservez la barre de navigation inférieure à la navigation principale, évaluez si des éléments secondaires, comme le profil ou les paramètres, peuvent être déplacés dans la barre d'application supérieure, ou si vous avez une action principale qui peut être traduite en FAB.
Votre navigation principale doit toujours être présente dans les vues parentes (le niveau supérieur d'une section dans votre cartographie des flux). Les vues enfants (tout ce qui se trouve sous la vue parente) peuvent inclure la navigation principale si elles se trouvent plus haut dans la hiérarchie de navigation et ne sont pas modales.
Mettez à jour la barre de navigation inférieure avec les icônes et les libellés appropriés. Les deux plates-formes évitent les mouvements latéraux entre les destinations de navigation.
5. Barres de navigation vers barres d'application supérieures
Décomposez-les section par section : d'abord les vues parentes, puis les vues enfants. La barre d'application se compose de la partie gauche (navigation et titre) et de la partie droite (éléments d'action).
Si votre application utilise un menu de navigation par tiroir au lieu d'une barre de navigation inférieure, une icône de tiroir s'affiche sur toutes les vues parentes.
Si votre application ne comporte pas de rail ni de tiroir, les vues parentes n'affichent pas d'icône de navigation principale.
Par défaut, le titre est aligné à gauche dans la barre d'application pour Android.
Les vues enfants affichent une flèche vers le haut à l'emplacement de l'icône de navigation. À ne pas confondre avec le dos. La flèche vers le haut permet à l'utilisateur de remonter d'un niveau dans la hiérarchie de navigation d'un flux utilisateur d'application, tandis que le balayage vers l'arrière ou sur le bord se trouve dans la navigation système, ce qui permet à l'utilisateur de revenir en arrière et même de quitter l'application.
Qu'en est-il des vues modales ? Pour les modaux en plein écran (comme les lecteurs vidéo et les images), cela sera similaire à la barre d'application de la vue enfant, sauf que l'icône de navigation doit passer à la fermeture, ce qui ferme le modal.
6. Un peu plus de modalités
Commencez par de grandes vues modales, qui sont idéales pour concentrer l'attention de l'utilisateur sur une tâche. Sur iOS, elles se présentent souvent sous forme de feuilles que l'utilisateur peut faire glisser vers le bas.
Terminez de remplacer les barres d'application. Pour les modaux de feuille iOS, remplacez la partie supérieure de la feuille et l'aperçu de l'arrière-plan par une barre d'application de boîte de dialogue en plein écran.
Bonus : Vérifiez si l'une de vos feuilles modales iOS peut être traduite en feuille inférieure.
Feuilles d'action et d'activité vers les bottom sheets. (Les feuilles de partage peuvent désormais être traduites.)
Pour les alertes, utilisez les boîtes de dialogue système. Si vous les utilisez pour des informations importantes que l'utilisateur doit reconnaître d'une manière ou d'une autre, remplacez-les par des boîtes de dialogue système. N'oubliez pas d'inverser les entrées et les sélecteurs à ce stade.
7. Contenu frère
Onglets, view pagers ou onglets de balayage. Si vous utilisez des commandes segmentées sur iOS, elles sont converties en onglets sur Android. Ils permettent tous deux de filtrer les vues d'informations similaires, mais pas identiques. Les onglets Android sont généralement associés à la barre d'application et offrent l'avantage supplémentaire de pouvoir balayer le contenu.
8. Contenus et contrôles
En fonction de la façon dont vous avez configuré les contraintes ou le comportement de redimensionnement, la plupart de vos contenus ont probablement déjà été redimensionnés. Mais profitez-en pour parcourir et définir vos marges. 16 dp est une bonne norme sur les petits écrans.
La grille de référence est basée sur une grille de 8 dp pour les composants et de 4 dp pour la typographie et les icônes. Une grille de 8 points fonctionne bien sur iOS. Vous pouvez donc l'envisager comme point de départ pour les deux plates-formes.
Commandes. Remplacez ces boutons à bascule par des boutons à bascule Android. Utilisez les cases à cocher et les boutons radio Android. Android inclut toutes ces fonctionnalités.
Si vous avez des formulaires, remplacez les champs de texte iOS par des champs Android. Material propose des options telles que le contour ou le remplissage. Choisissez celle qui correspond le mieux à votre marque.
Les listes Material présentent quelques différences par rapport aux cellules de tableau iOS :
- Les lignes de séparation sont utilisées avec parcimonie.
- Les indicateurs ne sont pas utilisés dans les listes pour limiter le bruit visuel.
- Les dimensions respectent la grille de 8 dp.
9. Style
Couleur : la couleur de l'UI se compose de couleurs d'accentuation, sémantiques et de surface assemblées dans un jeu de couleurs. Ces couleurs sont appliquées à l'UI en fonction de leur rôle.
Type : si vous utilisez une police système, remplacez San Francisco. Roboto est la police système par défaut pour Android. Cela dit, nous vous encourageons à exprimer le style unique de votre marque avec des thèmes et des polices Google téléchargeables.
Icônes : idem. Si vous utilisez des symboles SF, vérifiez qu'ils ont tous été convertis en icônes ou symboles Material. Choisissez la variante qui convient à votre marque. Saviez-vous que vous pouvez utiliser des icônes Material sur n'importe quelle plate-forme ?
Mouvement : Android et iOS ont une conception de mouvement distincte, qui doit être respectée pour chaque plate-forme. Le mouvement Material est informatif, concentré et expressif. L'ondulation est une mise en avant distincte utilisée dans les composants pour fournir un retour tactile. Le système de mouvement est un ensemble de schémas de transition qui tirent parti des animations de transformation du conteneur, d'axe partagé, de fondu enchaîné et de fondu. Déterminez si les éléments de votre conception ont des conteneurs persistants, la relation entre les éléments et la façon dont ils doivent entrer ou sortir.
10. Ranger
Si vous traduisez un prototype, c'est le bon moment pour recâbler les éléments. Revenez en arrière dans votre navigation principale. Ensuite, vos barres d'application, en gardant à l'esprit la différence entre "haut" et "retour", et en veillant à sélectionner des transitions de page adaptées à Android (mentionnées à l'étape 9).
Vous devriez avoir un prototype entièrement fonctionnel prêt. Puisque vous l'avez redimensionné, il est prêt à être transmis.
Guide de style et des composants
Si vous disposez d'un système de conception ou d'un guide de style existants, vous pouvez avoir vos propres styles de base (couleur, typographie, icônes, forme) qui peuvent être utilisés avec Material Design, tout comme vous les utiliseriez avec les consignes iOS. La thématisation Material vous permet de personnaliser les composants Material avec le style unique de votre marque (couleur, typographie et forme).
Il n'est pas rare que les produits multiplate-formes disposent de consignes spécifiques à chaque plate-forme. Cela peut rendre votre propre système de conception plus axé sur l'utilisateur.
Enfin, si vous travaillez sans, sachez que toutes les applications ou tous les produits n'ont pas besoin d'un système de conception entièrement personnalisé. Envisagez de créer un guide de style d'une page. Un guide de style est un document qui décrit les spécifications de base des conceptions. Les consignes relatives à la marque contiennent souvent un guide de style.
Vous pouvez le copier pour Android et l'utiliser comme source pour mettre à jour les styles (ou les symboles, les composants ou une bibliothèque).