Adaptabilidad y Diseño – Diseño Visual – iOS – pautas de interfaz humana – desarrollador de Apple

adaptabilidad y diseño

la gente generalmente quiere poder usar sus aplicaciones favoritas en todos sus dispositivos y en cualquier contexto. En una aplicación iOS, puede configurar elementos de interfaz y diseños para cambiar automáticamente la forma y el tamaño en diferentes dispositivos, durante la multitarea en el iPad, en la vista dividida, cuando la pantalla gira, y más. Es importante diseñar una interfaz adaptable que proporcione una gran experiencia en cualquier entorno.,

tamaños y orientaciones de la pantalla del dispositivo

los dispositivos iOS tienen una variedad de tamaños de pantalla y se pueden usar en orientación vertical u horizontal. En dispositivos de borde a borde como el iPhone X y el iPad Pro, la pantalla tiene esquinas redondeadas que coinciden estrechamente con las dimensiones generales del dispositivo. Otros dispositivos, como el iPhone SE y el iPad Air, tienen una pantalla rectangular.

si tu aplicación se ejecuta en un dispositivo específico, asegúrate de que se ejecute en todos los tamaños de pantalla de ese dispositivo. En otras palabras, una aplicación solo para iPhone debe ejecutarse en todos los tamaños de pantalla de iPhone y una aplicación solo para iPad debe ejecutarse en todos los tamaños de pantalla de iPad.,

Nota Todos los factores de escala en la tabla anterior son factores de escala UIKit, que pueden diferir de los factores de escala nativos. Para obtener orientación para desarrolladores, consulte escala y escala nativa.

para saber cómo afecta la resolución de pantalla a las ilustraciones de tu app, consulta tamaño y resolución de la imagen.

Auto Layout

Auto Layout es una herramienta de desarrollo para construir interfaces adaptativas. Con el diseño automático, puedes definir reglas (conocidas como restricciones) que rigen el contenido de tu app., Por ejemplo, puede restringir un botón para que siempre esté centrado horizontalmente y colocado ocho puntos por debajo de una imagen, independientemente del espacio de pantalla disponible.

