Share
Que vous travailliez en interne, sous-traitent ou pour une agence, les entreprises ont besoin d'applications pour de nombreuses raisons. Les entreprises établies en particulier doivent répondre aux besoins de leurs clients existants et des appareils qu’elles utilisent. Souvent, cela signifie une nouvelle application pour Android et iPhone..
Dans un monde idéal, nous passerions des mois à concevoir deux applications. Mais en réalité, de nombreux projets ne permettent pas autant de temps. Pour toutes les applications sur lesquelles j'ai travaillé, le délai a été suffisamment court pour concevoir une application, sans parler de la division complète du projet en deux..
Très souvent, vous concevez une seule application, avec des ajustements avant d’être confiée à deux équipes de développement. Si vous concevez une application de cette manière, il est important de comprendre très tôt la différence entre les deux plates-formes et les moyens rapides de rendre l'expérience ressentie comme native pour chacune d'elles..
Il est probable que vous aurez une préférence personnelle pour un système. J'ai toujours utilisé l'iPhone, ce qui me donne une compréhension plus naturelle des modèles d'interface utilisateur sur iOS. La première chose à faire est de vous familiariser avec l’autre plate-forme, et le meilleur moyen de le faire est d’acheter un autre appareil, un Android dans mon cas. Cela pourrait même être une bonne idée de l'utiliser comme votre principal appareil pendant toute la durée du projet, pour vraiment avoir une idée de la plateforme..
Si vous travaillez en interne, demandez-leur de vous acheter un appareil de test. En cas de problème, indiquez à la direction que la compréhension de la plate-forme alternative apportera une valeur ajoutée à votre travail de conception (le coût est onéreux pour deux appareils de votre poche, mais pour une entreprise, les dépenses sont faibles par rapport à la dépense de conception et développement d'une nouvelle application). Si vous travaillez à la pige, vous devriez pouvoir le déduire de votre facture d'impôt..
Comme nous concevons les deux plates-formes à la fois, tout en traitant du monde réel où le temps est limité, vous devrez accepter la réalité de la priorité que vous accordez à une plate-forme. Faites cette décision non pas en fonction de vos préférences personnelles, mais en fonction du marché de votre application. Est-ce que plus de gens sur votre marché utilisent des téléphones Android? Est-ce une application payante? Quel est le public cible? Poser ces questions vous aidera à choisir ce qui est préférable.
Lisez les directives de l'interface utilisateur pour Android et iOS. Dans le passé, Apple était connu pour être plus strict avec leurs directives. Pour obtenir une application dans la boutique d'applications, un processus d'approbation prend environ deux semaines. Il n'y a pas de processus d'approbation pour le Play Store. Cependant, en raison de cette barrière inférieure à l'entrée sur Android, la qualité de la conception a toujours été moins bonne. Google cherche à changer cela avec ses directives de conception de matériaux.
L'esthétique Material Design est devenue très familière aux concepteurs webIl existe de nombreux bons kits d’interface utilisateur gratuits que vous pouvez utiliser pour vos projets (vous en trouverez quelques-uns à la fin de cet article). L'utilisation de ces composants donnera naturellement à votre application une sensation native. Mais même lorsque vous recevez les kits d’interface utilisateur, il peut être difficile de savoir où différer et où rester le même d’une plate-forme à une autre, c’est là que je veux aider..
Suivez ces étapes simples et votre application sera sur la bonne voie pour s'intégrer à la fois sur les appareils Android et iOS..
Depuis iOS7, Apple a adopté un style plus plat et a abandonné les ombres, les textures et les effets skeuomorphic qui ont défini les premières années de l'iPhone. Android, dont le style était plus systématique au début, a légèrement changé. Les nouvelles directives de Google relatives à la conception de matériaux créent des références plus subtiles au monde réel, avec une approche «papier» en couches offrant plus de hiérarchie..
Les téléphones Android ont un bouton de retour, qui peut être utilisé pour revenir aux écrans précédents de l'application.
RevenirLes iPhones n'ont pas ce bouton, il doit donc y avoir un moyen de revenir à l'écran précédent. Cela se fait généralement par un chevron «arrière» en haut à gauche de l'écran, mais doit être pris en compte tout au long des différents trajets de votre application..
Il existe des éléments globaux (comme une barre d'état et un en-tête) qui apparaissent sur toutes les pages de votre conception. Vous ne devriez absolument pas changer la hauteur ou le style de ces barres si vous voulez que l'application se sente native, je vous recommande donc de les définir une fois dans la conception de la première page pour chaque plate-forme. Ensuite, vous pouvez utiliser un espace réservé (ou le statut et la barre supérieure de votre système d'exploitation principal) sur chacune de vos maquettes, mais indiquez aux développeurs qu'il devrait être identique dans tous les cas..
Il existe de légères différences entre les barres de navigation sur chaque plate-forme. Sur Android, le texte est aligné à gauche, alors que pour iOS, il est centré. Sur iOS, de nombreuses entreprises remplacent le titre de la page principale par le logo de leur entreprise, mais ce n'est pas la meilleure pratique sur Android. La barre d'état (avec vos informations sur le réseau, la batterie et l'heure) est un composant natif et vous n'avez pas besoin de tenir compte de sa conception. Assurez-vous simplement lors de la présentation des maquettes d'utiliser le bon modèle pour éviter toute confusion ou distraction..
La navigation constitue peut-être le principal point de différence entre les plateformes iOS et Android. Le modèle de navigation principal sur Android est un menu de tiroir. Les utilisateurs d'Android y vont naturellement pour les éléments de menu, qui ont tendance à être omniprésents tout au long de l'expérience. Les directives d'Apple sont plus favorables à une barre d'onglets, située au bas de l'écran, permettant un accès facile aux zones de niveau supérieur de l'application. Lorsque vous décidez de l'architecture de niveau supérieur de votre application, vous pouvez planifier deux menus distincts pour les deux plates-formes..
Penser à l'architecture de l'application est sans doute plus important que la disposition des menus - un argument que j'ai déjà mentionné dans un autre article à propos de certaines de ces questions. Si votre structure est saine, la navigation suivra.
Comme vous le voyez ici, il existe deux modèles de navigation: un menu de tiroir pour Android et une barre de tabulation pour iOS. Il est parfois plus facile de simplement masquer la couche de navigation pendant que vous travaillez sur des vues individuelles..
Les cartes sont en train de devenir le principal modèle d’interface utilisateur en conception numérique. Ils sont polyvalents et permettent aux utilisateurs de consommer rapidement des contenus adaptés aux comportements des mobiles. Visuellement, les cartes s'intègrent très bien dans la conception matérielle d'Android (inspirée du papier). Utiliser des ombres portées et des gouttières raisonnables entre les cartes créera une apparence naturelle.
Sur iOS, l’utilisation de cartes nécessite plus de soin et de considération. Même les grandes applications comme Facebook et Pinterest utilisent les cartes de manière légèrement désaccordée avec les consignes iOS. Les directives iOS suggèrent d'utiliser la profondeur dans les transparents et les superpositions, mais la vue de base est généralement plus plate. Instagram utilise un style de conception entièrement plat, bien que chaque message puisse être considéré comme une carte d'un point de vue architectural. Cela vaut la peine de regarder comment Instagram acquiert la même sensation de composant dans un style iOS. Si vous utilisez des cartes sur iOS, soyez très doux avec toute utilisation d'ombre et essayez de les garder aussi subtiles que possible..
Cartes pour Android et iOS, certaines dimensions prêtent un peu plus cherHelvetica Neue est la famille de polices système sur iOS. Sur Android, c'est Roboto. Bien que le style des polices de caractères soit sensiblement différent, les métriques des polices sont assez similaires. Si vous gagnez du temps, vous serez suffisamment en sécurité pour travailler avec un seul, mais vous demanderez aux développeurs d'implémenter la bonne police pour le système. Lorsque vous travaillez avec des mises en page importantes et des tailles de caractères extrêmes, il est conseillé de tester au moins votre mise en page avec les deux polices..
Si vous voulez faire un effort supplémentaire, vous devrez porter une attention particulière aux conventions typographiques et de présentation de chaque plate-forme, en vous référant à nouveau aux instructions ci-dessus. Quelques généralisations:
Ceci est un exemple très simple, pour souligner comment même de manière simple, la typographie peut immédiatement vous indiquer si vous utilisez une application Android ou iOS..
iOS (44px @ 1x) et Android (48dp - 48px à un ratio de 1: 1) ont des directives légèrement différentes pour les cibles tactiles. Les directives de conception des matériaux suggèrent également d’aligner tous les éléments sur une grille carrée de 8dp.
Dans le dernier projet sur lequel j'ai travaillé, nous avons trouvé plus prudent de suivre ces directives Android, car (a) la cible tactile plus large de 48px est sans danger pour les deux plates-formes et (b) la présentation de la conception du matériau est plus précise et à jour. Dans tous les cas, vous aurez besoin d’une grille, mais avec Android plus défini, nous avons trouvé que 8dp fonctionnait bien. Cela signifie que vous devez configurer votre document avec des incréments de 8dp dans les plans horizontal et vertical afin de créer une disposition en grille en mosaïque..
Plusieurs styles de bouton sont définis dans la conception du matériau:
Comparées à Material Design, les applications iOS ont généralement une apparence plate, n'utilisant ni la profondeur ni les ombres portées. Les boutons principaux ont une couleur de remplissage, tandis que les boutons secondaires sont inversés en utilisant un trait de la même couleur. Cette métaphore peut devenir quelque peu limitée, surtout par rapport aux onglets et autres éléments à suivre. Pour obtenir ce style très plat, il est important de disposer de métaphores claires et cohérentes sur la signification des couleurs dans votre application..
iOS dispose également d'un bouton de style de texte brut, mais il ne partage pas le style majuscule d'Android et son poids de police est plus léger..
Les feuilles d'action permettent aux utilisateurs de choisir parmi une multitude d'actions parmi un élément de l'interface utilisateur. Par exemple, lorsque je touche (ou appuie longuement) sur une image, je peux partager, télécharger, copier ou supprimer la photo..
iOS et Android traitent cela de manière légèrement différente. Tout d’abord, il existe des feuilles d’action similaires qui s'affichent à partir du bas de l’écran, en superposition sur la vue actuelle..
Avec les feuilles d'action, les superpositions et les alertes, iOS et Android utilisent différents détails pour indiquer la profondeur dans les couches:
Existant uniquement sur Android, il s’agit d’une méthode rapide de sélection. Gardez toutefois à l'esprit qu'il n'existe pas d'équivalent iOS natif. Dans l'exemple ci-dessous, l'utilisateur appuie sur «profil» à l'étape 1 et se voit présenter un menu simple à cet emplacement pour choisir l'un des profils disponibles. Ces menus sont également utilisés fréquemment à partir du bouton de superposition dans la barre d’action, indiqué par trois points verticaux..
Pour des entrées particulières telles que la date et l'heure, Android est désormais livré avec des dialogues intégrés. Celles-ci ressemblent à des fenêtres d’alerte, mais avec une interface utilisateur spécialement conçue pour saisir ce type de données. Un exemple de saisie de calendrier est présenté. Android a une superposition optimisée fournie pour entrer une date. iOS traite cela très différemment, en apparaissant comme une roue qui se lève comme une feuille de fond. Soyez prudent dans la planification de ces éléments et communiquez rapidement avec les développeurs sur les composants d'entrée..
Les commandes segmentées permettent de basculer entre différents contenus dans une même vue. Leur utilisation est sensiblement la même, mais ils sont très distinctifs visuellement sur chaque plate-forme, il est donc important d'utiliser le bon style. Sur iOS, il y a trois onglets, de style similaire aux boutons de ligne décrits précédemment. Sur Android, ils sont signalés par un simple soulignement et se voient attribuer beaucoup plus d'espace pour signifier leur interaction..
Il est important d’obtenir le style de ces droits car ils peuvent contrôler des actions importantes telles que l’inscription, l’acceptation des conditions ou même la confirmation du paiement. Nous voulons qu'ils se sentent dignes de confiance et natifs.
Les alertes Android utilisent les styles de bouton plats indiqués précédemment, dont les dimensions figurent dans les instructions de conception des matériaux. Les actions se situent en bas à droite de l'alerte. Les «boutons» sont en réalité entièrement basés sur du texte. Ils utilisent tous les majuscules pour leur donner plus de structure et portent la couleur d'action principale de votre application..
Sur iOS, les actions sont séparées par des diviseurs. Ils se trouvent généralement en phrase ou en titre, car ils tirent leur structure de blocs séparés. Ils sont centrés dans le champ et, encore une fois, ils hériteront de votre couleur active..
La conception d'icônes est un domaine assez spécialisé dans la conception d'interface utilisateur. Que vous utilisiez des icônes gratuites, fassiez appel à un concepteur d'icônes ou conceviez vous-même les icônes, il existe un style distinct pour chaque plate-forme. iOS a popularisé les icônes de ligne, avec des traits très minces. Les icônes du système Android ont des traits plus épais ou sont des icônes entièrement solides. Dans le passé, les icônes Android utilisaient la perspective ou une torsion en trois dimensions, mais maintenant, leurs directives spécifient des icônes en deux dimensions vues directement. Voici un exemple rapide avec plusieurs icônes pour la comparaison, ou utilisez les liens directs vers les instructions relatives aux icônes pour Android ou iOS
Malchanceux 13. Il y a quelques détails d'interface utilisateur qui peuvent glisser à travers les mailles du filet. Les plus courantes, comme les alertes et les icônes de chargement, sont souvent laissées aux développeurs. Vous avez peut-être déjà vu des filous voyous et des alertes étranges qui ont semblé dérégler le reste de l'application. Il existe généralement des solutions natives pour ces solutions, mais elles peuvent être adaptées au style de votre application. C’est certainement un domaine dans lequel la collaboration avec les développeurs est le meilleur moyen de décider de la façon dont votre travail devrait fonctionner..
Les boutons radio, les cases à cocher, les champs et les commutateurs sont des composants fonctionnels auxquels il convient de donner une apparence native. Comme pour les alertes et les dialogues, ces commandes et entrées constituent un domaine de confiance et de familiarité pour l'utilisateur. Utilisez autant que possible les composants natifs pour que ceux-ci puissent (a) savoir comment les utiliser et (b) faire confiance à votre application avec leurs données confidentielles ou leurs détails de paiement..
Dans l'exemple ci-dessous, nous voyons des équivalents de commutateur et de bouton radio pour Android et iOS. Encore une fois, les différences sont suffisamment petites pour que vous puissiez progresser avec un design et modifier l’autre plus tard, mais les différences subtiles sont essentielles pour un look natif. Utilisez votre kit d'interface utilisateur autant que possible pour ces composants et communiquez à nouveau avec les développeurs dès le début du processus..
Android (à gauche) et iOS (à droite)Il n’est pas impossible de créer une impression native pour votre application sur iOS et Android avec un seul et même design. Essayez de vous tenir au courant de ces modifications dès le début, gardez un œil sur les composants qui ne se sentent pas synchronisés sur une plate-forme et travaillez toujours aussi étroitement que possible avec les développeurs..
J'espère que cet article vous donnera des réponses rapides sur les points de divergence dans la conception de deux applications, mais vous aurez également besoin d'outils et de modèles pour exécuter correctement votre conception. Il existe de nombreuses ressources couramment disponibles que vous pouvez utiliser comme point de départ. Voici certaines des meilleures:
Si vous souhaitez en savoir plus, vous trouverez une grande partie des informations que vous avez fournies dans les instructions de la plateforme. Ils sont assez volumineux, je viens donc de sortir les éléments qu'il est important de comparer. Mais si vous avez des questions plus spécifiques, c’est le meilleur endroit pour commencer:
Ces kits d’interface utilisateur vous éviteront de recréer des contrôles natifs de base et des tailles correspondantes. Vous pouvez extraire les morceaux dont vous avez besoin, puis basculer entre eux pour les sorties Android et iPhone de vos créations..
Même si vous créez vos propres icônes ou que vous les mettez en service, il est utile d’avoir des espaces réservés pendant que vous travaillez. La conception d'icônes peut être un travail en soi et vous ne voulez pas que les icônes vous ralentissent pendant que vous obtenez une idée globale de votre application. J'ai récemment trouvé les liens ci-dessous sur icons8 plutôt bien, ou flaticon.com est génial pour des icônes plus générales.
Il est toujours utile de disposer de maquettes de périphériques pour présenter votre application. Ceux-ci viennent dans beaucoup de catégories. Vous voudrez peut-être une maquette d'appareil de base pour le contexte, un appareil plat simplifié pour laisser briller votre application ou une maquette de mode de vie pour présenter un cas d'utilisation. Voici quelques ressources que j'ai trouvées utiles, il y en a beaucoup plus. En ce qui concerne les appareils Android, faites attention à ce que vous choisissez. Je m'orienterais vers la gamme Nexus, car ce sont les propres téléphones de Google et ne laissera pas présager d'une préférence pour les autres fabricants..
Accentsconagua