Un bon article pour comprendre les caractéristiques et points forts de l’UI de chaque OS, au-delà d’une simple comparaison
Différences de base
-
HIG vs. Material Design
-
Unités : pt vs. dp
-
Écran : 320pt x 568pt vs. 360dp x 640dp
-
Police : San Francisco vs. Roboto
-
Barre de navigation Android
-
Shadow et Elevation dans Material Design
-
Dénomination :
→ Tab bar vs. Bottom Navigation Bar
→ Navigation Bar vs. Top App Bar,
→ Segmented Controls vs. Tabs
→ Alerts vs. Dialogs
→ Touch ID vs. Android Fingerprint
-
Méthodes de navigation de premier niveau
-
Différences entre la tab bar et la barre de navigation inférieure
-
Fonctionnalités particulières des tabs Android
-
Différences dans la manière d’afficher les sous-pages
-
Modèles d’ouverture du tiroir de navigation (Drawer)
-
Différences de comportement lors du défilement
-
Différences dans le fonctionnement de la recherche
Différences entre composants (UI)
- Éléments absents sur iOS
→ Navigation Drawer, Backdrops, Banner, Snackbar, Chips, Bottom App Bar, FABs(Floating Action Button), Bottom Navigation Drawer, Side Sheet, Expanding Bottom Sheet, Standard Bottom Sheet,
- Éléments absents sur Android
→ Page Control, Toolbars, Steppers, Popovers
-
La Status Bar : semblable, mais différente
-
Refresh Content Control vs. Swipe to refresh
-
Différences visuelles des contrôles
-
Différences de forme de la flèche retour et de position du header
-
Différences de l’icône « trois points »
-
Pickers : sur iOS, le sélecteur de date est de type tambour, sur Android il a la forme d’un calendrier classique
-
Différences des champs de texte
→ Sur iOS, le label s’affiche au-dessus du champ puis disparaît à la saisie ; sur Android, il remonte vers le haut lors de la saisie
→ Le bouton d’effacement du contenu est similaire
→ Dans Material Design, la saisie met en valeur le soulignement avec la couleur primaire
-
Context Menus vs. Menus
-
Action View/Activity View vs. Modal Bottom Sheet
-
Edit Menus vs. Text Selection Toolbar
-
Taille des dividers : iOS 0.5pt vs. Android 1dp
Autres différences
-
Taille de la zone de tap : iOS 44x44pt, Android 48x48dp
-
App Store vs. Google Play
-
Le Undo/Redo particulier d’iOS : si l’utilisateur secoue son téléphone, la fonction Undo se déclenche
-
Différences de launch screen : Material autorise le logo de l’app sur l’écran de lancement, mais le HIG ne recommande pas d’utiliser l’écran de lancement à des fins marketing. Il doit servir uniquement de placeholder
-
Éléments supplémentaires de Material Design : Data Format, Data Visualization, Empty States, Offline States, etc.
2 commentaires
Vous êtes une startup et vous vous demandez avec quoi développer votre app ? Ma réponse de base est la suivante :
#1 Si votre service n’a pas absolument besoin d’une app, il suffit souvent de commencer par faire un bon site mobile.
#2 Si une app est indispensable, au début prenez en charge simultanément les plateformes iOS/Android avec React Native ou Flutter.
#3 Quand vous aurez plus d’utilisateurs, plus de développeurs et plus de budget, vous pourrez aussi passer à des apps natives optimisées pour chaque OS. (Swift & Kotlin)
Mais au fond, c’est la même réponse qu’il y a 10 ans.
À l’époque, c’étaient simplement HTML5, Hybrid(Phonegap), Objective C++ & Java...
Aujourd’hui, si vous faites le web avec React, c’est un peu plus pratique grâce à React Native.
Je recommande systématiquement le #1 et le #2, et le #3 reste optionnel.
Cet article comparant les UI est à bien comprendre dans le cas du #3, et il vaut aussi le coup d’œil dans le cas du #2.
Dans la continuité du commentaire laissé par xguru
En revanche, s’il s’agit d’un service qui dépend fortement du matériel, comme l’appareil photo, le GPS ou l’accéléromètre, passez directement au point 3.
(ex. je veux créer une appli de filtre vidéo en temps réel -> #3...)