Cómo hacer que su aplicación sea excelente en cualquier pantalla – Descubra

Imagínese por un momento: acaba de descubrir el par de zapatos perfecto en línea. Son del color correcto, están impecablemente diseñados y están ansiosos por recibirlos y estar de pie. Excepto, espera, solo están hechos en tamaño 7. Desafortunadamente, aunque puede pellizcarse los pies y cargarlos ocasionalmente, no son lo suficientemente cómodos para el uso diario.

Hoy en día, la mayoría de los fabricantes de zapatos no solo ofrecen sus zapatos en una talla. En cambio, cuando crean un nuevo modelo de zapato, ofrecen una gama de tallas con el mismo diseño y funcionalidad para que el cliente pueda disfrutar de la que mejor le sienta.

Esto también se aplica a aplicaciones realmente geniales: en el desarrollo, desea crear una interfaz de usuario que se adapte a una variedad de tamaños de pantalla con el mismo diseño y funcionalidad para todos. Independientemente de si alguien está usando iPhone SE o iPad Pro para ver su aplicación, puede tener una experiencia agradable y cómoda de esta manera.

A continuación, reunimos algunas de las mejores formas en las que puede personalizar la interfaz de usuario de su aplicación para que se vea genial independientemente de su dispositivo.

diseño universal

Si bien solo puede diseñar para plataformas específicas como iPhone, iPad o Mac, debe crear una versión universal de su aplicación que admita múltiples dispositivos. De esa manera, sus clientes pueden elegir cómo su aplicación se adapta a su vida y es la experiencia más personalizable que puede ofrecer. Ya sea que esté creando aplicaciones para una sola plataforma o para varios dispositivos, deben admitir todos los tamaños de pantalla y clases de tamaño disponibles para esos dispositivos.

Listo para ir

Una gran experiencia de aplicación comienza con una pantalla de inicio universal: diseñar la pantalla correcta puede marcar una gran diferencia en la rapidez con la que puede sumergir a las personas en su interfaz. Utilice Xcode para crear un guión gráfico en la pantalla de inicio. Son flexibles y admiten todos los tamaños de pantalla del dispositivo. Esto le permite administrar sus pantallas de inicio con un solo guión gráfico en cualquier plataforma que admita.

Obtenga más información sobre el diseño de pantallas de inicio para lanzamientos sin problemas>

Ir al diseño automático

Al crear su interfaz de usuario, el diseño automático puede ayudarlo a adaptarse a cualquier tamaño de pantalla. Proporciona pautas para su aplicación que relacionan el posicionamiento de un contenido con otro contenido o vistas. De esa manera, su contenido se puede escalar y redistribuir de la manera que lo deseaba. Evite el uso de coordenadas de pantalla absolutas, ya que pueden resultar en botones descentrados o un flujo de contenido incómodo en diferentes tamaños de pantalla.

Puede encontrar más información sobre el diseño automático en la biblioteca para desarrolladores>

Descubra SwiftUI

Si su aplicación está diseñada para iOS 13, iPadOS 13, watchOS 6, tvOS 13 o macOS Catalina, también debe implementar SwiftUI. La naturaleza declarativa de SwiftUI garantiza que su contenido se pueda adaptar de inmediato y que el código a menudo sea reutilizable al crear aplicaciones para otras plataformas de Apple.

Domina la multitarea

Si está desarrollando una aplicación que sea compatible con el iPad, tenga en cuenta que los usuarios pueden usarla de varias formas: pueden navegar por la aplicación en pantalla completa, colocarla junto a otra aplicación en vista dividida, abrirla en Slide Over o ( si su aplicación lo admite) Incluso muestra varias ventanas una al lado de la otra. Considere cada una de estas clases de tamaño y cómo su interfaz de usuario puede ajustarse con éxito para obtener la mejor experiencia.

Iniciar multitarea>

Mantenga su contenido legible

Puede ser difícil tener una excelente experiencia de lectura en todos los dispositivos si su aplicación incluye contenido con mucho texto o imágenes. Deje que la Guía de contenido legible haga el trabajo pesado por usted: La Guía de diseño define un área que se puede leer fácilmente sin esfuerzo adicional.

Para obtener más información, consulte la Guía de contenido legible>

Además, asegúrese de que su experiencia de lectura sea accesible. Muchas personas prefieren cambiar el tamaño del texto a un tamaño diferente al estándar. La compatibilidad con Dynamic Type garantiza que su texto coincida con lo que ha especificado su cliente. También asegura que otros elementos en la pantalla se muevan dinámicamente a medida que el texto crece o se reduce para adaptarse a esos cambios.

Obtenga más información sobre cómo diseñar teniendo en cuenta el peso y el tamaño del texto>

Obtenga más información sobre cómo escalar conjuntos de texto en una fuente personalizada>

Al diseñar su interfaz de usuario, use áreas seguras para asegurarse de que sus vistas nunca se superpongan o se superpongan a otros elementos de contenido o hardware, independientemente del dispositivo.

Obtenga más información sobre áreas seguras y safeAreaLayoutGuide >

Cree sus consultas de forma eficaz

Si bien es útil, y a menudo fundamental, conocer las funciones del dispositivo en las que se ejecuta actualmente su aplicación. Sin embargo, tenga cuidado de no buscar dispositivos conocidos y utilice estos resultados para ordenar su comportamiento. En su lugar, pregunte sobre la disponibilidad de las funciones y proporcione rutas condicionales basadas en los resultados de esta verificación.

Por ejemplo, si está creando una aplicación de realidad aumentada, puede usarla isSupported Propiedad de la subclase ARConfiguration correspondiente para determinar si un dispositivo admite una configuración específica.

class var isSupported: Bool { get }

Vista previa de su trabajo

En Xcode 11, puede obtener una vista previa de muchas de sus pruebas de interfaz básicas de inmediato. De esta manera, puede ver cómo su interfaz de usuario maneja diferentes condiciones, dispositivos y casos de uso. Puede ver automáticamente cómo se puede representar Dynamic Type cuando su aplicación se está ejecutando en el iPhone SE, por ejemplo, o ver varias opciones de localización.

Si bien las vistas previas están diseñadas para usarse con SwiftUI, también puede usarlas con sus vistas Swift u Obj-C existentes para asegurarse de que su interfaz de usuario permanezca personalizable a medida que cambia su código.


recursos

Vea “Dominar las vistas previas de Xcode”>

Obtenga más información sobre SwiftUI>

Obtenga más información sobre el diseño de interfaces adaptables>

Obtenga más información sobre el uso de la tipografía en todos los tamaños de pantalla>

Leave a Reply

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