Habilidad de Diseño de Icono de App
Disparador
Usar para cualquier solicitud de nuevo icono de app, rediseño de icono, crítica de icono o exportación de icono de app de Apple. Consultar la documentación técnica y de diseño actual de Apple cuando las especificaciones de producción sean importantes.
Proceso
- Identificar el propósito central de la aplicación y su lenguaje de marca. Usar la marca previamente establecida si corresponde; de lo contrario, elegir una metáfora visual distintiva.
- Reducir la metáfora a un símbolo central reconocible con formas simples, rellenas y en negrita, y una silueta clara. Evitar detalles pequeños, texturas recargadas, trazos finos, capturas de pantalla, texto innecesario y brillo excesivo.
- Elegir una paleta deliberada y restringida, con contraste claro entre el fondo y el primer plano. Centrar el icono principal ópticamente y dejar un área de seguridad generosa para las máscaras del sistema.
- Diseñar para que sea identificable en tamaños pequeños. Vista previa a tamaño completo, 180 píxeles, 60 píxeles y 30 píxeles (pruebas de diseño, no requisitos de píxeles prescritos por Apple).
- Considerar los modos predeterminado, oscuro, transparente y tintado. Mantener el concepto y la reconocibilidad en todas las apariencias.
- Revisar la lista de verificación de control de calidad; simplificar cualquier elemento que se convierta en ruido a pequeña escala.
- Producir los activos de la más alta calidad en los formatos realmente compatibles con las herramientas disponibles. Nunca afirmar que se tiene una fuente vectorial/editable o variantes si no se han creado.
Guías de Interfaz Humana de Apple
- Preferir la simplicidad y el reconocimiento inmediato. Los rasgos finos pueden volverse ruidosos una vez que el sistema añade reflejos y sombras.
- Preferir ilustraciones a fotos y no reproducir simplemente la interfaz de usuario de la aplicación.
- Evitar líneas extremadamente finas y ángulos marcados si su detalle se pierde en tamaños más pequeños.
- Evitar palabras no esenciales, lemas o declaraciones específicas de la plataforma.
- No replicar hardware de Apple.
- Usar capas cuadradas sin enmascarar; el sistema aplica las esquinas redondeadas/máscaras circulares por sí mismo. No hornear esquinas redondeadas en el arte base.
- Posicionar el contenido importante de forma centralizada para que el enmascaramiento del sistema no lo trunque.
- Los iconos deben mantener una consistencia visual en todos los dispositivos y apariencias.
Tamaños y formas del sistema de Apple (verificado 2026-10-24)
| Destino | Lienzo | Máscara del sistema |
|---|---|---|
| iOS, iPadOS, macOS | 1024 × 1024 px | rectángulo redondeado |
| watchOS | 1088 × 1088 px | círculo |
| visionOS | 1024 × 1024 px | círculo |
| tvOS | 800 × 480 px | rectángulo redondeado |
- Utilizar sRGB para exportaciones portátiles; Display P3 también es compatible en plataformas Apple según la documentación.
- Para el flujo de trabajo actual de Apple, preferir arte en capas e Icon Composer para previsualizar plataformas y variantes de apariencia (predeterminado, oscuro, claro/oscuro transparente, claro/oscuro tintado).
- Dibujar el arte como vectores y exportar cada capa ajustable de forma independiente como SVG cuando sea posible, convirtiendo el texto en trazados. Las capas PNG son adecuadas si las funciones SVG no son compatibles.
- Deferir desenfoques, sombras, efectos especulares, translucidez, opacidad, degradados y efectos de fondo a Icon Composer al preparar iconos en capas de vidrio líquido (Liquid Glass).
- El fondo debe cubrir todo el lienzo. Para un icono iOS estático, usar por defecto un fondo opaco a sangre completa. Un glifo aislado y transparente es un tipo de activo diferente, no un icono completo.
- El sistema aplica máscaras; no exportar geometría de máscara en las capas de arte.
- Se puede entregar un PNG plano de 1024 píxeles para flujos de trabajo de iconos estáticos, pero no es equivalente a un activo
.iconen capas de Icon Composer.
Lista de verificación de control de calidad
- Un concepto memorable, silueta reconocible
- Legible en tamaño pequeño y en escala de grises
- Colores limitados y fuerte contraste
- Sin palabras innecesarias, textura, detalles finos ni capturas de pantalla
- Centrado óptico y espaciado de borde seguro
- Arte fuente cuadrado y sin enmascarar, fondo a sangre completa
- Revisado en apariencias oscura, tintada y transparente
- Tamaño de plataforma de destino correcto, espacio de color y formato de exportación
- Las afirmaciones sobre editabilidad, capas y formatos coinciden con los archivos reales
Superposición opcional específica de la app actual (cerebro/mates)
Usar solo para este proyecto específico, no para todas las aplicaciones:
- Máximo tres colores sólidos; paleta extraída de azul cobalto/eléctrico, violeta y rosa magenta (o azul marino intenso cuando corresponda).
- Sin degradados a menos que el usuario lo anule.
- Silueta de cerebro abstracta y simplificada con un puñado de lóbulos en negrita; sin ilustración anatómica hiperdetallada.
- Mínimo, reconocible y atractivo en tamaños de icono pequeños. La profundidad debe ser moderada y no debe añadir más colores.
- El fondo del icono de la app forma parte de la composición, no es transparente (a menos que se solicite una capa de símbolo separada).
Plantilla de resumen para generación de imágenes
'Crear un icono de aplicación cuadrado para [APP], con un símbolo central memorable [SÍMBOLO], compuesto por un número reducido de formas sólidas de alto contraste en [PALETA], sobre un fondo opaco a sangre completa [FONDO]. Centrar por peso visual, dejar un amplio espacio de respiro alrededor de los bordes exteriores, evitar degradados [si se solicita], letras, elementos de interfaz y detalles menores, fuerte reconocimiento en tamaños pequeños, sin máscara de esquinas redondeadas incorporada.'
Fuente de verdad
- HIG de iconos de app de Apple: https://developer.apple.com/design/human-interface-guidelines/app-icons
- Flujo de trabajo de Icon Composer de Apple: https://developer.apple.com/documentation/xcode/creating-your-app-icon-using-icon-composer
- Recursos de diseño de Apple: https://developer.apple.com/design/resources/
- Icon Composer de Apple: https://developer.apple.com/icon-composer/
El consejo de diseño es una síntesis; verificar las especificaciones actuales de Apple antes del lanzamiento. Este es un documento de habilidad portátil, no una prueba de que esté registrado como una habilidad ejecutable de sistema/plugin.