Diseño de apps de casa inteligente: rediseño de la pantalla de inicio, antes y después
Una pantalla de inicio de app de casa inteligente que parece una página de ajustes, y la misma pantalla corregida: la habitación y lo que está encendido en una línea, pestañas de habitaciones deslizables, tarjetas anchas de dispositivos y escenas en píldoras de verdad. Cada cambio lado a lado, con el archivo gratis de Figma.
Una app de casa inteligente tiene un solo trabajo en su pantalla de inicio: mostrar en qué habitación estás y dejarte cambiar lo que está encendido, con un toque. El primer borrador de abajo tiene todos los controles, pero lista ocho filas idénticas con líneas de estado diminutas, esconde las habitaciones en texto subrayado y deja las escenas para el final como seis botoncitos. Parece una página de ajustes, así que usarla se siente como configurar, no como vivir.
La corrección mantiene todas las funciones y cambia cómo se muestran. La habitación va primero, los dispositivos se vuelven tarjetas que se iluminan al encenderse y las escenas pasan a ser píldoras que alcanzas con el pulgar.
La pantalla completa, antes y después
Borrador junior
Corregida
A la izquierda, nada lidera. La cabecera, una franja de datos, seis enlaces, un banner con foto, ocho filas y seis botones pesan lo mismo. Las filas de dispositivos son el bloque más grande y todas son igual de grandes, así que una tele apagada parece tan importante como el termostato que está calentando.
A la derecha, la pantalla responde dos preguntas en orden: dónde estoy y qué está encendido. La foto es la habitación, no un banner sobre la app. El estado lo lleva el color, así que el usuario lee la cuadrícula de un vistazo.
Qué cambió, medido
| Borrador junior | Corregida | |
|---|---|---|
| Cabecera | Menú, título, más, ajustes, campana y luego una línea del clima | Nombre de la habitación en 34 negrita, "22° · 3 luces encendidas" debajo |
| Habitaciones | Seis enlaces subrayados, margen izquierdo de 14 px y derecho de 12 px | Pestañas simples en 17 que se deslizan fuera del borde derecho |
| Dispositivos | Ocho filas, líneas de estado de 9 px, interruptores de 30 x 18 | Tarjetas de 72 de alto, radio 16, en dos columnas, nombre en 14 y estado en 12 |
| Estado | Un interruptor minúsculo | Tarjeta blanca con icono ámbar significa encendido |
| Escenas | Seis botones en mayúsculas bajo una etiqueta "SCENES" | Píldoras de 44 de alto, la activa iluminada |
| Foto | Un banner pequeño con un saludo | La propia habitación, a pantalla completa, bajo una capa plana de negro al 52% |
| Pestañas | Cinco, con iconos rellenos y de contorno mezclados | Cuatro en una barra flotante de 62 px, las tarjetas pasan por debajo |
| Acento | Ámbar en interruptores e iconos | Un solo ámbar, en las tarjetas encendidas y la pestaña activa |
Corrección 1: di la habitación y luego lo que está encendido
Antes
Después
Una cabecera con icono de menú, My Home, más, ajustes y una campana con punto rojo, una franja del clima con 18°C nublado, interior 22°C, humedad 44%, consumo 3,2 kWh, seis enlaces subrayados de habitaciones y un banner con foto que dice Haven, frente a Living Room en letra grande y negrita con 22° · 3 luces encendidas debajo, sobre la foto de la habitación, con un más y un menú de tres puntos.
La cabecera del borrador intenta ser un panel de control. Lleva tres acciones, una línea del clima de cuatro partes y un saludo que dice que la casa "funciona sin problemas", que no es información. El usuario ya sabe que nada va mal, porque nada parpadea.
La corrección le da un tema a la pantalla. "Living Room" es el título, y una línea debajo recoge los dos datos que la gente consulta: la temperatura y cuántas luces están encendidas. Las tres luces son la Floor Lamp, la Ceiling Light y la Shelf Light que están encendidas en el borrador, así que no se inventó nada. El clima, la humedad y el consumo se abren desde los tres puntos, y la campana y el engranaje pasan a Perfil.
Es el patrón que usa Apple Home: un nombre de habitación con su estado en vivo arriba.
Regla para reutilizar: pon el lugar primero y una línea de estado en vivo debajo. Mueve el resto detrás de un menú.
Corrección 2: pestañas simples de habitaciones que se deslizan
Antes
Después
Seis enlaces subrayados en fila: Living Room, Bedroom, Kitchen, Bath, Garage, Office, frente a Living Room en blanco y negrita y Bedroom, Kitchen y Bathroom en gris, saliéndose del borde derecho.
El texto subrayado se lee como un enlace dentro de un párrafo, no como una elección entre habitaciones. Además, seis de ellos llenan todo el ancho, así que el usuario no sabe qué habitación está abierta. El subrayado es la herramienta más ruidosa de la página para el elemento más silencioso.
Las pestañas simples arreglan ambas cosas. La habitación seleccionada va en blanco y las demás en gris, así que la actual es la única brillante. La fila se sale del borde derecho a propósito, lo que muestra que se desliza y permite que la lista crezca más allá de seis habitaciones sin un nuevo diseño. Bathroom y Office quedan a un deslizamiento, y Garage se abre desde los puntos.
Regla para reutilizar: muestra la selección con color, no con subrayado, y deja que una fila de opciones se salga del borde.
Corrección 3: tarjetas en lugar de filas
Antes
Después
Ocho filas idénticas con un icono, un nombre, una línea gris de estado como On, 80%, Warm White y un pequeño interruptor ámbar o gris a la derecha, frente a tarjetas anchas y redondeadas en dos columnas: Floor Lamp y Thermostat en blanco con iconos ámbar, TV y Speaker oscuras con iconos blancos, y Ceiling Light y Blinds empezando más abajo.
Las filas son lo que más cuesta. Cada una exige que el usuario encuentre una línea de 9 px, lea "On | 80% | Warm White" y luego busque un interruptor de 30 x 18 para tocar. Ocho de ellas son una columna de texto sin nada que separe los dispositivos encendidos de los apagados.
Una tarjeta es un botón. Toda la tarjeta es el objetivo del toque, el nombre va en 14 y el estado en 12, y el color hace el trabajo del interruptor: blanco con icono ámbar es encendido, oscuro con icono blanco es apagado. El usuario puede escanear ocho dispositivos de una mirada y ver que dos están encendidos en las primeras filas. Las tarjetas también pasan por debajo de la barra flotante de pestañas, lo que avisa de que la lista continúa.
No se eliminó nada. La Ceiling Light, la Shelf Light, las Blinds y el Air Purifier del borrador están detrás de "All 8" en Accesorios, así que todos los dispositivos siguen al alcance.
Regla para reutilizar: cuando cada elemento tiene un estado de encendido y apagado, muestra el estado con el propio color del elemento y haz que toda la tarjeta sea el objetivo.
Corrección 4: escenas en píldoras de verdad
Antes
Después
Una pequeña etiqueta SCENES sobre seis botones grises iguales en mayúsculas: Movie, Sleep, Away, Morning, Party, Reading, frente a una fila de píldoras redondeadas con iconos: Movie iluminada en blanco, Sleep y Away oscuras, la siguiente saliéndose del borde.
Las escenas son lo mejor de una app de casa inteligente, porque un toque cambia toda la habitación. En el borrador están abajo, bajo ocho filas, como seis botones grises idénticos. Parecen un formulario, y ninguno dice qué escena está activa.
La corrección sube las escenas, justo debajo de las pestañas de habitaciones, y da un icono a cada una. Miden 44 de alto, así que funcionan con el pulgar, y la escena activa se ilumina en blanco. Party aparece al deslizar las píldoras y Reading está en la pestaña Scenes.
Regla para reutilizar: pon la acción de más valor donde está el pulgar y muestra cuál está activa.
Las correcciones menores
- Se mantiene cada función. La Ceiling Light, la Shelf Light, las Blinds y el Air Purifier están detrás de All 8. El clima, la humedad y el consumo se abren desde los puntos de la cabecera. La campana y el engranaje pasan a Perfil, que lleva el punto de aviso.
- Márgenes iguales. El borrador tiene 14 px a la izquierda y 12 px a la derecha. La pantalla corregida usa un solo margen en ambos lados.
- Un solo acento. El ámbar aparece solo en los iconos de las tarjetas encendidas y en la pestaña activa. En el borrador está en cada interruptor y en varios iconos.
- Una capa de atenuado plana. Una capa de negro al 52% cubre la foto, sin degradado ni resplandor, así que la lámpara se lee y los libros se atenúan.
- Menos pestañas. Cuatro pestañas en una barra flotante de 62 px sustituyen a cinco pestañas con iconos rellenos y de contorno mezclados.
- Escala tipográfica. El texto va de 12 a 34 pt, con etiquetas de pestaña de 10 pt, en lugar de los 9 a 15 px del borrador.
Audita tu propia pantalla de casa inteligente
| Pregunta | Por qué importa |
|---|---|
| ¿La pantalla dice en qué habitación está? | El control depende del lugar |
| ¿Se ve el estado de encendido y apagado sin leer? | El color es más rápido que una línea de 9 px |
| ¿Todo el dispositivo es un objetivo de toque? | Un interruptor pequeño es difícil de acertar |
| ¿Las escenas están al alcance del pulgar y la activa está marcada? | Son la acción de más valor |
| ¿Las habitaciones muestran la selección con color? | El subrayado se lee como un enlace |
| ¿Se usa el ámbar, o cualquier acento, para un solo significado? | Un acento funciona una vez |
Consigue el archivo de Figma
El archivo gratis incluye el borrador junior, la pantalla corregida y cada parte como componente.
Archivo gratis de Figma
Rediseño de pantalla de casa inteligente, antes y después
Las dos pantallas y cada parte como componente de Figma. Gratis, solo lectura, duplícalo a tus borradores.
FAQ
¿Cómo se debe diseñar la pantalla de inicio de una app de casa inteligente?
Empieza con el nombre de la habitación y una línea de estado en vivo, como "22° · 3 luces encendidas". Muestra los dispositivos como tarjetas de dos columnas donde el color significa encendido, pon las escenas en píldoras cerca de arriba y mueve el clima y los ajustes detrás de un menú.
¿Debe una app de casa inteligente usar tarjetas o listas para los dispositivos?
Tarjetas, para una pantalla de inicio. Toda la tarjeta es el objetivo del toque y el color muestra el estado de un vistazo. Una lista va bien para una vista larga de ajustes o historial.
¿Cómo se muestra que un dispositivo está encendido en una app de casa inteligente?
Con la propia tarjeta: una tarjeta blanca con icono ámbar para encendido y una tarjeta oscura con icono blanco para apagado, así nadie tiene que leer una línea de estado ni buscar un interruptor pequeño.
¿Dónde deben ir las escenas en una app de casa inteligente?
Cerca de arriba, bajo las pestañas de habitaciones, como píldoras que el pulgar alcanza, con la escena activa iluminada. Las escenas cambian una habitación entera con un toque, así que no deberían quedar bajo ocho filas.
¿Cuántas pestañas necesita una app de casa inteligente?
Cuatro bastan: Home, Scenes, Automations y Profile. Las habitaciones viven en las pestañas deslizables de la pantalla de inicio.
¿Por qué no subrayar los nombres de las habitaciones en una app de casa inteligente?
El subrayado se lee como un enlace dentro de un texto. Las pestañas simples, con la habitación seleccionada en blanco y las demás en gris, muestran qué habitación está abierta y dejan que la fila se deslice.
Fuentes
- Las dos pantallas son nuestras, diseñadas y medidas en Figma. La app, Haven, y sus dispositivos son inventados. Los números son coherentes: tres luces están encendidas en ambas pantallas, la Floor Lamp está al 80% y el termostato está fijado en 22° en las dos.
- Patrón estudiado: Apple Home, con un nombre de habitación y su estado arriba, tarjetas para los accesorios y escenas como píldoras. Los tamaños de texto siguen iOS (12 a 34 pt, etiquetas de pestaña de 10 pt).
- Los iconos son de Phosphor (MIT). Fotos de Pexels: Yusuf P y Jan Vee.
- 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
