Hispanopedia Wiki
Articulo de referencia

Metro (lenguaje de diseño)

Calculadora de Windows creada con el diseño Metro en Windows 8.1 : los componentes clave de Metro, como se muestra aquí, incluyen una fuente ligera/delgada e iconos planos. El l...

Hispanopedia WikiContenido en espanolLectura gratuita

Calculadora de Windows creada con el diseño Metro en Windows 8.1 : los componentes clave de Metro, como se muestra aquí, incluyen una fuente ligera/delgada e iconos planos.

El lenguaje de diseño de Microsoft (o MDL ), [ 1 ] también conocido como Metro , es un lenguaje de diseño creado por Microsoft y se basa en el estilo de diseño plano . Este lenguaje de diseño se centra en la tipografía y los iconos simplificados , la ausencia de elementos superfluos, una mayor proporción de contenido respecto al borde ("contenido antes del borde") y formas geométricas básicas.

El centro de Música y Vídeo en Windows Phone, que muestra elementos de diseño Metro, incluidos encabezados en minúsculas y mosaicos anchos.

Los primeros ejemplos de los principios de MDL se pueden encontrar en Encarta 95 y MSN  2.0 . [ 2 ] [ 3 ] El lenguaje de diseño evolucionó en Windows Media Center y Zune y se introdujo formalmente como Metro durante la presentación de Windows Phone 7 en 2010, después de lo cual se incorporó a varios otros productos de la compañía, incluido el software del sistema Xbox 360 y el software del sistema Xbox One , Windows 8 , Windows Phone y Outlook.com . [ 4 ] [ 5 ] Antes de que el título de "lenguaje de diseño de Microsoft" se volviera oficial, el ejecutivo de Microsoft Qi Lu se refirió a él como el lenguaje de diseño de interfaz de usuario moderno en su discurso de apertura de la conferencia MIXX . [ 6 ] Según Microsoft, "Metro" siempre ha sido un nombre en clave y nunca se pensó como un producto final, pero los sitios web de noticias atribuyen este cambio a problemas de marca registrada. [ 4 ]

El lenguaje de diseño de Microsoft 2 (MDL2) se desarrolló junto con Windows 10 , introduciendo varios ajustes. [ 7 ] [ 8 ] En 2017, Microsoft presentó el sistema de diseño Fluent , que gradualmente reemplazó a Metro en los años siguientes. [ 9 ]

Historia

El lenguaje de diseño se basa en los principios del diseño gráfico suizo clásico . Los primeros atisbos de este estilo se pudieron ver en Windows Media Center para Windows XP Media Center Edition , [ 10 ] que favorecía el texto como forma principal de navegación, así como en los primeros conceptos de Neptune . [ 11 ] Esta interfaz se mantuvo en iteraciones posteriores de Media Center. En 2006, Zune actualizó su interfaz utilizando estos principios. Los diseñadores de Microsoft decidieron rediseñar la interfaz con mayor énfasis en la tipografía limpia y menos en la apariencia de la interfaz. [ 12 ] Estos principios y la nueva interfaz de usuario de Zune se trasladaron a Windows Phone, lanzado por primera vez en 2010 (del cual se tomaron muchos elementos para Windows 8). El cliente de escritorio de Zune también se rediseñó con énfasis en la tipografía y un diseño limpio que era diferente de la interfaz de usuario anterior de Zune basada en Portable Media Center . Los "mosaicos dinámicos" de colores planos se introdujeron en el lenguaje de diseño durante los primeros estudios de Windows Phone.

En una entrevista se explicó que las distintas divisiones de Microsoft utilizan los productos de las demás, y que la extensión de Metro no fue un enfoque de toda la empresa, sino que equipos como Xbox se interesaron por Metro y lo adaptaron para sus propios productos. Muchas de las divisiones de Microsoft terminaron adoptando Metro. [ 13 ]

Microsoft Design Language 2 (MDL2) se desarrolló junto con Windows 10. Esta versión introdujo un nuevo conjunto de widgets , incluidos selectores de fecha, interruptores y botones de alternancia, y redujo el grosor de los bordes de todos los elementos de la interfaz de usuario. [ 7 ] [ 8 ] Otros cambios incluyen botones de hamburguesa para acceder a las vistas en lugar del panorama/carrusel del Metro original. [ 14 ]

Principios

