Diseño e implementación de iconos de documentos de MacOS: explorar

Un buen icono de documento ayuda a identificar su archivo en el escritorio, en una ventana del Finder o en un cuadro de diálogo abierto, especialmente cuando no hay una vista previa disponible. Estos íconos se pueden ver en una pantalla de solo 16 puntos o lo suficientemente grande para mostrar todos los detalles de diseño.

Dependiendo del tipo de archivo y las preferencias personales, los iconos de documentos también pueden mostrar vistas previas de documentos. Si alguien ha decidido no mostrar las extensiones del documento en las Preferencias del sistema, estos iconos pueden proporcionar contexto adicional para decodificar el tipo de archivo y el programa nativo.

MacOS Big Sur le permite personalizar y controlar cómo aparecen los iconos de documentos de su aplicación en todo el sistema. Le mostraremos cómo diseñar un gran símbolo, incorporarlo a su proyecto de Xcode y asignar tipos de documentos e ID de tipos.

Diseñe un icono de documento para su aplicación

Si no especifica un icono de documento para un tipo de archivo en su aplicación, macOS creará uno automáticamente para usted de forma predeterminada al componer el icono de su aplicación con el nombre de extensión correcto. Este es un patrón común para tipos de documentos importados o formatos de archivo no propietarios que su aplicación puede abrir, como. B. MP3, JPG o PNG.

Tanto las aplicaciones Música como Vista previa utilizan iconos de documentos generados por el sistema para tipos de documentos como JPG y MP3.

También puede crear un icono de documento personalizado si su aplicación admite varios tipos de archivos y desea distinguirlos visualmente. Por ejemplo, una aplicación de dibujo puede abrir un archivo JPG, un archivo de proyecto, una biblioteca de componentes de dibujo, un complemento o una muestra de color.

Al crear un icono personalizado, recomendamos mantener el diseño simple. Trate de ser lo más específico posible y con el menor detalle posible sobre lo que representa su símbolo. Además, piense en otros tipos de documentos junto a los que normalmente se encontrará su documento y utilice diferentes formas y colores que se noten incluso en tamaños más pequeños.

Si desea crear varios iconos personalizados para diferentes tipos de archivos, es importante que cada diseño sea único y comprensible para que los usuarios sepan qué esperar cuando lo abran.

Los elementos de un símbolo de documento personalizado
A partir de macOS Big Sur, puede generar un nuevo icono de documento personalizado con una serie de imágenes y una cadena de texto.

Para crear un nuevo símbolo de documento personalizado, puede proporcionar un relleno de fondo, una imagen centrada o una cadena de texto. Cada uno de estos tres elementos es opcional, por lo que puede usar solo un elemento o cualquier combinación de los tres elementos para personalizar su icono. A partir de ahí, macOS superpone, posiciona y enmascara automáticamente estos elementos, luego los fusiona en un ícono lateral con un pliegue en la esquina derecha.


Puede descargar plantillas de Sketch y Photoshop desde Apple Design Resources para ayudar a generar los elementos de imagen en cualquier tamaño requerido.

Recursos de diseño de Apple


Completa el fondo
Puede utilizar la imagen de fondo para personalizar el fondo de su símbolo. El gráfico debe ocupar toda el área de dibujo como se muestra a continuación y el sistema lo enmascarará automáticamente en todos los tamaños para la forma del documento.

No solo se pueden usar imágenes de fondo para cambiar el fondo de su documento, sino que también puede usarlas para crear diseños personalizados que llenen toda la página.

La imagen de fondo debe dibujarse en los siguientes tamaños:

  • 512 x 512
  • 512×512 @ 2x
  • 256 x 256
  • 256×256 @ 2x
  • 128 x 128
  • 128×128 @ 2x
  • 32×32
  • 32×32 @ 2x
  • 16×16
  • 16×16 @ 2x

El icono de Xcode Project y los iconos de formato de texto enriquecido solo utilizan el relleno de fondo para crear una apariencia personalizada.

Agregar una imagen central
La imagen del medio siempre tiene la mitad del tamaño del área del documento. Por ejemplo, la imagen del medio se muestra con 16 puntos en un tamaño de símbolo de 32 puntos.

La mayoría de las ilustraciones de la imagen central deben dibujarse a ~ 80% del tamaño del lienzo. Por ejemplo, con la versión de 256 x 256, el dibujo debe estar en un área de 205 x 205, como se muestra en la siguiente figura. Las curvas y los puntos pueden sobresalir en el borde para ajustar la alineación óptica.

La forma de la obra de arte debe ser simple para que sea fácilmente reconocible en tamaños más pequeños. Sin embargo, el renderizado puede ser tan simple o tan extenso como desee.

La imagen del medio se puede dar en los siguientes tamaños:

  • 256 x 256
  • 256×256 @ 2x
  • 128 x 128
  • 128×128 @ 2x
  • 32×32
  • 32×32 @ 2x
  • 16×16
  • 16×16 @ 2x

Agregar un contexto de texto
La cadena de texto del símbolo suele ser la extensión de su documento, pero también puede ser más significativa. Por ejemplo, “SCENE” es más significativo, y más fácil de entender para alguien, que “scn”.

