Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Apple Watch

Diseñar para Apple Watch: Pautas de Diseño

by
Length:ShortLanguages:
This post is part of a series called Designing for Apple Watch.
Designing for Apple Watch: Product Strategy
Designing for Apple Watch: Designing a Glance in Sketch

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Apple Watch ofrece un nuevo medio para comunicarnos con los usuarios. Usar una app en un dispositivo wereable es muy diferente a usarla en un tele´fono inteligente.  Para guiar a los creadores de apps en su recorrido al crear una optima app para Apple Watch, Apple ha lanzado unas pautas que los asisten en el diseño de una buena experiencia de usuario. En este artículo, echaremos un vistazo a estas pautas.

Filosofía de Diseño

Con el fin de diseñar buenas aplicaciones para el Apple Watch, es importante entender la filosofía sobre el diseño que Apple llevaba en mente cuando diseño el Apple Watch. Apple recomienda mantener las siguientes bases en mente.

Lightweight plus personal interactions are Apples design foundation for the Apple Watch
Las interacciones sutiles a la vez que personales son algo fundamental para Apple en el diseño de su Appel Watch.

Sutiles

Debido a las limitaciones en el tamaño de la pantalla y de la potencia para procesar, el Apple Watch debería usarse principalmente como un dispositivo soporte para interacciones rápidas.

Personal

Nunca hemos tenido un dispositivo tan próximo a nosotros. Apple enfatiza que seamos conscientes de esto y mantengamos la conexión cercana en mente mientras diseñamos una app para Apple Watch.

Interacciones

Existen cuatro formas distintas en que un usuario utiliza los gestos para navegar en la aplicación.

  • Un gesto de punteo desencadena un evento basado en una acción.
  • Un arrastre vertical desliza la pantalla actual (un usuario puede usar también la corona digital para deslizar).
  • La acción de arrastre horizontal muestra la página anterior o posterior en el caso de estar en una interfaz con paginación.
  • Con un deslizamiento en el borde izquierdo, navegamos de vuelta a la pantalla anterior si estamos dentro de una interfaz organizada jerárquicamente.

Toque Fuerte

Cuando un usuario aplica presión sobre la pantalla del Apple Watch, éste detecta la intensidad del toque y muestra un menú superpuesto a la pantalla actual. Por ejemplo, en la app de la alarma, una Fuerte Presión se usa para añadir un nuevo aviso.

Feedback Táctil

Una forma única de proporcionar feedback al usuario en el Apple Watch es mediante el feedback táctil. Existen tres tipos de gestos táctiles, cada uno con su correspondiente significado, por ejemplo: éxito, fallo, o clic.

Componentes de la App 

Apple proporciona un conjunto de opciones para interactura con una aplicación, incluyendo las notificaciones, las vistas rápidas y las complicaciones.

Notificaciones

Left Short Look Right Long Look
Izquierda: Vista Breve Derecha: Vista Ampliada

Existe una distinción entre la vista breve y la vista ampliada. Cuando un usuario recibe una notificación y elevan su muñeca, primero ven la vista breve o con la información condensada. Una vista breve consta de un título, y el nombre e icono de la app.

La vista amplia aparece cuando el usuario continúa mirando la notificación en lugar de bajar la muñeca tras ver la vista breve. El área de contenido para la vista amplia es dinámica, pero no el conjunto de la estructura de la notificación. Puedes añadir botones a una vista amplia con el objetivo de crear una notificación accionable.

Vista Preliminar

Una vista preliminar consiste en una única pantalla a la cual el usuario puede acceder sin necesidad de abrir la app. Esto se logra deslizando hacia arriba la pantalla inicial. No todas las apps necesitan un vista preliminar, por ejemplo, si consisten en una única pantalla informativa.  Un usuario elige que vistas preliminares desea añadir al Apple Watch.  general, existen una pocas reglas que tener en mente mientras diseñas una vista preliminar. 

  • Una vista debe ser rápida y fácil de leer.
  • Una vista debería ser relevante para su contexto y no simplemente una lanzadera para la app. Para una app sobre acciones, mostrarías por ejemplo los últimos valores del mercado.
  • Contenido de vista previa alineado a la izquierda. Este es un estándar para todas las vistas previas y mantiene la jerarquía visual con consistencia.

Complicaciones

Examples of complications From left to right Large Flat Ring Image and Stack Image
Ejemplos de complicaciones. De izquierda a derecha: Amplio y Plano, Imagen Circular, e Imagen Apilada.

Una complicación añade información específica de una app a la pantalla del reloj del usuario. Las pantallas del reloj son personalizables y por tanto los modos en los que las complicaciones son mostradas en varios relojes puede diferir. Por ejemplo, dispones de complicaciones amplias, modulares pequeñas  así como plantillas circulares entre otras. Las complicaciones se dibujan usando plantillas, lo que significa que existe un límite en cuanto a las posibles modificaciones aplicables a su diseño.

Puedes aprender más sobre las familias de complicaciones y sus plantillas en Pautas en Interfaces para Humanos. Las complicaciones son opcionales.

Arquitectura de la Información

