UI/UX et composants dans le développement mobile : ce qu'ils sont, types et comment les utiliser

Systèmes de conception : Material Design et Human Interface Guidelines

Chaque plateforme propose son propre ensemble de règles et de composants. Pour Android, c'est Material Design, développé par Google en 2014. Material Design utilise la métaphore du matériau physique — couches, ombres (Elevation), transitions animées et mises en page adaptatives. Les principes clés incluent la hiérarchie par élévation, le mouvement significatif et l'adaptabilité à différents facteurs de forme. Nous recommandons d'explorer Material Design 3 (Material You) — la dernière version avec thème dynamique et couleurs personnalisées.

Apple propose les Human Interface Guidelines (HIG) — un ensemble de règles pour iOS, iPadOS, macOS, watchOS et tvOS. Les HIG mettent l'accent sur une typographie claire (San Francisco), Safe Area pour prendre en compte le Notch et Dynamic Island, la navigation gestuelle et la cohérence. Contrairement à Material Design, les HIG n'utilisent pas de « couches » ni d'Elevation — elles utilisent plutôt le flou (vibrancy), les ombres et les séparateurs subtils. La documentation complète des HIG est régulièrement mise à jour avec les nouvelles versions d'iOS.

Chez IT Sectr, nous utilisons les deux systèmes de conception selon la plateforme du client. Pour les projets multiplateformes Flutter, nous développons un système de conception unifié combinant les meilleures pratiques de Material Design et des HIG. Cette approche préserve une UX native sur chaque plateforme sans duplication de code.

Frameworks d'UI déclaratifs : SwiftUI et Jetpack Compose

L'approche traditionnelle de construction d'UI est la mise en page impérative via XML (Android) ou Interface Builder / code (iOS). L'alternative moderne est les frameworks déclaratifs, où le développeur décrit à quoi l'interface doit ressembler dans chaque état, et le framework gère les mises à jour.

Jetpack Compose (Android)

Jetpack Compose est une boîte à outils moderne de Google pour construire une UI native en Kotlin. Au lieu de mises en page XML, des fonctions composables Kotlin (@Composable) sont utilisées. Compose est entièrement déclaratif : lorsque les données changent, seules les parties modifiées de l'écran sont redessinées. Exemple d'un écran simple avec du texte et un bouton :

@Composable
fun GreetingScreen() {
    var count = remember { mutableStateOf(0) }
    Column {
        Text(text = "Нажато: $count")
        Button(onClick = { count++ }) {
            Text("Нажми меня")
        }
    }
}

SwiftUI (iOS)

SwiftUI est le framework déclaratif d'Apple présenté en 2019. Il fonctionne sur toutes les plateformes Apple (iOS, iPadOS, macOS, watchOS, tvOS) via une API unifiée. SwiftUI utilise des structures View, des propriétés @State et @Binding pour la gestion des données et des modificateurs pour le style. L'équivalent de l'exemple ci-dessus en SwiftUI :

struct GreetingView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("Нажато: \(count)")
            Button("Нажми меня") {
                count += 1
            }
        }
    }
}

Flutter Widgets

Flutter de Google utilise sa propre bibliothèque de widgets. Tout dans Flutter est un widget — du padding à un écran entier. Les widgets sont divisés en StatelessWidget (immuables) et StatefulWidget (avec état). Les conteneurs de base sont Container, Row, Column, Stack. Flutter n'utilise pas de composants natifs de la plateforme — il dessine tout via Skia Engine, garantissant une apparence cohérente sur Android et iOS.

class GreetingWidget extends StatefulWidget {
    @override
    State createState() => _GreetingWidgetState();
}
class _GreetingWidgetState extends State<GreetingWidget> {
    int count = 0;
    @override
    Widget build(BuildContext context) {
        return Column(
            children: [
                Text('Нажато: $count'),
                ElevatedButton(
                    onPressed: () => setState(() => count++),
                    child: Text('Нажми меня'),
                ),
            ],
        );
    }
}

Composants d'UI natifs pour Android et iOS

Malgré la prolifération des frameworks déclaratifs, comprendre les composants natifs reste important pour la prise en charge des projets hérités et la personnalisation avancée.

Navigation

