Presentation is loading. Please wait.

Presentation is loading. Please wait.

Tony 684 User Data App Services Arun 765 Thomas 762 Shell Kernel Shawn 626 App Roberth 779 Enterprise John Ignite Store Barclay 695 Andrew 617 App.

Similar presentations


Presentation on theme: "Tony 684 User Data App Services Arun 765 Thomas 762 Shell Kernel Shawn 626 App Roberth 779 Enterprise John Ignite Store Barclay 695 Andrew 617 App."— Presentation transcript:

1

2

3

4 Tony 684 User Data App Services Arun 765 Thomas 762 Shell Kernel Shawn 626 App Roberth 779 Enterprise John Ignite Store Barclay 695 Andrew 617 App Model

5

6

7

8

9

10 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.

11

12 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.

13 Tiles are not always the same size… Note: This use to be exclusive to mobile, but now includes desktop as well. High density example …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 example

14 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.

15

16 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. Min. Med Size Max Med. Size Content adjusts to screen density?

17 Min. Med Size Max Med. Size Wrap/reflow text? 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.

18 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.). TileSmall TileMedium TileWide TileLarge

19 Basic StateSemi-Live StateLive 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

20 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. TextText Columns Background Image Background Image and Text Inline Image and Text Columns Inline Image and Text Groups Adaptive Tile Elements: Content

21

22

23 MechanismScenarioExpiresWinRT API Local Update a tile immediately, while the app is running or from a background task Never TileUpdateManager tileUpdater.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 TileUpdateManager tileUpdater.StartPeriodicUpdate() Push Update 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

24

25

26 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.

27

28

29 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.

30

31 Show more 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.

32 Want actions? 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.

33 More interactivity! 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.

34 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.

35

36 Tap button App launches Retrieve Args Take actions Tap button Task launches Retrieve Args Take actions

37 Tap button Protocol activates Web/App Tap button System handles action

38

39

40

41

42

43

44

45


Download ppt "Tony 684 User Data App Services Arun 765 Thomas 762 Shell Kernel Shawn 626 App Roberth 779 Enterprise John Ignite Store Barclay 695 Andrew 617 App."

Similar presentations


Ads by Google