Diseño de apps de fitness: rediseño de una pantalla de inicio, antes y después
Una pantalla de inicio de app de fitness de nivel junior, con cuatro tarjetas de estadísticas, una foto de entrenamiento recargada y un gráfico que no dice nada, y la misma pantalla corregida. Cada cambio lado a lado, la razón de cada uno y el archivo gratis de Figma.
La pantalla de inicio de una app de fitness tiene una sola tarea: decirle a alguien cómo va el día y darle una forma clara de empezar. El primer borrador de abajo tiene todos los números correctos, pero los entrega en cuatro tarjetas apretadas, texto blanco sobre una foto recargada y un gráfico que no dice nada. La corrección conserva todas las funciones y cambia cuánto trabajo le pide cada parte al ojo.
La pantalla completa, antes y después
Borrador junior
Corregida
A la izquierda, el ojo se topa con un encabezado de cuatro elementos, luego cuatro tarjetas en cuatro colores, luego una foto, dos botones y un corazón, un gráfico y una segunda fila de entrenamientos cortada por la barra de pestañas. A la derecha hay tres tarjetas y un encabezado: cómo va hoy, qué hacer ahora, cómo luce la semana.
No se eliminó nada de la lista de funciones que alguien fuera a echar de menos. Pasos, calorías, agua, frecuencia cardíaca, el entrenamiento del día y la actividad de la semana siguen ahí. Solo se movieron a formas menos numerosas y más grandes.
| Borrador junior | Corregida | |
|---|---|---|
| Controles del encabezado | 3 iconos y un avatar | 1 botón |
| Números de hoy | 4 tarjetas en 4 colores | 1 tarjeta, 3 anillos y un chip de frecuencia cardíaca |
| Botones en la tarjeta del entrenamiento | 2 botones y un corazón | 1 botón de play |
| Gráfico semanal | 7 barras naranjas, sin números | El total, la tendencia, hoy en naranja |
| Pestañas | 5 | 4 |
| Margen lateral | 14 px a la izquierda, 12 px a la derecha | 20 px a ambos lados |
| Tamaños de texto | 8 a 16 px | 11 a 28 pt |
Corrección 1: una tarjeta de anillos en vez de cuatro tarjetas
Antes
Después
Cuatro tarjetas pastel, cada una con un icono, un número, una etiqueta y una barra delgada, frente a una tarjeta con tres anillos, el objetivo bajo cada etiqueta y la frecuencia cardíaca como un chip pequeño.
Cada tarjeta del borrador dice un número y dibuja una barra delgada, pero no con qué se está midiendo esa barra. 8.432 pasos pueden ser mucho o poco. El lector tiene que adivinar la meta por lo lejos que llega la barra, y las barras son finas.
Los anillos ponen la meta en palabras ("de 10.000", "de 600 kcal", "de 2 L") y en forma: un anillo está lleno o no lo está. Una mirada responde "¿voy bien hoy?". La frecuencia cardíaca es una lectura, no una meta, así que no recibe anillo. Baja a un chip en la esquina, que indica que es otro tipo de número.
La regla para reutilizar: si un número tiene objetivo, muestra el objetivo. Si no lo tiene, no lo disfraces de progreso.
Corrección 2: un botón de play, una sombra detrás de las palabras
Antes
Después
Un título de sección, una insignia NUEVO, texto blanco de 9 px sobre la foto y tres controles debajo, frente a una foto con etiqueta, texto más grande sobre una sombra y un solo botón de play.
El texto blanco sobre una foto solo se lee donde la foto resulta ser oscura. En el borrador la línea de detalles cruza la parte más clara de la imagen, un piso de gimnasio y una camiseta gris, y a 9 px desaparece. La corrección coloca sobre la foto una sombra negra que llega al 72% en el borde inferior, justo donde están las palabras, y las pone más grandes.
El borrador además hace una pregunta antes de que la persona pueda actuar: ¿Empezar ya, o Detalles, o guardarlo con el corazón? Con el entrenamiento de hoy hay una sola cosa que hacer, que es empezarlo. Un único botón de play redondo lo dice sin una palabra. Los detalles quedan a un toque cuando alguien los quiere, pero ya no compiten con la acción principal.
La insignia "NUEVO" y el título de sección "Entrenamiento de hoy" decían casi lo mismo dos veces. La corrección conserva una sola etiqueta, un chip sobre la foto.
Corrección 3: abre el gráfico con el total
Antes
Después
Siete barras naranjas iguales con un menú desplegable y una leyenda, frente al total de la semana en tipografía grande, un chip de tendencia y una barra en naranja sólido.
Un gráfico responde una pregunta, y el del borrador no dice cuál. Siete barras del mismo naranja fuerte, sin valores y con una leyenda para la única serie, así que el lector tiene que decidir por su cuenta qué sacar de ahí. La corrección responde primero con palabras la pregunta más probable: 4 h 12 min esta semana, 18% más que la semana pasada.
Ahora las barras son contexto, no el mensaje. Cinco son un tinte pálido del color de la marca y hoy, el sábado, es naranja sólido, así que el ojo aterriza en dónde está la persona dentro de la semana. El domingo queda como un tocón corto, de modo que la semana se lee de izquierda a derecha hasta hoy. El menú "Esta semana" y la leyenda "Minutos activos" desaparecieron porque el título ya dice ambas cosas.
La regla para reutilizar: pon arriba el número que el gráfico tardaría un minuto en explicar, y deja que las barras hagan el resto.
Corrección 4: un botón en el encabezado
Antes
Después
Un avatar, un saludo con signo de exclamación, una segunda línea con dos más y tres iconos, frente a la fecha, un saludo y un solo botón de notificaciones.
El encabezado del borrador carga siete cosas antes de cualquier contenido: un avatar, dos líneas de saludo y tres iconos. El avatar lleva a la cuenta de la persona, y la app ya tiene una pestaña de Perfil, así que la corrección lo quita del encabezado. Los iconos de búsqueda y ajustes se van con él, lo que deja espacio para el saludo.
La corrección conserva lo único que se gana la esquina superior: las notificaciones, con un punto cuando hay algo nuevo. El saludo pasa a ser la fecha y un nombre en tipografía grande, que le dice al lector a qué día pertenecen los números de hoy sin signo de exclamación.
Las correcciones menores
- Cuatro pestañas, no cinco. Inicio, Entrenamientos, Progreso y Perfil. Estadísticas y Comunidad dieron paso a una sola pestaña de Progreso.
- Un solo margen. El borrador usaba 14 px a la izquierda y 12 px a la derecha, así que las tarjetas se veían ligeramente descentradas. La corrección usa 20 px a ambos lados y 16 px entre tarjetas.
- Un color para la acción. El borrador usaba tarjetas durazno, amarillo, rosa y azul más naranja. La corrección usa naranja para la acción y deja el ámbar y el azul solo en dos de los anillos, donde sirven para distinguirlos.
- Una escala tipográfica real. El texto pasó de 8 a 16 px a los tamaños de texto de iOS de 11 a 28 pt, así que nada en la pantalla es menor que el pie de foto más pequeño del sistema.
- Sin fila de Recomendados. La segunda fila de fotos del borrador quedaba cortada por la barra de pestañas. La corrección termina la pantalla de inicio después del gráfico.
- Saludo más tranquilo. "¡¡Vamos a romper las metas de hoy!!" se convirtió en la fecha sobre el nombre.
Audita tu propia app de fitness
| Pregunta | Por qué importa |
|---|---|
| ¿Cada número de progreso muestra su meta? | Un número sin objetivo no es progreso |
| ¿Hay una acción clara en la tarjeta del entrenamiento? | Dos botones y un corazón piden una decisión |
| ¿Hay texto puesto directamente sobre una foto? | La legibilidad no debería depender de la foto |
| ¿El gráfico dice su punto en palabras primero? | Barras sin valores dejan al lector adivinando |
| ¿El encabezado duplica alguna pestaña? | Dos puertas a la misma habitación añaden ruido |
Consigue el archivo de Figma
El archivo gratis incluye ambas pantallas como componentes, cada corrección como un par de antes y después, las variables de color y los estilos de texto de iOS.
Archivo gratis de Figma
Pantalla de inicio de fitness, antes y después
Ambas pantallas y cada parte corregida como componentes de Figma. Gratis, solo lectura, duplícalo en tus borradores.
FAQ
¿Qué debería mostrar primero la pantalla de inicio de una app de fitness?
Cómo va el día: pasos, calorías y agua frente a sus metas, en una sola tarjeta. Pon el entrenamiento del día justo debajo, con una forma clara de empezar.
¿Son mejores los anillos de progreso que las barras de progreso en una app de fitness?
Para unas pocas metas diarias, sí. Un anillo se lee de un vistazo, muestra lleno o no lleno sin necesidad de escala y admite un número en el centro. Deja la frecuencia cardíaca fuera de los anillos, porque es una lectura y no tiene meta que llenar.
¿Cómo se hace legible el texto blanco sobre una foto de entrenamiento?
Pon una sombra oscura detrás de las palabras, más intensa donde está el texto, y usa un tamaño legible. No confíes en que la foto sea oscura justo donde hace falta.
¿Cómo se debe diseñar un gráfico de actividad de fitness?
Empieza con el total y la tendencia en palabras, luego muestra las barras en un tinte suave con el día actual en el color de la marca. Elimina leyendas y menús desplegables que el título ya cubre.
¿Cuántas pestañas debería tener una app de fitness?
Cuatro o cinco. Fusiona las pestañas que contienen números relacionados, como Estadísticas y Comunidad, en un solo lugar como Progreso.
Fuentes
- Ambas pantallas son propias, diseñadas y medidas en Figma.
- Fotos de Pexels por pessoas uem, Julia Larson, Tima Miroshnichenko y Vitaly Gariev.
- Apple Human Interface Guidelines: Typography, para los tamaños de texto de iOS usados en la pantalla corregida.
- Publicado por primera vez como carrusel en App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
