Что такое material design: Что такое Material Design и как делать анимацию в стиле Google — статьи на Skillbox

Что такое Material Design и как делать анимацию в стиле Google — статьи на Skillbox

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

В 2011 году в Google решили, что с этим пора что-то делать, и действительно что-то сделали. А именно — унифицировали свои продукты, создали единый стиль для приложений Android Holo. Только вот они снова оказались разными.

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

Gmail.com (Kennedy)Gmail for Android (Holo)

К 2014 году проблему удалось решить. Именно тогда на конференции I/O Google представили свою новую дизайн-систему Material Design. Компания не просто представила гайдлайн по визуальному стилю, но и заявила о себе как о единой цифровой среде.

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

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

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

В основе Material Design лежат четыре принципа:

1. Тактильные поверхности

Все элементы интерфейса — это слои цифровой бумаги. Они располагаются на разной высоте и отбрасывают тени. Это помогает пользователям отличить главные элементы от второстепенных и делает интерфейс интуитивно понятным.

2. Полиграфический дизайн

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

3. Осознанная анимация

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

4. Адаптивный дизайн

Все вышеперечисленное должно работать на любых устройствах.

Четыре основных принципа Material Design наглядно. Источник

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

В отличие от Apple, у которых анимация несет преимущественно эстетическую функцию, Google делает ставку на UX и функциональность. В их рекомендациях анимации уделено гораздо больше внимания, а на конференциях то и дело им посвящаются доклады.

Основная идея анимации в Material Design — сделать пользовательский интерфейс выразительным и простым в использовании. Для этого она должна отвечать трем принципам.

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

Анимация фокусирует внимание на том, что важно, и не отвлекает от основного действия.

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

Таким образом, с помощью анимации можно:

Показать пользователю, как элементы связаны друг с другом.

Показать, как выполнять разные действия.

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

И это только верхушка айсберга. Google действительно заставил мир пересмотреть отношение к анимации и сделал ее полноценной частью UX-дизайна. Можно искать недостатки в рекомендациях Material Design, но, думаем, не стоит совсем игнорировать значение анимации сегодня.

А вот забавное замечание об одном из положений Material Design — о том, что все предметы, выходящие из экрана, должны ускоряться. Ведущий разработчик Джон Шлеммер считает, что неважно, где именно они остановятся.

«В руководстве по материальному дизайну Google, похоже, думают, что вы должны только ускоряться при выходе из экрана», — Паскаль Д’Сильва. Источник

Благодаря Material Design анимация сегодня — не просто эффектное дополнение дизайна, а полноценная его часть. Если вы все делаете правильно, движение оживляет ваш интерфейс и заставляет пользователей любить интерфейс. Научиться создавать крутые анимации можно на курсе «Анимация интерфейсов».

Курс «Анимация интерфейсов»

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

• Живая обратная связь с преподавателями
• Неограниченный доступ к материалам курса
• Стажировка в компаниях-партнёрах
• Дипломный проект от реального заказчика
• Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Что такое material design? — Dark site of marketing

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

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

Material design — это язык визуальных образов, который не так давно создала корпорация Google для унификации интерфейсов всех ее продуктов и сервисов. Брендбук , который включает в себя все элементы данного направления в дизайне, постоянно развивается и дополняется, при этом сохраняя фундаментальные основы неизменными.

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

Material как метафора

Что касается визуально-функциональной части, то Google удалось объединить принципы хорошего дизайна с инновациями и возможностями новых технологий и науки.

Цитата Google: «Material design базируется на тактильной реальности, вдохновлен изучением бумаги и чернил, технологически продвинут и открыт для воображения и магии.

«

Материализм и его имитация в цифровой среде не нова. Компания Apple до недавнего времени использовала философию скевоморфизма в дизайне устройств и интерфейсов.

Скевоморфизм — это практика имитации и приближения восприятия виртуального объекта к его аналогу из материального мира. Хорошим примером в достижении такого сходства в современной практике скевоморфизма являются приложения «Notes» и «Newstand» для iPhone. Давайте более детально рассмотрим приложение Newsstand.

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

Эволюция digital design

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

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

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

Наглядность как фундаментальная основа

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

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

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

Насыщенные, ровные цвета. Резкие, очерченные края. Крупная типографика и немалые отступы между элементами. Такова визуальная составляющая Material. 

Осмысленная динамика

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

Примеры Material design.

Calendar

Gmail Inbox

 

Android Wear

Newspaper

Google Play Interface

Events List

Flight Animation

Music Player

Phone Contacts

To Do List

 

 Читайте также «Примеры сайтов с использованием Material design»

Заключение. Главной целью, которую преследует Material design, по задумке его разработчиков, является создание унифицированного пользовательского пространства на всех платформах, устройствах, независимо от их размера и диагонали экрана.

Так, Google перестанет в скором времени восприниматься пользователями как поисковик или Android-смартфон, как браузер Chrome или отдельный сервис GMail. Единая концепция дизайна интерфейса и интеграция всех сервисов позволит создать полностью новый пользовательский опыт, который интуитивно понятен, легок в использовании, содержит в себе алгоритм взаимодействия по аналогии с объектами материального мира и, более того, стирает грань между реальным и виртуальным миром.

На сайте Google Design вы сможете найти огромное количество информации о технических аспектах, примеры взаимодействия в разной среде, 3D дизайн и анимацию. 

Что такое Material Design — особенности и принцип ее работы системы

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

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

История возникновения

Когда-то у веб-сайтов и мобильных приложений экосистемы Гугла не было единого стиля. У каждого продукта были свои недостатки. В 2011 году корпорация решила интегрировать во все проекты концепцию, которую назвали Project Kennedy.

Отсылка к президенту США Кеннеди связана с тем, что основатель технологической корпорации Ларри Пейдж считает, что продукты нельзя улучшать на 5-10%. Если изменять их, то целиком. Джон Кеннеди запустил программу полёта на Луну. А Пейдж поставил задачу поменять подход к оформлению интерфейсов.

Совместная работа дизайнеров и программистов изменила внешний вид сервисов Google и приложений для смартфонов. В тоже время пользователи столкнулись с серьезной проблемой —структура продуктов на телефонах сильно отличалась от веб-версий. IT-гигант бросил все силы на то, чтобы быстро устранить недочёт.

В 2014 году на ежегодной конференции Google I/O компания представила на суд общественности новую систему, которая получила название Material Design. В ней специалисты корпорации глобально пересмотрели подход к структуре интерфейсов и взаимодействию с графическими объектами на экране. Она обеспечивает уникальный пользовательский опыт на разных устройствах: от компьютеров до маленьких смартфонов.

