MATERIAL DESIGN
Comment concevoir
des applications Android
en material design ?
Découvrez en quelques slides ce
qu’il faut retenir du Material
design et des composants natifs
proposés par Google pour
dé...
Pourquoi adopter le material design?
Le Material design, né avec la version 5 d’Android, repose sur un ensemble de normes
...
La navigation
• L’application est une tâche
décomposée en activités
(écrans) contenant plusieurs
contextes.
• L’applicatio...
Le menu coulissant
• Il est composé d’un en-tête
avec une image de fond. Cet
en-tête est optionnel
• Il sert souvent à aff...
Les onglets
• En mode défilant, le texte peut
être aligné à gauche ou centré
• Cela fait 3 types d’onglets natifs
• Indica...
La barre d’application
• L’icône de navigation est située
à gauche
• Titre ou logo doivent être
alignés à gauche, juste ap...
Le bouton flottant
• Le bouton flottant ou FAB (floating action
bouton) doit être rond et plat
• Il possède nativement une...
Les dialogues
• Il y a 2 types de dialogues
prévus nativement: la boîte
et le plein écran
• La boîte est composée d’un
tit...
Les couleurs
• On essaie de se limiter à 5
couleurs maximum, chaque
couleur ayant un rôle
• La couleur d’accentuation
(ici...
Les animations
• L’un des gros apports du
Material design réside
dans les effets mis à
disposition des
développeurs. En 2 ...
MATERIAL DESIGN
Source: https://www.google.com/design/spec/material-
design/introduction.html
Merci à Sébastien Doubey
Vou...
Prochain SlideShare
Chargement dans…5
×

Concevoir une application en Material design

889 vues

Publié le

A l'heure de développer une application Android, faut-il opter pour le material design au risque de brimer sa créativité? Chez Bewoopi, agence de marketing digitale, nous pensons que ça vaut la peine.
Alors, comment concevoir son application en material design? Quels sont les modules natifs qui feront gagner du temps aux développeurs?
Retrouvez dans cette présentation l'essentiel du Material Design.
Et aussi: http://www.bewoopi.net/blog/article/material-design-grands-principes-et-mise-en-oeuvre

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

Concevoir une application en Material design

  1. 1. MATERIAL DESIGN Comment concevoir des applications Android en material design ?
  2. 2. Découvrez en quelques slides ce qu’il faut retenir du Material design et des composants natifs proposés par Google pour développer plus rapidement des Applications plus belles sur Android. Agence Com’ digitale Pourquoi adopter le Material Design Le menu coulissant Les onglets La barre d’application Le bouton flottant Les fenêtres de dialogue La navigation Les couleurs Les animations
  3. 3. Pourquoi adopter le material design? Le Material design, né avec la version 5 d’Android, repose sur un ensemble de normes graphiques (couleurs, police, espacements, etc.) et ergonomiques (touch feedback, transitions, taille des zones de touch, usage du bouton back, etc.). Si Google déploie de plus en plus d’efforts à l’élaboration d’un standard dans le design de ses Apps, c’est qu’il souhaite proposer une expérience optimale aux utilisateurs Android et une homogénéité entre ses applications. L’inconvénient de suivre à la ligne les guidelines du material design c’est qu’on a parfois l’impression d’être brimés dans notre créativité et peur que notre application manque furieusement de singularité parmi ce catalogue d’Apps identiques. Toutefois, l’homogénéité entre les applications favorise une prise en main plus rapide par les mobinautes, davantage de pages vues et, certainement, un meilleur taux d’engagement. Il faut avouer aussi que les applications en material design ne sont pas encore légion. Nul risque d’être perdu dans la masse, surtout que Google les met en avant. Enfin, le gain de temps en développement et en design mérite peut être qu’on s’y attarde…
  4. 4. La navigation • L’application est une tâche décomposée en activités (écrans) contenant plusieurs contextes. • L’application est structurée en couches d’écrans • La flèche retour du header et le bouton back du téléphone n’ont pas la même fonction: la flèche fait remonter dans la structure de l’App • L’écran principal et le menu permettent de passer d’un contexte à l’autre
  5. 5. Le menu coulissant • Il est composé d’un en-tête avec une image de fond. Cet en-tête est optionnel • Il sert souvent à afficher le profil utilisateur • Le menu est une liste verticale d’icônes + texte avec un état sélectionné ou non • C’est un module natif dont seuls la couleur et la taille des textes sont modifiables • Les icones sont optionnelles
  6. 6. Les onglets • En mode défilant, le texte peut être aligné à gauche ou centré • Cela fait 3 types d’onglets natifs • Indicateur de sélection: couleur et épaisseur customisables • Ajout d’icône possible • Les onglets peuvent être personnalisés sans grande difficulté • Ils permettent de naviguer entre les écrans • 2 modes d’onglets: fixes ou défilants
  7. 7. La barre d’application • L’icône de navigation est située à gauche • Titre ou logo doivent être alignés à gauche, juste après l’icone de navigation • Le titre peut être soit le titre de l’App, le titre de la page ou une liste déroulante • Les icônes sont sans fond, de préférences en blanc ou niveau de gris • Eviter de modifier l’icone de navigation • Le sous menu à droite est une liste. La personnalisation de l’affichage de la liste peut être coûteux car ce n’est pas natif
  8. 8. Le bouton flottant • Le bouton flottant ou FAB (floating action bouton) doit être rond et plat • Il possède nativement une élévation et se situe au premier plan, par-dessus tout l’écran • Il est placé de préférence à cheval entre deux éléments de la page en haut ou en bas • Il permet de lancer une action en rapport avec la page sur laquelle il est
  9. 9. Les dialogues • Il y a 2 types de dialogues prévus nativement: la boîte et le plein écran • La boîte est composée d’un titre, un texte et 2 ou 3 options cliquables • Les dialogues boîte sont personalisables • Le dialogue plein écran vient se mettre par-dessus l’écran précédent et se ferme à l’aide d’une croix
  10. 10. Les couleurs • On essaie de se limiter à 5 couleurs maximum, chaque couleur ayant un rôle • La couleur d’accentuation (ici rose dans l’écran de droite) est la couleur attribuée aux éléments avec lesquels l’utilisateur peut ou est en train d’interagir • Chaque couleur est automatiquement attribuée par le système • Gain de temps et clarté assurés
  11. 11. Les animations • L’un des gros apports du Material design réside dans les effets mis à disposition des développeurs. En 2 lignes de codes, ils peuvent animer les boutons et les changements de pages.
  12. 12. MATERIAL DESIGN Source: https://www.google.com/design/spec/material- design/introduction.html Merci à Sébastien Doubey Vous voulez faire développer une App Android: http://www.bewoopi.net contact@bewoopi.net

×