Diseño web para el WATCH
Con el próximo lanzamiento del nuevo y más brillante de productos de Apple, el reloj de Apple, hay muchos diseñadores por ahí con ganas de conseguir sensaciones fuertes para el juguete más nuevo de Cupertino. Hay algunas nuevas formas de interactuar con el dispositivo; como menú táctil de Apple y con corona digital, así como muchos elementos de la IU como botones, estilos de texto, e interruptores.
Antes de explorar elementos de la IU presentes en el reloj de Apple vamos primero a cubrir algunos de los conceptos básicos que debes tener en cuenta en el diseño de este nuevo dispositivo.
En primer lugar, el reloj de Apple está conectado físicamente al usuario. Se consciente de esta conexión y cómo ésta va a hacer que tus usuarios sientan la interacción con la interfaz de usuario.
02-wrist
Mantenlo simple
El reloj de Apple no es tan poderoso como el nuevo teléfono inteligente. En el caso del reloj de Apple se nos recuerda mantener las cosas lo más ligero posible, porque esos kilobytes adicionales realmente crean una diferencia.
Los usuarios no quieren una experiencia lenta y perezosa. El uso de imágenes y animaciones grandes no sólo creará una experiencia de usuario pobre, sino también retrasar el momento de enviarlo al reloj Apple.
Pregúntate a ti mismo, «son mis animaciones realmente necesario?» Las animaciones son malas si están causando un retraso, independientemente de su calidad. Recuerda que estás haciendo diseño web para una página web del tamaño de un sello postal que también tiene para transmitir datos de forma inalámbrica desde el teléfono. Un cuello de botella.
Date de cuenta que estás construyendo un sitio web de principios de los años 90 que necesitaba transferir su información a través de un módem de 14.4k a un usuario en un equipo con un procesador de 386 y 2 mb de ram. No puedes utilizar fuentes personalizadas, animaciones y grandes bibliotecas JavaScript. Mantén las cosas ligeras. Diseña para la velocidad y respeta el tiempo de los usuarios. Resiste la tentación de deslumbrar. Mantén interacciones significativas. No utilices animaciones innecesarias. Bebe mucha agua. Se amable y respetuoso hacia los demás. Escucha a tu madre.
«Si se mide la interacción con su aplicación para iOS en cuestión de minutos, usted puede esperar interacciones con su aplicación WatchKit a medir en segundos. Así que mantener interacciones breves e interfaces simples. «- Human Interface Guidelines reloj de Apple
El color y la tipografía
El uso del color y la tipografía es importante en la marca de tu aplicación, pero hay algunas consideraciones clave a tener en cuenta.
Color
«El color ayuda a proporcionar continuidad visual y de marca para su aplicación.» – Human Interface Guidelines reloj de Apple.
Utilice negro para el fondo. Se mezclará con bisel físico de la pantalla y mantendrá una ilusión de no borde de la pantalla. No utilices fondos brillantes.
Usa colores de alto contraste para el texto. Recuerda que el reloj no se usa durante largos períodos de tiempo, los usuarios deben ser capaces de leer su contenido de forma rápida y sencilla.
Se consciente de daltonismo.
Tipografía
Por todos los medios utilizar fuentes personalizadas, pero ser conscientes de que la fuente del sistema fue diseñado para funcionar bien en este nuevo dispositivo.
«Por encima de todo, el texto debe ser legible. Si los usuarios no pueden leer las palabras en su aplicación, no importa cómo es hermoso la tipografía es. «- Human Interface Guidelines reloj de Apple.
Estilos de texto
Los estilos de texto son descripciones semánticas de los usos previstos para los tipos de letra. Ejemplos son cosas como Titular, Cuerpo etc. probablemente estás familiarizado con los equivalentes HTML de <h1> <h2> <body> y similares. Si utilizas los estilos de texto incorporadas, obtiene el apoyo Tipo Dinámico libre que responde automáticamente a las preferencias de accesibilidad de los usuarios. Si utiliza fuentes personalizadas, debes hacer un poco de trabajo para adoptar la función.
Espacio
El reloj de Apple es más pequeño que un teléfono inteligente, obviamente. Todo el espacio disponible se debe utilizar de forma inteligente para que las interacciones con sus usuarios sean lo más agradables posible. Mantén tus botones grandes, para que sea fácil interactuar con ellos. Considera maneras de utilizar el menú táctil para opciones adicionales. Resiste la tentación de mostrar tu logotipo en la aplicación, hay otras maneras de mostrar la marca de tu aplicación a través de la utilización de los colores y las imágenes.
«El espacio en el Apple Watch es un bien escaso, y cada ocurrencia de un logotipo quitando espacio a partir del contenido que los usuarios quieren ver.» – Apple Seguir Human Interface Guidelines
El reloj de Apple tiene un bisel en los bordes que se suma a tus diseños. Por lo tanto, no tienes que añadir los márgenes de los bordes de las pantallas.
Parece un poco extraño al principio, pero hay que tenerlo en cuenta para tus diseños
Tamaño De Pantalla
Las aplicaciones muestran la misma interfaz en ambos tamaños de los modelos, (38mm y 42mm) así que usando unidades relativas se puede permitir que tus pantallas crezcan y se contraigan para llenar el espacio disponible en los dos tamaños. La pantalla siempre está en el modo de retrato: la altura es mayor que la anchura.
Navegación
En aplicaciones WatchKit te encontrarás con dos patrones de navegación completamente diferentes:
Jerárquica
«Jerárquica» es un patrón de navegación que consiste en una lista de desplazamiento vertical para permitir al usuario realizar una selección (tocando) por la pantalla hasta llegar a su destino deseado.
Página Base
«Página base» es un estilo de navegación de desplazamiento horizontal que indica la página actual por una serie de puntos a lo largo de la parte inferior de la pantalla de reloj.
No se pueden combinar estos dos sistemas en la misma aplicación, pero puede mostrar «hojas de estilo», independientemente de su tipo de navegación.
Interacciones
Puede haber más formas para que un usuario pueda interactuar con su aplicación en las generaciones futuras (tales como multi táctil y nuevos gestos), pero por el momento estos son las únicas maneras.
Un Toque – Se utiliza para cosas como presionar botones y hacer selecciones.
Gestos limitados – golpe vertical para navegar por las pantallas , golpes horizontales para navegar a través de las pantallas bases, dejaron deslizar borde horizontal para volver a la pantalla anterior. No hay manera de hacer deslizar el trabajo fuera de navegar entre las páginas o en una tabla vertical.
Fuerza Táctil – Presiona fuertemente en la esfera del reloj para acceder a un menú asociado a la pantalla actual.
Corona digital – La rueda del lado del reloj puede ser usado en su aplicación para permitir sólo el desplazamiento vertical.
Vistas
La Interfaz de Vistas es descrita por Apple como «una forma suplementaria para que el usuario vea la información importante de su aplicación». Piensa en la información que necesitas mostrar de forma rápida en una pantalla, al igual que el tiempo. Tu aplicación tiene información que deseas que el usuario mire con frecuencia? Considera la posibilidad de la construcción de un «vistazo» para mostrar esa información.
Grupos
Los grupos son contenedores para objetos de su aplicación, se puede pensar en ellos como un poco como divs en html. Los grupos tienen un relleno por defecto que se puede cambiar o eliminar si lo desea. Ellos no tienen la apariencia por defecto, pero tienen atributos de posición de ajuste, radio de esquina, tamaño, márgenes y el fondo. Puedes establecer un grupo de elementos de diseño horizontal o vertical y se puede anidar grupos dentro de otros grupos para crear diseños más sofisticados.
Estas son algunas de las plantillas de grupo superior e inferior de la pantalla de vista:
Notificaciones
Las notificaciones se muestran al usuario de dos maneras diferentes: con una mirada corta y una mirada larga.
Notificaciones Cortas
Estas le indican al usuario que lo que la aplicación está notificando y da un titular. Si el usuario no toca el reloj, la notificación desaparece. El usuario no tiene que interactuar manualmente con la notificación para quitarla. El diseño de la notificación Corta está basada en plantillas y contiene el icono de la aplicación, nombre de la aplicación y una cadena de título. Mantén tus cadenas de título tan cortas y significativas como sea posible.
Notificaciones Largasa
Estos proporcionan más detalles acerca de la notificación y son más personalizable en su apariencia. La estructura básica es la misma para todas las aplicaciones e incluye una banda en la parte superior que muestra el icono y el nombre de la aplicación, el contenido personalizado de su aplicación, hasta cuatro botones de acción y, por último, un botón para descartar en la parte inferior.
Elementos de interfaz de usuario
«Al diseñar los elementos gráficos de su aplicación, recuerde que cada elemento personalizado debe lucir bien y funcionar bien por sí mismo, sino que también debe ser similar al que pertenece con los demás elementos de la aplicación, ya sean personalizados o estándar.» – Apple Ver Human Interface Guidelines
Animaciones
Transferir animaciones dinámicas desde el iPhone que lleva a un retraso inevitable. Una aplicación de reloj podría sido rechazada debido a la fuerte dependencia de las animaciones, así que úselas sólo para comunicar el estado y proporcionar información al usuario. No se recomienda el uso gratuito de animaciones (incluso si la animación es la de un bebé bailando).
Botones
Usa iconos en lugar de texto para los botones colocados uno al lado de otro y nunca pongas más de tres al lado del otro
Esto puede sonar obvio, pero recuerda que las pantallas del son pequeñas así que mantén los botones lo más grande posible. Los botones pueden tener una imagen o color para el fondo, así como un color diferente para el texto. Pueden contener un objeto de etiqueta o grupo y tendrán esquinas redondeadas (el radio de esquina por defecto es de 6 puntos).
>Menú de Fuerza Táctil
El menú de fuerza táctil muestra el menú de la pantalla con un máximo de cuatro acciones. Se mostrará las acciones de arriba a abajo, de izquierda a derecha, según el orden en que se agregan al menú. No se desplazan.
Acciones de menú (botones) requieren una imagen y una etiqueta. La imagen debe ser la línea de arte y un solo color con un fondo transparente. Pesos Uso de línea que sean apropiados para el tamaño del dispositivo y la complejidad del icono, entre 4px y 9px según Apple.
Recuerde el menú contextual fuerza táctil, ya que esta es una manera nueva y emocionante manera de interactuar con el dispositivo. En lugar de añadir botones adicionales a su interfaz, puede utilizar el menú contextual fuerza táctil.
Iconos
Los iconos son círculos png. Puede crear como colores indexados para ahorrar espacio, 24 bits y sin transparencia. Los iconos no tienen texto en ellos en la pantalla del reloj casa.
Imágenes
Use una imagen para todos los tamaños de pantalla. La velocidad y la eficiencia son muy importantes, por lo comprimen sus imágenes tanto como sea posible. Intente guardar tus PNGs con color indexado sobre un fondo negro sólido en lugar de en un fondo transparente. Crear todos los activos de imagen como @ 2x recursos; no hay necesidad de crear imágenes no retina.
Comprime tus PNGs con herramientas como tinypng, PNGOUT y pngcrush. ImageOptim es una gran utilidad gratuita para los usuarios de mac.
Mapas
Los mapas son imágenes estáticas de un lugar y no son interactivos. Al tocar en un mapa lleva al usuario al mapa de aplicaciones.
Etiquetas
Una etiqueta es una forma elegante de decir «una cadena estática de texto». No permite la interacción directa del usuario, aunque se puede actualizar mediante programación y puede abarcar varias líneas.
Sliders
Los sliders permiten a los usuarios realizar ajustes tocando las imágenes a la izquierda y la derecha.
Interruptores
Interruptores dan a su usuario una forma de especificar una de las dos opciones. Dentro o fuera, sí o no, etc. Estilísticamente van a estar familiarizados con iOS, y siempre incluyen una etiqueta.
Tablas
Una tabla presenta filas de datos en una sola columna que el usuario puede desplazarse verticalmente a través. Mantenlas más pequeñas que 20 filas pero si usted tienes más de 20 filas se puede dar al usuario la opción de cargar más. Tablas de cambio de tamaño dinámicamente según el número de filas que contienen. Como resultado, las tablas ignoran las restricciones de altura colocados sobre ellos por grupos.
En Conclusión
El Reloj de Apple es una nueva plataforma apasionante que continuará evolucionando a medida que los diseñadores web y desarrolladores web jueguen con él y construyan nuevas experiencias increíbles. Las ideas involucradas con un dispositivo que se conecta al usuario y puede reunir ritmo cardíaco y otras informaciones seguirá evolucionando.
