🙇🏾 🤜🏼 🤜🏽 32 différences dans la conception d'une application mobile pour iOS et Android 👨🏽‍🚀 🏭 👨‍🔬

Le concepteur de fer du Redmadrobot Design Lab Arthur Abrarov partage ses observations.

L'adaptation de la conception à une autre plateforme fait partie intégrante du travail d'un concepteur d'applications mobiles. Le but de ce travail est d'adapter organiquement la conception aux modèles d'interaction utilisateur. De plus, une adaptation bien développée simplifie le développement grâce à l'utilisation de composants de plateforme natifs.

Pour adapter la conception correctement, vous devez suivre les directives de la plate-forme: Human Interface Guidelines (HIG) pour iOS et Material Design pour Android. Et communiquez avec les développeurs, connectez-les idéalement à la conception le plus tôt possible afin qu'ils puissent définir immédiatement des limites techniques.

Mais en quoi le design pour iOS diffère-t-il exactement du design pour Android? Dans cet article, j'analyserai 32 différences de conception spécifiques pour iOS et Android. Ils sont divisés en quatre groupes:

Différences fondamentales.
Différences de navigation et de modèles (UX).
Différences de composants (UI).
D'autres différences.

Les fonctionnalités IOS seront à gauche et les fonctionnalités Android à droite ou en haut / en bas.

Différences fondamentales

Directives d'interface humaine vs conception de matériaux

Presque toutes les différences dans cet article sont tirées de l'analyse de ces lignes directrices. Leur essence au niveau idéologique est la suivante. HIG, c'est un design plat, léger et convivial, il est issu d'un rejet progressif du skeuomorphisme .

La matière a plusieurs principes fondamentaux: la matière comme métaphore; audacieux, graphique, conscient; animation significative; fondation flexible et multiplateforme. Si vous n'êtes pas familier avec les directives, il est préférable de les lire avant de lire l'article.

2. Unités: pt vs dp

La conception de l'application iOS est créée en pt , et l'application Android en dp . Nous créons généralement un design en 1x (ou mdpi) et le téléchargeons sur Zeplin. Zeplin affiche le design de pt pour iOS et génère des icônes et des illustrations en 2x et 3x. Sous Android, il affiche la conception en dp et génère des graphiques en hdpi, xhpdi, xxhdpi et xxxhdpi.

3. Taille de l'écran: 320 pt x 568 pt vs 360 dp x 640 dp

Je préfère concevoir l'application iOS pour la plus petite taille - iPhone 5 avec une taille d'écran de 320 pt x 568 pt. Je fais cela pour éviter un affichage incorrect du contenu sur de petits écrans. Certaines personnes préfèrent concevoir pour iPhone 8.

Sous Android, il existe une taille d'écran généralement acceptée de 360dp x 640dp.

Lors de la conception pour iOS, parfois je crée un design pour iPhone X (375pt x 812 pt). Cela est nécessaire pour que le développeur comprenne comment mettre correctement en retrait l'écran de cette taille. Même lors de la conception pour iPhone X, vous devez vous rappeler que Safe are a - une zone à l'extérieur de laquelle vous ne devez pas placer de contenu.

4. Police système: San Francisco vs Roboto

Si vous ne savez pas quelle police utiliser dans l'application, prenez celle du système. Dans le cas d'iOS, c'est San Francisco . Et Android est Roboto .

5. Barre de navigation Android

Contrairement à iOS, Android dispose d'un outil de navigation arrière intégré. Il s'agit de la barre de navigation Android .

Il est soit physiquement intégré au smartphone, soit fait partie de l'interface. A l'aide de la flèche, l'utilisateur recule d'un pas dans l'ordre chronologique ( navigation chronologique inversée ). La navigation a lieu à l'intérieur de l'application et entre eux.

Au début de ma carrière en tant que concepteur d'applications mobiles, j'ai longtemps tourmenté les développeurs Android avec la question: pourquoi avons-nous besoin de deux boutons en arrière? L'un est en bas de la barre de navigation, le second apparaît dans la barre supérieure de l'application lorsque vous accédez à la page enfant.

