Jump to content

Metro (design language): Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
Informing our readers
Codename Lisa (talk | contribs)
55,077 edits
Line 91: Line 91:
In September 2012, "Microsoft design language" was adopted as the official name for the design style.<ref name=zdnetofficial>{{cite web | url=http://www.zdnet.com/microsoft-design-language-the-newest-official-way-to-refer-to-metro-7000006526/ | title=Microsoft Design Language: The newest official way to refer to 'Metro' | publisher=[[CBS Interactive]] | work=[[ZDNet]] | accessdate=28 May 2013 | first=Mary Jo | last=Foley}}</ref><ref name=zdnet-metroname>{{cite web|title=Microsoft finally comes clean(er) on post-Metro naming plans|url=http://www.zdnet.com/microsoft-finally-comes-cleaner-on-post-metro-naming-plans-7000004151/|work=[[ZDNet]]|publisher=[[CBS Interactive]]|accessdate= 28 May 2013|date=12 September 2012}}</ref> The term was used on [[Microsoft Developer Network]] (MSDN) documentation<ref>{{cite web | url=http://msdn.microsoft.com/library/windows/apps/hh464920.aspx | title=Make great Windows Store apps | publisher=[[Microsoft]] | work=[[MSDN]] | accessdate=28 May 2013}}</ref><ref>{{cite web | url=http://msdn.microsoft.com/en-us/library/windows/apps/hh868262.aspx | title=Design case study: iPad to Windows Store app | publisher=[[Microsoft]] | work=[[MSDN]] | accessdate=28 May 2013}}</ref><ref>{{cite web | url=http://msdn.microsoft.com/en-us/library/windows/apps/jj553415.aspx | title=Guidelines for typography | publisher=[[Microsoft]] | work=[[MSDN]] | accessdate=28 May 2013}}</ref><ref>{{cite web | url=http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj126138.aspx | title=Roadmap for Windows Store apps using DirectX and C++ | publisher=[[Microsoft]] | work=[[MSDN]] | accessdate=28 May 2013}}</ref> and at the 2012 [[Build (developer conference)|Build]] conference to refer to the design language.<ref name="zdnetofficial" /><ref>{{cite web | url=http://channel9.msdn.com/Events/Build/2012/2-116 | title=The Microsoft design language | publisher=[[Microsoft]] | work=[[Channel 9 (Microsoft)|Channel 9]] | accessdate=28 May 2013}}</ref>
In September 2012, "Microsoft design language" was adopted as the official name for the design style.<ref name=zdnetofficial>{{cite web | url=http://www.zdnet.com/microsoft-design-language-the-newest-official-way-to-refer-to-metro-7000006526/ | title=Microsoft Design Language: The newest official way to refer to 'Metro' | publisher=[[CBS Interactive]] | work=[[ZDNet]] | accessdate=28 May 2013 | first=Mary Jo | last=Foley}}</ref><ref name=zdnet-metroname>{{cite web|title=Microsoft finally comes clean(er) on post-Metro naming plans|url=http://www.zdnet.com/microsoft-finally-comes-cleaner-on-post-metro-naming-plans-7000004151/|work=[[ZDNet]]|publisher=[[CBS Interactive]]|accessdate= 28 May 2013|date=12 September 2012}}</ref> The term was used on [[Microsoft Developer Network]] (MSDN) documentation<ref>{{cite web | url=http://msdn.microsoft.com/library/windows/apps/hh464920.aspx | title=Make great Windows Store apps | publisher=[[Microsoft]] | work=[[MSDN]] | accessdate=28 May 2013}}</ref><ref>{{cite web | url=http://msdn.microsoft.com/en-us/library/windows/apps/hh868262.aspx | title=Design case study: iPad to Windows Store app | publisher=[[Microsoft]] | work=[[MSDN]] | accessdate=28 May 2013}}</ref><ref>{{cite web | url=http://msdn.microsoft.com/en-us/library/windows/apps/jj553415.aspx | title=Guidelines for typography | publisher=[[Microsoft]] | work=[[MSDN]] | accessdate=28 May 2013}}</ref><ref>{{cite web | url=http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj126138.aspx | title=Roadmap for Windows Store apps using DirectX and C++ | publisher=[[Microsoft]] | work=[[MSDN]] | accessdate=28 May 2013}}</ref> and at the 2012 [[Build (developer conference)|Build]] conference to refer to the design language.<ref name="zdnetofficial" /><ref>{{cite web | url=http://channel9.msdn.com/Events/Build/2012/2-116 | title=The Microsoft design language | publisher=[[Microsoft]] | work=[[Channel 9 (Microsoft)|Channel 9]] | accessdate=28 May 2013}}</ref>


In a related change, Microsoft dropped use of the phrase "Metro-style apps" to refer to [[Windows Runtime]]-based applications developed according to the design language; Microsoft temporarily used "Modern apps" before starting to use "[[Windows Store]] apps" and "Windows 8 apps".<ref name="zdnet-metroname" /> In March 2015, Microsoft rebranded applications created with the Windows Runtime as "[[Windows apps]]".<ref>{{Cite web|url = http://www.i-programmer.info/news/177-windows-8/8424-microsoft-finally-decides-what-to-call-metro-apps.html|title = Microsoft Finally Decides What To Call Metro Apps|date = 25 March 2015|accessdate = |website = i-programmer|publisher = |last = |first = }}</ref><ref>{{Cite web|url = http://arstechnica.com/information-technology/2015/03/dont-call-them-metro-microsoft-rebrands-universal-apps-as-windows-apps/|title = Don’t call them Metro: Microsoft rebrands Universal apps as “Windows apps”|date = Mar 26, 2015|accessdate = |website = Ars Technica|publisher = |last = |first = }}</ref>
In a related change, Microsoft dropped use of the phrase "Metro-style apps" to refer to [[Windows Runtime]]-based applications developed according to the design language; Microsoft temporarily used "Modern apps" before starting to use "[[Windows Store]] apps" and "Windows 8 apps".<ref name="zdnet-metroname" /> The name changes in this area continue through 2015, with new names such as "Universal apps" and "Windows apps" once used in contrast with "Windows desktop applications", which were also to take advantage of Windows Runtime.<ref>{{Cite web|url = http://www.i-programmer.info/news/177-windows-8/8424-microsoft-finally-decides-what-to-call-metro-apps.html|title = Microsoft Finally Decides What To Call Metro Apps|date = 25 March 2015|accessdate = |website = i-programmer|publisher = |last = |first = }}</ref><ref>{{Cite web|url = http://arstechnica.com/information-technology/2015/03/dont-call-them-metro-microsoft-rebrands-universal-apps-as-windows-apps/|title = Don’t call them Metro: Microsoft rebrands Universal apps as “Windows apps”|date = Mar 26, 2015|accessdate = |website = Ars Technica|publisher = |last = |first = }}</ref>


==See also==
==See also==

Revision as of 18:40, 28 March 2015

"Modern UI" redirects here. For Nullsoft's installation system, see Nullsoft Scriptable Install System § Modern user interface.

The Music+Video hub on Windows Phone
File:Outlook.com inbox and message view.png
Outlook.com features a web implementation of Microsoft's design language

Metro is a typography-based design language by Microsoft, primarily for user interfaces.[1] A key design principle is better focus on the content of applications, relying more on typography and less on graphics ("content before chrome"). Early examples of Metro principles can be found in Encarta 95 and MSN 2.0.[2][3] The design language evolved in Windows Media Center and Zune and was formally introduced as "Metro" during the unveiling of Windows Phone 7. It has since been incorporated into several of the company's other products, including the Xbox 360 system software, Xbox One, Windows 8, Windows Phone, and Outlook.com[4][5] under the names Microsoft design language and Modern UI[6][7][8] after Microsoft discontinued the name "Metro" allegedly because it was a codename that (like many others) was never intended for permanent use, although rumors mention trademark issues.[4]

Since march 2015, applications running on Microsoft's universal runtime platform are called "Windows apps".[9][10]

History

The design language is based on the design principles of classic Swiss graphic design. Early glimpses of this style could be seen in Windows Media Center for Windows XP Media Center Edition,[11] which favored text as the primary form of navigation. This interface carried over into later iterations of Media Center. In 2006, Zune refreshed its interface using these principles. Microsoft designers decided to redesign the interface and with more focus on clean typography and less on UI chrome.[12] These principles and the new Zune UI were carried over to Windows Phone (from which much was drawn for Windows 8). The Zune Desktop Client was also redesigned with an emphasis on typography and clean design that was different from the Zune's previous Portable Media Center based UI. Flat colored "live tiles" were introduced into the design language during the early Windows Phone's studies.

Principles

Segoe UI font in Windows 7 (top) and Windows 8 (bottom)
Metro design principle behind the Start screen in Windows 8 and Xbox One that is also used in Windows Store, Xbox Music and Xbox Video: Tiles represent atomic units of information

Microsoft's design team cites as an inspiration for the design language signs commonly found at public transport systems.[13] The design language places emphasis on good typography and has large text that catches the eye. Microsoft sees the design language as "sleek, quick, modern" and a "refresh" from the icon-based interfaces of Windows, Android, and iOS.[14] All instances use fonts based on the Segoe font-family designed by Steve Matteson at Agfa Monotype and licensed to Microsoft. For the Zune, Microsoft created a custom version called Zegoe UI,[15] and for Windows Phone Microsoft created the "Segoe WP" font-family. The fonts mostly differ only in minor details. More obvious differences between Segoe UI and Segoe WP are apparent in their respective numerical characters. The Segoe UI in Windows 8 had obvious differences – similar to Segoe WP. Characters with notable typographic changes included 1, 2, 4, 5, 7, 8, I, and Q.

Microsoft designed the design language specifically to consolidate groups of common tasks to speed up usage. It achieves this by excluding superfluous graphics and instead relying on the actual content to function as the main UI. The resulting interfaces favour larger hubs over smaller buttons and often feature laterally scrolling canvases. Page titles are usually large and consequently also take advantage of lateral scrolling.

Animation plays a large part. Microsoft recommends consistent acknowledgement of transitions, and user interactions (such as presses or swipes) by some form of natural animation or motion. This aims to give the user the impression of an "alive" and responsive UI with "an added sense of depth."[16][17]

Reception

Before Windows 8

Early response to the language was generally positive. In a review of the Zune HD, Engadget said, "Microsoft continues its push towards big, big typography here, providing a sophisticated, neatly designed layout that's almost as functional as it is attractive."[18] CNET complimented the design language, saying, "it's a bit more daring and informal than the tight, sterile icon grids and Rolodex menus of the iPhone and iPod Touch."[19]

At its IDEA 2011 Ceremony, the Industrial Designers Society of America (IDSA) gave Windows Phone 7, which uses the UI, its "Gold Interactive" award, its "People's Choice Award", and a "Best in Show" award.[20][21] Isabel Ancona, the User Experience Consultant at IDSA, explained why Windows Phone won:[22]

The innovation here is the fluidity of experience and focus on the data, without using traditional user interface conventions of windows and frames. Data becomes the visual elements and controls. Simple gestures and transitions guide the user deeper into content. A truly elegant and unique experience.

After Windows 8

With the arrival of Windows 8, the operating system's user interface and its use of the design language drew generally negative critical responses. On 25 August 2012, Peter Bright of Ars Technica reviewed the preview release of Windows 8, dedicating the first part of the review to a comparison between the Start menu designs used by Windows 8 and Windows 7. Recounting their pros and cons, Peter Bright concluded that the Start menu in Windows 8 (dubbed Start screen), though not devoid of problems, was a clear winner. However, he concluded that Windows 8's user interface was frustrating and that the various aspects of the user interface did not work well together.[23] Woody Leonhard was even more critical when he said, "From the user's standpoint, Windows 8 is a failure – an awkward mishmash that pulls the user in two directions at once."[24]

In addition to the changes to the Start menu, Windows 8 takes a more modal approach with its use of full-screen apps that steer away from reliance on the icon-based desktop interface. In doing so, however, Microsoft has shifted its focus away from multitasking and business productivity.[25]

Name change

In August 2012, The Verge announced that an internal memorandum had been sent out to developers and Microsoft employees announcing the decision to "discontinue the use" of the term "Metro" because of "discussions with an important European partner", and that they were "working on a replacement term".[26] Technological news outlets Ars Technica,[27] TechRadar,[28] CNET,[29] Engadget[30] and IDG's Network World[31] and mainstream press The New York Times[32] and the BBC[33] published that the partner mentioned in the memo could be one of Microsoft's retail partners, German company Metro AG, as the name had the potential to infringe on their "Metro" trademark. Microsoft later stated that the reason for de-emphasizing the name was not related to any current litigation, and that "Metro" was an internal project codename.[34]

Alexandra Chang of Wired suggested that Microsoft should drop use of a separate name altogether and use "Windows 8" as descriptor.[4]

In September 2012, "Microsoft design language" was adopted as the official name for the design style.[1][35] The term was used on Microsoft Developer Network (MSDN) documentation[36][37][38][39] and at the 2012 Build conference to refer to the design language.[1][40]

In a related change, Microsoft dropped use of the phrase "Metro-style apps" to refer to Windows Runtime-based applications developed according to the design language; Microsoft temporarily used "Modern apps" before starting to use "Windows Store apps" and "Windows 8 apps".[35] The name changes in this area continue through 2015, with new names such as "Universal apps" and "Windows apps" once used in contrast with "Windows desktop applications", which were also to take advantage of Windows Runtime.[41][42]

See also

References

  1. ^ a b c Foley, Mary Jo. "Microsoft Design Language: The newest official way to refer to 'Metro'". ZDNet. CBS Interactive. Retrieved 28 May 2013.
  2. ^ Green, Jay (8 February 2012). "Why Metro now rules at Microsoft". CNET. CBS Interactive. Retrieved 15 September 2013.
  3. ^ Massey, Stephane (15 February 2012). "Metro Ui Design Principles". stephanemassey.com. Self-published. Retrieved 15 September 2013.
  4. ^ a b c Chang, Alexandra (8 August 2012). "Microsoft Doesn't Need a Name for Its User Interface". Wired. Condé Nast. Retrieved 28 May 2013.
  5. ^ Kruzeniski, Mike (11 April 2011). "How Print Design is the Future of Interaction". Kruzeniski.com. Self-published. Retrieved 15 September 2013.
  6. ^ Tom Warren (10 August 2012). "Microsoft now using 'Modern UI Style' to refer to Windows 8 'Metro Style' apps". The Verge.
  7. ^ Qi Lu (1 October 2012). "Qi Lu: IAB MIXX Conference Keynote". Microsoft News Center. Microsoft. Retrieved 30 December 2014.
  8. ^
  9. ^ "Microsoft Finally Decides What To Call Metro Apps". i-programmer. 25 March 2015.
  10. ^ "Don't call them Metro: Microsoft rebrands Universal apps as "Windows apps"". Ars Technica. 26 March 2015.
  11. ^ Lefevers, Jason (15 September 2013). "A Walkthrough the History of the Metro UI". Windows Phone Metro. Self-published. Archived from the original on 28 April 2013. Retrieved 11 July 2011.
  12. ^ "Windows Phone Design System: Codenamed 'Metro'" (PDF). Retrieved 9 October 2010.[dead link‍] [dead link‍]
  13. ^ "Design Language of Windows Phone 7". .toolbox. Microsoft. Archived from the original on 7 September 2012. Retrieved 5 October 2012.
  14. ^ Hamburger, Ellis (27 April 2011). "Metro". Blackboard. Business Insider. Retrieved 3 November 2011.
  15. ^ Zheng, Long (14 November 2007). ""Zegoe", the new Zune font". i started something. Self-published. Retrieved 15 September 2013.
  16. ^ Roberts, Chad; Shum, Albert; Smuga, Michael (15 March 2010). "Windows Phone UI and Design Language". MIX 2010. Microsoft. Retrieved 15 September 2013.
  17. ^ Kruzeniski, Mike (17 February 2011). "From Transportation to Pixels". Windows Phone Developer Blog. Microsoft.
  18. ^ Topolsky, Joshua (17 September 2009). "Zune HD review". Engadget. AOL. Retrieved 19 February 2013.
  19. ^ "Zune HD 64GB Review". CNET. CBS Interactive. 17 September 2009. Retrieved 19 February 2013.
  20. ^ Warren, Tom (18 September 2011). "Windows Phone wins IDEA 2011 – people's choice design award". WinRumors. Retrieved 19 February 2013.
  21. ^ "IDEA 2011 Best in Show". Industrial Designers Society of America. idsa.org. 23 September 2011. Retrieved 15 February 2014.
  22. ^ "Windows Phone 7". Industrial Designers Society of America. idsa.org. 8 June 2011. Retrieved 15 September 2013.
  23. ^ Bright, Peter (25 April 2012). "Windows 8 on the desktop—an awkward hybrid". Ars Technica. Condé Nast Digital. pp. 1–5. Retrieved 19 February 2013.
  24. ^ Leonhard, Woody (15 August 2012). "Windows 8 review: Yes, it's that bad". Infoworld. Retrieved 12 November 2013.
  25. ^ "Windows 8's done, time to worry". Redmondmag. 17 August 2012. Retrieved 8 October 2012.
  26. ^ Warren, Tom (2 August 2013). "Exclusive: Microsoft's Metro branding to be replaced 'this week' according to internal memo". The Verge. Vox Media. Retrieved 29 May 2013.
  27. ^ "Microsoft: "Metro" out, "Windows 8-style UI" in, amid rumors of a trademark dispute". Ars Technica. Retrieved 24 September 2013.
  28. ^ "Microsoft ditching 'Metro' name for Windows 8 amid trademark fears". TechRadar. Retrieved 24 September 2013.
  29. ^ "Why did Microsoft kill the name 'Metro'?". CNET News. Retrieved 24 September 2013.
  30. ^ "Microsoft downplays Metro design name, might face a lawsuit over all that street lingo". Engadget. Retrieved 24 September 2013.
  31. ^ "Source confirms Microsoft abandoned Metro due to trademark gaffe". IDG. Retrieved 24 September 2013.
  32. ^ Microsoft Drops Metro Name for New Product Look, retrieved 24 September 2013
  33. ^ "Microsoft to drop 'Metro' name for Windows". BBC. 3 August 2012. Retrieved 28 May 2012.
  34. ^ Mary Jo Foley. "Is 'Metro' now a banned word at Microsoft?". ZDNET. Retrieved 24 September 2013.
  35. ^ a b "Microsoft finally comes clean(er) on post-Metro naming plans". ZDNet. CBS Interactive. 12 September 2012. Retrieved 28 May 2013.
  36. ^ "Make great Windows Store apps". MSDN. Microsoft. Retrieved 28 May 2013.
  37. ^ "Design case study: iPad to Windows Store app". MSDN. Microsoft. Retrieved 28 May 2013.
  38. ^ "Guidelines for typography". MSDN. Microsoft. Retrieved 28 May 2013.
  39. ^ "Roadmap for Windows Store apps using DirectX and C++". MSDN. Microsoft. Retrieved 28 May 2013.
  40. ^ "The Microsoft design language". Channel 9. Microsoft. Retrieved 28 May 2013.
  41. ^ "Microsoft Finally Decides What To Call Metro Apps". i-programmer. 25 March 2015.
  42. ^ "Don't call them Metro: Microsoft rebrands Universal apps as "Windows apps"". Ars Technica. 26 March 2015.
Retrieved from "https://en.wikipedia.org/enwiki/w/index.php?title=Metro_(design_language)&oldid=653924393"