Fuente Segoe UI en Windows Vista y Windows 7 (arriba); y Windows 8 , Windows 8.1 y Windows 10 (abajo)
Principios de diseño del lenguaje de diseño de Microsoft detrás de la pantalla de inicio en Windows 8 y Xbox One (arriba) y Windows 10 "Threshold" (abajo), que también se utiliza en Windows Store , Xbox Music y Xbox Video : los mosaicos representan unidades atómicas de información.

El equipo de diseño de Microsoft cita como inspiración para el lenguaje de diseño las señales que se encuentran comúnmente en los sistemas de transporte público. [ 15 ] El lenguaje de diseño pone énfasis en una buena tipografía y tiene texto grande que llama la atención. Microsoft vio el lenguaje de diseño como "elegante, rápido, moderno" y una "renovación" de las interfaces basadas en iconos de Windows, Android e iOS . [ 16 ] Todas las instancias usan fuentes basadas en la familia de fuentes Segoe diseñada por Steve Matteson en Agfa Monotype y licenciada a Microsoft. Para Zune, Microsoft creó una versión personalizada llamada Zegoe UI, [ 17 ] y para Windows Phone Microsoft creó la familia de fuentes Segoe WP. Las fuentes difieren principalmente solo en detalles menores. Las diferencias más obvias entre Segoe UI y Segoe WP son evidentes en sus respectivos caracteres numéricos. La fuente Segoe UI en Windows 8 tenía diferencias obvias, similares a Segoe WP. Entre los caracteres con cambios tipográficos notables se incluyen el 1, el 2, el 4, el 5, el 7, el 8, la I y la Q.

Joe Belfiore fue uno de los arquitectos de Metro. En Nokia World 2011, Belfiore explicó que la interfaz de usuario busca ser "artística" en sus elementos textuales e iconografía . También mencionó el "movimiento" de la interfaz, específicamente en Windows Phone, de los Live Tiles, los puntos en movimiento y el desplazamiento cinético. [ 18 ]

Microsoft diseñó este lenguaje de diseño específicamente para consolidar grupos de tareas comunes y agilizar su uso. Lo logra eliminando gráficos superfluos y priorizando el contenido como interfaz principal. Las interfaces resultantes dan prioridad a los elementos centrales más grandes sobre los botones pequeños y suelen incluir lienzos con desplazamiento lateral. Los títulos de página suelen ser grandes y, por lo tanto, también aprovechan el desplazamiento lateral.

La animación desempeña un papel fundamental. Microsoft recomienda reconocer de forma consistente las transiciones y las interacciones del usuario (como pulsaciones o deslizamientos) mediante algún tipo de animación o movimiento natural. El objetivo es dar al usuario la impresión de una interfaz de usuario "viva" y receptiva con "una mayor sensación de profundidad". [ 19 ] [ 20 ]

Recepción

En el móvil

La respuesta inicial al lenguaje fue generalmente positiva. En una reseña del Zune HD , Engadget dijo: "Microsoft continúa su apuesta por una tipografía grande, ofreciendo un diseño sofisticado y pulcro que es casi tan funcional como atractivo". [ 21 ] CNET elogió el lenguaje de diseño, diciendo: "Es un poco más atrevido e informal que las cuadrículas de iconos ajustadas y estériles y los menús Rolodex del iPhone y el iPod Touch". [ 22 ]

En su ceremonia IDEA 2011, la Sociedad de Diseñadores Industriales de América (IDSA) otorgó a Windows Phone 7, que utiliza la interfaz de usuario, su premio "Interactivo de Oro", su "Premio del Público" y un premio "Mejor de la Exposición". [ 23 ] [ 24 ] Isabel Ancona, consultora de experiencia de usuario en IDSA, explicó por qué ganó Windows Phone: [ 25 ]

La innovación reside en la fluidez de la experiencia y en el enfoque en los datos, sin utilizar las convenciones tradicionales de interfaz de usuario, como ventanas y marcos. Los datos se convierten en los elementos visuales y los controles. Gestos y transiciones sencillas guían al usuario a través del contenido. Una experiencia verdaderamente elegante y única.

Se informó que la interfaz de usuario fue mejor recibida por las mujeres y los usuarios primerizos. [ 18 ]

Las críticas se centraron particularmente en el uso de texto en mayúsculas . Con el auge del uso de Internet, los críticos lo compararon con un programa informático que le grita al usuario. El periodista especializado en tecnología Lee Hutchinson describió el uso que Microsoft hace de esta práctica en la versión de OneNote para macOS como terrible, afirmando que está "maldita con menús de ventana de aplicación insensatos y no estándar EN MAYÚSCULAS que no solo violan las convenciones de diseño de OS X, sino que las sacan a un cobertizo, les echan gasolina y les prenden fuego". [ 26 ]

