Хочется разобраться — чем вообще отличается процесс и технология дизайна в таком подходе.
Для начала важно сделать шаг назад и понять: на что именно влияет технология, и какие вообще бывают варианты реализации SDUI.
Ключевые области, которых касается внедрение безрелизности, — это бизнес-логика, вёрстка и автоматизация.
Начнём с бизнес-логики.
Бизнес-логика в данном случае — это то, что управляет реакцией приложения на действия пользователя.
"Если пользователь нажимает на кнопку — показывается окно выбора..." — вот подобные штуки и есть бизнес-логика.
Она может быть реализована по-разному. Чаще всего встречаются три варианта (которые могут комбинироваться):
—Тонкий клиент. Вся бизнес-логика выполняется на сервере, а клиент получает только результат — изменения в контенте и вёрстке.
— Толстый клиент с управлением через actions. Здесь логика описывается в виде процедур или функций, часто — довольно атомарных и гибко настраиваемых. Контракт (обычно это JSON с вёрсткой) уже содержит вызовы этих функций. Например, в случае перехода достаточно указать в контракте саму функцию и её параметры (тип перехода, линк и т. д.).
— Толстый клиент с загружаемыми скриптами. В этом варианте бизнес-логика исполняется на клиенте, но поставляется с сервера в виде загружаемых скриптов — чаще всего на JS.
Как это влияет на работу дизайнера?
Во-первых — это влияет на мышление. Реализация через actions требует другого подхода к проектированию:
всё начинает дробиться на действия, функции, состояния. Анимации переходов становятся частью логики, что подталкивает к систематизации, стандартизации и визуальному единообразию.
Такой способ мышления полезен не только в контексте SDUI — он помогает пересматривать сущности, улучшать сценарии и думать о интерфейсе как о системе.
Во-вторых — это вопрос планирования. В модели тонкого клиента отрисовка результата бизнес-логики происходит на фронте, на основе правил и механизмов дизайн-системы или дизайн-платформы.
Обновление этих правил требует обновления самого клиента — то есть выкладки новой версии в стор. Поэтому так важно сразу продумать архитектуру, заложить гибкость в ключевые решения и сделать инструмент, который покрывает основные сценарии — без постоянного обновления сборки.
Верстка
Здесь главное различие — гранулярность системы. То есть, насколько «мелко» можно управлять интерфейсом через контракт: какие сущности доступны и на каком уровне атомарности.
Возможны разные варианты:
— Виджетная архитектура с хранением вёрстки на клиенте
— Обращение к элементам дизайн-системы, также хранимым на клиенте
— Гибкий отрисовщик, построенный на примитивах, с распределённым хранением вёрстки (часть элементов на клиенте, часть, например компоновка и параметры декоратора, на сервере).
В первых двух подходах на клиенте хранится конечный (или условно конечный) набор компонентов. А в случае с гибкой системой — платформа позволяет собирать виджеты и даже атомы (например, кнопку) из базовых примитивов.
Это напрямую влияет на архитектуру и конфигурацию дизайн-системы.
При виджетном подходе сервер может управлять только выбором виджетов, их параметрами и расположением. И для продуктового дизайнера приоритетом становится поиск безрелизного решения: как «выкрутиться» с текущим набором компонентов. Потому что это быстрее и дешевле. Только если нужного виджета или параметра нет, команда решается на доработку — а это уже означает выпуск новой версии и релиз в стор.
В более гранулярных системах возможностей для безрелизных изменений больше, но и здесь есть ограничения: не всё можно сделать без обновления клиента. При этом именно такие фичи — с условием «без повышения версии» — часто оказываются самыми приоритетными.
Кроме того, в системах любой гранулярности обычно используется многоуровневая система контейнеров со слотами, что тоже влияет на логику проектирования.
А ещё, помимо самой вёрстки, хочется сказать пару слов о верстальщике. Эта роль при переходе на SDUI меняется радикально.
Теперь макеты у дизайнера будет принимать бэкендер — потому что бизнес-логика теперь на сервере, да и верстка при некоторых подходах тоже.
А может быть и другой сценарий: часть задач верстальщика уходит к дизайнеру, особенно если в системе уже есть автоматизация (о ней — чуть ниже).
Автоматизация
Здесь всё проще. Автоматизация бывает и вне SDUI, но именно переход к этой архитектуре обычно стимулирует её активное развитие.
От автоматической сборки виджетов и конвертации макетов в вёрстку — до внутренних инструментов, вроде линтера для дизайнеров, который проверяет макет на соответствие правилам.
Работа с автоматикой может поначалу усложнить подготовку макетов — но в итоге снимает рутину, снижает количество ошибок и освобождает время для творческих задач.
Для начала важно сделать шаг назад и понять: на что именно влияет технология, и какие вообще бывают варианты реализации SDUI.
Ключевые области, которых касается внедрение безрелизности, — это бизнес-логика, вёрстка и автоматизация.
Начнём с бизнес-логики.
Бизнес-логика в данном случае — это то, что управляет реакцией приложения на действия пользователя.
"Если пользователь нажимает на кнопку — показывается окно выбора..." — вот подобные штуки и есть бизнес-логика.
Она может быть реализована по-разному. Чаще всего встречаются три варианта (которые могут комбинироваться):
—Тонкий клиент. Вся бизнес-логика выполняется на сервере, а клиент получает только результат — изменения в контенте и вёрстке.
— Толстый клиент с управлением через actions. Здесь логика описывается в виде процедур или функций, часто — довольно атомарных и гибко настраиваемых. Контракт (обычно это JSON с вёрсткой) уже содержит вызовы этих функций. Например, в случае перехода достаточно указать в контракте саму функцию и её параметры (тип перехода, линк и т. д.).
— Толстый клиент с загружаемыми скриптами. В этом варианте бизнес-логика исполняется на клиенте, но поставляется с сервера в виде загружаемых скриптов — чаще всего на JS.
Как это влияет на работу дизайнера?
Во-первых — это влияет на мышление. Реализация через actions требует другого подхода к проектированию:
всё начинает дробиться на действия, функции, состояния. Анимации переходов становятся частью логики, что подталкивает к систематизации, стандартизации и визуальному единообразию.
Такой способ мышления полезен не только в контексте SDUI — он помогает пересматривать сущности, улучшать сценарии и думать о интерфейсе как о системе.
Во-вторых — это вопрос планирования. В модели тонкого клиента отрисовка результата бизнес-логики происходит на фронте, на основе правил и механизмов дизайн-системы или дизайн-платформы.
Обновление этих правил требует обновления самого клиента — то есть выкладки новой версии в стор. Поэтому так важно сразу продумать архитектуру, заложить гибкость в ключевые решения и сделать инструмент, который покрывает основные сценарии — без постоянного обновления сборки.
Верстка
Здесь главное различие — гранулярность системы. То есть, насколько «мелко» можно управлять интерфейсом через контракт: какие сущности доступны и на каком уровне атомарности.
Возможны разные варианты:
— Виджетная архитектура с хранением вёрстки на клиенте
— Обращение к элементам дизайн-системы, также хранимым на клиенте
— Гибкий отрисовщик, построенный на примитивах, с распределённым хранением вёрстки (часть элементов на клиенте, часть, например компоновка и параметры декоратора, на сервере).
В первых двух подходах на клиенте хранится конечный (или условно конечный) набор компонентов. А в случае с гибкой системой — платформа позволяет собирать виджеты и даже атомы (например, кнопку) из базовых примитивов.
Это напрямую влияет на архитектуру и конфигурацию дизайн-системы.
При виджетном подходе сервер может управлять только выбором виджетов, их параметрами и расположением. И для продуктового дизайнера приоритетом становится поиск безрелизного решения: как «выкрутиться» с текущим набором компонентов. Потому что это быстрее и дешевле. Только если нужного виджета или параметра нет, команда решается на доработку — а это уже означает выпуск новой версии и релиз в стор.
В более гранулярных системах возможностей для безрелизных изменений больше, но и здесь есть ограничения: не всё можно сделать без обновления клиента. При этом именно такие фичи — с условием «без повышения версии» — часто оказываются самыми приоритетными.
Кроме того, в системах любой гранулярности обычно используется многоуровневая система контейнеров со слотами, что тоже влияет на логику проектирования.
А ещё, помимо самой вёрстки, хочется сказать пару слов о верстальщике. Эта роль при переходе на SDUI меняется радикально.
Теперь макеты у дизайнера будет принимать бэкендер — потому что бизнес-логика теперь на сервере, да и верстка при некоторых подходах тоже.
А может быть и другой сценарий: часть задач верстальщика уходит к дизайнеру, особенно если в системе уже есть автоматизация (о ней — чуть ниже).
Автоматизация
Здесь всё проще. Автоматизация бывает и вне SDUI, но именно переход к этой архитектуре обычно стимулирует её активное развитие.
От автоматической сборки виджетов и конвертации макетов в вёрстку — до внутренних инструментов, вроде линтера для дизайнеров, который проверяет макет на соответствие правилам.
Работа с автоматикой может поначалу усложнить подготовку макетов — но в итоге снимает рутину, снижает количество ошибок и освобождает время для творческих задач.
