Елена Гальцина
Transcript of Елена Гальцина
![Page 1: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/1.jpg)
Material designна практикеКак настроить работу команд дизайна и разработки, без жертв для продукта
![Page 2: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/2.jpg)
Мобильные приложения и веб-сервисы
![Page 3: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/3.jpg)
• Куда смотреть и чем вдохновляться
• Где взять детали для дизайна
• Способы коммуникации между отделами
• Как полюбить Material если ты дизайнер с айфоном
• Узнать новое о цвете
ИЗ ДОКЛАДА ВЫ УЗНАЕТЕ
☞
CODEFEST2017
![Page 4: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/4.jpg)
![Page 5: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/5.jpg)
Молния! Резкий скачок качественных приложений в Google Play!
CODEFEST2017
![Page 6: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/6.jpg)
Нет(CODEFEST2017
![Page 7: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/7.jpg)
Андроид разработка
CODEFEST2017
![Page 8: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/8.jpg)
Среднее время разработки выше, трудозатраты больше, версии платформ, размеры устройств, нехватка библиотек, сам google не играет по своим правилам, дизайнеры не понимают потому что у них АЙФОНЫ!!!
АЛЕКСАНДРМ МИРКО, ТИМЛИД АНДРОИД ОТДЕЛА CODEFEST2017
![Page 9: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/9.jpg)
![Page 10: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/10.jpg)
Саня, что делать?!
CODEFEST2017
![Page 11: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/11.jpg)
![Page 12: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/12.jpg)
Правила нужны, чтобы их нарушать!
CODEFEST2017
![Page 13: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/13.jpg)
![Page 14: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/14.jpg)
![Page 15: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/15.jpg)
Плохой UX
Что будет если не соблюдать гайды в ios?
CODEFEST2017
![Page 16: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/16.jpg)
Плохой UX
А в androidCODEFEST2017
![Page 17: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/17.jpg)
Да, и время разработки может увеличиться с 1 часа до 40
CODEFEST2017
![Page 18: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/18.jpg)
¯ \ _ (ツ) _ / ¯
Ограничения не ограничения!CODEFEST2017
![Page 19: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/19.jpg)
КУДА СМОТРЕТЬ Ѳ_Ѳ CODEFEST2017
![Page 20: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/20.jpg)
CINEMATICS: THE MOVIE GUIDE CODEFEST2017
![Page 21: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/21.jpg)
ANY.DO - СПИСОК ДЕЛ CODEFEST2017
![Page 22: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/22.jpg)
MEDIUM CODEFEST2017
![Page 23: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/23.jpg)
TED CODEFEST2017
![Page 24: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/24.jpg)
PLAYER FM CODEFEST2017
![Page 25: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/25.jpg)
КУДА СМОТРЕТЬ Ѳ_Ѳ
+ ФичерингХорошая лекция по теме goo.gl/YH8yLj
CODEFEST2017
![Page 26: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/26.jpg)
Команда
CODEFEST2017
![Page 27: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/27.jpg)
Полтора года недопониманий устраняются за 4 часа
КУДА СМОТРЕТЬ Ѳ_Ѳ CODEFEST2017
![Page 28: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/28.jpg)
ПЛАН
• Текстовые поля
• Кнопки
• Карточки
• Навигация
• Цвета
CODEFEST2017
![Page 29: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/29.jpg)
![Page 30: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/30.jpg)
Проживите, как андроид пользователь
CODEFEST2017
![Page 31: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/31.jpg)
CODEFEST2017
![Page 32: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/32.jpg)
UI-Kit
CODEFEST2017
![Page 33: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/33.jpg)
Саня, я нашель!CODEFEST2017
![Page 34: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/34.jpg)
По-дефолту она у нас вот такая 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 https://monosnap.com/file/UHcOZryvVLwIR24ZmtB6q159eSNyKV.png
![Page 43: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/43.jpg)
Хитрый Цвет
CODEFEST2017
![Page 44: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/44.jpg)
Основные Дополнительные
![Page 45: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/45.jpg)
![Page 46: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/46.jpg)
![Page 47: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/47.jpg)
![Page 48: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/48.jpg)
CODEFEST2017ХИТРЫЙ ЦВЕТ
![Page 49: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/49.jpg)
• goo.gl/kKRVMp
• vk.com/livetyping
• www.facebook.com/LiveTyping
CODEFEST2017ХИТРЫЙ ЦВЕТ
![Page 50: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/50.jpg)
![Page 52: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/52.jpg)
• Встречаться
• Спрашивать
• Пользоваться библиотекой
• Аккуратно кастомить
• Взять в руки андроид телефон
ВЫВОДЫ CODEFEST2017
![Page 53: Елена Гальцина](https://reader030.fdocuments.net/reader030/viewer/2022021507/58ed4c5b1a28ab95548b468d/html5/thumbnails/53.jpg)
Спасибо
CODEFEST2017