It's a simple guide to windows8 modernUI style.(Korean)

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

37. Windows8
Store App Style

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 설정에 맞게 변경

41. http://facebook.com/welcommodern
http://welcommodern.com
info@welcommodern.com
http://denuo.co.kr