© 2015 Microsoft Corporation. All rights reserved.
tech days•
2015
#mstechdays techdays.microsoft.fr
#mstechdays
Créez une expérience utilisateur
pour tous les écrans
Benjamin LAUNAY
Designer chez NAVISO Dev
MVP Windows Platform
Development
@aieaieeye
Nathalie BELVAL
Dev/Designer chez SOA...
tech.days 2015#mstechdays
Quelques chiffres
Source : Institut Médiamétrie
tech.days 2015#mstechdays
Quelques chiffres
Source : Institut Médiamétrie
Win 10 is coming
tech.days 2015#mstechdays
Menu démarrer
tech.days 2015#mstechdays
Menu démarrer tactile
tech.days 2015#mstechdays
Notification center
tech.days 2015#mstechdays
Cortana
tech.days 2015#mstechdays
App universelle
#mstechdays
Anticiper, préparer
l’arrivée de Windows 10
tech.days 2015#mstechdays
Définition
Multi Device & Multi Plateforme
LE MULTI DEVICE :
LE MULTI PLATEFORME :
tech.days 2015#mstechdays
Une stratégie de service
 Aujourd’hui
Un service global déployé sur tous vos écrans
tech.days 2015#mstechdays
Une stratégie de service
 Et demain :
Un service global déployé sur tous vos écrans
tech.days 2015#mstechdays
Une stratégie de service
 Continuité
 Cohérence
 Adaptation
Les enjeux en terme d’UX
≠ résolutions pour ≠ usages
#mstechdays
DEMO
#mstechdays
METHODE
tech.days 2015#mstechdays
La piste du « think mobile first »
 Aujourd’hui le mobile prédomine sur certains usages
Ne pas ...
tech.days 2015#mstechdays
La piste du « think mobile first »
Les +
 Focalise les équipes de dev sur l’essentiel de l’appl...
tech.days 2015#mstechdays
Porter son application
Pas facile de passer de WP8 à WP8.1 Store Apps => même XAML UI
Framework ...
tech.days 2015#mstechdays
D’un écran à l’autre
tech.days 2015#mstechdays
D’un écran à l’autre
tech.days 2015#mstechdays
D’un écran à l’autre
Form factor sont
importantes mais
pas les
orientations
40"
30"
24"
18"
14"
...
tech.days 2015#mstechdays
D’un écran à l’autre
 Ajustement des UserControl en fonction des containers
 Contrôles spécifi...
#mstechdays
DEMO
tech.days 2015#mstechdays
D’une résolution à une autre
 Font icon
 SVG/XAML
 Bitmap
Images & ressources
#mstechdays
DEMO
tech.days 2015#mstechdays
COULEUR TYPO VISUELS EFFETSICÔNES
D’une plateforme à une autre
Design UI
D’une plateforme à une autre
Design système
D’une plateforme à une autre
Design custom
tech.days 2015#mstechdays
D’une plateforme à une autre
 Pas forcément les même contrôles
 Des spécificités propres à cha...
