Aplicación móvil
Diseño de una app de misiones diarias
El diseño de una app de misiones diarias convierte los objetivos cotidianos en un recorrido móvil de misiones de tres pantallas, con XP de ejemplo, tarjetas de categorías y detalles de tareas.
Casos de uso de apps móviles de misiones diarias
- Planificación de hábitos diariosOrganiza diversas actividades diarias en una única lista de misiones fácil de consultar.
- Flujos móviles gamificadosConvierte el progreso, las recompensas y las categorías en pantallas de teléfono compactas.
- Diseño de detalles de tareasDivide una actividad en microtareas ordenadas que incluyen recompensas.
- Narrativa de prototiposMuestra cómo una idea pasa de la introducción a la acción.
Aspectos destacados del diseño de pantallas de misiones
- Recorrido de tres pantallasPasa de la introducción del concepto a la lista de misiones y sus detalles.
- Tarjetas basadas en categoríasAgrupa Body, Read, Listen, Nourish, Mind y Watch.
- Modelo de progreso visibleCombina Level 14 con XP de ejemplo y cantidades de misiones.
- Desglose en microtareasConvierte el entrenamiento de fuerza en cuatro pasos con recompensas individuales.
La app de misiones diarias, pantalla por pantalla
1 / 3Diseño de una app de misiones diarias
El diseño de una app de misiones diarias presenta Level como un concepto móvil para convertir actividades conocidas de superación personal en un registro diario de misiones. El encabezado creado, “Daily quests for becoming a better human.”, establece la premisa antes de que la interfaz introduzca la siguiente acción: “NEXT — TODAY'S QUESTS”.
La pantalla de bienvenida utiliza una superficie oscura, una tipografía editorial serif de gran tamaño, énfasis naranja en “becoming” y una etiqueta de prototipo compacta con estilo monoespaciado. Esta composición hace que la idea parezca una introducción y no un panel operativo. La concesión es deliberada: el titular expresivo ocupa una parte considerable del espacio vertical, por lo que solo la breve explicación del producto y la indicación del siguiente paso permanecen visibles antes de la transición.
El texto visible describe cómo ganar XP y ver subir de nivel a las clases, pero el HTML proporcionado es un diseño estático de tres pantallas. Representa el modelo de información y los estados de finalización propuestos, en lugar de implementar la selección de misiones, las actualizaciones de recompensas o el cambio de tema. Las cifras son contenido de ejemplo, no pruebas de progreso almacenado ni de resultados de salud.
Planificación de misiones diarias y consulta de recompensas
La pantalla de inicio está organizada para facilitar una consulta rápida. “Good morning, Sam” aparece sobre un panel de progreso de Level 14 que muestra “1648 / 2480”, seguido de “8 quests waiting · earn 430 XP today”. Estos valores se presentan como datos de ejemplo, pero su orden explica la prioridad prevista: orientación primero, progreso después y trabajo disponible en tercer lugar.
A continuación, seis tarjetas de colores separan el día en Body, Read, Listen, Nourish, Mind y Watch. Cada tarjeta combina un marcador de una letra, el nombre de la categoría, una actividad concreta y una insignia de XP. Por ejemplo, Body combina “20-min strength: pushups & planks” con “+90”, mientras que Watch combina “The Bear · S3 E4” con “+30”. La cuadrícula de categorías permite comparar actividades diferentes sin fingir que son el mismo tipo de tarea.
La disposición de tarjetas en dos columnas favorece una elección rápida y variedad visual, mientras que los rellenos pastel distinguen las categorías. La concesión es que las etiquetas más largas ocupan varias líneas dentro de tarjetas de tamaño fijo, por lo que las descripciones deben seguir siendo concisas. La navegación inferior mantiene Today activa y reserva Library, un control central para añadir, Stats y Profile para destinos adyacentes.
Progreso antes de la actividad
El panel de Level coloca el progreso de ejemplo y la oportunidad de XP diario antes de las tarjetas de misiones, lo que proporciona a la lista un marco motivacional visible.
Tipos de actividad combinados
El ejercicio, la lectura, la escucha, la alimentación, la meditación y la televisión ocupan el mismo sistema de tarjetas, lo que demuestra cómo el concepto trata las rutinas personales como un único conjunto diario.
Señales de recompensa compactas
Las etiquetas negras de XP con forma de cápsula se sitúan en el borde inferior de cada tarjeta, conservando una ubicación de recompensa coherente y permitiendo que el texto de la actividad ocupe varias líneas.
De la lista de misiones a las microtareas
Las tres pantallas forman una secuencia concreta: la pantalla de bienvenida oscura establece la idea, la pantalla de inicio clara presenta el día y la pantalla de detalles amplía una misión seleccionada. La transición cambia tanto el tema como la densidad de información. La vista de inicio permite comparar seis categorías; la vista de detalles se centra en una actividad de fuerza y su estructura de finalización.
La pantalla de detalles se identifica como “QUEST · 03 / 08” y etiqueta la actividad como “BODY · STRENGTH”. Su panel coral incluye “+90 XP”, el título “20 minutes that change Wednesday.” y una breve descripción que menciona flexiones, planchas y un ejercicio de libre elección, sin equipamiento. La frase repetida “11 times this month” es historial de ejemplo visible, no evidencia de un resultado medido.
En “TODAY'S MICRO-TASKS”, la pantalla enumera “Roll out the mat”, “3 × 12 pushups”, “3 × 45s plank” y “Wildcard: lunges”. La primera fila aparece marcada y tachada, mientras que las filas restantes utilizan círculos vacíos. Los valores de XP de +5, +30, +30 y +25 se sitúan en el borde derecho. Esta distinción de estados permite comprender la finalización parcial sin salir de los detalles de la misión.
El botón grande “Start quest” aparece después de la lista de comprobación y crea un punto final de acción claro. Ese orden resulta útil para un flujo interactivo propuesto, pero la captura no demuestra que el botón, la lista de comprobación o el momento de subida de nivel estén conectados con la persistencia. Sí muestra el lenguaje de estados previsto y la relación entre la recompensa de una misión y sus tareas menores.
| Pantalla | Indicación visible | Límite de implementación |
|---|---|---|
| Bienvenida | Etiqueta del siguiente paso debajo de la introducción | El código fuente no tiene controlador de clic. |
| Hoy | Seis tarjetas de categorías debajo de una etiqueta de ocho misiones y 430 XP | Las recompensas mostradas en las tarjetas suman 340 XP; el ejemplo no concilia la diferencia. |
| Detalles de la misión | Una microtarea marcada y tres filas restantes | La finalización se representa, pero no se almacena ni actualiza mediante un script. |
Alcance visible y límite de capacidades
Este artefacto es un ejemplo de diseño de app móvil de tres pantallas creado por OpenDesign. Es útil para estudiar la composición, la jerarquía de datos de ejemplo, la agrupación de categorías, las transiciones entre pantallas y la notación de estados de finalización. Su encuadre móvil incluye barras de estado de iPhone visibles y navegación inferior, mientras que la evidencia proporcionada no establece un comportamiento de plataforma más allá de las pantallas renderizadas.
El diseño propone interacciones como tocar una misión para ver sus detalles, completar una misión, activar un momento de subida de nivel después de la sexta misión y cambiar el tema y el diseño. Esas descripciones explican el concepto previsto, no capacidades verificadas en tiempo de ejecución. Por tanto, los totales de XP, el estado Level 14, el historial de actividades y la cantidad de misiones diarias deben sustituirse por datos del producto y reglas de estado explícitas en una implementación de producción.
Cómo crear un diseño de app de misiones diarias en OpenDesign
Define la narrativa móvil
Crea tres pantallas de teléfono distintas: una introducción de bienvenida oscura, una lista clara de misiones diarias y una vista enfocada en los detalles de una misión. Mantén la primera pantalla editorial y concisa, y deja que las posteriores incorporen el detalle operativo.
Prompt sugeridoCrea un diseño de app móvil de tres pantallas para misiones diarias: una pantalla de bienvenida oscura con un encabezado editorial con serifas, una pantalla de inicio clara con Level 14 y un progreso de XP de ejemplo sobre seis tarjetas de categorías para Body, Read, Listen, Nourish, Mind y Watch, y una pantalla de detalles de una misión de entrenamiento de fuerza en la categoría Body con microtareas y valores de XP. Trata todos los datos como ilustrativos; no sugieras persistencia en el backend, eficacia para la salud ni integraciones activas.
Perfecciona el sistema de recompensas
Usa las relaciones proporcionadas como referencia de diseño: la pantalla de inicio muestra XP diarios de ejemplo y recompensas por categoría, mientras que la pantalla de detalles muestra una recompensa total de misión junto con recompensas menores por tarea. Comprueba que las etiquetas sigan siendo legibles cuando los nombres de las actividades ocupen varias líneas y que los valores de recompensa no las oculten.
Comprueba los estados y los límites
Representa la finalización parcial con una tarea marcada y tachada, y las tareas restantes con controles vacíos, tal como se muestra en la pantalla de detalles de fuerza. Revisa por separado el comportamiento propuesto de subir de nivel, cambiar de tema y completar misiones respecto a la composición visible, porque este artefacto no verifica el almacenamiento, los servicios ni la conexión en tiempo de ejecución.
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 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.
Aplicación móvil
Diseño de wireframe de app de checkout para marketplace
Un wireframe móvil de cuatro pantallas organiza la incorporación, la exploración, el detalle del producto y la confirmación en un camino de compra enfocado.
Aplicación móvil
Diseño de app de onboarding de mindfulness
El diseño de app de onboarding de mindfulness usa tres pantallas móviles tranquilas para presentar la práctica de Lull, adaptar su promesa y mostrar las opciones de cuenta.
Aplicación móvil