Adwaita
アドワイタ / 2011– / Style / Langages d'écran
Adwaita est le nom que GNOME donne à son apparence par défaut, et ses directives posent qu'un même jeu de composants doit tenir en version claire, en version sombre et en version à contraste élevé. Une barre d'en-tête traverse le bord supérieur de la fenêtre, et les boutons qui s'y posent n'ont ni fond ni bordure. Les icônes sont unifiées en symboles monochromes de 16x16px.
En un coup d’œil
Signes visuels
- Une seule barre d'en-tête traversant le bord supérieur de la fenêtre, organisée sur trois points d'alignement, le titre de la fenêtre occupant le centre
- Les boutons de la barre d'en-tête n'ont ni fond ni bordure, seuls le symbole et le mot flottent sur la surface
- Des icônes symboliques monochromes dessinées en 16x16px, aux traits principaux de 2px et aux formes vues de face, sans perspective
- Une palette publiée offrant cinq paliers par teinte, dont le Blue 3 en #3584e4
Usages idéaux
- Construire une application pour bureau Linux qui doit garder la même ossature dans le réglage clair comme dans le réglage sombre
- Ajouter un composant maison en s'appuyant sur les classes de style et les variables de couleur existantes plutôt qu'en écrivant les valeurs en dur
Utiliser ce style
Appliquez le brief concis au projet ou transmettez la spécification structurée à un outil d’IA.
Guide détaillé et sourcesRègles de production, œuvres de référence, comparaisons, recherche et citations
Entrée du dictionnaire
- Typographie
- Identifiez chaque contrôle par une icône ou par un mot, jamais par les deux. Les exceptions sont les lignes du panneau latéral et les sélecteurs de vue.
- Composition
- Placez une barre d'en-tête en haut, les actions principales à gauche, le titre au centre, les menus à droite. Laissez toujours une zone libre permettant de la saisir pour déplacer la fenêtre. Groupez les boutons par l'espacement plutôt qu'en les accolant.
- Matière
- Prenez la couleur dans la palette publiée et conservez-la sous forme de variables qui basculent d'elles-mêmes entre version claire, sombre et à contraste élevé. Dessinez les icônes en SVG monochrome et appliquez la couleur ensuite.
- Précaution
- Écrire les valeurs de couleur en dur ne casse rien tant que personne ne bascule en version sombre ou à contraste élevé, c'est-à-dire exactement l'état que l'auteur ne regarde jamais.
- Pour approfondir
- the list of libadwaita style classes and the CSS variables they map to / why the GNOME palette carries five steps per hue, and how each step is used / the consequence of a design in which the contents of the header bar swap as the displayed content changes
Entrées liées
- Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)Effets partagés : Trust.Comparer Adwaita et Flat Design / Vector Minimalism
- Material Design (マテリアルデザイン)Effets partagés : Trust / Technique.Comparer Adwaita et Material Design
Souvent confondu avec
Plus de Langages d'écran
Poursuivez avec des styles de Langages d'écran, classés par effets communs.
- GOV.UK Design System (GOV.UK デザインシステム)Effets partagés : Trust / Calm / Technique.
- GitHub Primer (GitHub Primer)Effets partagés : Technique / Trust / Calm.
- Adobe Spectrum (Adobe Spectrum)Effets partagés : Technique / Trust / Calm.
Voir toutes les entrées Langages d'écran
Citer cette entrée
Le dictionnaire est fait pour être lié. Prenez la forme qui convient là où vous écrivez.
- Link
- https://indexstyle.org/fr/styles/adwaita
- Markdown
- [Adwaita — IndexStyle](https://indexstyle.org/fr/styles/adwaita)
- HTML
- <a href="https://indexstyle.org/fr/styles/adwaita">Adwaita — IndexStyle</a>