Thomas Fennel - PowerPoint Presentation

test . @test

407 views
Uploaded On 2016-07-29

Thomas Fennel - PPT Presentation

Principal Program Manager Lead Application Model Tiles Notifications and Action Center in Windows 10 2762 Submit an evaluation for each Breakout Session you attend BE ENTERED INTO THE DAILY PRIZE DRAWING ID: 423807

toast text content tile text toast tile content windows app adaptive template tiles size action state adapt notifications toasts

Link:

Copy

Embed:

<iframe width="560" height="315" src="https://www.docslides.com/embed/423807" frameborder="0" allowfullscreen></iframe>

Download Presentation from below link

Download Presentation The PPT/PDF document "Thomas Fennel" 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.

Presentation Transcript

Slide1
Slide2

Thomas FennelPrincipal Program Manager LeadApplication Model

Tiles, Notifications and Action Center in Windows 10

2-762Slide3

Submit an evaluation

for each Breakout Session you attend.

BE ENTERED INTO THE

DAILY PRIZE DRAWING!Slide4

Tony

684

User Data

Title:

User Data: Working with Contacts, Appointments, Text Messages and more on Windows 10

Code:

684

Speaker:

Tony Pendolino

Room:

TBD

Date:

4/30

Time:

2.00

App Services

Arun

765

Title:

App-to-App Communication: Building a Web of Apps

Code:

765Speaker: Arunjeet SingRoom: TBDDate: 5/1Time: 2.00

Thomas762

Shell

Title:

Tiles, Notifications and Action Center

Code:

762Speaker: Thomas FennelRoom: 2005Date: 5/1Time: 12.30

Kernel

Shawn

626

Title:

Windows 10 App Lifecycle: From Activation & Suspension to Background Execution and Multitasking

Code:

626Speaker: Shawn HenryRoom: TBDDate: 4/29Time: 2.00

App

Title:

Navigation and Windowing in Windows 10 Apps

Code: 779Speaker: Roberth KarmanRoom: TBDDate: 5/1Time: 10.30

Enterprise

Title:

Enterprise App Packaging and Deployment for Windows 10 Devices

Code: TBDSpeaker: John VintzelRoom: TBDDate: TBDTime: TBD

JohnIgnite

Store

Title:

Universal App Packaging and Deployment for Windows 10 Devices

Code: 695Speaker: Barclay HillRoom: TBDDate: 4/30Time: 3.30

Barclay695

Title: Introducing the Windows App ModelCode: 617Speaker: Andrew ClinickRoom: TBDDate: 4/29Time: 11.30

Andrew617

App Model

Application Model MapSlide5

What’s different about this year?Slide6

What we heard:

Windows AppsUI Updates

Notification Center (again

)Please…don’t say more templates

More Powerful NotificationsSession Objectives And TakeawaysSlide7

Universal Windows AppsSlide8

Started last year with binary convergence

Universal Windows Apps are fully API converged for Tiles, Notifications and Action Center

APIs will work on current and upcoming Windows products like PCs, Mobile, XBOX, IoT, and HoloLens – everywhere the Universal Windows Platform runs

Universal Windows Apps and UWPSlide9

UI Updates: Start and Tile PrinciplesSlide10

Glance

(consume)

Quickly review new information and engage with apps before launching them

Go (launch)

Start by it's very nature is where you go to begin a task. At it's most basic, the tile is the doorway into the app by launching it.

Start and TilesSlide11

UI Updates: Tiles BasicsSlide12

Custom 4 effective pixel grid

Using the

omni

, 4px grid as our foundation, we updated the Start grid across our device ecosystem. We made tiles responsive and minimized the gutter and margins which allows for more tile area on a given screen.

The units in the grid are based off of the smallest tile size. Each larger tile size is sum of the smaller units and gutters between them.

Start GridSlide13

Tiles are not always the same size…

Note: This use to be exclusive to mobile, but now includes desktop as well.

High density example

Responsive Tile Sizes

…they adapt to the screen they’re on

Since the Start grid has different densities and adapts to the screen size of your device, so do our

tiles and

the content within them.

Low density exampleSlide14

Adaptive

Tile

Templates (Windows

App)

The adaptive tile template is our most flexible tile we’ve ever had. This template allows you to put the content you want on the tiles, how you want it, and have it work across all of Windows phone, tablet, and PC devices.