Дизайнеры Гугла ставили перед собой несколько основных задач:

1. Создать систему оформления, которая будет чем-то бо̀льшим, чем просто стиль.
2. Разработать свежую концепцию на основе существующих направлений Flat и Metro.
3. Вывести дизайн на новый уровень. Сделать интерфейс не просто красивым, а осязаемым.

Новый подход задаёт вектор движения, а не создаёт чёткие границы. UI рассматривается как живой объект со всеми присущими ему свойствами.

Надо отдать дань уважения корпорации с мировым именем. Она взяла наработки Metro и Flat, добавила уникальные фишки и создала новую философию, которая мгновенно стала популярным и превратилась в рабочую концепцию для миллионов интерфейсов по всему миру.

Материальный дизайн начал развиваться более 5 лет назад, но многие специалисты до сих пор обходят его стороной и не хотят вникать в особенности. Для них он остаётся непокорённой вершиной Эвереста, до которой непросто добраться.

Цель статьи — рассказать о главных принципах идеи Google и показать, что с этим прорывом в сфере user interface надо познакомиться поближе. Профессионалы должны понимать, что макеты в графических редакторах — не просто красивые картинки. Гугл первым вдохнул в них жизнь и показал, что объектам можно задать свойства и логику поведения.

Главные принципы

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

Главные преимущества:

• простота восприятия;
• унифицированный интерфейс на всех платформах;
• логичное поведение объектов;
• адаптивность.

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

Тактильные поверхности

Первый и главный принцип — осязаемые слои, которые размещаются на «цифровой бумаге». Каждый элемент является частью единой системы. Границы и тени создают анатомическую последовательность, которая представляется как «живой организм» с постоянным взаимодействием компонентов.

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

Главные особенности:

• минимум эффектов;
• верхние объекты отбрасывают тень на нижние;
• фигуры привязаны к одному месту с координатами по оси Z.

Концепция Flat Design не допускает использование теней и других эффектов, создающих объём. В Material большую роль играет принцип глубины. Она помогает фокусировать внимание на главных компонентах и подсказывает, как взаимодействовать с кнопками, фигурами или прокруткой. Глубина должна использоваться с хирургической точностью. Если она не привязана к сценарию взаимодействия, лучше поискать другое решение.

Обязательно надо учитывать, что у физических объектов есть начало и конец. Элементы внутри интерфейса должны быть расположены так, чтобы они не «цеплялись» за края экрана. Не забывайте, что философия построена на восприятии UI как «живого организма».

Тактильные поверхности базируются на использовании нескольких уровней — фигуры размещаются на разной высоте и отбрасывают тени. «Магия» обязательно происходит в рамках законов физики. Реалистичность изображения достигается за счёт того, что верхние слои направляют «лучи» на нижние.

Полиграфический дизайн

Взаимодействие компонентов в цифровой среде осуществляется по определённым правилам. Если интерфейс — это «бумага», то все блоки, располагающиеся внутри системы, написаны «чернилами». Философия идеи Google предполагает использование прописных истин полиграфии в сфере проектирования UI. Это касается шрифтов, сеток, иконок, цветовых схем и мультимедиа.

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

Второй принцип Material Design состоит из 7 «кирпичиков». Давайте кратко остановимся на каждом из них.

На первом месте находится типографика. В печатной продукции она решает две главные задачи:

1. Задаёт стиль издания.
2. Образует «скелет» контента.

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

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

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

Сетка и направляющие помогают создавать UI с максимальной точностью. В Material Design используются модульные сетки с шагом 8dp. Dp — единица измерения, которая учитывает плотность экрана устройства. Границы задают структуру макета и обеспечивают удобное восприятие контента.

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

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

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

Если кратко охарактеризовать свойства полиграфии в материальном дизайне, то это:

• видимые отступы и границы;
• гармоничные шрифты и цвета;
• яркие фотографии и «мультяшные» иллюстрации.

Осмысленная анимация

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

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

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

Этот принцип работает благодаря 4 важным атрибутам:

1. Асимметричность. Границы интерфейса зависят от толщины устройства, поэтому трансформации должны осуществляться в пределах плоскости. Изменение пропорций объектов выполняются независимо. Если не следовать этому правилу, пользователь столкнётся с неправильным масштабированием объектов. Необходимо, чтобы анимация осуществлялась равномерно.
2. Реакция. В центре должно находиться прикосновение. Реакция на действия обычно происходит мгновенно. Прикоснулся пальцем к кнопке, и она отреагировала на касание.
3. Микроанимации. Инструмент позволяет задавать сценарии работы для маленьких элементов. В интерфейсе важна каждая деталь, микроанимации обеспечивают детализацию и максимальное погружение в работу цифровой среды.
4. Чёткость и резкость. Суть последнего критерия заключатся в том, что перемещение должно быть резким, но в тоже время чётким. Важно соблюдать принцип естественности. Как будто фигура двигается по своему желанию, а не за счёт программного кода.

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

Адаптивность

Возвращаемся к изначальным задачам, которые ставили перед собой сотрудники IT-корпорации. Они хотели создать единую концепцию для всех продуктов компании. Чтобы сервисы переходили в приложения и отображались одинаково.

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

Начнём с того, что по мере уменьшения экрана девайса надо резко сокращать объём контента. Если на широкоформатном мониторе компьютера легко помещаются длинные раскрывающиеся списки, то на смартфоне пространство сильно ограничено. На помощь приходит разделение действий на несколько экранов. Сначала показываем список, а затем по клику выводим подробное описание.

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

Единицей измерения отступов является независимый пиксель dp. Стоит учитывать, что для устройств с разными форм-факторами расстояние будет разным. Для смартфонов 72dp, а для планшетов — 80. При создании фигур надо использовать кратные пропорции.

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

Графический дизайнер должен быть не только умелым проектировщиком, но ещё и тестировщиком. Он должен чётко понимать, как будет отображаться UI на смартфонах, планшетах, ноутбуках и 30-дюймовых мониторах. Если учесть, что на компактных устройствах есть горизонтальный и вертикальный режимы отображения, специалисту надо потратить ни один день на создание прототипов с учётом особенностей гаджетов.

Популярность Material Design

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

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

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

Мы в IDBI восхищаемся материальным дизайном и с радостью возьмёмся реализовать любой проект в рамках этого направления.

Material Design — актуальная концепция дизайна для вашего сайта :: Айкон

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

 

Особенно это актуально для бизнеса в сфере B2C, где эмоциональная составляющая сайта имеет особое значение. От дизайна зависит удобство сайта (юзабилити) и общее впечатление клиента от сайта, что в целом оказывает значительное влияние на конверсию сайта.

 

 

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

Что такое Material Design?

Material Design – это концепция дизайна от компании Google, которая была прежде всего создана для собственной операционной системы Android. Став популярной, данная концепция стала трендом в дизайне вообще и в веб-дизайне в частности.

 

 

Данная концепция вобрала в себя много от концепции плоского дизайна (Flat), эволюционировала и стала применяться для интерфейсов, как для больших устройств и экранов, так и для мобильных устройств.

Особенности и принципы Material Design

Material основывается на 4 принципах: тактильные поверхности, полиграфический дизайн, осмысленная анимация и адаптивный дизайн. Давайте рассмотрим их подробнее.

 

 

1. Тактильные поверхности

Удивительным принципом Material Design являются тактильные поверхности. Интерфейс сайта или мобильного приложения складывается из слоев, которые называют «цифровой бумагой», и они являются практически осязаемыми, их словно можно потрогать. Эти слои располагаются на разной высоте и отбрасывают друг на друга тени, что позволяет посетителям понимать, как можно взаимодействовать с данным интерфейсом.

 

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

 

2. Полиграфический дизайн

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

 

 

3. Модульная сетка и направляющие

С точки зрения дизайна важно, чтобы все элементы на сайте состояли в определенных “взаимоотношениях” друг между другом, и составляли гармоничную структуру. Для этого используется модульная сетка, которая определяет структуру и расстояния между объектами.

 

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

 

 

4. Яркая цветовая палитра

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

 

 

Красивые фото — важная сторона Material Design. Вместе с яркими цветами, использование ярких фотографий поддерживает эту концепцию в целом и создает впечатление прямо-таки глянцевого журнала!

 

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

 

5. Анимации

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

 

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

 

 

6. Адаптивный дизайн

Material Design – это концепция адаптивного дизайна. Популяризация недорогих смартфонов и планшетов значительно увеличила долю просмотров сайтов с мобильных устройств и в 2017 году создание адаптивных сайтов это необходимость и обязательное требование к разрабатываемому сайту.

 

Material Design разрабатывается в первую очередь для мобильных устройств и взаимодействия с сенсорными экранами, а значит, отлично подойдет для создания адаптивной версии сайта.

 

 

Заключение

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

Если вас заинтересовали данные идеи и мысли или сама концепция Material Design, и вы, возможно, хотели бы сделать проект в данном стиле, свяжитесь с нами, оставив заявку в разделе “Разработка сайтов”.

 

Читайте далее: 5 ожиданий, о которых стоит забыть при запуске контекстной рекламы

Теперь Material Design — полноценная дизайн-система — Дизайн на vc.

ru

Обзор обновлённых Material Design и Android P от руководителя портальной дизайн-команды Mail.Ru Group Юрия Ветрова.

20 290 просмотров

Google показала обновлённую дизайн-систему Material Design 2.0 на конференции I/O. Это серьёзное изменение визуального стиля и расширение инструментария, первые звоночки которого появились ещё в марте.

Визуально Android P продолжила сближение с iOS (различия между платформами стираются с обеих сторон).

• Много скруглений, что сильно перекликается с iOS 10-11. Возможно, это сделано с прицелом на безрамочные телефоны, которых становится всё больше, — это лучше сочетается с их скруглёнными краями экрана.

• Цвет настроения — белый. Больше нет яркой шапки приложения и серых подложек, сплошное белое пространство с минимумом акцентов. В каких-то приложениях Google встречается цветная нижняя панель, и сама идея акцентных цветов не уходит из гайдлайнов, но тенденция явная (включая сайты Gmail и Drive).

• Навигация по системе в духе iPhone X. Паттерн «рукоятки» вместо кнопки «Домой» с почти аналогичной механикой, отказ от отдельной кнопки списка приложений (также вызывается свайпом снизу) и ставшая официальной в последние годы нижняя панель навигации. Всё это помогает управлять современными телефонами, которые стали не только больше, но и выше за счёт безрамочности. Кстати, в некоторых новых приложениях Google инструменты навигации почти везде внизу. Осталось упростить кнопку «Назад» (она уже пропала с домашнего экрана).

Можно назвать это вкусовщиной, но первая версия Material Design имела своё лицо, и можно было говорить о характере бренда, выраженном в интерфейсе. Кто-то жаловался, что гайдлайны слишком жёсткие и делают приложения однояйцевыми. Но для многих компаний это был сильный ориентир — как создать ощущение единства продуктов без использования логотипа. Хотя поддерживать две платформы станет проще.

Но теперь Material Design поддерживает более продвинутую тематизацию, чем просто замена цвета. Можно менять шрифтовую сетку, скругления элементов интерфейса (точнее, даже их форму — например, можно сделать диагональные скосы), иконки. К этому прилагается плагин для Sketch (можно быстро примерить стиль на свой макет) и библиотека иконок (в пяти стилях). Недавно обновлённые продукты Google также используют этот подход (хотя их стиль как раз выхолощенный).

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

Новый сайт Material Design сделал фокус на две составляющие — дизайн и разработка — более явным. Они также запустили давно обещанный инструмент Gallery, аналог Zeplin и Wake. Но это как-то вяло на фоне обещаний, данных после покупки Pixate (основатель ушёл в Figma) и Form (Google подтверждает репутацию сгнаивателя купленных компаний).

Другие интересные детали анонса

• Четыре цвета логотипа как основа визуального языка. Это хорошо получилось в Gmail для веба — иконка «+» и цвета индикаторов чётко наследуют идею.

• Похоже, для своих продуктов компания перейдёт на шрифт Google Sans.

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

• Проще настраивать частоту уведомлений. Если пользователь несколько раз скрывает уведомление от приложения без прочтения, Android предложит скрыть его вообще. Наушники Pixel Buds могут зачитывать некоторые уведомления голосом.
• Интеграция сторонних приложений в результаты поиска и контекстные меню в качестве Slices и поиск по выделенному слову.

• Мобильный Сhrome поддержит дополненную реальность.
• Экспериментальная камера Google Lens научилась делать больше и станет частью стандартного приложения.

Бета-версию уже можно поставить на некоторые телефоны. Финальная версия появится осенью. Засучиваем рукава, работы будет много.

Что такое стиль material design: простое объяснение

❤️ Стиль Material design остаётся для большинства непонятным и неизведанным объектом. Мы с вами разберёмся на простых и понятных примерах, что это такое и как его использовать.

Выдано в печать 2018-04-21

Стиль Material design (материал дизайн в русской версии), набрав безумную популярность, остаётся для большинства непонятным и неизведанным объектом. Мы с вами разберёмся на простых и понятных примерах, что такое material design (в основном будем говорить про дизайн сайтов) и как его использовать.

Изначально дизайнеры Google ставили перед собой три глобальные задачи:

• Создать не просто новый стиль, а целую систему оформления, в которой принципы и правила будут четко прописаны;
• Обновить существующие стили (FLAT/Metro, минимализм и другие), опираясь на новые технологии.

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

Откуда взялся Материал Дизайн: статистика мобильного интернета

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

«Материал» в дизайне: что это?

Основой стиля стало понятие материала. Это основной «строительный элемент», из которого собираются функциональные блоки дизайна. Кратко его можно описать так:

• Его должно хотеться пощупать;
• Он интерактивен, и на экране монитора ведёт себя так же, как вел бы себя какой-то физический объект в жизни;
• Он похож на бумагу;
• Он создаёт тени, изгибается, движется как настоящий.

Пример наложения слоёв «цифровой бумаги»

Google material design

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

Кнопка в стиле material дизайна и кнопка Web 2.0

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

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

Ошибки и заблуждения

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

Второе. Материалы в дизайне нужно использовать реалистичные. Не обязательно! Важно, чтобы они вели себя, как настоящие. Неважно, будет это реальная текстура дерева или «синтетическая» текстура, созданная в фотошопе с помощью инструмента Noise.

Какие текстуры подойдут для material design с в стилу Google

Третье. Материал и его интерактив – это единственное, что отличает этот стиль. Нет! Чтобы получился «канонический» material design, как у Google, нужно соблюдать и другие принципы:

• Картинки оформляются без промежутков, край к краю;
• Крупные, хорошо читаемые шрифты без засечек;
• Цветовое кодирование;
• Иконки, выполненные по тем же принципам материал дизайна;
• Адаптивная вёрстка.

Полный список правил можно узнать в официальном разделе Google про material design.

Android material design

В применении общих правил к мобильным приложениям есть и свои особенности. Помните, мы говорили про тени? Изначально элементы material design для Android действительно лежат друг на друге, как листки бумаги. Но при взаимодействии каждый элемент, будь то диалоговое окно или кнопка навигации, поднимается вверх. Это способ, с помощью которого в этом стиле выделяются активные блоки. Здесь используется тот же принцип, который со времен Web 2.0 заложен в технологию всплывающих окон (popup-ов).

Теперь «послойный принцип перешел от попапов ко всему интерфейсу

Интересно, что разработчики материал дизайна в Гугле даже прописали чётко все параметры для каждого из возможных элементов интерфейса!

Цвета в материал дизайне

Подход к цветовой гамме напоминает FLAT-style. Это достаточно яркие, сочные, природные цвета. Material design подразумевает использование трёх основных типов цветов:

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

Цвета material design: палитра Google

Что такое материальный дизайн (Material Design)

Материальный дизайн – новый способ взаимодействия или очередной тренд?

25 июня 2014 года компания Google представила общественности свое новое видение на дизайн интерфейсов будущего – целый комплекс правил и условий, по которым впредь будут строиться интерфейсы всех продуктов корпорации. Зачем все это понадобилось? Еще пять лет назад все продукты Google сильно отличались друг от друга, в том числе различные версии одного приложения на разных устройствах. Разработчики задумались о создании специальных правил построения и унификации всех разрабатываемых приложений и сервисов, которые позже объединились под общим названием «Проект Кеннеди». Именно этот проект позже развился в Material Design (материальный дизайн).

Философия материала

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

Одной из черт унифицированного дизайна стали карточки с информацией, которые могли размещаться в любой части рабочей области. Исследуя их в приложении Google Now, разработчики задали себе вопрос: «А что находится под этими карточками?». По словам вице-президента по дизайну Google Матиаса Дуарте (Matias Duarte), этот «невинный вопрос зажег мощную искру».

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

После тотального засилья скевоморфизма (точная имитация реальных объектов физического мира в дизайне) все резко двинулись в противоположную сторону – плоский flat дизайн. Именно его взяла за основу Google, изобретая «материал». При этом сделав небольшой шаг назад к реалистичности.

Квантовая бумага (Quantum paper)

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

Из-за свойств, схожих с бумагой, изначально материал называли «квантовой бумагой». Это та же самая бумага, что и в физическом мире, но она обладает целым рядом «волшебных» свойств, например, может изменять свои размеры и плавно перемещаться в пространстве, объединяясь с другими «листочками» или разрываясь на несколько. Квантовая бумага находится чуть выше фона, который чаще всего окрашен в белый цвет. Тень перемещается в зависимости от перемещения самого материала, уменьшается или увеличивается в зависимости от высоты нахождения материала над фоном.

Цифровые чернила (Digital Ink)

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

Материальный дизайн использует все наработки полиграфии в дизайне интерфейсов. Но и здесь есть фирменные особенности Google. Например, основной шрифт для использования в материальном дизайне – это Roboto. Однако ничего не мешает компаниям использовать свой фирменный шрифт для поддержания айдентики. В гайдлайнах по использованию материального дизайна представлены примеры для использования различных начертаний и размеров шрифта в интерфейсах.

Но самое главное в графике материального дизайна – это цвет. Цвет является основным выразительным средством на квантовой бумаге и потому играет очень важную роль. Обычно для материального дизайна характерно использовать основной и акцентирующий цвета. А также несколько их оттенков для различных ситуаций.

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

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

Android поддерживает специальную библиотеку Палитра, которая способна выделять из изображения основной и акцентирующие цвета и динамически менять оформление приложения, подстраиваясь под активное изображение (пример вверху).

Значимость анимации

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

Активное движение привлекает внимание пользователя, поэтому для достижения эффекта реализма необходимо использовать некоторые правила:

• Асимметрия
  Обычно размеры объектов ограничены шириной устройства, поэтому для создания реалистичности изменения размера квантовой бумаги необходимо асимметрично независимо изменять ширину и высоту объекта, таким образом можно избежать иллюзии увеличения или уменьшения объекта.
• Ответ
  На любое действие пользователя должен быть соответствующий ответ. В качестве примера Google предлагает эффект волнового изменения объектов интерфейса с эпицентром в точке взаимодействия
• Естественные аутентичные движения
  В природе объекты при движении не могут моментально набрать скорость или остановиться, поэтому для придания реалистичности все анимации должны быть не линейными, а с замедлениями и ускорениями.

Заключение

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

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

