Touch to Modern…

Windows8 Modern UI Style

2

Powered by DENUO

Metro style app user experience wireframe

Windows8 의 가장 큰 변화

Windows8

App Store

Windows8Modern UI Style

App

3

Powered by DENUO

Metro style app user experience wireframeWindows8 App Store

하이라이트 , 금융 카테고리 등 21 개 카테고리로 운영스토어 계정을 통해 업로드 , 스토어 심사를 거쳐 등록

Modern UI 로 제작된 어플리케이션을 위한 스토어

4

Powered by DENUO

Metro style app user experience wireframeWindows8 Coverage

Multi-Screens, Multi-OS, Multi-DeviceWindows8Device Coverage

X86, X64 ARM

Windows Pro Windows RT

5

Powered by DENUO

Metro style app user experience wireframeiOS 의 디자인과 Windows8 Modern UI 의 차이

Metaphor UI

- 실물의 모습을 비유하여 디자인- 원래의 구조 , 장식적 요소를 그대로 유지하여 디자인

Modern UI

- Authentically digital ( 진정한 혹은 정통 디지털 )" 경험- 인위적 반사광 , 장식요소를 배제한 Flat 디자인- 컨텐츠와 정보에 집중하는 디자인

6

Powered by DENUO

Anatomy of a Modern UI App Style

7

Powered by DENUO

TilesGridPanorama UXTypography

No, Chrome

Modern UI Style

Summary

8

Powered by DENUO

Modern UI Style

NavigationHierarchy

Hub>Section>Detail

Hub Sec-tion

De-tail

9

Powered by DENUO

Modern UI Style

NavigationFlat

Navigation - 컨텐츠를 클릭하여 Hub>Section>Detail 페이지로 이동 - 2 번 , 3 번 Section, Detail 페이지의 타이틀 좌측 화살표를 통해 이전 페이지로 이동 - 메뉴 이동은 상단의 Navi Bar 를 이용

1 2 3

Hub Sec-tion

De-tail

10

Powered by DENUO

Modern UI Style

NavigationFlat

Structure - 동일 Depth 의 페이지 이동 : 메뉴 또는 탭

UX : Navi bar 출력 - Touch : 상단 아래로 밀기 - Mouse : 우클릭

1

1

11

Powered by DENUO

Modern UI Style

NavigationFlat

Navigation - Header Toggle Menu 를 이용해서 Navi 처리 - 메뉴를 노출해서 Navi 처리 가능 : 권장사항은 아님

Toggle Menu 의 형태 1

Toggle Menu 의 형태 2

- App 이름에서 카테고리 메뉴를 노출할 수 있다 .- 카테고리에서 기능 메뉴를 노출할 수 있다 : Sorting, 크기조절 , 정렬 등

- Navi Bar 또는 Toggle Menu 에 대한 네비게이션 혼돈을 우려한 형태- 단 , Windows8 권장사항은 아님

Menu 노출 형태

12

Powered by DENUO

Tiles&Layout

Tile

150x150

310x150

1. App 을 실행시키는 Tile2. Contents 를 표현하는 Tile

1. App 을 실행시키는 Tile

- App Store 등록 시 5 가지 Size 의 Tile 필요

2. Contents 를 표현하는 Tile 은 Size 의 제약이 없습니다 . 단 , 각 Tile 의 Grid 시스템을 준수하도록 권장하고 있습니다 .

13

Powered by DENUO

Tiles&Layout

Tiles

30x30- Zoom out - Inside 라이브타일

50x50- 앱스토어- 참바- 앱모두 보기

150x150- 시작화면- 정보 업데이트 가능

310x150- 시작화면- 정보 업데이트 가능

620x300

- 앱 실행시 로딩

14

Powered by DENUO

Tiles&Layout

Grid Lay-out

1. Contents 의 Level 에 따라 Tile 의 Size 결정2. Grid 시스템에 따라 Tile Size 결정 ex) - 50pix>100pix>150pix (O) - 20pix>40pix>60pix>100pix (O) - 20pix>55pix>80pix>120pix (X)

140pix

120pix

50pix

10pix 40pix 10pix80pix

15

Powered by DENUO

Tiles&Layout

Grid Lay-out

Hub

Section

Detail

1

XO

2

44

5

1. Header : App 이름2. Hub 페이지 카테고리 , 컨텐츠 타이틀3. Hub 페이지에서 이동한 Sec-tion 페이지의 타이틀4. Section 페이지에서 Back 은 Hub 페이지로 이동5. Detail 페이지의 타이틀

3

16

Powered by DENUO

1. 영문 Font(SegoeUI) : 12>14>26>56

Typography

17

Powered by DENUO

Typography

1. 국문 Font( 맑은고딕 ) : 12>14>26>562. 국문 Font( 맑은고딕 ) : 11>12>14>22>42

18

Powered by DENUO

View&Control

View

1. Panorama Full View2. Snap View3. Fill View

Windows8 Modern UI App 의 기본 View : Panorama

