Holo material design transition

8 086 vues

Publié le

Slides from my Droidcon Paris 2014 talk about Holo-Material design transition

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

Aucun téléchargement
Vues
Nombre de vues
8 086
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5 421
Actions
Partages
0
Téléchargements
20
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

  • Material is the metaphor
    A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic. Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking t5he rules of physics. The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.


    Bold, graphic, intentional
    The foundational elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more than please the eye; they create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerses the user in the experience. An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.


    Motion provides meaning
    Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.  All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize. Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.
  • http://cyrilmottier.com/2013/05/24/pushing-the-actionbar-to-the-next-level/
  • Contenu homogène vs non homogène
  • Gradle de la doc
  • Holo material design transition

    1. 1. Holo Material Design Transition
    2. 2. About me Quentin Sallat Développeur Android à iD.apps @Aerilys
    3. 3. Mais enfin c'est quoi Material ?
    4. 4. L'évolution du design sur Android ● 1.x/2.x (Depuis 2008) o Thème Dark/light o Droid
    5. 5. L'évolution du design sur Android ● 3.x (2011) o Holo
    6. 6. L'évolution du design sur Android ● 4.x (2011) o Roboto o Design guidelines
    7. 7. Material Design Android L (2014) ● Material design ● Même design pour tous les produits Google ● “Cross-platform”
    8. 8. Material Design Material is the metaphor Bold, graphic, intentional Motion provides meaning
    9. 9. De Holo à Material
    10. 10. Steam Explorer - Holo
    11. 11. Material theme
    12. 12. Material theme  Créer un dossier pour Android L  res/values-v21/styles.xml  Faire hériter son thème du thème Material  <style name="SteamTheme" parent="@android:style/Theme.Material.Light.DarkActionBar">  Trois thèmes  Theme.Material (dark)  Theme.Material.Light (light)  Theme.Material.Light.DarkActionBar
    13. 13. Demo - code
    14. 14. Demo - résultat
    15. 15. Colors  Nouveaux attributs pour colorer son application  colorPrimary : couleur principale de l’application  colorPrimaryDark : variante plus sombre  Pour aller plus loin  https://developer.android.com/preview/material/theme.html  Librairie Palette (support v7)
    16. 16. Colors
    17. 17. Demo - résultat
    18. 18. Floating Action Button
    19. 19. FAB - design rules  Bouton flottant  Au-dessus de l’UI (couche supérieure)  Action majeure de l’écran (promoted action)  Pas plus d’un par écran, mais pas obligatoire
    20. 20. FAB - code  View customisée, drawable ou reprise d’un projet Github existant  iosched  FloatingActionButton  Compatible jusqu’à 2.x avec des adaptations
    21. 21. FAB - code
    22. 22. Demo
    23. 23. FAB - scrolling effect  Effet à la Google Plus pour ne pas cacher le contenu  Cache le bouton en scroll descendant, l’affiche en scroll ascendant  Utilise un ScrollListener sur une ScrollView ou une ListView/GridView  QuickReturnListView sur Github  Pensez à la petite animation 
    24. 24. Démo
    25. 25. Cards - Design rules  Popularisées par Google Now, Facebook…  1 card = 1 idée, notion ou contenu  Ne s’applique pas à toutes les listes
    26. 26. Cardviews - code  Avant : cards avec un drawable  Peu customisable  Pas standard  Pas de gestion dynamique des ombres  Avec Android L  Facilement customisable  Nouvelle classe de la librairie de support v7  Attribut elevation pour gérer les ombres
    27. 27. Demo
    28. 28. Animation  Nombreuses nouvelles APIs  Transitions entre activities  Ripple effect  Shadows  Et plus !
    29. 29. Demo – Ripple effect
    30. 30. Demo – élément partagé
    31. 31. Animations – Elément partagé  XML  Java
    32. 32. Quelques liens Material design rules: http://www.google.com/design/ Material with Polymer: http://www.polymer-project.org/docs/elements/material.html Material with Angular: http://material.angularjs.org/
    33. 33. Conclusion • Material Design is cool! • Possibilité de l’appliquer avant Android L • … Et même sur d’autres plateformes !
    34. 34. iD.apps http://www.id-apps.fr http://blog.id-apps.info @iD_apps Quentin SALLAT @Aerilys https://github.com/neferetheka

    ×