Новый логотип и айдентика Google продвигают идеи материального дизайна

Подробные гайдлайны от разработчика материального дизайна вы найдете здесь — http://www.google.com/design/spec/material-design/introduction.html

Что такое материальный дизайн? | Фонд дизайна взаимодействия (IxDF)

Material Design — это язык дизайна, ориентированный на Android, созданный Google, поддерживающий сенсорное управление на экране с помощью функций с множеством подсказок и естественных движений, имитирующих реальные объекты. Дизайнеры оптимизируют работу пользователей с помощью 3D-эффектов, реалистичного освещения и анимации в иммерсивном графическом интерфейсе, совместимом с платформой.

Посмотрите, как Material Design вписывается в UX-дизайн.

Материальный дизайн — почему пользователи доверяют «реальным» интерфейсам

Материальный дизайн возник как детище Google в середине 2014 года под кодовым названием «Квантовая бумага» и представлял собой свежий подход «чернила и перо». С помощью Material Design цель состоит в том, чтобы предоставлять высококачественные выходные данные на всех платформах, давая пользователям возможность управлять четко обозначенными, приятными на вид компонентами, которые ведут себя как объекты реального мира. В отличие от изображения значимых для культуры предметов (например, мусорных корзин) в скевоморфизме, дизайнеры Material Design применяют основные, естественные законы физического мира, в основном касающиеся освещения и движения.Идея состоит в том, что, имитируя физический мир, мы уменьшаем когнитивные нагрузки пользователей за счет пристального внимания к макету, визуальному языку и библиотеке шаблонов, максимизируя предсказуемость и устраняя двусмысленность. «Карточная» концепция Material Design служит системой для наложения элементов и анимации; это также позволяет более персонализированный опыт (например, показывать подписчиков в Twitter).

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

— Матиас Дуарте, вице-президент по материальному дизайну в Google

Для Material Design жизненно важно оправдать ожидания пользователей в отношении того, как должны себя вести компоненты . Например, экранные объекты вызывают большее доверие, если они подчиняются законам гравитации.

Автор / правообладатель: Google LLC. Условия авторских прав и лицензия: Добросовестное использование

Три простых элемента — одно мгновенное сообщение

«Волшебный» и «предсказуемый» — незаменимый парадокс

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

• Метафора материала

Вы берете понятие тактильной реальности, и вы:

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

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

Автор / правообладатель: Google LLC. Условия авторских прав и лицензия: Добросовестное использование

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

Материальный дизайн, переработанный

В мае 2018 года Google выпустила пересмотренную версию, чтобы исправить серьезную проблему — исходные правила были ограничительными, подчеркивая функциональность, а не стиль.Поскольку приложения, созданные в соответствии с ними, выглядели одинаково, многим разработчикам приложений не нравился Material Design. Google должен был сбалансировать согласованность Material Design с возможностью дифференциации, чтобы предоставить дизайнерам гибкость, позволяющую адаптировать его к потребностям бренда. Версия 2 содержит не только новые рекомендации, но и набор инструментов (включая новые пакеты значков и редактор тем материалов), которые вы можете использовать для настройки своих дизайнов. Таким образом, вы можете настроить эстетику в соответствии с присутствием бренда вашей организации, опираясь на фундамент вечных законов природы.

Автор / правообладатель: Google LLC. Условия авторских прав и лицензия: Добросовестное использование

Значки с контуром 2DP для максимальной читаемости, где бы вы их ни применяли

Подробнее о материальном дизайне

Вы можете найти руководство и библиотеку Google по материальному дизайну здесь: https://design.google/resources/ и здесь: https://material.io/design/

Узнайте, как создавать интерфейсы, имитирующие объекты реального мира: https: // www.Interaction-design.org/courses/how-to-create-intuitive-products-by-imitating-physicality

Подробная статья о выделении с помощью Material Design: https://usabilitygeek.com/10-guidelines-material-design/

Поучительное руководство по материальному дизайну: https://uxplanet.org/dont-risk-making-a-crappy-ui-use-material-design-520ebaceffe4

Зачем нужен материальный дизайн? Взвешивая за и против

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

Material Design также был принят широким сообществом дизайнеров, и теперь его можно найти на веб-сайтах и ​​в приложениях далеко за пределами собственных платформ Google (и даже на конкурирующих платформах). Simplenote, например, использует эстетику Material Design в своих приложениях для настольных и мобильных платформ. Это всего лишь один пример того, почему материальный дизайн — отличный выбор для множества вариантов реализации дизайна.

Simplenote — это один из примеров интерфейса на основе материального дизайна, который используется не только на собственных платформах Google.

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

Material Design был создан Google в 2014 году, частично на основе карточного макета, используемого в Google Now. Отношение к стилю дизайна на основе бумаги отличало его от стиля плоского дизайна, который широко использовался в то время.

Как и большинство дизайн-систем, Material Design был создан для обеспечения унифицированного взаимодействия с пользователем на различных устройствах, платформах и методах ввода.Подобно тому, как Apple реализовала принципы плоского дизайна в качестве своего стандарта, Google использовал Material Design, чтобы гарантировать, что независимо от того, как пользователи получают доступ к своим продуктам, у них будет согласованный пользовательский интерфейс.

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

Карточная структура

Basil во многом основана на рекомендациях по верстке Material Design.

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

Как и в случае с любой хорошо зарекомендовавшей себя дизайн-системой, у использования Material Design есть несколько основных преимуществ, которые дизайнеры должны учитывать.

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

Google поддерживает Material Design и хранит обширную документацию по его использованию и реализации. Такой поддержки и документации может не хватать для многих современных систем проектирования.

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

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

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

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

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

Rally отлично справляется с реализацией темной темы Material Design.

Недостатки использования материального дизайна

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

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

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

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

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

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

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

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

В Material Design также есть некоторые проблемы с удобством использования, которые могут сделать веб-сайты и приложения очень удобными для пользователей — и . Одна из самых больших проблем связана с так называемой «загадочной» навигацией, которая встречается во многих мобильных дизайнерских приложениях. Иконки часто используются вместо текста, и хотя иногда значки сразу узнаваемы и достаточно удобны, в других случаях это не так.

Круг, обозначающий «Дом», определить значительно труднее, чем значок дома, который ранее использовался в большинстве интерфейсов Android. Это яркий пример того, как форма ставится над функцией, что является наследием плоских корней дизайна Material Design.

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

Reply решает проблему с плавающим значком навигации с помощью более подробного выдвижного меню, которое включает текстовые метки.

Заключение

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

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

• • •

Дополнительная литература в блоге Toptal Design:

