Iconos y diseño

Los iconos son un elemento básico en las interfaces de usuario. También constituyen una parte fundamental de las identidades de las aplicaciones. Esta página proporciona una descripción general del uso de iconos. También describe qué iconos están disponibles a través de la plataforma GNOME, presenta recursos para crear nuevos iconos e incluye algunas pautas generales sobre el uso de iconos en las interfaces de usuario.

Estilos de iconos

En GNOME 3 se usan dos estilos de iconos: a todo color y simbólicos

Los iconos a todo color son coloridos y detallados, y están optimizados para tamaños más grandes. Se definen como SVG de 128×128px, y son más nítidos cuando se amplían en múltiplos de 128 (como 256✕256 y 512✕512). El diseño de iconos a todo color también les permite ser nítidos a 64×64px y 32×32px, pero no se recomienda hacerlos más pequeños.

Los iconos simbólicos son simples y monocromáticos, y están diseñados para funcionar bien en tamaños más pequeños. Se definen como 16✕16px SVG y se pueden escalar a múltiplos de 16 (como 32✕32, 64✕64, 128✕128). Los iconos simbólicos generalmente tienen un color neutro, aunque su color se puede cambiar mediante programación.

Usos de iconos

Los iconos de aplicaciones son el tipo de iconos más destacado. Cada aplicación debe tener su propio icono de aplicación único y bonito: es la cara de la aplicación y el primer elemento visual que ve un usuario cuando busca nuevas aplicaciones.

Los iconos de las aplicaciones usan el estilo a todo color. También se recomienda que las aplicaciones proporcionen una versión simbólica de su icono, que se utiliza para la función de accesibilidad de alto contraste, así como en contextos donde se requiere un icono legible de baja resolución.

Los iconos de la interfaz de usuario suelen usar el estilo simbólico y este es el estilo de icono principal utilizado para los controles de la interfaz de usuario. El ejemplo más común y obvio del uso de iconos simbólicos está en los botones.

Además de los iconos de las aplicaciones, el estilo de ícono a todo color también se puede usar en los casos en que los iconos se muestran en tamaños grandes y están destinados a ser el centro de atención. Los iconos de archivos y carpetas en un administrador de archivos son un buen ejemplo de esto.

Iconos de almacén y crear el suyo propio

GNOME proporciona un conjunto de iconos estándar que las aplicaciones pueden usar. Se puede acceder directamente a través de GTK. Los nombres de los iconos siguen la especificación de iconos de Freedesktop. Las versiones simbólicas de los iconos tienen el sufijo -symbolic, como open-menu-symbolic.

Las directrices de diseño de iconos proporcionan más detalles sobre cómo crear sus propios iconos, incluidos los de aplicaciones.

Usar iconos en su interfaz

Los iconos son un elemento común de la interfaz de usuario y tienen algunas ventajas prácticas sobre las etiquetas de texto (como ser más pequeños). Al mismo tiempo, el uso excesivo de iconos puede generar confusión y una experiencia de usuario deficiente. Del mismo modo, el uso de iconos inapropiados a menudo puede dificultar el uso de una interfaz.

Por lo tanto, use solo iconos cuyo significado sea comúnmente reconocido. Si un icono comúnmente reconocido no está disponible, podría ser mejor usar una etiqueta de texto. Típicamente, la convención establece qué iconos son comúnmente reconocidos. Este conjunto de iconos es bastante pequeño e incluye iconos estándar como búsqueda, menú, reenviar, retroceder y compartir. Si tiene dudas, use solo iconos que se usen con frecuencia en otras aplicaciones.

Otras cosas que tener en cuenta al usar iconos:

  • Considere qué iconos serán significativos en el contexto específico de su aplicación; los usuarios de herramientas específicas estarán a menudo familiarizados con símbolos específicos de ese área.

  • Recuerde que algunos iconos sólo tienen sentido cuando están junto a otros del mismo tipo. Por ejemplo, un icono multimedia para detener es simplemente un cuadrado, y puede no identificarse como un icono de detener sin otros controles multimedia (como reproducir, pausar u omitir) visibles cercanos a él. Del mismo modo, el icono de eliminar un elemento de una lista como un signo menos (una única línea) no se reconocerá sin el correspondiente icono «+» de añadir.