Дизайн материала, пользовательский интерфейс в соответствии с Google

В современном сценарии, если вы хотите включить движение, вам придется сделать его реальным, уважая законы физики и функциональность вещей в реальном мире. Действительно, пользователи привыкли чувствовать движение в своей повседневной жизни. Это привлекает их внимание и помогает им лучше понять функциональность вещей.

20 основных принципов дизайна материала

Дизайн материала представляет собой набор принципов и руководящих принципов, которые направляют дизайн современных и элегантных пользовательских интерфейсов (IU). Запуск Google В 2014 году, этот визуальный язык направлен на создание последовательных и гармоничных интерфейсов на всех устройствах, независимо от операционной системы или используемого интерфейса.

Дизайн материала основан на трех основных столбах: физическая вселенная, цвет и пространство. Каждый компонент интерфейса должен смешаться с этой вселенной, уважая пропорции и цвета, специфичные для каждого материала. Пространства также должны быть хорошо определены, чтобы пользователь мог легко перемещаться из одного элемента к другому.

Что такое дизайн материала ?

Это что ?

Дизайн материала – это набор правил дизайна, созданный Google в 2014 году. Этот инструмент облегчает управление компонентами платформы. Действительно, дизайнеры Google поняли, что компоненты должны обладать конкретными физическими свойствами.

Таким образом, дизайн материала включает директивы для всего:

• Ширина
• Скорость
• Тень

• Типография
• Решачны
• Космос
• Цвет
• Масштаб
• Визуализация

Таким образом, пользователи складываются в контакт с физическими элементами реального мира.

Аналогичным образом, дизайн материала – это не только вопрос показателя дизайнеров, как работать над внешностью продуктов и услуг. Это также позволяет дизайнерам создавать преднамеренные проекты.

Зачем выбирать дизайн материала ?

Как и большинство систем дизайна, дизайн материалов был создан для обеспечения лучшего пользовательского опыта на различных устройствах и платформах. Цель состоит в том, чтобы у пользователей был последовательный опыт .

Дизайн материала не является простым набором руководств по стилю. Это полная система проектирования.

В отличие от других менее полных систем проектирования, он может управлять ситуациями проектирования, со сложными вариантами использования.

Кроме того, дизайн материала – это довольно гибкая библиотека дизайна. В директивах большая часть специфики реализации дизайна полностью оставлена ​​дизайнеру.

Список принципов дизайна материала

Принцип 1: Ознакомьтесь с ключевыми ресурсами

Если вы хотите получить конкретные знания о дизайне материалов, лучшее решение – проконсультироваться с официальным ресурсом Google.

Он непрерывно обновляется и содержит все полные и необходимые детали для проектирования дизайнов материалов.

Лучшее преимущество в отношении этого ресурса – это то, что он не ограничивается только конкретными аспектами в Android. Напротив, он охватывает весь аспект дизайна материала, в любом проекте вообще тип приложения или в Интернете.

Желательно просмотреть хотя бы первые главы этого ресурса, чтобы ознакомиться с фундаментальными принципами.

Принцип 2: Знайте, что «материал» находится в дизайне материала

Название материала дизайн далеко не безвредный. Дизайн материала является имитацией материального и физического мира. Она вдохновлена ​​ее текстурами, даже из -за отражения света и проекции теней. Поверхности материала изобретают бумагу и подпорку чернил.

Действительно, центральная идея принципов материального дизайна сосредоточена на создании дизайна, имитируя объекты реального мира.

Принцип 3: Используйте тени, чтобы определить визуальные иерархии

Основные инструменты дизайна материала:

• Края
• Поверхности
• Осветительные приборы
• Реалистичные тени

Например, тени помогают вам расставить приоритеты в различных элементах, чтобы иметь полный дизайн.

Принцип 4: Используйте яркие цвета

Дизайн материала, несомненно, является дизайном, созданным в минималистском подходе. Другими словами, вам не нужно использовать много инструментов дизайна и стиля.

Одна из немногих материалов, которые вы можете использовать, – это цвет. Именно яркий цвет. Действительно, яркие цвета играют важную роль в улучшении дизайна материала. Они привлекают внимание пользователей и поощряют их взаимодействовать с дизайном.

Принцип 5: не пренебрегайте первичным цветом и акцентом

Лучший способ адаптировать этот принцип к любому типу дизайна – выбрать три оттенка, которые будут служить основной палитрой, с цветом, который будет служить акцентом.

Основные цвета, которые вы выберете, могут быть использованы в ключевых элементах интерфейса, включая:

• Поля
• Коробки
• Фон
• Шрифты и т. Д.