Что такое материальный дизайн и как его использовать?

Материальный дизайн — это язык дизайна, разработанный Google, чтобы помочь дизайнерам и конечным пользователям копировать работу Google и объяснить, почему вещи в Google выглядят и реагируют именно так.

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

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

Цель материального дизайна — лучше объединить фундаментальные принципы дизайна с технологиями.

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

1. Материал — это метафора

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

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

Материальный дизайн использует идею о том, что пользовательский опыт улучшается, когда элементы на экране отражают (до некоторой степени) то, как эти вещи выглядят за пределами экрана.

Например, всплывающая реклама — у нее должна быть легкая тень, потому что все 3D-объекты имеют тени.

2. Полужирный, графический и намеренный

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

Будь смелым! Используйте пурпурный!

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

3. Движение дает смысл

Motion можно использовать для перемещения пользователя и создания смысла, в частности, движение особенно полезно для обеспечения обратной связи с пользователем.

Например, на Android, когда вы удерживаете значок, он немного выскакивает, чтобы сообщить вам, что его можно переместить. Это небольшое движение — отличный способ общаться с пользователем.Это то, к чему стремится материальный дизайн.

Почему важен материальный дизайн

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

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

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

Это большое дело.

Впервые элементы стали меньше плоскими, и в результате стало проще использовать — без потери красивого минимализма плоского дизайна.

Во-вторых, материальный дизайн подходит к дизайну на экране с гораздо более осязательной стороны, чем другие языки дизайна или подходы до этого. Руководства по материальному дизайну размещают все объекты на экране в трехмерной матрице, а не в двухмерной.То есть в мире материального дизайна объекты (например, текстовое поле) фактически занимают место.

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

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

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

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

Заключение

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

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

Material Design для Android | Разработчики Android

Материальный дизайн — это исчерпывающее руководство по визуализации, движению дизайн взаимодействия между платформами и устройствами. Чтобы использовать материальный дизайн в своих приложениях для Android, следуйте определенным рекомендациям. в спецификации материального дизайна и использования новые компоненты и стили, доступные в поддержке материального дизайна библиотека. На этой странице представлен обзор шаблонов и API, которые вам следует использовать.

Android предоставляет следующие функции, которые помогут вам создавать приложения для материального дизайна:

• Тема приложения для дизайна материалов для стилизации всех ваших виджетов пользовательского интерфейса
• Виджеты для сложных представлений, таких как списки и карточки
• Новые API-интерфейсы для пользовательских теней и анимации

Тема материала и виджеты

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

Для получения дополнительной информации см. примените материальную тему.

Чтобы предоставить пользователям привычный опыт, используйте наиболее распространенные UX-шаблоны материала:

По возможности используйте заранее определенные значки материалов. Например, Кнопка «меню» навигации для панели навигации должна использовать стандартный «гамбургер» икона. См. В разделе «Значки дизайна материалов» список доступные значки. Вы также можете импортировать значки SVG из библиотеки значков материалов с помощью Векторный объект Android Studio Студия.

Тени и карты высот

Помимо свойств X и Y, представления в Android имеют Z имущество. Это новое свойство представляет высоту вида, которая определяет:

• Размер тени: виды с более высокими значениями Z отбрасывают более крупные тени.
• Порядок рисования: виды с более высокими значениями Z отображаются поверх других видов.

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

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

Анимации

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

Эти API позволяют:

• Отвечайте на события касания в ваших представлениях с помощью анимации обратной связи касания .
• Скрытие и отображение видов с помощью круглых открытий анимаций.
• Переключайтесь между действиями с помощью настраиваемых анимаций перехода между действиями и .
• Создавайте более естественные анимации с помощью изогнутого движения .
• Анимируйте изменения в одном или нескольких свойствах вида с помощью анимации изменения состояния вида .
• Показывать анимацию в чертежах списка состояний между изменениями состояния просмотра.

Анимация обратной связи при касании встроена в несколько стандартных представлений, например в кнопки.Новые API позволяют настраивать эти анимации и добавлять их в свои собственные представления.

Для получения дополнительной информации см. Обзор анимации.

Рисунки

Эти новые возможности для чертежей помогут вам реализовать приложения для материального дизайна:

• Векторные чертежи масштабируются без потери четкости и идеальны для одноцветных значков в приложении. Узнайте больше о векторных рисунках.
• Раскрашиваемая тонировка позволяет определять растровые изображения как альфа-маску и тонировать их с помощью цвет во время выполнения.Посмотрите, как добавить оттенок к чертежам.
• Извлечение цвета позволяет автоматически извлекать заметные цвета из растровое изображение. Посмотрите, как выбирать цвета с помощью Палитра API.

Что такое материальный дизайн Google на самом деле

С ноябрьским выпуском Android Lollipop язык материального дизайна Google начал впервые появляться в мире. Дизайнеры и технологи повсюду трепещут от похвалы за новый язык дизайна, который стремится объединить обширную линейку продуктов Google под богатым набором стилей и принципов дизайна.

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

Интерфейс — это бренд

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

Material Design не просто создает порядок, он создает порядок с целью и смыслом.Это чувственное выражение бренда Google. Если он найдет покупку, это может стать первой серьезной угрозой очевидной монополии Apple на безупречный пользовательский интерфейс. Как приверженец iPhone, я должен признаться, что впервые я начал бросать косые взгляды на Android (Android имеет примерно такие же хорошие шансы заслужить мою любовь, как Ллойд Кристмас с Мэри Свенсон).

Все продумано

Ошеломляющая специфика материального дизайна — это ответ на два факта:

• Если разработчик может испортить пользовательский интерфейс, он будет
• Альтернатива хорошему дизайну — не дизайн, это плохой дизайн.

Бренд либо создается, либо разрушается деталями опыта.Нет слишком маленького пикселя — даже пикселя Retina — чтобы его нельзя было рассматривать.

Эволюция дизайна от Google

Стоит отметить, что материальный дизайн создавался не ex nihilo; проницательные наблюдатели видели осторожную эволюцию Google за последние несколько лет. В 2011 году Gmail был переработан: кнопки стали более плоскими, а поля и пробелы были увеличены. В 2012 году Google Now представил многоуровневые «карточки», еще больше пробелов и хорошо продуманные типографские иерархии. Подобные дискретные обновления дизайна, теперь формализованные с помощью Material Design, были частью — по крайней мере, с внешней точки зрения — очень целенаправленного процесса.