Voici la réponse. Il existe deux types de navigation retour: la navigation chronologique inverse (nous le faisons en utilisant la flèche de retour dans la barre de navigation, appelez-la Retour).

Et la navigation vers le haut (nous le faisons avec la flèche supérieure, appelons-le Up).

Imaginez que nous ayons un chemin ABC, où A est la page parent et B et C sont des pages enfants. Imaginez que l'utilisateur soit passé directement de A à C. S'il appuie sur le bouton Retour, alors il reviendra à A. Mais s'il appuie sur Haut, il ira d'abord à B - et à la deuxième pression, il ira à A.

Ceci est difficile à mettre en œuvre et déroutant pour l'utilisateur , alors maintenant, ces deux boutons arrière effectuent la même action arrière, comme dans iOS. Autrement dit, si vous êtes venu de A à C, puis de C, nous reviendrons à A.

6. Importance de l'élévation du matériau

Dans iOS, il n'y a pratiquement pas d'ombres. Par exception, les ombres peuvent être trouvées sur l'écran principal de l'App Store et dans Health. Mais en général, HIG ne prescrit pas l'utilisation d'ombres.

Dans Material, les ombres jouent un grand rôle. Ils ajoutent à l'interface un troisième espace (axe Z), grâce auquel chaque composant a sa propre place stricte sur cet axe (de 0 dp à 24 dp). De plus, cet axe Z n'existe pas simplement au niveau idéologique: les développeurs ont un paramètre d'élévation dans lequel ils règlent la position du composant le long de cet axe.

La navigation et le changement d'états s'accompagnent d'un changement d'élévation des composants. Par conséquent, lors de la conception pour Android, nous devons consciemment aborder la création d'ombres.

7. Différences de dénomination

Il existe de nombreuses différences de dénomination. Je propose de considérer ces cinq.

une. Barre d'onglets vs barre de navigation inférieure

Il s'agit d'une barre de navigation de niveau supérieur de l'application. Situé statiquement au bas de l'écran sur les deux plates-formes. En plus de nommer, leur comportement diffère. Nous le démonterons un peu plus tard.

b. Barre de navigation vs barre d'applications supérieure

Cette barre sur les deux plateformes effectue approximativement les mêmes tâches: informe l'utilisateur de sa position actuelle dans l'application, permet de revenir à l'écran précédent et propose une ou plusieurs actions contextuelles. En savoir plus sur les différences ci-dessous dans l'article.

c. Contrôles segmentés vs onglets

En plus de nommer, Tabs Android a plusieurs fonctionnalités: vous pouvez vous déplacer entre les onglets d'un coup, et Material vous permet de les utiliser pour une navigation de haut niveau.

ré. Alertes vs dialogues

Fait intéressant, un seul outil d'alerte utilisateur est décrit dans iOS - Alertes . Il y en a trois dans Android : Snackbars, Bannières et Dialogues.

Snackbar est conçu pour les messages de faible priorité et ne nécessite aucune action. Les boîtes de dialogue bloquent l'interaction avec l'interface et nécessitent une action. Les bannières sont entre elles: cela ne bloque pas l'interaction, mais cela nécessite une action.

e. Touch ID vs Android Fingerprint

Ceci n'est qu'un exemple des différentes technologies de dénomination utilisées sur ces plateformes. Ils doivent être connus, car en plus de la dénomination, ils diffèrent par de nombreuses caractéristiques techniques de leur mise en œuvre. Comprendre les différences de dénomination est la première étape pour comprendre les différences technologiques.

Différences de navigation et de modèles (UX)

8. Méthodes de navigation de haut niveau

Commençons par le haut. iOS recommande une seule façon de naviguer de haut niveau - via la barre d'onglets . Android a trois options en retour: Navigation tiroir , Barre de navigation en bas, et onglets .