En general, existen dos tipos de modelo de navegación para adaptarse a tus necesidades.

  • navegación basada en página
  • navegación jerárquica

Navegación Basada en la Página

Una navegación basada en la página es más adecuada para una colección de información plana. La app consiste de un cierto número de páginas. Un usuario puede deslizarse horizontalmente entre ellas (y verticalmente para ver más contenido de la página actual). Se advierte que se debe limitar el número de páginas con el fin de mantener una navegación fluida para el usuario.

Navegación Jerárquica

Una navegación jerárquica proporciona una jerarquía, un orden determinado. El diseño más común es disponer de una página con una lista y una página con detalles. es recomendable no superar más de dos o tres niveles de jerarquía.

Alertas y Hojas de Acciones

An Example of an Action Sheet
Ejemplo de una Ficha de Acción

Tal y como existen las alertas y fichas de acción en una app típica de móvil, puedes también usar este tipo de navegación en una app para Apple Watch. Las pautas generales aquí consisten en usar las alertas con moderación, con mensajes sucintos y ofreciendo siempre la habilidad de desestimar la alerta.

Diseño de Interfaz

Para hacer las pautas de diseño de la interfaz de usuario más digeribles, he resumido las reglas más importantes aquí abajo.

  • Un reloj Apple viene en dos tamaños, 38 mm y 42 mm. Debería mostrarse el mismo contenido, sin importar el tamaño de la pantalla, a través de medidas relativas.
  • En general, alinear los elementos a la izquierda. El texto alineado a la izquierda son mucho más legibles y las apps para Apple Watch aplican esta regla con consistencia.
  • Las apps siempre tienen un fondo negro para crear la ilusión de que existe una pantalla sin bordes.
A rounded rectangle is a design pattern used for buttons
Un rectángulo con esquinas redondeadas es el patrón de diseño empleado para los botones.
  • Evita usar color ya que es el único medio de mostrar la interactividad, el rectángulo redondeado ya es de por sí un patrón de diseño consistente para los botones.
  • Puedes definir un tono de color global que funcione como color corporativo o de marca. Asegúrate de que los colores que elijas para una aplicación son vibrantes para garantizar la legibilidad y el contraste con el fondo negro.
  • No incluyas una pantalla de lanzamiento, ya que ralentiza la velocidad de las interacciones.
  • Apple Watch soporta secuencias de imagen animadas y animaciones de apariencia, pero habitualmente no añaden valor a la app.

Tipografía

Apple usa SF Compact como sistema de fuentes para Apple Watch. Existen dos variaciones (tamaño en puntos basados en imágenes de 144px/pulgada):

  • SF Compact Text para etiquetas cuyo texto sea de 19pt. o inferior
  • SF Compact Display para etiquetas cuyo texto sea de 20pt o mayor

Puedes añadir tipografía de tu gusto, pero no es recomendable. Dynamic Type es de mucha ayuda en Apple Watch por lo que usar la misma fuente del sistema es casi siempre la mejor solución de diseño.

Apple proporciona un rango de estilos tipográficos estándar integrados, desde titulares a notas para pie con el objetivo de reducir la necesidad de que tengas que crear modificaciones.

Construir Bloques

Two Switch Building Blocks
Dos Bloques de Construcción Intercambiables

Para facilitar la creación de apps para Apple Watch, Apple proporciona un algunos elementos de interfaz, los cuales puedes usar como bloques constructivos para crear la app. Abajo tienes una breve lista con algunos diferentes que podrías usar. Cada elemento de interfaz tiene su propio grupo de pautas. Puedes aprender más sobre ellas en la sección de recursos de abajo.

  • texto estático (etiquetas)
  • imágenes
  • grupos (combina imágenes y etiquetas, por ejemplo)
  • selectores (manejados mediante la corona digital)
  • tablas
  • botones
  • conmutadores
  • deslizadores
  • mapas
  • películas
  • etiquetas de fecha y hora
  • menús

Recursos

An Apple Watch

Apple te proporciona elementos de diseño para tus proyectos Puedes acceder a ellos desde la web Apple's Human Interface Guildeines.

Incluso más, para indicar el tamaño exacto de los píxeles que necesitas para la iconografía e imágenes de las complicaciones, Apple te proporciona una breve descripción en Human Interface Guildeines.

Finalmente, si quieres aprender más sobre pautas específicas de los diferentes bloques de construcción para crear tu Apple Watch app, puedes conocer más en la sección Interface Elements de  Human Interface Guidelines de Apple.

Conclusión

Si te ciñes con cuidado las pautas de diseño de Apple Watch, te asegurarás de que tu app será comprensible para los usuarios del Apple Watch. Simultáneamente, mediante la tipografía existente y los bloques constructivos, es posible crear estupendas apps para Apple Watch sin necesidad de realizar modificaciones extra.

Si te apetece aprender más sobre las pautas de diseño, visita Human Interface Guidelines de Apple para Apple Watch. Si tienes alguna duda o preguntas, déjalas en la sección de comentarios de abajo o búscame en Twitter. Gracias por tu tiempo.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.