Auto Layout reajusta automáticamente los layouts de acuerdo con las restricciones especificadas cuando se detectan ciertas variaciones ambientales (conocidas como traits).,ically Se adapta a una amplia gama de características, que incluyen:

  • Diferentes tamaños de pantalla, resoluciones y gamas de color del dispositivo (sRGB/P3)
  • diferentes orientaciones del dispositivo (vertical/horizontal)
  • vista dividida
  • modos multitarea en iPad
  • Cambios de tamaño de texto de tipo dinámico
  • Características de internacionalización que están habilitadas en función de la configuración regional (dirección de diseño de izquierda a derecha//formato del número, variación de la fuente, longitud del texto)
  • disponibilidad de funciones del sistema (3D Touch)

para obtener orientación para desarrolladores, consulte Guía de diseño automático y uitraitcollection.,

las guías de diseño y el área segura

Las guías de diseño definen regiones rectangulares que en realidad no aparecen visiblemente en pantalla, pero ayudan con el posicionamiento, La alineación y el espaciado del contenido. El sistema incluye guías de diseño predefinidas que facilitan la aplicación de márgenes Estándar alrededor del contenido y restringen el ancho del texto para una legibilidad óptima. También puede definir guías de diseño.,

  • se Adhieren a la zona de seguridad y el diseño de los márgenes definidos por UIKit. Estas guías de diseño garantizan una inserción adecuada en función del dispositivo y el contexto. El área segura también evita que el contenido infravalore la barra de estado, la barra de navegación, la barra de herramientas y la barra de pestañas., Las vistas estándar proporcionadas por el sistema adoptan automáticamente una guía de diseño de área segura.

    para obtener orientación para desarrolladores, consulte UILayoutGuide, layoutMarginsGuide, readableContentGuide y safeAreaLayoutGuide.

    clases de tamaño

    Las Clases de tamaño son rasgos que se asignan automáticamente a las áreas de contenido en función de su tamaño. El sistema define dos clases de tamaño, regular (denota espacio expansivo) y compact (denota espacio restringido), que describen la altura y el ancho de una vista.,

    una vista puede poseer cualquier combinación de clases de tamaño:

    • ancho Regular, altura regular
    • ancho compacto, altura compacta
    • ancho Regular, altura compacta
    • ancho compacto, altura regular

    al igual que con otras variaciones ambientales, iOS realiza dinámicamente ajustes de diseño basados en las clases de tamaño de un área de contenido. Por ejemplo, cuando la clase de tamaño vertical cambia de altura compacta a altura normal, tal vez porque el usuario giró el dispositivo de orientación horizontal a vertical, las barras de pestañas pueden volverse más altas.,

    clases de Tamaño de dispositivo

    diferentes combinaciones de clases de tamaño se aplican a la experiencia de pantalla completa en diferentes dispositivos, según el tamaño de pantalla.

    Dispositivo orientación Vertical orientación horizontal
    12.,9″ iPad Pro Regular la anchura, la altura normal Regular la anchura, la altura normal
    11″ iPad Pro Regular la anchura, la altura normal Regular la anchura, la altura normal
    10.5″ iPad Pro Regular de ancho, la altura normal Regular la anchura, la altura normal
    9.7″ iPad Regular la anchura, la altura normal Regular la anchura, la altura normal
    7., ancho, altura regular Ancho Regular, altura compacta
    iPhone 6s ancho compacto, altura regular ancho compacto, altura compacta
    iPhone se ancho compacto, altura regular ancho compacto, altura compacta
    width, regular height Compact width, compact height

    clases de tamaño multitarea

    en iPad, las clases de tamaño también se aplican cuando la aplicación se ejecuta en una configuración multitarea.,

    2/3 split view

    1/2 split view

    1/3 split view

    Device Mode Portrait orientation Landscape orientation
    12.,ht
    1/2 split view N/A Regular width, regular height
    1/3 split view Compact width, regular height Compact width, regular height
    11″ iPad Pro 2/3 split view Compact width, regular height Regular width, regular height
    1/2 split view N/A Compact width, regular height
    1/3 split view Compact width, regular height Compact width, regular height
    10.,5″ iPad Pro 2/3 split view Compact width, regular height Regular width, regular height
    1/2 split view N/A Compact width, regular height
    1/3 split view Compact width, regular height Compact width, regular height
    9.,7″ iPad 2/3 split view Compact width, regular height Regular width, regular height
    1/2 split view N/A Compact width, regular height
    1/3 split view Compact width, regular height Compact width, regular height
    7.,9″ iPad mini 4 vista dividida de 2/3 ancho compacto, altura regular Ancho Regular, altura regular
    vista dividida de 1/2 N/A ancho compacto, altura regular
    altura ancho compacto, altura regular

    consideraciones generales de diseño

    asegúrese de que el contenido principal esté claro en su tamaño predeterminado., Las personas no deberían tener que desplazarse horizontalmente para leer texto importante, o hacer zoom para ver imágenes principales, a menos que decidan cambiar el tamaño.

    mantenga una apariencia general consistente en toda su aplicación. En general, los elementos con funciones similares deben tener un aspecto similar.

    utilice el peso visual y el equilibrio para transmitir la importancia. Los artículos grandes llaman la atención y parecen más importantes que los más pequeños. Los elementos más grandes también son más fáciles de tocar, lo cual es especialmente importante cuando se usa una aplicación en un entorno que distrae, como en la cocina o en un gimnasio., En general, coloque los elementos principales en la mitad superior de la pantalla y — en un contexto de lectura de izquierda a derecha-cerca del lado izquierdo de la pantalla.

    utilice la alineación para facilitar el escaneo y comunicar la organización y la jerarquía. La alineación hace que una aplicación se vea ordenada y organizada, ayuda a las personas a concentrarse mientras se desplazan y facilita la búsqueda de información. La sangría y la alineación también pueden indicar cómo se relacionan los grupos de contenido.

    si es posible, admite las orientaciones vertical y horizontal., La gente prefiere usar aplicaciones en diferentes orientaciones, por lo que es mejor cuando se puede cumplir con esa expectativa.

    esté preparado para los cambios de tamaño de texto. La gente espera que la mayoría de las aplicaciones respondan cuando eligen un tamaño de texto diferente en Ajustes. Para acomodar algunos cambios en el tamaño del texto, es posible que deba ajustar el diseño. Para obtener más información sobre el uso del texto en tu app, consulta tipografía.

    Proporcionar un amplio toque objetivos de elementos interactivos., Trate de mantener un mínimo de tocar área de 44pt x 44pt para todos los controles.

    4.7″ iPhone

    5.8″ iPhone

    Vista previa de la aplicación en varios dispositivos. Aunque generalmente es mejor previsualizar características como imágenes de color amplio en dispositivos reales, puede usar Simulator (incluido con Xcode) para verificar si hay recortes y otros problemas de diseño., Por ejemplo, si tu app admite el modo horizontal, puedes usar Simulator para asegurarte de que tus diseños se vean bien, independientemente de si el dispositivo gira a la izquierda o a la derecha.

    nota de forma predeterminada, los controladores de vista admiten todas las orientaciones en el iPad y todas las orientaciones excepto el retrato invertido en el iPhone (para obtener orientación para desarrolladores, consulte orientaciones de interfaz soportadas). Algunos dispositivos, como el iPhone X, no admiten el modo vertical invertido, independientemente de si tu aplicación lo admite.

    Aplicar márgenes de legibilidad al mostrar texto en dispositivos más grandes., Estos márgenes mantienen las líneas de texto lo suficientemente cortas como para garantizar una experiencia de lectura cómoda.

    la Adaptación a los Cambios en el Contexto

    Mantener el foco en el contenido actual durante los cambios de contexto. El contenido es tu máxima prioridad. Cambiar el enfoque cuando el entorno cambia puede ser desorientador y frustrante, y puede hacer que las personas sientan que han perdido el control de la aplicación.

    evite cambios de diseño gratuitos. Cuando alguien gira un dispositivo, Todo el diseño no tiene que cambiar., Por ejemplo, si tu app muestra una cuadrícula de imágenes en modo vertical, no tiene que presentar las mismas imágenes que una lista en modo horizontal. En su lugar, podría simplemente ajustar las dimensiones de la cuadrícula. Trate de mantener una experiencia comparable en todos los contextos.

    si es esencial que tu aplicación se ejecute solo en horizontal, admite ambas variantes. Tu aplicación de solo paisaje debe funcionar igual de bien si las personas giran su dispositivo hacia la izquierda o hacia la derecha. No le digas a las personas que roten su dispositivo cuando usen tu aplicación., Si tu aplicación no gira automáticamente cuando alguien sostiene el dispositivo en una orientación no compatible, sabrá instintivamente que debe girarlo.

    Personaliza la respuesta de tu app a la rotación según el contexto. Un juego que permite a las personas mover un personaje girando el dispositivo, por ejemplo, probablemente no debería cambiar de orientación durante el juego. Sin embargo, podría mostrar menús y secuencias de introducción basadas en la orientación actual.

    apunta a apoyar tanto el iPad como el iPhone. Las personas aprecian tener la flexibilidad de ejecutar su aplicación en cualquier tipo de dispositivo iOS., Si ciertas funciones de tu app requieren hardware específico para el iPhone, como la telefonía, considera ocultar o deshabilitar esas funciones en el iPad y permitir que las personas usen otras funciones de tu app.

    Completo-pantalla de 4.7″ de la imagen del dispositivo

    Recorte en 5.8″ dispositivo

    la Imagen en 5.8″ dispositivo

    pantalla Completa 5.,8″ de la imagen del dispositivo

    Recorte en un 4.7″ dispositivo

    en la pantalla normal de 4.7″ dispositivo

    Ser consciente de la relación de aspecto de las diferencias a la hora de reutilizar diseños preexistentes. Los diferentes tamaños de pantalla pueden tener diferentes relaciones de aspecto, lo que hace que las ilustraciones aparezcan recortadas, con letterboxed o pillarboxed. Asegúrese de que el contenido visual importante permanezca a la vista en todos los tamaños de pantalla.

    diseñar una experiencia de pantalla completa

    ampliar los elementos visuales para llenar la pantalla., Asegúrese de que los fondos se extienden hasta los bordes de la pantalla y que los diseños con desplazamiento vertical, como tablas y colecciones, continúan hasta la parte inferior.

    Evite colocar explícitamente controles interactivos en la parte inferior de la pantalla y en las esquinas. Las personas usan gestos de deslizamiento en el borde inferior de la pantalla para acceder a funciones como la pantalla de inicio y el conmutador de aplicaciones, y estos gestos pueden cancelar los gestos personalizados que implementa en esta área. Las esquinas lejanas de la pantalla pueden ser áreas difíciles para que las personas lleguen cómodamente.,

    Inserción de contenidos esenciales para prevenir la saturación. En general, el contenido debe estar centrado y simétricamente insertado para que se vea genial en cualquier orientación, no esté recortado por esquinas redondeadas, no esté oculto por una carcasa de sensor y no esté oscurecido por el indicador para acceder a la pantalla de inicio. Para obtener los mejores resultados, utilice elementos de interfaz estándar proporcionados por el sistema y diseño automático para construir su interfaz y adherirse a las guías de diseño y el área segura definida por UIKit., Cuando el dispositivo está en orientación horizontal, puede ser apropiado para algunas aplicaciones, como los juegos, colocar controles tocables en la parte inferior de la pantalla (que se extiende por debajo del área segura) para permitir más espacio para el contenido. Utilice inserciones coincidentes al colocar controles en la parte superior e inferior de la pantalla, y deje un amplio espacio alrededor del indicador de inicio para que las personas no lo apunten accidentalmente al intentar interactuar con un control. Debido a que el indicador de inicio permanece centrado en la pantalla, su ubicación relativa a la interfaz de su aplicación puede cambiar.,

    Inserción de ancho completo con botones. Un botón que se extiende hasta los bordes de la pantalla puede no parecer un botón. Respete los márgenes estándar de UIKit en los lados de los botones de ancho completo. Un botón de ancho completo que aparece en la parte inferior de la pantalla se ve mejor cuando tiene esquinas redondeadas y está alineado con la parte inferior del área segura, lo que también garantiza que no entre en conflicto con el indicador de inicio.,

    no enmascare ni llame especial atención a las funciones de visualización clave. No intente ocultar las esquinas redondeadas, la carcasa del sensor o el indicador de acceso a la pantalla de inicio de un dispositivo colocando barras negras en la parte superior e inferior de la pantalla. Tampoco use adornos visuales como corchetes, biseles, formas o texto instructivo para llamar la atención sobre estas áreas.

    tenga en cuenta la altura de la barra de estado. La barra de estado es más alta en los modelos de iPhone de pantalla completa que en otros modelos., Si tu app asume una altura fija de la barra de estado para posicionar el contenido debajo de la barra de estado, debes actualizar tu app para posicionar dinámicamente el contenido en función del dispositivo actual. Ten en cuenta que la barra de estado de un iPhone de pantalla completa no cambia la altura cuando las tareas en segundo plano, como la grabación de voz y el seguimiento de ubicación, están activas.

    Si actualmente oculta la barra de estado, reconsidere esa decisión cuando su aplicación se ejecute en un iPhone de pantalla completa., Los modelos de iPhone de pantalla completa tienen más espacio vertical para el contenido que otros modelos, y la barra de estado ocupa un área de la pantalla que tu aplicación probablemente no utilizará completamente. La barra de estado también muestra información que las personas encuentran útil. Sólo debería ocultarse a cambio de un valor añadido.

    permite ocultar automáticamente el indicador para acceder a la pantalla de inicio con moderación. Cuando la ocultación automática está habilitada, el indicador se desvanece si el Usuario no ha tocado la pantalla durante unos segundos. Reaparece cuando la gente toca la pantalla de nuevo., Este comportamiento debe habilitarse solo para experiencias de visualización pasiva, como reproducir videos o presentaciones de fotos.

    consideraciones de diseño adicionales

    asegúrese de que su sitio web se vea bien en una pantalla de borde a borde. Ver diseño de sitios web para iPhone X en webkit.org.

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *