[Metro UI] Metro Design Principles

게시물ID : windowsmobile_333

작성자 : 네로시엔★

추천 : 0

IP : 183.101.***.138

댓글 : 0개

등록시간 : 2012/04/07 18:45:42

http://todayhumor.com/?windowsmobile_333

모바일

[Metro UI] Metro Design Principles

Metro Design Principles
We usually refer to “Metro” as the UI design style Microsoft is using in their platform and the one Microsoft is exposing for developers and designers to create apps for Windows Phone (I’m focusing on Windows Phone in this series). But let’s delve a bit deeper into the term “Metro” and explore what it really means. To begin with, Metro is defined by two things: Metro Design Principles and Metro Design Language.
The Metro Design Principles are the pillars (usually abstract concepts) that guide the creation of experiences for Windows Phone.
The Metro Design Language is a set of concrete user interaction, visual design, motion and application flow elements and rules.
An analogy of the relation between Principles and Language could be an abstract concept like “Love” (… a Principle) which could be expressed by a concrete symbol like ♥ or the combination of four characters “l-o-v-e” which give birth to the written form of the abstract concept “love”. I’m sure you could come up with an infinite number of other concrete ways to express the concept “love” including the sound of the word itself, photos or other metaphors.
The tangible manifestation of a concept is called language.
If we had a Principle like Glass and I need to manifest it with three icons: a pencil (Edit), a star (Favorite) and a cross (Close) and a control like a button these could manifest in a visual language like this. If I give you these, I’m certain you could derive other icons or even controls.
<a target="_blank" href="http://ux.artu.tv/wp-content/uploads/iconsglass.png" title="Glass Icons"><img src="http://ux.artu.tv/wp-content/uploads/iconsglass.png" alt="Glass Icons"></a>
The same icons and button with Metro using a Principle like Fierce Reduction (Light, Clean) would look like this:
<a target="_blank" href="http://ux.artu.tv/wp-content/uploads/iconsmetro1.png" title="Metro Icons"><img src="http://ux.artu.tv/wp-content/uploads/iconsmetro1.png" alt="Metro Icons"></a>
So different Principles give birth to different expressions or Languages.
I found this video sometime ago and I think it explains well <a target="_blank" href="http://youtu.be/E55OcGB0L8o">what Design Principles are (Architecture</a>). In our case Architecture refers to Design Principles and the different cups in the video represent the Design Language.
In the examples above and after watching the video you will realize that you could also define or create different Languages from the same Principles. For example, if I had just given you the Glass Principle, I’m sure everyone would have expressed the icons and button in different ways - all matching the Glass Principle but still different. That is because there’s no single way of manifesting a Principle - their abstract nature means they will be represented or interpreted in different ways by different people (more about this below under Metro Design Language). It will be a matter of design execution to achieve a more (or less) successful interpretation of the Principles.
The Windows Phone Design Principles are:
Light, Clean, Open, Fast (Fierce Reduction) 
Content, not Chrome 
Typography 
Motion 
Authentically Digital
 
