Guía de diseño de iOS

7 de marzo de 2014

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, 44x44 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.
interfaz iOS 7 interfaz iOS 6 Apariencia translucida

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 autolayout aportan 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.

Back to top

Política de privacidad

El usuario que facilita sus datos personales a SETFILE consiente expresamente en la incorporación de los mismos al citado fichero y en el tratamiento de los mismos por parte de SETFILE para su utilización en actividades propias de sus fines previstos en el artículo 2º de sus Estatutos. En el formulario de recogida de datos estarán indicados aquellos que resultan obligatorios y los que no tienen ese carácter. La no cumplimentación de los datos marcados como "obligatorios" supone la no prestación del servicio o acceso para el que se solicitan los datos. En cualquier caso el tratamiento de los datos personales facilitados por el usuario se realizará con estricto cumplimiento de la normativa vigente y especialmente con la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal. En especial, SETFILE se compromete a mantener las condiciones de confidencialidad y seguridad de los datos personales confiados por los usuarios en los términos previstos en la legislación vigente. No obstante, SETFILE no se hace responsable del acceso, modificación, tratamiento, pérdida o uso ilícito que de los datos facilitados por los usuarios pueda efectuar un tercero. El usuario podrá ejercitar los derechos de acceso, rectificación, cancelación y oposición previstos en la normativa vigente dirigiéndose a SETFILE c/ Balmes, 430 Entlo. F - 08022 BARCELONA, donde podrá igualmente dejar sin efecto, sin carácter retroactivo los consentimientos antes expresados.