Елена Гальцина LiveTyping Material design на практике. Как настроить работу команд дизайна и разработки, без жертв для продукта

1. Material design
на практике
Как настроить работу команд дизайна
и разработки, без жертв для продукта

2. Мобильные приложения
и веб-сервисы

3. • Куда смотреть и чем вдохновляться
• Где взять детали для дизайна
• Способы коммуникации между отделами
• Как полюбить Material если ты дизайнер с айфоном
• Узнать новое о цвете
ИЗ ДОКЛАДА ВЫ УЗНАЕТЕ
☞
CODEFEST2017

5. Молния!
Резкий скачок
качественных
приложений
в Google Play!
CODEFEST2017

6. Нет(
CODEFEST2017

7. Андроид
разработка
CODEFEST2017

8. Среднее время разработки выше,
трудозатраты больше, версии платформ,
размеры устройств, нехватка библиотек, сам
google не играет по своим правилам,
дизайнеры не понимают потому что у них
АЙФОНЫ!!!
АЛЕКСАНДРМ МИРКО, ТИМЛИД АНДРОИД
ОТДЕЛА
CODEFEST2017

10. Саня, что делать?!
CODEFEST2017

12. Правила нужны,
чтобы их нарушать!
CODEFEST2017

15. Плохой
UX
Что будет если не соблюдать
гайды в ios?
CODEFEST2017

16. Плохой
UX
А в android
CODEFEST2017

17. Да, и время разработки может
увеличиться с 1 часа до 40
CODEFEST2017

18. ¯ _ (ツ) _ / ¯
Ограничения не ограничения!
CODEFEST2017

19. КУДА СМОТРЕТЬ Ѳ_Ѳ CODEFEST2017

20. CINEMATICS: THE MOVIE GUIDE CODEFEST2017

21. ANY.DO - СПИСОК ДЕЛ CODEFEST2017

22. MEDIUM CODEFEST2017

23. TED CODEFEST2017

24. PLAYER FM CODEFEST2017

25. КУДА СМОТРЕТЬ Ѳ_Ѳ
+ Фичеринг
Хорошая лекция по теме goo.gl/YH8yLj
CODEFEST2017

26. Команд
а
CODEFEST2017

27. Полтора года недопониманий
устраняются за 4 часа
КУДА СМОТРЕТЬ Ѳ_Ѳ CODEFEST2017

28. ПЛАН
• Текстовые поля
• Кнопки
• Карточки
• Навигация
• Цвета
CODEFEST2017

30. Проживите, как андроид
пользователь
CODEFEST2017

31. CODEFEST2017

32. UI-Kit
CODEFEST2017

33. Саня, я нашель!
CODEFEST2017

34. По-дефолту она у нас вот такая https://monosnap.com/file/ObB9okVTCAb31Kh5k3N382cYPMtZo4.png
Что бы сделать как на картинке прийдется заморачиваться переопределением стилей, цветовых схем, селекторов и т.п. для android
< 5.0 и >= 5.0. Но на крайняк мы конечно можем такое сделать, просто будет в 3-4 раза дольше https://monosnap.com/file/
UK4ts6ZJjq7fteUb9OPBjKjUk1phED.png (P.S. хорошая идея написать уже свою кнопку для этого)
2. Я могу ошибаться, но кажется была проблема с использованием нескольких цветовых
Spannable для одного текста, а так же для разных кликабельных областей в виде тегов. @d.perevalov поправь
3. https://monosnap.com/file/VHQxsSCMmtCGlZi6Wt0DE3UAC2EUO2.png видимо это loader. Такого лоадера у нас нет. Вообще на счет
лоадеров нужно подискутировать, надо как то от них избавляться или минимизировать их количество заменив на что то менее
назязчивое и бросающееся в галаза
4. https://monosnap.com/file/6ZHg4WLskndALz63o3llm32iU2WebK.png В целом NavigationDrawer таким сделать можно, но поместить
отдельный item вниз нельзя. Снова же поправте меня, если я ошибаюсь.
5. Просто просьба - если есть возможность не делать горизонтальные слайдеры в вертикальных списках https://monosnap.com/file/
5MEC8fscCixDc6XC4Ptr3nn6TGkXSt.png С ними много проблем.
6. https://monosnap.com/file/HcOIhVjR44AWbspz70EVKiRC45YdZ4.png такие данные в одну строку вставлять не тру вэй. Динамически
меняющееся количество символов, длину ни предсказать, ни зафиксировать. Прийдется кого-то обрезать на узких девайсах или
при длинном site_name/twitter_account.
7. https://monosnap.com/file/EruK522J5sRkOEBfGwkeMHNqRf5j0i.png тут хочу обратить внимание что вставлена не полностью
функциональная карта, которую можно двигать, зумить и т.п, а Google Static Map API, который, по сути, представляет собой
статическую картинку с карты.
8. Воу, это вообще космос. Они вообще интересно сделали, но так нельзя https://monosnap.com/file/
OAGQ5VnLhWaKn74J3edVPUekdZMHU3.png С одной стороны у них кнопка SIGN IN растянулась, а с другой она над клавиатурой, а
FACEBOOK под, хотя статус бар исчез. Конечно может не стоит проводить параллель между этими двумя экранами, но она
напрашивается.
9. Да и вообще у них экраны сильно вытянуты https://monosnap.com/file/CBBht9dIr4hz8nf7S8bQWtN4PiwsXA.png по вертикали как-
будто бы все помещается, но в реальности это не так и каждый раз приходится самостоятельно принимать решение как будет
выглядеть экран при появлении клавиатуры. Думаю это хорошая тема для встречи.
10. Вот такие бейджики в NavigationView тоже не вешаются https://monosnap.com/file/9G72dQ7mbeS7VWqWSuYSzMCCvFjhHh.png
Надо свой писать.
Полностью кастомные элементы:
https://monosnap.com/file/Z4H3WyB2cbnV3ijbbpONtkTEve7bya.png https://monosnap.com/file/Is167ebU3TE0EMjnEsbyjT7b2O6EW6.png

35. UI-Kit нормального человека
CODEFEST2017

36. UI-KIT НОРМАЛЬНОГО ЧЕЛОВЕКА CODEFEST2017

37. UI-KIT НОРМАЛЬНОГО ЧЕЛОВЕКА CODEFEST2017

38. UI-KIT НОРМАЛЬНОГО ЧЕЛОВЕКА CODEFEST2017

39. UI-KIT НОРМАЛЬНОГО ЧЕЛОВЕКА CODEFEST2017

40. UI-KIT НОРМАЛЬНОГО ЧЕЛОВЕКА CODEFEST2017

41. UI-KIT НОРМАЛЬНОГО ЧЕЛОВЕКА CODEFEST2017

42. + 8 разделов
UI-KIT НОРМАЛЬНОГО ЧЕЛОВЕКА CODEFEST2017

43. Хитрый Цвет
CODEFEST2017

44. Основные Дополнительные

48. CODEFEST2017ХИТРЫЙ ЦВЕТ

49. • goo.gl/kKRVMp
• vk.com/livetyping
• www.facebook.com/LiveTyping
CODEFEST2017ХИТРЫЙ ЦВЕТ

51. GOO.GL/85EWYV
CODEFEST2017ХИТРЫЙ ЦВЕТ

52. • Встречаться
• Спрашивать
• Пользоваться библиотекой
• Аккуратно кастомить
• Взять в руки андроид телефон
ВЫВОДЫ CODEFEST2017

53. Спасибо
CODEFEST2017