🧑‍🏫 3.2 Rappel UX mobile & composants Ionic

Ce qu’on va voir

• Rappel express des bases UX mobile
• La philosophie d’Ionic (composants adaptatifs)
• Les composants fondamentaux d’Ionic-Vue
• La structure type d’une page
• 🧩 Une petite activité pratique

💭 3.2.1 – Rappel ultra-court UX mobile

Principes essentiels à garder en tête :

• Lisibilité

  • Texte suffisamment grand
  • Bons contrastes
  • ➜ Un écran = une idée principale

• Zones tactiles

  • Min. 44×44px (Apple) / 48×48dp (Android)
  • Espacer les éléments cliquables

• Navigation simple

  • Parcours clair
  • Pas trop de profondeur dans les menus

• Feedback immédiat

  • État pressé
  • Messages d’erreur
  • Loaders / skeletons

🎨 Pourquoi ça compte pour Ionic ?

Ces contraintes UX expliquent pourquoi :

• Ionic suit :

  • Material Design (Android)
  • Cupertino / Human Interface Guidelines (iOS)

• Les composants ion-... sont pensés pour :

  • être lisibles
  • faciles à toucher
  • cohérents avec chaque OS

🎯 Objectif : vous concentrer sur la logique et l’UI, sans réinventer les composants natifs.

🎨 3.2.2 – Philosophie d’Ionic

Ionic fournit des composants UI (ion-...) qui :

• adoptent automatiquement le look Android sur Android
• adoptent automatiquement le look iOS sur iPhone
• s’affichent de façon homogène dans un simple navigateur

Exemples de variations selon la plateforme

• ion-button ➜ arrondi plus léger sur iOS, plus “carré” sur Android
• ion-tab-bar ➜ souvent en bas sur iOS, plus variable sur Android
• ion-toolbar ➜ hauteurs, ombres, marges différentes

Vous :

• écrivez un seul code
• laissez Ionic appliquer les bonnes conventions natives

👉 Pas besoin de refaire tout le design : Ionic s’en occupe pour vous.

🧱 3.2.3 – Composants UI fondamentaux

Catégories principales de composants Ionic :

1. Structure & layout
2. Contenu & affichage
3. Formulaires & interactions
4. Feedback utilisateur
5. Navigation (intro)

On les détaillera dans les projets, mais retenez déjà les noms.

🧱 Structure & layout

Composants de base :

• ion-app ➜ conteneur racine de l’app, styles globaux
• ion-page ➜ représente une page complète
• ion-header ➜ zone supérieure (titre, actions)
• ion-toolbar ➜ barre d’outils (boutons, titre)
• ion-content ➜ zone principale scrollable

🧠 Sans cette structure, Ionic ne peut pas gérer correctement les transitions & le scroll.

📦 Contenu & affichage

Quelques composants fréquents :

• ion-card, ion-card-header, ion-card-title, ion-card-content ➜ bloc de contenu “carte”
• ion-list + ion-item ➜ listes d’options, de paramètres, etc.
• ion-label ➜ texte associé à un item / input
• ion-text ➜ texte avec styles spécifiques

👉 Vous les utiliserez tout le temps.

📝 Formulaires & interactions

Pour saisir et interagir :

• ion-input
• ion-textarea
• ion-toggle
• ion-checkbox
• ion-button
• ion-radio
• ion-icon

🧪 Couplés avec Vue (v-model, événements), ce sont vos briques d’interaction principales.

⚠️ Feedback utilisateur & navigation

Feedback :

• ion-alert
• ion-toast
• ion-loading

Navigation (aperçu) :

• ion-tabs
• ion-tab-bar
• ion-tab-button

ℹ️ La navigation complète sera vue en détail au chapitre 3.5.

📋 3.2.4 – Structure type d’une page Ionic-Vue

Structure minimale recommandée :

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Ma Page</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <!-- Contenu principal ici -->
    </ion-content>
  </ion-page>
</template>

Imports côté script

<script setup lang="ts">
// Importer les composants Ionic nécessaires
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent
} from '@ionic/vue'
</script>

3.2.4 – Rôle de chaque élément

• ion-page ➜ une page complète, gérée par le router & les transitions
• ion-header + ion-toolbar ➜ barre du haut : titre, actions, menus, boutons retour
• ion-content ➜ zone scrollable, coeur de l’écran

💭 Ionic a besoin de cette structure pour : – appliquer les bons styles – gérer le scroll / “safe area” – animer les transitions entre pages

🧩 3.2.5 – Activité : créer une première page structurée

🎯 Objectif : modifier une page existante pour utiliser les composants vus ci-dessus.

Consignes

1. Utilisez le projet Ionic-Vue créé à l’étape 3.1.4

2. Ouvrez Tab1Page.vue

3. Dans ion-content, ajoutez :

   • une carte avec titre + texte
   • une liste avec plusieurs ion-item
   • un bouton qui affiche un message dans la console (console.log)

4. 🏆 Bonus : afficher un toast quand on clique sur le bouton

🧩 3.2.5 – Rappel commande

Pour lancer le projet en local :

ionic serve

• Ouvre l’app dans le navigateur
• Recharge automatiquement au changement de fichier

🧩 3.2.5 – Démo visuelle

Résultat attendu (exemple) :

💡 Ne cherchez pas à copier exactement le design : l’important est d’utiliser les bons composants Ionic.