Legacy Templates

If there is a template that already meets your needs perfectly, feel free to use the legacy template catalog. There are over 80 different templates available for use.

Tile TemplatesSlide15

UI Updates:Introducing Adaptive Tile TemplatesSlide16

Content adapts with the tile

The new adaptive tile template works similarly to universal app patterns by allowing your content to adapt depending on the

devices screen density.

As you design your tiles it is important to keep in mind how you want your content to adapt to the tiles

size

on screens of different densities.

tile>

<binding template="

TileMedium

<group>

subgroup>

text hint-style="subtitle">John Doe</text>

text hint-style="subtle">Photos from our trip</text>

<text hint-style="subtle">Thought you might like to see all of</text> </

subgroup>

</group>

<group>

<subgroup> <text hint-style="subtitle">Jane Doe</text> <text hint-style="subtle">Questions about your blog</text>

<text hint-style="subtle">Have you ever considered writing a</text> </

subgroup>

</group>

</binding

</visual></tile>

Min. Med Size

Max Med. Size

Content adjusts to

screen density?

XML SAMPLE 1

Adaptive Tile TemplateSlide17

XML SAMPLE 2

Min. Med Size

Max Med. Size

Wrap/reflow text?

tile>

visual>

binding template="

TileMedium

text

hint-wrap=“true">Microsoft

HoloLens

: A Sensational Vision of the PC’s Future

text>

binding

</visual>

</tile>

Content adapts with the tile

The new adaptive tile template works similarly to universal app patterns by allowing your content to adapt depending on the

devices screen density.

As you design your tiles it is important to keep in mind how you want your content to adapt to the tiles

size

on screens of different densities.

Adaptive Tile TemplateSlide18

Basic State

The default, simplest state of your tile. This state highlights the app’s branding elements to make it clear what the app is.

Live State

This state allows you to provide timely, relevant content through a notification so the user can make a more informed decision about launching your app.

Semi-Live State

This state allows you to display a badge notification on your tile to indicate a change in your app (e.g. new, status, etc.).

Adaptive Tile States

TileSmall

TileMedium

TileWide

TileLargeSlide19

Basic State

Semi-Live State

Live State

Plate

App

Logo (Square150x150Logo

)

Short Name

Plate

App

Logo (Square150x150Logo

)

Short Name

Badge

Plate

App Icon

(Square44x44Logo)

Short Name

Badge

Content

Plate

App

Logo (Square150x150Logo)

Short Name

Plate

App

Logo (Square150x150Logo

)

Short Name

Badge

Plate

Short Name

Badge

App Icon (Square44x44Logo)

Content

Adaptive Tile Elements and CompositionSlide20

Content notifications can display image, text, or some combination of both. This is where you can customize your tile and get the most out of your live tile.

Because these assets scale, baking text into the image asset

isn’t ideal.

Text

Text Columns

Background Image

and Text

Inline Image and

Text

Columns

Inline Image and

Text Groups

Adaptive Tile Elements:

Content Slide21

Adaptive Tiles DemoSlide22

Windows.UI.Notifications.BadgeUpdateManager

/BadgeUpdaterScheduledTileNotification

TileUpdateManager

/TileUpdaterWindows.UI.StartScreen

SecondaryTileSlide23

Mechanism

Scenario

Expires

WinRT API

LocalUpdate a tile immediately, while the app is running or from a background taskNever

TileUpdateManagertileUpdater.Update()Scheduled

Update a tile once, at a specific date and time. E.g., tomorrow at 4pm

3 days

TileUpdateManager

tileUpdater.AddToSchedule

()

Periodic

Update a tile by polling a remote URI on an interval. E.g., every 30 minutes

3 days

TileUpdateManagertileUpdater.StartPeriodicUpdate()PushUpdate a tile immediately, by sending a push notification from your server-or-Send a Raw notification to wake a background task that triggers a tile update

3 daysPushNotificationChannelManager

How can I send tile updates?Slide24

XamlRenderingBackgroundTask

is in Windows AppsXAML Tiles on Start are being worked on

Interactive Tiles on Start are being worked on

Beyond Adaptive TilesSlide25

UI Updates: Toast and Action Center PrinciplesSlide26

Glance

(consume)

See new information from your apps

Act (chase, or take actions)

Toasts by nature invite you to begin or even complete

a task.

The toast is

the doorway into the app by

