{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Максим Петров: заметки с тегом Blazor", "_rss_description": "UI\/UX-дизайнер", "_rss_language": "ru", "_itunes_email": "mail@maximpetrov.ru", "_itunes_categories_xml": "", "_itunes_image": "https:\/\/maximpetrov.ru\/blog\/pictures\/userpic\/userpic-square@2x.jpg?1711785590", "_itunes_explicit": "no", "home_page_url": "https:\/\/maximpetrov.ru\/blog\/tags\/blazor-2\/", "feed_url": "https:\/\/maximpetrov.ru\/blog\/tags\/blazor-2\/json\/", "icon": "https:\/\/maximpetrov.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1711785590", "authors": [ { "name": "Максим Петров", "url": "https:\/\/maximpetrov.ru\/blog\/", "avatar": "https:\/\/maximpetrov.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1711785590" } ], "items": [ { "id": "5", "url": "https:\/\/maximpetrov.ru\/blog\/all\/blazor\/", "title": "Дизайн-система Blazor", "content_html": "

DevExpress Blazor — это набор компонентов пользовательского интерфейса. Активно применяется в приложениях на платформе Blazor и предлагает мощный набор компонентов: таблицы данных, календари, планировщики, выпадающие списки, диалоговые окна и многие другие.<\/p>\n

Задача — переосмыслить и создать дизайн-систему в Figma на основе существующих артефактов и наработок.<\/p>\n

\n\"\"\n
<\/div>\n<\/div>\n

Вводные<\/h2>\n

Blazor продукт развивался и вместе с этим росло количество и сложность компонентов. Раньше дизайнер рисовал отдельный макет под каждую задачу. Не было системного подхода и единых правил. Со временем этот подход начал приносить проблемы:<\/p>\n

    \n
  • Разработка начала сильно обгонять дизайн.<\/li>\n
  • Многие решения по краевым сценариям стали приниматься разработчиками.<\/li>\n
  • Дизайнер тратил много времени на поиск UI и UX багов на поздних этапах.<\/li>\n
  • Итоговая фича могла сильно отличаться от нарисованного макета.<\/li>\n<\/ul>\n

    Отдельной проблемой была сложность каждого компонента:<\/p>\n

      \n
    • Разные темы<\/b>. В разных темах компонент не только меняет цвет, но и начинает обладать другими визуальными свойствами.<\/li>\n
    • Несколько размеров<\/b>. Каждый компонент линейки представлен в трёх размерах.<\/li>\n
    • Дополнительные стили<\/b>. Большой набор стилистических вариантов для компонентов-атомов.<\/li>\n<\/ul>\n

      Например, одна только кнопка состоит из 150 вариантов компонента:<\/p>\n

      \n\"\"\n
      <\/div>\n<\/div>\n

      Было принято решение менять подход — разработать стандарты, правила постановки задач и проектирования.<\/p>\n

      Задачи<\/h2>\n

      Перед новой дизайн-системой поставили следующие задачи:<\/p>\n

        \n
      1. Оптимизация работы команды на этапах дизайна и разработки.<\/b>
        \nРаньше, эти процессы были довольно хаотичны. Дизайнер брал в задачу в работу и изображал примерную реализацию компонента. Многие краевые сценарии не учитывались. Какие-то решения в процессе разработки менялись на ходу. В итоге, разработка затягивалась, фичи резались и итоговый результат сильно отличался от исходной картинки.<\/li>\n
      2. Автоматизация и консистентность<\/b>.
        \nБольшой размер и сложность компонентов сильно затрудняли внесение любых изменений в дизайн. Даже небольшие стилистические изменения в базовом компоненте, типа кнопки, приводили к огромному количеству работы со стороны дизайнера. Так как нужно было учесть разные темы, размеры и стили.<\/li>\n
      3. Консистентность цвета<\/b>.
        \nОтдельно стоит отметить проблему с цветом. Многие цвета компонентов в коде рассчитывались с помощью миксинов. Это приводило ко многим проблемам, в том числе, проблемам с контрастностью.<\/li>\n
      4. Доступность.<\/b>
        \nПользователи продукта стали всё чаще интересоваться, насколько компоненты доступны для разных категорий пользователей. Нужно было сформировать подход, когда дизайнер на этапе проработки компонента учитывает все WCAG 2.2 AA требования.<\/li>\n
      5. Централизация знаний.<\/b>
        \nМногие знания о тех или иных дизайн-решениях нигде не фиксировались. Единственным источником знания были участвующие в работе на фичей члены команды. Нужно было сформировать систему документации.<\/li>\n
      6. UI Kit.<\/b>
        \nВсё чаще стали приходить запросы на UI Kit от пользователей. К тому же, это уже давно было у конкурентов.<\/li>\n<\/ol>\n

        Результат<\/h2>\n

        Компоненты в Figma переработаны с нуля<\/h3>\n

        Дизайн компонентов теперь полностью повторяет функционал кодовой реализации. Учтены все редкие сценарии и краевые состояния. Перед отрисовкой каждого компоненты изучались спецификация+API компонента и все сценарии его использования.<\/p>\n

        Пример реализации компонента Grid<\/b><\/h4>\n

        Компонент Grid — один из самых больших и популярных в линейке Blazor. Представляет собой решение для отображения данных в табличном формате. Включает множество функций для управления данными. Например: фильтрация, группировка, пагинация, сортировка и многое другое.<\/p>\n

        Основную сложность представляет его размер:<\/p>\n

        \n\"\"\n
        <\/div>\n<\/div>\n

        Компонент достаточно гибок в настройке. Так как пользователи используют его по-разному. Всё это отражено в дизайне.<\/p>\n

        Чтобы отрисовать такой компонент в Figma, задачу разбили на этапе:<\/p>\n

          \n
        • Изучить решения конкурентов.<\/li>\n
        • Изучить и собрать файл со скриншотами всех состояний компонента.<\/li>\n
        • Собрать все под-компоненты.<\/li>\n
        • Собрать итоговый компонент с разными сценариями использования.<\/li>\n<\/ul>\n

          Собранный в Figma компонент сильно упростил разработку новых фич для грида. Также, упростило создание прототипов для проработки различных сценариев.<\/p>\n

          \n\"\"\n
          <\/div>\n<\/div>\n

          Отрисованы новые компоненты<\/h3>\n

          Создание новых компонентов включает следующие шаги:<\/p>\n

            \n
          • Обсудить требования с ПМом.<\/li>\n
          • Исследовать решения на рынке.<\/li>\n
          • Утвердить список фич.<\/li>\n
          • Найти грамотный подход по клавиатурной навигации (поддержка A11Y).<\/li>\n
          • Отрисовать компонент и все его составляющие.<\/li>\n
          • Описать компонент в дизайн-токенах.<\/li>\n
          • Проработать сценарии для демо-стендов.<\/li>\n<\/ul>\n

            Пример реализации компонента TreeList<\/b><\/h4>\n

            Компонент TreeList — показывает табличные данные в виде древовидной структуры. Пользователи могут сворачивать и разворачивать данные, как им удобно.<\/p>\n

            При подготовке к работе был произведен ресёрч конкурентов, собран список идей и их примерные способы реализации. На каждом этапе приходили синхронизационные встречи с менеджером продукта, разработчиками и другими заинтересованными лицами:<\/p>\n

            \n\"\"\n
            <\/div>\n<\/div>\n

            Собранный в Figma компонент учитывает все сценарии использовании и состоянии:<\/p>\n

            \n\"\"\n
            <\/div>\n<\/div>\n

            Токенизация<\/b><\/h2>\n

            Каждый компонент представлен в разных темах. Руками отрисовать или исправлять компонент в каждой теме очень дорого и ресурсозатратно.<\/p>\n

            Было принято решение использовать дизайн-токены:<\/p>\n

              \n
            • Чтобы быстро обновлять стили компонента под любую тему.<\/li>\n
            • Гарантировать единообразие решений.<\/li>\n
            • Использовать токены как мостик между дизайном и разработкой.<\/li>\n<\/ul>\n

              Была проведена большая работа над созданием архитектуры и структуры дизайн-токенов:<\/p>\n

              \n\"\"\n
              <\/div>\n<\/div>\n

              Каждый компонент имеет полное покрытие токенами:<\/p>\n

                \n
              • color,<\/li>\n
              • font-weight,<\/li>\n
              • letter-spacing,<\/li>\n
              • line-height,<\/li>\n
              • border-radius,<\/li>\n
              • border-width,<\/li>\n
              • font-size,<\/li>\n
              • text-transform,<\/li>\n
              • opacity,<\/li>\n
              • box-shadow,<\/li>\n
              • size.<\/li>\n<\/ul>\n

                Такой подход позволяет быстро создавать новые темы, просто выставляя новые значения в токенах. Для работы использовался плагин Tokens Studio for Figma. Потому что он позволяет покрыть большое количество типов токенов, в отличии от встроенного Figma Variables.<\/p>\n

                В итоге, любой компонент в Figma легко протестировать с другими стилистическими настройками. А разработчики могут передавать значения токенов из Figma напрямую в свои стили.<\/p>\n

                Документирование<\/b><\/h2>\n

                Дизайн-система описывает себя тремя основными способами:<\/p>\n

                  \n
                • Компоненты и сценарии в Figma.<\/b> Главная точка входа в дизайн-систему.<\/li>\n
                • Дизайн-токены.<\/b> Служат мостом между дизайном и кодом.<\/li>\n
                • Внутренняя документация.<\/b> Содержит договоренности и рекомендации по разным аспектам дизайна: правила наименования, структура токенов, правила отрисовки иконок и так далее. Тут же можно найти результаты ресёрчей относящихся к различным дизайн-задачам.<\/li>\n<\/ul>\n

                  UI Kit<\/b><\/h2>\n

                  Одним из результатов работы над дизайн-системой стал выпуск UI кита в Figma.<\/p>\n

                  \n\"\"\n
                  <\/div>\n<\/div>\n

                  Результаты<\/b><\/h2>\n
                    \n
                  • Получилось собрать крепкий каркас дизайн-системы в Figma.<\/li>\n
                  • Сильно улучшилась коммуникация дизайна и продукт-менеджеров.\n
                      \n
                    • Появились еженедельные созвоны с продукт-менеджерами.<\/li>\n
                    • Работа над задачами стала идти быстрее, на всех этапах.<\/li>\n<\/ul>\n<\/li>\n
                    • Работа между дизайном и разработкой стала эффективнее.\n
                        \n
                      • Макеты стали намного подробнее.<\/li>\n
                      • Дополнительный слой информации передают дизайн-токены.<\/li>\n<\/ul>\n<\/li>\n
                      • Появилась внутренняя документация.<\/li>\n
                      • Пользователи получили UI kit.<\/li>\n<\/ul>\n", "date_published": "2024-03-25T20:30:02+04:00", "date_modified": "2024-03-30T23:41:16+04:00", "tags": [ "Blazor" ], "image": "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg", "_date_published_rfc2822": "Mon, 25 Mar 2024 20:30:02 +0400", "_rss_guid_is_permalink": "false", "_rss_guid": "5", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg" ] } } ], "_e2_version": 4116, "_e2_ua_string": "Aegea 11.2 (v4116e)" }