Download - Adapting UI to different screens
![Page 1: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/1.jpg)
실습 파일 : 둘 중 하나의 링크에서 다운로드 받으세요 .
http://bit.ly/AdaptiveUIDropbox
http://bit.ly/AdaptiveUIGithub
![Page 2: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/2.jpg)
Adapting UI to different screensWindows 10 Developer Workshop권영철Microsoft MVP
![Page 3: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/3.jpg)
Scaling algorithm
![Page 4: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/4.jpg)
Effective pixel
Effective Pixel
Physical Pixel
![Page 5: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/5.jpg)
Good design
![Page 6: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/6.jpg)
Bad design
![Page 7: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/7.jpg)
Ignore scale, resolution, & dpi.Design in Effective Pixels
XAML is already in Effective Pixels
![Page 8: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/8.jpg)
What am I designing?
![Page 9: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/9.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/10.jpg)
Snap points
phablet & tablet
desktopphone548 720 1024320ep
x
![Page 11: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/11.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/12.jpg)
Demo: Mail, Schedule
![Page 13: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/13.jpg)
Design Techniques for Adaptive UI
![Page 14: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/14.jpg)
Reposition1
Reveal4
Resize2
Replace5
Reflow3
Re-architect6
Use standard responsive/adaptive design techniques
![Page 15: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/15.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/16.jpg)
Tailored designBuild unique experiences on different devices
Phone (portrait)Tablet (landscape) / Desktop
![Page 17: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/17.jpg)
Lab: Building an Adaptive UI
![Page 19: Adapting UI to different screens](https://reader036.vdocuments.net/reader036/viewer/2022062503/58f085241a28abbc3f8b458b/html5/thumbnails/19.jpg)
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