Diseño de pantalla de perfil: rediseño de perfil y ajustes de una app, antes y después
Una pantalla de perfil que es una lista plana de trece filas, y la misma pantalla corregida: una fila de identidad, una tarjeta de membresía real, ajustes agrupados que muestran su estado y un Cerrar sesión discreto. Cada cambio lado a lado, con el archivo gratis de Figma.
Una pantalla de perfil tiene tres trabajos: mostrar quién eres, mostrar lo que tienes y darte un lugar para cambiar cosas. El primer borrador de abajo hace las tres cosas, pero las mete en una lista plana de trece filas, con los puntos apretados en una sola línea pequeña y Cerrar sesión como lo más ruidoso de la pantalla. Es un cajón de sastre: todo está ahí dentro y nada es fácil de encontrar.
La corrección conserva todas las funciones. Da a cada trabajo su propio bloque y deja que las filas muestren su estado, así que la mayoría de los ajustes se pueden leer sin abrirlos.
La pantalla completa, antes y después
Borrador junior
Corregido
A la izquierda, todo pesa lo mismo. El avatar, el nombre, el correo y el teléfono están apilados en el centro, el banner pesado queda justo encima de los puntos y luego trece filas bajan por la página, cada una con su color de icono. El ancho botón rojo de abajo es el color más fuerte de la pantalla, así que lo último que encuentra el ojo es la acción que nadie debería pulsar por accidente.
A la derecha, la pantalla tiene cuatro bloques y un color. La fila de identidad es corta, la tarjeta lleva los puntos y los tiles y la lista de ajustes contienen todo lo demás. El cobalto de la marca aparece en la tarjeta, el botón Editar y la pestaña activa, y el rojo aparece una sola vez, en Cerrar sesión, como texto simple.
Qué cambió, medido
Cada diferencia en una pantalla, a partir de los dos frames de Figma:
| Borrador junior | Corregido | |
|---|---|---|
| Identidad | Pila centrada: avatar, nombre, correo, teléfono, Editar perfil | Una fila: avatar, nombre, correo, botón Editar pequeño |
| Puntos | Una línea de 9 pt: "Puntos: 12480 | Nivel: Gold | Siguiente: Platinum (13000)" | Una tarjeta con un número de 44 pt y "520 puntos para Platinum" |
| Menú | 13 filas en una lista, 7 colores de icono | 3 tiles y 5 filas agrupadas, 1 tono de icono |
| Estado de fila | Solo Notificaciones (una insignia) e Invitar amigos (una etiqueta) | Cantidad, saldo, tarjeta, idioma y un interruptor, todo visible |
| Cerrar sesión | Un botón rojo de 38 px, ancho completo | Texto rojo de 17 pt, centrado |
| Barra de pestañas | 5 pestañas, iconos mezclados rellenos y de contorno | 5 pestañas en una barra flotante, un solo estilo de icono |
| Margen | 14 a la izquierda, 12 a la derecha | 20 en ambos lados |
Corrección 1: una fila para quién eres
Antes
Después
Un avatar centrado, el nombre, un correo, un teléfono y un botón Editar perfil con contorno, con un banner amarillo debajo, frente a una sola fila: el avatar a la izquierda, el nombre y el correo a su lado y una pequeña píldora Editar a la derecha.
La pila centrada gasta unos 160 puntos de alto para decir un nombre y un correo. El teléfono es la línea menos útil y el botón Editar perfil es un control completo con contorno que compite con todo lo de abajo.
La corrección es una fila: el avatar a la izquierda, el nombre y el correo junto a él y Editar como una pequeña píldora al final. El bloque mide 60 puntos en vez de 158, así que el siguiente bloque empieza más arriba. El banner pesado, "¡¡¡Completa tu perfil y gana 50 puntos!!!", desaparece de la parte superior de la pantalla. Pedir que termines tu perfil pertenece a la primera ejecución o a Editar, no encima de lo que viniste a ver.
Regla para reutilizar: una persona sabe su propio nombre. Dale a la identidad una fila y dale el espacio a lo que cambia.
Corrección 2: convierte una línea de texto en una tarjeta
Antes
Después
Un pequeño logotipo seguido de "Puntos: 12480 | Nivel: Gold | Siguiente: Platinum (13000)" en una línea de texto minúsculo, frente a una tarjeta azul profundo con el logotipo, una etiqueta Gold, 12.480 en tipografía grande, una barra de progreso y "520 puntos para Platinum".
Los puntos son la razón por la que un miembro abre esta pantalla, y el borrador los pone en la letra más pequeña de la página. Los números están todos, pero el lector tiene que hacer la resta: 13.000 menos 12.480.
La corrección hace la resta por él. La tarjeta muestra los puntos a 44 pt, el nivel como una etiqueta dorada, una barra llena al 83 por ciento y la frase "520 puntos para Platinum". Gold empieza en 10.000, así que 12.480 está casi en el siguiente nivel, y la barra lo muestra de un vistazo. La tarjeta usa además el cobalto de la marca y el único dorado del nivel, lo que la convierte en el bloque más fuerte de la pantalla, y eso es correcto: es lo único aquí que recompensa a quien la mira.
Regla para reutilizar: muestra el resultado de la suma, no los números que la componen.
Corrección 3: agrupa los ajustes y muestra su estado
Antes
Después
Trece filas en una lista, de Mis pedidos a Términos y condiciones, cada una con su icono de color y un chevron, frente a tres tiles (Pedidos, Monedero, Guardados) y un grupo blanco de cinco filas: Direcciones, Métodos de pago, Notificaciones, Idioma y Ayuda y legal.
Trece filas del mismo tamaño, con el mismo chevron y siete colores de icono no tienen orden. Mis pedidos y Términos y condiciones parecen igual de importantes, y el borrador no te dice nada de lo que hay detrás de una fila hasta que la tocas.
La corrección ordena la lista según la frecuencia de uso:
- Pedidos, Monedero y Guardados se vuelven tiles. Son los tres lugares a los que más se va, así que tienen objetivos grandes y un dato en vivo cada uno: "2 activos", "$42,50" y "18 artículos".
- Los ajustes viven en un grupo. Direcciones dice "2 guardadas", Métodos de pago dice "Visa ·· 4242" e Idioma dice "Español". La persona puede comprobarlos sin tocar.
- Notificaciones se vuelve un interruptor. Es una elección de encendido y apagado, así que no necesita su propia pantalla.
- Las filas poco usadas pasan detrás de Ayuda y legal. Invitar amigos, Valorar la app, Sobre nosotros, Política de privacidad y Términos siguen existiendo, un toque más adentro.
Todas las filas del borrador siguen siendo accesibles. No se eliminó nada, se puso donde su frecuencia dice que pertenece. Los iconos también comparten un solo tono, así que el color en la pantalla significa algo: la marca señala lo activo y tocable.
Corrección 4: haz que Cerrar sesión sea discreto
Antes
Después
Un botón rojo de ancho completo con letras mayúsculas blancas que dicen CERRAR SESIÓN, frente a las palabras Cerrar sesión en rojo, 17 pt, centradas y con espacio alrededor.
Un botón rojo sólido es el control más ruidoso de la pantalla del borrador, y pide que lo pulsen. Cerrar sesión es raro y ligeramente destructivo, ya que devuelve a la persona a un inicio de sesión. Debería ser fácil de encontrar y difícil de pulsar por error.
La corrección conserva el rojo, porque el rojo sigue diciendo que es una acción de salida, y quita el relleno. Es texto simple bajo el grupo de ajustes, con espacio alrededor. Sigue estando a un toque, pero ya no se lleva la mirada.
Las correcciones menores
- Un título grande en vez de una barra de navegación. "Mi perfil" con una flecha atrás, un icono de compartir y un icono de sol pasó a ser "Perfil" a 34 pt. La barra de pestañas ya dice dónde estás, así que la flecha atrás desaparece, y la campana de notificaciones es el único icono que queda.
- Un solo margen. El borrador usa 14 a la izquierda y 12 a la derecha. La corrección usa 20 en ambos lados y 14 entre bloques.
- Una sola escala tipográfica. El texto del borrador va de 8 a 15 px. La corrección usa tamaños de iOS de 11 a 34 pt.
- Un solo acento. El borrador tiene siete colores de icono, un banner amarillo y un botón rojo. La corrección tiene el cobalto de la marca, un dorado para el nivel y rojo para Cerrar sesión.
- Una barra de pestañas flotante. Las cinco pestañas se quedan, pero usan un solo estilo de icono y solo la pestaña activa va rellena.
Audita tu propia pantalla de perfil
| Pregunta | Por qué importa |
|---|---|
| ¿La identidad es una fila? | Una persona sabe su nombre, no debería ocupar 160 puntos |
| ¿Puedes leer los puntos o el estado en un segundo? | Un resumen en texto pequeño hace que el lector haga las cuentas |
| ¿Los lugares más usados son más grandes que los poco usados? | Filas iguales esconden lo que importa |
| ¿Cada fila de ajustes muestra su valor actual? | El estado es la respuesta a la mayoría de las visitas |
| ¿Hay más de un color de acento? | Siete colores de icono no significan nada |
| ¿Cerrar sesión es más ruidoso que Editar? | La acción rara debe ser la discreta |
Consigue el archivo de Figma
El archivo gratis tiene las dos pantallas, con los bloques corregidos como componentes.
Archivo gratis de Figma
Rediseño de pantalla de perfil, antes y después
Las dos pantallas y cada parte como componente de Figma. Gratis, solo lectura, duplícalo en tus borradores.
FAQ
¿Qué debería mostrar una pantalla de perfil en una app?
Quién es la persona, qué tiene y una forma de cambiar sus ajustes. Pon la identidad en una fila corta, los puntos, el saldo o el plan en una tarjeta y agrupa los ajustes debajo.
¿Dónde debería ir el botón Cerrar sesión en una pantalla de perfil?
Al final de los ajustes, debajo del último grupo, como texto simple. Debe ser accesible, pero nunca el control más ruidoso de la página.
¿Cuántas filas debería tener una lista de ajustes?
De cinco a siete en la primera vista funciona bien. Mueve las poco usadas, como las páginas legales y la valoración de la app, detrás de una fila como Ayuda y legal.
¿Las filas de ajustes deberían mostrar su valor actual?
Sí. Un valor como "Español" o "Visa ·· 4242" responde la pregunta sin tocar, y un interruptor es mejor que una fila para una simple elección de encendido o apagado.
¿Cómo se muestran los puntos de fidelidad en una pantalla de perfil?
Como una tarjeta con el número grande, el nivel actual como etiqueta y una frase sobre lo que viene, como "520 puntos para Platinum". Haz la resta por el lector.
Fuentes
- Las dos pantallas son nuestras, diseñadas y medidas en Figma. La app, el miembro y los números son inventados.
- Los tamaños de texto siguen la escala tipográfica de iOS de las Human Interface Guidelines de Apple.
- Foto del avatar: Tamra Creatives Agency en Pexels.
- 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