И цвет акцента, как следует из его названия, подчеркивает и привлекает внимание к основному элементу. Помните, что выбранный акцентный цвет должен быть более контрастным, чем в основных цветах.

Принцип 6: хорошо использовать белые пространства

Белые пространства играют ключевую роль в макете текста и типографии. В действительности, White Space – это инструмент для привлечения внимания, пользователя и направления их внимания на конкретный элемент.

Так что не стесняйтесь:

• Используйте большую типографику для основных названий
• Добавить много белых мест
• Держите достаточно пустого места в своем глобальном дизайне.

Принцип 7: Следуйте новой тенденции изображений с краем до края

Конструкции материалов полностью адаптированы к изображению. Итак, если вы решили добавить изображения в ваш дизайн, они должны играть главную роль.

Изображения, включенные в конструкцию материала, должны следовать режиме с краем до края. То есть не должно быть поля, отделяющая край изображения от края окна или экрана.

Принцип 8: Все должно быть реагирующим

Сделайте вещи доступными и пригодными для использования на каждом устройстве, независимо от размера его экрана, является одним из основных принципов дизайна материала. Цель состоит в том, чтобы предложить последовательный опыт. Таким образом, пользователь не будет чувствовать себя смущенным во время перехода от одного устройства к другому, потому что он не будет получать новый интерфейс каждый раз, когда он будет менять устройство.

В этом случае дизайн должен быть реагирующий. К счастью, благодаря расширенным фреймвомерам, половина вашей работы уже сделана. Следовательно, создание реактивного дизайна не будет сложной задачей для вас.

Принцип 9: Размеры

В Интернете ось z используется для суперпозиции, а не для перспективы. С другой стороны, 3D World основан на оси Y.

Конструктивный материал в основном использует 3D, поэтому ось Y. Просто посмотрите на дизайн Google, чтобы заметить изометрическую перспективу. Этот способ дизайна вдохновлен реальным миром, отсюда и название «Материал».

Принцип 10: Помните, успех подробно

В дизайне материала все должно быть просто. Лучшим примером может быть скеоморфный дизайн . Этот метод направлен на имитацию реальных объектов при разработке виртуальных объектов. Поэтому вы должны убедиться, что каждый элемент вашего дизайна выглядит как можно больше, к вещам реальной жизни.

Принцип 11: Движение должно иметь значение

Согласно Google, движение придает смысл дизайну. Когда вы работаете с дизайном материала, движение – это компонент, который должен быть включен.

В дизайне материала движение должно иметь эти 3 характеристики:

1. Быть информативным: он должен быть известен пользователям, где и когда было доступно действие.
2. Помогите сосредоточить и направлять пользователей к наиболее важным частям страницы.
3. Быть выразительным и добавить немного личности и динамизма в интерфейс.

Принцип 12: Движение должно быть подлинным

В современном сценарии, если вы хотите включить движение, вам придется сделать его реальным, уважая законы физики и функциональность вещей в реальном мире. Действительно, пользователи привыкли чувствовать движение в своей повседневной жизни. Это привлекает их внимание и помогает им лучше понять функциональность вещей.

Вот почему Google зарезервировал отдельный раздел директив дизайна материала, чтобы подробно описать концепцию подлинного движения.

Принцип 13: Ускорение и замедление движений

Вы должны предложить четкий и практический переход для пользователей. Процесс движения должен быть вероятным и реалистичным, поскольку дизайн материала направлен на воспроизведение явлений реального мира.

Дизайнеры должны найти лучшее время для каждого движения объекта.

С одной стороны, чрезмерная медлительность элементов может отвлекать пользователей и даже оказывать негативное влияние на поток пользователей. С другой стороны, слишком динамические движения могут нарушать пользователей Интернета.

В этом случае вы должны быть в правой средней части, обеспечивая оптимальную продолжительность и хорошую читаемость анимации. Необходимо дать пользователям достаточно времени, чтобы они могли заметить изменения. Но не заставляйте их ждать. Исследования доказывают, что от 200 до 500 мс являются лучшими скоростями анимации.

Принцип 14: Воспользуйтесь анимациями иконы

Иногда значки могут быть созданы с помощью кнопок контекста с круговым эффектом откровения.

Это правда, что пользователи интернета не часто замечают эти детали, но они важны для того, чтобы оказать положительное влияние на глобальный пользовательский опыт.

Принцип 15: Создайте разные времена для разных движений

Анимированные объекты, которые появляются один за другим, более интересны и более живы. Такой подход предлагает пользователям возможность взглянуть на каждый элемент.

С другой стороны, представьте все элементы страницы одновременно сбивает с толку пользователей, потому что они не знают, где смотреть.

Дизайн материала, пользовательский интерфейс в соответствии с Google !