En un escritorio con Windows 8

Con la llegada de Windows 8 , la interfaz de usuario del sistema operativo y su lenguaje de diseño recibieron críticas generalmente negativas. El 25 de agosto de 2012, Peter Bright de Ars Technica analizó la versión preliminar de Windows 8, dedicando la primera parte del análisis a una comparación entre los diseños del menú Inicio de Windows 8 y Windows 7. Tras enumerar sus pros y sus contras, Peter Bright concluyó que el menú Inicio de Windows 8 (denominado pantalla de inicio), si bien no estaba exento de problemas, era claramente superior. Sin embargo, concluyó que la interfaz de usuario de Windows 8 era frustrante y que los distintos aspectos de la interfaz no funcionaban bien en conjunto. [ 27 ] Woody Leonhard fue aún más crítico al afirmar: «Desde el punto de vista del usuario, Windows 8 es un fracaso: una mezcla extraña que lo arrastra en dos direcciones a la vez». [ 28 ]

Además de los cambios en el menú Inicio, Windows 8 adopta un enfoque más modal con el uso de aplicaciones a pantalla completa que se alejan de la dependencia de la interfaz de escritorio basada en iconos. Sin embargo, al hacerlo, Microsoft ha desviado su atención de la multitarea y la productividad empresarial. [ 29 ]

Cambio de nombre

En agosto de 2012, The Verge anunció que se había enviado un memorándum interno a desarrolladores y empleados de Microsoft anunciando la decisión de "descontinuar el uso" del término "Metro" debido a "conversaciones con un importante socio europeo", y que estaban "trabajando en un término de reemplazo". [ 30 ] Los medios de noticias tecnológicas Ars Technica , [ 31 ] TechRadar , [ 32 ] CNET , [ 33 ] Engadget [ 34 ] y Network World [ 35 ] y la prensa generalista Bits Blog de The New York Times Company [ 36 ] y BBC News Online [ 37 ] publicaron que el socio mencionado en el memorándum podría ser uno de los socios minoristas de Microsoft, la empresa alemana Metro AG , ya que el nombre tenía el potencial de infringir su marca registrada "Metro". Microsoft declaró posteriormente que la razón para restar importancia al nombre no estaba relacionada con ningún litigio en curso, y que "Metro" era solo un nombre en clave de proyecto interno, [ 38 ] a pesar de haber promocionado ampliamente la marca al público. [ 39 ] En algunos contextos, la empresa comenzó a usar el término "Moderno" o el modificador más genérico "Windows 8" para referirse al nuevo diseño, posiblemente como un marcador de posición. [ 40 ]

En septiembre de 2012, se adoptó el término "lenguaje de diseño de Microsoft" como nombre oficial del estilo de diseño. [ 1 ] [ 41 ] El término se utilizó en la documentación de Microsoft Developer Network [ 42 ] [ 43 ] [ 44 ] [ 45 ] y en la conferencia Microsoft Build de 2012 para referirse al lenguaje de diseño. [ 1 ] [ 46 ]

En un cambio relacionado, Microsoft dejó de usar la frase " aplicaciones de estilo Metro " para referirse a las aplicaciones móviles distribuidas a través de la Tienda Windows . [ 41 ]

Véase también

