Build Adaptive UI’s for Phones, Tablets, Desktops, Xbox, and MoreJames Quick@jamesqquick

AgendaUWP Design PrinciplesWhat Devices Am I Designing For?Design Techniques for Adaptive UIHow to Build an Adaptive UIDemos/Hands On

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops & All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

UWP Design Principles

We want you to use your design, fonts, icons etc…

If you’re stuck, or need inspiration, we share our first party guidance that you can use

Four is the magic number

Scaling algorithm

Effective pixel

Effective Pixel

Physical Pixel

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

What Device Am I Designing For?

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

Keep it SimplePhone

(Portrait)Tablet/Desktop

(Landscape)

Demo: Calculator and Calendar

As you design

1. Adapt to size change2. Adapt to input change 3. Use Effective Pixels

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 orientationsVisual States and Adaptive Triggers to change layoutRelativePanel to position blocks relative to each other

Phone (portrait)Tablet (landscape) / Desktop

Tailored designBuild unique experiences on different devices

Phone (portrait)Tablet (landscape) / Desktop

Building Tailored ViewsBuild unique experiences on different devices

One option: Build separate pages for individual familiesCan interrogate resource qualifiers (from MRT) to determine the family

Option 2: Use XAML views

var qualifiers = Windows.ApplicationModel.Resources.Core                     .ResourceContext.GetForCurrentView().QualifierValues;

if (qualifiers["DeviceFamily"] == "DeviceFamily-Xbox") // optimized for games console rootFrame.Navigate(typeof(MainPage_Xbox), e.Arguments);else   rootFrame.Navigate(typeof(MainPage), e.Arguments);

How to build an Adaptive UI

Visual states allow you to define different selectable layouts that can be applied to your UI

How to set the visual state in codeVisualStateManager.Goto(element, state, transition)public MainPage(){ this.InitializeComponent(); this.SizeChanged += (s, e) => { var state = "VisualState000min"; if (e.NewSize.Width > 500) state = "VisualState500min"; else if (e.NewSize.Width > 800) state = "VisualState800min"; else if (e.NewSize.Width > 1000) state = "VisualState1000min"; VisualStateManager.GoToState(this, state, true); };}

Adaptive triggersCode-free state transitionTwo built-in triggersMinWindowHeight (Taller than this)MinWindowWidth (Wider than this)

<VisualState x:Name="VisualState500min"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="501" /> </VisualState.StateTriggers></VisualState>

Adaptive triggers are a zero-code solution

Visual state settersSetting a simple, scalar valueGreat when you think of ENUM values like Visibility, Stretch, etc

Does not invoke a storyboardDoes not require ObjectAnimationUsingKeyFrames

<VisualState.Setters> <Setter Target="MyText01.FontSize" Value="24" /> <Setter Target="MyImage.Stretch" Value="UniformToFill" /> <Setter Target="MyImage.Height" Value="150" /></VisualState.Setters>

XAML's RelativePanel controlA child or two act as a anchor elementsThey are relative to the panel

Other children are relative to the anchorsRelativePanel.Above = "ElementName"RelativePanel.RightOf = "ElementName"RelativePanel.Below = "ElementName"RelativePanel.LeftOf = "ElementName"

RelativePanel simplifies adaptive UIA simple Visual State setter can rearrange the UIOne element can move a family of related elements

Demo: SplitView

Demo: Adaptive Triggers

Demo: Hide Content

Demo: SplitView with Adaptive Triggers

Demo: RelativePanel with Adaptive Triggers

Developers have many toolsto build an adaptive UI

ResourcesUWP Adaptive UI Demos - http://bitly.com/uwpuidemosUWP Adaptive UI Mail Client - http://bit.ly/uwpuiemailUWP UI Design - https://msdn.microsoft.com/en-us/magazine/mt590974.aspxChannel 9 Video - https://channel9.msdn.com/Series/A-Developers-Guide-to-Windows-10/07UWP Design Basics - https://dev.windows.com/en-us/design/design-basics

ResourcesSlides - http://www.slideshare.net/JamesQuick/uwp-adaptive-ui

ReviewThe Microsoft design languageHow Windows makes design easierWhat am I designing?Adaptive UI Techniques Adaptive UI Tooling

© 2015 Microsoft Corporation. All rights reserved.