¿Especificaciones de diseño de iOS?
Serie especificaciones de diseño IOS ***10 artículos. Este es el octavo artículo, que presenta IconsandImages.
El primero es imagesizeandresolving(imagesizeandresolving)
El sistema de coordenadas para colocar contenido en la pantalla de iOS se basa en mediciones en puntos, que se asignan a los píxeles de la pantalla.
Los píxeles por pulgada de un monitor de resolución estándar son 1:1 (o @1X), donde un píxel equivale a un punto. Los monitores de alta resolución tienen más píxeles por pulgada y ofrecen un factor de escala de 2,0 o 3,0 (llamado @2x y @3x). Por tanto, una pantalla de alta resolución requiere una imagen con más píxeles.
Por ejemplo, digamos que tienes una imagen con resolución estándar de 100 píxeles (@1x). La versión @2x de la imagen es 200px×200px y la versión @3x es 300px×300px. Imágenes de alta resolución de todos los íconos/imágenes disponibles para todos los dispositivos compatibles.
Dependiendo del dispositivo, puedes lograrlo multiplicando el número de píxeles de cada imagen por un factor de escala específico.
Diseñar trabajos en alta resolución
1) Utilice una cuadrícula de 8 x 8 píxeles.
La cuadrícula puede mantener las líneas claras, asegurando que el contenido de todos los tamaños sea lo más claro posible, reduciendo el retoque y la nitidez. Alinee los límites de la imagen con la cuadrícula para minimizar los detalles borrosos y de medio píxel que pueden aparecer al alejar la imagen.
2) Producir la obra en un formato adecuado.
Normalmente, las ilustraciones de mapa de bits/ráster en archivos PNG se escanean línea por línea.
PNG admite la transparencia porque no tiene pérdidas, por lo que los artefactos de compresión no borran detalles importantes ni cambian los colores. Esta es una excelente opción para obras de arte complejas que requieren efectos como sombras, texturas y luces.
Las fotos están en JPEG. Su algoritmo de compresión a menudo produce tamaños más pequeños que los formatos sin pérdida, y los artefactos pueden ser difíciles de distinguir en las fotografías. Sin embargo, el ícono de una aplicación real se ve mejor como PNG. Para glifos y otras ilustraciones vectoriales planas que requieren escalado de alta resolución, utilice PDF.
3) Para gráficos PNG que no requieren todos los colores de 24 bits, utilice una paleta de 8 bits.
El uso de una paleta de 8 bits reduce el tamaño del archivo sin reducir la calidad de la imagen. Esta paleta no es adecuada para fotografías.
4) Optimice los archivos JPEG y encuentre el equilibrio entre tamaño y calidad.
La mayoría de archivos JPEG se pueden comprimir sin reducir significativamente la calidad de la imagen final. Incluso una pequeña cantidad de compresión puede ahorrar mucho espacio en disco. Experimente con la configuración de compresión en cada imagen para encontrar el mejor valor aceptable.
5) Proporcionar etiquetas de texto alternativas para imágenes e íconos.
Las etiquetas de texto alternativo no son visibles en la pantalla, pero permiten que VoiceOver describa de forma audible lo que hay en la pantalla, lo que facilita la navegación para las personas con discapacidad visual.
2. Ícono de aplicación (AppIcon)
Cada aplicación necesita un ícono hermoso e inolvidable que llame la atención en la AppStore y se destaque entre la multitud en la pantalla de inicio. Su ícono es la primera vez que comunica el propósito de su aplicación. También aparece en todo el sistema, como en la configuración y los resultados de búsqueda.
1) Abrazar es sencillo.
Encuentra un elemento que capture la esencia de tu aplicación y exprésalo con una forma simple y única. Añade detalles con cuidado. Si el contenido o la forma de un icono es demasiado complejo, puede resultar difícil distinguir los detalles, especialmente en tamaños pequeños.
2) Proporcionar un enfoque.
Diseña un icono con un único punto central que llame inmediatamente la atención e identifique claramente tu aplicación.
3) Diseñar un icono reconocible.
La gente puede descubrir qué significa un icono sin analizarlo. Por ejemplo, el ícono de la aplicación Correo usa un sobre, que a menudo se asocia con mensajes. Tómate el tiempo para diseñar un ícono abstracto hermoso y atractivo que represente artísticamente el propósito de tu aplicación.
4) Mantén el fondo simple y evita la transparencia.
Asegúrate de que tu ícono sea opaco y no abarrote el fondo. Dale un fondo simple para no distraer la atención de otros íconos de aplicaciones cercanas. No es necesario que completes todo el ícono.
5) Utilizar texto sólo para las partes necesarias del logo o logotipo.
El nombre de la aplicación aparece debajo del icono de la pantalla de inicio. No utilice palabras innecesarias para repetir nombres ni decirle a la gente lo que hace su aplicación, como "ver" o "reproducir". Si su diseño contiene algún texto, enfatice el texto que sea relevante para el contenido real proporcionado por la aplicación.
6) No incluir fotografías, capturas de pantalla ni elementos de la interfaz.
Las fotografías de tamaño pequeño pueden dificultar la visualización de los detalles. Las capturas de pantalla son demasiado complejas para el ícono de una aplicación y no ayudan a transmitir el propósito de la aplicación.
Los elementos de la interfaz en los íconos son propensos a malentendidos y confusión.
7) No utilice réplicas de productos de hardware de Apple.
Los productos Apple están protegidos por derechos de autor y no pueden copiarse en sus íconos o imágenes. En general, evite mostrar copias de dispositivos, ya que los diseños de hardware cambian con frecuencia, lo que hace que los íconos parezcan obsoletos.
8) No coloques el ícono de tu aplicación en toda la interfaz.
Puede resultar confuso ver iconos con diferentes propósitos en toda la aplicación. En su lugar, considere incorporar la combinación de colores del ícono. Mira el color.
9) Prueba los iconos de diferentes fondos de pantalla.
No puedes predecir qué fondo de pantalla elegirán las personas para sus pantallas de inicio, así que no pruebes tu aplicación simplemente en busca de colores claros u oscuros. Mira cómo queda en diferentes fotos. Intente utilizar el dispositivo frente a un dispositivo real con un fondo dinámico que cambie el ángulo de visión a medida que el dispositivo se mueve.
10) Mantén el icono cuadrado.
Se aplica una máscara para redondear automáticamente las esquinas del icono.
1.? Propiedades del ícono de la aplicación
Todos los íconos de la aplicación deben cumplir con las siguientes especificaciones:
2. Tamaño del ícono de la aplicación
Una vez instalada una aplicación, cada aplicación debe El programa debe. proporciona un ícono pequeño para usar en la pantalla de inicio y en todo el sistema, y un ícono grande para mostrar en la AppStore.
Proporciona iconos de diferentes tamaños para diferentes dispositivos. Asegúrese de que el ícono de su aplicación se vea bien en todos los dispositivos compatibles. Empareje el ícono de AppStore con un ícono pequeño. Aunque el ícono de AppStore se usa de manera diferente al ícono pequeño, sigue siendo el ícono de su aplicación. Generalmente debería coincidir con el aspecto de la versión más pequeña, aunque puede ser más rico y detallado ya que no tiene ningún efecto visual aplicado.
3.Iconos de notificación, configuración y búsqueda de Spotlight
Cada aplicación también debe proporcionar un pequeño ícono que iOS puede mostrar cuando el nombre de la aplicación coincide con una palabra clave en el ícono de búsqueda de Spotlight.
Además, proporcione un pequeño icono que se pueda mostrar en la aplicación "Configuración" integrada del sistema. Las aplicaciones que admiten funciones de notificación también deben proporcionar un pequeño icono que se mostrará en las notificaciones. Asegúrese de que todos los íconos identifiquen claramente su aplicación. Lo ideal es que coincidan con el icono de tu aplicación.
Si no proporcionas estos íconos, iOS puede reducir el ícono de tu aplicación principal para que se muestre en estas ubicaciones.
No agregues una superposición ni un borde al ícono de configuración. iOS agrega automáticamente un borde de 1 boceto a todos los íconos para que se vean más amigables contra el fondo blanco establecido.
4. Iconos de aplicaciones seleccionables por el usuario
Para algunas aplicaciones, la personalización es una característica que puede despertar el interés del usuario y mejorar su experiencia. Si proporciona valor a su aplicación, puede permitir que los usuarios elijan uno de los íconos predefinidos integrados en su aplicación como ícono de aplicación de respaldo.
Por ejemplo, una aplicación deportiva puede proporcionar iconos de diferentes equipos, o una aplicación con modos claro y oscuro puede proporcionar los correspondientes iconos claros y oscuros.
Tenga en cuenta que los iconos de las aplicaciones solo se pueden cambiar a petición del usuario y siempre se le proporcionará la confirmación de dichos cambios.
Proporciona íconos alternativos en varios tamaños y consistencia visual. Al igual que el ícono de la aplicación principal, cada ícono de espera se proporciona como un conjunto de imágenes relacionadas en diferentes tamaños. Cuando un usuario selecciona un ícono alternativo, el ícono del tamaño correspondiente reemplazará al ícono en otras ubicaciones, como la pantalla de inicio, Spotlight y el sistema.
Para garantizar que el ícono de espera se muestre uniformemente en todo el sistema y evitar que los usuarios vean una versión del ícono en la pantalla de inicio y una versión completamente diferente del ícono en la configuración, por ejemplo, Proporciona la misma versión del icono de la aplicación principal. Iconos del mismo tamaño (excepto el icono de AppStore).
Tres. Contras del sistema)IOs 12+02 y anteriores.
En iOS13 o posterior, el símbolo SF se usa más para representar tareas y modos en la APLICACIÓN. Cuando su aplicación se ejecute en iOS12 o anterior, siga estas pautas. El sistema proporciona íconos integrados para representar tareas comunes y tipos de contenido en una variedad de casos de uso.
En aplicaciones que ejecutan iOS 12 y versiones anteriores, es una buena idea utilizar estos íconos integrados siempre que sea posible porque ya son familiares para los usuarios.
Los iconos del sistema se utilizan como se esperaba. Las imágenes proporcionadas por cada sistema tienen significados tanto específicos como universales. Para evitar confundir a los usuarios, cada imagen debe usarse según su significado y uso sugerido. Proporcione una etiqueta de texto para el icono. Las etiquetas de texto alternativo no son visibles en la pantalla, pero permiten al Narrador describir visualmente lo que hay en la pantalla, lo que facilita la navegación para las personas con discapacidad visual. Si no puede encontrar un ícono que cumpla con sus requisitos entre los íconos proporcionados por el sistema, diseñe un ícono personalizado. En lugar de abusar de los iconos que proporciona el sistema, diseña tu propio dispositivo.
1. Iconos de la barra de navegación y de la barra de herramientas
Utilice los siguientes iconos en la barra de navegación y en la barra de herramientas.
Nota: Puede utilizar texto en lugar de iconos para representar elementos en la barra de navegación o en la barra de herramientas.
Por ejemplo, Calendario usa Hoy, Calendario y Bandeja de entrada en la barra de herramientas.
También puedes utilizar elementos de espaciado fijo para proporcionar relleno entre los íconos de navegación y los íconos de la barra de herramientas.
2. Iconos de la barra de pestañas
Utilice los siguientes iconos en la barra de pestañas.
3. Iconos de acciones rápidas de la pantalla de inicio
Utilice los siguientes iconos en el menú de acciones rápidas de la pantalla de inicio.