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

Transcript

1. Ozon Tech 2023 Дизайн-система с BDUI, как готовить Евгений Ильин, ведущий iOS-разработчик
2. То есть этого не будет Не затронем 2 • Принципы и подробности Backend Driven UI 🎭 • Что такое и зачем нужна дизайн- система 🎨 • Глубинные детали имплементации 🧩 • Как это все продать 💰
3. А это будет Затронем 3 • [мы здесь] • Введение (база) 👨🎓 • Что имелось на старте 🎬 • Дизайн-система 1.0 💪 • Реальность 🥲 • Дизайн-система 2.0 🦾 • Советы 👨🏫 • Q&A 🙋
4. Введение 1 4
5. Где живем 5 iOS 🍏 • BDUI • Навигация на диплинках • 100% Swift • UIKit • Фреймы • iOS 14 Android 🤖 • BDUI • Кастовая навигация на Android Fragments и диплинках • 100% Kotlin • UIKit на CustomView • Android API 24+ Разработка 🤝 • ~20 фичевых команд • ~45 разработчиков на платформу • ~35+ дизайнеров
6. 6 Как работает Backend-Driven UI на мобильном клиенте Владислав Митюкляев
7. Древнее зло 👻 2 7
8. Что имели год назад 8 Это oz* цвета Это ресурсы/иконки Это общая структура
9. 🥲 9 У нас было • Два набора ресурсов • ~100 похожих (но разных) компонентов • Ручное добавление иконок • Цвета формата oz + какое-то название
10. Ну что там с цветами? Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
11. Какими цветами? 11 Которые мы вложили в доклад .ozWhite1 -> .green .ozBgTetriary -> .magenta .ozAccentPrimary -> .yellow
12. Я вам сейчас покажу, откуда готовился маппинг Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур
13. Я вам сейчас покажу, откуда готовился маппинг Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур 👈
14. Я вам сейчас покажу, откуда готовился маппинг Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур 👈
15. Я вам сейчас покажу, откуда готовился маппинг Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур 👈
16. Я вам сейчас покажу, откуда готовился маппинг Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур 👉 👉 👉 🤨
17. Я вам сейчас покажу, откуда готовился маппинг Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур 😊 👈
18. Я вам сейчас покажу, откуда готовился маппинг Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур 👈
19. Я вам сейчас покажу, откуда готовился маппинг Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур 👈 👈 🤔
20. Я вам сейчас покажу, откуда готовился маппинг Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур 👈 👈 👈
21. Я вам сейчас покажу, откуда готовился маппинг Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур 👈 👈
22. Я вам сейчас покажу, откуда готовился маппинг Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур 👈 👉 🤯
23. Булгур? Булгур Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур 👈 🤑
24. Булгур? Булгур Думаем о булгуре Смотрим на булгур Выбираем булгур Фильтруем булгур 😵💫
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
26. Слегка неконтролируемый хаос 26
27. Как швейцарские часы План надежный 1. Переводим рукописи 2. Читаем мысли 3. Оцениваем переиспользование 4. Делаем правильно 5. ??? 6. PROFIT 27 Сделаем по-новой Переиспользуем? Старое ведь переиспользуем?
28. Делаем правильно 3 28
29. Первые шаги Что сделали 29 • Собрали новую команду 💪🦄 • Репозиторий с токенами 🌈
30. 30 Создаем ячейки на iOS HeadHunter
31. Вторые шаги Что еще сделали 31 • Врапперы 🛍 • Еще врапперы • Ахаха, врапперы • Плоская иерархия 🌲 • Скрываем детали от разработчиков 🙈 враппер
32. Да кто эти ваши врапперы Врапперы iOS 32 👇
33. Да кто эти ваши врапперы Врапперы iOS 33 👇
34. Да кто эти ваши врапперы Врапперы iOS 34
35. Только одним глазом 👁 Что внутри 35
36. Другим глазом 👁 Как еще полезно 36
37. Сделали, а дальше что? 4 37
38. Что готово, а что нужно Ретроспектива 38 • Простые компоненты ✅ • План работы с врапперами ✅ • Токены с автоматикой ✅ • Интегрированное решение ❌ • Внятное тестирование ❌ • Простота использования ❌ • Хорошо работает с нашими технологиями ❌ • И еще что-то, что дальше…
39. Сложно найти, легко потерять, невозможно забыть… 39 Как было Как стало Что ожидает веб
40. См. первый доклад Что если без BDUI? 40 • Кодовая база ограничена ✅ • Отказываться от старого сложно ❌ • (но если не нужно, то все хорошо) ✅
41. Что поняли 5 41
42. Ну сейчас точно будет хорошо Промежуточные итоги 42 Нам нужна 1 ДС • Неправильно оценили пару ДС + BDUI 🫡 • Немного оверинжиниринг 😵💫 • ДС можно разделять по стеку 🔪 • Гибкость нужна и важна 🦄 • Нужно чуть переосмыслить 🧠 У нас уже есть ДС Без ДС же как-то жили Может вообще без ДС? Нам нужна 1 ДС Нам нужно 2 ДС
43. Делаем правильно, а неправильно не делаем 6 43
44. [x2] Что сделали 44 • Выявили всех пользователей ДС 🌎 • Эволюция, а не революция 🐒🚶 • Внедрять новое нужно сразу ❄🎱 • Упрощение тестирования 🧪
45. У менеджеров экстаз Процессы превыше всего 45 • Видишь плохой дизайн? 🤨 • Убедить, что он не натягивается на ДС 🙅 • Спроси дизайнера «за что ты так со мной?» 😿 • Поплачь 😭 • Попробуй натянуть еще раз 🎬 • Приходи жаловаться в канал ДС 🔫 • Команда ДС видит плохой дизайн 🙄 • Команда ДС берет дизайнера и нависает над его грешной душой 👹 • Дизайнер все правит 🏃 • Разработчик доволен, дизайнер запомнил и больше так не будет, ведь душа всего одна 🥳
46. На пример бейджей Гайдлайны 46
47. Все еще бейджи Кастом 47
48. 🥸 Операция «маппинг/схлоппинг» 48
49. А значит метрики 📊 Дизайн-система — это продукт 49 NPS, Adoption, TTM • Спрашиваем мнение коллег 💭 • NPS (Net Promoter Score) ☹😌 • Adoption 📈 • TTM (Time-to-market) ⏱
50. Выводы / советы 6 50
51. Так можно делать, но можно и не так Советы 51 • Определите ваших пользователей. Вам нужны их ожидания • Оцените, что уже есть, кто этим пользуется и какие есть проблемы* • Поможет план развития (и внедрения) • Оверинжинирить интересно и весело, но иногда не нужно • Синхронизируйте API
52. И так можно делать Еще советы 52 • Продайте ваш план пользователям • Убедитесь, что план и эффект все поняли • Сделайте кнопки • Покрасьте кнопки • (Опционально) Расскажите о своем неуспехе
53. Спасибо за внимание Евгений Ильин, ведущий iOS-разработчик
54. 54 Q&A