TGViewer
UX Notes UX Notes @uxnotes · 23.7K subscribers
Post #1526 7.6K
Слава Соколов написал об основах BDUI для продуктовых дизайнеров (в зарубежных источниках можно встретить синоним SDUI).

— BDUI (backend driven user interface) — подход к разработке приложений, при котором бекенд управляет данными, внешним видом и поведением приложения;
— Он позволяет обновлять мобильное приложение без релиза его новых версий в сторах. Причём, обновлять целиком, включая состав и последовательность экранов в многошаговых сценариях;
— Продукты, чьи приложения удалены из сторов, могут сохранять актуальными их старые версии;
— Также он упрощает реализацию единой логики на разных платформах (веб, iOS, Android), проведение а/б-тестов и сокращает затраты на разработку фронтенда;
— Продуктовому же дизайнеру эта технология даёт набор ограничений и навык чтения контрактов в формате JSON;
— Компонент в дизайн-системе и его контракт ограничивают то, что можно настроить при его использовании (свойства и их значения). Нельзя быстро подкрутить стили на фронте, если настроек не хватает (нет свойства для настройки отступов или среди возможных размеров нет нужного), — придётся дорабатывать компонент и контракт;
— Чтобы не сломать существующие фичи и сохранить консистентность, для доработки потребуются обсуждения и согласования, а это время;
— Поэтому в компоненты закладывают максимум гибкости с самого начала;
— Сложную кастомную вёрстку позволяют сделать компоненты, состоящие из набора слотов, куда можно вставить любые другие компоненты (даже такие наборы слотов);
— Контракт в BDUI — главный источник истины;
— В JSON свойства называют ключами, это строковые переменные (например, «size»). Значения могут быть строковыми, числовыми и логическими переменными (true, false, required);
— Объект — список параметров сложного элемента, для описания которого нужно несколько ключей (порядок их перечисления не важен);
— Массив — тоже список, но порядок элементов в нём важен. Он может содержать список полей для отображения на экране;
— Часто описания значений выносят в отдельные файлы ($ref), чтобы было удобно ссылаться на них сразу из многих контрактов. Например, токены цвета в дизайн-системе;
— Ещё Слава рассказал о ключах required, enum и oneOf. Написанного в статье достаточно для чтения контрактов.

Видео в Ютубе и ВК.
  • ❤ 30
  • 👍 9
  • ⚡ 4
  • 🔥 2
  • 🤗 1
More from @uxnotes
  1. Sep 17, 2026Анастасия Ефанова написала, как сокращение количества пушей в 2,5 раза повысило конверсию…
  2. Sep 15, 2026Татьяна Бублик поделилась своей системой организации файлов в Фигме. — Все макеты продукта…
  3. Sep 13, 2026Стас Мельников написал, как с помощью CSS-свойств улучшить дизайн веб-страниц. — Чтобы, на…
  4. Sep 10, 2026Кейт Каплан написала о контекстном меню. — Контекстное меню включает набор действий, связа…
  5. Sep 8, 2026UX Feedback запускает «Разговоры» — новый формат встреч онлайн. Несколько команд коротко р…
  6. Sep 6, 2026Илья Бирман написал о сценариях. — Они предшествуют проектированию, позволяют понять, каки…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →