Diseño de apps de chat: rediseño de una lista de chats, antes y después
Una lista de chats junior con cuatro iconos en la cabecera, seis filtros que se salen de la pantalla y la fecha completa en cada fila, y la misma pantalla corregida. Cada cambio lado a lado, el motivo de cada uno y el archivo gratis de Figma.
Una lista de chats tiene un solo trabajo: mostrar quién escribió, qué dijo y si hay que responder. El primer borrador de abajo tiene todas las funciones que una app de mensajería podría querer, y las dice todas a la vez: cuatro iconos en la barra de título, un campo de búsqueda que se explica solo, seis filtros que se salen del borde y la fecha completa en cada fila. La corrección mantiene las mismas personas y los mismos mensajes y da a cada parte de la pantalla un solo trabajo.
La pantalla completa, antes y después
Borrador junior
Corregido
A la izquierda, el ojo se topa con cuatro iconos, una pista de búsqueda de 47 caracteres, cinco anillos arcoíris idénticos, una fila de filtros que no termina y siete filas de mensajes de una línea con una fecha y una insignia cada una. A la derecha, el ojo se topa con un título grande, un botón, un campo de búsqueda, cinco caras, cuatro chips y cinco filas que se leen como frases.
| Borrador junior | Corregido | |
|---|---|---|
| Iconos en la cabecera | 4 | 1 |
| Pista de búsqueda | 47 caracteres | "Buscar" |
| Chips de filtro | 6, saliéndose de la pantalla | 4, todos visibles |
| Hora en la fila | "10/24/26 9:41 AM" | "9:41", "Ayer", "Jue" |
| Insignia de no leído | roja de 20 px | azul de 17 px, gris si está silenciado |
| Pestañas | 5 | 4 |
| Margen lateral | 14 px izquierda, 12 px derecha | 20 px en ambos lados |
| Tamaños de texto | 9 a 20 px | 11 a 28 pt |
Corrección 1: una acción en el título, una búsqueda que dice Buscar
Antes
Después
Cuatro iconos y un campo de búsqueda que enumera lo que busca, contra un botón y la sola palabra Buscar.
La barra de título del borrador tiene una cámara, un lápiz, una lupa y un menú. La lupa está encima de un campo de búsqueda que tiene su propia lupa, así que la pantalla ofrece la misma búsqueda dos veces.
La corrección mantiene la acción por la que la gente viene aquí, escribir un mensaje nuevo, y le da un botón redondo y suave en el azul de la marca. El título crece a título grande, el mismo patrón que usa iOS, para que la pantalla diga dónde estás antes que nada. El campo de búsqueda dice "Buscar". Los 47 caracteres del borrador, "mensajes, personas, grupos y más", describían un campo que todo el mundo ya sabe usar.
La regla para reutilizar: una barra de título tiene una acción, y un campo llamado Buscar no necesita una frase.
Corrección 2: un anillo que significa nuevo
Antes
Después
Cinco anillos arcoíris idénticos y nombres cortados, contra azul para nuevo, gris para visto y nombres de pila completos.
Cuando todos los anillos se ven igual, un anillo no aporta información. El borrador da a las cinco historias el mismo degradado, así que una historia que ya viste se ve exactamente igual que una que no, y los nombres se cortan en "Jessica M..." y "Daniel Ro...".
La corrección da sentido al anillo. Un anillo azul de 2,5 px significa nuevo. Un anillo gris de 1,5 px significa visto.
Tu propia historia va primero con un pequeño más encima, y cada nombre es un nombre de pila completo: Jessica, Daniel, Amara, Leo. Los nombres cortos caben, y un nombre de pila es como se llama la gente entre sí.
La regla para reutilizar: usa el color para separar dos estados, y muestra con color solo el estado que necesita atención.
Corrección 3: cuatro chips, un estilo, el contador en su chip
Antes
Después
Seis chips con contorno en una fila más ancha que la pantalla, contra cuatro chips que caben, con el contador como insignia.
El borrador tiene seis chips en una fila de 434 px sobre una columna de 364 px. El sexto queda cortado por la mitad, así que la pantalla le muestra a la persona que hay más y no le da ninguna pista de qué es. Los contadores van entre paréntesis dentro de las etiquetas, "No leídos (12)" y "Grupos (3)", lo que hace que cada etiqueta tenga un largo distinto.
La corrección mantiene cuatro: Todos, No leídos, Favoritos y Grupos. El elegido va relleno de azul, los demás en gris suave. El contador de no leídos pasa a su propio chip como una pequeña insignia azul, porque es el único número que la gente quiere y es la misma insignia que verá en las filas de abajo. Grupos perdió su contador.
Canales y Archivados salieron de la fila. Son funciones reales, y este rediseño no dibuja adónde van, así que una app completa sigue necesitando un lugar para ellas.
La regla para reutilizar: una fila de filtros debe terminar dentro de la pantalla, y el elegido debe ser el único relleno.
Corrección 4: filas con la persona, dos líneas y una hora corta
Antes
Después
Una línea cortada, una marca de tiempo completa y una insignia roja con icono, contra dos líneas, una hora corta y una insignia discreta.
Una fila es un mensaje en miniatura, y el borrador corta el mensaje tras unas cinco palabras: "Jaja sí!! Pásame las fotos de...". El espacio se fue a la fecha, "10/24/26 9:41 AM", y a un pequeño icono de fijado o de altavoz junto a una insignia roja. Una fecha con año y segundos es lo menos útil de una fila para un mensaje que llegó esta mañana.
La corrección da a la vista previa dos líneas, así que "Jaja sí! Pásame las fotos de anoche cuando puedas" se lee sin abrir el chat. La hora es corta: "9:41" hoy, "Ayer", luego "Jue".
Un chat sin leer lleva su hora en azul y una insignia azul de 17 px. El grupo silenciado, Design Team, recibe una insignia gris para que cuente sin llamar. Los avatares crecen a 52 px, y un mensaje de voz lleva un pequeño micrófono delante de su duración.
La regla para reutilizar: gasta el espacio de la fila en el mensaje, y escribe la hora como la dice la gente.
Las correcciones menores
- Un solo borde izquierdo. El borrador usaba 14 px a la izquierda y 12 px a la derecha. La corrección usa 20 px en ambos lados, con los separadores empezando después del avatar.
- Un color para la atención. Las insignias del borrador son rojas, los anillos van de naranja a morado y el chip de no leídos tiene contorno. La corrección usa el azul de la marca #2E7CF6 para nuevo, seleccionado y no leído, y gris para todo lo tranquilo.
- Una escala tipográfica real. El texto pasó de 9 a 20 px a los tamaños de texto de iOS de 11 a 28 pt, con el título grande arriba.
- Cuatro pestañas, no cinco. Las pestañas del borrador Chats, Llamadas, Cámara, Estado y Ajustes pasaron a Chats, Llamadas, Novedades y Ajustes. La cámara salió de la barra de pestañas.
- Caras más grandes. Los avatares de la lista crecieron a 52 px, así que la persona es lo primero que muestra una fila.
Audita tu propia lista de chats
| Pregunta | Por qué importa |
|---|---|
| ¿Cuántas acciones hay en la barra de título? | Una acción se encuentra, cuatro se escanean |
| ¿El campo de búsqueda se describe con una frase? | La palabra Buscar ya basta |
| ¿Cada anillo o punto significa exactamente una cosa? | Un estilo usado para todo no dice nada |
| ¿La fila de filtros termina dentro de la pantalla? | Un chip cortado esconde lo que ofrece |
| ¿La vista previa tiene al menos dos líneas? | Los lectores no deberían abrir un chat para leerlo |
| ¿Las horas se escriben como las dice la gente? | "Ayer" es más rápido que una fecha con año |
Consigue el archivo de Figma
El archivo gratis tiene 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
Lista de chats, antes y después
Ambas pantallas y cada parte corregida como componentes de Figma. Gratis, solo lectura, duplícalo en tus borradores.
FAQ
¿Qué debe mostrar cada fila en la pantalla de lista de chats?
La persona, dos líneas del último mensaje, una hora corta y una insignia pequeña para no leído. Deja fuera la fecha completa, los iconos extra y cualquier segunda insignia.
¿Cuántos filtros debe mostrar una app de mensajería?
Cuatro chips bastan en la lista principal: Todos, No leídos, Favoritos y Grupos. Pon el resto, como Archivados, detrás de un menú o en otra pantalla, y asegúrate de que la fila nunca se salga del borde.
¿Cómo se diseñan los anillos de historias en una app de chat?
Usa un color para lo nuevo y un color discreto para lo visto, para que el anillo lleve información. Nuestra corrección usa un anillo azul para nuevo y un anillo gris fino para visto, con nombres de pila completos bajo las caras.
¿Cómo debe mostrar una app de chat la hora de un mensaje?
Tan corta como la diría una persona: la hora si es de hoy, luego "Ayer", luego el día de la semana. Guarda las fechas completas para el chat en sí.
¿Qué tamaños de fuente debe usar una app de chat?
Usa la escala de texto de la plataforma. La pantalla corregida usa tamaños de iOS de 11 a 28 pt, con un título grande para el nombre de la pantalla.
Fuentes
- Ambas pantallas son nuestras, diseñadas y medidas en Figma. Los nombres y los mensajes son inventados para el ejercicio.
- Fotos de Pexels por Татьяна Танатова, Iphanyi Ezemenari, pessoas uem, Son Hoa Nguyen, Ajan Yogi, Tamra Creatives Agency, Kenneth Surillo y kaleef lawal.
- Apple Human Interface Guidelines: Typography, para los tamaños de texto de iOS y el título grande usado en la pantalla corregida.
- Apple Human Interface Guidelines: Accessibility, para el tamaño del área táctil de 44 pt.
- 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
