7.3.12

¿Qué son las aplicaciones estilo Metro (Metro Style)? Características y Principios.

Según la página web oficial de Microsoft msdn.microsoft.com "las aplicaciones estilo Metro son inmersivas y sin contenedor visual, por lo que llenan la pantalla completa y no provocan distracciones. Las aplicaciones estilo Metro trabajan en colaboración, lo que hace que sea fácil buscar, compartir y enviar contenido entre ellas. Cuando los usuarios se conectan a Internet, sus aplicaciones les muestran el contenido más actual para que puedan mantenerse al día. Con una cuenta conectada, los usuarios pueden descargar aplicaciones y usarlas en cualquier dispositivo con Windows."

Desde nuestro humilde punto de vista las aplicaciones estilo Metro focalizan el papel protagónico a este tipo de programas, dejando atrás en un inmejorable Backstage al Sistema Operativo, y en ese contexto, la apariencia  Metro style se olvida de los tradicionales botones de control, barra de título, menús y demás contenedores logrando una interfaz completamente intuitiva, clara y óptima a la hora de satisfacer las necesidades del usuario final.

Los lenguajes de programación para crear aplicaciones estilo Metro son JavaScript, C#, Visual Basic o C++.  Además, según Microsoft msdn.microsoft.com la Tienda Windows te ofrece todo lo que necesitas para vender tus aplicaciones y es todo lo que los usuarios necesitan para conseguir aplicaciones.

A continuación veamos un resumen extractado de la página web de Microsoft msdn.microsoft.com en donde describimos las características a tener en cuenta para el diseño e implementación de una aplicación estilo Metro:

Saca provecho del diseño con estilo Metro

  • La interfaz de usuario de tus aplicaciones debe exhibir el contenido, a través de un diseño limpio y abierto dejando en pantalla únicamente los elementos más relevantes.
  • Quita líneas, cuadros y efectos gráficos innecesarios y limita los contenedores visuales de navegación que están permanentemente en pantalla, como las pestañas y evita distraer a los usuarios con elementos visuales de navegación.
  • El lenguaje de diseño Metro usa una tipografía limpia en lugar de líneas y cuadros para ayudar a establecer la estructura y la jerarquía.
  • Usa tamaños, espesores y colores en el texto en una hoja de estilos de manera uniforme para transmitir la importancia de una sección de contenido. 
  • Comienza con las plantillas de proyecto Grid o Split de Visual Studio para elaborar el diseño e incorpora una silueta estilo Metro para ofrecer sensación de familiaridad y confianza.
  • Usa interacciones que mantengan al usuario al mando y confiado.
  • Saca provecho del zoom semántico y úsalo como un medio rápido, fluido y centrado en el contenido para navegar por una lista larga de contenido.
  • Aprovecha los bordes para mostrar comandos solo cuando se necesiten, para evitar abarrotar el lienzo. 
  • Coloca los comandos en la barra de la aplicación, que puede aparecer y desaparecer cuando el usuario haya completado sus acciones.
  • Saca partido de los botones de acceso Buscar, Compartir, Dispositivos o Configuración, que se pueden invocar a demanda pasando el dedo desde el borde derecho.
  • Evita colocar comandos permanentes en la pantalla y mostrar puntos de entrada duplicados para los contratos a los que se accede mediante botones de acceso.

Sé rápido y fluido

  • Responde a las acciones del usuario rápidamente
  • Animaciones con propósito que den vida a las aplicaciones y enlazan las experiencias visuales y cuentan una historia, todo viene de algún lugar y va a algún lugar.
  • Las aplicaciones estilo Metro están diseñadas para ser tocadas. Emplean las manos y los dedos para su principal objetivo, teniendo en cuenta la comodidad y la ergonomía.
  • Haz que el contenido siga tus dedos. Ve más allá del gesto de pulsar y usa interacciones deslizantes, como el zoom semántico.
  • Ofrece información visual inmediata sobre el gesto táctil para que el usuario sepa si ha tocado el destino deseado.
  • No crees interacciones diferentes para el mouse y la entrada táctil.

Ajusta y cambia la escala con elegancia

  • Crea una experiencia única en cada factor de forma y cada opción de vista que se abra a los usuarios ya que tu aplicación podría usarse en los cientos de millones de equipos que ejecutan Windows 8. Estos equipos tienen una amplia variedad de tamaños de pantalla y resoluciones, desde <tabletas de 10" a >pantallas de 27".
  • La plataforma ajusta la escala automáticamente en función del tamaño y la resolución de la pantalla del dispositivo.
  • Usa el simulador de Microsoft Visual Studio para ver el aspecto que tendrá tu aplicación en diferentes factores de forma.
  • Todas las aplicaciones deben implementar un estado ajustado para que los usuarios mantengan la aplicación en pantalla más tiempo. 
  • Cuando se ajusta, el ancho de la aplicación se fija en 320 píxeles, pero el alto es variable.
  • Cuando tu aplicación está en pantalla puedes ajustar otras aplicaciones, por lo que debes diseñarla para que se redistribuya de forma fluida desde un ancho mínimo de 1024 píxeles.
