De Wikipedia, la enciclopedia libre
  (Redirigido desde Modern UI (lenguaje de diseño) )
Saltar a navegación Saltar a búsqueda
La "interfaz de usuario moderna" vuelve a dirigir aquí. Para el sistema de instalación de Nullsoft, consulte Nullsoft Scriptable Install System § Interfaz de usuario moderna .
"Microsoft Metro" vuelve a dirigir aquí. Para el formato de archivo con nombre en código Metro, consulte la Especificación de papel XML abierto .
Ver también: Aero (interfaz de usuario) y Fluent Design System

El hub de música y video en Windows Phone

Microsoft Design Language (o MDL ), [1] anteriormente conocido como Metro , es un lenguaje de diseño creado por Microsoft . Este lenguaje de diseño se centra en la tipografía y los iconos simplificados , la ausencia de desorden, una mayor proporción de contenido a cromo ("contenido antes que cromo") y formas geométricas básicas. Los primeros ejemplos de principios 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 Metrodurante la presentación de Windows Phone 7 . Desde entonces, se ha incorporado a varios de los otros productos de la compañía, incluido el software del sistema Xbox 360 , Xbox One , Windows 8 , Windows Phone y Outlook.com . [4] [5] Antes de que el título "Lenguaje de diseño de Microsoft" se hiciera oficial, el ejecutivo de Microsoft Qi Lu se refirió a él como el lenguaje de diseño de UI 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 marcas registradas. [4]

Microsoft Design Language 2 (MDL2) se desarrolló junto con Windows 10. [7] [8] Más tarde, el lenguaje Fluent Design lo extendió.

Historia [ editar ]

El lenguaje de diseño se basa en los principios de diseño del diseño gráfico clásico suizo . Los primeros destellos de este estilo se pudieron ver en Windows Media Center para Windows XP Media Center Edition , [9] que favorecía el texto como la forma principal de navegación, así como los primeros conceptos de Neptune . [10] Esta interfaz se trasladó a versiones posteriores de Media Center. En 2006, Zune actualizó su interfaz utilizando estos principios. Los diseñadores de Microsoft decidieron rediseñar la interfaz y centrarse más en la tipografía limpia y menos en la interfaz de usuario de Chrome. [11] Estos principios y la nueva interfaz de usuario de Zune se transfirieron a Windows Phone.lanzado por primera vez en 2010 (de lo que se extrajo mucho para Windows 8). El cliente de escritorio Zune también fue rediseñado con un énfasis en la tipografía y el diseño limpio que era diferente de la interfaz de usuario basada en el centro multimedia portátil anterior de Zune . Los "mosaicos en vivo" de colores planos se introdujeron en el lenguaje de diseño durante los primeros estudios de Windows Phones.

En una entrevista se explicó que las diferentes divisiones de Microsoft usan los productos de las demás, y la extensión de Metro no fue un enfoque de toda la empresa, sino que a equipos como Xbox les gusta Metro y lo adaptan para sus propios productos. Muchas de las divisiones de Microsoft terminaron adoptando Metro. [12]

Microsoft Design Language 2 (MDL2) se desarrolló junto con Windows 10. Esta versión introdujo un nuevo conjunto de widgets , incluidos selectores de fecha, conmutadores y conmutadores, y redujo el grosor de los bordes de todos los elementos de la interfaz de usuario. [7] [8]

Principios [ editar ]

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 usa 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 los letreros de lenguaje de diseño que se encuentran comúnmente en los sistemas de transporte público. [13] El lenguaje de diseño pone énfasis en una buena tipografía y tiene un texto grande que llama la atención. Microsoft ve el lenguaje de diseño como "elegante, rápido, moderno" y una "actualización" de las interfaces basadas en iconos de Windows, Android e iOS . [14] Todas las instancias utilizan fuentes basadas en la familia de fuentes Segoe diseñada por Steve Matteson en Agfa Monotype y con licencia de Microsoft. Para el Zune, Microsoft creó una versión personalizada llamada Zegoe UI, [15] y para Windows PhoneMicrosoft creó la familia de fuentes Segoe WP. La mayoría de las fuentes difieren 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, similar a Segoe WP. Los personajes con cambios tipográficos notables incluyeron 1, 2, 4, 5, 7, 8, I y Q.

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

