Aplicación móvil
Diseño de aplicación de colección marina
Abyssal Log conecta una colección de especímenes marinos con misiones de inmersión. Cada ficha desconocida explica la tarea y el progreso restante necesario para revelarla.
LLM Arena sep. 2026
Notas del caso- Modelo
- Claude Opus 5
- Tarea de diseño
- Aplicación de colección de tarjetas de criaturas de aguas profundas
- Resultado
- Aplicación móvil
Diseñado para
- Aplicaciones de colección de especímenesConecta un catálogo visual con registros de descubrimientos útiles.
- Interfaces basadas en misionesMuestra el trabajo restante antes de que un elemento esté disponible.
- Productos móviles de aprendizajeSepara los datos del descubrimiento de la información de referencia más extensa.
Aspectos destacados
- Un espécimen destacadoUna imagen conduce a la rareza, la profundidad del descubrimiento y la hora del avistamiento.
- Dos formas de explorarLa región oceánica y la rareza organizan la misma colección.
- Misiones de inmersión mediblesLas permanencias, las pasadas y las muestras mantienen concreto el progreso de cada tarea.
- Requisitos de desbloqueo explícitosLas fichas desconocidas indican la misión y el trabajo que aún se necesita.
Explora la aplicación de colección marina
1 / 4Una aplicación de colección marina que explica cada descubrimiento
Abyssal Log comienza con un espécimen destacado en lugar de un muro de tarjetas pequeñas. En el estado capturado, Atolla Jelly aparece sobre su nombre científico, rareza, profundidad del descubrimiento y marca temporal del primer avistamiento. View record y Dive aparecen debajo de estos datos. Una acción profundiza en la entrada actual; la otra conduce al trabajo que amplía la colección.
El encabezado muestra 11 / 18 logged, y la colección inferior incluye tanto criaturas descubiertas como entradas Unknown. Por tanto, la página muestra el tamaño de la colección antes de que esté completa. Las tarjetas desconocidas no son simples siluetas decorativas: indican una misión y el requisito restante, lo que da un papel práctico a un registro sin terminar.
Separa los datos del descubrimiento de la información de referencia
La tarjeta destacada y el registro completo comparten la misma identidad, pero responden a preguntas diferentes. La tarjeta resume este descubrimiento. El registro añade una etiqueta del vehículo, un intervalo de profundidad, el tamaño y una descripción. Esta distinción resulta especialmente útil para el diseño de guías de campo, donde no deben confundirse una observación individual y un atributo general de la especie.
| Campo | Ejemplo capturado | Función en la interfaz |
|---|---|---|
| Profundidad del descubrimiento | 1,560 m | Describe el avistamiento de la muestra asociado a este registro. |
| Intervalo de profundidad | 1,000–4,000 m | Proporciona un intervalo de referencia más amplio, no la profundidad de este descubrimiento concreto. |
| Primer avistamiento | 11 Aug 2025 · 21:33 | Sitúa en el tiempo el registro de demostración. |
| Vehículo | ROV Ventana | Añade contexto al avistamiento de la muestra sin cambiar la identidad del espécimen. |
| Tamaño | Bell approx. 15 cm | Aporta otro tipo de información de referencia con una unidad explícita. |
Convierte un espécimen desconocido en una misión accionable
La pantalla Expeditions contiene siete tareas con distintas unidades de progreso. Twilight zone station hold ya está en 3 / 3 holds y ofrece Complete and unlock. Large cephalopod sonar trace está en 5 / 6 passes y ofrece Log a dive · +1. La diferencia entre esas acciones hace visible el siguiente paso antes de que la persona usuaria toque la pantalla.
Estas unidades importan. Tres permanencias, seis pasadas y cinco perfiles no son puntos de progreso intercambiables. Al nombrar la tarea y conservar su unidad, la interfaz da a la barra de progreso un significado comprensible. Una medición completada y un registro desbloqueado también son estados separados: la tarea lista todavía pide a la persona visitante que reclame el descubrimiento.
Conecta la tarjeta bloqueada con su requisito
Unknown · 004 indica Twilight zone station hold y muestra 0 holds to go. A continuación, la pantalla de la misión ofrece Complete and unlock. Vincular estas etiquetas ayuda a la persona visitante a entender por qué una tarjeta puede seguir siendo desconocida aunque su medición esté completa: todavía no se ha realizado la acción final de desbloqueo.
Usa una acción diferente para un estado diferente
Log a dive · +1 comunica un progreso incremental; Complete and unlock comunica una transición a la colección. Mantener diferenciadas esas etiquetas resulta más útil que mostrar el mismo botón en todas las tarjetas y obligar a la persona visitante a descubrir qué hace.
Proporciona controles propios para explorar
Los filtros de región oceánica y rareza pertenecen a la colección de especímenes, mientras que el progreso de las tareas pertenece a Expeditions. Esto separa la búsqueda de un registro existente del trabajo necesario para conseguir uno nuevo. Una adaptación debería conservar esa distinción al añadir búsquedas, resultados vacíos o una lista de misiones más amplia.
Qué demuestra este prototipo de aplicación marina
Abyssal Log es un prototipo local de colección y misiones. La fuente identifica explícitamente las marcas temporales de los avistamientos y los vehículos como registros de demostración. Su biología, sus niveles de rareza y sus valores de profundidad no son referencias científicas verificadas de forma independiente. La vista previa aislada no tiene un flujo de expedición activo ni una cuenta en la nube. Las imágenes proporcionadas se conservan para la revisión local, pero los permisos de redistribución requieren una comprobación independiente antes de su uso público.
Cómo crear un diseño de aplicación de colección marina en OpenDesign
Define la relación entre espécimen y misión
Empieza con un catálogo pequeño y una regla clara para revelar cada ficha desconocida. Usa el siguiente nuevo prompt de diseño como punto de partida práctico, no como una afirmación sobre el proceso de la persona creadora original.
Prompt sugeridoCrea un diseño de aplicación de colección marina con dieciocho especímenes de ejemplo, de los cuales once estén registrados inicialmente. Usa una interfaz móvil oscura con un acento turquesa y una tarjeta grande para el espécimen destacado. Muestra el nombre común, el nombre científico, la rareza, la profundidad del descubrimiento y la hora del primer avistamiento, con acciones Ver registro y Sumergirse. Debajo, proporciona filtros de región y rareza, y mantén visibles las fichas desconocidas. Cada ficha desconocida debe indicar la misión y el requisito restante necesario para desbloquearla. La pantalla Expediciones necesita unidades de progreso diferenciadas, como permanencias, pasadas y muestras. Incluye una tarea cuya condición se haya cumplido, pero cuyo registro todavía no se haya reclamado. Usa Completar y desbloquear para ese estado y Registrar una inmersión para las tareas incompletas. La vista de detalle del espécimen debe separar la profundidad del descubrimiento de un intervalo de profundidad de referencia. Etiqueta las observaciones y el progreso de las misiones como datos ficticios de demostración, sin ningún servicio científico activo ni cuenta en la nube.
Revisa los estados listo, incompleto y reclamado
Pide a OpenDesign que muestre los tres estados para una misión. La unidad mostrada debe mantenerse igual a medida que aumenta el progreso. Reclamar la tarea completada debe revelar el registro previsto una sola vez y actualizar el recuento de registros sin restablecer otros descubrimientos.
Comprueba la legibilidad del registro en un teléfono
Usa un nombre científico largo y un objetivo de progreso de tres cifras. Mantén las etiquetas, las unidades y las acciones legibles sin cubrirlas con la navegación inferior. Haz que la imagen del espécimen encaje en su marco sin recortar el sujeto y permite que el registro de detalle más largo se desplace.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño de app de colección
Abyssal Atlas conecta una colección de especímenes con una cola de inmersiones. Descubre cómo los registros bloqueados, dos filas de filtros y los recuentos de progreso explican qué descubrir a continuación.
Aplicación móvil
Diseño de sitio web para recorridos nocturnos por Bianjing
Un recorrido nocturno interactivo por una Bianjing imaginada de la era Song, que combina una ciudad fluvial persistente, poesía, faroles y un ritmo de capítulos multilingüe.
Sitio web
Diseño de sitio web de empleo
Un estudio de empleo de Kimi construido a partir de ocho escenas lunares, con transiciones vinculadas al desplazamiento y un proceso de solicitud ilustrado.
Sitio web
Diseño de portafolio creativo
El portafolio ficticio de Maya Rowan conecta proyectos, métodos de trabajo y notas.
Sitio web