Scribd
Upload
310 views34 pages

UWP Adaptive Design

The document discusses adaptive design for Windows 10. It covers the Microsoft design principles of simplicity, personalization, universal thinking and creating delight. It also discusses how Windows makes design easier through adaptive controls, input intelligence and scaling algorithms. The document provides guidance on what to design for based on device types and viewing distances. It outlines techniques for adaptive design including resizing, reflowing, repositioning and redesigning content across devices.

Uploaded by

haovn577
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
310 views34 pages

UWP Adaptive Design

The document discusses adaptive design for Windows 10. It covers the Microsoft design principles of simplicity, personalization, universal thinking and creating delight. It also discusses how Windows makes design easier through adaptive controls, input intelligence and scaling algorithms. The document provides guidance on what to design for based on device types and viewing distances. It outlines techniques for adaptive design including resizing, reflowing, repositioning and redesigning content across devices.

Uploaded by

haovn577
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

Adaptive design

Windows 10

Agenda
The Microsoft design language
How Windows makes design easier

What am I designing?
Techniques to adapt

http://windows.Microsoft.com

The Microsoft
Design Language

Microsoft design language principles


Keep it Simple

Make it Personal

Think Universal

Create Delight

Isnt it nice when things just work, when the


next step is intuitive, and people are inspired?

Better technology for anyone is better


technology for everyone. Its an attitude.

We design for real people, not requiring people


can fit into our design. Personal means human.

Attention of detail equals moments of delight.


Sometimes delight is so perfect it is invisible.

Design as One

Work together and do amazing things.


Many teams, one ecosystem, happy customers.

http://windows.Microsoft.com

Typeography

http://windows.Microsoft.com

Iconography
2px

http://windows.Microsoft.com

For most text, use


15 epx Segoe UI Regular

Four is the magic number

http://windows.Microsoft.com

How Windows
makes design easier

Adaptive controls

http://windows.Microsoft.com

Input intelligence

http://windows.Microsoft.com

Scaling algorithm

http://windows.Microsoft.com

http://windows.Microsoft.com

Physical versus effective pixel


4 Phone
480x854

4 Phone
480x854
5 Phone
720x1280

5 Phone
720x1280
6 Phone
1080x1920

6 Phone
1080x1920

http://windows.Microsoft.com

Effective pixel

Physical Pixel

Effective Pixel

http://windows.Microsoft.com

Ignore scale, resolution, & dpi.


Design in Effective Pixels

What am I designing?

Planning your design


13

Tablets and 2 in 1

Phone

Viewing Distance:
20

Viewing Distance: 16.3

Small and Large Desktop Monitors


Viewing Distance:
28

Small and Large Laptops


Viewing Distance:
24.5

TV

Viewing Distance:
84

http://windows.Microsoft.com

Snap points

epx

320

548

720

phone

limited landscape support


one frame at a time
sys tray on the left
steering wheel on the right
4+ actions on the bottom
tabs are centered

1024

phablet &
tablet

limited landscape support


one frame at a time
sys tray on the left
steering wheel on the right
4+ actions on the bottom
single column stops scaling
tabs are centered

full landscape support


two frames
actions at the top
one visible -TBD
tabs are left aligned
Show search field if search was
represented as an icon on
smaller devices

desktop

full landscape support


three frames
compact navpane
actions at the top
one visible
tabs left aligned

http://windows.Microsoft.com

The weather app


DEMO

Flow, not size

My UI

My UI

My UI

http://windows.Microsoft.com

Flow, not size

My UI

My UI

My UI

My UI

My UI
My UI

http://windows.Microsoft.com

Check variants

http://windows.Microsoft.com

As you design
1. Adapt to size change
2. Adapt to input change

3. Build with effective pixels


4. Count on the scaling algorithm

http://windows.Microsoft.com

Where to start
1. Effective pixels
2. Iconography

3. Design templates

http://windows.Microsoft.com

Techniques to adapt

Three core adaptive approaches


Responsive design
Resize your content
Reflow your content

Adaptive design
Reposition your content
Redesign your content

Tailored design

http://windows.Microsoft.com

Resize

http://windows.Microsoft.com

Reflow

http://windows.Microsoft.com

Reposition

http://windows.Microsoft.com

Redesign

http://windows.Microsoft.com

Don't assume you will use


only one technique.

Review
The Microsoft design language
How Windows makes design easier

What am I designing?
Techniques to adapt

http://windows.Microsoft.com

You might also like