Обновление визуального интерфейса Grafana

Источник: Grafana Labs•

Обновление визуального интерфейса Grafana

Крупнейшее визуальное обновление Grafana со времен версии 7 теперь доступно в общедоступной предварительной версии. Прошло немало времени с тех пор, как пользовательский интерфейс Grafana подвергался серьезному редизайну. Сегодня мы рады представить вам первый полноценный взгляд на наше…

Крупнейшее визуальное обновление Grafana со времен версии 7 теперь доступно в общедоступной предварительной версии

Прошло немало времени с тех пор, как пользовательский интерфейс Grafana подвергался серьезному редизайну. Сегодня мы рады представить вам первый полноценный взгляд на наше визуальное обновление: новую цветовую систему, типографику и тему, которые вскоре появятся в открытом доступе. Это крупнейшая работа по визуальной модернизации, которую мы предпринимали со времен Grafana v7.

Что не менее важно, мы хотим подчеркнуть, что это лишь начало нашей визуальной трансформации. То, что появляется сейчас, — это первый этап гораздо более масштабной работы по приведению внешнего вида Grafana в соответствие с тем, куда движется продукт и вся индустрия.

Зачем мы это делаем

За последние несколько лет мы уделили огромное внимание расширению функциональности и технических возможностей Grafana. Следуя нашей философии Big Tent («Широкий круг»), мы предоставили организациям любого размера возможность использовать собственные стеки данных и выпустили решения для множества технических сценариев использования. В то же время такой быстрый подход к разработке множества решений со временем привел к несогласованности в нашем стиле, поведении и общем пользовательском опыте. С недавним появлением возможностей на базе ИИ с использованием Grafana Assistant и Assistant Workspace мы обнаружили возможность не только переосмыслить восприятие этих функций, но и полностью обновить стиль нашей платформы. В течение следующих циклов выпусков мы стремимся повысить согласованность, предложить современный внешний вид и внедрить шаблоны взаимодействия, которые покажутся более привычными и интуитивными, сохраняя при этом всю функциональность и возможности, которые вы полюбили и на которые полагаетесь.

Что меняется

В этот релиз добавлена новая тема, созданная на основе обновленного набора принципов проектирования, цветов и элементов интерфейса.

Мы полностью пересмотрели все цвета нашей темы, создав набор более глубоких и характерных оттенков серого, а также наш фирменный оранжевый цвет Grafana. Мы увеличили количество оттенков, чтобы обеспечить большую гибкость и творческий диапазон. Оранжевый остается цветом нашего бренда, но мы решили использовать его более аккуратно и осознанно, в то время как основные кнопки действий на любой странице будут сплошными белыми (для темной темы) и белыми (для светлой темы).

Мы увеличили радиус наших границ для достижения более мягкого и современного вида. Благодаря нашим новым палитрам мы можем создать большее ощущение глубины и лучше отделить панель инструментов и панель навигации от остального содержимого страницы. Новые тонкие границы на карточках, панелях и других плавающих элементах, таких как выдвижные панели, усиливают ощущение многослойности и иерархии информации.

Мы пересмотрели наши самые важные компоненты и полностью переработали их. Мы не только скорректировали их размеры, чтобы они стали более пропорциональными и согласованными, но и переосмыслили их внешний вид. Такие элементы, как теги, которые поддерживались несколькими различными компонентами, перерабатываются в единый согласованный компонент с общими шаблонами поведения и визуальными стилями.

Наш прежний набор текстовых стилей не в полной мере использовал различные начертания шрифтов и вынуждал нас основывать информационную иерархию исключительно на размере шрифта. Мы внедрили сочетание начертаний и размеров, которые следуют более гармоничной шкале и лучше поддерживают информационную архитектуру любой страницы.

Что пока не меняется

Это визуальное обновление, а не редизайн. Мы намеренно сузили рамки этого этапа:

  • Никаких изменений в API компонентов, свойствах или шаблонах взаимодействия.
  • Никаких изменений в сценариях интерфейса (UX) или навигации.
  • Никаких критических изменений (breaking changes) для плагинов. Если вы разработали плагин и он использует стандартные компоненты Grafana и токены темы, он автоматически унаследует новый внешний вид. Если вы жестко прописали цвета или стили в коде, миграция зависит от вашего графика, а не от нашего.

Проще говоря, всё по-прежнему работает так же, как и всегда. Просто выглядит гораздо лучше.

Мы также тщательно подходим к разработке и никому не навязываем изменения. Вы можете легко вернуться к предыдущему дизайну, если новый вам пока не подходит, и мы добавляем форму обратной связи, чтобы проблемы и мнения могли поступать напрямую к нам.

Куда это движется

Это только начало работ по модернизации и повышению согласованности всей платформы Grafana. В ближайшие месяцы ожидайте:

  • Продолжение поддержки авторов плагинов при переходе, включая руководства по миграции.
  • Изучение возможности создания более богатого набора иконок.
  • Обновленные визуализации, использующие преимущества новых цветовых палитр.
  • Дополнительные визуальные и структурные улучшения на основе этого фундамента, а также консолидация похожих компонентов интерфейса.

Попробуйте

Чтобы протестировать новый пользовательский интерфейс, включите переключатель функций grafana.visualDesignRefresh.

О чём эта статья

Ещё в разделе «Разработка ПО»

Все →

Ещё от Grafana Labs