Si le nombre de pages de niveau supérieur est supérieur à cinq, utilisez le tiroir de navigation. Si moins - Barre de navigation inférieure. Les onglets sont rarement utilisés pour cette navigation, mais la méthode est à notre disposition. Cependant, Material recommande de ne pas combiner les onglets et la barre de navigation inférieure, car l'interaction avec ces composants affecte le contenu de la page et l'utilisateur peut être confus.

9. Différences dans le comportement de la barre d'onglets et de la barre de navigation inférieure

Cette différence offre du matériel.

Si vous passez de la page parent à la page iOS sur iOS, puis via la barre d'onglets, basculez vers une autre page parent, puis lorsque vous revenez à la première page parent, vous serez toujours sur la page enfant.

Sous Android, tout est plus simple - lorsque vous passez par la barre de navigation inférieure, vous basculez toujours entre les pages parentes. Si auparavant vous étiez dans une filiale, elle sera réinitialisée.

Nos développeurs Android sont convaincus que ce comportement du système est incorrect. Dans le cas du passage à la navigation par le bas, cela vaut la peine de maintenir les pages enfants ouvertes, comme sur iOS.

10. Comportement spécial des onglets Android

Les onglets sur Android, contrairement aux contrôles segmentés iOS, ont cette propriété: vous pouvez parcourir les onglets en faisant glisser vers la gauche et la droite.

Cela est dû au fait que les pages à onglet sont à la même hauteur (élévation).

Ceci est important à savoir car lorsque vous utilisez des onglets dans Android, nous ne devons pas ajouter d'éléments avec des gestes similaires à la conception. Par exemple, un carrousel d'images ou une interaction avec des cartes à l'aide de glissements.

En général, ces deux composants ne se remplacent pas complètement. Le contrôle segmenté est un contrôle qui contrôle le contenu d'une page. Et Tabs est un outil de navigation.

Par conséquent, il convient de consulter les développeurs avant de les considérer comme des composants équivalents lors de l'adaptation. Parfois, il est plus correct de remplacer les onglets Android par le contrôle de page. Tout dépend du contexte.

11. Différences dans l'apparence de l'écran enfant

Sous iOS, l'apparence de l'écran enfant (sans compter les modalos) se produit d'une seule manière: la page enfant apparaît en haut à droite de la carte mère avec la diapositive en vigueur. Le retour à l'écran mère se produit avec l'effet de glissement.

Le matériel recommande de montrer à l'utilisateur une relation hiérarchique entre les pages parent et enfant à l'aide d'une animation significative.

Le composant, lorsqu'il interagit avec lequel l'utilisateur accède à la page enfant, se développe et couvre la page mère. Ainsi, l'utilisateur comprend d'où il vient et où, pourquoi cela s'est produit et où il reviendra en cliquant sur le bouton "Retour".

La transition se produit à l'aide de l'assouplissement standard .

12. Tiroir de navigation de modèle d'appel spécial

Lors de la conception d'une application avec Navigation Drawer, il est important de se rappeler que ce composant supprime le geste de balayage des bords de gauche à droite. Par conséquent, vous ne devez pas ajouter d'autre logique à ce geste.

Dans iOS, ce geste a un modèle établi de transition d'un enfant à la page mère. Ce modèle a progressivement migré vers de nombreuses applications Android.

13. Comportement du contenu lors du défilement

Sur HIG, le contenu dans iOS se comporte comme ceci lors du défilement : la barre de navigation diminue en largeur, la barre d'outils disparaît. Mais en général, les développeurs iOS peuvent personnaliser tout comportement du contenu et des barres lors du défilement.

Le matériau offre plus de comportements de défilement. Par exemple, la barre de navigation inférieure, la recherche et la barre d'application inférieure peuvent disparaître lors du défilement.

La barre d'applications supérieure peut disparaître ou s'élever au-dessus du contenu principal.

Comportement de recherche divers

Fait intéressant, HIG réfère la recherche aux barres et l'appelle Barre de recherche. Dans Material, nous trouvons une recherche dans la section Navigation, pas dans Components. Autrement dit, pour Material, la recherche est une autre façon de naviguer.

