Windows8 Modern UI Style Summary
Download as PPTX, PDF3 likes1,307 views
It's a simple guide to windows8 modernUI style.(Korean)
Windows8 Modern UI Style Summary
- 2. Metro style app user experience wireframe Windows8의 가장 큰 변화 Windows8 App Store Windows8 Modern UI Style App
- 3. Metro style app user experience wireframe Modern UI 로 제작된 어플리케이션을 위한 스토어
- 4. Metro style app user experience wireframe Windows8 Device Coverage X86, X64 ARM Windows Pro Windows RT
- 5. Metro style app user experience wireframe Metaphor UI Modern UI - 실물의 모습을 비유하여 디자인 - 원래의 구조, 장식적 요소 를 그대로 유지하여 디자 인 - Authentically digital (진정한 혹은 정통 디 지털)" 경험 - 인위적 반사광, 장식요소를 배제한 Flat 디자인 - 컨텐츠와 정보에 집중하는 디자인
- 6. Anatomy of a Modern UI App Style
- 7. Modern UI Style Tiles Summary Grid Panorama UX Typography No, Chrome
- 8. Modern UI Style Navigation Hub>Section>Detail Hierarchy Hub Section Detail
- 9. Navigation Modern UI Style - 컨텐츠를 클릭하여 Hub>Section>Detail 페이지로 이동 - 2번, 3번 Section, Detail 페이지의 타이틀 좌측 화살표를 통 Navigation 해 이전 페이지로 이동 Flat - 메뉴 이동은 상단의 Navi Bar 를 이용 1 2 3 Hub Section Detail
- 10. 1 Modern UI Style Navigation Flat Structure - 동일 Depth 의 페이지 이동 : 메뉴 또는 탭 1 UX : Navi bar 출력 - Touch : 상단 아래로 밀기 - Mouse : 우클릭
- 11. Navigation Modern UI Style - Header Toggle Menu 를 이용해서 Navi 처리 - 메뉴를 노출해서 Navi 처리 가능 : 권장사항은 아님 Navigation Flat Toggle Menu 의 형태 1 Toggle Menu 의 형태 2 Menu 노출 형태 - Navi Bar 또는 Toggle Menu 에 대한 네비게이션 혼돈을 우려한 형태 - 단, Windows8 권장사항은 아님 -App 이름에서 카테고리 메뉴를 노출할 수 있다. - 카테고리에서 기능 메뉴를 노출할 수 있다 : Sorting, 크기조절, 정렬 등
- 12. 1. App 을 실행시키는 Tile Tiles&Layout 2. Contents 를 표현하는 Tile Tile 2. Contents 를 표현하는 Tile 은 Size 의 제약이 없습니다. 단, 각 Tile 의 Grid 시스템을 준수하도록 권장하고 있습니다. 1. App 을 실행시키는Tile 150x150 310x150 -App Store 등록 시 5가지 Size 의 Tile 필요
- 13. 30x30 - Zoom out Tiles&Layout - Inside 라이브타일 50x50 Tiles - 앱스토어 - 참바 - 앱모두 보기 150x150 - 시작화면 620x300 - 정보 업데이트 가능 310x150 - 시작화면 - 정보 업데이트 가능 - 앱 실행시 로딩
- 14. 120pix 140pix Tiles&Layout Grid Layout 50pix 1. Contents 의 Level에 따라 Tile 의 Size 결정 2. Grid 시스템에 따라 Tile Size 결정 10pix 40pix 80pix 10pix ex) - 50pix>100pix>150pix (O) - 20pix>40pix>60pix>100pix (O) - 20pix>55pix>80pix>120pix (X)
- 15. 1 2 Tiles&Layout Hub Grid Layout 4 3 X 4 O 1. Header : App 이름 Section 2. Hub 페이지 카테고리, 컨텐츠 타이틀 3. Hub 페이지에서 이동한 5 Section 페이지의 타이틀 4. Section 페이지에서 Back 은 Hub 페이지로 이동 5. Detail 페이지의 타이틀 Detail
- 16. 1. 영문 Font(SegoeUI) : 12>14>26>56 Typography
- 17. 1. 국문 Font(맑은고딕) : 12>14>26>56 2. 국문 Font(맑은고딕) : 11>12>14>22>42 Typography
- 18. 1. Panorama Full View View&Control 2. Snap View 3. Fill View View Windows8 Modern UI App 의 기본 View : Panorama
- 19. 1. Panorama Full View View&Control 2. Snap View 3. Fill View View Windows8 은 2개의 App 을 동시에 띄울 수 있습니다. 이때 활용하는 Snap View Full view Snap view Snap view Contents - Left Position - Full View 의 컨텐츠를 순 - 320pix 서대로 배치
- 20. 1. Flyout view 의 활용 View&Control Flyout view : Control Flyout view : Log-in View Full view Flyout view - Right position - Content, Control 화면으 로 활용 - 로그인, 결제, 약관 등 - 320pix, size 조절 가능
- 21. 1. Semantic zoom View&Control - Zoom in, zoom out 을 통해 컨텐츠를 카테고리화 시키는 UX View - 많은 컨텐츠를 요약하는 효과 - Touch : Pinch and Stretch - Key Board : Ctrl key+Mouse Zoom in Zoom out wheel down
- 22. 1. App Bar Control View&Control 2. Charm Bar Control 3. App Control Control - App 의 모든 Control 기능을 추 가 할 수 있음 - Touch : 끌어올리기 - Key board : Mouse right click
- 23. 1. App Bar Control View&Control 2. Charm Bar Control : 검색, 공유, 장치, 설정 3. App Control Control Charm Bar : 검색 Charm Bar
- 24. 1. App Bar Control View&Control 2. Charm Bar Control : 검색, 공유, 장치, 설정 3. App Control Control Charm Bar : 공유
- 25. Metro style app user experience wireframe Building your Windows8 Store App
- 26. Planning the Windows8 Store App Content before Chrome 컨텐츠에 집중, 불필요한 요소, 기능 제거 Panorama & Snap view beautifully 1366 해상도 기준이 파노라마 view 로 컨텐츠 설계, Snap view 고려 Branding Tiles & Grid Tile 과 Grid 를 사용하여 Modern 하게 디자인, App 의 브랜딩요소 가미 Use the right contracts & Semantic zoom 검색, 공유, Toast Noti, App Bar, Navi Bar 의 활용
- 27. Secondary tile Primary tile Live tile Live tile - Secondary tile : 150x150 - Primary tile : 310x150 - Live tile : 310x150 : 정보 갱신 가능
- 28. Splash Screen Splash Screen - Splash Screen : 620x300 : 앱 실행 후 로딩 화면, App 의 브랜딩
- 29. No, Chrome : Web>Windows8 app 1. 메뉴 네비게이션제거 2. 명령 기능 제거 3. 검색, 공유, 설정 제거 4. 컨텐츠 터치 고려 6. 알림, 가입 제거
- 30. Your App Bland Core Value Content Hub Contents and Data Type
- 31. Your App Bland Core Value Content Section Contents and Data Type
- 32. Your App Bland Core Value Content Section Contents and Data Type Contents and Data Type 의 성격에 따라 다양한 Section 페이지를 디자인합니다.
- 33. Your App Bland Core Value Content Detail Contents and Data Type
- 34. Your App Bland Core Value Content Detail Contents and Data Type
- 35. Your App Bland Core Value Content Snap view Contents and Data Type
- 36. Hub & Spoke Live tile Hub Section Snap view Detail
- 39. Metro style app user experience wireframe Windows 8 Architecture
- 40. Metro style app user experience wireframe W8/WP8 Architectural Reference Application Phone PC Specific WinRT(Common) Specific Feature Feature Windows 8 Windows Phone 8 Windows RT Windows Pro ARM Intel W8>WP8 변경 - Phone Specific : 해상도에 따른 UI 변경 - WinRT : W8 의 특이 기능인 참바, 앱바 등에 개발된 기능을 Phone 설정에 맞게 변경