Sistema de diseño Gravity UI: cómo construir tu propia interfaz fácilmente

Hola a todos, soy Alexey Sizikov, jefe del área de User Experience en Yandex Cloud. En este artículo quiero compartir una noticia: hemos publicado en open source nuestro sistema de diseño y biblioteca de componentes Gravity UI.

Con la biblioteca de componentes Gravity UI se pueden crear interfaces modernas. Incluye:

• un conjunto de componentes base de React;
• una biblioteca tipo constructor para landing pages;
• guías detalladas sobre el uso de los componentes;
• una biblioteca en Figma;
• un set de iconos listos para usar, con casi 600 variantes;
• ChartKit — un paquete para visualización de datos;
• Yagr — renderizado de gráficos de alto rendimiento basado en uPlot;
• I18n — un paquete para la localización de la interfaz
• y además más de 25 bibliotecas útiles.

Bajo el corte: por qué hicimos Gravity UI, cómo lo usamos, cuáles son las particularidades y ventajas de nuestro enfoque y cómo planeamos desarrollarlo дальше. Además: cómo configurar distintos esquemas de color en tus proyectos y por qué tenemos cuatro temas en lugar de los dos estándar.

Cuáles son las particularidades de Gravity UI

Basado en experiencia real

Uno de los rasgos distintivos de nuestro sistema de diseño es que evoluciona en función de las necesidades de nuestros usuarios, la mayoría de los cuales son desarrolladores. Además, nuestros diseñadores están estrechamente vinculados a los productos en los que trabajan. Cada diseñador tiene varios servicios con sus propios escenarios de uso. Una vez que una solución se prueba en sus servicios, el diseñador de producto la transfiere a otros servicios para убедиться de que funciona y ayuda a los desarrolladores.

Por ejemplo, el componente de navegación lateral inicialmente evolucionó solo con el logotipo y los elementos del menú. Más tarde, por comodidad, añadimos un elemento con todos los servicios y la búsqueda. Y cuando apareció un servicio en el que era necesario crear una nueva entidad directamente en el menú lateral, añadimos un botón отдельный con un signo más. Después aparecieron secciones del menú con separadores para servicios complejos con muchos elementos de menú, así como el botón “Otros elementos”.

Variabilidad flexible

Muchos componentes de Gravity UI se pueden configurar teniendo en cuenta distintos escenarios. Por ejemplo, el componente pagination tiene varias variantes de visualización: con el número total de páginas, etiquetas completas en los botones, posibilidad de ir a una página конкретная y cambiar el número de resultados por página; esta opción está pensada para un gran número de páginas. Si en tu caso hay pocos resultados, puedes usar un modo compacto o incluso ocultar los números y mostrar solo las flechas.

Amplio ámbito de aplicación

Con Gravity UI puedes crear tanto una interfaz simple de administración como un dashboard complejo con gráficos. Aquí tienes algunos ejemplos de lo que se puede construir con nuestro sistema de diseño:

• landing pages,
• paneles de administración,
• dashboards,
• gráficos,
• CRM,
• un servicio analítico.

Por ejemplo, nuestros colegas hicieron este dashboard:

También se puede hacer una landing simple. Por ejemplo, el sitio con nuestros proyectos open source está hecho con componentes de Gravity UI.

Más de 150 contribuyentes

Nuestro ecosistema se desarrolla y mejora continuamente. Además de los comentarios de nuestra comunidad de desarrolladores, recibimos propuestas de más de 100 servicios que ya utilizan nuestro sistema de diseño.

Pongo un ejemplo. Al principio teníamos dos temas: oscuro y claro. Pero empezamos a recibir feedback de equipos que transmiten la interfaz a televisores para ver gráficos o durante el standup. La cuestión es que en un televisor la interfaz se ve mal. Un problema parecido también se da en usuarios con monitores antiguos o de baja calidad.

Como resultado, desarrollamos un contraste elevado para cada tema. Aumenta el brillo de los tonos oscuros y claros, así como de los colores semánticos. Esto se configura mediante estilos CSS y se controla en la configuración del usuario.

Por cierto, ahora tú también puedes aportar. Para ello, envía PR a GitHub o deja comentarios en Figma.

Cómo trabajar con Gravity UI

Ajustar la interfaz a tu marca

A continuación contaré qué más se puede hacer con Gravity UI. Empezaré por la posibilidad de adaptar el sistema de diseño a tu marca. Por ejemplo, cuando YDB salió a open source, se nos planteó la tarea de conservar un sistema de diseño unificado, pero al mismo tiempo hacerlo distintivo para diferentes marcas. Para ello creamos un grupo separado de variables CSS. Incluye colores de marca, tipografías y radios de redondeo. En el código se ve como un pequeño bloque:

