Windows 10 Readiness France - Une expérience adaptative

Windows 10 vous permet d'adresser une large gamme de périphériques. Comment concevoir votre expérience afin de s'adapter à l'ensemble de ces périphériques ? Comment le SDK Windows 10 vous aide à les implémenter de manière productive ?

Join the Microsoft MVPs in this live webcast to learn how to build or bring your app to the *NEW* Universal Windows Platform (UWP)! We will show the foundation, demo advanced features, and answer your app development questions so you take advantage of the opportunities ahead with the Universal Windows Platform.

Webcast présenté le 11 Juin 2015. La vidéo sera disponible ici: http://mvp.microsoft.com/en-us/win10mvp.aspx

Transcript

1. Une experience adaptative Christopher MANEU Deezer.com @cmaneu
2. http://windows.Microsoft.com Windows 10
3. http://windows.Microsoft.com Types de périphériques Tailles d’écran Familles d’OS (Windows, Android, iOs)
4. http://windows.Microsoft.com Comment adresser l’ensemble de ces périphériques ?
5. http://windows.Microsoft.com 1. De nouvelles règles du jeu 2. Une nouvelle manière de concevoir ses interfaces 3. De nouveaux outils pour les implémenter
6. http://windows.Microsoft.com
7. http://windows.Microsoft.com Règle #1 : Au mieux pour l’utilisateur Plus de contrôles ou de modèles imposés Réalisez des applications avec votre propre identité
8. http://windows.Microsoft.com De nouveaux contrôles Pane title List item 1 List item 2 List item 3 SplitView Tours Rooms Projects Decor Styles Before & After Pivot 1 Pivot 2 Pivot 3 Pivot P 4 4 Pivot & tabs List item 1 List item 2 List item 3 New Alarms Phonebook Pins Command bar RelativePanel & bien d’autres …
9. http://windows.Microsoft.com
10. http://windows.Microsoft.com SplitView / Hamburger menu https://www.reddit.com/r/windowsphone/comments/32yf85/i_designed _the_new_version_of_office_for_windows/ Ne devient pas le nouveau design de base > Privilégiez la solution qui convient à vos utilisateurs > Si cette solution est le « Hamburger menu », alors le contrôle SplitView vous aide à l’implémenter.
11. http://windows.Microsoft.com Règle n° 2: Design en pixels effectifs <Rectangle Fill="CornflowerBlue" Width="40" Height="40" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="48" />
12. http://windows.Microsoft.com Règle n° 2: Design en pixels effectifs
13. http://windows.Microsoft.com Règle n° 2: Design en pixels effectifs 40 * 125 % = 50 px L’émulateur Windows Phone 10: 150% 40 * 150 % = 60px
14. 40x4 0 GOOD 
15. S’assurer que l’ensemble des marges et des tailles* soient divisibles par 4 * à l’exception des propriétés FontSize, LineHeight, CharacterSpacing
16. Une nouvelle manière de faire
17. http://windows.Microsoft.com Option 1 : le « responsive » design
18. http://windows.Microsoft.com Option 2 : le design spécifique
19. http://windows.Microsoft.com Option 3 : le design spécifique et « responsive »
20. http://windows.Microsoft.com Repositionner Recadrer Réagencer Révéler Remplacer Reconstruire
21. http://windows.Microsoft.com Repositionner
22. http://windows.Microsoft.com Recadrer 1 2 1 2
23. http://windows.Microsoft.com Réagencer
24. http://windows.Microsoft.com Révéler
25. http://windows.Microsoft.com Remplacer
26. http://windows.Microsoft.com Reconstruire
27. De nouveaux outils
28. DEMO Adobe Illustrator Redliner tool
29. DEMO Storyboards Powerpoint
30. http://windows.Microsoft.com Déclencheurs adaptifs (Adaptive triggers) Vous permet de changer d’état sans code Deux triggers inclus dans le framework MinWindowHeight (Plus haut que) MinWindowWidth (Plus large que) <VisualState x:Name="VisualState500min"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="501" /> </VisualState.StateTriggers> </VisualState>
31. http://windows.Microsoft.com Déclencheurs adaptifs personnalisés A vous de les developer pour vos cas spécifiques. public class DeviceFamilyTrigger : StateTriggerBase { private string _deviceFamily; public string DeviceFamily { get { return _deviceFamily; } set { var qualifiers = Windows.ApplicationModel.Resources.Core .ResourceContext.GetForCurrentView().QualifierValues; if (qualifiers.ContainsKey("DeviceFamily")) SetActive(qualifiers["DeviceFamily"] == (_deviceFamily = value)); else SetActive(false); } } }
32. http://windows.Microsoft.com Visual state setters Permet de définir une valeur scalaire directement dans le Visual State Tailles, marges, ou Enums du type Visibility, Stretch, … Ne déclenche pas de storyboard Plus besoin d’un élément ObjectAnimationUsingKeyFrames <VisualState.Setters> <Setter Target="MyText01.FontSize" Value="24" /> <Setter Target="MyImage.Stretch" Value="UniformToFill" /> <Setter Target="MyImage.Height" Value="150" /> </VisualState.Setters>
33. http://windows.Microsoft.com Le nouveau conteneur RelativePanel 1/2 éléments agissent comme des points de repères Ils sont relatifs au Panel Les autres éléments sont places par rapport à ces points de repères RelativePanel.Above = "ElementName" RelativePanel.RightOf = "ElementName" RelativePanel.Below = "ElementName" RelativePanel.LeftOf = "ElementName" RelativePanel simplifie la création d’UI adaptatives Un simple Visual State Setter peut modifier tout un écran Un seul élément peut déplacer un ensemble d’éléments relatifs
34. http://windows.Microsoft.com La performance ? Penser à utiliser les nouveautés XAML: - x:Bind aka. Bindings compilés, - x:DeferLoading, - X:Phase, - … http://channel9.msdn.com/Events/Build/2015/3-635
35. http://windows.Microsoft.com 1. De nouvelles règles du jeu Pixels effectifs, plus de contraintes 2. Une nouvelle manière de concevoir l’UI Les 6 R, trois modes de fonctionnement 3. De nouveaux outils pour les implémenter Redliner, PowerPoint storyboards, Adaptative Triggers, RelativePanel, …
36. http://windows.Microsoft.com Pour aller plus loin http://design.windows.com http://log.maneu.net twitter.com/cmaneu
37. Stay tuned for more global MVP events! Visit us at http://mvp.microsoft.com