adapting ui to different screens

19
실실 실실 : 실 실 실실실 실실실실 실실실실 실실실실 . http://bit.ly/AdaptiveUIDropbox http://bit.ly/AdaptiveUIGithub

Upload: -

Post on 14-Apr-2017

182 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Adapting UI to different screens

실습 파일 : 둘 중 하나의 링크에서 다운로드 받으세요 .

http://bit.ly/AdaptiveUIDropbox

http://bit.ly/AdaptiveUIGithub

Page 2: Adapting UI to different screens

Adapting UI to different screensWindows 10 Developer Workshop권영철Microsoft MVP

Page 3: Adapting UI to different screens

Scaling algorithm

Page 4: Adapting UI to different screens

Effective pixel

Effective Pixel

Physical Pixel

Page 5: Adapting UI to different screens

Good design

Page 6: Adapting UI to different screens

Bad design

Page 7: Adapting UI to different screens

Ignore scale, resolution, & dpi.Design in Effective Pixels

XAML is already in Effective Pixels

Page 8: Adapting UI to different screens

What am I designing?

Page 9: Adapting UI to different screens

Planning your design

PhoneViewing Distance:

16.3”

Tablets and 2 in 1Viewing Distance:

20”

Small and Large Laptops

Viewing Distance:24.5”

Small and Large Desktop Monitors

Viewing Distance:28”

TVViewing Distance:

84”

5”

8”

13”

Page 10: Adapting UI to different screens

Snap points

phablet & tablet

desktopphone548 720 1024320ep

x

Page 11: Adapting UI to different screens

Snap points 크기 작음 보통 큼

유효 너비 320px 720px 1024px

물리적 크기 4'‘~ 6'' 8'' 13'' 이상

장치 휴대폰 패블릿 , 태블릿 PC, 노트북

권장 사항

• 탭 요소를 가운데에 맞춤

• 왼쪽 및 오른쪽 창 여백을 12px 로 설정

• 왼쪽 및 오른쪽 가장자리 간에 시각적 여백

• 한 번에 1 개의 열 / 영역 사용

• 엄지 손가락으로 쉽게 누를 수 있도록 화면

아래쪽에 탐색 및 명령 요소를 배치 . • 아이콘을 사용하여 검색 버튼을 표시 ( 검색

상자를 표시하지 않음 )• 탐색 창을 오버레이 모드로 전환하여 공간

절약

• 마스터 – 디테일 네비게이션을 사용할 경우

누적 화면 모드를 사용하여 화면 공간을 절약

• 탭 요소를 왼쪽에 맞춤

• 왼쪽 및 오른쪽 창 여백을 24px 로 설정

• 왼쪽 및 오른쪽 가장자리 간에 시각적 여백

• 최대 2 개의 열 / 영역

• 검색 상자 표시

• 항상 표시되도록 탐색 창을 도킹 모드로

전환

• 탭 요소를 왼쪽에 맞춤

• 왼쪽 및 오른쪽 창 여백을 24px 로 설정

• 왼쪽 및 오른쪽 가장자리 간에 시각적 여백

• 최대 3 개의 열 / 영역

• 탐색 및 명령 요소를 앱 창 위쪽에 배치

• 검색 상자 표시

• 항상 표시되도록 탐색 창을 도킹 모드로

전환

https://msdn.microsoft.com/ko-kr/library/windows/apps/dn958435.aspx

Page 12: Adapting UI to different screens

Demo: Mail, Schedule

Page 13: Adapting UI to different screens

Design Techniques for Adaptive UI

Page 14: Adapting UI to different screens

Reposition1

Reveal4

Resize2

Replace5

Reflow3

Re-architect6

Use standard responsive/adaptive design techniques

Page 15: Adapting UI to different screens

Adaptive designBuild a page that adapts to different screen sizes and orientationsUse Visual States and Adaptive Triggers to change layoutUse RelativePanel to position blocks of content relative to peers, re-positioning in different visual statesPhone (portrait)

Tablet (landscape) / Desktop

Page 16: Adapting UI to different screens

Tailored designBuild unique experiences on different devices

Phone (portrait)Tablet (landscape) / Desktop

Page 17: Adapting UI to different screens

Lab: Building an Adaptive UI

Page 18: Adapting UI to different screens

권영철[email protected]

Page 19: Adapting UI to different screens

1. 가이드 문서https://dev.windows.com/ko-kr/design/2. 디자인 에셋https://dev.windows.com/ko-kr/design/assets3. 동영상 튜터https://channel9.msdn.com/Series/A-Developers-Guide-to-Windows-10

Reference