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

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