Application mobile

Conception d’application de collection marine

Abyssal Log relie une collection de spécimens marins à des missions de plongée. Chaque fiche inconnue explique la tâche à accomplir et la progression restante nécessaire pour la révéler.

OpenDesignConception et production
Officiel
Découverte et collection en eaux profondes4 écrans
Conception d’application de collection marine : spécimen actuel et carte de découverte Conception d’application de collection marine : missions de plongée et conditions de découverte
Spécimen actuel et carte de découverte · Missions de plongée et conditions de découverte

LLM Arena sept. 2026

Notes de cas
Modèle
Claude Opus 5
Tâche de design
Application de collection de cartes de créatures des grands fonds
Résultat
Application mobile

Conçu pour

  • Applications de collection de spécimensRelier un catalogue visuel à des fiches de découverte utiles.
  • Interfaces fondées sur des missionsAfficher le travail restant avant qu’un élément ne devienne disponible.
  • Produits mobiles d’apprentissageSéparer les données de découverte des informations de référence plus longues.

Points forts

  • Un spécimen mis en avantUne image mène vers la rareté, la profondeur de découverte et l’heure de l’observation.
  • Deux façons de parcourir la collectionLa région océanique et la rareté organisent une même collection.
  • Des missions de plongée mesurablesLes maintiens, les passages et les échantillons rendent concrète la progression de chaque tâche.
  • Des conditions de déverrouillage explicitesLes fiches inconnues indiquent la mission et le travail restant à accomplir.

Une application de collection marine qui explique chaque découverte

Abyssal Log commence par un spécimen mis en avant plutôt que par un mur de petites cartes. Dans l’état capturé, la méduse Atolla apparaît au-dessus de son nom scientifique, de sa rareté, de sa profondeur de découverte et de l’horodatage de sa première observation. View record et Dive se trouvent sous ces informations. Une action approfondit la fiche actuelle ; l’autre mène vers le travail qui enrichit la collection.

L’en-tête indique 11 / 18 enregistrés, et la collection ci-dessous comprend à la fois des créatures découvertes et des fiches Unknown. La page expose ainsi la taille de la collection avant qu’elle ne soit complète. Les cartes inconnues ne sont pas de simples silhouettes décoratives : elles indiquent une mission et la condition restante, donnant un rôle pratique à une fiche inachevée.

L’écran complet de la méduse Atolla mise en avant présente son image, sa rareté, sa profondeur de découverte, l’heure de l’observation ainsi que les actions d’accès à la fiche et de plongée.
L’écran complet de la méduse Atolla mise en avant présente son image, sa rareté, sa profondeur de découverte, l’heure de l’observation ainsi que les actions d’accès à la fiche et de plongée.

Séparer les données de découverte des informations de référence

La carte mise en avant et la fiche complète partagent la même identité, mais répondent à des questions différentes. La carte résume cette découverte. La fiche ajoute un libellé de véhicule, une plage de profondeurs, une taille et une description. Cette distinction est particulièrement utile pour la conception de guides de terrain, où une observation individuelle et une caractéristique générale de l’espèce ne doivent pas être confondues.

Rôles différents des champs de la fiche de la méduse Atolla
ChampExemple capturéRôle dans l’interface
Profondeur de découverte1,560 mDécrit l’observation de l’échantillon associée à cette fiche.
Plage de profondeurs1,000–4,000 mFournit une plage de référence plus large, et non la profondeur de cette découverte précise.
Première observation11 août 2025 · 21:33Situe la fiche de démonstration dans le temps.
VéhiculeROV VentanaAjoute du contexte à l’observation de l’échantillon sans modifier l’identité du spécimen.
TailleOmbrelle env. 15 cmFournit un autre type d’information de référence avec une unité explicite.

Transformer un spécimen inconnu en mission concrète

L’écran Expeditions contient sept tâches utilisant différentes unités de progression. Twilight zone station hold est déjà à 3 / 3 maintiens et propose Complete and unlock. Large cephalopod sonar trace est à 5 / 6 passages et propose Log a dive · +1. La différence entre ces actions rend visible l’étape suivante avant même que l’utilisateur appuie dessus.

Ces unités comptent. Trois maintiens, six passages et cinq profils ne sont pas des points de progression interchangeables. En nommant la tâche et en conservant son unité, l’interface donne à la barre de progression une signification compréhensible. Une mesure terminée et une fiche déverrouillée sont également deux états distincts : la tâche prête demande encore au visiteur de réclamer la découverte.

