iOS

Guía de diseño de iOS

By 7 marzo, 2014 No Comments

shutterstock_171554864

El lanzamiento del sistema operativo iOS 7 supuso un antes y un después en la interfaz de los iDevices de Apple. Esto condujo a que la compañía anunciase, en el mes de diciembre, que todas las aplicaciones enviadas a partir del día uno de febrero debían estar optimizadas. Lo que trajo de cabeza a más de un programador.

Para facilitarles las cosas, Apple acaba de publicar una actualización de la guía de diseño de dispositivos iOS destinado a este sector. Algunos son archivos de dominio público, otros exclusivos para desarrolladores registrados.

Aunque no hay mucho material nuevo, supone una compilación de todos los documentos, vídeos y libros blancos referentes al diseño de la interfaz del sistema iOS. Una guía completa con la que se anima a los desarrolladores no sólo a amoldar sus diseños a la nueva versión de iOS 7, sino a crear mejores interfaces que sorprendan a los usuarios y que optimicen la experiencia de usuario. Y es que no podemos olvidar que ésta es el sello distintivo de la compañía de la manzana.

Tres tipos de aplicaciones

Para comenzar, hemos de tener claro en qué tipo de app estamos trabajando. Apple las divide en tres amplios módulos.

  1. Estándar: sólo contiene los elementos de interfaz de usuario estándar, ninguna personalizada proporcionada por UIKit. En este caso, la implementación se centra en ajustes menores y en garantizar que la aplicación se encargue de los nuevos gestos de todo el sistema correctamente.
  2. Personalizadas: la aplicación presenta una interfaz de usuario completamente personalizada sin incluir ningún elemento UIKit IU. Este tipo de apps son también llamadas custom apps.
  3. Híbridas: la aplicación contiene una mezcla de elementos estándar y personalizados, incluidos los elementos estándar personalizados del propio UIKit o a través de las APIs de customización de apariencia.
    En este tipo de apps, es importante que el programador se asegure de que las personalizaciones continúan funcionando y de que se vean bien al integrarse con elementos estándar.

Diseñando para iOS 7

Para Apple existen tres pilares fundamentales:

  1. Adaptación del contenido: la interfaz ayuda a los usuarios a entender e interactuar con el contenido, pero no compite con él. Es conveniente aprovechar toda la pantalla permitiendo que el contenido llegue a los bordes de la pantalla. También centrar el protagonismo en éste y dejar que la interfaz de usuario juegue un papel de apoyo secundario. Una buena práctica es evitar que paneles, degradados o sombras dominen o compitan con el contenido.
  2. Claridad: el texto ha de ser legible en todos los tamaños, no conviene abusar de los iconos y los adornos deben ser siempre sutiles y apropiados.
    Se recomienda un uso amplio del espacio negativo y moderado del color, cuyo significado sea universal (por ejemplo, el amarillo para notas destacadas). Éste además ha de verse bien tanto en fondos claros como obscuros.
  3. Profundidad: capas visuales y movimiento realista imparten vitalidad y aumentan la comprensión de los usuarios. Se aconseja el uso de fondos translúcidos que den la sensación de flotar por encima de la pantalla de inicio.

UI Design Do’s and Dont’s

iOS 7 introduce muchos cambios de interfaz, como botones, barras de bordes translúcidos y el diseño de pantalla completa para los controladores de vista. Por ello, Apple aporta un conjunto de reglas concretas relativas a conceptos básicos de maquetación y diseño.

  • Formato: el contenido ha de ser visible sin tener que realizar ninguna acción, como ampliar la pantalla o desplazarse horizontalmente.
  • Texto: su tamaño no debe ser inferior a 22 puntos.
  • Espaciado: el aumento de la altura de la línea y el espaciado de caracteres ayuda a la lectura.
  • Contraste: el contraste entre color de la fuente y el fondo ha de ayudar a la legibilidad del texto.
  • Imágenes: prima la alta resolución por encima de otras cuestiones. Las imágenes que no estén adaptadas al tamaño retina se verán borrosas en estas pantallas. De esta forma, Apple pretende evitar que las imágenes pierdan calidad cuando el usuario interactúe con ellas.
  • Touch Control: el diseño de toda app debe estar condicionada al uso de gestos táctiles, es decir, que la interacción entre dispositivo y usuario sea natural y, por supuesto, sencilla.
  • Botones: sus dimensiones han de tener, como mínimo, 44×44 puntos. Apple considera que estas medidas son suficientes para que el usuario pueda presionar con un dedo sin dificultad alguna.
  • Organización: diseño centrado en una lectura fácil que sitúe los controles cerca del contenido que modifican.

Descontento entre los programadores

Se han escuchado voces críticas entre los desarrolladores que ven cómo el nuevo sistema operativo complica el trabajo con determinadas funcionalidades de las apps. Por ejemplo, señalan que algunos elementos de desarrollo que funcionaban en iOS 6 e iOS 7.0.3 ya no lo hacen en iOS 7.1. Así, su malestar no es tanto por cuestiones de diseño de la interfaz sino por la implementación de algunas acciones en iOS 7.

Albert Viñals, programador de iOS en SetFile, comparte la opinión de que el nuevo sistema operativo representa un cambio en cuanto a filosofía en la interfaz y que resulta complejo mantener las dos versiones, anterior y posterior a iOS 7. No obstante, considera que las mejoras introducidas en sistemas como autolayoutaportan al desarrollador facilidades en el control de las interfaces. Y aunque en un primer momento adaptarse no resultó tarea fácil, no querría volver a desarrollar como lo hacía en iOS 6.

Sobre este tema, Apple publica un documento llamado «Supporting iOS 6», en el que da consejos para aquéllos que deseen continuar trabajando con la versión iOS 6. Como, por ejemplo, elegir cuidadosamente la manera más práctica para actualizar la aplicación para iOS 7.

Sin embargo aclara: “las técnicas que elijas pueden variar, pero el consejo general sigue siendo el mismo: en primer lugar, céntrate en el rediseño de la app para iOS 7. Si éste incluye navegación o cambios estructurales, han de llevar esos cambios a la versión iOS 6, según corresponda. Asimismo, advierte, no cambies el estilo de la versión iOS 6 de la aplicación para utilizar elementos de diseño pertenecientes a iOS 7, como por ejemplo las barras translúcidas o los botones de la barra sin fronteras.

Fuentes: Guía de Apple, actualidadipad.com y techcrunch.com.

Leave a Reply