Lineamientos sobre el diseño de íconos

Crear una apariencia y un estilo unificado en toda la interfaz de usuario le agrega valor a tu producto. Además, simplificar el estilo gráfico hará que la IU les parezca más profesional a los usuarios.

En este documento, se proporciona información para ayudarte a crear íconos que puedas usar en varias partes de la interfaz de usuario de tu app y que coincidan con el estilo general que se usa en el marco de trabajo de Android 2.x. Si sigues estos lineamientos, podrás crear una experiencia optimizada y uniforme para los usuarios.

En los siguientes artículos, se explican los lineamientos detallados para los tipos de íconos que se suelen usar en las apps de Android:

Íconos de selector adaptables
Un ícono de selector adaptable es un gráfico que representa a la app en la pantalla principal de un dispositivo y en la ventana del selector, para los dispositivos que ejecutan Android 8.0 (con una API de nivel 26) y versiones posteriores.
Íconos de selector heredados
Un ícono de selector heredado es un gráfico que representa a la app en la pantalla principal de un dispositivo y en la ventana del selector, para los dispositivos que ejecutan Android 7.1 (con una API de nivel 25) y versiones anteriores.
Íconos de menú
Los íconos de menú son elementos gráficos, ubicados en el menú de opciones, que los usuarios ven cuando presionan el botón Menú.
Íconos de la barra de acciones
Los íconos de la barra de acciones son objetos gráficos que representan elementos de acción en la barra de acciones.
Íconos de la barra de estado
Los íconos de la barra de estado se usan para representar notificaciones de la app en la barra de estado.
Íconos de pestaña
Los íconos de pestaña son elementos gráficos que se usan para representar pestañas específicas en una interfaz con varias pestañas.
Íconos de diálogo
Los íconos de diálogo aparecen en los cuadros de diálogo emergentes que requieren una interacción por parte del usuario.
Íconos de la vista de lista
Los íconos de la vista de lista se usan con ListView para representar los elementos de la lista gráficamente. Un ejemplo es la aplicación de Configuración.

Para comenzar a crear los íconos más rápido, puedes descargar el paquete de plantillas de íconos de Android.

Cómo usar el paquete de plantillas de íconos de Android

Este paquete es una colección de estilos de capas, texturas y diseños de plantilla que te facilitarán el proceso de crear íconos que cumplen con los lineamientos proporcionados en este artículo. Te recomendamos que descargues el archivo con el paquete de plantillas antes de comenzar a diseñar íconos.

Las plantillas de íconos se proporcionan en el formato de archivo de Adobe Photoshop (.psd). En este formato, se conservan las capas y los tratamientos de diseño que usamos al crear los íconos estándar para la plataforma de Android. Puedes cargar las plantillas en cualquier programa de edición de imágenes compatible, pero ten en cuenta que las opciones para trabajar directamente en las capas y los tratamientos pueden variar.

Haz clic en el siguiente vínculo para descargar el paquete de plantillas de íconos más reciente:

Descargar el paquete de plantillas de íconos para Android 4.0 »

Si quieres obtener una versión anterior del paquete de plantillas de íconos, consulta la sección Descargas en el cuadro de la esquina superior derecha de esta página.

Cómo proporcionar conjuntos de íconos específicos de densidad

Android está diseñado para ejecutarse en una gran variedad de dispositivos con diferentes resoluciones y tamaños de pantalla. Cuando diseñes los íconos para tu aplicación, es importante que recuerdes que tu aplicación podría instalarse en cualquiera de esos dispositivos. Según se detalla en el documento Cómo admitir varias pantallas, la plataforma de Android te permite crear íconos que se adaptan correctamente a cualquier dispositivo, independientemente del tamaño o la resolución de la pantalla, de manera muy fácil.

Lo más recomendable es crear un conjunto separado de íconos para cada densidad de pantalla general. Luego, debes almacenarlos en los directorios de recursos específicos de densidad en la aplicación. Cuando se ejecute la app, la plataforma de Android consultará las características de la pantalla del dispositivo y cargará los íconos desde el recurso específico de densidad. Para obtener más información sobre cómo almacenar los recursos específicos de densidad en la aplicación, consulta Calificadores del directorio de recursos para el tamaño y densidad de la pantalla.

Lee consejos sobre cómo crear y administrar conjuntos de íconos para varias densidades en la sección Sugerencias para diseñadores.

Sugerencias para diseñadores

A continuación, te mostramos algunas sugerencias que podrían resultarte útiles para desarrollar íconos o algún otro tipo de elemento de diseño para la aplicación. Estas sugerencias están pensadas para Adobe Photoshop o programas similares de edición de imágenes rasterizadas y vectoriales.

Usa convenciones de nombres comunes para los elementos de íconos