Referencias

  1. 1 2 3 Foley, Mary Jo (29 de octubre de 2012). "Lenguaje de diseño de Microsoft: la forma oficial más reciente de referirse a 'Metro'"" . ZDNet . CBS Interactive .
  2. ↑ Green, Jay (8 de febrero de 2012). "Por qué Metro ahora domina en Microsoft" . CNET . CBS Interactive .
  3. ↑ Massey, Stephane (15 de febrero de 2012). " Principios de diseño de Metro Ui [ sic ] " . stephanemassey.com . Publicado por el autor . Archivado del original el 2 de agosto de 2018. Consultado el 17 de febrero de 2012 .
  4. 1 2 Chang, Alexandra (8 de agosto de 2012). "Microsoft no necesita un nombre para su interfaz de usuario" . Wired . Condé Nast .
  5. ↑ Kruzeniski, Mike (11 de abril de 2011). "Cómo el diseño impreso es el futuro de la interacción" . Kruzeniski.com . Publicado por el propio autor . Archivado del original el 14 de marzo de 2012. Consultado el 27 de agosto de 2011 .
  6. ^ Lu, Qi (1 de octubre de 2012). "Qi Lu: Conferencia magistral de IAB MIXX" . Centro de noticias . Microsoft.
  7. 1 2 Sams, Brad (21 de abril de 2015). "De Metro a Microsoft Design Language 2: una comparación lado a lado" . Neowin .
  8. 1 2 Rubino, Daniel (21 de abril de 2015). "Novedades del lenguaje de diseño de Microsoft 2 para Windows 10" . Windows Central . Mobile Nations.
  9. ↑ Warren, Tom (11 de mayo de 2017). "Fluent Design es la nueva interfaz de usuario Metro de Microsoft para Windows y más" . The Verge .
  10. ↑ Lefevers, Jason (15 de septiembre de 2013). "Un recorrido por la historia de la interfaz de usuario Metro" . Windows Phone Metro . Publicado por el propio autor . Archivado del original el 22 de mayo de 2013. Consultado el 15 de septiembre de 2013 .
  11. ↑ "SuperSite Flashback: Neptuno" . 6 de agosto de 2013.
  12. ↑ "Sistema de diseño de Windows Phone: nombre en clave 'Metro'"" (PDF) . Archivado del original (PDF) el 15 de noviembre de 2010 . Recuperado el 9 de octubre de 2010 .
  13. ↑ Carr, Austin (25 de enero de 2014). "A veces, Microsoft diseña cosas geniales. He aquí por qué nunca importa" . Fast Company .
  14. ↑ "Windows 10 recibe una renovación de interfaz de usuario muy necesaria con Project NEON - Digital Journal" . Archivado del original el 6 de noviembre de 2025. Consultado el 6 de julio de 2026 .
  15. ↑ "Lenguaje de diseño de Windows Phone 7" .. toolbox . Microsoft . Archivado del original el 9 de octubre de 2012. Consultado el 5 de octubre de 2012 .
  16. ↑ Hamburger, Ellis (27 de abril de 2011). "Metro" . Business Insider . Archivado del original el 23 de abril de 2013.
  17. ↑ Zheng, Long (14 de noviembre de 2007) ."Zegoe", la nueva fuente de Zune" . Empecé algo . Publicado por mí mismo .
  18. 1 2 "Construyendo un tipo diferente de interfaz de usuario" . 28 de octubre de 2011.
  19. ↑ Roberts, Chad; Shum, Albert; Smuga, Michael (15 de marzo de 2010). "Interfaz de usuario y lenguaje de diseño de Windows Phone" . MIX 2010. Microsoft .
  20. ↑ Kruzeniski, Mike (17 de febrero de 2011). "Del transporte a los píxeles" . Blog para desarrolladores de Windows Phone . Microsoft . Archivado del original el 18 de febrero de 2011.
  21. ↑ Topolsky, Joshua (17 de septiembre de 2009). "Reseña de Zune HD" . Engadget . AOL .
  22. ↑ "Análisis del Zune HD de 64 GB" . CNET . CBS Interactive . 17 de septiembre de 2009.
  23. ↑ Warren, Tom (18 de septiembre de 2011). "Windows Phone gana el premio del público a la mejor aplicación de diseño en IDEA 2011" . WinRumors . Archivado del original el 3 de marzo de 2012.
  24. ↑ "IDEA 2011 Mejor Proyecto" . Sociedad de Diseñadores Industriales de América . idsa.org. 23 de septiembre de 2011. Archivado del original el 25 de febrero de 2014.
  25. ↑ "Windows Phone 7" . Sociedad de Diseñadores Industriales de América . idsa.org. 8 de junio de 2011. Archivado del original el 15 de mayo de 2013. Consultado el 20 de septiembre de 2011 .
  26. ↑ Hutchinson, Lee (12 de julio de 2014). "Las tendencias de diseño de software que amamos odiar" . Ars Technica . Condé Nast .
  27. ↑ Bright, Peter (25 de abril de 2012). "Windows 8 en el escritorio: un híbrido incómodo" . Ars Technica . Condé Nast Digital . págs. 1–5 . 
  28. ↑ Leonhard, Woody (15 de agosto de 2012). "Reseña de Windows 8: Sí, es así de malo" . InfoWorld . IDG .
  29. ↑ Barney, Doug (17 de agosto de 2012). "Windows 8 ya no existe, es hora de preocuparse" . Redmond Magazine . 1105 Media.
  30. ↑ Warren, Tom (2 de agosto de 2013). "Exclusiva: la marca Metro de Microsoft será reemplazada 'esta semana' según un memorando interno" . The Verge . Vox Media .
  31. ↑ Bright, Peter (3 de agosto de 2012). "Microsoft: "Metro" fuera, "interfaz de usuario al estilo de Windows 8" dentro, en medio de rumores de una disputa de marca registrada" . Ars Technica . Condé Nast .
  32. ↑ Smith, Chris (3 de agosto de 2012). "Microsoft abandona el nombre 'Metro' para Windows 8 en medio de temores por marcas registradas" . TechRadar . Recuperado el 24 de septiembre de 2013 .
  33. ↑ Whitney, Lance (10 de agosto de 2012). "¿Por qué Microsoft eliminó el nombre 'Metro'?" . CNET . CBS Interactive .
  34. ↑ Fingas, Jon (2 de agosto de 2012). "Microsoft minimiza el nombre del diseño Metro y podría enfrentar una demanda por toda esa jerga callejera" . Engadget . AOL .
  35. ↑ Patrizio, Andy (6 de agosto de 2012). "Una fuente confirma que Microsoft abandonó Metro debido a un error de marca registrada" . Network World . IDG .
  36. ↑ Wingfield, Nick (3 de agosto de 2012). "Microsoft abandona el nombre Metro para un nuevo aspecto del producto" . Blog de Bits . The New York Times Company .
  37. ↑ "Microsoft eliminará el nombre 'Metro' de Windows" . BBC News Online . BBC . 3 de agosto de 2012.
  38. ↑ Foley, Mary Jo (2 de agosto de 2012). "¿Es 'Metro' ahora una palabra prohibida en Microsoft?" . ZDNet . CBS Interactive .
  39. ↑ Humphries, Matthew (3 de agosto de 2012). "Microsoft deja de usar el nombre Metro" . Geek.com . Archivado del original el 16 de junio de 2015. Consultado el 13 de junio de 2015 .
  40. ↑ Keizer, Gregg (10 de agosto de 2012). "Microsoft reemplaza 'Metro' con las etiquetas 'Windows 8' y 'Modern'" . Computerworld . Consultado el 30 de enero de 2020 .
  41. 1 2 "Microsoft finalmente aclara sus planes de nombres posteriores a Metro" . ZDNet . CBS Interactive . 12 de septiembre de 2012.
  42. ↑ "Crea excelentes aplicaciones para la Tienda Windows" . MSDN . Microsoft . Consultado el 5 de agosto de 2017 .
  43. ↑ "Estudio de caso de diseño: Aplicación de iPad a Windows Store" . MSDN . Microsoft . Consultado el 28 de mayo de 2013 .
  44. ↑ "Directrices para la tipografía" . MSDN . Microsoft . Consultado el 28 de mayo de 2013 .
  45. ↑ "Hoja de ruta para aplicaciones de la Tienda Windows que utilizan DirectX y C++" . MSDN . Microsoft . Consultado el 28 de mayo de 2013 .
  46. ↑ Tschumy, Will (16 de noviembre de 2012). "El lenguaje de diseño de Microsoft" . Canal 9. Microsoft .
  • Sitio web de Microsoft en cifras
  • Diseño moderno en Microsoft (Archivo)
  • Directrices de UX para aplicaciones de la Tienda Windows en MSDN
  • Directrices de diseño para Windows Phone en MSDN
Lecturas relacionadas
6 articulos
Calculadora de Microsoft Windows NT, versión 3.1Calculadora de WindowsLa Calculadora de Windows es una calculadora de software desarrollada por Microsoft e incluida en Windows . En su versión para Windows 10 , cuenta ...Ventanas 8.1Ventanas 8.1Windows 8.1 es una versión del sistema operativo Windows NT desarrollado por Microsoft . Se lanzó a la fabricación el 27 de agosto de 2013 y se lan...Lenguaje de diseñoUn lenguaje de diseño o vocabulario de diseño es un esquema o estilo general que guía el diseño de un conjunto de productos o entornos arquitectóni...MicrosoftMicrosoftMicrosoft Corporation es una corporación multinacional y empresa de tecnología estadounidense con sede en Redmond, Washington . [2] Sus productos d...Diseño planoEl diseño plano es un lenguaje o estilo de diseño minimalista que se utiliza comúnmente en interfaces gráficas de usuario (GUI) (como aplicaciones ...TipografíaTipografíaLa tipografía es el arte y la técnica de organizar los tipos para que el lenguaje escrito sea legible , legible y atractivo cuando se muestra. La d...