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

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

Ozon Tech
August 30, 2023

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

Ozon Tech

August 30, 2023
Tweet

More Decks by Ozon Tech

Other Decks in Technology

Transcript

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

    и подробности Backend Driven UI 🎭 • Что такое и зачем нужна дизайн- система 🎨 • Глубинные детали имплементации 🧩 • Как это все продать 💰
  2. А это будет Затронем 3 • [мы здесь] • Введение

    (база) 👨🎓 • Что имелось на старте 🎬 • Дизайн-система 1.0 💪 • Реальность 🥲 • Дизайн-система 2.0 🦾 • Советы 👨🏫 • Q&A 🙋
  3. Где живем 5 iOS 🍏 • BDUI • Навигация на

    диплинках • 100% Swift • UIKit • Фреймы • iOS 14 Android 🤖 • BDUI • Кастовая навигация на Android Fragments и диплинках • 100% Kotlin • UIKit на CustomView • Android API 24+ Разработка 🤝 • ~20 фичевых команд • ~45 разработчиков на платформу • ~35+ дизайнеров
  4. 🥲 9 У нас было • Два набора ресурсов •

    ~100 похожих (но разных) компонентов • Ручное добавление иконок • Цвета формата oz + какое-то название
  5. Ну что там с цветами? Думаем о булгуре Смотрим на

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

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

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

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

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

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

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

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

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

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

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

    Смотрим на булгур Выбираем булгур Фильтруем булгур 👈 👉 🤯
  17. И ячейки Кнопки 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
  18. Как швейцарские часы План надежный 1. Переводим рукописи 2. Читаем

    мысли 3. Оцениваем переиспользование 4. Делаем правильно 5. ??? 6. PROFIT 27 Сделаем по-новой Переиспользуем? Старое ведь переиспользуем?
  19. Вторые шаги Что еще сделали 31 • Врапперы 🛍 •

    Еще врапперы • Ахаха, врапперы • Плоская иерархия 🌲 • Скрываем детали от разработчиков 🙈 враппер
  20. Что готово, а что нужно Ретроспектива 38 • Простые компоненты

    ✅ • План работы с врапперами ✅ • Токены с автоматикой ✅ • Интегрированное решение ❌ • Внятное тестирование ❌ • Простота использования ❌ • Хорошо работает с нашими технологиями ❌ • И еще что-то, что дальше…
  21. См. первый доклад Что если без BDUI? 40 • Кодовая

    база ограничена ✅ • Отказываться от старого сложно ❌ • (но если не нужно, то все хорошо) ✅
  22. Ну сейчас точно будет хорошо Промежуточные итоги 42 Нам нужна

    1 ДС • Неправильно оценили пару ДС + BDUI 🫡 • Немного оверинжиниринг 😵💫 • ДС можно разделять по стеку 🔪 • Гибкость нужна и важна 🦄 • Нужно чуть переосмыслить 🧠 У нас уже есть ДС Без ДС же как-то жили Может вообще без ДС? Нам нужна 1 ДС Нам нужно 2 ДС
  23. [x2] Что сделали 44 • Выявили всех пользователей ДС 🌎

    • Эволюция, а не революция 🐒🚶 • Внедрять новое нужно сразу ❄🎱 • Упрощение тестирования 🧪
  24. У менеджеров экстаз Процессы превыше всего 45 • Видишь плохой

    дизайн? 🤨 • Убедить, что он не натягивается на ДС 🙅 • Спроси дизайнера «за что ты так со мной?» 😿 • Поплачь 😭 • Попробуй натянуть еще раз 🎬 • Приходи жаловаться в канал ДС 🔫 • Команда ДС видит плохой дизайн 🙄 • Команда ДС берет дизайнера и нависает над его грешной душой 👹 • Дизайнер все правит 🏃 • Разработчик доволен, дизайнер запомнил и больше так не будет, ведь душа всего одна 🥳
  25. А значит метрики 📊 Дизайн-система — это продукт 49 NPS,

    Adoption, TTM • Спрашиваем мнение коллег 💭 • NPS (Net Promoter Score) ☹😌 • Adoption 📈 • TTM (Time-to-market) ⏱
  26. Так можно делать, но можно и не так Советы 51

    • Определите ваших пользователей. Вам нужны их ожидания • Оцените, что уже есть, кто этим пользуется и какие есть проблемы* • Поможет план развития (и внедрения) • Оверинжинирить интересно и весело, но иногда не нужно • Синхронизируйте API
  27. И так можно делать Еще советы 52 • Продайте ваш

    план пользователям • Убедитесь, что план и эффект все поняли • Сделайте кнопки • Покрасьте кнопки • (Опционально) Расскажите о своем неуспехе