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

https://2017.codefest.ru/lecture/1194

Есть множество хороших UI-китов для iOS, но с Android-китами все не так просто: дизайнерам нравится, а у разработчиков дергается глаз.

Мы написали свой UI-кит для Android. В рамках своего доклада мы хотим:
● показать кит, который выдержит требования разработки и будет отвечать стандарту Material Design;
● рассказать о процессе нашей работы над китом во всех нюансах

Цель:
● дизайнеры получат красивый, разнообразный и правильный кит;
● разработчики получат рабочий дизайн.

Transcript

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