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

Transcript

1. руководитель группы «Дизайн-система», Ozon Дизайн-система × SDUI: как мы собирали грабли
4. Быстрый запуск фичей
 с Server Driven UI Хватит делать фичи,
 делайте инструменты Лёша Новиков Саша Свиридов
5. Ты можешь просто напрогать то, что мы нарисовали? Да
6. Да Ты можешь просто нарисовать, что нам прогать?
7. Да Ты можешь просто нарисовать, что нам прогать? ***да
8. Что такое SDUI Server Driven User Interface Backend Driven User Interface Виджетная архитектура СДУЙ БДУЙ
9. " ": { }, " ": { }, " ": { }, ... " ": { } block-1 block-2 block-3 block-n ... ... ... ... block-1 block-2
10. " ": { }, " ": { }, " ": { }, ... " ": { } block-1 block-2 block-3 block-n ... ... ... ...
11. " ": { " ": { }, " ": { }, " ": { }, ... " ": { } } widgets widget-1 widget-2 widget-3 widget-n ... ... ... ...
12. " ": { " ": { " ": { }, " ": { } }, " ": { " ": { }, " ": { } }, ... } widgets widget-1 content settings widget-2 content settings ... ... ... ...
13. " ": { " ": { " ": { }, " ": { } }, " ": { " ": { }, " ": { } }, ... } widgets widget-1 content settings widget-2 content settings ... ... ... ... контракт
14. " ": { " ": { " ": { }, " ": { } }, " ": { " ": { }, " ": { } }, ... } widgets widget-1 content settings widget-2 content settings ... ... ... ... widget-1 widget-2 контракт
15. " ": { " ": { " ": { }, " ": { } }, " ": { " ": { }, " ": { } }, ... } widgets widget-1 content settings widget-2 content settings ... ... ... ... widget-1 widget-2 Первый виджет Второй виджет Третий виджет
16. " ": { " ": { " ": { }, " ": { } }, " ": { " ": { }, " ": { } }, ... } widgets widget-1 content settings widget-2 content settings ... ... ... ... widget-2 widget-1 Второй виджет Первый виджет Третий виджет
17. widget-1 widget-2 widget-1 widget-2
18. " ": { " ": { }, " ": { } } second content settings ... ... " ": { " ": { }, " ": { } } third content settings ... ... third second
19. " ": { " ": { }, " ": { " ": " ", " ": " ", } } second content settings this that ... orange green that this second
20. " ": { " ": { }, " ": { " ": " ", " ": " ", " ": " ", } } second content settings this that pipka-sleva ... orange green red v 1.0 that this second
21. " ": { " ": { }, " ": { " ": " ", " ": " ", " ": " ", } } second content settings this that ... orange green pipka-sleva red v 1.0 that this second
22. " ": { " ": { }, " ": { " ": " ", " ": " " } } second content settings this that ... orange green v 1.0 that this second
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
24. 999+
25. " ": { }, " ": { }, " ": { }, ... " ": { } first second third inf ... ... ... ...
26. " ": { }, " ": { }, " ": { }, ... " ": { } first second third inf ... ... ... ...
27. Заголовок Подзаголовок
28. Заголовок
29. Заголовок Подзаголовок
30. Заголовок Подзаголовок
31. Заголовок Подзаголовок " ": { " ": " ", " ": " ", " ": , " ": , " ": " ", " ": " ", } cell title subtitle left-padding right-padding title-color subtitle-color Заголовок Подзаголовок 40 16 AccentPrimary AccentSecondary
32. Заголовок Подзаголовок " ": { " ": " ", " ": " ", " ": , " ": , } cell title subtitle left-padding right-padding Заголовок Подзаголовок 40 16 "title-color": "AccentPrimary", "subtitle-color": "AccentSecondary",
33. v 1.0 v 2.0 Заголовок Подзаголовок Заголовок Подзаголовок 999+
35. Да Да
37. 2 Да камон, быстренько всё соберём...
38. Addon Main
49. Xiaomi Official 4.9 Premium 962 Заберите из магазина 14 магазинов, сегодня, 21 сентября Курьером Ozon Express сегодня с 12:00 329 ₽ Курьером Ozon завтра, 24 июня 199 ₽ Ещё 3 способа Быстрее у другого продавца сегодня с 10:00
50. 3 Абстрактная штука решает всё
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
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
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
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
60. 4 Дизайн-система отвечает только за кнопку
61. Кнопка
62. Первый виджет Второй виджет Третий виджет
63. Первый виджет Второй виджет Третий виджет Ищут также Xiaomi Бренд Смартфоны Все товары категории Xiaomi Смартфоны Xiaomi 11 Lite Poco F3 HUAWEI P30 Xiaomi official store Магазин Premium 4.9 рейтинг товаров 6 брендов орииналы товаров Написать в магазин Информация о доставке Москва Сроки увеличены Скоро в продаже В продаже с 08.10
64. Заголовок Большое количество текста, чтобы сказать, что это длинный и громоздкий подзаголовок Упаковка текста ещё никогда не была такой удобной Лонгриды и текстовые блоки должны быть красивыми. Наша система интерлиньяжей и отступов подчиняется сетке с шагом 8 и задаёт ритм, при котором соблюдается правило близости вне зависимости от количества строк. 1. Элемент списка И подпись к нему 2. Элемент списка И подпись к нему 3. Элемент списка И подпись к нему 4. Элемент списка И подпись к нему Сосед больше не пьёт после того, ещё Большое количество текста, чтобы сказать, что это длинный и громоздкий подзаголовок Заголовок Большое количество текста, чтобы сказать, что это длинный и громоздкий подзаголовок
65. Заберите из магазина 14 магазинов, сегодня, 21 сентября Курьером Ozon завтра, 24 июня 199 ₽ Пункты выдачи послезавтра, 25 июня Бесплатно На электронную почту Ещё 3 способа Ответить Редактировать Удалить
67. 5 Дизайн-система — серебряная пуля
68. 5 Дизайн-система — серебряная пуля без процесса себе в голову
69. Виджеты на проде Покрытие атомами Новые атомы и виджеты
70. 1. Концепты
71. 1. Концепты 2. Декомпозиция
72. 1. Концепты 2. Декомпозиция 3. Документация
73. 2. Декомпозиция 3. Документация 4. Таски на ДС
74. Что в итоге GD Контракты и бюрократия, D Все в ответе за то, что получилос D Максимальная степень абстракци& CD Это долг) ÈD Максимальная консистентность и алгоритмизация! как в браке по расчётH
75. Спасибо!