ГАЙДЛАЙНЫ МОБИЛЬНЫХ СИСТЕМ (ЧАСТЬ 2 - MATERIAL DESIGN)

🤖Google Material Design System. Появился в 2014 году, с выходом Android 5.0. Ориентирован на создание реалистичного и пространственного визуального стиля. Он использует материалы, тени и анимации, чтобы придать интерфейсу интерактивность и ощущение глубины. Для создания глубины добавили тени, которые показывали, какой элемент главный, а какой ― второстепенный. Интерфейс можно сравнить с карточками или бумажными листами ― они непрозрачны, но могут сдвигаться, наслаиваться друг на друга, менять размер, а анимация подсказывает, как взаимодействовать. Material Design имеет свой собственный цветовой набор и типографию, которые способствуют согласованному визуальному опыту на разных платформах. Яркие цвета и четкая типография создают эффектный и запоминающийся стиль. Удобство в том, что в гайдлайне даются чёткие рекомендации по дизайну ― от размера кнопок до внешнего вида иконок. Обратная сторона такого подхода — создать уникальный дизайн, исходя из этих рекомендаций, сложнее, меньше просторов для творчества. Принципы Material Design:

• Depth. Иерархия строится за счёт расположения объектов на разных слоях, отделённых друг от друга при помощи теней, облегчая ориентацию в приложении.
• Material. Анимация подчиняется законам физики, ничего не появляется из «ниоткуда», будто взаимодействуешь с реальными объектами.
• Motion обеспечивает плавные и естественные анимации. Поверхности двигаются в трёх измерениях и также действуют по законам реального мира.
• За основу типографики взяты принципы печатного дизайна. Ключевые технические возможности:
• Единица измерения: Dip (dp)
• Размер экрана: 360×640 dp
• Использование теней: основной компонент для пространственной навигации
• Минимальный размер области для нажатия: 48×48 dp
• Основная навигационная панель: сверху
• Дополнительная навигационная панель: снизу или «гамбургер» (три полоски друг над другом)
• Уведомления в приложении: Уведомления ― не требуют действий. Диалоговые окна ― блокируют экран и требуют действия. Баннеры ― не блокируют экран, но требуют действия
• Переход назад: кнопка
• Механика управления: кнопками