≡En resumen
- Las guías de plataforma te dicen cómo debe comportarse tu app para que se sienta nativa en iOS, Android o Windows.
- Las WCAG no son una guía de estilo: son criterios de accesibilidad comprobables y la base de la normativa europea.
- Cada plataforma fija tamaños mínimos de toque distintos: 44 × 44 puntos en iOS, 48 × 48 dp en Android y 24 × 24 píxeles CSS como mínimo en WCAG 2.2.
- Las guías se actualizan: Liquid Glass de Apple y Material 3 Expressive cambiaron el lenguaje visual en 2025.
- Tu producto necesita sus propias guías, apoyadas en las de la plataforma y en tu marca.
01 ¿Qué son las user interface guidelines?
Hay tres niveles: las guías de plataforma (Apple, Google, Microsoft), los estándares de accesibilidad (las WCAG del W3C) y las guías propias de cada producto, que suelen formar parte de su sistema de diseño. Las tres se complementan.
02 Apple HIG, Material Design, Fluent y GOV.UK: comparativa
| Guía | Quién la publica | Plataformas | Recursos |
|---|---|---|---|
| Human Interface Guidelines (HIG) | Apple | iOS, iPadOS, macOS, watchOS, tvOS y visionOS | UI kits para Figma y Sketch, fuentes SF y SF Symbols |
| Material Design 3 | Android, web y Flutter | Kit de diseño para Figma, Material Theme Builder y componentes en código | |
| Fluent 2 | Microsoft | Web (React), Windows, iOS y Android | UI kits para Figma y librerías de componentes |
| GOV.UK Design System | Gobierno del Reino Unido | Servicios web públicos | Estilos, componentes, patrones y GOV.UK Frontend en código |
Las dos primeras marcan cómo se usan los móviles de casi todo el mundo, así que conviene conocerlas aunque diseñes para la web. Apple las lleva publicando desde la época del Macintosh; Google presentó Material Design en 2014 y Microsoft, el Fluent Design System en mayo de 2017. La de GOV.UK es la referencia más citada para servicios públicos y formularios, por su investigación con usuarios reales.
03 Human Interface Guidelines de Apple
Las HIG cubren fundamentos (color, tipografía, iconos, materiales, accesibilidad), patrones (búsqueda, carga, onboarding), componentes y requisitos por plataforma. En junio de 2025, en la WWDC, Apple presentó Liquid Glass, un material translúcido que unifica el diseño de todos sus sistemas, y actualizó las guías y los UI kits en consecuencia.
| Plataforma | Tamaño por defecto | Tamaño mínimo |
|---|---|---|
| iOS y iPadOS | 44 × 44 pt | 28 × 28 pt |
| macOS | 28 × 28 pt | 20 × 20 pt |
| watchOS | 44 × 44 pt | 28 × 28 pt |
| tvOS | 66 × 66 pt | 56 × 56 pt |
| visionOS | 60 × 60 pt | 28 × 28 pt |
04 Material Design 3 y Fluent 2
Material Design 3
El sistema de Google para Android y la web. Destaca por su color dinámico, que genera la paleta a partir de un color o del fondo de pantalla, y por sus roles de color semánticos.
Material 3 Expressive
Actualización presentada en mayo de 2025 con Android 16: animaciones más elásticas, más formas, más contraste y tipografía más grande. Google la basó en 46 estudios con más de 18.000 participantes.
Tamaño de toque en Android
La documentación de accesibilidad de Android pide que cada elemento interactivo tenga un área táctil de al menos 48 × 48 dp.
Fluent 2
El sistema de Microsoft para Windows, Microsoft 365 y sus apps en web, iOS y Android, con kits de Figma y componentes para React.
05 GOV.UK Design System: la referencia para formularios y servicios
El sistema de diseño del Gobierno británico no está pensado para una plataforma, sino para servicios web que tiene que poder usar toda la población. Por eso sus guías se apoyan en investigación con usuarios y documentan no solo componentes, sino patrones completos, como pedir una dirección, una fecha o crear una cuenta.
- ✓Una pregunta por página en los formularios largos, para que el usuario se concentre en una sola respuesta.
- ✓Un enlace «Atrás» en cada página de preguntas, porque muchas personas no se fían del botón del navegador cuando introducen datos.
- ✓El botón para avanzar dice «Continuar» y se alinea a la izquierda para que no pase desapercibido.
- ✓Etiquetas siempre visibles y sin texto de ejemplo dentro del campo.
- ✓Errores descritos en lenguaje llano, junto al campo y en un resumen al principio de la página.
06 WCAG 2.2: las guías de accesibilidad que aplican a todas
Las Pautas de Accesibilidad para el Contenido Web (WCAG) del W3C no dicen qué aspecto debe tener tu interfaz, sino qué debe cumplir para que la pueda usar cualquier persona. La versión 2.2 añadió nueve criterios nuevos (foco visible no tapado, alternativas al arrastre, tamaño de objetivo, autenticación accesible, ayuda coherente, entre otros) y retiró el criterio 4.1.1 de análisis sintáctico.
| Criterio | Nivel | Qué exige |
|---|---|---|
| 1.4.3 Contraste mínimo | AA | Contraste de al menos 4,5:1 para el texto normal (3:1 para texto grande) |
| 1.4.11 Contraste sin texto | AA | Contraste de 3:1 para bordes de campos, iconos y estados de los controles |
| 2.4.7 Foco visible | AA | Que siempre se vea qué elemento tiene el foco del teclado |
| 2.5.8 Tamaño del objetivo (mínimo) | AA | Objetivos de al menos 24 × 24 píxeles CSS, salvo excepciones |
| 3.3.1 Identificación de errores | A | Que los errores se detecten y se describan en texto |
| 1.3.5 Identificar el propósito de la entrada | AA | Que los campos de datos personales se puedan autocompletar |
07 Cómo crear las user interface guidelines de tu producto
-
1
Parte de la plataforma
Decide qué adoptas tal cual de Apple, Material o Fluent y qué personalizas.
-
2
Fija los fundamentos
Color, tipografía, espaciado, retícula, iconos y radios, expresados como design tokens.
-
3
Documenta componentes
Cada componente con su propósito, variantes, estados, cuándo usarlo y cuándo no.
-
4
Añade patrones
Soluciones para tareas repetidas: formularios, búsqueda, filtros, errores, estados vacíos.
-
5
Escribe las reglas de texto
Tono, tuteo o usted, formato de fechas y precios, y cómo redactar botones y errores.
-
6
Integra la accesibilidad
Criterios de WCAG 2.2 AA dentro de cada componente, no en un documento aparte.
-
7
Mantén y versiona
Nombra un responsable, publica cambios y revisa las guías cuando la plataforma cambie.
Las guías se aplican mejor cuando vienen acompañadas de piezas listas para usar: un UI kit en la herramienta de diseño y una librería de componentes en código. Los principios generales de la disciplina los tienes en qué es el UI design.
Si vas a lanzar una app, un equipo de diseño UX para apps aplica desde el primer boceto las guías de cada plataforma, y una empresa de desarrollo de aplicaciones para iOS y Android las respeta al programar, lo que también evita sorpresas en la revisión de las tiendas.
Preguntas frecuentes sobre User interface guidelines
Son documentos con principios, reglas y patrones que indican cómo diseñar las interfaces de una plataforma o producto: componentes, medidas, navegación, textos y accesibilidad.
Son las guías oficiales de Apple para diseñar apps en iOS, iPadOS, macOS, watchOS, tvOS y visionOS, con fundamentos, patrones, componentes y requisitos por plataforma.
Material Design es el sistema de Google para Android y la web; las HIG son las guías de Apple. Difieren en navegación, controles, tipografía y tamaños, como 48 dp de toque en Android frente a 44 puntos en iOS.
Son un estándar del W3C, pero la normativa europea de accesibilidad remite a ellas, así que en la práctica son obligatorias para administraciones públicas y para muchos servicios digitales privados desde junio de 2025.
Depende de la guía: Apple recomienda 44 × 44 puntos en iOS, Android pide 48 × 48 dp y WCAG 2.2 fija un mínimo de 24 × 24 píxeles CSS en el nivel AA.
Es el material y lenguaje visual translúcido que Apple presentó en la WWDC de junio de 2025 para unificar el diseño de todos sus sistemas operativos.
Sí, en cuanto varias personas diseñan o programan tu producto. Sin ellas, cada pantalla acaba resolviendo lo mismo de forma distinta.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