being material
Post on 12-Apr-2017
252 Views
Preview:
TRANSCRIPT
Being Material Акбашев Джалиль
gBeiMaterialn
WWW.REDMADROBOT.RU 2015
Долгое время информацию получали с листа бумаги
WWW.REDMADROBOT.RU 2015
Типографика Искусство расположения/создания композиции из наборного материала на плоскости листа.
WWW.REDMADROBOT.RU 2015
Типографика Искусство расположения/создания композиции из наборного материала на плоскости листа.
WWW.REDMADROBOT.RU 2015
WWW.REDMADROBOT.RU 2015
Скевоморфизм Направление в дизайне интерфейсов, целью которого является графическая имитация объектов реального мира
WWW.REDMADROBOT.RU 2015
Скевоморфизм Направление в дизайне интерфейсов, целью которого является графическая имитация объектов реального мира
Сложность в разработке
Идет вразрез с принципом — как
можно меньше интерфейса
WWW.REDMADROBOT.RU 2015
Плоский дизайн Минималистичный подход к дизайну объектов, который подчеркивает удобство использования
Много шума вокруг и хочется быть более сфокусированным
Люди привыкли к определенным символам и их можно упростить
M A T E R I A L D E S I G N
Давным-давно в Гугле…
majorgeeks.com zdnet.comcomputer.howstuffworks.com
Gmail.com Android Mobile Web
2011
Проект Кеннеди
theverge.com
loliboat.wordpress.com
Holo
smartphoneblogging.com
Gmail for Android (Holo)
Gmail.com (Kennedy)
2014
M A T E R I A L D E S I G N
WWW.REDMADROBOT.RU 2015
Основная цель Создать визуальный язык, который комбинирует классические принципы хорошего дизайна с инновациями и возможностями последних технологий и науки.
Согласованный опыт на всех платформах
Согласованный опыт на всех платформах
Более гибкая системадизайна для Android
Согласованный опыт на всех платформах
Более гибкая системадизайна для Android
Рациональный подход к дизайну интерфейса
Тактильные поверхности
Полиграфический дизайн
Осмысленнаяанимация
Адаптивныйдизайн
Тактильные поверхности
Поверхность?
Поверхность?
Поверхность?
Да. Нет.
Поверхность?
WWW.REDMADROBOT.RU 2015
Инструменты
WWW.REDMADROBOT.RU 2015
CardView
RecyclerView
NavigationView TextInputLayout FloatingActionButton Snackbar AppBarLayout, TabLayout CoordinatorLayout CollapsingToolbar
WWW.REDMADROBOT.RU 2015
До Material:
WWW.REDMADROBOT.RU 2015
Material:
WWW.REDMADROBOT.RU 2015
Пользуйтесь палитрой
WWW.REDMADROBOT.RU 2015
values/
colors.xml dimens.xml
text_style.xml style.xml
атрибуты
WWW.REDMADROBOT.RU 2015
colorPrimaryDark colorPrimary colorAccent
Расскажите дизайнерам про инструменты
Light Vibrant Vibrant Dark Vibrant
Light Muted Muted Dark Muted
WWW.REDMADROBOT.RU 2015
Почему не стоит копировать гайдлайны один в один?
WWW.REDMADROBOT.RU 2015
Section Title
12:30
Title 1 Title 1
Title 1 Title 1
WWW.REDMADROBOT.RU 2015
Explore
12:30
VIEW ALL
Type of Restaurant - $$$$$
Address Line 1.,Address Line 2
Name of Restaurant
Collections Section
Type of Restaurant - $$$$$
Address Line 1.,Address Line 2
Name of Restaurant
WWW.REDMADROBOT.RU 2015
Брэнд размывается и приложение может оказаться на «свалке» Google Play Store
WWW.REDMADROBOT.RU 2015
WWW.REDMADROBOT.RU 2015
WWW.REDMADROBOT.RU 2015
WWW.REDMADROBOT.RU 2015
Экспериментируйте и не бойтесь включать узнаваемые элементы вашего имиджа в приложение
WWW.REDMADROBOT.RU 2015
Pesto
WWW.REDMADROBOT.RU 2015
Crane Air
WWW.REDMADROBOT.RU 2015
Abisko
WWW.REDMADROBOT.RU 2015
Shrine
WWW.REDMADROBOT.RU 2015
The Fortnightly
WWW.REDMADROBOT.RU 2015
https://design.google.com/articles/expressing-brand-in-material/
WWW.REDMADROBOT.RU 2015
А зачем вообще обновлять дизайн?
WWW.REDMADROBOT.RU 2015
Empathyперевод с англ. — сочувствие
хороший дизайнер сопереживает пользователю
1. Позаботьтесь о «логистике»
2. Не стоит насиловать кнопку
3. Не всё должно быть на карточке
4. Стоит уделять внимание деталям
5. Анимация — дорогая штучка
6. Почитайте про принципы Гештальт психологии
Крутыесоветы!
Вопросы?
top related