Хотя всегда есть возможности для совершенствования, больше всего впечатляет стремление Google и последующее достижение единства в разнообразном и разрозненном наборе продуктов. Любой, кто работал с программным обеспечением, может подтвердить, что даже скромные обновления устаревших систем — с существующими пользователями, устаревшим кодом и конкурирующими бизнес-интересами — могут быть невероятно сложными. Материальный дизайн может оказаться доказательством того, что это возможно даже в больших масштабах.

Натан Синсабо — директор по дизайну консалтинговой компании KA + A.

Автор сообщения:

Натан Синсабо Вернуться к началу. Перейти к: Начало статьи.

мыслей о материальном дизайне. Материальный дизайн — это язык дизайна… | Даррен Чанг

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

Давайте сначала рассмотрим несколько примеров материального дизайна.

Примеры из материала material.io

Цвет

Первое, что пришло мне в голову, это цвет.На сайте material.io вы можете найти инструмент цвета, который содержит «Палитру материалов» — цвета, выбранные Material Design.

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

Цвета действительно поразительны, но почти все насыщенные; контраст отличный, но разнообразие цветов делает интерфейс загруженным. Лично я бы никогда не использовал больше трех цветов в интерфейсе (из трех один черный или белый).Я часто теряю фокус в этих интерфейсах.

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

Кнопка переключения будильника Google Pixel, КРАСНАЯ, ВКЛЮЧЕНА

Упрощение

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

Знаменитые нижние кнопки в системе Android

Тем не менее, эта зависимость от значков на самом деле требует больше времени для взаимодействия пользователей с системой.Большинство этих значков созданы недавно или даже были разработаны специально для одного конкретного приложения и не получили широкого признания. Чтобы понять, что означает значок, пользователям необходимо навести на них указатель мыши и прочитать текст индикации. У мобильных пользователей даже нет этой опции, поскольку на сенсорном экране нет функции наведения курсора. Дизайнеры придумали такие решения, как долгое нажатие / касание для отображения текста значка. Но разве все это не лишние дополнительные усилия?

По сравнению со встроенными приложениями в iOS, Material Design удаляет текст из значков.

Вкладки в приложении для часов Android и iOS

Flatter

Я знаю, как я могу, верно? Как можно критиковать работу дизайнера как «некрасивую»? Что ж, это не обязательно уродливо. Следующий контент может оскорбить некоторых людей, но я хотел бы услышать, как вы защищаете себя в комментарии. Если вы думаете, что я ошибаюсь, поправьте меня. Хотя на самом деле это не вина Material Design, реализация плоских элементов начинает «сглаживать» что-то еще, кроме кнопок. Графика, иллюстрации, например.Я не ненавижу плоскую графику — такие иллюстрации я создавал сам. Но по мере того, как графика становится «более плоской», проблемы начинают появляться на поверхности.

«Плоская иллюстрация» началась просто отлично.

от Алексея Кувалдина от Ярославы

Но со временем они начинают становиться странными.

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

Дизайн материалов — обзор

1.1 Дизайн и моделирование материалов

Новые и улучшенные материалы уже давно способствуют инновациям. Открытие новых материалов приводит к появлению новых концепций продуктов и технологий производства. Исторически открытие материалов происходит из поисковых исследований, в которых становятся очевидными новые химические, физические и биологические свойства новых материалов. Затем определяются их потенциальные применения. Этот путь открытия, как правило, длительный и во многом основан на интуитивной прозорливости.Напротив, преднамеренное проектирование материалов — это процесс, основанный на требованиях приложения и направленный на систематический поиск решений. В общем, проектирование включает в себя итеративный поиск, направленный на определение оптимальных решений в пространстве дизайна, которое формируется составом материала и иерархической структурой (например, микроструктурой). Таким образом, цель состоит в том, чтобы найти композиции и структуры, которые достигают наиболее подходящих химических и физических свойств с учетом различных ограничений, включая стоимость, время, доступность, технологичность и другие.

Трансформационная тенденция в начале 21 века заключается в том, чтобы включить компьютерное моделирование и симуляцию отношений материальный процесс-структура и структура-свойство для сокращения времени цикла разработки материалов и использования дорогостоящих и трудоемких эмпирических методов. Инициатива «Интегрированная вычислительная инженерия материалов» (ICME) [1,2] была принята в различных отраслях промышленности как жизнеспособный путь вперед для ускорения разработки материалов и их внедрения в продукты за счет более комплексного управления данными, мониторинга процессов и интегрированного вычислительного моделирования и моделирование.В последнее время это привело к развитию Инициативы по геному материалов в США (MGI) [3], а также к сопутствующим проектам в Европе и Азии [4], которые направлены на ускорение открытия и разработки новых и улучшенных материалов с помощью стратегии объединение информации из экспериментов, теории и компьютерного моделирования при помощи инструментов количественной оценки неопределенности (UQ) и науки о данных с упором на протоколы с высокой пропускной способностью.

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

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

•

Улучшайте материалы, обращаясь как к единичным процессам в мелком масштабе, так и к соединению механизмов в разных масштабах.

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

Понимание причинно-следственной связи между структурой материала и свойствами или реакцией является ключевым элементом дизайна материалов. Связи структура-свойство можно рассматривать как отношения «вход-выход», чтобы облегчить проектирование инженерных систем материалов. Точно так же необходимо понять и количественно оценить взаимосвязь между производством и обработкой материалов и полученной структурой материала. Физическая реализация оптимальных микроструктур материала может быть ограничена ограничениями доступных технологий обработки.Во многих случаях доступные связи между процессом и структурой рассматриваются как ограничения для доступных материалов. В результате центральной задачей проектирования материалов является установление взаимосвязи процесс – структура – ​​свойство (P – S – P) на основе потребностей свойств или ответов.

Пример зависимости P – S – P показан на рис. 1.1 [6] для сверхвысокопрочных коррозионно-стойких сталей. Каждая линия между полями указывает связь от процесса к структуре или от структуры к свойству.Мы отмечаем, что эти сопоставления часто включают явления, которые происходят в разных масштабах длины и времени, но эти явления могут проявляться где угодно в цепочке отношений P – S – P.

Рисунок 1.1. Пример взаимосвязи процесса, структуры и свойств при проектировании сверхвысокопрочных коррозионно-стойких сталей.

По материалам G.B. Олсон, Дизайн геномных материалов: граница черных металлов. Acta Mater., 61 (3) (2013) 771–781.

