Diseño para Apple Watch: Comienzo

El sumamente anticipado Apple Watch impactará en las tiendas este mes con miles de aplicaciones para el reloj compitiendo por tu atención. Con un tamaño de pantalla menor, siempre en la muñeca y diferentes modos de interactuar, creando una bella y deliciosa experiencia con el Apple Watch, requerirá nuevos planteamientos. Esta base te ayudará a comenzar.

En este artículo empezarás a aprender cómo diseñar una aplicación para el Apple Watch con teoría básica y normas para comenzar en el diseño de prendas.

Estructura de la aplicación

Hay tres partes en una aplicación Apple Watch: la Aplicación WatchKit, un Vistazo a la pantalla y Notificaciones. Cada una tiene distinta finalidad y sus propios retos en el diseño.

Aplicación WatchKit

Design for Apple Watch

La aplicación WatchKit es la principal manera de ver e interactuar con los datos de la aplicación. Ésta normalmente se abre desde la pantalla principal del reloj, pero también puede accederse a ella a través de un Vistazo o Notificación.

Es importante entender que hay sólo dos tipos de navegación para la aplicación WatchKit  —  jerárquica y basada en páginas. Mientras la navegación a medida puede programarse para aplicaciones iOS, las aplicaciones WatchKit están muy limitadas y no pueden personalizarse todavía.

Hierarchical

Un estilo jerárquico es más cómodo para aplicaciones más complejas y se asemeja a muchas aplicaciones existentes para iPhone en las que el usuario debe realizar una serie de elecciones hasta alcanzar la pantalla final. Recuerda que Apple pretende que la gente utilice su reloj en períodos de 10 segundos por lo que no debemos diseñar la aplicación para el reloj como sustituto de tu aplicación ya existente, sino más bien como complemento de ésta.

Page based

Una interfaz basada en páginas permite al usuario navegar entre páginas deslizándose horizontalmente. Este modo de navegar es mejor si los datos entre páginas no están vinculados a los datos de otras páginas.

Cuando empieces tu diseño, piensa en qué dato es más importante para el usuario, cómo se relacionan y la estructura de navegación que mejor acceso a los datos consigue.

Vistazo

Glance

Vistazos es una colección navegable de momentos oportunos y contextualmente relevantes que provienen de las aplicaciones favoritas del portador. Se accede desplazándose hacia arriba en el Apple Watch y a partir de ahí puedes deslizarte a través de él horizontalmente. Un Vistazo es opcional, por lo que no todas las aplicaciones tendrán o necesitarán uno.

El vistazo está limitado a una pantalla no desplazable así que querrás colocar sólo la información más útil y esencial en tu pantalla y utilizar color, diferentes tamaños de fuente e imágenes, que distingan visualmente tu vistazo. Tocando en cualquier parte de tu vistazo, se abrirá tu aplicación, de modo que evita incluir controladores como botones, deslizadores y menús.

Glance templates

Finalmente, los vistazos se basan en plantillas, así que tu diseño debería encajar en la que tenga más sentido para tus datos. Apple proporciona una variedad de plantillas para ambas partes de la pantalla, arriba y abajo.

Notificaciones

Notifications

Las aplicaciones de Apple Watch tienen dos fases de notificaciones llamadas interfaz de vista rápida y de vista larga. Cuando un usuario recibe por primera vez una notificación, la notificación de vista corta aparece y es visible por un breve espacio de tiempo. Entonces el usuario puede bajar su muñeca para descartar la notificación o puede ver la información más detallada y funcional por medio de la notificación de vista larga, elevando la muñeca o tocando en la notificación de vista corta.

Dado que el reloj siempre se lleva puesto, querrás limitar las notificaciones a aquellas que son más útiles. Sería bastante irritante ser constantemente interrumpido con cosas que nos son importantes. Las mejores notificaciones utilizan el contexto del usuario – por ejemplo ubicación, tiempo o actividad – para proporcionar una información relevante y a tiempo.

Short look

La interfaz de vista corta contiene el icono de la aplicación, el nombre y el título de la notificación. Como el título es lo único sobre lo que tienes el control, te proporciona una breve información sobre el contenido de la notificación.

Long look

La estructura de la interfaz de vista larga es la misma para todas las aplicaciones. La parte alta muestra el icono y el nombre de la aplicación (puedes también especificar el color de la barra) y la parte baja es un botón de descarte. Entre ellas está el contenido personalizado y hasta cuatro botones de acción también personalizados.

Formas de interactuar

Además de los gestos tan familiares como tocar y deslizar que utilizamos cada día en nuestros teléfonos, el Apple Watch proporciona dos nuevos métodos para interactuar: la Corona Digital y Force Touch.

Corona Digital

Digital crown

Las aplicaciones utilizan la corona para deslizarse sin estorbar la pantalla, como lo harías cuando deslizas con el dedo. La corona es especialmente buena para deslizarse a través de páginas más largas.

Force Touch

Force touch

La pantalla Apple Watch está preparada para distinguir entre un toque y una presión. Parecido al botón derecho del ratón, presionar puede mostrar un menú contextual de hasta cuatro elementos relevantes en la pantalla actual.

Gestos multi-toque como pellizcar para hacer zoom no están disponibles en el reloj.

Maquetación

Layout

El Apple Watch viene en dos tamaños  —  38mm y 42mm. La pantalla más pequeña tiene 340 x 272 píxeles y la más ancha tiene 390 x 312. El reloj presenta una pantalla de retina y, como para el iPhone, necesitarás proporcionar imágenes al doble de resolución.