Jeff Fong is a Principal UX Lead in the Studio and one of the three designers (along with Jae Park and Bill Flora) in Microsoft that started exploring Metro before it was known as Metro in products like Media Center, Zune and others. If you want an in depth review of all the principles please <a target="_blank" href="http://channel9.msdn.com/Blogs/Jaime+Rodriguez/Windows-Phone-Design-Days-Metro">watch this fantastic session from Jeff</a>. He covers all the Principles in detail.Also, here are some ideas and observations of my own about our different Design Principles - hoping I can share these in a practical way for you guys to use on your daily practice.
<h3>Fierce Reduction</h3>
We usually think this applies only to visuals and to making things look minimalistic but that’s not all of it - in fact, first, when designing an app, apply this Principle to the application flow - then, after that apply it to visuals. We usually work hard on making our UIs nice and clean but we don’t clean up the flow or the process the user has to follow to accomplish tasks in our app. It’s not enough to have a very nice Metro looking UI while at the same time asking users to navigate to screens they shouldn’t need to go to or have them get lost in the app because the application flow is not straightforward.
“Fierce Reduction starts with the application/experience flow - only after that it goes to user interface design.”
<a target="_blank" href="http://ux.artu.tv/wp-content/uploads/fiercereduction2.png" title="Fierce Reduction starts with the Application Flow"><img src="http://ux.artu.tv/wp-content/uploads/fiercereduction2.png" alt="Fierce Reduction starts with the Application Flow"></a>
<h3>Content, not Chrome</h3>
This inherits from Fierce Reduction but it is more focused on the user interface and the visual design - the way things look. The key here is to acknowledge that the star of the show is information (aka content) - both from a consumption and production points of view. We usually showcase Metro in content consumption scenarios but Content, Not Chrome applies also to content generation. People use some apps mainly to consume content, and use other apps mainly to generate content. Content, Not Chrome reminds us that no button, slider, background or layout is more important than the information we are presenting to the user. The content *is* the UI. You will find other design styles where sometimes it would seem the designer wants to be the star of the show, the borders or drop shadows, the adorners, the complex backgrounds - in Metro we believe content (consumption and generation) is king.
” The star of the show is information/content, not UI controls or interface.”
<a target="_blank" href="http://ux.artu.tv/wp-content/uploads/contentnotchrome.png" title="Content, Not Chrome."><img src="http://ux.artu.tv/wp-content/uploads/contentnotchrome.png" alt="Content, Not Chrome."></a>
<h3>Typography</h3>
Typography, typography, typography… when it comes to Metro everything seems to be about typography. Metro is not all about Typography. Typography is no more important than photos or images or icons or motion or sound. Remember the first two principles: Information is the star of the show. If it makes sense to express information with typography do it - otherwise don’t force it.
Typography can be beautiful when incorporated with design skills. For example, in Metro, we use typography in different sizes and different weights to convey structured information (beautiful example below). And this is exactly the thing that makes typography stand out from other media - it’s not typography for the sake of typography but typography as a particularly efficient and flexible tool to convey structured information. It beats icons, photos or other media on this particular area: structured information - structured information is information that has hierarchies, that shows an order, and that helps the user prioritize consumption of information. This is the reason we don’t use “bullet points” in Metro - they are not needed if you give the right size/weight treatment to text.
“Metro is not 100% about Typography. Typography in Metro is just another way to convey information. Typography however, offers unique visual design possibilities to convey *structured information* to the user.”
<a target="_blank" href="http://ux.artu.tv/wp-content/uploads/typography.png" title="Typography for Structured Information"><img src="http://ux.artu.tv/wp-content/uploads/typography.png" alt="Typography for Structured Information"></a>
Beautiful use of typography to convey structured information. 
<h3>Motion</h3>
We’ve talked before how Metro was inspired in printed media design styles. <a target="_blank" href="http://kruzeniski.com/2011/how-print-design-is-the-future-of-interaction/">How Print Design is the Future of Interaction</a> is a terrific post from Mike Kruzeniski, Principal UX Lead in the Studio about this topic. When the world moved from printed information to digital information a lot of things changed. Our medium is not static paper anymore. It is screens made out of dynamic pixels that allow us to convey motion. So the question is how to have Motion contribute to make information the star of the show? First is to acknowledge like in other cases, that Motion is there to serve - to make information stand out. Gratuitous motion effects would represent noise and would distract the user from consuming information. In Windows Phone we use Motion to emphasize application flow and to provide depth to the experience. For example, if we take a use from one app to another we use a Turnstile motion which is a more aggressive effect that helps convey the idea that we are taking the user “to another place”. When we want to simply display new information within the same context we could use something like a Continuum motion. It’s a more gentle, less aggressive/dramatic motion that sells the idea to the user that they will be presented with new information while staying in context.
<a target="_blank" href="http://channel9.msdn.com/Blogs/Jaime+Rodriguez/Windows-Phone-Design-Days-Animation">Watch this session by Jeff Arnold</a>, our Sr. Motion Design Lead in the Studio. He describes Metro motion in depth.
“Motion is there to serve and contribute to making Information the star of the show. Use motion to emphasize (or de-emphasize) your application flow.”
<h3>Authentically Digital</h3>
Jeff Fong describes this principle the best way: “It’s about being honest with the fact that we are designing for a screen, made out of RGBA pixels, and for a screen with a specific dimensions”. For example, imagine we were creating an application to sell books (oh oh here I go :)) so we have to expose the cover of the books to users in a menu. A particular design style like iPhone’s would recreate a metaphor from the physical world (like a bookshelf) to solve this scenario. The bookshelf is gorgeous, well aligned, book covers fit nicely and it even uses wooden texture to make it feel more “real”. This design style Iconographic. It uses metaphors from the physical world in a digital world. In Metro we are Infographic. The Authentically Digital Principle would question the need of a “wooden bookshelf” to hold “images of book covers”. After all, wood is not wood in the digital world - it’s pattern made out of pixels - it’s “fake”. If you take out the “bookshelf” the “books” will not fall down because there’s not force of gravity. So no need for a wooden bookshelf. Instead remove the chrome, the unnecessary, respecting the fact we are talking about pixels.
Let me be clear with something: I’m not saying one style is better or worse. I’m just drawing the difference. It’s simply a different Design Style based on different Design Principles. Nothing wrong with that. I can understand how translating metaphors from the physical world to a digital media has been a hot trend in the last decade - after all, when masses of users went digital in the 2000-2010 and migrated quickly into PCs (Windows and Macs!), tablets, smartphones - the feeling of preserving your “wooden bookshelf” was comforting and familiar. I can totally understand that (and relate in many cases). If you look at Windows XP or even 7 or the good ol’ Windows Mobile 5 or 6.5 - well, Microsoft was also using this Iconographic style - recreating metaphors from the physical world.
In Metro however we believe users care more about being able to consume information than having “representations of physical world objects” inside their phones.
“Design for screens that are made out of pixels, pixels that in turn convey information. Law of gravity doesn’t exist. Sorry Newton… :).”
<a target="_blank" href="http://ux.artu.tv/wp-content/uploads/authenticallydigital.png" title="Authentically Digital"><img src="http://ux.artu.tv/wp-content/uploads/authenticallydigital.png" alt="Authentically Digital"></a>
Examples of iconographic style user interfaces. Recreating objects from the physical world in a digital screen.
 