Дизайн материала – это визуальный и интерактивный язык, созданный Google. Но это также руководство по разработке графического интерфейса (система проектирования). Этот дизайн «материал», потому что он вдохновлен реальными объектами, бумагой и чернилами, что отличается от плоского дизайна. Google использовал дизайн материала для объединения графического стиля своих приложений и платформ. Таким образом, его интерфейс имеет то преимущество, что он очень подходит для использования для любого устройства и всех разрешений дисплея. Она также доступна. Конструкция материала оптимизирует UX, предлагая ресурсы для разработчиков и дизайнеров интерфейса. Как и в любом графическом токе, у него есть свои любители и хулители.

Дизайн материала, прежде всего, является метафорой. Материальная метафора как объединяющая теория рационализированного пространства и системы движения. Материал закреплен тактильной реальностью, вдохновленным изучением бумаги и чернил, но технологически продвинутым и открытым для воображения и магии.

Что такое дизайн материала ?

Название «дизайн материала» соответствует набору Правила дизайна Предлагается Google. Иногда он переводится с помощью «дизайна материала» или «контекстуального дизайна». Это было первым дизайном, предназначенным для мобильных приложений (первые мобильные устройства). Затем он стал одной из основных тенденций в дизайне интерфейса. Подход Google напоминает Плоский дизайн (или плоский дизайн): минимализм, геометрические формы и красочные, без лишнего (в отличие от Skeuomorphism). Но в этом случае это плоский дизайн … с толщиной и облегчением. Действительно, вот основные характеристики:

• А метафора бумага и чернила из цифрового оборудования.
• Смелый дизайн и диаграмма.
• Создание движения Чтобы улучшить доступность и UX. Действия пользователя вызывают значительные микроинтракции.

Полимерная библиотека

Чтобы использовать графические элементы дизайна материала (бумажные элементы) и основные компоненты (основные элементы), Google создал свою библиотеку, полимер, предназначенную для разработчиков веб -приложений. С тех пор Google предлагает разные сайты и инструменты, чтобы помочь дизайнерам дизайнеры с этим стилем дизайна.

См. Это объявление в форме «манифесто», которое можно найти при введении справочного сайта материала.Io:

«Мы бросили вызов созданию визуального языка для наших пользователей, которые синтезируют классические принципы хорошего дизайна, инновационных и возможностей, предлагаемых технологиями и наукой. Мы называем это: дизайн материала.»

WebDesign в соответствии с Google

Поэтому дизайн материала отличается от плоской конструкции. Это новый вид веб -дизайна. Можно сказать, что он Отзывчивый WebDesign (Auto Adaptive), сосредоточенная на пользовательском опыте. Цель состоит в том, чтобы получить дизайн:

• Интуитивно понятный Для всех пользователей (включая не опытный)
• Подходит для всех поддержки (компьютер, планшет, смартфон и т. Д.)
• Интерактивный Спасибо динамическим анимациям.
• Гомогенный между всеми интерфейсами

Согласно Google, этот дизайн использует технологические и научные возможности для предоставления веб -решений для современной эргономики и задач дизайна. В видео ниже дизайнеры Google выражают свои первоначальные мотивы, способ, которым они работали, и «физический» опыт. Мы отмечаем, что если этот язык дизайна закреплен в реальности, он оставляет важное место для воображения пользователя. Термин «магия» часто возвращается о дизайне материала.

Перепроектирование Google

Чтобы полностью понять подход Google, вы должны вернуться к происхождению Google и важности, которую фирма Montain View атаковала дизайн. Ну, не очень … согласно инициаторам дизайна материала.

Просмотр этого видео дает нам хорошее представление о важности переноса «видения» для выполнения этого проекта: перепроектирование Google.

Почему дизайн материала ?

Видимо в версии 5.0 Android, дизайн материала был представлен впервые 25 июня 2014 года Matias Durate, директором пользователя Android в Google. Это было частью конференции ввода/вывода Google. С этой новой хартией дизайна Google создал свой собственный Визуальный язык, идентифицируется, какая бы услуга или продукт, от мобильных приложений до подключенных объектов.

Матиас Дуарте продемонстрировал метафору для бумаги (Android / Material) в 2014 году в 2014 году).

Посмотрите это видео, чтобы отпраздновать первую годовщину этого подхода к дизайну. Это было один после запуска, в мае 2015 года. Matias Durate рассматривает ретроспективный взгляд на этот прошлый год и уже может оценить то, что дизайнеры энтузиазма, но также и разработчики, присвоили принципы, представленные годом ранее.

Для или против дизайна материала ?

