У вас BDUI: как с этим жить // Вячеслав Соколов, дизайнер цифровых продуктов в Альфа-Банке

• Слава Соколов, дизайнер в команде дизайн-системы Альфа, рассказывает о технологии BUI.  

• BUI означает "бэк-энд пользовательский интерфейс", управление интерфейсом с бэк-энда.  

• Технология актуальна для крупных российских и зарубежных продуктов, таких как Яндекс.  

• BUI позволяет гибко управлять экранами после релиза.  

• Для дизайнеров это означает новый набор правил и ограничений.  

• Можно выучить ограничения наизусть или понять их устройство.  

• Рассказ будет построен следующим образом: введение в BUI, практические рекомендации, развитие в Альфе, ссылка на статью.  

• В статье подробно разбираются вопросы, важные для продуктовых дизайнеров при работе с BUI.  

• В классическом подходе экраны заранее сверстаны и приклеены к экрану.  

• В BUI экран представляет собой магический слот, который может отрисовать любой контент с сервера.  

• В BUI диалог между фронтом и бэкендом происходит иначе: бэкенд подробно описывает, что нужно нарисовать на экране.  

• Фронт получает данные с сервера, включая состав компонентов, их расположение и параметры.  

• Эти данные приходят в виде JSON-файла, называемого контрактом экрана.  

• Дизайн-система использует контракты компонентов для сборки экрана.  

• В дизайн-системе есть репозиторий с контрактами компонентов.  

• Контракты компонентов содержат список параметров и возможных значений.  

• Экран сопоставляет параметры из контракта с компонентами в дизайн-системе.  

• BUI позволяет гибко изменять структуру экрана после релиза.  

• Дизайнеры ограничены параметрами компонентов, которые приходят в контракте.  

• В отличие от классического подхода, BUI требует доступа к контрактам компонентов.  

• Получите доступ к контрактам компонентов и разберите их по частям.  

• Выясните базовые ограничения и особенности реализации в вашем продукте.  

• Обсудите сложные композиции с командой разработки и дизайн-системой.  

• Изучите язык, на котором реализован ваш продукт, вероятно, это будет JavaScript.  

• Спросите разработчика о стоимости и времени доработки фреймворка.  

• Не спешите ругать разработчика за несоответствия на этапе дизайн-ревью; обсудите с ним причины и возможные решения.  

• Попросите разработчиков реализовать фронтовые витрины компонентов.  

• Фиксируйте свои инсайты и особенности валидации полей и экранов.  

• Это поможет сэкономить время и вернуться к этой информации в будущем.  

• В Альфа-Банке есть три фреймворка для разных задач: виджетные экраны, сценарии и гибкие информационные страницы.  

• Дизайнеры разбираются в особенностях каждого фреймворка и умеют с ними работать.  

• В 2022 году произошел всплеск интереса к технологии из-за удаления приложения и появления мобильной версии интернет-банка.  

• Дизайнеры стали кроссплатформенными, что усложнило их работу.  

• Команда дизайн-системы оказывает информационную поддержку и проводит консультации.  

• Создаются новые инструменты для снижения порога входа и автоматизации рутинных задач.  

• Разрабатываются конструкторы для сборки экранов, которые знают особенности фреймворка.  

• Конструкторы позволяют использовать только поддерживаемые компоненты и настраивать их по контракту.  

• В будущем конструкторы станут основным инструментом для работы дизайнеров.  

• Технология дает ощутимые преимущества бизнесу и будет развиваться.  

• Дизайнерам важно понимать ограничения и работать с контрактами компонентов.  

• Задавайте вопросы своевременно, чтобы избежать проблем на этапе разработки.  

• Вопросы о передаче данных между экранами и роли мобильных разработчиков.  

• Спикер отвечает на вопросы, подчеркивая важность своевременного взаимодействия и поддержки команды.  

• Количество разработчиков мобильных устройств увеличивается.  

• Количество задач для разработчиков не снижается.  

• Разработчики не видят большой проблемы в наличии техдолга.  

• Существует отдельный фреймворк для поддержки многошаговых сценариев.  

• Фреймворк имеет набор правил для построения экранов.  

• Разработчики учитывают эти правила при работе.  

• Версионирование компонентов учитывается в контрактах.  

• Дизайнеры могут видеть, поддерживается ли компонент в текущей версии.  

• Для старых версий приложений используется альфа-версия.  

• Компоненты реализуются на фронте один раз и дорабатываются при необходимости.  

• Единый контракт позволяет разработчикам экономить ресурсы.  

• Это экономически оправдано.  

• Важно обсудить новые компоненты с командой разработки и аналитиками.  

• Ознакомиться с доступными библиотеками компонентов.  

• Продакт должен активно взаимодействовать с аналитиками и разработчиками.