Windows Phone Metro Design Language
To empower developers to create Windows Phone apps, Microsoft could have just announced/talked about the Metro Design Principles but of course this would have meant developers had to create their own Design Language and spend hours and hours doing so. Creating a Design Language for a modern device like a phone is a big deal and requires of many hours of design, iteration, reviews and user testing. The Windows Phone Design Studio crafted a very solid Language that everyone can use.
Based on the Metro Design Principles, Microsoft provides the Windows Phone Metro Design Language. Using it will set you up for success to craft beautiful, compelling and consistent experiences for Windows Phone. The Windows Phone Design Language is determined by these categories:
Navigation. Layout.Composition Typography 
Motion 
Iconography 
Images & Photos 
Themes & Personalization 
Touch Gestures & Targets 
UI controls 
Hardware 
Services 
Marketplace and Branding
 
Compared to the Principles that are abstract, the Language is concrete. So there is a concrete navigation system in Metro called <a target="_blank" href="http://en.wikipedia.org/wiki/Spoke-hub_distribution_paradigm">Hub & Spoke</a> (more <a target="_blank" href="http://science.howstuffworks.com/transport/flight/modern/airline3.htm">here</a>). There’s a concrete set of gestures like tap, double tap, tap & hold, flick, pan. There’s a concrete typographic style using Segoe in different weights and sizes to convey structured information. There’s a concrete set of UI controls like <a target="_blank" href="http://msdn.microsoft.com/en-us/library/hh202879%28v=VS.92%29.aspx">buttons, radio buttons and checkboxes, sliders</a> and others UI metaphors. There’s concrete application interaction metaphors like Pivot, Panoramas and Pages.
All these set of concrete elements is what makes up the Windows Phone Metro Design Language. It’s a comprehensive, end-to-end, flexible and extensible design language.
<a target="_blank" href="http://ux.artu.tv/wp-content/uploads/panorama.jpg" title="Metro Design Language"><img src="http://ux.artu.tv/wp-content/uploads/panorama.jpg" alt="Metro Design Language"></a>
But, is this out-of-the-box Design Language the only way to manifest the Metro Design Principles? No.
For example, could I use Helvetica or Swiss fonts in my Windows Phone app and still be Metro? Of course! As sans-serif fonts these and other fonts could be used instead of Segoe.
We will talk more about how to take Metro beyond what comes out-of-the-box in a future post but check out this article on <a target="_blank" href="http://www.smashingmagazine.com/2009/07/17/lessons-from-swiss-style-graphic-design/">Lessons from Swiss Style Graphic Design</a> to explore some print design examples that follow the same Design Principles as Metro (other than Motion and Authentically Digital). They look pretty different from the out-of-the-box Windows Phone Metro Design Language (to be clear those are print examples…) but they are based on the same Principles. This could give you an idea of how the same Principles could be expressed in different ways beyond what we provide out-of-the-box.
 