Los símbolos de documento Swift y Metal utilizan cadenas de texto para identificar de forma única sus tipos de documentos.

El sistema capitaliza el texto y lo escala para que se ajuste al símbolo. Por lo tanto, es importante mantener la longitud de la cuerda lo más corta posible para que no se vuelva demasiado pequeña. El texto también cambia de color automáticamente para permanecer legible sobre fondos planos.

Crea iconos de documentos en tu aplicación

Para crear los tipos de símbolos de su documento, debe incorporar estos elementos en su proyecto de Xcode.

Lleva imágenes al catálogo de activos
Primero, agregue su imagen de relleno de fondo y / o la imagen del medio como símbolos generales en el catálogo de activos.

  1. En Xcode, haga clic en + Botón en su catálogo de activos.
  2. Escoger macOS> Icono genérico de macOS.
  3. Arrastre sus activos a los rangos de tamaño adecuados.

Si sus activos se nombran en el formato Símbolo_[size]X[size][@resolution].png (p.ej. icon_32x32@2x.png o icon_32x32.png) se pueden dibujar todos al mismo tiempo y se asignan automáticamente a los espacios correspondientes.

Configurar el ID del tipo de documento
Haga clic en el triángulo para revelar el identificador de tipo importado / exportado para agregar un nuevo identificador de tipo de documento o abrir uno existente.

  • Imagen de icono (opcional): seleccione una imagen central del catálogo de activos de su aplicación.
  • Relleno de icono (opcional): seleccione una imagen de fondo del catálogo de activos de su aplicación
  • Texto del símbolo (opcional): introduzca el texto que desee en la parte inferior del icono del documento. Puede ser lo mismo que la extensión o algo más descriptivo. Por ejemplo el scn La extensión puede usar escena que su texto.
  • Icono heredado (opcional): Este es un archivo ICNS o un ícono genérico en su Catálogo de activos que se usa al implementar su aplicación en macOS 10.15 y versiones anteriores, o en macOS 11 cuando la imagen del ícono, el relleno del ícono y el texto del ícono se dejan en blanco. Si se especificó un símbolo heredado en la sección Tipo de documento, se sobrescribirá.

Declaración de nuevos identificadores de tipo uniformes

Configure los iconos de su documento

A continuación, le indicamos si desea mostrar un icono de documento heredado, un icono personalizado o una opción programática.

  1. En el navegador de proyectos de Xcode escoger el archivo del proyecto.
  2. Escoge tu Objetivo de la aplicación de la lista de objetivos.
  3. Selecciona el La información Lengüeta.

Haga clic en el triángulo Divulgación del tipo de documento para agregar un nuevo tipo de documento o abrir uno existente.

Aquí tienes dos opciones para la iconografía:

  • Icono heredado (opcional): este es un archivo ICNS o un símbolo genérico en su catálogo de activos. macOS usa íconos más antiguos si implementas tu aplicación en macOS 10.15 o anterior, o si no implementas elementos personalizados para tu ícono. Si especificó un símbolo heredado en el ID del tipo de documento, el documento lo sobrescribirá en el tipo de documento.
  • Utilice símbolos generados por el sistema: Seleccione esta casilla de verificación si ha definido un relleno de símbolo, una imagen o texto en el ID del tipo de documento para usar en macOS 11 y versiones posteriores, o si desea que el sistema use el símbolo de su aplicación y el nombre de la extensión como un icono. Si no marca esta casilla, macOS utilizará su icono heredado para ese tipo de documento, incluso si está ejecutando macOS 11 y versiones posteriores.

Desarrollo de una aplicación basada en documentos

Verifique los íconos del documento de su aplicación

Puede probar sus nuevos íconos de documentos en su aplicación compilando y ejecutando su aplicación. Esto es lo que debe hacer:

  1. Eliminar todas las demás versiones de su aplicación desde su sistema de prueba y vacíe la papelera.
  2. abrir Tu proyecto de aplicación en Xcode
  3. Construir y ejecutar Tu aplicación
  4. Reunir Pruebe los activos creando una nueva carpeta y agregando uno de cada tipo de documento.
  5. abrir la carpeta de activos de prueba en el Finder.
  6. Ir a en Finder Ver> Mostrar opciones de vista para abrir la ventana Ver opciones para su carpeta de activos de prueba.
  7. Asegúrate de que “Mostrar vista previa del icono” esté desactivado.

Dale vida a tus documentos

Los íconos de documentos en macOS Big Sur son una excelente manera de refinar aún más el diseño de su aplicación en Mac y ayudar a los usuarios a identificar el archivo correcto de un vistazo. Para obtener más ayuda para crear estos símbolos, consulte Recursos de diseño de Apple y la documentación para desarrolladores.

recursos

Recursos de diseño de Apple

Desarrollo de una aplicación basada en documentos

Conceptos de identificadores de tipo uniforme

Declaración de nuevos identificadores de tipo uniformes

Adopción de identificaciones de tipo uniformes

Introducción a los identificadores de tipo uniformes

Leave a Reply

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.