No necesitarás proporcionar diferentes tamaños de imagen (aunque puedas) o diseñar dos diferentes maquetas porque Apple utiliza tamaños relativos y opciones de espacio para que las imágenes y objetos se ajusten para encajar en el espacio disponible.

Full width

Para el diseño de tu aplicación, Apple recomienda un fondo negro que combine con el bisel. El fondo oscuro también trabaja mejor a la luz, comparado con los colores brillantes. Dado que el bisel añade un relleno visual, es importante maximizar el espacio disponible y hacer el diseño para toda la anchura de la pantalla.

Para los botones, Apple también recomienda botones de anchura completa pero si no tienes botones uno junto al otro, utiliza iconos en lugar de texto. No aconsejamos tener tres o más botones en una sola fila debido al pequeño tamaño de la pantalla. Los botones que estén en la misma pantalla deben tener la misma altura, para una consistencia visual.

Color

Como estás diseñando en un fondo oscuro, deberás utilizar brillo, colores de gran contraste para tu aplicación. El color puede también utilizarse como parte de la marca de tu aplicación.

Key color

Cada aplicación tendrá también un “color clave” elegido por ti, que aparece en el título en la barra de estado y en el nombre de la aplicación en las notificaciones. También puedes personalizar el color de la barra en la notificación de vista larga.

Animación

Zoom

Una animación bella y sutil puede mejorar la experiencia del usuario y hacer que la aplicación sea más atractiva, dinámica y memorable. Cuando se diseña una animación en un reloj, tendrás que asegurarte de que es rápida y que tiene un objetivo. Si tu animación retrasa al usuario en obtener la información que quiere, dañará la experiencia.

Al crear animaciones en el Apple Watch, no puedes simplemente entregar a tu desarrollador un GIF y pedirle que lo cree dinámicamente. Necesitarás proporcionar imágenes estáticas por separado de cada fotograma para crear animaciones precodificadas que aparezcan más rápidas y fluidas. La mejor manera de hacer esto es importar tu fichero de animación en After Effects o Photoshop y extraer los fotogramas individuales.

Menú contextual

Context menu

El menú contextual puede mostrar hasta cuatro acciones y se abre como una imagen circular con un rótulo. El menú se descarta al tocar un elemento de acción o en cualquier otra zona de la pantalla. Cuando se diseñan elementos de menú contextual, no hay que preocuparse del color. Al igual que en los iconos de una aplicación iOS, los iconos del menú contextual son imágenes modelo y el color sólo define la forma del icono.

Menu image sizes

En el caso de los iconos del menú contextual, necesitarás dos tamaños de imagen para cada icono. La medida de la línea debe ser generalmente de 1 píxel más en el reloj del 42mm que en la versión de 38mm.

Tipografía

Font

Apple desarrolló una tipografía sans-serif llamada San Francisco, específica para la visibilidad en Apple Watch, que trae 23 variaciones. Aunque puedes utilizar una fuente personalizada para tu aplicación, Apple recomienda utilizar los estilos de texto incorporados ya que han sido diseñados para pantallas pequeñas.

Otro beneficio de utilizar el sistema de fuentes predeterminado de Apple es que el texto será ajustado automáticamente si el rótulo es demasiado largo. A medida que el tamaño de la fuente aumenta, el seguimiento de la fuente disminuye. Si decides especificar el tamaño de fuente, el texto San Francisco se recomienda para textos de 19 puntos o menos y la fuente de la pantalla San Francisco debe utilizarse para textos con 20 puntos o más.

Icono de la aplicación

Home icons

Igual que en los iconos de la pantalla principal de las aplicaciones iOS, el Apple Watch necesitará también un icono de aplicación. A diferencia de un iPhone, que muestra el icono y el nombre de la aplicación y tiene forma cuadrada, los iconos de las aplicaciones Apple Watch son redondos y no incluyen rótulos. Esto hace que sea imperativo que tu icono sea reconocible y familiar para tu aplicación iOS y que transmita lo que hace.

Al diseñar un icono de aplicación para una pantalla tan pequeña, busca ante todo la simplicidad. En un mar de iconos de aplicaciones compitiendo por tu atención, el icono es la primera cosa que el usuario ve antes de abrir tu aplicación, por lo que querrás crear una buena primera impresión con un icono de bello diseño.

App icon size

Crea tu icono de aplicación en diferentes tamaños para soportar ambos tamaños de reloj y las múltiples pantallas en las que puede aparecer el icono. El sistema colocará automáticamente una máscara circular en tu icono así que, crea tus iconos con una imagen cuadrada utilizando las guías proporcionadas por Apple.

Puedes descargarte esta práctica plantilla de iconos Apple Watch para generar iconos.

Más allá de lo básico

El Apple Watch proporciona al usuario una forma de conseguir los datos sin obstáculos que es importante para él. Comprendiendo la estructura de una aplicación, las formas de interactuar, y los mejores métodos de diseño, puedes crear experiencias más bellas y deliciosas en el Apple Watch.

Para saber más y comenzar, echa un vistazo a la Guía de interfaz humana para Apple Watch y descarga Recursos de diseño para Apple Watch para un conjunto de biseles, guías, plantillas y fuentes.

Si quieres mantenerte al día con nuestros artículos, puedes seguirnos en Twitter, Facebook, Google+, o incluso suscribiéndote a nuestro hilo RSS.

Boletín de noticias

0 Comentarios

No hay comentarios aún

Deja tu respuesta

*
* Longitud mínima: 20 caracteres