Upload
codefest
View
50
Download
0
Embed Size (px)
Citation preview
Material designна практикеКак настроить работу команд дизайна и разработки, без жертв для продукта
Мобильные приложения и веб-сервисы
• Куда смотреть и чем вдохновляться
• Где взять детали для дизайна
• Способы коммуникации между отделами
• Как полюбить Material если ты дизайнер с айфоном
• Узнать новое о цвете
ИЗ ДОКЛАДА ВЫ УЗНАЕТЕ
☞
CODEFEST2017
Молния! Резкий скачок качественных приложений в Google Play!
CODEFEST2017
Нет(CODEFEST2017
Андроид разработка
CODEFEST2017
Среднее время разработки выше, трудозатраты больше, версии платформ, размеры устройств, нехватка библиотек, сам google не играет по своим правилам, дизайнеры не понимают потому что у них АЙФОНЫ!!!
АЛЕКСАНДРМ МИРКО, ТИМЛИД АНДРОИД ОТДЕЛА CODEFEST2017
Саня, что делать?!
CODEFEST2017
Правила нужны, чтобы их нарушать!
CODEFEST2017
Плохой UX
Что будет если не соблюдать гайды в ios?
CODEFEST2017
Плохой UX
А в androidCODEFEST2017
Да, и время разработки может увеличиться с 1 часа до 40
CODEFEST2017
¯ \ _ (ツ) _ / ¯
Ограничения не ограничения!CODEFEST2017
КУДА СМОТРЕТЬ Ѳ_Ѳ CODEFEST2017
CINEMATICS: THE MOVIE GUIDE CODEFEST2017
ANY.DO - СПИСОК ДЕЛ CODEFEST2017
MEDIUM CODEFEST2017
TED CODEFEST2017
PLAYER FM CODEFEST2017
КУДА СМОТРЕТЬ Ѳ_Ѳ
+ ФичерингХорошая лекция по теме goo.gl/YH8yLj
CODEFEST2017
Команда
CODEFEST2017
Полтора года недопониманий устраняются за 4 часа
КУДА СМОТРЕТЬ Ѳ_Ѳ CODEFEST2017
ПЛАН
• Текстовые поля
• Кнопки
• Карточки
• Навигация
• Цвета
CODEFEST2017
Проживите, как андроид пользователь
CODEFEST2017
CODEFEST2017
UI-Kit
CODEFEST2017
Саня, я нашель!CODEFEST2017
По-дефолту она у нас вот такая 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
UI-Kit нормального человекаCODEFEST2017
UI-KIT НОРМАЛЬНОГО ЧЕЛОВЕКА CODEFEST2017
UI-KIT НОРМАЛЬНОГО ЧЕЛОВЕКА CODEFEST2017
UI-KIT НОРМАЛЬНОГО ЧЕЛОВЕКА CODEFEST2017
UI-KIT НОРМАЛЬНОГО ЧЕЛОВЕКА CODEFEST2017
UI-KIT НОРМАЛЬНОГО ЧЕЛОВЕКА CODEFEST2017
UI-KIT НОРМАЛЬНОГО ЧЕЛОВЕКА CODEFEST2017
Хитрый Цвет
CODEFEST2017
Основные Дополнительные
CODEFEST2017ХИТРЫЙ ЦВЕТ
• goo.gl/kKRVMp
• vk.com/livetyping
• www.facebook.com/LiveTyping
CODEFEST2017ХИТРЫЙ ЦВЕТ
• Встречаться
• Спрашивать
• Пользоваться библиотекой
• Аккуратно кастомить
• Взять в руки андроид телефон
ВЫВОДЫ CODEFEST2017
Спасибо
CODEFEST2017