Iconos de aplicaciones de Windows

Los iconos proporcionan una notación abreviada visual para una acción, un concepto o un producto. Al comprimir el significado en una imagen simbólica, los iconos pueden cruzar las barreras del lenguaje y ayudar a conservar un recurso valioso: espacio en pantalla.

Los iconos adecuados armonizan con la tipografía y con el resto del lenguaje de diseño. No mezclan metáforas, y solo comunican lo que se necesita, tan rápido como sea posible.

Los iconos pueden aparecer dentro de las aplicaciones y fuera de ellas:

Iconos de dentro de la aplicación

Dentro de la aplicación, usa iconos para representar una acción, como copiar texto o ir a la página de configuración.

Iconos de fuera de la aplicación

Fuera de la aplicación, Windows usa un icono para representar la aplicación en el menú Inicio y en la barra de tareas. Si el usuario elige anclar la aplicación al menú Inicio, el icono de inicio de la aplicación puede presentar el icono de la aplicación. El icono de la aplicación aparece en la barra de título y puedes elegir crear una pantalla de presentación con el logotipo de la aplicación.

En este artículo se describen iconos dentro de la aplicación. Para obtener información sobre los iconos fuera de la aplicación (iconos de aplicación), consulta el artículo Iconography in Windows (Icongraphy in Windows ).

Saber cuándo usar iconos

Los iconos pueden ahorrar espacio, pero ¿cuándo deberías usarlos?

Use un icono para acciones, como cortar, copiar, pegar y guardar, o para elementos de un menú de navegación.

Use un icono si ya existe uno para el concepto que desea representar. (Para ver si existe un icono, comprueba la lista de iconos Segoe).

Usa un icono que sea fácil de entender para el usuario y que sea lo suficientemente sencillo para que, en tamaños pequeños, sea claro.

No uses un icono si su significado no está claro, o si requiere una forma compleja para hacerlo claro.

Usar el tipo correcto de icono

Existen muchas formas de crear un icono. Puedes usar una fuente de símbolos como Segoe MDL2 Assets. Puede crear su propia imagen basada en vectores. Incluso puedes usar una imagen de mapa de bits, aunque no lo recomendamos. Este es un resumen de las formas en que puede agregar un icono a la aplicación.

Icono predefinido

Microsoft proporciona más de 1000 iconos en forma de fuente Segoe MDL2 Assets. Es posible que no sea intuitivo obtener un icono de una fuente, pero la tecnología de visualización de fuentes de Windows significa que estos iconos se verán nítidos y nítidos en cualquier pantalla, en cualquier resolución y en cualquier tamaño. Para obtener instrucciones, consulta Iconos de recursos de Segoe MDL2.

Fuente

No tienes que usar la fuente Segoe MDL2 Assets. Puede usar cualquier fuente que el usuario haya instalado en su sistema, como Wingdings o Webdings.

Archivo SVG

Los recursos de gráficos vectoriales escalables (SVG) son ideales para iconos, ya que siempre parecen nítidos en cualquier tamaño o resolución. La mayoría de las aplicaciones de dibujo pueden exportar a SVG. Para obtener instrucciones, consulta SVGImageSource.

Geometry (objeto)

Como los archivos SVG, las geometrías son un recurso basado en vectores, por lo que siempre se ven nítidos. Sin embargo, la creación de una geometría resulta complicada porque tienes que especificar individualmente cada punto y curva. Es una buena opción solo si necesitas modificar el icono mientras se ejecuta la aplicación (por ejemplo, para animarla). Para obtener instrucciones, consulta Mover y dibujar comandos para geometrías.

Imagen de mapa de bits

Puede usar una imagen de mapa de bits (como PNG, GIF o JPEG), aunque no se recomienda.

Las imágenes de mapa de bits se crean con un tamaño específico, por lo que tienen que ajustarse en función del tamaño que quieres que tenga el icono y de la resolución de la pantalla. Cuando la imagen se reduce verticalmente (se reduce), puede aparecer borrosa. Cuando se escala verticalmente, puede aparecer bloqueado y pixelado. Si tienes que usar una imagen de mapa de bits, te recomendamos usar un PNG o GIF sobre un JPEG.

Hacer que un icono haga algo

Después de tener un icono, el siguiente paso consiste en hacer algo asociandolo a un comando o una acción de navegación. La mejor manera es agregar el icono a un botón o a una barra de comandos.

También puedes animar un icono para llamar la atención a un componente de interfaz de usuario, como el botón siguiente de un tutorial, o para reflejar la acción asociada al icono de una manera divertida e interesante. Para obtener más información, consulte AnimatedIcon.

Creación de un botón de icono

Puede colocar un icono en un botón estándar. Dado que puede usar botones en una amplia variedad de lugares, el uso de un icono de esta manera le proporciona un poco más flexibilidad para donde aparece el icono de acción.

Esta es una manera de agregar un icono a un botón:

Paso 1
Establezca la familia Segoe MDL2 Assets de fuentes del botón en y su propiedad de contenido en el valor Unicode del glifo que desea usar:

<Button FontFamily="Segoe MDL2 Assets" Content="&#xE102;" />

Paso 2
Use uno de los objetos de elemento icon: BitmapIcon, FontIcon, PathIcon, ImageIcon o SymbolIcon. Esta técnica proporciona más tipos de iconos entre los que elegir. También le permite combinar iconos y otros tipos de contenido, como texto, si lo desea.

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play" />
        <TextBlock>Play the movie</TextBlock>
    </StackPanel>
</Button>

Crear una serie de iconos en una barra de comandos

Cuando tenga una serie de comandos que se unen, como cortar, copiar y pegar o un conjunto de comandos de dibujo para un programa de edición de fotos, colóquelos en una barra de comandos. Una barra de comandos toma uno o varios botones de la barra de la aplicación o botones de alternancia de esta, cada uno de los cuales representa una acción. Cada botón tiene una propiedad Icon que se usa para controlar qué icono se muestra. Hay varias formas de especificar el icono.

La manera más fácil es usar la lista de iconos predefinidos. Simplemente especifique el nombre del icono, como Atrás o Detener, y el sistema lo dibujará:

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>
</CommandBar>

Para obtener la lista completa de nombres de icono, consulte la referencia de enumeración Symbol.

Hay otras maneras de proporcionar iconos para un botón en una barra de comandos:

• FontIcon: el icono se basa en un glifo de la familia de fuentes especificada.
• BitmapIcon: el icono se basa en un archivo de imagen de mapa de bits con el URI especificado.
• PathIcon: el icono se basa en los datos de ruta de acceso .
• ImageIcon: el icono se basa en un tipo de archivo de imagen que admite la clase Image .

Para más información sobre las barras de comandos, consulte el artículo Barra de comandos .

Artículos relacionados

• Logotipos e iconos de aplicaciones
• AnimatedIcon