La navigation sous Android est basée sur Activity (écrans d'activité) et Fragment (fragments dans une même Activity). Jetpack Navigation Component simplifie les transitions entre les écrans via un graphe de navigation. Sous iOS, la navigation est implémentée via NavigationController — une pile de contrôleurs avec des transitions animées. Tab Bar et Bottom Navigation permettent de basculer entre les sections principales de l'application. Drawer (menu latéral) et Toolbar/ActionBar sont utilisés pour les actions supplémentaires. Android Navigation Component est recommandé pour tous les nouveaux projets.

Listes

Pour afficher de grandes quantités de données, Android utilise RecyclerView — un conteneur efficace avec réutilisation des ViewHolder. Les équivalents iOS sont UITableView (listes verticales) et UICollectionView (grilles). Jetpack Compose propose LazyColumn et LazyVerticalGrid, tandis que SwiftUI fournit List et LazyVStack/LazyHStack. L'avantage clé des composants Lazy est le rendu uniquement des éléments visibles.

Mises en page et positionnement

Le système de vues Android propose plusieurs conteneurs de mise en page : ConstraintLayout (système de contraintes flexible), LinearLayout (disposition linéaire), RelativeLayout (positionnement relatif), FrameLayout (superposition de couches). Sous iOS, Core Auto Layout utilise un système de contraintes (NSLayoutConstraint) pour décrire le positionnement des éléments. SwiftUI et Flutter utilisent respectivement VStack/HStack/ZStack et Row/Column/Stack.

Unités de mesure et mise en page responsive

Les composants d'UI des appareils mobiles sont affichés en tenant compte des différentes densités de pixels. Pour que l'interface soit identique sur tous les écrans, des unités indépendantes de la densité sont utilisées.

Les densités d'écran sont classées comme suit : mdpi (160 dpi, 1x), hdpi (240 dpi, 1.5x), xhdpi (320 dpi, 2x), xxhdpi (480 dpi, 3x), xxxhdpi (640 dpi, 4x). Lors de la préparation des images, vous devez créer des ressources pour toutes les densités : icon.png, icon_hdpi.png, icon_xhdpi.png, etc. Les formats vectoriels (VectorDrawable sur Android, SF Symbols sur iOS) résolvent le problème des multiples ressources raster.

Chez IT Sectr, nous utilisons un facteur d'échelle pour exporter les icônes depuis Figma : nous exportons en 1x, 2x, 3x pour iOS et mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi pour Android. Cela garantit un affichage net sur tous les appareils, y compris les tablettes et les smartphones pliables.

Concepts modernes d'UI : Mode sombre, Safe Area, Accessibilité

Les composants d'UI d'applications mobiles modernes doivent prendre en charge un certain nombre de normes, sans lesquelles l'expérience utilisateur serait incomplète.

Mode sombre / Mode clair

Mode sombre est une option obligatoire dans les applications modernes. Material Design 3 et iOS 13+ offrent une prise en charge intégrée du thème sombre. Il est important de ne pas inverser les couleurs, mais d'utiliser des palettes de couleurs séparées : fond sombre, texte clair, contraste réduit pour les éléments secondaires. Le basculement automatique peut être lié au thème système de l'appareil.

Safe Area et prise en charge du Notch / Dynamic Island

Les iPhones modernes ont un Notch (découpe pour la caméra frontale) et Dynamic Island. Les appareils Android ont également des découpes et des coins arrondis (Corner Radius). Safe Area est la zone de l'écran garantie exempte d'éléments système (barre d'état, indicateur d'accueil), de barre de navigation et de découpes. iOS applique automatiquement Safe Area Insets ; Android nécessite une vérification explicite via WindowInsets ou DisplayCutout.

Accessibilité (a11y)

L'accessibilité garantit l'utilisabilité de l'application pour les personnes handicapées. Exigences clés : prise en charge de TalkBack (Android) et VoiceOver (iOS), contentDescription correct pour ImageView, contraste de couleur suffisant (minimum 4.5:1 pour le texte), prise en charge de Dynamic Type (iOS) pour le redimensionnement des polices, navigation sans vision et alternatives aux gestes. WCAG 2.1 est la norme internationale d'accessibilité.

Mondialisation et localisation (i18n / l10n)

L'internationalisation (i18n) est la préparation de l'application à prendre en charge plusieurs langues et formats régionaux. La localisation (l10n) est la traduction des chaînes, des dates, des devises et des spécificités culturelles. Android utilise des répertoires de ressources (values-ru, values-de), iOS utilise Localizable.strings et XLIFF. Flutter prend en charge flutter_localizations avec des fichiers de traduction ARB.

Gestes et interaction

L'interaction tactile comprend de nombreux gestes : Tap (toucher), Long Press (appui long), Swipe (balayage), Pinch-to-Zoom (pincer pour zoomer), Pull-to-Refresh (tirer pour actualiser), Drag-and-Drop (glisser-déposer). Android utilise GestureDetector, iOS utilise UIGestureRecognizer. iOS prend également en charge 3D Touch (Force Touch) et Haptic Touch avec retour haptique via le Taptic Engine.