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


    Glass Icons


    The same icons and button with Metro using a Principle like Fierce Reduction (Light, Clean) would look like this:


    Metro Icons


    So different Principles give birth to different expressions or Languages.


    I found this video sometime ago and I think it explains well what Design Principles are (Architecture). 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 watch this fantastic session from Jeff. 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.


    Fierce Reduction


    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.”


    Fierce Reduction starts with the Application Flow


    Content, not Chrome


    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.”


    Content, Not Chrome.


    Typography


    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.”


    Typography for Structured Information


    Beautiful use of typography to convey structured information.


    Motion


    We’ve talked before how Metro was inspired in printed media design styles. How Print Design is the Future of Interaction 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.


    Watch this session by Jeff Arnold, 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.”


    Authentically Digital


    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… :).”


    Authentically Digital


    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 Hub & Spoke (more here). 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 buttons, radio buttons and checkboxes, sliders 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.


    Metro Design Language


    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 Lessons from Swiss Style Graphic Design 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:


    1. The Windows Phone UX Guidelines


    2. The Windows Phone SDK Control Library (and the Silverlight Toolkit for Windows Phone)


    3. The out-of-box apps and services in Windows Phone (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.

    네로시엔의 꼬릿말입니다

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

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

    번호 제 목 이름 날짜 조회 추천
    337
    윈도우폰 주간 포스트 [2012년 4월 3째주] 네로시엔 12/04/16 22:35 1463 1
    335
    Lumia900 Cyan 구입하였습니다. 안드로이드에서 기변 [6] koolblue 12/04/11 08:53 2116 2
    334
    윈도우폰 주간 포스트 [2012년 4월 2째주] [1] 네로시엔 12/04/10 18:48 1513 1
    [Metro UI] Metro Design Principles 네로시엔 12/04/07 18:45 1845 0
    330
    윈도우폰 주간 포스트 [2012년 4월 1째주] [1] 네로시엔 12/04/02 22:50 1686 1
    329
    윈도우폰 주간 포스트 [2012년 3월 4째주] 네로시엔 12/04/01 16:57 1327 0
    327
    역시 옴니아는 신의폰이다. [2] ㅇㅇΩ 12/03/30 20:24 2482 1
    320
    윈도우폰이랑 안드로이드폰 2개쓰는사람인데요;; [2] 133#l1 12/03/20 03:17 2593 0
    312
    멜론폰임 옴니아는 ㅇㅇㅇΩ 12/03/13 13:08 1757 0
    309
    윈폰 언락좀 도와주세욤 ㅠㅠ.. 프리니 12/03/07 11:40 1731 1
    307
    윈폰용 마이피플 비공식버전을 만들어서 올렸습니다. [3] 벡셀 12/03/04 11:56 2324 6
    305
    아직도 옴니아 쓰는 사람 있음?? [6] 칠렐레팔렐레 12/03/01 02:50 2379 1
    302
    망고가 팔리지 않는 이유는? [4] NeoGenius 12/02/25 23:56 2946 4
    301
    1 퀸공 12/02/25 17:54 1329 0
    300
    300 경제대통령MB 12/02/25 16:52 1411 0
    293
    좋아 여긴 아무도없겠지 [3] 북한소년단 12/02/14 22:02 2415 20
    290
    locked 된 폰을 사서 국내에서 unlock을 하려고하는데 [1] 프리니 12/02/08 10:46 1853 0
    282
    [아이디어]Scrap Tile [1] 네로시엔 12/01/29 21:58 2046 1
    280
    죽은 윈폰게시판을 위한 루미아710 사용기 [5] 왈숙이 12/01/27 23:39 4039 10
    275
    MS와 알카텔 - 루슨트, 9 년 넘는 특허 소송에서 화해 IT소식 12/01/20 11:34 1820 0
    274
    와 진짜 .. 아뭬리카노 12/01/20 10:16 1735 0
    273
    에브리온 티비 안나오돈데 네로시엔 12/01/20 07:11 1678 0
    272
    노비비 노비비 12/01/19 16:08 2732 2
    271
    크하하하하하 크하하Ω 12/01/18 11:31 1455 0
    270
    사 .. 삼성 포커스 S 샀는데 .. 아뭬리카노 12/01/16 07:37 2113 0
    269
    사 .. 삼성 포커스 S 샀는데 .. [7] 아뭬리카노 12/01/15 13:43 3154 1
    268
    반도의 흔한 기자의 오타 .jpg [4] 뉴욕times 12/01/13 21:23 2578 3
    258
    루미아 710 출시된거 같은데 여긴 조용하군요. [1] 연보라 12/01/07 23:49 2222 2
    257
    [정보] 에브리온TV, 앱 윈도우OS 버전 출시합니다. :D [1] 에브리온TV 12/01/04 10:25 2224 0
    256
    시발 평생 공짜로 음악 다운로드 하는 낙으로 산다 [1] 123234324 12/01/04 09:42 2913 4
    [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [다음10개▶]
    단축키 운영진에게 바란다(삭제요청/제안) 운영게 게시판신청 자료창고 보류 개인정보취급방침 청소년보호정책