[Pluralsight] Material Design - делаем красивые, стильные, модные приложения под Android. Часть 3
Год выпуска: 02/2016
Производитель: Pluralsight
Продолжительность: 01:18:10
Оригинальное название: Getting Started with Android Material Design
Поверхности и края элементов в данном направлении дизайна создают визуальные образы и сигналы, которые передают подсказки и помогают интуитивно ориентироваться, как если бы это происходило в реальном мире.
Использование знакомых тактильных характеристик и реалистичное освещение помогают пользователю визуально отделить главные объекты от второстепенных, понять отношение объекта к его окружению и определить его назначение.
Material Design является системой, рационализирующей пространство и движение. Дизайн основывается на тактильной реальности, вдохновленной возможностями бумаги и чернил, но открытой для воображения и магии.
2. Поверхности интуитивно понятны
Плоскости и грани передают визуальные сигналы, основанные на нашем восприятии реальности. Использование знакомых тактильных атрибутов позволяет обратиться к первичным частям нашего мозга и помогает быстро понять «представляемое».
3. Размерность рождает взаимодействие
Основы света, поверхности и движения являются ключевыми для взаимодействия объектов. Реалистичное освещение делит пространство и акцентирует внимание на движущихся частях.
4. Единый адаптивный дизайн
Единый дизайн для всего. Каждое устройство отражает свой взгляд на те же базовые элементы. Каждый вид адаптирован к размеру и взаимодействию для каждого устройства. Цвета, иконография, иерархия и пространственные отношения остаются неизменными.
5. Шрифты, графика, цвета
Отчетливый дизайн создает иерархию, понимание и помогает сфокусироваться. Специально подобранные цвета, использование пространства от края до края, крупные шрифты и нарочитое/умышленное использование белого позволяет полностью погрузить пользователя в процесс взаимодействия, сделать его более ясным и понятным.
6. Первичные действия
Действие пользователя и есть суть дизайна. Первичные действия преобразуют весь дизайн. В них акцент делается на основную функциональность и сразу бросаются в глаза пользователя.
7. Пользователи инициируют изменения
Изменения в интерфейсе происходят от действий пользователя. Движение усиливает опыт первичного действия.
8. Анимационная хореография
Все действия происходят в единой среде. Объекты, которые видит пользователь, не нарушают весь остальной опыт использования даже после преобразований и реорганизаций.
9. Движение обеспечивает смысл
Движение имеет смысл и оно необходимо для привлечения внимания. Переходы эффективны.
Пример Material Design:
Содержание на русском. Часть 3
07. Реализация навигационной секции (Navigation Drawer)
07_01-введение в навигационную секцию с ее руководством по проектированию
07_02-Установка проекта
07_03-полная секция навигации высоты
07_04-подрезанная навигационная секция
08. Используйте анимацию
08_01-обзор
08_02-введение в волновой эффект
08_03-реализация анимации пульсации
08_04-Переход действия взрывает анимацию кодом
08_05-Переход действия взрывает анимацию XML
08_06-Понижение перехода действия и исчезает анимация
08_07-совместно-используемый переход элемента
08_08-Перекрытие перехода действия
08_09-Сводка курса
Содержание на английском. Часть 3
07. Implementing the Navigation Drawer
07_01-Introduction to Navigation Drawer with Its Design Guidelines
07_02-Project Setup
07_03-Full Height Navigation Drawer
07_04-Clipped Navigation Drawer
08. Using Animation
08_01-Overview
08_02-Introduction to Ripple Effect
08_03-Implementing Ripple Animation
08_04-Activity Transition Explode Animation by Code
08_05-Activity Transition Explode Animation by XML
08_06-Activity Transition Slide and Fade Animation
08_07-Shared Element Transition
08_08-Activity Transition Overlap
08_09-Course Summary
// Сам курс не покупается, а берется в паблике
// Как наберется народ, найдется и переводчик и организатор
// Заинтересовались – подписывайтесь!
Собираем на перевод
[Pluralsight] Material Design - делаем красивые, стильные, модные приложения под Android. Часть 3
[Pluralsight] Material Design - делаем красивые, стильные, модные приложения под Android. Часть 3
Год выпуска: 02/2016
Производитель: Pluralsight
Продолжительность: 01:18:10
Оригинальное название: Getting Started with Android Material Design
Material Design — новое революционное направление дизайна Google.
Material как метафора
Цитата Google: "Material design базируется на тактильной реальности, вдохновлен изучением бумаги и чернил, технологически продвинут и открыт для воображения и магии."Material как метафора
Поверхности и края элементов в данном направлении дизайна создают визуальные образы и сигналы, которые передают подсказки и помогают интуитивно ориентироваться, как если бы это происходило в реальном мире.
Эволюция digital design
Большинство из нас взаимодействуют с цифровым миром большую часть жизни. Для нас уже не столь критично, чтобы виртуальные кнопки были похожи на их физические аналоги. И чем быстрее к этому привыкнет большинство, тем быстрее digital design сможет двигаться вперед.Наглядность как фундаментальная основа
Поверхности и края элементов в данном направлении дизайна создают визуальные образы и сигналы, которые передают подсказки и помогают интуитивно ориентироваться, как если бы это происходило в реальном мире.Использование знакомых тактильных характеристик и реалистичное освещение помогают пользователю визуально отделить главные объекты от второстепенных, понять отношение объекта к его окружению и определить его назначение.
Пример приложения: до и после Material Design:
Google не просто перевела Android на новый дизайн, но и сразу подготовила необходимые наглядные руководства с демонстрацией реализации основных элементов для разработчиков софта.
9 принципов Material Design
1. Материал — это метафораMaterial Design является системой, рационализирующей пространство и движение. Дизайн основывается на тактильной реальности, вдохновленной возможностями бумаги и чернил, но открытой для воображения и магии.
2. Поверхности интуитивно понятны
Плоскости и грани передают визуальные сигналы, основанные на нашем восприятии реальности. Использование знакомых тактильных атрибутов позволяет обратиться к первичным частям нашего мозга и помогает быстро понять «представляемое».
3. Размерность рождает взаимодействие
Основы света, поверхности и движения являются ключевыми для взаимодействия объектов. Реалистичное освещение делит пространство и акцентирует внимание на движущихся частях.
4. Единый адаптивный дизайн
Единый дизайн для всего. Каждое устройство отражает свой взгляд на те же базовые элементы. Каждый вид адаптирован к размеру и взаимодействию для каждого устройства. Цвета, иконография, иерархия и пространственные отношения остаются неизменными.
5. Шрифты, графика, цвета
Отчетливый дизайн создает иерархию, понимание и помогает сфокусироваться. Специально подобранные цвета, использование пространства от края до края, крупные шрифты и нарочитое/умышленное использование белого позволяет полностью погрузить пользователя в процесс взаимодействия, сделать его более ясным и понятным.
6. Первичные действия
Действие пользователя и есть суть дизайна. Первичные действия преобразуют весь дизайн. В них акцент делается на основную функциональность и сразу бросаются в глаза пользователя.
7. Пользователи инициируют изменения
Изменения в интерфейсе происходят от действий пользователя. Движение усиливает опыт первичного действия.
8. Анимационная хореография
Все действия происходят в единой среде. Объекты, которые видит пользователь, не нарушают весь остальной опыт использования даже после преобразований и реорганизаций.
9. Движение обеспечивает смысл
Движение имеет смысл и оно необходимо для привлечения внимания. Переходы эффективны.
Пример Material Design:
Содержание на русском. Часть 3
07. Реализация навигационной секции (Navigation Drawer)
07_01-введение в навигационную секцию с ее руководством по проектированию
07_02-Установка проекта
07_03-полная секция навигации высоты
07_04-подрезанная навигационная секция
08. Используйте анимацию
08_01-обзор
08_02-введение в волновой эффект
08_03-реализация анимации пульсации
08_04-Переход действия взрывает анимацию кодом
08_05-Переход действия взрывает анимацию XML
08_06-Понижение перехода действия и исчезает анимация
08_07-совместно-используемый переход элемента
08_08-Перекрытие перехода действия
08_09-Сводка курса
Содержание на английском. Часть 3
07. Implementing the Navigation Drawer
07_01-Introduction to Navigation Drawer with Its Design Guidelines
07_02-Project Setup
07_03-Full Height Navigation Drawer
07_04-Clipped Navigation Drawer
08. Using Animation
08_01-Overview
08_02-Introduction to Ripple Effect
08_03-Implementing Ripple Animation
08_04-Activity Transition Explode Animation by Code
08_05-Activity Transition Explode Animation by XML
08_06-Activity Transition Slide and Fade Animation
08_07-Shared Element Transition
08_08-Activity Transition Overlap
08_09-Course Summary
// Сам курс не покупается, а берется в паблике
// Как наберется народ, найдется и переводчик и организатор
// Заинтересовались – подписывайтесь!