chasing (clicking) it. Additional custom actions enable

users to perform

simple tasks

without context

switching.

Action Center and ToastsSlide27

The same look and feel for the Windows family

Behaviors inherited from Windows Phone Toast and Action Center… and more

Toasts automatically go into Action Center

Toasts can be expanded to view the full content

Chase individual notificationsClear allRemove per app group

Remove individual notificationsAlarms and reminders can now be viewed inside Action Center

Action Center in

Windows 10Slide28

UI Updates: Toast BasicsSlide29

Adaptive

and Interactive Toast Template

(Windows App

)

The adaptive

toast template

is our most flexible

toast we’ve

ever had. This template allows you to put the content you want on the

toast,

how you want it, and have it work across all of Windows phone, tablet, and PC devices

. It allows you to add interactivity to quickly reply to a message, accept an invite, like something on a social network, or snooze an alarm.

Legacy Templates

If there is a template that already meets your needs perfectly, feel free to use the legacy template catalog. There are 8

different templates available for

use

and previously Windows only template features, like inline images, are now fully working on Windows Phone.

Toast Templates

Desktop

MobileSlide30

UI Updates:Introducing Adaptive and Interactive Toast TemplatesSlide31

Show more content?

XML SAMPLE 1

<toast>

<binding template=“

ToastGeneric

”>

<image placement=“

appLogoOverride

”

src

=“Torrance Shum.png” />

<text>Torrance Shum</text>

<text>Media content attached.</

text

<image placement=“inline”

src=“attachment.png” />

<text>Hey check out this photo. Isn’t it awesome?</text> </binding>

</visual>

</toast>

Content adapts with the

toast

The new adaptive

toast template

works similarly to universal app patterns by allowing your content to adapt depending on the toast’s size

and state. As you design your toasts it

is important to keep in mind how you want your content to adapt to the toasts size.

Adaptive Toast TemplateSlide32

XML SAMPLE 2

Want actions?

<toast>

<binding template=“

ToastGeneric

”>

<text>Time to leave</text>

<text>With traffic…</

text

<image placement=“inline”

src

=“map.png” />

</binding>

</visual>

<actions> <

input title=“Snooze for” id

="snoozeTime" type="selections"

defaultSelection=“5">

selection id="5" content="5 minutes" /> <selection id="10" content="10 minutes" /> <selection id="20" content="20 minutes" /></

input> <action

activationType

="system" arguments="snooze" hint-

inputId

="snoozeTime

" content=""/>

Content adapts with the

toast

The new adaptive

toast template works similarly to universal app patterns by allowing your content to adapt depending on the

toast’s size and state. As you design your toasts it is important to keep in mind how you want your content to adapt to the toasts size

Adaptive Toast TemplateSlide33

More interactivity!

XML SAMPLE 3

<toast>

<binding template=“

ToastGeneric

”>

<text>Torrance Shum</text>

<text>This is…</

text

<image placement=“

appLogoOverride

”

src

=“Torrance.png” />

</binding>

</visual>

<input id=“1"

type=“text“ />

action

activationType=“background" arguments=“quickReply" hint-inputId=“1"

content="" imageUri

=“send.png” />

actions

</toast>

Content adapts with the

toast

The new adaptive

toast template

works similarly to universal app patterns by allowing your content to adapt depending on the toast’s size and state. As you design your toasts it is important to keep in mind how you want your content to adapt to the toasts size. Adaptive Toast TemplateSlide34

Collapsed State

When the system has limited visual affordance to display the full notification, the notifications are displayed in “Collapsed State”

Notifications inside action centers on Mobile and Desktop are always in collapsed state by default for users to easily triage through them.

On Windows Mobile, a toast always shows up collapsed when it pops up, so it doesn’t affect user’s current task in an intrusive way. The exceptions are made for special scenarios like alarm, reminder, and incoming call.

Expanded State

A collapsed notification can always be expanded by the user to unveil more contents and available actions and interactivities, no matter it is a toast notification banner, or an entry inside action center.

On Windows Desktop, a toast is always pre-expanded when it pops up, since there is enough screen real estate to show the full toast.

Adaptive Toast StatesSlide35

Alarm

toast scenario=“alarm”...>

Reminder

Incoming Call<toast scenario

=“

incomingCall

”...>

Adaptive Toast ScenariosSlide36

Foreground activation

Background activation