Dans iOS et Android, la recherche peut être statiquement présente sur l'écran et, en règle générale, clouée sur la barre de navigation ou la barre d'applications supérieure.

Sur les deux plates-formes, la recherche peut être sous la forme d'une icône, uniquement dans iOS, l'icône est développée dans un composant distinct de la barre de recherche, et dans Android, la recherche est ouverte dans la barre d'applications supérieure.

Une caractéristique de la recherche dans iOS est que vous pouvez le «cacher» sous la barre de navigation et l'appeler par un geste de balayage vers le bas. Le même geste est typique de l'actualisation (tirer pour actualiser), vous ne devez donc pas appeler la recherche et l'actualisation sur cette action.

Différences de composants (UI)

15. Quels composants ne sont pas dans iOS

Dans iOS, il n'y a pas beaucoup de composants Android natifs. Passons en revue.

une. Tiroir de navigation

iOS ne reconnaît pas le menu du burger. Comme indiqué précédemment, dans iOS, la navigation de niveau supérieur se fait uniquement dans la barre d'onglets.

b. Toile de fond

Backdrop est le composant le plus étonnant pour moi dans Material. Au moment de la rédaction de ce document, Android prévoit simplement de l'implémenter en tant que natif. En général, lors de l'étude des composants de Material, il convient de vérifier s'ils sont déjà disponibles pour utilisation.

Le matériau lui-même aime ce composant. Jetez un œil, par exemple, aux lauréats du Material Design Award 2019.

c. Bannière

La bannière est introuvable parmi les composants iOS natifs. Avec l'aide de Banner, nous informons l'utilisateur des informations importantes et proposons des actions connexes.

ré. Snackbar

Comme Banner, Snackbar n'est pas natif d'iOS. Snackbar est utilisé pour transmettre à l'utilisateur un court message sur le résultat de son action.

e. chips

Les puces sont également manquantes parmi les composants iOS natifs. Ils sont utilisés pour saisir des informations, des descriptions et des actions.

F. Barre d'application inférieure

Ici, vous pouvez parier que iOS a un composant similaire - la barre d'outils . Mais ils sont différents, c'est pourquoi: Toolbar est une barre d'actions contextuelles. Par exemple, lors de la modification d'une liste de messages dans Messages, une barre d'outils apparaît avec les actions Tout lire et Supprimer.

La barre d'applications inférieure déplace la barre d'applications supérieure vers le bas avec les mêmes actions de niveau supérieur: ouverture du tiroir de navigation, appel d'une recherche, etc. De retour dans la barre d'applications inférieure, nous hébergeons FAB.

g. Fab

Oui, FAB n'est pas non plus dans iOS. FAB est un bouton pour effectuer l'action principale sur l'écran. Par exemple, dans une application de messagerie, FAB créera une nouvelle lettre.

Si vous utilisez FAB dans Android pour l'action principale à l'écran, alors sur iOS cette action principale doit être placée en haut dans la barre de navigation à droite (voir exemple: iMessages).

h. Tiroir de navigation inférieur

Une variante du tiroir de navigation typique d'Android uniquement. Appelé en appuyant sur le bouton du menu burger dans la barre d'application inférieure.

je. Feuille latérale

Bien que Material vous permette d' utiliser ce composant dans une application mobile, je recommanderais de le remplacer par la feuille de fond plus familière .

j. Feuille de fond extensible

Ce très beau composant Android ne se trouve pas parmi les natifs pour iOS. La feuille inférieure extensible est une surface clouée au bas de la page. Lorsque vous appuyez dessus, la surface se développe en une page entière.

k. Feuille inférieure standard

La feuille de fond standard est une variante de la feuille de fond et ne fait pas partie des composants d'iOS.

16. Quels composants ne sont pas dans Android

Considérez maintenant quels composants ne se trouvent pas dans la bibliothèque Android.

une. Contrôles de page

