Guide de départ pour le design d’applications Android

Dans le cadre de mon travail, j’ai eu à faire des interfaces d’application ainsi que des widgets pour la plate-forme Android. Ma recherche pour récolter les informations fut tout de même de plusieurs heures et majoritairement en anglais. C’est pourquoi j’ai décidé d’écrire un billet sans prétention, au meilleur de mes connaissances afin d’éclairer les designers mobiles francophones.

NOTIONS DE BASE

Philosophie Android

Android est un OS qui peut s’utiliser sur toutes sortes de téléphones et d’appareils et en tant que designers, nous nous devons de produire des interfaces qui fourniront la meilleure expérience usager (UX) et des visuels agréables.

Une des choses les plus importantes à retenir lorsque vous créez une interface ou un widget, est de résister à la tentation de reprendre le design de votre interface IOS et d’uniquement la redimensionner pour votre interface Android. Il faut penser en IOS et en Android. Les gestuelles de navigation, les composantes de chaque appareil et le style de chacun des OS sont bien différents de un à l’autre. Prenez par exemple la façon de revenir en arrière. Sur IOS on fera un bouton Retour, mais pour Android, le retour se fait avec un bouton sur le téléphone même. Je crois que ce sont des choses fondamentales pour lesquelles il faut s’éduquer.

Différence entre le bouton retour sur Android et sur iOS (ici le retour étant le bouton Art de Vivre)

Android a créé un excellent site d’aide au développement d’application la partie Design s’avère un excellent site d’introduction , pas trop technique pour nous aider à comprendre le monde Android et ses règles de base.

Les multiples formats

La particularité lorsqu’on développe avec Android est la multitude de formats d’appareils, de densités d’écrans et de ratios. C’est pourquoi il faut penser différemment et connaître les pré-requis afin de livrer une app ou un widget d’une bonne qualité visuelle qui s’adaptera bien à plusieurs formats.

Il y a beaucoup de notions à connaître quant aux termes et concepts, et vous retrouverez tout ceci en détail sur la documentation officielle en anglais d’Android. Mais j’aimerais tout de même vous faire part de quelques notions dans notre langue.

La Densité d’écran

C’est combien de pixels se retrouvent dans un espace physique de l’écran. Par exemple, un écran basse densité (ldpi) a moins de pixels pour espace donné qu’un écran de moyenne (mdpi) ou haute (hdpi) densité.

Les Density Independant Pixels (dp)

C’est une référence virtuelle sur laquelle nous pouvons nous baser pour réaliser une interface et placer les éléments dans un espace, en ne tenant pas compte des densités d’écrans.

Voici la mesure de base. Un « density-independant pixel » est équivalent à un pixel physique sur un écran de 160dpi donc de densité moyenne (mdpi) et qui est aussi pour le système la référence de base. L’image ci-dessous nous montre aussi les équivalences d’affichage d’une image de 32 dp X 32dp sur les différentes densités d’écrans.

Pour comprendre les DP et la référence de base (baseline) du système Android.

Les appareils Android ont évolué de basse densité (ldpi) à extra haute densité d’écran (xhdpi). Les ldpi disparaîtront avec le temps, mais pour l’instant nous devons les supporter. Nous devons donc faire nos designs pour toute une gamme de densité d’écrans.

MÉTHODE DE TRAVAIL

La chose à se rappeler lorsqu’on débute un design pour Android est de ne pas penser en interfaces fixes. Il faut penser en termes d’interfaces fluides comme pour les sites web et qui pourront s’étirer, mais sur écran au lieu de sur un navigateur.

Vous pouvez aussi bien utiliser Illustrator que Photoshop pour réaliser vos visuels puisque les images que nous exportons sont à un format fixe. Les dpi ne comptent plus. Prenez par exemple une icône que vous voulez faire qui mesure 10px X 10px.  La quantité de pixels et de dpi ne changeront jamais ce format d’aucune façon. Donc vous pouvez travailler en résolution 300dpi ou 1000dpi dans photoshop, mais cela ne fera que vous embêter puisque vous aurez à zoomer in et out. C’est pourquoi travailler en 72dpi et une bonne solution puisque que votre écran a cette résolution et que vous pouvez travailler à un zoom de 100%. Par conséquent, si vous créez un document à 72dpi, assurez-vous que tous vos autres documents le seront aussi. Sinon, lorsque vous glisserez un objet d’un document à l’autre de différents dpi, l’objet aparaîtra radicalement trop petit ou trop grand.

La bonne façon de travailler, est de faire votre document en 72 dpi selon un format d’appareil MDPI, et ceci sera le format 100%.

Voici quelques exemples de formats d’appareils sur lesquels vous pouvez vous baser :

  • 320dp: un écran de téléphone typique (240×320 ldpi, 320×480 mdpi, 480×800 hdpi, etc).
  • 480dp: une tablette entre deux comme la Streak (480×800 mdpi).
  • 600dp: une tablette de 7 pouces (600×1024 mdpi).
  • 720dp: une tablette de 10 pouces (720×1280 mdpi, 800×1280 mdpi, etc).

Pensez à travailler vos objets, formes, backgrounds et icônes de façon à ce qu’on puisse facilement les agrandir sans altérer la qualité visuelle. Donc travaillez avec les formes vectorielles et non en pixels purs.  Par la suite, lorsque vous aurez à agrandir vos objets pour les densités HDPI et XHDPI la qualité sera conservée. C’est la base, il ne faut jamais redimensionner des images bitmap en plus grand, elle perdront de la netteté.

Voici donc les ratios à suivre afin de conserver une bonne qualité visuelle et une proportion adéquate lors de l’agrandissement ou rapetissement de vos images.

Ratios pour différentes densités

Donc si vous avez créé une icône de 12px X 12px dans votre interface de base, elle mesurera environ 9px X 9px pour le LDPI, 18px X 18px pour le HDPI et 24px X 24px pour le XHDPI.

RATIO

LDPI :       3        9×9           0,75x

MDPI :     4         12×12       1                Baseline      

HDPI :      6         18×18       1,5x

XHDPI :    8         24×24      2x

Mais encore mieux, des outils existent pour vous aider à calculer automatiquement les différents formats que vous devez réaliser. En voici un dans cet excellent billet sur le design pour multiples densités. http://www.teehanlax.com/blog/density-converter/

Les types d’images supportés sont le PNG (préférable), JPG ( acceptable) et GIF ( déconseillé).

AUTRES TRUCS ET TECHNIQUES

Dans l’excellent site d’aide au développement d’Android, on parle entre autres de deux techniques importantes à respecter. La zone de touche, et l’interaction avec l’usager (feedback).

La zone de touche de 48dp

Les experts d’Android nous conseillent de respecter une taille de 48dp pour les endroits où l’usager a à toucher l’écran. Ils considèrent que cette zone, qui correspond à peu près entre 7 et 10 mm en grandeur physique, est acceptable pour permettre à l’usager moyen de toucher l’espace qu’il souhaite convenablement.

Exemple d’un objet touchable où s’assure de réserver un espace de 48dp

L’interaction avec l’usager

Il est aussi conseillé de programmer des réactions aux actions de l’usager.  Aussitôt que l’usager touche une portion de votre app actionnable, une réponse visuelle doit être envoyée, soit avec la couleur ou l’illumination. Cela laisse entendre à l’usager où il a touché et que l’app a perçu sont geste. Sur ce point, je vous conseille cependant d’avoir une discussion avec le développeur, parce que les effets dont nous parlons sont aussi programmables.

Plusieurs états possibles d’un bouton afin de créer une interaction avec l’usager

CONCLUSION

Je vous ai dépeint ici que les informations de départ pour démarrer en design Android. Mon billet, combiné avec plusieurs allers-retours sur le site des développeurs Android et le  site d’introduction  pour le design d’app Android vous fera je l’espère un bon outil de départ.

Publicités

Une réflexion sur “Guide de départ pour le design d’applications Android

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s