$30 off During Our Annual Pro Sale. View Details »

Евгений Ильин – Дизайн-система с BDUI, как готовить

Ozon Tech
August 30, 2023

Евгений Ильин – Дизайн-система с BDUI, как готовить

Ozon Tech

August 30, 2023
Tweet

More Decks by Ozon Tech

Other Decks in Technology

Transcript

  1. Ozon Tech 2023
    Дизайн-система с BDUI, как готовить
    Евгений Ильин, ведущий iOS-разработчик

    View Slide

  2. То есть этого не будет
    Не затронем
    2
    • Принципы и подробности Backend
    Driven UI 🎭


    • Что такое и зачем нужна дизайн-
    система 🎨


    • Глубинные детали имплементации 🧩


    • Как это все продать 💰

    View Slide

  3. А это будет
    Затронем
    3
    • [мы здесь]


    • Введение (база) 👨🎓


    • Что имелось на старте 🎬


    • Дизайн-система 1.0 💪


    • Реальность 🥲


    • Дизайн-система 2.0 🦾


    • Советы 👨🏫


    • Q&A 🙋

    View Slide

  4. Введение
    1
    4

    View Slide

  5. Где живем
    5
    iOS 🍏
    • BDUI


    • Навигация на диплинках


    • 100% Swift


    • UIKit


    • Фреймы


    • iOS 14
    Android 🤖
    • BDUI


    • Кастовая навигация
    на Android Fragments
    и диплинках


    • 100% Kotlin


    • UIKit на CustomView


    • Android API 24+
    Разработка 🤝
    • ~20 фичевых
    команд
    • ~45 разработчиков
    на платформу
    • ~35+ дизайнеров

    View Slide

  6. 6
    Как работает


    Backend-Driven UI


    на мобильном


    клиенте
    Владислав Митюкляев

    View Slide

  7. Древнее зло 👻
    2
    7

    View Slide

  8. Что имели год назад
    8
    Это oz* цвета Это ресурсы/иконки Это общая структура

    View Slide

  9. 🥲
    9
    У нас было
    • Два набора ресурсов


    • ~100 похожих (но разных)
    компонентов


    • Ручное добавление иконок


    • Цвета формата oz + какое-то
    название

    View Slide

  10. Ну что там с цветами?
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур

    View Slide

  11. Какими цветами?
    11
    Которые мы вложили в доклад
    .ozWhite1 -> .green
    .ozBgTetriary -> .magenta
    .ozAccentPrimary -> .yellow

    View Slide

  12. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур

    View Slide

  13. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈

    View Slide

  14. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈

    View Slide

  15. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈

    View Slide

  16. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👉
    👉
    👉
    🤨

    View Slide

  17. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    😊
    👈

    View Slide

  18. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈

    View Slide

  19. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈 👈
    🤔

    View Slide

  20. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈 👈 👈

    View Slide

  21. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈
    👈

    View Slide

  22. Я вам сейчас покажу, откуда готовился маппинг
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈 👉
    🤯

    View Slide

  23. Булгур? Булгур
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    👈
    🤑

    View Slide

  24. Булгур? Булгур
    Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
    😵💫

    View Slide

  25. И ячейки
    Кнопки
    25
    LargeButton


    SmallButton


    SmallButtonWithIcon


    LargeBorderlessButton


    SmallBorderlessButton


    SmallBorderlessButtonWithIcon


    LargePaymentButton


    SmallPaymentButton


    GetButton


    ResizableSmallButton
    CellWithSubtitle48Icon


    CellRegularPicker


    CellRegular24IconPicker


    CellWithSubtitle24IconPicker


    CellSmallRegular24IconPicker


    CellWithSubtitle24IconCheckboxRadio


    CellWithSubtitle32Icon


    CellWithSubtitle40Icon


    CellWithSubtitle40IconCheckboxRadio


    CellWithSubtitle48IconCheckboxRadio


    CellWithSubtitleCounter


    CellWithSubtitle24Icon


    CellWithSubtitleValue


    CellWithReverseSubtitleCounter


    CellWithSubtitleDefault


    CellWithSubtitleToggle



    View Slide

  26. Слегка неконтролируемый хаос
    26

    View Slide

  27. Как швейцарские часы
    План надежный
    1. Переводим рукописи


    2. Читаем мысли


    3. Оцениваем переиспользование


    4. Делаем правильно


    5. ???


    6. PROFIT
    27
    Сделаем по-новой
    Переиспользуем?
    Старое ведь переиспользуем?

    View Slide

  28. Делаем правильно
    3
    28

    View Slide

  29. Первые шаги
    Что сделали
    29
    • Собрали новую команду 💪🦄 • Репозиторий с токенами 🌈

    View Slide

  30. 30
    Создаем ячейки


    на iOS
    HeadHunter

    View Slide

  31. Вторые шаги
    Что еще сделали
    31
    • Врапперы 🛍


    • Еще врапперы


    • Ахаха, врапперы


    • Плоская иерархия 🌲


    • Скрываем детали от
    разработчиков 🙈
    враппер

    View Slide

  32. Да кто эти ваши врапперы
    Врапперы iOS
    32
    👇

    View Slide

  33. Да кто эти ваши врапперы
    Врапперы iOS
    33
    👇

    View Slide

  34. Да кто эти ваши врапперы
    Врапперы iOS
    34

    View Slide

  35. Только одним глазом 👁
    Что внутри
    35

    View Slide

  36. Другим глазом 👁
    Как еще полезно
    36

    View Slide

  37. Сделали, а дальше что?
    4
    37

    View Slide

  38. Что готово, а что нужно
    Ретроспектива
    38
    • Простые компоненты ✅


    • План работы с врапперами ✅


    • Токены с автоматикой ✅
    • Интегрированное решение ❌


    • Внятное тестирование ❌


    • Простота использования ❌


    • Хорошо работает с нашими технологиями ❌


    • И еще что-то, что дальше…

    View Slide

  39. Сложно найти, легко потерять, невозможно забыть…
    39
    Как было Как стало Что ожидает веб

    View Slide

  40. См. первый доклад
    Что если без BDUI?
    40
    • Кодовая база ограничена ✅


    • Отказываться от старого сложно ❌


    • (но если не нужно, то все хорошо) ✅

    View Slide

  41. Что поняли
    5
    41

    View Slide

  42. Ну сейчас точно будет хорошо
    Промежуточные итоги
    42
    Нам нужна 1 ДС
    • Неправильно оценили пару ДС + BDUI 🫡


    • Немного оверинжиниринг 😵💫


    • ДС можно разделять по стеку 🔪


    • Гибкость нужна и важна 🦄


    • Нужно чуть переосмыслить 🧠
    У нас уже есть ДС
    Без ДС же как-то жили
    Может вообще без ДС?
    Нам нужна 1 ДС
    Нам нужно 2 ДС

    View Slide

  43. Делаем правильно, а неправильно не делаем
    6
    43

    View Slide

  44. [x2]
    Что сделали
    44
    • Выявили всех пользователей ДС 🌎


    • Эволюция, а не революция 🐒🚶


    • Внедрять новое нужно сразу ❄🎱


    • Упрощение тестирования 🧪

    View Slide

  45. У менеджеров экстаз
    Процессы превыше всего
    45
    • Видишь плохой дизайн? 🤨


    • Убедить, что он не натягивается на ДС 🙅


    • Спроси дизайнера «за что ты так со мной?» 😿


    • Поплачь 😭


    • Попробуй натянуть еще раз 🎬


    • Приходи жаловаться в канал ДС 🔫


    • Команда ДС видит плохой дизайн 🙄


    • Команда ДС берет дизайнера и нависает над его
    грешной душой 👹


    • Дизайнер все правит 🏃


    • Разработчик доволен, дизайнер запомнил и больше
    так не будет, ведь душа всего одна 🥳

    View Slide

  46. На пример бейджей
    Гайдлайны
    46

    View Slide

  47. Все еще бейджи
    Кастом
    47

    View Slide

  48. 🥸
    Операция «маппинг/схлоппинг»
    48

    View Slide

  49. А значит метрики 📊
    Дизайн-система — это продукт
    49
    NPS, Adoption, TTM
    • Спрашиваем мнение коллег 💭


    • NPS (Net Promoter Score) ☹😌


    • Adoption 📈


    • TTM (Time-to-market) ⏱


    View Slide

  50. Выводы / советы
    6
    50

    View Slide

  51. Так можно делать, но можно и не так
    Советы
    51
    • Определите ваших пользователей. Вам нужны
    их ожидания


    • Оцените, что уже есть, кто этим пользуется и
    какие есть проблемы*


    • Поможет план развития (и внедрения)


    • Оверинжинирить интересно и весело, но иногда
    не нужно


    • Синхронизируйте API

    View Slide

  52. И так можно делать
    Еще советы
    52
    • Продайте ваш план пользователям


    • Убедитесь, что план и эффект все поняли


    • Сделайте кнопки


    • Покрасьте кнопки


    • (Опционально) Расскажите о своем неуспехе

    View Slide

  53. Спасибо за внимание
    Евгений Ильин, ведущий iOS-разработчик

    View Slide

  54. 54
    Q&A

    View Slide