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

"Едим" дизайн по частям - Екатерина Батеева, Raiffeisen Bank

5d08ba0cd07942f2ddbf82e5b21ba5e7?s=47 FunCorp
February 15, 2020

"Едим" дизайн по частям - Екатерина Батеева, Raiffeisen Bank

5d08ba0cd07942f2ddbf82e5b21ba5e7?s=128

FunCorp

February 15, 2020
Tweet

Transcript

  1. Просто. Четко. Компетентно. «Едим» дизайн систему по частям Екатерина Батеева

  2. Просто. Четко. Компетентно. Батеева Екатерина iOS Developer 7 лет в

    QA 3 года в Mobile automation
  3. Что такое дизайн-система?

  4. Что такое дизайн система? • Цвета интерфейса, текста и фона;

    типографика … • Наборы UX-паттернов • Гайдлайны и руководство по стилю
  5. Примеры элементов дизайн системы

  6. Примеры элементов дизайн системы

  7. Методология «атомарного дизайна» Брэда Фроста

  8. Атомы

  9. Молекулы

  10. Организмы

  11. Шаблоны

  12. Страницы

  13. Поведение компонент а

  14. Правила хорошей дизайн системы • Переиспользование компонентов • Простота использования

    и отслеживания • Смена дизайна через изменение «атомов» и «молекул» • Стабильность системы
  15. 15

  16. Никогда не рано :)

  17. Бонусы, если проект один • Новые фичи внедряются быстрее •

    Единообразие элементов интерфейса • Пользователь учится работать с вашим приложением
  18. Нижний коллонтитул 18

  19. 19

  20. Просто. Четко. Компетентно. 20

  21. Просто. Четко. Компетентно. 21

  22. А в чем выгода?

  23. Просто. Четко. Компетентно. 23

  24. Просто. Четко. Компетентно. 24

  25. Просто. Четко. Компетентно. 25

  26. Поддержка дизайн системы

  27. 27 Первый шаг – экран со всеми компонентами • Легко

    находить компоненты • Sync с дизайнером • Отслеживание изменений • Нужна поддержка
  28. ios-snapshot-test-case 28 https://github.com/uber/ios-snapshot-test-case

  29. 29

  30. 30 func verifyView(identifier: String = "", remove options: RemoveOptions =

    .statusBar, hide elements: [XCUIElement] = []) {} Проблемы
  31. 31 Параметр recordMode // Запись скриншота (перезаписать если есть) recordMode

    = true // Запись скриншота не выполняется recordMode = false
  32. Проблемы • Долго работает • Сложный api. Просто с fullscreen

    • Погрешности в базовых элементах • Objective-C
  33. None
  34. None
  35. 35 Пример теста

  36. 36 Пример теста

  37. 37 Было let cornerRadius: CGFloat = 7 Стало let cornerRadius:

    CGFloat = 7 Немного изменим MainButton
  38. 38 Пример теста

  39. 39

  40. 40

  41. 41

  42. Преимущества • Быстрый • Очень удобен в Unit-тестах • Сравнивает

    не только картинки • Swift
  43. XCTestHTMLReport 43 https://github.com/TitouanVanBelle/XCTestHTMLReport

  44. 44

  45. Отчеты тяжелые 5 устройств 20 тестов 200МБ

  46. raiffeisen.ru Просто. Четко. Компетентно. Итоги ➢ Дизайн система экономит на

    разработке от 25% ➢ Она делает облегчает жизнь вашим пользователям ➢ Она может повысить NPS и оценки в сторах ➢ Создавайте экран со всеми компонентами ➢ Тестировать компоненты лучше по частям ➢ Отчеты тяжелые, нужно чистить место на агентах
  47. raiffeisen.ru Просто. Четко. Компетентно. Ссылки https://github.com/pointfreeco/swift-snapshot-testing https://github.com/uber/ios-snapshot-test-case https://github.com/TitouanVanBelle/XCTestHTMLReport

  48. raiffeisen.ru Просто. Четко. Компетентно. Вопросы