Display Scaling in Windows 10 Display scaling what it is and why it matters to you 263 Display scaling 101 Whats new for Windows 10 What this means for developers Agenda Windows and your app will run on diverse screens ID: 714332
Download Presentation The PPT/PDF document "Steve Wright Sr. Program Manager" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1Slide2
Steve WrightSr. Program ManagerDisplay Scaling in Windows 10
Display scaling: what it is and why it matters to you
2-63Slide3
Display scaling “101”What’s new for Windows 10What this means for developers
AgendaSlide4
Windows and your app will run on diverse screens
Diverse in many ways: size, resolution, density, viewing distanceScaling abstracts much of this complexityDevelopers get device-independent effective pixels
Customers get reliably-sized content
System providers get an extensible solution
What that leaves for you?
Adapting layout to effective resolution
Designing bitmap assets for different scale factors
Why scaling matters to youSlide5
4” 480x854
5” 720x1280
6” 1080x1920
Screen resolution – how many physical pixels across & high?
Size – diagonal physical size
Density – how many physical pixels in an inch?
Physical pixel – smallest unit of screen
Effective pixel – device-independent unit of screen
Effective resolution – size of screen in effective pixels
Scaling – what goes on under the surface of the presentation frameworks to map the app’s effective pixels to physical pixels
Scaling 101: Defining terms
1080
px
1920
px
160 DPI
1 inch
5”
4” 320x533
5” 360x640
6” 432x768Slide6
Why content size matters
T
here is a trade-off!
How do we know the right size?
LOREM
LOREM IPSUM DOLOR SIT
Lorem ipsum dolor sit
amet
,
consectetur
adipiscing elit, sed
do eiusmod tempor incididunt
ut labore ET
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor
incididunt ut labore et dolore
magna
aliqua
.
Ut
enim
ad minim
veniam
,
quis
nostrud
exercitation
ullamco
laboris
nisi
ut
aliquip
ex
ea
commodo consequat. Duis
aute irure dolor in
reprehenderit in voluptate
velit esse cillum dolore
eu fugiat nulla
pariatur
. Excepteur
sint occaecat cupidatat
Lorem ipsum dolor sit amet, consectetur
adipiscing
elit, sed do eiusmod
tempor incididunt
ut
labore et dolore
magna
aliqua
. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi ut aliquip
ex ea commodo
consequat.
Duis
aute irure dolor in reprehenderit in
voluptate velit esse cillum
dolore
eu
fugiat nulla pariatur. Excepteur
sint occaecat cupidatat
non proident, sunt
in culpa qui officia deserunt
mollit anim id
est
laborum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do
eiusmod tempor
incididunt
ut
labore
et
dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
E
F P
T O Z
L P E D
P E C F D
E D F C Z P
F E L O P Z D
D E F P O T E C
L E F O D P C T
F D P L T C E O
P E Z O L C F T DSlide7
Studies tell us there is a good target sizeBelow 10
pt at 16”, additional context begins to be outweighed by lower speedAbove 10 pt
, little gains in speed
User has to be in
control!
Great individual variation
Reading speed data!Slide8
Why viewing distance matters
Optimal size scales with view distanceScaling has to take view distance into account
User has to be in control!Slide9Slide10
If a font glyph always rendered to a fixed number of pixels, it becomes too small on devices with smaller pixels
Why display density matters
96 dpi
192 dpi
300 dpi
400 dpi
500 dpiSlide11
We want to keep size the same, improve visual quality by using more pixels to define the shape:
How density benefits our customers
96 dpi
192 dpi
300
dpi
400 dpi
500 dpi
“ideal”
“ideal”
96 dpi
300
dpiSlide12
How we take all this into account
Screen geometry
Screen geometrySlide13
We only support a few “buckets” for scale factorsRound the computed scale factor up or down
while loop: if ( effective resolution < minimum guaranteed resolution) { select the next lower scale factor }
So chosen scale factor != exact scale factor
Rounding differences – variation +/- a small range
Snapping to “plateaus”
Mobile
Desktop
Minimum resolution
320x480
800x600Slide14
Display
size, device type, and aspect ratio
Physical
resolution and pixel density
Effective
resolution and scale factor
Visual
size of an effective pixel
4” phone
; 5x3
480x800 &
233
DPI
320x533
at 150%
0.020°
6” phone; 9x16
1440x2560
& 489 DPI
411x731
at 350%
0.022
°
12” 2
in 1; 3x2
2160x1440
& 216 DPI
1440x960 at 150%
0.020°
24” 4K desktop; 16x9
3840x2160
& 183 DPI
1920x1080
at 200%
0.022°
84” 4K wall
; 16x9
3840x2160
& 53 DPI
2560x1440
at 200%
0.018°
Display
size, device type, and aspect ratio
Physical
resolution and pixel density
Effective
resolution and scale factor
4” phone
; 5x3
480x800 &
233
DPI
320x533
at 150%
6” phone; 9x16
1440x2560
& 489 DPI
411x731
at 350%
12” 2
in 1; 3x2
2160x1440
& 216 DPI
1440x960
at 150%
24” 4K desktop; 16x9
3840x2160
& 183 DPI
1920x1080
at 200%
84” 4K wall
; 16x9
3840x2160
& 53 DPI
2560x1440
at 200%
Summary for Scaling 101: how this works
Here are some devices that will run Windows 10
Great diversity and complexityScaling provides:Device-independenteffective pixelsEffective resolution forapp to use in layoutScale factor for appframework to use; usually transparentto appDisplay size, device type, and aspect ratioPhysical resolution and pixel density4” phone; 5x3480x800 & 233 DPI6” phone; 9x161440x2560 & 489 DPI12” 2 in 1; 3x22160x1440 & 216 DPI24” 4K desktop; 16x93840x2160 & 183 DPI
84” 4K wall; 16x93840x2160 & 53 DPISlide15
Unified scale factors for all appsSome
compat exceptions for 8.1 and WPB appsWhy these scale factors?
Well-aligned with other app platforms
Granular
more consistent content size
Up to 400% for good 4K support
So how does this change for Windows 10?
Android
100
150
200300
400IOS100200
300
Windows100125150200
250300400Slide16
Platform baseApplication “pyramid”
Every app (“mainstream”)A few apps (more exacting visuals)Very few apps (physical pixels)
S
caling 101 developer story:
Windows: we provide a scale factor and effective resolution for each display
Provide assets for
some scale
factors
Use effective resolution
for all your design and layout
Assets
at
more scale factors
APIs
for phys
pixelsSlide17
Many scale factors – how you can support them!Which scale factors should I provide? Why not all?
How does the platform scale these on different displays?
How can
I control which
assets go to which devices and displays?
Answer: very
similar to Windows Store & Phone apps
Let’s talk about bitmap assets:Slide18
Scaling up
How bitmap assets are scaled
Scaling downSlide19
Significantly higher disk and memory footprintSimple line art like the alarm clock icon will
compress well for download and disk footprintBut the memory runtime footprint is O(n
2
)
Solution: provide just a few
assets
100%, 200%, 400%Build asset
packagesYour users only download the scale factors they need
So why not just supply 400% assets?Slide20
MRT is a resource management technologyDriven by resource naming convention
friendlyname.scale-100.png, friendlyname.scale-200.png, etc.Code refers to the asset by the friendly name
Runtime picks the best available version based on scale factor
If the best version isn’t exactly the right size, it will be bitmap-scaled to fit
What does “best” mean?
Heuristics that favor downscaling over upscaling, closer over farther
If you supply 100%, 200%, and 400%, MRT will use them like this:
How UAP runtime manages asset selection
Windows
100
125150200250
300400Slide21
Separates your assets by scale factorWhat if customer runs
multimon?What if they add a display later on?
How do asset packs work?Slide22
100%, 200%, 400% (in that order)Porting from iOS?
You’ve got #1 & #2From Android? You’ve probably got all 3
Which scale factors should I really support?
Priority
Scale Factor
Why
#1
100%
Most common desktop scale factor
85%
of desktop devices still at 100%
Some low-end tablets, but no phones
#2
200%
Great
coverage for all high DPI desktops (125-250%)
Good coverage for most current phones (125-300%)
#3
400%
Future
proof for QHD phones and 4K tablets
Improved quality at 250% and 300% as wellSlide23
Scale factors and real devices
Scale Factor
Importance
Examples
100%
Most PC
upgrades and low-cost laptops
Some low-cost tablets
No phones
10-12.5” 1366x768 laptop
30” 2560x1440 monitor
125%Some PC upgrades and low-cost laptopsMany low-cost phones
13.3” 1600x900 laptop27” 3200x1800 monitor4.5” 480x800 phone
150%New mainstream laptops
Many low-cost phones10.6-13.3” 1080p laptop28” 4K monitor5” 960x540 phone
200%New premium laptops
Many mid-range phones13.3” 2560x1440 laptop24” 4K monitor5” 1280x720 phone
250%
New high
end, some 4K laptops
Some
mid-range phones
13.3” 3200x800 laptop
15.6” 4K laptop
5.7” 1080p phone
300%
New 4K laptops
High-end phones
13.3” 4K laptop
4.5” 1080p phone
400%
Premium phones
5.2” 2560x1440 phoneSlide24
Start with your effective pixel UI layout!
The size in effective pixels your 100% physical size
Scale from there
Example: want 300x300 effective pixels
100% 300x300 bitmap
200%
6
00x600 bitmap400% 1200x1200 bitmap, etc.
So how big should I make my assets?Slide25
Quick demo of assetsSlide26
Use vector design tools if possibleWill give you the highest quality artwork at any scale factor
Easy to revisit, tweak overall design or add scale factorsBitmap art tooling?Author the 400% first, scale it down to 200% and 100%
If you need more quality at 100% and 200%, crisp up the scaled images
B
est practices for asset authoringSlide27
Asset support for 100%, 200%, 400%, asset packsLearn about effective resolution and adaptive layout
679 - From the Small Screen to the Big Screen: Building Universal App Experiences with XAML741 - Moving to Universal: Migrating to Windows 10 UAP from Windows Phone Silverlight or Windows 8.1 XAML
768 - Designing and developing the ultimate Windows 10 experience
658 - Windows 10 User Experience: Models, Patterns, and
Controls
Call to ActionSlide28