Download - Windows8 Modern UI Style Summary
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://[email protected]://denuo.co.kr
Thanks,Start, Windows8 Modern Style App