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

1. MATERIAL DESIGN
Comment concevoir
des applications Android
en material design ?

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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