Metro (interfaz)

La versión actual de la página aún no ha sido revisada por colaboradores experimentados y puede diferir significativamente de la versión revisada el 14 de diciembre de 2019; las comprobaciones requieren 9 ediciones .

Metro es el nombre en código  interno del estilo artístico de la interfaz gráfica de usuario de los productos de Microsoft . Las características características son un enfoque en la tipografía y un énfasis en el texto, el minimalismo gráfico, la animación fluida, uno de los elementos distintivos del estilo son los "mosaicos" rectangulares planos.

Diseñado originalmente para su uso con Windows Phone , también se ha utilizado para crear la interfaz de usuario para la Enciclopedia Encarta y MSN 2.0, así como para Zune y Windows Media Center . Más tarde, Metro se creó en la interfaz de Windows Phone , el sitio web de Microsoft, Xbox 360 , Windows 8 [1] , Xbox One , Windows 10 (parcialmente).

Historia

De acuerdo con la propia versión del diseño de Microsoft, la obra de arte se basa en los letreros que se encuentran comúnmente en los sistemas de transporte público, como los ubicados en el sistema de transporte King County Metro [2] , que sirve al área más grande de Seattle , donde Microsoft tiene su sede.

Los primeros elementos de estilo Metro se encuentran en Windows Media Center para Windows XP Media Center Edition, que utiliza texto como forma principal de navegación. Esta interfaz también se ha portado a versiones posteriores de Media Center. En 2006, la interfaz de Zune se actualizó con estos principios. Los diseñadores de Microsoft decidieron rediseñar la interfaz con más énfasis en la tipografía limpia . Estos principios y la nueva interfaz de usuario de Zune se usaron en Windows Phone , muchos de los cuales se usaron en Windows 8. Los "mosaicos vivos" de colores planos se introdujeron en Metro al principio del desarrollo de Windows Phone. Microsoft ha comenzado a integrar estos elementos en sus otros productos, con una influencia directa que se ve en las versiones más nuevas de Windows Live Messenger , Live Mesh y Windows 8 [1] .

Principios

El estilo Metro se basa en los principios de diseño de estilo suizo . Los principios fundamentales de Metro son el énfasis en una buena tipografía y un texto grande que llama la atención de inmediato. Microsoft llama a Metro "simple, limpio, moderno", así como una "actualización" de las interfaces basadas en íconos de Windows , Android e iOS [3] .

Microsoft diseñó Metro específicamente para fortalecer un grupo de tareas comunes para un uso más rápido. Esto se logra eliminando los gráficos superfluos y, en su lugar, confiando en el contenido real para que funcione como la interfaz de usuario principal.

La animación juega un papel importante. Microsoft recomienda transiciones suaves e interacción del usuario basadas en movimientos reales (como tocar o arrastrar). Esto le da al usuario la impresión de una interfaz "animada" y receptiva con "una sensación adicional de profundidad" [4] [5] .

Microsoft ha compilado una lista interna de principios que se consideran la base de Metro [6] .

Casi al mismo tiempo que el lanzamiento oficial de Windows 8 (26 de octubre de 2012), a medida que más desarrolladores y socios de Microsoft comenzaron a trabajar en la creación de nuevas aplicaciones de estilo Metro, se crearon muchos sitios web de recursos sobre el tema, incluidas pautas específicas de diseño de gráficos. interfaces para la Tienda Windows [7] .

Fuente

Todas estas fuentes en su mayoría difieren solo en detalles menores. Las diferencias más obvias entre Segoe UI y Segoe WP se ven en los caracteres digitales. La versión de Segoe UI utilizada en Windows 8 es similar a Segoe WP. Los caracteres con cambios tipográficos notables en esta versión incluyen 1 , 2 , 4 , 5 , 7 , 8 e I y Q.

Calificaciones

