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
   

   View Slide

2. http://windows.Microsoft.com
   Windows 10
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

6. http://windows.Microsoft.com
   

   View Slide

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é
   

   View Slide

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
   …
   

   View Slide

9. http://windows.Microsoft.com
   

   View Slide

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.
    

    View Slide

11. http://windows.Microsoft.com
    Règle n° 2: Design en pixels effectifs
    Width="40"
    Height="40"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
    Margin="48"
    />
    

    View Slide

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

    View Slide

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
    

    View Slide

14. 40x4
    0
    GOOD
    
    

    View Slide

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

    View Slide

16. Une nouvelle manière de faire
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. http://windows.Microsoft.com
    Repositionner
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. http://windows.Microsoft.com
    Remplacer
    

    View Slide

26. http://windows.Microsoft.com
    Reconstruire
    

    View Slide

27. De nouveaux outils
    

    View Slide

28. DEMO
    Adobe Illustrator
    Redliner tool
    

    View Slide

29. DEMO
    Storyboards Powerpoint
    

    View Slide

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)
    
    
    
    
    
    

    View Slide

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

    View Slide

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
    
    
    
    
    
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide