From Wikipedia, the free encyclopedia
Jump to: navigation, searchMetro Design Language
Metro design language as used in the "Music + Videos" hub in Windows Phone 7.Developer(s) Microsoft Operating system Windows Embedded CE 7.0 License Proprietary EULA with open source components Metro is an internal code name for a typography-based design language created by Microsoft. It was created for use in their mobile operating system Windows Phone 7.[1] A specially made version of Microsoft's Segoe font family, Segoe WP, is used as the main font family for all typographical elements.[1] It was confirmed by Microsoft at Computex that Windows 8, the next version of Windows, will take inspiration from Metro.[2] Microsoft also plans to add Metro stylings to other products, like the Xbox 360, in order to create a unified and distinctive look across its consumer products.[3]
Contents
[hide][edit] History
"Metro" 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[citation needed], 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 Metro principles. Microsoft designers decided to redesign the interface and with more focus on clean typography and less on UI chrome.[4] 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 Metro design language during the early Windows Phone 7's studies.[citation needed] Microsoft has begun integrating these elements of the Metro design language into its other products, with direct influence being seen in newer versions of Windows Live Messenger and Live Mesh.[1]
[edit] Development
A King County Metro Airport and metro signage also inspired this design language for its readability and cleanliness.Microsoft's design team says that the Metro UI is based on signs on the Metro public transit system[4] in the London Underground. Metro places a large focus on typography and features large text that catches the eye and runs off the page. Microsoft says that Metro is designed to be "sleek, quick, modern" and a "refresh" from the icon-based interfaces of Android and iOS[citation needed].
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, and for Windows Phone 7, they created the "Segoe WP" font family; apart from minor differences the fonts are largely the same.
[edit] Response
Response to Metro has been generally positive. 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." CNET complimented the Metro design, saying "it's a bit more daring and informal than the tight, sterile icon grids and Rolodex menus of the iPhone and iPod Touch."[citation needed]
[edit] Principles
This section is written like an advertisement. Please help rewrite this section from a neutral point of view. (April 2011) The Metro design language was designed specifically to consolidate groups of common tasks to speed up usage. This is accomplished by excluding superfluous graphics and instead relying the actual content to also function as the main UI. The resulting interfaces favour larger hubs over smaller buttons and often feature laterally scrolling full bleed canvases. Page titles are usually large and consequently also take advantage of lateral scrolling.
Animation plays a large part, with transitions, and user interactions such as presses or swipes recommended to always be acknowledged by some form of natural animation or motion. This is intended to give the user the impression that the UI is "alive" and responsive, with an added sense of depth[5][6]
Internally, Microsoft defines the following principles as core to the Metro Design Language:
[edit] Clean, Light, Open, Fast
- Feels Fast and Responsive
- Focus on Primary Tasks
- Do a Lot with Very Little
- Fierce Reduction of Unnecessary Elements
- Delightful Use of Whitespace
- Full Bleed Canvas
[edit] Celebrate Typography
- Type is Beautiful, Not Just Legible
- Clear, Straightforward Information Design
- Uncompromising Sensitivity to Weight, Balance and Scale
[edit] Alive in Motion
- Feels Responsive and Alive
- Creates a System
- Gives Context to Improve Usability
- Transition Between UI is as Important as the Design of the UI
- Adds Dimension and Depth
[edit] Content, Not Chrome
- Delight through Content Instead of Decoration
- Reduce Visuals that are Not Content
- Content is the UI
- Direct interaction with the Content
[edit] Authentically Digital
- Design for the Form Factor
- Don’t Try to be What It’s NOT
- Be Direct
[edit] References
- ^ a b c "Windows Phone 7 Series UI Design & Interaction Guide". March 18, 2010. http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspx. Retrieved 2010-10-09.
- ^ "Video: Windows 8 Uses WP7 Design, Runs from USB Stick". Published Friday 15 April 2011. Retrieved Friday 15 April 2011.
- ^ http://blog.seattlepi.com/microsoft/2011/06/06/e3-xbox-360-getting-tv-tuner-bing-search-metro-interface
- ^ a b "Windows Phone Design System: Codenamed ‘Metro’" (PDF). http://go.microsoft.com/fwlink/?LinkID=189338. Retrieved 2010-10-09.
- ^ "Windows Phone UI and Design Language". http://live.visitmix.com/MIX10/Sessions/CL14. Retrieved 2010-10-09.
- ^ From Transportation to Pixels, Windows team blog, 2011-2-16, http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/02/16/from-transportation-to-pixels.aspx.
[edit] External links
Wikimedia Commons has media related to: Zune
[show]v · d · eMicrosoft Retrieved from "http://en.wikipedia.org/wiki/Metro_(design_language)"View page ratingsRate this page
Trustworthy
Objective
Complete
Well-written
Submit ratingsWe will send you a confirmation e-mail. We will not share your address with anyone. (Privacy policy)
Saved successfullyYour ratings have not been submitted yet
Your ratings have expiredPlease reevaluate this page and submit new ratings.An error has occured. Please try again later.Thanks! Your ratings have been saved.Please take a moment to complete a short survey.Start survey Maybe later
Thanks! Your ratings have been saved.Did you want to create an account?An account will help you track your edits, get involved in discussions, and be a part of the community.Create an accountorLog in Maybe laterThanks! Your ratings have been saved.Did you know that you can edit this page?Edit this page Maybe later
Hidden categories: All articles with unsourced statements | Articles with unsourced statements from October 2010 | Articles with unsourced statements from February 2009 | Articles with unsourced statements from August 2010 | Articles with unsourced statements from December 2010 | All articles with a promotional tone
Saturday 16 July 2011
Metro (design language) - Wikipedia, the free encyclopedia
$62.484 billion via en.wikipedia.org
Flickr - projectbrainsaver
www.flickr.com
|
