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

Елена Гальцина

Embed Size (px)

Citation preview

Page 1: Елена Гальцина

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

Page 2: Елена Гальцина

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

Page 3: Елена Гальцина

• Куда смотреть и чем вдохновляться

• Где взять детали для дизайна

• Способы коммуникации между отделами

• Как полюбить Material если ты дизайнер с айфоном

• Узнать новое о цвете

ИЗ ДОКЛАДА ВЫ УЗНАЕТЕ

CODEFEST2017

Page 4: Елена Гальцина
Page 5: Елена Гальцина

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

CODEFEST2017

Page 6: Елена Гальцина

Нет(CODEFEST2017

Page 7: Елена Гальцина

Андроид разработка

CODEFEST2017

Page 8: Елена Гальцина

Среднее время разработки выше, трудозатраты больше, версии платформ, размеры устройств, нехватка библиотек, сам google не играет по своим правилам, дизайнеры не понимают потому что у них АЙФОНЫ!!!

АЛЕКСАНДРМ МИРКО, ТИМЛИД АНДРОИД ОТДЕЛА CODEFEST2017

Page 9: Елена Гальцина
Page 10: Елена Гальцина

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

CODEFEST2017

Page 11: Елена Гальцина
Page 12: Елена Гальцина

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

CODEFEST2017

Page 13: Елена Гальцина
Page 14: Елена Гальцина
Page 15: Елена Гальцина

Плохой UX

Что будет если не соблюдать гайды в ios?

CODEFEST2017

Page 16: Елена Гальцина

Плохой UX

А в androidCODEFEST2017

Page 17: Елена Гальцина

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

CODEFEST2017

Page 18: Елена Гальцина

¯ \ _ (ツ) _ / ¯

Ограничения не ограничения!CODEFEST2017

Page 19: Елена Гальцина

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

Page 20: Елена Гальцина

CINEMATICS: THE MOVIE GUIDE CODEFEST2017

Page 21: Елена Гальцина

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

Page 22: Елена Гальцина

MEDIUM CODEFEST2017

Page 23: Елена Гальцина

TED CODEFEST2017

Page 24: Елена Гальцина

PLAYER FM CODEFEST2017

Page 25: Елена Гальцина

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

+ ФичерингХорошая лекция по теме goo.gl/YH8yLj

CODEFEST2017

Page 26: Елена Гальцина

Команда

CODEFEST2017

Page 27: Елена Гальцина

Полтора года недопониманий устраняются за 4 часа

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

Page 28: Елена Гальцина

ПЛАН

• Текстовые поля

• Кнопки

• Карточки

• Навигация

• Цвета

CODEFEST2017

Page 29: Елена Гальцина
Page 30: Елена Гальцина

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

CODEFEST2017

Page 31: Елена Гальцина

CODEFEST2017

Page 32: Елена Гальцина

UI-Kit

CODEFEST2017

Page 33: Елена Гальцина

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

Page 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 https://monosnap.com/file/UHcOZryvVLwIR24ZmtB6q159eSNyKV.png

Page 35: Елена Гальцина

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

Page 36: Елена Гальцина

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

Page 37: Елена Гальцина

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

Page 38: Елена Гальцина

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

Page 39: Елена Гальцина

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

Page 40: Елена Гальцина

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

Page 41: Елена Гальцина

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

Page 42: Елена Гальцина

+ 8 разделов

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

Page 43: Елена Гальцина

Хитрый Цвет

CODEFEST2017

Page 44: Елена Гальцина

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

Page 45: Елена Гальцина
Page 46: Елена Гальцина
Page 47: Елена Гальцина
Page 48: Елена Гальцина

CODEFEST2017ХИТРЫЙ ЦВЕТ

Page 49: Елена Гальцина

• goo.gl/kKRVMp

• vk.com/livetyping

• www.facebook.com/LiveTyping

CODEFEST2017ХИТРЫЙ ЦВЕТ

Page 50: Елена Гальцина
Page 51: Елена Гальцина

GOO.GL/85EWYV

CODEFEST2017ХИТРЫЙ ЦВЕТ

Page 52: Елена Гальцина

• Встречаться

• Спрашивать

• Пользоваться библиотекой

• Аккуратно кастомить

• Взять в руки андроид телефон

ВЫВОДЫ CODEFEST2017

Page 53: Елена Гальцина

Спасибо

CODEFEST2017