Android UI Design Pattern in practice

Transcript

1. UI Design Patterns LYAUG - 07/02/2013 in practice Android
2. @Mathieu_Calba http://bit.ly/11FFK9z http://bit.ly/Y7wFiU
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
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
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 ?
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