L’écran complet des missions oppose une tâche dont la condition est remplie à des tâches encore en cours, en conservant l’unité de chaque mission et la fiche qu’elle déverrouille.
L’écran complet des missions oppose une tâche dont la condition est remplie à des tâches encore en cours, en conservant l’unité de chaque mission et la fiche qu’elle déverrouille.

Relier la carte verrouillée à sa condition

Unknown · 004 indique Twilight zone station hold et précise 0 holds to go. L’écran des missions propose ensuite Complete and unlock. Le lien entre ces libellés aide le visiteur à comprendre pourquoi une carte peut rester inconnue alors que sa mesure est terminée : l’action finale de déverrouillage n’a pas encore été effectuée.

Utiliser une action différente pour un état différent

Log a dive · +1 communique une progression par étapes ; Complete and unlock communique le passage dans la collection. Conserver ces libellés distincts est plus utile que d’afficher le même bouton sur chaque carte et de laisser le visiteur découvrir ce qu’il fait.

Donner à la navigation ses propres contrôles

Les filtres par région océanique et par rareté appartiennent à la collection de spécimens, tandis que la progression des tâches appartient à Expeditions. Cette séparation distingue la recherche d’une fiche existante du travail nécessaire pour en obtenir une nouvelle. Une adaptation doit préserver cette distinction lors de l’ajout d’une recherche, de résultats vides ou d’une liste de missions plus importante.

Ce que démontre ce prototype d’application marine

Abyssal Log est un prototype local de collection et de missions. La source identifie explicitement les horodatages d’observation et les véhicules comme des fiches de démonstration. Sa biologie, ses niveaux de rareté et ses valeurs de profondeur ne sont pas des références scientifiques vérifiées indépendamment. L’aperçu isolé ne dispose ni d’un flux d’expédition en direct ni d’un compte cloud. Les images fournies sont conservées pour une vérification locale ; les autorisations de redistribution doivent faire l’objet d’une vérification distincte avant toute utilisation publique.

Créer une conception d’application de collection marine dans OpenDesign

  1. Télécharger et installer OpenDesign

    Téléchargez l'application de bureau, installez-la et finalisez la configuration. Créez un projet pour votre design.

    Télécharger OpenDesign
  2. Définir la relation entre spécimen et mission

    Commencez par un petit catalogue et une règle claire pour révéler chaque fiche inconnue. Utilisez le prompt de conception suivant comme point de départ pratique, et non comme une affirmation sur le processus du créateur original.

    Invite suggérée

    Créez une conception d’application de collection marine avec dix-huit spécimens d’exemple, dont onze sont initialement enregistrés. Utilisez une interface mobile sombre avec une touche turquoise et une grande carte de spécimen mis en avant. Affichez le nom commun, le nom scientifique, la rareté, la profondeur de découverte et l’heure de la première observation, avec les actions « View Record » et « Dive ». En dessous, proposez des filtres par région et par rareté, et gardez les fiches inconnues visibles. Chaque fiche inconnue doit indiquer la mission et la condition restante nécessaires pour la déverrouiller. L’écran « Expeditions » doit utiliser des unités de progression distinctes, telles que les maintiens, les passages et les échantillons. Incluez une tâche dont la condition est remplie, mais dont la fiche n’a pas encore été réclamée. Utilisez « Complete and Unlock » pour cet état et « Log a Dive » pour les tâches incomplètes. La vue détaillée du spécimen doit distinguer la profondeur de découverte d’une plage de profondeurs de référence. Indiquez que les observations et la progression des missions sont des données fictives de démonstration, sans service scientifique en direct ni compte cloud.

  3. Examiner les états prêt, incomplet et réclamé

    Demandez à OpenDesign d’afficher les trois états pour une même mission. L’unité affichée doit rester identique à mesure que la progression augmente. La réclamation de la tâche terminée doit révéler la fiche prévue une seule fois et mettre à jour le nombre d’éléments enregistrés sans réinitialiser les autres découvertes.

  4. Vérifier la lisibilité des fiches sur téléphone

    Utilisez un nom scientifique long et un objectif de progression à trois chiffres. Gardez les libellés, les unités et les actions lisibles sans les recouvrir avec la navigation inférieure. Faites tenir l’image du spécimen dans son cadre sans recadrer le sujet, et permettez à la fiche détaillée plus longue de défiler.

  5. Exporter et obtenir un lien de partage

    Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows