Google Design actualités et astuces

  • Réponses :4
  • OuverteNon stickyNon répondu
  • Posts de Forum 24 426

28 juin 2019 à 19:10:16 via site

image

Google Design

Google Design c'est chaque semaine une astuce à découvrir autour du Material Design où comment l'interface améliore l'accessibilité, de ses règles, de ses créateurs, plus des ressources à télécharger gratuitement.

🍃Parlons Design avec Google, il a des tonnes de choses à découvrir !!

Keep Calm and Love Android.

Répondre
  • Posts de Forum 24 426

28 juin 2019 à 19:32:19 via site

image

Comment rendre le Dark Mode harmonieux

Tout de suite le Dark Mode avec les astuces de Google pour ne pas faire d'erreur afin de créer une interface harmonieuse dans le thème sombre où il faut le savoir, chaque erreur compte double!!

À l’aube de l’informatique, les écrans étaient noirs. Même si vous n’avez jamais utilisé ces premiers terminaux, vous pouvez certainement les imaginer: lettres et chiffres non espacés, vert fluorescent clignotant contre une étendue sombre de néant, alimentés par des tubes cathodiques de base et une couche de phosphore...Stop, aujourd'hui, de nouvelles interfaces utilisateurs sombres apparaissent sur Internet et dans les systèmes d'exploitation, et elles sont plus sophistiquées que jamais !!

◾Des nuances de Gris dans Google Photos

Il est délicat de concevoir une interface dans Google Photos car les images organisées ou stockées appartiennent à chaque utilisateur et représentent des souvenirs personnels ou un travail professionnel. La possibilité de mettre en valeur et de respecter les photos d'une personne, sans les ajuster, nécessite un toucher particulièrement léger.

L’équipe a gardé cette priorité lors de la mise en œuvre de son propre thème sombre, en choisissant de personnaliser les conseils de Material pour créer une approche à faible contraste permettant à chaque photo de briller. L'arrière-plan est rendu dans un gris foncé plutôt que dans un noir pur, car la saturation contraste bien avec les pixels clairs pour mieux exprimer les photos colorées, et les icônes apparaissent sous forme de gris et de bleus désaturés pour une lisibilité accrue.

Ils ont réfléchi chez Google mais pas seulement, ils ont adapté le thème sombre en fonction des applications !!

image

◾Un thème sombre en couleur dans Google Agenda

Le système de couleurs de Material Design repose sur l'association d'une couleur primaire et d'une couleur secondaire, puis sur la création de variations de ces nuances pour créer un jeu de couleurs complet (vous pouvez le tester vous-même avec l'outil de couleur en ligne de Material ). Mais fondez ces mêmes couleurs sur un fond sombre, et elles ont l'air radicalement différentes. Pensez à Google Agenda , dans lequel tout le monde peut personnaliser ses calendriers à partir d'une palette infinie de nuances et où la planification d'un événement à plusieurs personnes peut rapidement être colorée. S'appuyant sur les conseils relatifs aux matériaux, Calendar a conçu un système interne permettant d' adapter une large gamme de couleurs au thème sombre., désaturant les teintes et définissant la luminosité, tout en permettant aux utilisateurs de s’exprimer dans toutes les nuances de l’arc-en-ciel. Le résultat est une couleur vive qui ressemble à celle d'un fond gris anthracite.

◾Simplifiez les interfaces utilisateur pour obtenir des informations compatibles dans Android Auto

Les conducteurs ont de plus en plus recours à des écrans tels que des tableaux de bord de véhicules, des smartwatches et des téléphones pour naviguer ou écouter de la musique au volant. Android Auto combine intelligemment les applications multimédia les plus pertinentes et Google Assistant pour une expérience plus mains libres. L'introduction d'un thème sombre rend tout cela plus sûr à utiliser en conduite de jour comme de nuit. C'est en partie parce qu'Android Auto fonctionne sur un écran OLED, qui émet moins de lumière que les options traditionnelles.Pour améliorer davantage le dark theme, Android Auto a également choisi de garder les graphiques simples. Le guidage des matières préconise l'utilisation de couches graphiques élevées pour créer une hiérarchie d'informations, mais Auto en utilise moins que la plupart des applications Material. De cette façon, le conducteur n'a pas besoin de trier visuellement autant de niveaux d'informations, et les yeux peuvent rester sur la route.

🍃 Que tout cela est astucieux pour du design, mais ce n'est que la première leçon !!

— Modifié le 28 juin 2019 à 20:28:09

Keep Calm and Love Android.

Répondre
  • Posts de Forum 24 426

5 juil. 2019 à 18:19:01 via site

image

La couleur joue un rôle important dans la lisibilité du texte

Un cour sur la couleur est à découvrir avec au menu, à quoi il faut faire attention pour améliorer la lisibilité de son texte

Tous les textes doivent être lisibles et conformes aux normes d'accessibilité. Les AA du niveau AA des Directives pour l'accessibilité au contenu Web (WCAG 2.0) exigent un contraste de couleurs 4.5.1 entre le texte et l'arrière-plan pour le texte normal, ainsi qu'un texte de 3: 1 à grand.

◾Du noir ou du blanc en priorité

Le texte noir est recommandé pour les fonds clairs et le texte blanc pour les fonds foncés. Si votre application comporte des thèmes clairs et sombres, assurez-vous que le texte est disponible dans une couleur contrastante par rapport à chaque thème.

image

◾Utiliser l'opacité du texte

Au lieu d'utiliser du texte gris et des icônes sur des arrière-plans colorés, créez un meilleur contraste en affichant du texte blanc ou noir à l'opacité réduite.

Par exemple, un texte noir affiché avec une opacité de 75% sur un arrière-plan vert confère au texte une apparence de noir avec une touche de vert. :P Comme c'est ingénieux !!

image

◾Texte et arrière-plans colorés

Le texte en couleur doit être utilisé avec parcimonie pour attirer l’attention et appliquer une emphase sélective. Idéalement, le texte coloré doit être réservé aux éléments de texte tels que les titres, les boutons et les liens.

Utilisez l' outil Couleur de matériau pour déterminer si certaines couleurs de premier plan utilisées dans le texte sont conformes aux normes d'accessibilité des couleurs d'arrière-plan.

🤔Un outil, quel outil quand on n'est pas développeur pour tester la lisibilité de son texte ...Couleur de marque accessible

image

Couleur de marque accessible

Pour passer de la théorie à la pratique en un clic depuis son navigateur, possible avec Couleur de marque accessible où il suffit de sélectionner ses couleurs pour avoir un aperçu de ce qui fonctionne ou pas du tout.

🍃 Un pas du tout, toujours à respecter pour mettre toutes les chances de son coté afin de mieux communiquer ...Mais quelle surprenate leçon de design avec des règles à respecter peu importe les goûts et les couleurs !!

— Modifié le 12 juil. 2019 à 16:09:49

Keep Calm and Love Android.

Répondre
  • Posts de Forum 24 426

5 juil. 2019 à 22:10:37 via site

image

20 Combinaisons à utiliser sans modération !!

Vingt combinaisons de polices de Google Fonts sont disponibles sur couleurs et polices et quelles belles combinaisons

image

◾Des polices sérieuses, élégantes et même franchement amusantes

image

◾Il suffit de cliquer pour accéder à sa page dans Google Fonts

image

🍃De quoi mettre en pratique tout de suite les astuces design de Google dans ses illustrations !!

https://www.androidpit.fr/forum/784613/installer-des-polices-dans-son-smartphone

— Modifié le 12 juil. 2019 à 16:07:44

Keep Calm and Love Android.

Répondre
  • Posts de Forum 24 426

12 juil. 2019 à 16:42:48 via site

image

Comment Waymo a conçu une expérience qui rassure les passagers à chaque étape du parcours

Waymo, c'est filiale de Google en charge des taxis autonomes en test avec de vrais testeurs dans de vrais conditions dans l’Arizona.
Au menu de ce cour de design, des taxis sans chauffeurs mais quelle idée ... Du design, afin de faire oublier qu'il n'y a pas de chauffeur est que tout est sous contrôle , explications !!

image

◾Une subtile overdose de bleu !!

L'application Waymo utilise une nuance bleue soigneusement marquée pour indiquer les endroits où les voitures peuvent légalement s'arrêter.

Nous avons essayé de nombreux concepts et nous en sommes venus à apprécier de plus en plus que les interfaces utilisateur basées sur des cartes deviennent vraiment complexes, car il y a tellement d'autres informations. Nous utilisons Google Maps dans notre application, et certaines de nos premières idées ont été mal comprises comme signifiant un trafic, au lieu de laisser la voiture s'arrêter. Dans l'application, nous utilisons des zones ombrées en bleu pour indiquer où nos voitures peuvent s'arrêter en toute sécurité pour vous transporter. C'est la solution que les premiers utilisateurs ont bien comprise.

image

◾Une voiture à la place du chauffeur , du Mi pour exprimera la joie, magnificence et le plus haut éclat

Au lieu de pilotes humains, des écrans confirment que vous avez trouvé la bonne voiture.
Lorsque vous montez dans l'une de nos voitures, l'une des premières choses que vous remarquerez est l'écran de notre passager. Il est là pour vous assurer que vous êtes dans la bonne voiture et que celle-ci sait où vous allez. La deuxième chose que vous remarquerez peut-être est le son. Nous jouons un morceau relaxant et d'ambiance au fur et à mesure que vous vous installez. Le paysage sonore de Waymo est composé de la clé musicale de mi, qui, selon notre concepteur sonore, représente l'expression de «joie, magnificence et le plus haut éclat»..:* Google est un mélomane de design !!

image

◾Une expérience minimaliste et focus pour mettre en confiance

Sur l'écran du passager, vous verrez la route et les passages pour piétons, avec la trajectoire de la voiture comme une voie verte. Nous avons adopté une approche modérée de la couleur; Lorsque nous avons testé une palette plus saturée, les écrans semblaient être dans votre visage. Le mode nuit est disponible pour assombrir les écrans, mais en règle générale, nous ne voulions pas que les personnes soient accostées avec son et écran lumineux.

Les véhicules à proximité apparaissent comme des formes simples, mais les cyclistes et les piétons ont plus de définition, avec des soulignements bleu et blanc, ce qui montre que notre véhicule peut distinguer les deux. Nous utilisons les points laser réels du lidar de la voiture pour les rendre entièrement au lieu d'utiliser des symboles, car nous avons découvert que nos passagers apprécient de voir les bras et les jambes des piétons et des cyclistes se déplacer en temps réel. Si un piéton est en fauteuil roulant ou avec des béquilles, par exemple, cette information apparaît également à l'écran.

🍃De la couleur, du son , du design pour accompagner les passagers dans cette nouvelle expérience , car pour Google "Les gens ne comprennent pas toujours une nouvelle technologie avant de l'avoir expérimentée. C'est donc à nous de les aider à y parvenir"

— Modifié le 12 juil. 2019 à 20:08:47

Keep Calm and Love Android.

Répondre