tech.days 2015#mstechdays
D’une plateforme à une autre
Adresser toutes les plateformes
Xamarin
Partager de code & UI :
Sha...
#mstechdays
DEMO
tech.days 2015#mstechdays
Bon design ?
 Avoir un design adaptatif à des tailles d’écran allant de 4’’ à 40’’ (du phone
à ...
tech.days 2015#mstechdays
A vous de jouer !
Suivez-nous, bientôt un article pour résumer cette session
Téléchargez l’App D...
tech.days 2015#mstechdays
Notez maintenant notre session
© 2015 Microsoft Corporation. All rights reserved.
tech days•
2015
#mstechdays techdays.microsoft.fr
Créer une UX pour tous les écrans avec Universal App
Prochain SlideShare
Chargement dans…5
×

Créer une UX pour tous les écrans avec Universal App

901 vues

Publié le

C’est l’heure de l’unification. Pour préparer l’arrivée de Windows 10 et la mutualisation des supports, nous vous donnerons les clefs de la réussite de votre design cross-device. Nous aborderons ici les outils et les méthodes inhérentes à la conception de vos applications en universal app, les points importants pour créer une expérience unique qui s'adaptera à tous les écrans et nous verrons comment ouvrir vos projets au monde du multiplateforme.

Publié dans : Technologie
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
901
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
59
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Créer une UX pour tous les écrans avec Universal App

  1. 1. © 2015 Microsoft Corporation. All rights reserved. tech days• 2015 #mstechdays techdays.microsoft.fr
  2. 2. #mstechdays Créez une expérience utilisateur pour tous les écrans
  3. 3. Benjamin LAUNAY Designer chez NAVISO Dev MVP Windows Platform Development @aieaieeye Nathalie BELVAL Dev/Designer chez SOAT MVP Windows Platform Development @nbelval
  4. 4. tech.days 2015#mstechdays Quelques chiffres Source : Institut Médiamétrie
  5. 5. tech.days 2015#mstechdays Quelques chiffres Source : Institut Médiamétrie
  6. 6. Win 10 is coming
  7. 7. tech.days 2015#mstechdays Menu démarrer
  8. 8. tech.days 2015#mstechdays Menu démarrer tactile
  9. 9. tech.days 2015#mstechdays Notification center
  10. 10. tech.days 2015#mstechdays Cortana
  11. 11. tech.days 2015#mstechdays App universelle
  12. 12. #mstechdays Anticiper, préparer l’arrivée de Windows 10
  13. 13. tech.days 2015#mstechdays Définition Multi Device & Multi Plateforme LE MULTI DEVICE : LE MULTI PLATEFORME :
  14. 14. tech.days 2015#mstechdays Une stratégie de service  Aujourd’hui Un service global déployé sur tous vos écrans
  15. 15. tech.days 2015#mstechdays Une stratégie de service  Et demain : Un service global déployé sur tous vos écrans
  16. 16. tech.days 2015#mstechdays Une stratégie de service  Continuité  Cohérence  Adaptation Les enjeux en terme d’UX
  17. 17. ≠ résolutions pour ≠ usages
  18. 18. #mstechdays DEMO
  19. 19. #mstechdays METHODE
  20. 20. tech.days 2015#mstechdays La piste du « think mobile first »  Aujourd’hui le mobile prédomine sur certains usages Ne pas penser moins pour le mobile Penser plus pour la tablette & le desktop
  21. 21. tech.days 2015#mstechdays La piste du « think mobile first » Les +  Focalise les équipes de dev sur l’essentiel de l’application  Evite les concessions faite lors du passage vers le mobile Les –  Angoisse de la page blanche / Difficultés de mise en page
  22. 22. tech.days 2015#mstechdays Porter son application Pas facile de passer de WP8 à WP8.1 Store Apps => même XAML UI Framework que les Windows Store Apps  Contrôles différents  Layout, actions bar  Media  Styles et templates  Thèmes  Animation  Navigation Façon de faire différente pour le partage de code
  23. 23. tech.days 2015#mstechdays D’un écran à l’autre
  24. 24. tech.days 2015#mstechdays D’un écran à l’autre
  25. 25. tech.days 2015#mstechdays D’un écran à l’autre Form factor sont importantes mais pas les orientations 40" 30" 24" 18" 14" 10" 8" 6" 4"tall square wide
  26. 26. tech.days 2015#mstechdays D’un écran à l’autre  Ajustement des UserControl en fonction des containers  Contrôles spécifiques (WrapGrid, Viewbox)  Layout system (utilise les Visual States) Implique de faire usage du MVVM Méthodes
  27. 27. #mstechdays DEMO
  28. 28. tech.days 2015#mstechdays D’une résolution à une autre  Font icon  SVG/XAML  Bitmap Images & ressources
  29. 29. #mstechdays DEMO
  30. 30. tech.days 2015#mstechdays COULEUR TYPO VISUELS EFFETSICÔNES D’une plateforme à une autre Design UI
  31. 31. D’une plateforme à une autre Design système
  32. 32. D’une plateforme à une autre Design custom
  33. 33. tech.days 2015#mstechdays D’une plateforme à une autre  Pas forcément les même contrôles  Des spécificités propres à chaque plateforme (thème utilisateur, etc.)  Gestures différentes  Modèle de navigation différent Ergonomie
  34. 34. tech.days 2015#mstechdays D’une plateforme à une autre Adresser toutes les plateformes Xamarin Partager de code & UI : Shared Project Portable Class Library Adapter son design à la plateforme Utiliser des contrôles existants Custom Intégrer son design Blend for Visual Studio (XAML) Outils
  35. 35. #mstechdays DEMO
  36. 36. tech.days 2015#mstechdays Bon design ?  Avoir un design adaptatif à des tailles d’écran allant de 4’’ à 40’’ (du phone à la TV)  Supporter les hautes résolutions  Garantir une utilisation optimale à la souris/clavier  Garantir une utilisation optimale en touch Continuité - Cohérence - Adaptation
  37. 37. tech.days 2015#mstechdays A vous de jouer ! Suivez-nous, bientôt un article pour résumer cette session Téléchargez l’App Démo => www.universalappdemo.codeplex.com Retrouvez nous sur la communauté Facebook ‘’App Design’’ @nbelval @aieaieeye
  38. 38. tech.days 2015#mstechdays Notez maintenant notre session
  39. 39. © 2015 Microsoft Corporation. All rights reserved. tech days• 2015 #mstechdays techdays.microsoft.fr

×