La reacción inicial a Metro fue en general positiva. En una revisión de Zune HD , Engadget dijo: "Microsoft continúa su impulso por una tipografía grande, grande aquí, ofreciendo un diseño sofisticado y cuidadosamente diseñado que es casi tan funcional como atractivo" [9] . CNET elogió a Metro y dijo: "Es un poco más atrevido e informal que las 'cuadrículas' rígidas y estériles de íconos y los menús tipo archivador del iPhone y el iPod touch " [10] .

La Sociedad de Diseñadores Industriales de  América (IDEA ) ha otorgado al Windows Phone que usa Metro un premio Gold People's Choice Design Award, así como un premio Best in Show [11] :

La innovación aquí es la interacción fluida y el enfoque en los datos sin utilizar las convenciones de la interfaz de usuario tradicional: ventanas y marcos. Los datos se convierten en visuales y controles. Los gestos y las transiciones simples le permiten profundizar en el contenido. Una experiencia verdaderamente elegante y única.

Texto original  (inglés)[ mostrarocultar] La innovación aquí es la fluidez de la experiencia y el enfoque en los datos, sin usar las convenciones tradicionales de la interfaz de usuario de ventanas y marcos. Los datos se convierten en elementos visuales y controles. Gestos y transiciones simples guían al usuario más profundamente en el contenido. Una experiencia verdaderamente elegante y única. — Isabelle Ancona, consultora de experiencia de usuario en IDEA [12]

El 25 de agosto de 2012, Peter Bright de Ars  Technica realizó una vista previa de Windows 8 y dedicó la primera parte de la revisión a comparar la pantalla de inicio de Windows 8 (construida con Metro) con su versión anterior en Windows 7 y versiones anteriores. Analizando sus pros y sus contras, Peter Bright concluyó que la pantalla de Inicio, aunque no sin algunos problemas, es una clara ganadora [13] .

Retiro del nombre de Metro

En agosto de 2012, comenzaron a circular rumores de que uno de los socios minoristas de Microsoft, la empresa alemana Metro AG  , amenazaba con emprender acciones legales contra Microsoft por infringir la marca comercial "Metro" . Se envió un memorando a los desarrolladores y empleados de Microsoft instándolos a dejar de usar el término "Metro" en relación con los resultados de las negociaciones con un "socio europeo importante" [14] [15] . Microsoft está llamando temporalmente al lenguaje de diseño "IU moderna".

El 9 de agosto de 2012, se reveló que Microsoft planea usar el término "Windows 8" para reemplazar "Metro" en los materiales de consumo, y el término "IU moderna" está destinado a los desarrolladores que planean crear software basado en nuevos principios de diseño. [16] . Desde septiembre de 2012, la documentación de MSDN ha utilizado el término " lenguaje de diseño de Microsoft "  al referirse al lenguaje de diseño [17] [18] [19] [20] . Además, en la conferencia de desarrolladores Microsoft Build 2012, la empresa también utiliza el nombre "Microsoft Design Language" [21] [22] .

Para referirse a las aplicaciones creadas en el estilo Metro para Windows 8, los términos "aplicación en el estilo de Windows 8" ( ing.  aplicación de estilo Windows 8 ) y "aplicación de la Tienda Windows " ( ing.  aplicación de la Tienda Windows ) son usó.

Véase también

Notas

  1. 1 2 Guía de diseño e interacción de la interfaz de usuario de Windows Phone 7 Series  ( 18 de marzo de 2010). Consultado el 9 de octubre de 2010. Archivado desde el original el 15 de mayo de 2013.
  2. Lenguaje de diseño Metro de Windows Phone  7 . microsoft.com. Consultado el 5 de octubre de 2012. Archivado desde el original el 24 de mayo de 2013.
  3. Examinar la página principal de Blackboard. Metro -Pizarra  . Businessinsider.com (25 de abril de 2011). Consultado el 3 de noviembre de 2011. Archivado desde el original el 24 de mayo de 2013.
  4. Interfaz de usuario de Windows Phone y  lenguaje de diseño . Consultado el 9 de octubre de 2010. Archivado desde el original el 24 de mayo de 2013.
  5. From Transportation to Pixels , blog del equipo de Windows, 2011-02-16 , < http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/02/16/from-transportation-to-pixels.aspx > Archivado copia fechada el 18 de febrero de 2011 en Wayback Machine 
  6. Lenguaje de diseño Metro de Windows Phone 7 |  Caja de herramientas de diseño de Microsoft . Microsoft.com. Consultado el 8 de septiembre de 2011. Archivado desde el original el 15 de mayo de 2013.
  7. Pautas de UX para las aplicaciones de la Tienda Windows . Consultado el 15 de mayo de 2013. Archivado desde el original el 30 de noviembre de 2012.
  8. Long Zheng. “Zegoe”, la nueva fuente de Zune.  (Inglés) . istartedsomething.com (14 de noviembre de 2007). Consultado el 15 de octubre de 2012. Archivado desde el original el 25 de mayo de 2013.
  9. ↑ Topolsky , revisión de Joshua Zune HD  . Aol (17 de septiembre de 2009). Consultado el 19 de febrero de 2013. Archivado desde el original el 25 de mayo de 2013.
  10. Reseña de Zune HD 64GB  . CNET . CBS Interactive (17 de septiembre de 2009). Consultado el 19 de febrero de 2013. Archivado desde el original el 25 de mayo de 2013.
  11. Warren, Tom Windows Phone gana IDEA 2011:  premio de diseño popular . WinRumors (18 de septiembre de 2011). Consultado el 19 de febrero de 2013. Archivado desde el original el 28 de mayo de 2013.
  12. Windows Phone  7 . Sociedad de Diseñadores Industriales de América (8 de junio de 2011). Consultado el 3 de noviembre de 2011. Archivado desde el original el 28 de mayo de 2013.
  13. Bright, Peter Windows 8 en el escritorio: un  híbrido incómodo . Ars Technica . Condé Nast Digital (25 de abril de 2012). Consultado el 19 de febrero de 2013. Archivado desde el original el 25 de mayo de 2013.
  14. Microsoft se ve obligada a cambiar el nombre de la interfaz  (ing.) . BBC (3 de agosto de 2012). Consultado el 19 de febrero de 2013. Archivado desde el original el 9 de marzo de 2013.
  15. Microsoft eliminará el nombre 'Metro' para Windows  8 . Noticias de la BBC. Consultado el 26 de mayo de 2013. Archivado desde el original el 26 de mayo de 2013.
  16. Microsoft cambia oficialmente el nombre de Metro UI a Modern  UI . El Registro (1 de agosto de 2012). Consultado el 26 de mayo de 2013. Archivado desde el original el 26 de mayo de 2013.
  17. Cree excelentes aplicaciones de la Tienda Windows . MSDN. Consultado el 17 de septiembre de 2012. Archivado desde el original el 26 de mayo de 2013.
  18. ↑ Estudio de caso de diseño: aplicación de iPad a Windows Store  . MSDN. Consultado el 1 de noviembre de 2012. Archivado desde el original el 26 de mayo de 2013.
  19. Directrices para la  tipografía . MSDN. Consultado el 1 de noviembre de 2012. Archivado desde el original el 26 de mayo de 2013.
  20. Hoja de ruta para las aplicaciones de la Tienda Windows que usan DirectX y C  ++ . MSDN. Consultado el 1 de noviembre de 2012. Archivado desde el original el 26 de mayo de 2013.
  21. El lenguaje de diseño de Microsoft  . Canal 9 (Microsoft). Consultado el 1 de noviembre de 2012. Archivado desde el original el 26 de mayo de 2013.
  22. Mary Jo Foley. Lenguaje de diseño de Microsoft: la forma oficial más nueva de referirse a 'Metro  ' . Consultado el 1 de noviembre de 2012. Archivado desde el original el 26 de mayo de 2013.

Enlaces