Хороший дизайнер на вагу золота. Він підготує екрани, визначиться з кольорами та шрифтами, пропрацює додаток так, щоб він відповідав усім вимогам цільової платформи. Але буває, що клієнтські правки в готовий дизайн (або навіть готовий додаток) створюють дивовижні можливості для вправ з рефакторінгу для розробників, наприклад: - зміни шрифт у всьому додатку на мій улюблений - а можна список показати у вигляді сітки? - хочу щоб AppBar скролився разом з контентом. - ця картинка повинна вилітати за межі екрану, змінюючи колір, прокручуючись навколо своєї осі, повільно розчиняючись "у тумані". - і т.д. Якщо вас дратують подібні ситуації, то швидше за все ваш інструмент недостатньо хороший. ;) У цій доповіді ми візьмемо кілька екранів з Mobile UI Inspiration розсилок з найсміливішими дизайнерськими фантазіями і реалізуємо їх на Flutter. Обережно, буде багато коду!

1. Преодолевая
пропасть между
дизайнерами и
разработчиками
Александр Леущенко
UaMobile 2019

2. Про меня
● Head of Mobile Unit в Ciklum Digital
● В мобильной разработке с 2012 г.
● Когда-то Xamarin Certified Mobile Developer
● Писал под iOS, Android, WP, UWP, Xamarin
● Новая любовь - Flutter

3. Что такое дизайн?

4. Диза́йн — деятельность по
проектированию эстетических
свойств промышленных изделий
(«художественное
конструирование»), а также
результат этой деятельности.

5. Можно без дизайна?

6. Что бывает
когда
дизайном
занимаются
программисты

7. Что бывает
когда
дизайном
занимаются
программисты

8. Что делать программисту?

9. Что бывает
когда
дизайном
занимаются
дизайнеры
Royal Caribbean App — Navigation & Explore by Minh Pham ✪ for FΛNTΛSY

10. Что делать дизайнеру?

11. Ищите друг друга!

12. Как работать вместе?

13. Дизайн Разработка Продукт

14. Дизайн
Разработка
Продукт
Дизайн
Разработка

15. А на самом деле...

16. Что нарисовал дизайнер

17. Что пошло в релиз

19. Хороший мобильный дизайн - это долго?
● Векторные иконки - это непредсказуемо, а растровые - некрасиво
● Кастомные табы - это сложно
● Анимации будет реализованы в следующей версии (никогда)
● Поля ввода - это непросто
● еще 1001 причина

20. Мобильные фреймворки против нас :(

21. Попробуем с Flutter?

22. Что такое Flutter?
● Новый Framework от Google
● Сфокусирован на решении UI задач
● Поддерживает iOS, Android и Fuschia (Web и Desktop на подходе)
● Не адаптирует виджеты как Xamarin или React Native
● Поддерживает темы из коробки

23. Как делается UI?

24. Material
Cupertino

25. Flutter Gallery

26. Material

27. Cupertino

28. Let’s go bananas!
www.github.com/olexale/

29. Сколько раз от вас
это требовали?

30. Сколько раз от вас
это требовали?

31. Как общаться?

32. One language to rule them all

33. ● AppBarTheme
● BottomAppBarTheme
● ButtonTheme
● CardTheme
● ChipTheme
● DialogTheme
● IconTheme
● PageTransitionsTheme
● SliderTheme
● TabBarTheme
● …
Поддержка тем

34. Что такое тема?
● Цвет
● Размер
● Типографика
● Форма
● Поведение

35. Тему можно применять к частям
приложения

36. One more thing

37. Классные анимации!

38. FLARE by 2Dimensions

39. Анимация в Flutter
● Tween
● Physics-based

40. Tween
● Имеет начальное и конечное значение
● Ограничена по времени
● Описывается кривой

41. Physics-based
● Может подчиняться законам физики
● Часто интерактивна

42. Напишем что-нибудь красивое?