Le contrôle de page indique sur quelle page l'utilisateur se trouve. Il ne fait pas partie des composants natifs d'Android.

b. Barre d'outils

La barre d'outils n'est familière qu'à iOS.

c. Steppers

Steppers - contrôle iOS standard, non décrit dans Matériel. Utilisez-le pour saisir de petites valeurs. Exemple: le nombre de copies à imprimer.

ré. Popover

Popover est un panneau contextuel principalement utilisé sur l'iPad.

IOS a une application Popover standard - définissant le texte dans les lecteurs ou les navigateurs.

17. Barre d'état divers

Sur les deux plates-formes, la barre d'état effectue la même tâche: rapports sur l'heure, le niveau de charge, la qualité des communications mobiles et le Wi-Fi. Ils diffèrent par l'emplacement de ces indicateurs à l'intérieur de la barre d'état et, en général, par leur solution visuelle.

De plus, la barre d'état Android dispose d'une telle fonctionnalité, lorsqu'une notification provient d'une application, l'icône de cette application apparaît dans la barre d'état. Dans iOS, ce n'est pas le cas.

18. Actualiser les contrôles de contenu vs glisser pour actualiser

Les rafraîchisseurs sont appelés avec le même geste de balayage vers le bas sur les deux plates-formes. Mais sur iOS, Refresh Content Control pousse le reste du contenu vers le bas, tandis que le balayage d' Android pour actualiser apparaît au-dessus du contenu. De plus, l'actualisation iOS lorsque le contenu défile disparaît, tandis qu'Android reste visible.

19. Contrôle divers

Les commandes de la plate-forme ne diffèrent que visuellement. On peut noter que dans iOS, les contrôles sont plus simples: les cases à cocher sont utilisées à la fois pour le bouton radio et la case à cocher. Dans Android, ils diffèrent par la forme du contrôle.

Le matériel suggère également d' utiliser la case à cocher parent lorsque vous devez donner à l'utilisateur la possibilité de sélectionner rapidement toutes les options.

20. Différentes vues de la flèche arrière et de la position du cap

Dans iOS, la flèche n'a pas de ligne au milieu car dans iOS, la flèche de retour est signée avec l'écran précédent. Si le titre était standard sur l'écran précédent, le titre se déplace du titre vers la gauche vers la flèche. Si le titre était large, le titre augmente. Si le titre de la page précédente est trop long, il est remplacé par le mot retour.

21. Vue différente de l'icône des trois points

Il ne semble pas y avoir de justification rigoureuse à cette différence. Nous rendons hommage à la plateforme et utilisons la position recommandée des trois points. Dans iOS, les points se trouvent horizontalement, dans Android - verticalement.

22. Différents types de sélecteurs

Sous iOS , la date est sélectionnée à l'aide de la bobine. Le tambour iOS peut être utilisé pour saisir d'autres données. Dans Android Picker, les dates imitent l'apparence d'un calendrier physique.

Material recommande également de donner aux utilisateurs la possibilité d'entrer une date à l'aide du champ de saisie.

23. Champs de texte divers

HIG est beaucoup moins exigeant sur les champs de texte que sur le matériel.

Différences

Sous iOS, l'étiquette se trouve dans un champ de saisie et disparaît lors de la saisie de texte. Le matériel recommande d' augmenter l'étiquette lors de la saisie de texte.

Similaire

Les deux plateformes conseillent d'ajouter un bouton d'effacement si nécessaire.

Quoi d'autre demande du matériel

Le matériau recommande également de mettre en surbrillance l'étiquette et la bande sous le champ de texte avec la couleur de premier plan - cela permet de comprendre que le champ est mis en surbrillance. Le matériel décrit le comportement du champ en cas d'erreur de saisie. Vous pouvez choisir entre deux formulaires dans Matériel: Rempli et Contour.

24. Menus contextuels vs menus

Les menus contextuels sont apparus dans iOS 13. Ce contrôle propose à l'utilisateur plusieurs actions contextuelles associées à l'élément sélectionné. Android a un élément partiellement similaire - les menus .

