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 Slide

  2. View Slide

  3. View Slide

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    Backend Driven User Interface

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

    СДУЙ

    БДУЙ

    View Slide

  9. " ": { },

    " ": { },

    " ": { },

    ...

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

    View Slide

  10. " ": { },

    " ": { },

    " ": { },

    ...

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

    View Slide

  11. " ": {

    " ": { },

    " ": { },

    " ": { },

    ...

    " ": { }

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

    View Slide

  12. " ": {

    " ": {

    " ": { },

    " ": { }

    },

    " ": {

    " ": { },

    " ": { }

    },

    ...

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

    View Slide

  13. " ": {

    " ": {

    " ": { },

    " ": { }

    },

    " ": {

    " ": { },

    " ": { }

    },

    ...

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

    View Slide

  14. " ": {

    " ": {

    " ": { },

    " ": { }

    },

    " ": {

    " ": { },

    " ": { }

    },

    ...

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

    View Slide

  15. " ": {

    " ": {

    " ": { },

    " ": { }

    },

    " ": {

    " ": { },

    " ": { }

    },

    ...

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

    View Slide

  16. " ": {

    " ": {

    " ": { },

    " ": { }

    },

    " ": {

    " ": { },

    " ": { }

    },

    ...

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

    View Slide

  17. widget-1
    widget-2
    widget-1
    widget-2

    View Slide

  18. " ": {

    " ": { },

    " ": { }

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

    " ": { },

    " ": { }

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

    View Slide

  19. " ": {

    " ": { },

    " ": {

    " ": " ",

    " ": " ",

    }

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

    View Slide

  20. " ": {

    " ": { },

    " ": {

    " ": " ",

    " ": " ",

    " ": " ",

    }

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

    View Slide

  21. " ": {

    " ": { },

    " ": {

    " ": " ",

    " ": " ",

    " ": " ",

    }

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

    View Slide

  22. " ": {

    " ": { },

    " ": {

    " ": " ",

    " ": " "


    }

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

    View Slide

  23. 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 Slide

  24. 999+

    View Slide

  25. " ": { },

    " ": { },

    " ": { },

    ...

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

    View Slide

  26. " ": { },

    " ": { },

    " ": { },

    ...

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

    View Slide

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

    View Slide

  28. Заголовок

    View Slide

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

    View Slide

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

    View Slide

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

    " ": " ",

    " ": " ",

    " ": ,

    " ": ,

    " ": " ",

    " ": " ",

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

    View Slide

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

    " ": " ",

    " ": " ",

    " ": ,

    " ": ,

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

    "subtitle-color": "AccentSecondary",

    View Slide

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

    View Slide

  34. View Slide

  35. Да
    Да

    View Slide

  36. View Slide

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

    View Slide

  38. Addon Main

    View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

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

    View Slide

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

    View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. " ": " ",

    " ": " ",

    " ": ,

    " ": " ",

    " ": " ",

    " ": " ",

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ":
    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 Slide

  56. " ": " ",

    " ": " ",

    " ": ,

    " ": " ",

    " ": " ",

    " ": " ",

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ": ,

    " ":
    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 Slide

  57. 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 Slide

  58. 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 Slide

  59. View Slide

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

    View Slide

  61. Кнопка

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  66. View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  75. Спасибо!

    View Slide