Моделирование и симуляция — это эффективное средство для дополнения физических экспериментов для определения связей P – S – P.Инструменты ICME в различных масштабах были разработаны для прогнозирования микроструктур на основе производственных процессов и прогнозирования химических и физических свойств микроструктур. Основное изменение парадигмы ICME заключается в разработке инструментов на основе данных и моделирования для принятия обоснованных решений при проектировании и разработке материалов. Однако есть огромные проблемы при прогнозировании отношений P – S – P. Первая проблема связана с количественным представлением иерархической природы материальных структур в различных масштабах длины.Второй серьезной проблемой является развитие многомасштабного вычислительного моделирования, необходимого для преодоления разрыва в масштабах длины и времени. Третья проблема — надежность и достоверность прогнозов на основе этих моделей перед лицом неопределенности из различных источников.

Конечная цель инструментов ICME состоит в том, чтобы помочь идентифицировать отношения P – S – P и информировать решения при выборе материалов и процессах проектирования в условиях неопределенности. На протяжении веков неопределенность была ключевым компонентом, лежащим в основе областей философии, математики, статистических и физических наук.Изучение неопределенности привело в 17 веке к новому разделу математики, известному как вероятность. Хотя разные интерпретации вероятности сосуществуют, и споры между учеными из этих разных школ продолжаются веками, все были общепризнаны, что источником неопределенности является отсутствие у нас знаний о будущем. В области физических наук различают два источника неопределенности. Один из них — это отсутствие совершенных знаний, а другой — случайные колебания, связанные с конечными температурными процессами.Первый обозначается многими как эпистемический , тогда как второй — случайный . Любое явление неопределенности, которое мы наблюдаем, является совокупным эффектом этих двух компонентов. Различие этих двух компонентов носит прагматический характер и в основном предназначена для практиков, принимающих решения. Эпистемическая неопределенность часто проявляется в виде систематической ошибки или систематической ошибки в данных или результатах моделирования и считается сокращаемой; повышение уровня наших знаний может уменьшить эпистемический компонент неопределенности.Напротив, случайная неопределенность проявляется как случайная ошибка и не подлежит сокращению. Случайные колебания по своей природе существуют в положении атомов и электронов при температурах выше абсолютного нуля и проявляются как неопределенность структуры материала в различных масштабах. Когда лица, принимающие решения, могут различать источники неопределенности, легче управлять риском принятия решения «годен / не годен». Получение большего количества знаний для уменьшения эпистемической составляющей неопределенности обычно приводит к более точной оценке риска.

Инструменты ICME, такие как теория функционала плотности (DFT), молекулярная динамика (MD), методы крупнозернистого атомистического моделирования, кинетический Монте-Карло (kMC), динамика дислокаций (DD), микроскопическое и мезоскопическое фазовое поле (PF) и конечно-элементный анализ (FEA), предсказание физических явлений в различных масштабах длины и времени. Источники неопределенности, связанные с этими инструментами, должны быть идентифицированы, если мы хотим принимать надежные решения на основе результатов этих вычислительных инструментов.

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

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

Неопределенность формы модели и неопределенность параметров являются основными компонентами эпистемической неопределенности. Обзор формы модели и неопределенностей параметров в многомасштабном моделировании приведен в таблице 1.1. Отсутствие совершенных знаний о физических явлениях также способствует расхождению между моделями и реальной физикой. Излишне говорить, что предвзятость также существует в данных, заархивированных в базах данных ICME, которые получены либо посредством экспериментов, либо моделирования [7].

Таблица 1.1. Обзор формы модели и неопределенностей параметров в многомасштабном моделировании.

Обработка приближения

Категория	Источник	Примеры
Неопределенность формы модели	Упрощение	Уменьшение размеров Разделение шкал Разделение предположений по физике Независимость
	Субъективность	Предпочтение модели Ограничение знаний
	Неопределенность параметра	Экспериментальные данные	Систематическая ошибка Случайная ошибка Модель датчика
Модель первого принципа		1 Неопределенность параметра Форма модели

Форма модели и неопределенности параметров влияют на точность прогнозов инструментов ICME.Надежность связей P – S – P может быть проблематичной. Ошибки, связанные с прогнозами, необходимо количественно оценить, чтобы можно было оценить надежность проекта. UQ — это упражнение по применению количественных методов для измерения и прогнозирования неопределенности, связанной с экспериментальными данными и прогнозами моделей. Прогнозируемая неопределенность используется для поддержки анализа рисков и принятия решений при проектировании и разработке материалов. В области статистики и прикладной математики были разработаны различные методы UQ, в том числе вероятностные и недовероятные, и они широко применяются в инженерных и научных областях.Неопределенность обычно количественно оценивается с помощью распределений вероятностей, доверительных интервалов или интервальных диапазонов. При моделировании и симуляции неопределенность связана с входными данными модели, например начальными и граничными условиями, которые поступают из источников данных. Неопределенность распространяется на результат моделирования, пространственно и во времени, смешанная с неопределенностью формы модели и параметров, связанных с имитационной моделью (ами).

Оценить распространение неопределенности в методах UQ для моделирования материалов особенно сложно, потому что моделирование материалов часто основывается на применении нескольких инструментов с разной длиной и временными масштабами, которые варьируются от дискретных до непрерывных, с большим количеством проектных переменных.Формальное применение концепций уменьшения порядка модели в этих разрозненных моделях существенно отличается от традиционных приложений моделирования континуума для твердых тел и жидкостей, где не учитывается дискретный характер дефектов и структур, которые контролируют характеристики материалов в мелких масштабах. Сами по себе модели пониженного порядка вносят ошибки формы модели. Традиционное стохастическое моделирование обычно ограничивается одним классом моделей с заданным набором управляющих дифференциальных уравнений для решения параметрической неопределенности, связанной с изменчивостью полей.Каждый инструмент моделирования, такой как DFT, MD, kMC, DD, PF и FEA, имеет уникальную основу и набор допущений и ограничен определенным диапазоном длин и временных масштабов. Учитывая иерархическую природу материалов, достаточное понимание поведения материалов часто требует применения нескольких инструментов. Выходные данные модели более низкого масштаба обычно используются в качестве входных данных для модели более высокого масштаба, независимо от того, работают ли они последовательно (иерархическое моделирование) или одновременно. Более того, материалы часто демонстрируют очень сильную чувствительность реакции к изменению конфигурации структуры и / или дефектов, которая не является гладкой и непрерывной, что бросает вызов подходам с крупнозернистой структурой и уменьшением порядка модели, которые пытаются решить проблему реакции материала на многих длинах и, возможно, шкалы времени.Следовательно, распространение неопределенности возникает не только из-за отдельных шкал в иерархии структуры материала, но также из-за того, как информация из разных моделей интерпретируется для информирования о применении моделей в других масштабах (так называемые масштабные мосты или связывание).