Intenta nombrar los archivos de forma tal que los elementos relacionados se agrupen en un directorio cuando se los ordene alfabéticamente. En particular, esta sugerencia te ayudará a usar un prefijo común para cada tipo de ícono. Por ejemplo:

Tipo de activo Prefijo Ejemplo
Íconos ic_ ic_star.png
Íconos del selector ic_launcher ic_launcher_calendar.png
Íconos de menú y de la barra de acciones ic_menu ic_menu_archive.png
Íconos de la barra de estado ic_stat_notify ic_stat_notify_msg.png
Íconos de pestaña ic_tab ic_tab_recent.png
Íconos de diálogo ic_dialog ic_dialog_info.png

Ten en cuenta que no es necesario usar un prefijo compartido de ningún tipo. Sin embargo, te resultará útil hacerlo.

Configura un espacio de trabajo donde se organicen los archivos para varias densidades

Si tu app admite varias densidades de pantallas, deberás crear varias versiones del mismo ícono. Para que sea más sencillo mantener y encontrar varias copias de los archivos en forma segura, te recomendamos que crees una estructura de directorios en tu espacio de trabajo a fin de organizar los archivos de elementos según la resolución. Por ejemplo:

art/...
        ldpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png
        mdpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png
        hdpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png
        xhdpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png

Esta estructura mantiene los directorios de las densidades específicas en los que, en última instancia, se almacenarán los elementos finalizados dentro de los recursos de la aplicación. Como la estructura del espacio de trabajo y de la aplicación es similar, puedes determinar rápidamente qué elementos deberías copiar a cada uno de los directorios de recursos de la aplicación. Separar los elementos según la densidad también te ayudará a detectar cualquier variación en el nombre de archivo para las distintas densidades. Estas detecciones son importantes, ya que los elementos que corresponden a distintas densidades deben tener el mismo nombre de archivo.

A modo de comparación, detallamos la estructura de directorio para los recursos de una aplicación típica:

res/...
        drawable-ldpi/...
            finished_asset.png
        drawable-mdpi/...
            finished_asset.png
        drawable-hdpi/...
            finished_asset.png
        drawable-xhdpi/...
            finished_asset.png

Usa formas de vector cuando sea posible

Muchos programas de edición de imágenes, como Adobe Photoshop, te permiten combinar formas vectoriales, capas rasterizadas y efectos. Siempre que sea posible, usa formas vectoriales. De esta manera, si es necesario, los elementos se pueden agrandar sin perder detalles o nitidez en los bordes.

Usar vectores también te facilitará el proceso de alinear los bordes y las esquinas a los límites de píxeles en resoluciones más pequeñas.

Comienza con mesas de trabajo grandes

Ya que deberás crear elementos para distintas densidades de pantalla, es recomendable que comiences el diseño del ícono en mesas de trabajo grandes con dimensiones que sean múltiplos de los tamaños del ícono objetivo. Por ejemplo, los íconos de selector pueden tener 96, 72, 48 o 36 píxeles de ancho, según la densidad de la pantalla. Si desde el principio dibujas los íconos de selector en una mesa de trabajo de 864 x 864, será más sencillo ajustar los íconos y obtendrás una imagen más nítida. Para hacerlo, debes reducir la escala de la mesa de trabajo a los tamaños objetivo para obtener el elemento final.

Cuando cambies el tamaño de las imágenes, vuelve a dibujar las capas de mapa de bits si es necesario

Si aumentas el tamaño de una imagen desde una capa de mapa de bits, y no desde una capa vectorial, tendrás que volver a dibujar esas capas manualmente para que se vean de forma nítida en densidades más altas. Por ejemplo, si se pinta un círculo de 60 x 60 como un mapa de bits para mdpi, deberás volver a pintarlo como un círculo de 90 x 90 para hdpi.

Cuando guardes los elementos de imagen, quita los metadatos innecesarios

A pesar de que las herramientas del SDK de Android comprimirán automáticamente los PNG cuando se integren los recursos de la app en el archivo binario de la aplicación, se recomienda quitar los encabezados y metadatos innecesarios de los elementos PNG. Algunas herramientas, como OptiPNG o Pngcrush, quitan estos metadatos y optimizan los tamaños de archivo de los elementos de imagen.

Asegúrate de que los elementos que corresponden a distintas densidades tengan el mismo nombre de archivo

Los archivos de elementos de ícono que corresponden a cada densidad deben tener el mismo nombre de archivo, pero se los debe almacenar en los directorios de recursos específicos de la densidad. De esta forma, el sistema puede buscar y cargar el recurso correspondiente según las características de la pantalla del dispositivo. Por este motivo, es importante que verifiques que el conjunto de elementos en cada directorio sea coherente y que los archivos no usen sufijos específicos para la densidad.

Para obtener más información acerca de los recursos específicos de densidad y cómo los usa el sistema para cumplir con los requisitos de los distintos dispositivos, consulta Cómo admitir varias pantallas.