Une experience adaptative Christopher MANEU Deezer.com @cmaneu 

http://windows.Microsoft.com Windows 10 

http://windows.Microsoft.com Types de périphériques Tailles d’écran Familles d’OS (Windows, Android, iOs) 

http://windows.Microsoft.com Comment adresser l’ensemble de ces périphériques ? 

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 

http://windows.Microsoft.com 

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é 

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 … 

http://windows.Microsoft.com 

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. 

http://windows.Microsoft.com Règle n° 2: Design en pixels effectifs 

http://windows.Microsoft.com Règle n° 2: Design en pixels effectifs 

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 

40x4 0 GOOD  

S’assurer que l’ensemble des marges et des tailles* soient divisibles par 4 * à l’exception des propriétés FontSize, LineHeight, CharacterSpacing 

Une nouvelle manière de faire 

http://windows.Microsoft.com Option 1 : le « responsive » design 

http://windows.Microsoft.com Option 2 : le design spécifique 

http://windows.Microsoft.com Option 3 : le design spécifique et « responsive » 

http://windows.Microsoft.com Repositionner Recadrer Réagencer Révéler Remplacer Reconstruire 

http://windows.Microsoft.com Repositionner 

http://windows.Microsoft.com Recadrer 1 2 1 2 

http://windows.Microsoft.com Réagencer 

http://windows.Microsoft.com Révéler 

http://windows.Microsoft.com Remplacer 

http://windows.Microsoft.com Reconstruire 

De nouveaux outils 

DEMO Adobe Illustrator Redliner tool 

DEMO Storyboards Powerpoint 

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) 

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); } } } 

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 

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 

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 

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, … 

http://windows.Microsoft.com Pour aller plus loin http://design.windows.com http://log.maneu.net twitter.com/cmaneu 

Stay tuned for more global MVP events! Visit us at http://mvp.microsoft.com