Microsoft diseñó el lenguaje de diseño específicamente para consolidar grupos de tareas comunes para acelerar el uso. Para lograrlo, excluye los gráficos superfluos y, en su lugar, confía en el contenido real para que funcione como la interfaz de usuario principal. Las interfaces resultantes favorecen los concentradores más grandes sobre los botones más pequeños y, a menudo, cuentan con lienzos de desplazamiento lateral. Los títulos de las páginas suelen ser grandes y, en consecuencia, también aprovechan el desplazamiento lateral.

La animación juega un papel importante. Microsoft recomienda un reconocimiento constante de las transiciones y las interacciones del usuario (como presionar o deslizar el dedo) mediante alguna forma de animación o movimiento natural. Esto tiene como objetivo dar al usuario la impresión de una interfaz de usuario "viva" y receptiva con "una sensación de profundidad adicional". [17] [18]

Recepción [ editar ]

En el móvil [ editar ]

La respuesta temprana al idioma fue en general positiva. En una revisión del Zune HD , Engadget dijo, "Microsoft continúa su impulso hacia la tipografía grande, grande aquí, proporcionando un diseño sofisticado, cuidadosamente diseñado que es casi tan funcional como atractivo". [19] CNET elogió el lenguaje de diseño, diciendo, "es un poco más atrevido e informal que las cuadrículas de íconos estrechos y estériles y los menús Rolodex del iPhone y iPod Touch". [20]

En su ceremonia IDEA 2011, la Industrial Designers Society of America (IDSA) otorgó a Windows Phone 7, que utiliza la interfaz de usuario, su premio "Gold Interactive", su "People's Choice Award" y un premio "Best in Show". [21] [22] Isabel Ancona, consultora de experiencia del usuario en IDSA, explicó por qué ganó Windows Phone: [23]

La innovación aquí es la fluidez de la experiencia y el enfoque en los datos, sin utilizar las convenciones tradicionales de la interfaz de usuario de ventanas y marcos. Los datos se convierten en elementos y controles visuales. Los gestos y las transiciones simples guían al usuario más profundamente en el contenido. Una experiencia verdaderamente elegante y única.

Se informó que la IU fue mejor recibida por las mujeres y los usuarios primerizos. [24]

La crítica se centró especialmente en el uso de texto en mayúsculas . Con el aumento del uso de Internet, los críticos han comparado esto con un programa de computadora que le grita a su usuario. El periodista de TI Lee Hutchinson describió el uso de Microsoft de la práctica en la versión macOS de OneNote como terrible, afirmando que está "maldecido con menús de ventanas de aplicaciones insanas y no estándar EN TODAS LAS MAYÚSCULAS que no violan tanto las convenciones de diseño de OS X como los saca detrás del cobertizo, les echa gasolina y les prende fuego ". [25]

En el escritorio de Windows 8 [ editar ]

Con la llegada de Windows 8 , la interfaz de usuario del sistema operativo y su uso del lenguaje de diseño generó respuestas críticas generalmente negativas. El 25 de agosto de 2012, Peter Bright de Ars Technica revisó la versión preliminar de Windows 8, dedicando la primera parte de la revisión a una comparación entre los diseños del menú Inicio utilizados por Windows 8 y Windows 7. Contando sus pros y contras, Peter Bright concluyó que el menú Inicio en Windows 8 (apodado pantalla Inicio), aunque no está exento de problemas, fue un claro ganador. Sin embargo, concluyó que la interfaz de usuario de Windows 8 era frustrante y que los diversos aspectos de la interfaz de usuario no funcionaban bien juntos. [26]Woody Leonhard fue aún más crítico cuando dijo: "Desde el punto de vista del usuario, Windows 8 es un fracaso, una mezcolanza incómoda que empuja al usuario en dos direcciones a la vez". [27]

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

Cambio de nombre [ editar ]

