Android UI Design Pattern in practice

Android UI Design Pattern in practice

9949dfe0542bd0fd32676d63c97a625f?s=128

Mathieu Calba

February 07, 2013
Tweet

Transcript

  1. UI Design Patterns LYAUG - 07/02/2013 in practice Android

  2. @Mathieu_Calba http://bit.ly/11FFK9z http://bit.ly/Y7wFiU

  3. None
  4. Qu’est-ce qu’un Design Pattern ?

  5. Qu’est-ce qu’un UI Design Pattern ?

  6. Qu’est-ce qu’un Android UI Design Pattern ?

  7. Pourquoi les utiliser ? Meilleure Solution à votre problème Mental

    Model Homogénéité Libraries Eviter de réinventer la roue
  8. Pourquoi ne pas les utiliser ? Solution à la mode

    Résoudre un problème non existant Copier son concurrent
  9. Meilleure manière d’apprendre ? La pratique

  10. YANA Site d’Information sur l’Informatique News Brèves Tests Dossiers Compte

    Catégories Favoris Yet Another News Application
  11. Identifier le Minimal Viable Product Consultation des articles V1 Gestion

    communautaire V2
  12. Articles List About Article Details Login Account Create Home Commentaires

    V1 V2 Organisation
  13. Comment se repère-t-on dans l’application ? ActionBar

  14. None
  15. None
  16. None
  17. Pourquoi l’utiliser ? Repère / Navigation Actions Contextuelles Branding

  18. Savoir ne pas l’utiliser Immersion dans un univers Maximiser l’espace

    pour le contenu
  19. Variations Split Contextual

  20. Comment Techniquement ? SDK depuis API level 11, mais dans

    sa version “finale” depuis API Level 14 ActionBarSherlock de Jake Wharton - Backport jusqu’à l’API Level 7 http://actionbarsherlock.com/ http://developer.android.com/ guide/topics/ui/actionbar.html
  21. Mise en Pratique

  22. Navigation ? Catégories Types d’article (News, Brèves...)

  23. Dashboard • Ralentit l’accès aux informations • Accès à 6

    à 9 Sections • Landing Page attractive
  24. Fly in App Menu • S’adapte à la place disponible

    • Dynamique • Accès Rapide • Pas facile à découvrir / utiliser Utile quand on a une navigation complexe aka Menu Drawer ou Sliding Menu... https://speakerdeck.com/cyrilmottier/the-fly-in- app-menu-for-designers-and-developers Présentation de Cyril Mottier
  25. ActionBar’s Spinner • Facile d’accès • Filtre ou remplacement des

    onglets si on ne veut pas perdre la place • Standard • Peut vite devenir confus si utilisé de 2 manières différentes en simultané http://developer.android.com/guide/ topics/ui/actionbar.html#Dropdown Techniquement :
  26. Onglets • Simple • Accès rapide 5 Sections/Catégories maximum •

    Peu Extensible
  27. Variation Scrollable

  28. Comment Techniquement ? SDK inclus dans l’Action Bar depuis l’API

    Level 11 ViewPagerIndicator de Jake Wharton - Plusieurs Styles à partir de l’API Level 7 http://developer.android.com/guide/ topics/ui/actionbar.html#Tabs http://viewpagerindicator.com/
  29. Solution ? Spinner pour les Catégories Onglets pour les types

    d’articles
  30. Mise en Pratique

  31. Listing Articles News : Image + Titre Brève : Titre

    + Date/Heure Test et Dossier : Image + Titre
  32. Carte Double Colonne Mix Grande Image ou Image et Titre

  33. Grande Image Avec une mise en avant Image + Titre

  34. Carousel Grande Image + Double Colonne

  35. Brève News Test et Dossier Solution ?

  36. Mise en Pratique

  37. Détail d’un Article Passage rapide entre les détails ViewPager Mode

    Lecture ActionBar disparaît
  38. Mise en Pratique

  39. Version basique terminée

  40. None
  41. Fonctionnalités additionnelles

  42. Notifier l’utilisateur Aucune connectivité internet Pas de donnée Chargement en

    cours
  43. Dialogue • Pas lu • Force l’interaction utilisateur • Interrompt

    l’utilisateur Pour des actions irréversible Techniquement ? SDK : http://developer.android.com/guide/topics/ui/dialogs.html
  44. Toast • Customisable • Pas d’interaction utilisateur • Non intrusif

    • Non contextualisé (avec l’écran) Techniquement ? SDK : http://developer.android.com/guide/topics/ui/notifiers/toasts.html
  45. • Contextuel à l’écran • Styles de base avec différents

    niveaux d’importance Basé sur le Toast Définit par Cyril Mottier Crouton Techniquement ? Librairie by Benjamin Weiss : https://github.com/keyboardsurfer/Crouton
  46. Style de base Plusieurs styles étendus Big Text Inbox Big

    Image Ajout d’action possible Notifications Système & Techniquement : http://developer.android.com/guide/topics/ui/notifiers/notifications.html
  47. • Indique qu’il faut sélectionner un article sur la gauche

    • Indique qu’il n’y a pas encore de favoris Première utilisation Empty View
  48. Erreur(s) Empty View • Possibilité de réessayer de récupérer le

    contenu • Indication manque de connectivité internet
  49. Mise en Pratique

  50. Adaptation Tablette

  51. Comment s’adapter aux multitudes de formats d’écran ?

  52. Moyens mis à disposition ?

  53. Small Normal Large XLarge 426 x 320 dp 470 x

    320 dp 640 x 480 dp 960 x 720 dp
  54. sw320 dp sw600 dp sw720 dp Responsive Design à la

    sauce Android Regroupement par paquet
  55. Comment s’adapter ?

  56. Réutilisation des vues

  57. Réorganisation de vues

  58. Réorganisation du contenu

  59. Et YANA ?

  60. None
  61. None
  62. Mise en Pratique

  63. Conclusion

  64. Identifier le problème

  65. Identifier les solutions possibles

  66. Peser le et le

  67. Choisir un Design Pattern cohérent avec la plateforme et l’app

  68. Utiliser le SDK et les librairies existantes !

  69. Remerciements/Crédits • Cyril Mottier pour le template Photoshop pour les

    screenshots et autres articles de son blog http:// android.cyrilmottier.com/ • Juhani Lehtimaëki - Livre Smashing Android UI • Kirill Grouchnikov - http://www.pushing-pixels.org/ • Guillaume Berry pour icones pouce up/down • YANA - Code disponible sur GitHub : https:// github.com/MathieuCalba/android-ui-design-pattern
  70. Questions ? @Mathieu_Calba