Рекомендуем, 2024

Выбор редакции

Посмотрите на дизайн материала Google

В последнем событии ввода-вывода 2014 года Google вернулся со своими новыми сюрпризами. Помимо официально выпущенного нового обновления Android под кодовым названием Lollipop, Google также представила свой новый язык дизайна, Material Design . Это система проектирования, которая предназначена не только для новых улучшений пользовательского интерфейса Lollipop, но и для всех устройств и сред.

У Материального Дизайна есть некоторые главные особенности, которые отличают его среди других тенденций дизайна с его собственными уникальными способами. Как и его название, он был вдохновлен реальными материалами и объединил их в единую систему дизайна, чтобы создать гладкий, интуитивно понятный, красивый и максимально интерактивный пользовательский интерфейс. В этом посте мы рассмотрим, что находится внутри Material Design, и кратко расскажем, как его реализовать. Цитируя блог Google, я скажу: «Это материальный дизайн».

Введение

Material Design - это единая система проектирования, означающая, что она была создана для работы со всеми доступными современными устройствами и платформами. От планшета, смартфона до настольного компьютера и от Android, iOS, Windows до веб-платформ. Все дизайн и внешний вид должны быть одинаковыми, где бы он ни был.

Основные принципы

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

  • Материал - это метафора . Разработка Материала была вдохновлена ​​изучением тактильных элементов, которые мы используем каждый день, бумаги и чернил . Это делает объект легким, поверхность и движения лучше при взаимодействии друг с другом.
  • Жирный, наглядный и умышленный . Типография, сетки, пространство, масштаб, цвет и использование изображений, которые использовались в основах дизайна на основе печати, улучшают содержание материала.
  • Движение дает смысл . Это одна из самых заметных вещей. В Материале вы должны иметь осмысленное и уместное движение, тонкую и четкую обратную связь и эффективный и последовательный переход.

Компоненты

Material Design уделяет внимание каждой детали своих компонентов, чтобы их можно было использовать повсеместно. Эти компоненты помогут вам создать удивительное приложение и сайт. Материал предоставляет множество компонентов, таких как кнопки, переключатель, карта, ввод текста, fab (кнопка с плавающим действием), диалог, тост, подменю, вкладка и другие. У каждого из них есть свое собственное правило и руководство по их созданию, чтобы у вас не было никаких несущественных элементов.

Узоры Вещи

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

Материал Дизайн Цвета

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

Значок материала

Если вы разработчик Android, то вы должны быть знакомы с некоторыми бесплатными пакетами значков, предоставляемыми Google. Они обычно используются только для основного элемента и панели действий. Что касается других ресурсов, мы должны искать другие значки, такие как папка, файл, копировать и вставлять и т. Д. Вручную. В Material Design Google исправил проблему с тоннами пакетов иконок, которые вы можете использовать.

Каждая из икон прошла через определенный дизайн, который также использует изучение тактильных материалов. Они также поддерживают Материальный принцип, который является последовательным. Вы можете скачать эти иконки на GitHub, они поставляются с некоторыми опциями для различного использования, например для iOs, web, Android или svg. Если вам нужна более широкая опция для легкой настройки, вы, вероятно, захотите увидеть пакеты значков Material Design на FlatIcon. Внутри пакета вы получите вектор иконок (SVG & EPS), PSD и PNG версии.

Анимация материала

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

Те функции, которые я объяснил, являются лишь небольшой частью того, что предлагает Material Design. Чтобы узнать больше о Материальном мире, просто зайдите на страницу документации.

Реализация

По умолчанию Material Design поставляется как новое обновление пользовательского интерфейса для Android Lollipop. Все указания, что Материал был применен внутри него. Поскольку материал предназначен для всех типов сред, его внедрение в другую систему не составит труда. И благодаря сообществам, с некоторыми инструментами, которые они создали, это намного проще.

Это несколько способов получить Material Design вне Android, например, в Интернете.

Использование CSS Frameworks

Это самый простой способ, если вы хотите реализовать Material Design в веб-платформе. С фреймворками все, что вам нужно сделать, это инициализировать его, а затем написать необходимые элементы. Есть много фреймворков, которые вы можете использовать, как Materialise, Material UI или Polymer, чтобы назвать несколько. Мой личный выбор падает на Материализацию. Его проще использовать, понимать и иметь отличную документацию с хорошей демонстрацией.

Следует инструкциям

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

Заключение

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

А благодаря Material Design Google доказал свое превосходство как одна из крупнейших технологических компаний. Это делает Google не только лидером в области поисковых систем и мобильных ОС, но и в области дизайна. К настоящему времени нет других компаний, которые бы разрабатывали такую ​​большую вещь, как Google. Но опыт говорит, что это не продлится долго. Давайте просто подождем, пока другие компании ответят на Google Material Design.

Top