En agosto de 2012, The Verge anunció que se había enviado un memorando interno a los desarrolladores y empleados de Microsoft anunciando la decisión de "descontinuar el uso" del término "Metro" debido a "discusiones con un socio europeo importante", y que estaban "trabajando en un término de reemplazo". [29] Medios de comunicación de tecnología Ars Technica , [30] TechRadar , [31] CNET , [32] Engadget [33] y Network World [34] y la prensa general Bits Blog de The New York Times Company [35] y BBC News En línea [36]publicó que el socio mencionado en el memorando 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ó más tarde que la razón para restar importancia al nombre no estaba relacionada con ningún litigio actual, y que "Metro" era solo un nombre en clave interno del proyecto, [37] a pesar de haber promocionado fuertemente la marca entre el público. [38] En algunos contextos, la empresa comenzó a utilizar el término "Moderno" o el modificador más genérico de "Windows 8" para referirse al nuevo diseño, posiblemente como un marcador de posición. [39]

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

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

Ver también [ editar ]

  • Diseño plano
  • Diseño Skeuomorph
  • Directrices de interfaz humana
  • Windows Aero
  • Aplicaciones de la plataforma universal de Windows

Referencias [ editar ]

  1. ↑ a b c Foley, Mary Jo (29 de octubre de 2012). "Microsoft Design Language: 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 gobierna en Microsoft" . CNET . CBS Interactive .
  3. ^ Massey, Stephane (15 de febrero de 2012). " Principios de diseño de Metro Ui [ sic ]" . stephanemassey.com . Autoeditado . Archivado desde el original el 2 de agosto de 2018 . Consultado el 17 de febrero de 2012 .
  4. ↑ a b Chang, Alexandra (8 de agosto de 2012). "Microsoft no necesita un nombre para su interfaz de usuario" . Cableado . Condé Nast .
  5. ^ Kruzeniski, Mike (11 de abril de 2011). "Cómo el diseño de impresión es el futuro de la interacción" . Kruzeniski.com . Autoeditado .
  6. ^ Lu, Qi (1 de octubre de 2012). "Qi Lu: Keynote de la conferencia IAB MIXX" . Centro de noticias . Microsoft.
  7. ↑ a b Sams, Brad (21 de abril de 2015). "De Metro a Microsoft Design Language 2: una comparación lado a lado" . Neowin .
  8. ↑ a b Rubino, Daniel (21 de abril de 2015). "Novedades de Microsoft Design Language 2 para Windows 10" . Windows Central . Naciones móviles.
  9. ^ Lefevers, Jason (15 de septiembre de 2013). "Un recorrido por la historia de la interfaz de usuario de Metro" . Metro de Windows Phone . Autoeditado . Archivado desde el original el 22 de mayo de 2013 . Consultado el 15 de septiembre de 2013 .
  10. ^ https://www.itprotoday.com/windows-server/supersite-flashback-neptune
  11. ^ "Sistema de diseño de Windows Phone: nombre en clave 'Metro ' " . Archivado desde el original (PDF) el 27 de noviembre de 2014 . Consultado el 9 de octubre de 2010 .
  12. ^ https://www.fastcompany.com/1665814/sometimes-microsoft-designs-great-things-heres-why-it-doesnt-ever-matter
  13. ^ "Lenguaje de diseño de Windows Phone 7" . .box de herramientas . Microsoft . Archivado desde el original el 9 de octubre de 2012 . Consultado el 5 de octubre de 2012 .
  14. ^ Hamburger, Ellis (27 de abril de 2011). "Metro" . Business Insider . Archivado desde el original el 23 de abril de 2013.
  15. ^ Zheng, Long (14 de noviembre de 2007). " " Zegoe ", la nueva fuente Zune" . empecé algo . Autoeditado .
  16. ^ http://allaboutwindowsphone.com/features/item/13479_Building_a_different_kind_of_U.php
  17. ^ Roberts, Chad; Shum, Albert; Smuga, Michael (15 de marzo de 2010). "Interfaz de usuario de Windows Phone y lenguaje de diseño" . MEZCLA 2010 . Microsoft .
  18. ^ Kruzeniski, Mike (17 de febrero de 2011). "Del transporte a los píxeles" . Blog para desarrolladores de Windows Phone . Microsoft . Archivado desde el original el 18 de febrero de 2011.
  19. ^ Topolsky, Joshua (17 de septiembre de 2009). "Revisión de Zune HD" . Engadget . AOL .
  20. ^ "Revisión de Zune HD 64GB" . CNET . CBS Interactive . 17 de septiembre de 2009.
  21. ^ Warren, Tom (18 de septiembre de 2011). "Windows Phone gana IDEA 2011 - premio de diseño elegido por la gente" . WinRumors . Archivado desde el original el 3 de marzo de 2012.
  22. ^ "IDEA 2011 Best in Show" . Sociedad de Diseñadores Industriales de América . idsa.org. 23 de septiembre de 2011. Archivado desde el original el 25 de febrero de 2014.
  23. ^ "Windows Phone 7" . Sociedad de Diseñadores Industriales de América . idsa.org. 8 de junio de 2011.
  24. ^ http://allaboutwindowsphone.com/features/item/13479_Building_a_different_kind_of_U.php
  25. ^ Hutchinson, Lee (12 de julio de 2014). "Las tendencias de diseño de software que nos encanta odiar" . Ars Technica . Condé Nast .
  26. ^ 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.
  27. ^ Leonhard, Woody (15 de agosto de 2012). "Revisión de Windows 8: Sí, es así de malo" . InfoWorld . IDG .
  28. ^ Barney, Doug (17 de agosto de 2012). "Windows 8 está listo, es hora de preocuparse" . Revista Redmond . 1105 Media.
  29. ^ Warren, Tom (2 de agosto de 2013). "Exclusivo: la marca Metro de Microsoft será reemplazada 'esta semana' según un memo interno" . The Verge . Vox Media .
  30. ^ Bright, Peter (3 de agosto de 2012). "Microsoft:" Metro "fuera," IU estilo Windows 8 "en, en medio de rumores de una disputa de marca" . Ars Technica . Condé Nast .
  31. ^ Smith, Chris (3 de agosto de 2012). "Microsoft abandona el nombre de 'Metro' para Windows 8 en medio de temores de marcas registradas" . TechRadar . Consultado el 24 de septiembre de 2013 .
  32. ^ Whitney, Lance (10 de agosto de 2012). "¿Por qué Microsoft eliminó el nombre 'Metro'?" . CNET . CBS Interactive .
  33. ^ Fingas, Jon (2 de agosto de 2012). "Microsoft minimiza el nombre del diseño de Metro, podría enfrentar una demanda por toda esa jerga callejera" . Engadget . AOL .
  34. ^ Patrizio, Andy (6 de agosto de 2012). "La fuente confirma que Microsoft abandonó Metro debido a un error de marca registrada" . Mundo de la red . IDG .
  35. ^ Wingfield, Nick (3 de agosto de 2012). "Microsoft elimina el nombre de Metro para la apariencia del nuevo producto" . Blog de bits . The New York Times Company .
  36. ^ "Microsoft eliminará el nombre de 'Metro' para Windows" . BBC News Online . BBC . 3 de agosto de 2012.
  37. ^ Foley, Mary Jo (2 de agosto de 2012). "¿'Metro' es ahora una palabra prohibida en Microsoft?" . ZDNet . CBS Interactive .
  38. ^ Humphries, Matthew (3 de agosto de 2012). "Microsoft suspende el uso del nombre Metro" . Geek.com .
  39. ^ 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 .
  40. ^ a b "Microsoft finalmente se aclara (más) en los planes de nomenclatura posteriores a Metro" . ZDNet . CBS Interactive . 12 de septiembre de 2012.
  41. ^ "Crea excelentes aplicaciones de la Tienda Windows" . MSDN . Microsoft . Consultado el 5 de agosto de 2017 .
  42. ^ "Estudio de caso de diseño: iPad a la aplicación de la Tienda Windows" . MSDN . Microsoft . Consultado el 28 de mayo de 2013 .
  43. ^ "Pautas para la tipografía" . MSDN . Microsoft . Consultado el 28 de mayo de 2013 .
  44. ^ "Hoja de ruta para las aplicaciones de la Tienda Windows que utilizan DirectX y C ++" . MSDN . Microsoft . Consultado el 28 de mayo de 2013 .
  45. ^ Tschumy, Will (16 de noviembre de 2012). "El lenguaje de diseño de Microsoft" . Canal 9 . Microsoft .

Enlaces externos [ editar ]

  • Sitio web de Microsoft by the Numbers
  • 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