Чем отличается дизайн для SDUI (он же BDUI)?

продолжение Бизнес-логику мы уже рассмотрели — теперь хочется перейти к другим двум ключевым аспектам SDUI: вёрстке и автоматизации. 🌟 Верстка Здесь главное различие — гранулярность системы. То есть, насколько «мелко» можно управлять интерфейсом через контракт: какие сущности доступны и на каком уровне атомарности. Возможны разные варианты: — Виджетная архитектура с хранением вёрстки на клиенте — Обращение к элементам дизайн-системы, также хранимым на клиенте — Гибкий отрисовщик, построенный на примитивах, с распределённым хранением вёрстки (часть элементов на клиенте, часть, например компоновка и параметры декоратора, на сервере). В первых двух подходах на клиенте хранится конечный (или условно конечный) набор компонентов. А в случае с гибкой системой — платформа позволяет собирать виджеты и даже атомы (например, кнопку) из базовых примитивов. Это напрямую влияет на архитектуру и конфигурацию дизайн-системы. При виджетном подходе сервер может управлять только выбором виджетов, их параметрами и расположением. И для продуктового дизайнера приоритетом становится поиск безрелизного решения: как «выкрутиться» с текущим набором компонентов. Потому что это быстрее и дешевле. Только если нужного виджета или параметра нет, команда решается на доработку — а это уже означает выпуск новой версии и релиз в стор. В более гранулярных системах возможностей для безрелизных изменений больше, но и здесь есть ограничения: не всё можно сделать без обновления клиента. При этом именно такие фичи — с условием «без повышения версии» — часто оказываются самыми приоритетными. Кроме того, в системах любой гранулярности обычно используется многоуровневая система контейнеров со слотами, что тоже влияет на логику проектирования. А ещё, помимо самой вёрстки, хочется сказать пару слов о верстальщике. Эта роль при переходе на SDUI меняется радикально. Теперь макеты у дизайнера будет принимать бэкендер — потому что бизнес-логика теперь на сервере, да и верстка при некоторых подходах тоже. А может быть и другой сценарий: часть задач верстальщика уходит к дизайнеру, особенно если в системе уже есть автоматизация (о ней — чуть ниже). 🌟 Автоматизация Здесь всё проще. Автоматизация бывает и вне SDUI, но именно переход к этой архитектуре обычно стимулирует её активное развитие. От автоматической сборки виджетов и конвертации макетов в вёрстку — до внутренних инструментов, вроде линтера для дизайнеров, который проверяет макет на соответствие правилам. Работа с автоматикой может поначалу усложнить подготовку макетов — но в итоге снимает рутину, снижает количество ошибок и освобождает время для творческих задач. - - #sdui #bdui #верстка #автоматизация 🛫 Канал: UXFLOW • Сергей Мухин Сайт: uxflow.ru
Изображение поста

Чем отличается дизайн для SDUI (он же BDUI)?

Прежде чем SDUI снова ворвётся в мою работу и в контент на канале, хочется разобраться — чем вообще отличается процесс и технология дизайна в таком подходе. Для начала важно сделать шаг назад и понять: на что именно влияет технология, и какие вообще бывают варианты реализации SDUI. Ключевые области, которых касается внедрение безрелизности, — это бизнес-логика, вёрстка и автоматизация. 🌟Начнём с бизнес-логики. Бизнес-логика в данном случае — это то, что управляет реакцией приложения на действия пользователя. "Если пользователь нажимает на кнопку — показывается окно выбора..." — вот подобные штуки и есть бизнес-логика. Она может быть реализована по-разному. Чаще всего встречаются три варианта (которые могут комбинироваться): —Тонкий клиент. Вся бизнес-логика выполняется на сервере, а клиент получает только результат — изменения в контенте и вёрстке. — Толстый клиент с управлением через actions. Здесь логика описывается в виде процедур или функций, часто — довольно атомарных и гибко настраиваемых. Контракт (обычно это JSON с вёрсткой) уже содержит вызовы этих функций. Например, в случае перехода достаточно указать в контракте саму функцию и её параметры (тип перехода, линк и т. д.). — Толстый клиент с загружаемыми скриптами. В этом варианте бизнес-логика исполняется на клиенте, но поставляется с сервера в виде загружаемых скриптов — чаще всего на JS. Как это влияет на работу дизайнера? Во-первых — это влияет на мышление. Реализация через actions требует другого подхода к проектированию: всё начинает дробиться на действия, функции, состояния. Анимации переходов становятся частью логики, что подталкивает к систематизации, стандартизации и визуальному единообразию. Такой способ мышления полезен не только в контексте SDUI — он помогает пересматривать сущности, улучшать сценарии и думать о интерфейсе как о системе. Во-вторых — это вопрос планирования. В модели тонкого клиента отрисовка результата бизнес-логики происходит на фронте, на основе правил и механизмов дизайн-системы или дизайн-платформы. Обновление этих правил требует обновления самого клиента — то есть выкладки новой версии в стор. Поэтому так важно сразу продумать архитектуру, заложить гибкость в ключевые решения и сделать инструмент, который покрывает основные сценарии — без постоянного обновления сборки. - - #sdui #bdui #бизнеслогика 🛫 Канал: UXFLOW • Сергей Мухин Сайт: uxflow.ru
Изображение поста

Основы BDUI для продуктовых дизайнеров. Шпаргалка

BDUI - новый подход в продуктовой разработке, популярный среди крупных компаний. Узнай, как внедрить и развивать этот фреймворк от ведущих разработчиков на конференциях. Он уже применяется в таких гигантах, как AirBnb, Lyft, Alibaba Читать на DSGNERS! | #статьи
Изображение поста

Основы BDUI для продуктовых дизайнеров. Шпаргалка

BDUI - новый подход в продуктовой разработке, популярный среди крупных компаний. Узнай, как внедрить и развивать этот фреймворк от ведущих разработчиков на конференциях. Он уже применяется в таких гигантах, как AirBnb, Lyft, Alibaba Читать на DSGNERS! | #статьи
Изображение поста
Основы BDUI для продуктовых дизайнеров. Шпаргалка
BDUI - новый подход в продуктовой разработке, популярный среди крупных компаний. Узнай, как внедрить и развивать этот фреймворк от ведущих разработчиков на конференциях. Он уже применяется в таких гигантах, как AirBnb, Lyft, Alibaba Читать на DSGNERS! | #статьи
Изображение поста
Основы BDUI для продуктовых дизайнеров. Шпаргалка
BDUI (Backend Driven User Interface) — это подход к продуктовой разработке, который набирает популярность в больших компаниях и командах. Читать на DSGNERS! | #статьи
Изображение поста