Usa los contratos adecuados
  • Los contratos son como un acuerdo entre Windows y una o mas aplicaciones los cuales definen los requisitos que las aplicaciones deben cumplir para interactuar con Windows 
  • Para algunos de los contratos más comunes, como buscar, compartir y selectores de archivos, comienza con las plantillas de elemento correspondientes de Visual Studio.
  • Evita crear una interfaz de usuario alternativa en el lienzo de la aplicación para invocar a los contratos; eso podría confundir al usuario.
  • Los contratos de compartir permiten a los usuarios compartir datos de una aplicación con otra. Todas las aplicaciones deberían ser un origen de contenido compartido e implementar el conjunto de formatos más amplio posible. Las aplicaciones que publican, almacenan o transforman los datos compartidos son buenas candidatas para ser un destino de contenido compartido. 
  • Los contratos de buscar permiten a los usuarios buscar el contenido de una aplicación desde cualquier lugar de Windows. Usa el botón de acceso Buscar en lugar de una búsqueda personalizada de la aplicación. Ofrece sugerencias de búsqueda para ayudar al usuario a encontrar algo rápidamente.
  • Los contratos de selector de archivos permite al usuario acceder al contenido de una aplicación desde otra aplicación, Saca provecho de este contrato si tu aplicación accede o almacena archivos que pueden ser útiles para usuarios de otro contexto.
  • Usa el control ListView para obtener el diseño fluido y el comportamiento de selección que integra.
Invierte en un mosaico excepcional
  • Un mosaico es la puerta de entrada a una aplicación. Alojado en la pantalla de Inicio, es una extensión de la aplicación y puede proporcionar información mucho más personal y atractiva que un icono tradicional. 
  • Personaliza el contenido que se muestra en el mosaico y actualízalo.
  • Haz referencia al contenido de la página de inicio de la aplicación para que los usuarios la encuentren fácilmente después de iniciar la aplicación.
  • Usa mosaicos secundarios para que los usuarios dispongan en su pantalla de Inicio de subsecciones de contenido de la aplicación interesantes y que se actualicen con frecuencia.
Sentirse conectado y vivo
  • Ofrece contenido actualizado a través de notificaciones y mosaicos vivos.
  • Un contenido actualizado en el mosaico da motivos al usuario para colocarlo en un lugar destacado de la pantalla de Inicio, y para iniciar la aplicación una y otra vez. Un mosaico vivo puede actualizarse hasta 5 veces.
  • El contenido que se muestra en las actualizaciones vivas debe ser accesible desde la página de inicio de la aplicación y Quita las notificaciones obsoletas desde la página de inicio.
  • Las aplicaciones pueden usar notificaciones para mostrar breves mensajes sujetos a limitación temporal que deben irrumpir desde cualquier lugar de Windows.
  • La mayoría de las aplicaciones deben ser silenciosasm es decir, el usuario debe poder elegir habilitar las notificaciones en una aplicación y estas deben estar sujetas a limitación temporal y son pertinentes.
  • Combina las notificaciones si se producen varias actualizaciones en un corto período de tiempo.
  • No uses notificaciones para mostrar errores o advertencias. Los errores deben mostrarse en línea o en ventanas flotantes o cuadros de diálogo de mensajes.
Perfiles móviles en la nube
  • Usa un perfil móvil para los datos que permiten al usuario retomar una tarea en el mismo punto donde la dejaron, sacando provecho de las cuentas Microsoft y el almacenamiento en la nube para almacenar configuraciones, estados y una pequeña cantidad de contenido del usuario.
  • Ejemplos de configuración de la aplicación idóneos para usar con un perfil móvil:
    • Ciudades y preferencias de grados Celsius o Fahrenheit en una aplicación de información meteorológica
    • Fuentes RSS a las que se suscribieron los usuarios en una aplicación de noticias
    • Equipos favoritos en una aplicación deportiva
    • Ejemplos de estados de aplicación idóneos para usar con un perfil móvil:
    • La última posición leída en una aplicación de lectura
    • El último punto de control o movimiento completado en un juego
    • La última pista reproducida en una aplicación de música
  • Conserva el estado sin necesidad de guardar explícitamente para garantizar una experiencia continua.
  • Como regla general, reanuda la aplicación tal cual la dejó el usuario en lugar de iniciarla desde cero.
  • Inicia la aplicación desde cero si ha transcurrido un período de tiempo largo desde que accedió por última vez y el contenido anterior ya no es relevante. 
  • No termines la aplicación cuando se quite de la pantalla. No ofrezcas a los usuarios formas de terminar tu aplicación.
Adopta los principios de diseño con estilo Metro
  • Muestra buen hacer
  • Dedica tiempo y energía a las pequeñas cosas que suelen ser vistas por muchos.
  • Proyecta una experiencia completa y sofisticada en todas las etapas.
  • Haz más con menos
  • Elimina las distracciones, no la capacidad de descubrir. Deja que el usuario se concentre en lo que le gusta y ya explorará el resto.
  • Deja solo los elementos más relevantes en la pantalla para que el usuario pueda concentrarse en el contenido y crear así una experiencia nítida y con propósito.
  • Sé rápido y fluido
  • Permite que el usuario interaccione directamente con el contenido y responde a las acciones rápidamente con una energía acorde.
  • Da vida a la experiencia, crea una sensación de continuidad y cuenta una historia mediante el uso significativo del movimiento.
  • Sé auténticamente digital
  • Aprovecha todas las ventajas de los medios digitales. Elimina los límites físicos para crear experiencias que sean más eficientes y naturales que la realidad.
  • Acepta el hecho de que somos píxeles en una pantalla. Crea diseños con imágenes y colores intensos, vibrantes y llamativos que traspasen los límites de los materiales del mundo real.
  • Gana en equipo
  • Saca provecho del ecosistema y trabaja con otras aplicaciones, dispositivos y el sistema para completar los escenarios para el usuario.
  • Ajústate al modelo de interfaz de usuario para reducir la redundancia. Aprovecha lo que la gente ya sabe para ofrecer una sensación de familiaridad, control y confianza.



No hay comentarios:

Publicar un comentario