Этот дизайн также был разработан, чтобы обогатить пользовательский опыт И эффективность интерфейса (новые шрифты, читаемые на нескольких языках, лучшая доступность …) Год спустя Google представила, среди прочего, комплект дизайна материала для веб -проектов (загрузите комплект здесь).

Конструкция материала вызвала разные реакции. Некоторые утвердили это «улучшение» плоского дизайна, считающегося упрощенным и скучным. Действительно, это «жидкость» и движущийся дизайн. В композиции, воротах, ответах и ​​динамике структурируйте интерфейс. Пространства, выравнивание и цвета необходимы на этапе дизайна. Все эти элементы определяют приоритет контента и облегчают навигацию пользователя. Анимации, основанные на законах физики, заверяют пользователя в результате его действий.

Однако для других Google стремится навязать свой графический стиль, риск ограничения творчества дизайнеров/графических дизайнеров. Все веб -сайты начнут выглядеть как приложения Android, в ущерб качество пользовательского опыта.

Как это работает ? Приложение с Android

Мы должны помнить, что это «материальные элементы». Таким образом, невозможно пересечь элемент. Только пострадавший пользователь компонент отреагирует. В дизайне материала,Окружающая среда 3D. Каждый объект, или «материал», имеет 3 координата: x, y, z. Ось z касается высоты объекта. Мы можем принять решение о высоте объекта, его размерах и поврежденных тени, но толщина остается лист бумаги. Последний не может сгибаться. С другой стороны, он перемещается на всех осях.

Android предоставляет три темы (тема темного или светового материала, тема светового материала с темным путем ActionBar), которые будут реализованы непосредственно в приложении путем изменения, если вы хотите, некоторые из атрибутов. А развлечение Применить к объектам/элементам интерфейса два: анимация Tween (для переходов, например, вращение на изображении) и анимации кадра (отображение нескольких изображений). LoadAnimation позволяет вам загрузить их и начало активации их/запуска их.

Примеры интерфейсов дизайна материала

Теоретические объяснения – метафора интеллектуальной статьи, которая оживает и взаимодействует с пользователем – может показаться неясной. Но наблюдайте за интерфейсами конкретно облегчает понимание концепции Google.

Смотрите источники на Uplabs (истории.Уппаны.com)

Другой источник, богатый примерами: блог дизайна материала

Значки дизайна материала

Эта система дизайна должна была создать свои собственные значки. Большая библиотека доступна на разных источниках, что экономит значительное время для дизайнеров пользовательского интерфейса, когда вы знаете сложность дизайна однородных когерентных икон.

Перечитайте наши статьи на эту тему:

См. Руководство GitHub для использования этих значков в разных средах.

Другие значки материала (чтобы скачать здесь)

Вы можете скачать здесь много значков дизайна материала

Еще один источник значков дизайна материала для скачивания здесь

Большой выбор материалов в плоской конструкции для использования в ваших проектах, а также руководства для их использования (здесь)

Некоторые источники и вдохновения

• Ссылка на дизайн материала: материал.io
  • Движение
  • Стиль
  • Макет
  • Компонент
  • Узоры
  • Рост и коммуникации
  • УДОБСТВО ИСПОЛЬЗОВАНИЯ
  • Платформы
  • На сайте Google Design вы найдете тематические исследования и практические руководства (многие ресурсы и возможность подписаться на очень богатый информационный бюллетень)

  Заключение

  Проектирование материала Google получает выгоду от Простота плоского дизайна. Интерфейс утончен и визуально сбалансирован. Как плоский дизайн, он отвечает требованиям Отзывчивый дизайн. Но где плоский дизайн часто подвергается критике за его Отсутствие предоставления, Google честно Часть скеоморфизма На высоком уровне абстракции. Таким образом, интеллектуальное использование анимации, типографских вариантов и метафора бумаги улучшает пользовательский опыт. Степень графических элементов, предлагаемых разработчикам, также позволяет понять, как дизайн материала Android покорил Интернет … рискуя быть инвазивным. Конечно, как и в каждой тенденции дизайна, выбор использования этого типа дизайна зависит от целевых пользователей и бизнес -целей/бренда. Дизайнеру/дизайнеру решить, должен ли он полностью следовать Материал Хартии, Быть вдохновленным этим или отвернуться.

  • Проектирование материала Google, формализация дизайна
  • Что такое дизайн обслуживания ?
  • Что такое дизайнерское мышление ?
  • Что такое доступность ?
  • Что такое плоский дизайн ?
  • Что такое skeuomorphism ?
  • Определение эмоционального дизайна, место эмоций в дизайне

  Смотрите наши услуги:

  • Наше обучение для разработки дизайна системы
  • Наше 2 -дневное обучение по дизайну мышления.