Comment concevoir l'interface utilisateur / UX pour les dernières mises à jour Android 9 et 10

pas de développement d'application réel, pour cet article.

Palette de couleurs

Pour la palette de couleurs Material Design, Google préfère un système «à deux couleurs» avec des variantes:



Donc par exemple, comme sur cette photo. Votre couleur principale serait le violet, votre couleur secondaire étant le cyan. Et puis pour d'autres éléments de votre interface utilisateur, vous utiliseriez des variantes d'ombre de violet et de cyan, de sorte que tout se mélange.



Ce Editeur de conception de matériaux est un outil très utile qui vous aide à assembler des variations de couleurs. Vous pouvez également vous inspirer d'agences de design professionnelles UI / UX telles que Argile , ou cette liste des sociétés de conception Web les mieux notées en 2019.



Disposition de grille réactive

Comprendre la disposition de la grille réactive signifie comprendre comment densité de pixels et l'adaptation automatique de l'écran fonctionne. Pour la plupart, le DPI moyen d'un téléphone Android se situe entre 300 et 480 DPI.

Dans cet esprit, un écran 300 DPI pourra généralement afficher jusqu'à 4 colonnes:



Alors qu'un écran de 600 dpi affichera jusqu'à 8 colonnes.

Entre chaque colonne se trouvent des «gouttières», essentiellement les zones qui séparent chaque colonne. Ainsi, sur un mobile avec 360dp, chaque gouttière serait d'environ 16dp.

Comprendre le DPI de l'écran

Lors de la conception de l'interface utilisateur, qu'il s'agisse de l'interface utilisateur système ou de l'interface utilisateur de votre application, vous devez prendre en compte les différentes densités de pixels des différentes tailles de téléphone. Voici un tableau des résolutions d'écran et des densités de pixels les plus courantes:

tableau de la densité d

Ainsi, en règle générale, lorsque vous concevez un thème ou une application «globale» et que vous ne vous concentrez pas sur la création de thèmes pour un seul appareil, vous devez commencer à la densité la plus faible. En effet, si vous commencez votre conception à 1x, vous devez simplement prendre des mesures en pixels, et les valeurs resteront les mêmes sur tous les points de vente.

Cependant, si vous concevez pour 3,5x, vous devez diviser toutes les valeurs par 3,5 pour vous adapter à d'autres densités, et le calcul de plusieurs valeurs DP devient alors un casse-tête.

Conseils supplémentaires pour la conception UI / UX d'Android 10

Si vous avez besoin d'une couleur personnalisée pour les composants de thème tels que les radios, les boutons, les cases à cocher, etc., vous devez ne pas utiliser des drawables pour montrer les différents états ( vérifié, cliqué, etc.) . Parce que lorsque vous utilisez des dessinables, vous perdez les effets de Material Design natifs (comme ondulation) que Google a largement mis à jour dans Android 9 et Android 10.

Lorsque vous travaillez avec Material Design, Google inclut de nombreux goodies dont vous pouvez profiter, et ils couleront plus naturellement avec votre UI / UX.

Ainsi, par exemple, voici quelques mots-clés pour les composants de thématisation avec des éléments de conception de matériaux intégrés, et votre application ou UI / UX bénéficiera toujours du comportement du système natif et des états de l'interface utilisateur.

Bouton avec couleur personnalisée android: backgroundTint = '@ color / red' ----- Bouton radio avec couleur personnalisée android: buttonTint = '@ color / red' ----- Images et icônes android: drawableTint = '@ color / red '----- ProgressBar avec couleur personnalisée android: progressTint =' @ color / red '

Pour afficher une simple ombre sous les composants comme en mode carte, il vous suffit d'utiliser la propriété d'élévation.

android cardview avec ombre

android: élévation = '1dp'

La fusion des balises et des propriétés parent est extrêmement utile, pour vous donner un meilleur contrôle et des fichiers XML gérables.

 

Les changements de mise en page animés peuvent vraiment améliorer votre UX, et presque tous les ViewGroup le respecteront. Ainsi, chaque fois qu'il y a un changement dans la hiérarchie des vues, cela s'accompagne d'une animation. Avec un peu de savoir-faire, vous pouvez également concevoir effets de transition personnalisés .

android: animateLayoutChanges = 'true'
Mots clés Android Développement 4 minutes de lecture