Les menus Android sont utilisés dans un plus grand nombre de cas: il propose des actions contextuelles à la fois pour l'élément sélectionné et pour la page entière dans son ensemble; utilisé comme entrée avec plusieurs options au choix (menu déroulant); utilisé pour modifier le texte. Les menus contextuels sont un composant uniquement iOS. Et les menus Android peuvent être utilisés à la fois dans une application mobile et sur un ordinateur de bureau.

25. Vue Action / Vue Activité vs Feuille inférieure modale

Si vous utilisez la vue Action ou la vue Activité dans l'application iOS iOS , dans Android, ils peuvent être partiellement remplacés par le composant Feuille de fond modale Android . Il apparaît également en bas de l'écran, assombrit le contenu et se ferme de manière similaire (bouton, clic en dehors de la fenêtre modale, parfois glisser vers le bas). La tâche des composants est d'offrir des choix ou des actions contextuelles.

26. Barre d'outils Modifier les menus et la sélection de texte

En plus de la différence visuelle, les menus d'édition et la barre d'outils de sélection de texte diffèrent par ce qui suit: avec un appui long sur Android, l'utilisateur peut continuer à sélectionner du texte. Sous iOS, après un appui long, une loupe apparaît pour sélectionner l'endroit exact dans le mot.

De plus, Android diffère d'iOS en ce que lorsque des actions supplémentaires sont appelées, la barre d'outils de sélection de texte prend la forme de menus.

27. Diviseur de taille différente

Dans iOS, il est de 0,5 pt, dans Android - 1 dp.

Autres différences

28. Exigences différentes pour la taille de la zone de pression

Selon les directives, la zone de clic minimale dans iOS est de 44 x 44 pt et dans Android - 48 x 48 dp.

29. App Store vs Google Play

Votre application iOS sera téléchargée depuis l'App Store. Application Android - de Google Play. Pour placer correctement l'application dans le magasin, vous devez suivre leurs exigences. Les exigences de l'App Store valent la peine d'être lues ici , et Google Play est ici . Il existe de nombreuses fonctionnalités, je vous recommande donc d'étudier avant la publication.

30. Un modèle spécial dans iOS - Annuler et refaire

Il s'agit d'un modèle iOS spécial : si vous secouez votre smartphone, l'application invitera l'utilisateur à annuler ou à répéter la dernière action validée. En règle générale, ce geste est utilisé pour supprimer le texte saisi.

31. Relation avec le lancement de marque

Le matériel permet à l' écran de lancement de placer le logo de l'application. HIG ne recommande pas d' utiliser l'écran de lancement à des fins de marketing et suggère que seul l'espace réservé soit affiché au démarrage de l'application.

32. Thèmes de conception de matériaux supplémentaires

Le site Web Matériel couvre également des sujets tels que: les formats de données (divers formats de données), la visualisation des données (infographies correctes), les états vides (conception des états vides), les états hors ligne (interface en l'absence d'Internet), l' accessibilité (conception accessible) et la bidirectionnalité (design pour les lecteurs de droite à gauche).

Conclusion

La connaissance des directives augmente notre niveau de sensibilisation. Nous comprenons les modèles d'utilisateurs existants et créons une application qui s'adapte organiquement aux habitudes des utilisateurs.

Les directives nous encouragent à respecter les solutions de plateforme natives. Lors de l'adaptation d'un design à une plateforme différente, il est toujours tentant de dupliquer un design sans modifications. Cela nuit à l'expérience utilisateur et complique le développement. Mais quand nous voyons des différences dans les solutions natives, nous adaptons la conception correctement.

Et si nous voulons introduire une nouvelle solution personnalisée, la connaissance des directives permet de justifier cette innovation.

Total: la connaissance des directives et de leurs différences est une compétence importante d'un concepteur d'applications mobiles.

Quelles autres différences connaissez-vous? Partagez-les dans les commentaires.

32 différences dans la conception d'une application mobile pour iOS et Android