Windows8 Modern UI Style Summary
Upcoming SlideShare
Loading in...5
×
 

Windows8 Modern UI Style Summary

on

  • 1,100 views

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

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

Statistics

Views

Total Views
1,100
Views on SlideShare
1,099
Embed Views
1

Actions

Likes
2
Downloads
21
Comments
0

1 Embed 1

http://blog.naver.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Windows8 Modern UI Style Summary Windows8 Modern UI Style Summary Presentation Transcript

  • Metro style app user experience wireframe Windows8의 가장 큰 변화 Windows8 App Store Windows8Modern UI Style App
  • Metro style app user experience wireframe Modern UI 로 제작된어플리케이션을 위한 스토어
  • Metro style app user experience wireframe Windows8Device Coverage X86, X64 ARM Windows Pro Windows RT
  • Metro style app user experience wireframeMetaphor UI Modern UI - 실물의 모습을 비유하여 디자인 - 원래의 구조, 장식적 요소 를 그대로 유지하여 디자 인 - Authentically digital (진정한 혹은 정통 디 지털)" 경험 - 인위적 반사광, 장식요소를 배제한 Flat 디자인 - 컨텐츠와 정보에 집중하는 디자인
  • Anatomy of a Modern UI App Style
  • Modern UI Style TilesSummary Grid Panorama UX Typography No, Chrome
  • Modern UI StyleNavigation Hub>Section>DetailHierarchy Hub Section Detail
  • NavigationModern UI Style - 컨텐츠를 클릭하여 Hub>Section>Detail 페이지로 이동 - 2번, 3번 Section, Detail 페이지의 타이틀 좌측 화살표를 통Navigation 해 이전 페이지로 이동 Flat - 메뉴 이동은 상단의 Navi Bar 를 이용 1 2 3 Hub Section Detail
  • 1 Modern UI Style Navigation Flat Structure - 동일 Depth 의 페이지 이동 : 메뉴 또는 탭1 UX : Navi bar 출력 - Touch : 상단 아래로 밀기 - Mouse : 우클릭
  • 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, 크기조절, 정렬 등
  • 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 필요
  • 30x30 - Zoom out Tiles&Layout - Inside 라이브타일 50x50 Tiles - 앱스토어 - 참바 - 앱모두 보기 150x150 - 시작화면620x300 - 정보 업데이트 가능 310x150 - 시작화면 - 정보 업데이트 가능- 앱 실행시 로딩
  • 120pix 140pix Tiles&Layout Grid Layout 50pix1. Contents 의 Level에 따라 Tile 의 Size 결정2. Grid 시스템에 따라 Tile Size 결정 10pix 40pix 80pix 10pixex)- 50pix>100pix>150pix (O)- 20pix>40pix>60pix>100pix (O)- 20pix>55pix>80pix>120pix (X)
  • 1 2 Tiles&Layout Hub Grid Layout 4 3 X 4 O1. Header : App 이름 Section2. Hub 페이지 카테고리, 컨텐츠타이틀3. Hub 페이지에서 이동한 5Section 페이지의 타이틀4. Section 페이지에서 Back 은Hub 페이지로 이동5. Detail 페이지의 타이틀 Detail
  • 1. 영문 Font(SegoeUI) : 12>14>26>56Typography
  • 1. 국문 Font(맑은고딕) : 12>14>26>56 2. 국문 Font(맑은고딕) : 11>12>14>22>42Typography
  • 1. Panorama Full ViewView&Control 2. Snap View 3. Fill View View Windows8 Modern UI App 의 기본 View : Panorama
  • 1. Panorama Full View View&Control 2. Snap View 3. Fill View View Windows8 은 2개의 App 을 동시에 띄울 수 있습니다. 이때 활용하는 Snap ViewFull view Snap view Snap view Contents - Left Position - Full View 의 컨텐츠를 순 - 320pix 서대로 배치
  • 1. Flyout view 의 활용 View&Control Flyout view : Control Flyout view : Log-in ViewFull view Flyout view - Right position - Content, Control 화면으 로 활용 - 로그인, 결제, 약관 등 - 320pix, size 조절 가능
  • 1. Semantic zoom View&Control - Zoom in, zoom out 을 통해 컨텐츠를 카테고리화 시키는 UX View- 많은 컨텐츠를 요약하는 효과- Touch : Pinch and Stretch- Key Board : Ctrl key+Mouse Zoom in Zoom outwheel down
  • 1. App Bar Control View&Control 2. Charm Bar Control 3. App Control Control- App 의 모든 Control 기능을 추가 할 수 있음- Touch : 끌어올리기- Key board : Mouse right click
  • 1. App Bar ControlView&Control 2. Charm Bar Control : 검색, 공유, 장치, 설정 3. App ControlControl Charm Bar : 검색 Charm Bar
  • 1. App Bar ControlView&Control 2. Charm Bar Control : 검색, 공유, 장치, 설정 3. App ControlControl Charm Bar : 공유
  • Metro style app user experience wireframeBuilding yourWindows8 Store App
  • Planning the Windows8 Store AppContent 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 의 활용
  • Secondary tile Primary tile Live tile Live tile- Secondary tile : 150x150- Primary tile : 310x150- Live tile : 310x150 : 정보 갱신 가능
  • Splash Screen Splash Screen- Splash Screen : 620x300 : 앱 실행후 로딩 화면, App 의 브랜딩
  • No, Chrome : Web>Windows8 app 1. 메뉴 네비게이션제거 2. 명령 기능 제거 3. 검색, 공유, 설정 제거 4. 컨텐츠 터치 고려 6. 알림, 가입 제거
  • Your App Bland Core Value ContentHub Contents and Data Type
  • Your App Bland Core Value ContentSection Contents and Data Type
  • Your App Bland Core Value ContentSection Contents and Data Type Contents and Data Type 의 성격에 따라 다양한 Section 페이지를 디자인합니다.
  • Your App Bland Core Value ContentDetail Contents and Data Type
  • Your App Bland Core Value ContentDetail Contents and Data Type
  • Your App Bland Core Value ContentSnap view Contents and Data Type
  • Hub & Spoke Live tile Hub Section Snap view Detail
  • Windows8Store App Style
  • Metro style app user experience wireframeWindows 8 Architecture
  • Metro style app user experience wireframeW8/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 설정에 맞게 변경
  • http://facebook.com/welcommodernhttp://welcommodern.cominfo@welcommodern.comhttp://denuo.co.kr