adapting ui to different screens

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

http://bit.ly/AdaptiveUIDropbox

http://bit.ly/AdaptiveUIGithub

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

Scaling algorithm

Effective pixel

Effective Pixel

Physical Pixel

Good design

Bad design

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

XAML is already in Effective Pixels

What am I designing?

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”

Snap points

phablet & tablet

desktopphone548 720 1024320ep

x

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

Demo: Mail, Schedule

Design Techniques for Adaptive UI

Reposition1

Reveal4

Resize2

Replace5

Reflow3

Re-architect6

Use standard responsive/adaptive design techniques

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

Tailored designBuild unique experiences on different devices

Phone (portrait)Tablet (landscape) / Desktop

Lab: Building an Adaptive UI

권영철zerosteeler@outlook.com010-4522-8103

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