adapting ui to different screens
TRANSCRIPT
실습 파일 : 둘 중 하나의 링크에서 다운로드 받으세요 .
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
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