.g-root {
    --g-font-family-sans: 'Inter', sans-serif;

    --g-text-header-font-weight: 600;
    --g-text-subheader-font-weight: 600;
    --g-text-display-font-weight: 600;
    --g-text-accent-font-weight: 600;

    --g-color-base-brand: rgb(117, 155, 255);
    --g-color-base-brand-hover: rgb(99, 143, 255);
    --g-color-base-selection: rgba(82, 130, 255, 0.05);
    --g-color-base-selection-hover: rgba(82, 130, 255, 0.1);
    --g-color-line-brand: rgb(117, 155, 255);
    --g-color-text-brand: rgb(117, 155, 255);
    --g-color-text-brand-contrast: rgb(255, 255 ,255);
    --g-color-text-link: rgb(117, 155, 255);
    --g-color-text-link-hover: rgb(82, 130, 255);

    --g-border-radius-xs: 3px;
    --g-border-radius-s: 5px;
    --g-border-radius-m: 6px;
    --g-border-radius-l: 8px;
    --g-border-radius-xl: 10px;
    --g-border-radius-2xl: 16px;
}

En este grupo se puede cambiar la fuente, el color de los botones de акцент, el redondeo, etc. Así se puede usar un mismo sistema de diseño para distintas marcas, manteniendo al mismo tiempo el estilo de marca. Si esta opción no te encaja, puedes crear tu propio esquema de color. Hay una instrucción detallada en la documentación.

Cabe señalar que cambiar los colores de marca no afectará a la interfaz principal. Esto es especialmente importante en aquellos elementos donde se usan colores semánticos: por ejemplo, el rojo seguirá significando error y el verde, éxito.

Componentes en Figma

Para facilitar el trabajo, nuestro equipo de diseñadores preparó y subió a Figma todos los estados de los componentes. Si lo deseas, puedes hacer una copia de la biblioteca e intentar montar la interfaz directamente en la herramienta.

Con la última actualización, en la biblioteca ya no se duplican los cuatro temas. Por defecto trabajas en el tema claro, pero en la sección Layer puedes cambiar cualquier elemento o toda la página a otro tema.

Todos los elementos de la biblioteca están представленные en la página Overview. Aquí puedes encontrar el componente que necesitas y pasar a la página con todos los estados del elemento. Además, cada componente tiene un ejemplo de uso.

Casi 600 iconos

Los iconos son uno de los elementos obligatorios del diseño y la usabilidad. Ayudan a organizar y estructurar el contenido, colocar акценты y mejorar la comprensión de la información. A primera vista, hacer un pack de iconos no parece tan difícil. Pero nos enfrentamos a un reto al crear iconos para metáforas complejas, como máquinas virtuales, bases de datos y distintos tipos de gráficos.

Para hacer la búsqueda de iconos más cómoda, utilizamos un sistema de naming especial. Ahora el mismo icono se puede encontrar introduciendo distintos nombres. Por ejemplo, para encontrar un icono con una flecha, puedes introducir cualquiera de estas palabras: arrow, enter, move, login.

Guías

Como ya escribí arriba, nuestro objetivo era que los desarrolladores pudieran crear fácilmente interfaces típicas usando las descripciones de los componentes en nuestras guías. Queríamos hacer este proceso simple, sin tener que acudir a un diseñador por cada elemento. A día de hoy ya tenemos cinco ejemplos de servicios internos que fueron creados por completo por desarrolladores usando únicamente las guías.

Por supuesto, esta tarea no se puede resolver solo con manos de desarrollador: de una forma u otra hay escenarios complejos que requieren la atención de un especialista UX/UI. Aun así, pudimos quitar una parte significativa de carga a nuestros diseñadores.

En las guías, el equipo de diseño describió los componentes y dio recomendaciones sobre su uso, mostrando ejemplos del enfoque correcto e incorrecto. Puedes consultarlas en esta página.

Cómo usar Gravity UI

Todo lo que necesitas hacer es ejecutar un comando en la consola:

git clone git@github.com:gravity-ui/uikit-example-cra.git my-project && cd my-project
npm i 
npm run start

Hay una guía más detallada en la página principal del repositorio en GitHub.

Puedes ver todos los componentes de Gravity UI en UIkit, y conectar la biblioteca que necesites para tus objetivos en Libraries.

Para cerrar, quiero volver a destacar: Gravity UI es un sistema de diseño que ha crecido a partir de la experiencia real de nuestros usuarios, las necesidades de los desarrolladores y la pericia de los diseñadores. Esto le permite ser práctico y eficaz. Y ahora cualquiera puede usarlo gratis.

Queremos hacer el proyecto aún mejor, teniendo en cuenta las necesidades y los comentarios de nuestros usuarios. Pásate por nuestro GitHub, envía tus PR, escribe comentarios en Figma y comparte ejemplos de uso.