Adwaita
アドワイタ / 2011– / Estilo / Lenguajes de pantalla
Adwaita es el nombre que GNOME da a su aspecto predeterminado, y sus directrices establecen que un mismo juego de componentes debe sostener la versión clara, la oscura y la de alto contraste. Una barra de cabecera cruza el borde superior de la ventana, y los botones que van sobre ella no llevan ni fondo ni borde. Los iconos se unifican como símbolos monocromos de 16x16px.
De un vistazo
Rasgos visuales
- Una sola barra de cabecera cruzando el borde superior de la ventana, dispuesta sobre tres puntos de alineación, con el título de la ventana en el centro
- Los botones de la barra de cabecera no tienen ni fondo ni borde, así que sobre la superficie solo flotan el símbolo y la palabra
- Iconos simbólicos monocromos dibujados a 16x16px, con trazos principales de 2px y formas frontales sin perspectiva
- Una paleta publicada con cinco escalones por cada matiz, entre ellos el Blue 3 en #3584e4
Usos idóneos
- Construir una aplicación para escritorio Linux que deba mantener la misma estructura tanto en el ajuste claro como en el oscuro
- Añadir un componente propio apoyándose en las clases de estilo y las variables de color existentes en lugar de escribir los valores a mano
Usar este estilo
Lleva el resumen al proyecto o entrega la especificación estructurada a una herramienta de IA.
Guía detallada y fuentesReglas de producción, obras de referencia, comparaciones, investigación y citas
Entrada del diccionario
- Tipografía
- Identifica cada control con un icono o con una palabra, nunca con los dos. Las excepciones son las filas de la barra lateral y los conmutadores de vista.
- Composición
- Pon una barra de cabecera arriba, con las acciones principales a la izquierda, el título en el centro y los menús a la derecha. Deja siempre superficie libre para poder arrastrarla. Agrupa los botones con espaciado en lugar de encadenarlos.
- Material
- Toma el color de la paleta publicada y guárdalo como variables que cambian solas entre la versión clara, la oscura y la de alto contraste. Dibuja los iconos como SVG monocromo y aplícales el color después.
- Precaución
- Escribir los valores de color a mano solo falla cuando alguien cambia a la versión oscura o a la de alto contraste, que es justo el estado que su autor nunca mira.
- Para profundizar
- 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
Entradas relacionadas
- Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)Efectos compartidos: Trust.Comparar Adwaita y Flat Design / Vector Minimalism
- Material Design (マテリアルデザイン)Efectos compartidos: Trust / Technique.Comparar Adwaita y Material Design
Se confunde a menudo con
Más de Lenguajes de pantalla
Continúa con estilos de Lenguajes de pantalla, priorizados por sus efectos compartidos.
- GOV.UK Design System (GOV.UK デザインシステム)Efectos compartidos: Trust / Calm / Technique.
- GitHub Primer (GitHub Primer)Efectos compartidos: Technique / Trust / Calm.
- Adobe Spectrum (Adobe Spectrum)Efectos compartidos: Technique / Trust / Calm.
Ver todas las entradas de Lenguajes de pantalla
Citar esta entrada
El diccionario existe para que se enlace. Toma la forma que encaje donde estés escribiendo.
- Link
- https://indexstyle.org/es/styles/adwaita
- Markdown
- [Adwaita — IndexStyle](https://indexstyle.org/es/styles/adwaita)
- HTML
- <a href="https://indexstyle.org/es/styles/adwaita">Adwaita — IndexStyle</a>