Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Android UI Design Pattern in practice

Android UI Design Pattern in practice

Mathieu Calba

February 07, 2013
Tweet

More Decks by Mathieu Calba

Other Decks in Programming

Transcript

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

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

    Résoudre un problème non existant Copier son concurrent
  3. 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
  4. Dashboard • Ralentit l’accès aux informations • Accès à 6

    à 9 Sections • Landing Page attractive
  5. 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
  6. 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 :
  7. 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/
  8. Listing Articles News : Image + Titre Brève : Titre

    + Date/Heure Test et Dossier : Image + Titre
  9. 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
  10. 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
  11. • 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
  12. 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
  13. • 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
  14. Erreur(s) Empty View • Possibilité de réessayer de récupérer le

    contenu • Indication manque de connectivité internet
  15. Small Normal Large XLarge 426 x 320 dp 470 x

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

    sauce Android Regroupement par paquet
  17. 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