19

Powered by DENUO

View&Control

View

1. Panorama Full View2. Snap View3. Fill View

Windows8 은 2 개의 App 을 동시에 띄울 수 있습니다 . 이때 활용하는 Snap View

Full view Snap view

- Left Position- 320pix

Snap view Contents

- Full View 의 컨텐츠를 순서대로 배치

20

Powered by DENUO

View&Control

View

1. Flyout view 의 활용

Full view Flyout view

- Right position- Content, Control 화면으로 활용- 로그인 , 결제 , 약관 등- 320pix, size 조절 가능

Flyout view : Control Flyout view : Log-in

21

Powered by DENUO

View&Control

View

1. Semantic zoom- Zoom in, zoom out 을 통해 컨텐츠를 카테고리화 시키는 UX

- 많은 컨텐츠를 요약하는 효과- Touch : Pinch and Stretch- Key Board : Ctrl key+Mouse wheel down

Zoom outZoom in

22

Powered by DENUO

View&Control

Control

1. App Bar Control2. Charm Bar Control3. App Control

- App 의 모든 Control 기능을 추가 할 수 있음- Touch : 끌어올리기- Key board : Mouse right click

23

Powered by DENUO

View&Control

Control

1. App Bar Control2. Charm Bar Control : 검색 , 공유 , 장치 , 설정3. App Control

Charm Bar : 검색

Charm Bar

24

Powered by DENUO

View&Control

Control

1. App Bar Control2. Charm Bar Control : 검색 , 공유 , 장치 , 설정3. App Control

Charm Bar : 공유

25

Powered by DENUO

Metro style app user experience wireframe

Building your Win-dows8 Store App

26

Powered by DENUO

Planning the Windows8 Store AppContent before Chrome

컨텐츠에 집중 , 불필요한 요소 , 기능 제거

Panorama & Snap view beautifully1366 해상도 기준이 파노라마 view 로 컨텐츠 설계 , Snap view 고려

Branding Tiles & GridTile 과 Grid 를 사용하여 Modern 하게 디자인 , App 의 브랜딩요소 가미

Use the right contracts & Semantic zoom검색 , 공유 , Toast Noti, App Bar, Navi Bar 의 활용

27

Powered by DENUO

Live tile

- Secondary tile : 150x150- Primary tile : 310x150- Live tile : 310x150 : 정보 갱신 가능

Secondary tile Primary tile

Live tile

28

Powered by DENUO

Splash ScreenSplash Screen

- Splash Screen : 620x300 : 앱 실행 후 로딩 화면 , App 의 브랜딩

29

Powered by DENUO

1. 메뉴 네비게이션 제거2. 명령 기능 제거3. 검색 , 공유 , 설정 제거4. 컨텐츠 터치 고려6. 알림 , 가입 제거

No, Chrome : Web>Windows8 app

30

Powered by DENUO

Hub

Your App BlandCore Value ContentContents and Data Type

31

Powered by DENUO

Section

Your App BlandCore Value ContentContents and Data Type

32

Powered by DENUO

Section

Your App BlandCore Value ContentContents and Data Type

Contents and Data Type 의 성격에 따라 다양한 Section 페이지를 디자인합니다 .

33

Powered by DENUO

Detail

Your App BlandCore Value ContentContents and Data Type

34

Powered by DENUO

Detail

Your App BlandCore Value ContentContents and Data Type

35

Powered by DENUO

Snap view

Your App BlandCore Value ContentContents and Data Type

36

Powered by DENUO

Live tileHub & Spoke

Hub

Section

DetailSnap view

37

Powered by DENUO

Windows8 Store App Style

Touch to Modern…

AppendixWindows8 Dev Architec-ture

39

Powered by DENUO

Metro style app user experience wireframeWindows8 / Windows Phone 8

Windows 8 Architecture

W8 ModernUI style Apps

HTMLJavaScri

pt

CC++

C#VB

Desktop Apps

Win32

.NET / SL

Internet Explore

r

Communication

& Data

Application Model

Devices & Printing

WinRT APIsGraphics &

Media

Syst

em

Serv

ices

JavaScript(Chakra)

CC++

C#VB

XAML HTML / CSSVie

wM

od

el

Contr

olle

r

Windows Core OS ServicesCore

40

Powered by DENUO

Metro style app user experience wireframeWindows8 / Windows Phone 8

W8/WP8 Architectural Reference

Windows 8

ARM Intel

Windows Phone 8Windows RT

WinRT(Common)Phone

Specific Feature

PC Specific Feature

Windows Pro

Application

W8>WP8 변경 - Phone Specific : 해상도에 따른 UI 변경 - WinRT : W8 의 특이 기능인 참바 , 앱바 등에 개발된 기능을 Phone 설정에 맞게 변경

DENUO, Modern UI Design Firmhttp://facebook.com/welcommodernhttp://welcommodern.cominfo@welcommodern.comhttp://denuo.co.kr

Thanks,Start, Windows8 Modern Style App