Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Богдана Кибза — Дизайн-система ✕ SDUI: как мы собирали грабли

Ozon Tech
February 20, 2023

Богдана Кибза — Дизайн-система ✕ SDUI: как мы собирали грабли

Ozon Tech

February 20, 2023
Tweet

More Decks by Ozon Tech

Other Decks in Design

Transcript

  1. руководитель группы

    «Дизайн-система», Ozon
    Дизайн-система × SDUI:
    как мы собирали грабли

    View full-size slide

  2. Быстрый запуск фичей

    с Server Driven UI
    Хватит делать фичи,

    делайте инструменты
    Лёша Новиков
    Саша Свиридов

    View full-size slide

  3. Ты можешь просто напрогать
    то, что мы нарисовали?
    Да

    View full-size slide

  4. Да Ты можешь просто
    нарисовать, что нам прогать?

    View full-size slide

  5. Да Ты можешь просто
    нарисовать, что нам прогать?
    ***да

    View full-size slide

  6. Что такое SDUI
    Server Driven User Interface

    Backend Driven User Interface

    Виджетная архитектура

    СДУЙ

    БДУЙ

    View full-size slide

  7. " ": { },

    " ": { },

    " ": { },

    ...

    " ": { }
    block-1
    block-2
    block-3
    block-n
    ...
    ...
    ...
    ...
    block-1
    block-2

    View full-size slide

  8. " ": { },

    " ": { },

    " ": { },

    ...

    " ": { }
    block-1
    block-2
    block-3
    block-n
    ...
    ...
    ...
    ...

    View full-size slide

  9. " ": {

    " ": { },

    " ": { },

    " ": { },

    ...

    " ": { }

    }
    widgets
    widget-1
    widget-2
    widget-3
    widget-n
    ...
    ...
    ...
    ...

    View full-size slide

  10. " ": {

    " ": {

    " ": { },

    " ": { }

    },

    " ": {

    " ": { },

    " ": { }

    },

    ...

    }
    widgets
    widget-1
    content
    settings
    widget-2
    content
    settings
    ...
    ...
    ...
    ...

    View full-size slide

  11. " ": {

    " ": {

    " ": { },

    " ": { }

    },

    " ": {

    " ": { },

    " ": { }

    },

    ...

    }
    widgets
    widget-1
    content
    settings
    widget-2
    content
    settings
    ...
    ...
    ...
    ...
    контракт

    View full-size slide

  12. " ": {

    " ": {

    " ": { },

    " ": { }

    },

    " ": {

    " ": { },

    " ": { }

    },

    ...

    }
    widgets
    widget-1
    content
    settings
    widget-2
    content
    settings
    ...
    ...
    ...
    ...
    widget-1
    widget-2
    контракт

    View full-size slide

  13. " ": {

    " ": {

    " ": { },

    " ": { }

    },

    " ": {

    " ": { },

    " ": { }

    },

    ...

    }
    widgets
    widget-1
    content
    settings
    widget-2
    content
    settings
    ...
    ...
    ...
    ...
    widget-1
    widget-2
    Первый виджет
    Второй виджет
    Третий виджет

    View full-size slide

  14. " ": {

    " ": {

    " ": { },

    " ": { }

    },

    " ": {

    " ": { },

    " ": { }

    },

    ...

    }
    widgets
    widget-1
    content
    settings
    widget-2
    content
    settings
    ...
    ...
    ...
    ...
    widget-2
    widget-1
    Второй виджет
    Первый виджет
    Третий виджет

    View full-size slide

  15. widget-1
    widget-2
    widget-1
    widget-2

    View full-size slide

  16. " ": {

    " ": { },

    " ": { }

    }
    second
    content
    settings
    ...
    ...
    " ": {

    " ": { },

    " ": { }

    }
    third
    content
    settings
    ...
    ...
    third
    second

    View full-size slide

  17. " ": {

    " ": { },

    " ": {

    " ": " ",

    " ": " ",

    }

    }
    second
    content
    settings
    this
    that
    ...
    orange
    green
    that this
    second

    View full-size slide

  18. " ": {

    " ": { },

    " ": {

    " ": " ",

    " ": " ",

    " ": " ",

    }

    }
    second
    content
    settings
    this
    that
    pipka-sleva
    ...
    orange
    green
    red
    v 1.0
    that this
    second

    View full-size slide

  19. " ": {

    " ": { },

    " ": {

    " ": " ",

    " ": " ",

    " ": " ",

    }

    }
    second
    content
    settings
    this
    that
    ...
    orange
    green
    pipka-sleva red
    v 1.0
    that this
    second

    View full-size slide

  20. " ": {

    " ": { },

    " ": {

    " ": " ",

    " ": " "


    }

    }
    second
    content
    settings
    this
    that
    ...
    orange
    green
    v 1.0
    that this
    second

    View full-size slide

  21. that this
    second
    that this
    second
    "second": {

    "content": {...},

    "settings": {

    "this": "orange",

    "that": "green"


    }

    }
    "second": {

    "content": {...},

    "settings": {

    "this": "orange",

    "that": "green",

    " ": " ",

    }

    }
    pipka-sleva red
    v 1.0 v 2.0

    View full-size slide

  22. " ": { },

    " ": { },

    " ": { },

    ...

    " ": { }
    first
    second
    third
    inf
    ...
    ...
    ...
    ...

    View full-size slide

  23. " ": { },

    " ": { },

    " ": { },

    ...

    " ": { }
    first
    second
    third
    inf
    ...
    ...
    ...
    ...

    View full-size slide

  24. Заголовок
    Подзаголовок

    View full-size slide

  25. Заголовок

    View full-size slide

  26. Заголовок
    Подзаголовок

    View full-size slide

  27. Заголовок
    Подзаголовок

    View full-size slide

  28. Заголовок
    Подзаголовок
    " ": {

    " ": " ",

    " ": " ",

    " ": ,

    " ": ,

    " ": " ",

    " ": " ",

    }
    cell
    title
    subtitle
    left-padding
    right-padding
    title-color
    subtitle-color
    Заголовок
    Подзаголовок
    40
    16
    AccentPrimary
    AccentSecondary

    View full-size slide

  29. Заголовок
    Подзаголовок
    " ": {

    " ": " ",

    " ": " ",

    " ": ,

    " ": ,

    }
    cell
    title
    subtitle
    left-padding
    right-padding
    Заголовок
    Подзаголовок
    40
    16
    "title-color": "AccentPrimary",

    "subtitle-color": "AccentSecondary",

    View full-size slide

  30. v 1.0
    v 2.0
    Заголовок
    Подзаголовок
    Заголовок
    Подзаголовок
    999+

    View full-size slide

  31. 2
    Да камон, быстренько всё соберём...

    View full-size slide

  32. Xiaomi Official
    4.9 Premium
    962
    Заберите из магазина
    14 магазинов, сегодня, 21 сентября
    Курьером Ozon Express
    сегодня с 12:00
    329 ₽
    Курьером Ozon
    завтра, 24 июня
    199 ₽
    Ещё 3 способа
    Быстрее у другого продавца
    сегодня с 10:00

    View full-size slide

  33. 3
    Абстрактная штука решает всё

    View full-size slide

  34. " ": " ",

    " ": " ",

    " ": ,

    " ": " ",

    " ": " ",

    " ": " ",

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ":
    axis
    addon-side
    gap
    alignment
    main-alignment
    addon-alignment
    min-height
    main-start-padding
    main-end-padding
    addon-start-padding
    addon-end-padding
    layout-left-padding
    layout-right-padding
    layout-top-padding
    layout-bottom-padding
    horizontal
    end
    10
    leading
    none
    none
    0
    0
    0
    4
    4
    16
    16
    12
    12

    View full-size slide

  35. " ": " ",

    " ": " ",

    " ": ,

    " ": " ",

    " ": " ",

    " ": " ",

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ":
    axis
    addon-side
    gap
    alignment
    main-alignment
    addon-alignment
    min-height
    main-start-padding
    main-end-padding
    addon-start-padding
    addon-end-padding
    layout-left-padding
    layout-right-padding
    layout-top-padding
    layout-bottom-padding
    horizontal
    end
    10
    leading
    none
    none
    0
    0
    0
    4
    4
    16
    16
    12
    12

    View full-size slide

  36. Some Horizontal Preset
    " ": " ",

    " ": " ",

    " ": ,

    " ": " ",

    " ": " ",

    " ": " ",

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ":
    axis
    addon-side
    gap
    alignment
    main-alignment
    addon-alignment
    min-height
    main-start-padding
    main-end-padding
    addon-start-padding
    addon-end-padding
    layout-left-padding
    layout-right-padding
    layout-top-padding
    layout-bottom-padding
    horizontal
    end
    10
    leading
    none
    none
    0
    0
    0
    4
    4
    16
    16
    12
    12

    View full-size slide

  37. Some Vertical Preset
    " ": " ",

    " ": " ",

    " ": ,

    " ": " ",

    " ": " ",

    " ": " ",

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ":
    axis
    addon-side
    gap
    alignment
    main-alignment
    addon-alignment
    min-height
    main-start-padding
    main-end-padding
    addon-start-padding
    addon-end-padding
    layout-left-padding
    layout-right-padding
    layout-top-padding
    layout-bottom-padding
    vertical
    start
    center
    10
    none
    none
    0
    0
    0
    4
    4
    16
    16
    12
    12

    View full-size slide

  38. 4
    Дизайн-система отвечает только за кнопку

    View full-size slide

  39. Кнопка

    View full-size slide

  40. Первый виджет
    Второй виджет
    Третий виджет

    View full-size slide

  41. Первый виджет
    Второй виджет
    Третий виджет
    Ищут также
    Xiaomi
    Бренд
    Смартфоны
    Все товары категории
    Xiaomi Смартфоны Xiaomi 11 Lite Poco F3 HUAWEI P30
    Xiaomi official store
    Магазин
    Premium
    4.9
    рейтинг товаров
    6 брендов
    орииналы товаров
    Написать в магазин
    Информация о доставке
    Москва
    Сроки увеличены Скоро в продаже В продаже с 08.10

    View full-size slide

  42. Заголовок
    Большое количество текста, чтобы
    сказать, что это длинный и громоздкий
    подзаголовок
    Упаковка текста ещё
    никогда не была такой
    удобной
    Лонгриды и текстовые блоки должны быть
    красивыми. Наша система интерлиньяжей
    и отступов подчиняется сетке с шагом
    8 и задаёт ритм, при котором соблюдается
    правило близости вне зависимости
    от количества строк.
    1. Элемент списка
    И подпись к нему
    2. Элемент списка
    И подпись к нему
    3. Элемент списка
    И подпись к нему
    4. Элемент списка
    И подпись к нему
    Сосед больше не пьёт после того,
    ещё
    Большое количество текста, чтобы сказать,
    что это длинный и громоздкий
    подзаголовок
    Заголовок
    Большое количество текста, чтобы
    сказать, что это длинный и громоздкий
    подзаголовок

    View full-size slide

  43. Заберите из магазина
    14 магазинов, сегодня, 21 сентября
    Курьером Ozon
    завтра, 24 июня
    199 ₽
    Пункты выдачи
    послезавтра, 25 июня
    Бесплатно
    На электронную почту
    Ещё 3 способа
    Ответить
    Редактировать
    Удалить

    View full-size slide

  44. 5
    Дизайн-система — серебряная пуля

    View full-size slide

  45. 5
    Дизайн-система — серебряная пуля

    без процесса
    себе в голову

    View full-size slide

  46. Виджеты
    на проде
    Покрытие
    атомами
    Новые атомы
    и виджеты

    View full-size slide

  47. 1. Концепты

    View full-size slide

  48. 1. Концепты 2. Декомпозиция

    View full-size slide

  49. 1. Концепты 2. Декомпозиция 3. Документация

    View full-size slide

  50. 2. Декомпозиция 3. Документация 4. Таски на ДС

    View full-size slide

  51. Что в итоге
    GD Контракты и бюрократия,
    D Все в ответе за то, что получилос
    D Максимальная степень абстракци&
    CD Это долг)
    ÈD Максимальная консистентность и алгоритмизация!
    как в браке по расчётH

    View full-size slide

  52. Спасибо!

    View full-size slide