The 3 Sources
The Metro Design Language for Windows Phone is defined via three different sources:
<a target="_blank" href="http://msdn.microsoft.com/en-us/library/hh202915%28v=vs.92%29.aspx">1. The Windows Phone UX Guidelines</a>
<a target="_blank" href="http://create.msdn.com/en-us/home/getting_started">2. The Windows Phone SDK</a> Control Library (and the Silverlight Toolkit for Windows Phone)
<a target="_blank" href="http://www.microsoft.com/windowsphone/en-US/features/default.aspx">3. The out-of-box apps and services in Windows Phone</a> (email, text messages, people hub, music/video hub, phone app)
These three sources should in theory communicate the same. We are aware of some differences between them and we are working on them.
The Windows Phone UX Guidelines are the “Bible” of Windows Phone design. It is reference material and we continue to work on them to keep them updated and to maintain the spirit of them being used as a solid reference source.
The Windows Phone SDK contributes to the definition of the Metro Design Language by exposing a number of UI controls for developers and designers to use in Visual Studio and Expression Blend.
Now, here is one thing I think you will find really valuable. The third way we express the Metro Design Language for Windows Phone is in Windows Phone itself! - the out-of-box apps and services we all use like email, text messages, people hub and local scout. We call these Design Patterns. This is something I don’t think a lot of developers and designers are aware of: you can learn from and use these Design Patterns to craft your own applications. Ideally these patterns should be documented in the Windows Phone UX guidelines (we have this in our to do list :)). I’ve done this myself many times, launch the Phone, go to People hub or email app and see how they are solving search or list sorting or other patterns - then I go to my design (Expression Design, Expression Blend, Photoshop, Illustrator) and reuse those design patterns.

네로시엔의 꼬릿말입니다

출처 : <a href="http://ux.artu.tv/?p=179">http://ux.artu.tv/?p=179<a/> 
위 블로그는 마이크로소프트 윈도우폰 디자인 스튜디오의 디자이너이신 Arturo Toledo께서 쓴 글입니다. 블로그에 들어가면 윈도우폰 개발에 도움이 될 수 있는 더 많은 글을 볼 수 있습니다.

이 게시물을 추천한 분들의 목록입니다.

푸르딩딩:추천수 3이상 댓글은 배경색이 바뀝니다.
(단,비공감수가 추천수의 1/3 초과시 해당없음)

죄송합니다. 댓글 작성은 회원만 가능합니다.

번호

제 목

이름

날짜

조회

분류	게시판
베스트	베스트오브베스트 베스트 오늘의베스트
유머	유머자료 유머글
이야기	자유 고민 연애 결혼생활 좋은글 자랑 공포 멘붕 사이다 꿈 똥 군대 밀리터리 미스터리 술한잔 오늘있잖아요 투표인증 새해
이슈	시사 시사아카이브 사회면 사건사고
생활	패션 패션착샷 아동패션착샷 뷰티 인테리어 DIY 요리 커피&차 육아 법률 동물 책 지식 취업정보 식물 다이어트 의료 영어 맛집 추천사이트 해외직구
취미	사진 사진강좌 카메라 만화 애니메이션 포니 자전거 자동차 여행 바이크 민물낚시 바다낚시 장난감 그림판
학술	경제 역사 예술 과학 철학 심리학
방송연예	연예 음악 음악찾기 악기 음향기기 영화 다큐멘터리 국내드라마 해외드라마 예능 팟케스트
방송프로그램	무한도전 더지니어스 개그콘서트 런닝맨 나가수
디지털	컴퓨터 프로그래머 IT 안티바이러스 애플 안드로이드 스마트폰 윈도우폰 심비안
스포츠	스포츠 축구 야구 농구 바둑
야구팀	삼성 두산 NC 넥센 한화 SK 기아 롯데 LG KT 메이저리그 일본프로야구리그
게임1	플래시게임 게임토론방 엑스박스 플레이스테이션 닌텐도 모바일게임
게임2	던전앤파이터 롤 마비노기 마비노기영웅전 하스스톤 히어로즈오브더스톰 gta5 디아블로 디아블로2 피파온라인2 피파온라인3 워크래프트 월드오브워크래프트 밀리언아서 월드오브탱크 블레이드앤소울 검은사막 스타크래프트 스타크래프트2 베틀필드3 마인크래프트 데이즈 문명 서든어택 테라 아이온 심시티5 프리스타일풋볼 스페셜포스 사이퍼즈 도타2 메이플스토리1 메이플스토리2 오버워치 오버워치그룹모집 포켓몬고 파이널판타지14 배틀그라운드
기타	종교 단어장 자료창고
운영	공지사항 오유운영 게시판신청 보류
임시게시판	메르스 세월호 원전사고 2016리오올림픽 2018평창올림픽 코로나19 2020도쿄올림픽