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

Что такое 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 — актуальная концепция дизайна для вашего сайта :: Айкон

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

 

Особенно это актуально для бизнеса в сфере 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 ожиданий, о которых стоит забыть при запуске контекстной рекламы

Что такое Google Material Design и как он изменит нашу жизнь

Что будет, если детство человека пройдёт под фильмы, где поумневшие компьютеры неминуемо убивают всё человечество, а чуть повзрослев, этот же самый человек будет читать о АНБ и прочих злодеях, которые круглосуточно читают его SMS и отправляют их в США? Он будет опасаться Google.

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

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

Чем станет Google?

Да, пока что Google — это просто куча сервисов. Однако с «материальным» дизайном компания фактически создаёт вторую реальность внутри наших компьютеров и мобильных устройств. Со своей логикой, со своими правилами и законами, со своей физикой.

Когда вы создаёте физические вещи, вы опираетесь на тысячелетний человеческий опыт. Но дизайн программного обеспечения только зарождается. Мы посмотрели на всё наше программное обеспечение и спросили себя, из чего оно сделано? Джон Вайли, главный по дизайну поиска Google

Чем сейчас являются сервисы Google для людей? Это строка поиска, которая живёт в браузере? Или это ваше мобильное Android-устройство?

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

Но в ближайшем будущем Google перестанет восприниматься просто как Chrome или Android.

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

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

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

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

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

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

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

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

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

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

При наличии достаточно чёткой системы правил становится возможным добавлять новые материалы. Бумага была очевидным выбором из-за простоты её отображения на экране. Без выраженной текстуры, практически без объёма. Но попробуйте представить себе, например, ткань или жидкости.

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

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

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

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

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

Нам интересно ваше мнение. Считаете ли вы подобную концепцию злом или воспринимаете такие инициативы как перспективный способ взаимодействия с информационной средой в будущем?

Обновленная дизайн-система Material Design 2.

0 и Android P

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

Визуально 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 (Гугл подтверждает репутацию сгнаивателя купленных компаний).

Из других интересных деталей анонса:

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

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

Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].

Новые правила дизайна интерфейсов в Google

На собственной ежегодной конференции Google I/O компания представила первые изображения будущего дизайна интерфейсов под названием “Material You”. Такие радикальные изменения приходят на смену концепции единого дизайна на всех устройствах (смартфонах, планшетах и компьютерах), что позволит гибко настраивать внешний вид системы.

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

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

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

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

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

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

Прошло много времени с тех пор, как пользовательские дизайны стали мейнстримом: MySpace, к примеру, позволял пользователю самому настроить каждый элемент своей странички, как бы плохо это ни выглядело. Ещё тогда в Windows 95 и 98 появились различные темы вроде “Джунглей” или “Открытого космоса”, которые значительно меняли внешний вид операционной системы.

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

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

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

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

Именно поэтому дизайн Material You призван изменить это, ведь с его помощью можно будет проявить свою индивидуальность. Обновление сначала выйдет вместе с системой Android 12 на смартфонах Google Pixel позже в этом году.

Читайте также:

Читайте нас в Telegram, VK и Яндекс.Дзен

---

Перевод статьи Owen Williams: Google’s New Design Language Will Make Your Phone Personal Again

10 приложений в стиле Material Design

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

Пока Android-сообщество с нетерпением ожидает свежий интерфейс в очередном системном обновлении, стиль Material все заметнее проявляется в сторонних приложениях. Ознакомившись с подборкой таких программ, спешу поделиться своими впечатлениями: есть ли в этих приложениях что-то, помимо дизайна?

Wally – каталог обоев

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

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

Скачать Wally с Google Play

MindFlux – органайзер

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

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

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

MindFlux не без нюансов, но попробовать его стоит. Поскольку приложение проходит открытое бета-тестирование, у него еще все впереди.

Скачать MindFlux с Google Play

Reddit News – Reddit-клиент

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

Скачать Reddit News с Google Play

S Converter – конвертер величин

Как несложно догадаться по названию, приложение S Converter предназначено для перевода одних единиц измерения в другие. На выбор доступно двадцать разных величин: от скорости передачи данных до размера обуви. Для удобства в приложение встроен калькулятор. S Converter смотрится скромно, но в то же время опрятно.

Скачать S Converter с Google Play

Numix – калькулятор

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

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

Скачать Numix с Google Play

Root Check – тест на наличие прав суперпользователя (root)

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

Скачать Root Check с Google Play

Cabinet – проводник

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

Скачать Cabinet с Google Play

LocalCast – сервис вывода данных на большой экран

LocalCast транслирует музыку, видео, изображения и PDF-документы с телефона или планшета на внешние экраны. Приложение способно передавать данные по стандарту DLNA на Chromecast, смарт-телевизоры, Apple TV, Xbox и другие устройства. Источником файлов может быть память гаджета, Google Drive, Google+ или интернет-сервер. LocalCast находится в бесплатном доступе, но показывает рекламу.

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

Скачать LocalCast с Google Play

Unclouded – менеджер облачных хранилищ

Unclouded предлагает общий интерфейс для работы с облачными сервисами Dropbox и Google Drive. В будущем ожидается поддержка OneDrive и BOX. Программа условно бесплатна, причем ряд критично важных функций открывается только после покупки. Среди них возможности удаления, переименования, загрузки и перемещения файлов.

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

Скачать Unclouded с Google Play

Talon – Twitter-клиент

Полагаю, Talon не нуждается в особом представлении для поклонников Twitter и Android. Да и на Кеддре о нем уже писали. Что сказать, после редизайна под стиль Material, хорошее приложение стало еще лучше.

Скачать Talon с Google Play

 

Google отказывается от компонентов Material Design в своих iOS-приложениях в пользу Apple UIKit

Компания Google постепенно отказывается от использования компонентов пользовательского интерфейса Material Design в своих приложениях для iOS. Вместо этого поисковый гигант намерен больше опираться на Apple UIKit.

Google заявляет, что в результате перехода на UIKit её команда разработчиков приложений для iOS сможет тратить меньше ресурсов. К тому же, приложения Google для iOS будут больше соответствовать стилистике платформы Apple.

Об этих изменениях рассказал ведущий инженер Google Design на платформах Apple Джефф Веркойен. Он опубликовал соответствующую информацию в сервисе микроблогов Twitter.

This year my team shifted the open source Material components libraries for iOS into maintenance mode. Why?

A ?…

— Jeff Verkoeyen (@featherless) October 7, 2021

Джефф Веркойен говорит, что его команда приостановила работу с библиотеками Material Design для iOS в начале этого года. Напомним, Material Design – это внутренний набор дизайнерских решений Google, который компания ввела в 2014 году, чтобы унифицировать внешний вид приложений и сервисов на мобильных устройствах, в Chrome OS и в интернете.

This evolution of how we approach design for Apple platforms has enabled us to marry the best of UIKit with the highlights of Google’s design language.

The result? Many custom components simply aren’t needed anymore. And the ones that are, they now get more attention and focus.

— Jeff Verkoeyen (@featherless) October 7, 2021

Веркойен рассказал, что Google разработала свои собственные компоненты Material Design для iOS, но со временем обнаружила, что они «постепенно отходят всё дальше и дальше от основ платформы Apple, потому что эти основы также развивались из года в год». Потому, вместо того, чтобы создавать себе дополнительную работу и заполнять возникающие пробелы, Google решила использовать Apple UIKit для iOS-приложений. И это обеспечивает «гораздо более тесную интеграцию с ОС, чем то, что мы можем разумно достичь с помощью специальных решений».

The time we’re saving not building custom code is now invested in the long tail of UX details that really make products feel great on Apple platforms. To paraphrase Lucas Pope, we’re «swimming in a sea of minor things», and I couldn’t be more excited about this new direction.

— Jeff Verkoeyen (@featherless) October 7, 2021

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

Источник: The Verge

10 фактов о материальном дизайне

Как потребители, мы ежедневно получаем доступ к нескольким пользовательским интерфейсам (UI) и взаимодействуем с ними, тем более, что в 2020 году мир стал удаленным. По этой причине для пользователей как никогда важно получить отличный пользовательский интерфейс с бесшовным пользователем. опыт (UX), поэтому ниже я выделил 10 основных вещей, которые вы должны знать о Material Design, чтобы создать успешный пользовательский и клиентский опыт (CX).

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

Прежде чем мы обсудим важность материального дизайна, давайте сначала проясним, что это такое.Термин материальный дизайн был разработан Google еще в 2014 году как язык дизайна, который позволяет дизайнерам улучшать взаимодействие с пользователем в Интернете или на мобильных устройствах, используя различные эффекты и компоненты (например, освещение, отступы, переходы и т. Д.).

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

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

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

9. Исследования и реализация

Продукты Google не всегда соблюдают правила

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

Например, новое исследование показало, что только подчеркнутые текстовые поля (в отличие от заполненного или ограниченного поля) вызывают путаницу и на 35% меньше заполняют форму.Однако во многих продуктах Google по-прежнему используются только текстовые поля с подчеркиванием.

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

8. Цвета

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

7.Иконы

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

6. Типографика

Четкая иерархия необходима для простой для понимания системы. На страницу следует использовать только один h2. И используйте оставшиеся h3-H6 в четкой иерархии для подгруппы вашего контента.

5.Компоненты

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

4. Реализация

При использовании React Material-UI — это реализация Material Design от Google. Это надежная, хорошо организованная система компонентов, которая повторяет большую часть исследований (не все), которые предоставляет веб-сайт Material Design.Кроме того, Material-UI предлагает возможность реализовать свои компоненты в JavaScript и TypeScript, а их компоненты TypeScript используют новейшие хуки React.

Дополнительные ресурсы для разработки — это ресурсы, доступные для реализации на других платформах, таких как Android, iOS, Интернет и Flutter.

3. Доступность

Google ДЕЙСТВИТЕЛЬНО заботится о доступности своих продуктов. Практически все перечисленные компоненты имеют рекомендации по доступности, а также рекомендации для мобильных и настольных приложений.

2. Доступность

Если анимация сделана хорошо, она может радовать и радовать пользователя. Скорость, сложность и продолжительность очень важны. Анимация должна быть короткой и полезной. Сейчас не начало 2000-х, и пользователей не впечатляют модные Flash-сайты (но были ли они когда-либо на самом деле?).

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

2. Доступность

Если анимация сделана хорошо, она может радовать и радовать пользователя. Скорость, сложность и продолжительность очень важны. Анимация должна быть короткой и полезной. Сейчас не начало 2000-х, и пользователей не впечатляют модные Flash-сайты (но были ли они когда-либо на самом деле?).

1. Кнопки

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

При наличии пары кнопок, где одна кнопка предназначена для подтверждения действия пользователя, а вторая — для отмены действия пользователя, кнопка подтверждения должна быть основной или дополнительной кнопкой в ​​правой части экрана. Кнопка отмены должна находиться на один уровень ниже кнопки подтверждения (вторичной или третичной) и слева от кнопки подтверждения. Однако при разработке для устройства Android порядок меняется.Если вы разрабатываете для мобильных устройств или в контейнере небольшого размера, и не хватает места для размещения кнопок рядом, кнопки можно складывать друг с другом, используя кнопку отмены под кнопкой подтверждения.

Поддержка UX / UI

Хотите узнать больше о материальном дизайне? Наша команда состоит из лидеров мнений, UX-стратегов, исследователей и интерфейсных разработчиков, которые предоставляют стратегические идеи, советы, идеи и прототипы. Мы рады помочь ответить на ваши вопросы, просто свяжитесь с нами здесь.

Новый язык дизайна Google, созданный пользователями

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

Проблема заключалась в том, что язык не оставлял много места для выражения и творчества. И почти десять лет спустя вице-президент Google по дизайну Матиас Дуарте оглядывается на язык, который он помог создать, и видит его недостатки. «Материальная метафора, возможно, была слишком хороша, и бумага стала доминировать в наших интерфейсах», — говорит Дуарте. «Они последовательны … но они стали немного устаревшими, скучными, слишком привязанными к модернистскому единству, распространенному повсюду.«Это особенно проблематично сегодня, так как дизайн имеет тенденцию к максимальному и настраиваемому, в то время как Google довел до совершенства стоическое и функциональное.

[Изображение: Google] После долгих лет работы над решением этой проблемы компания считает, что нашла противоядие. С предстоящим выпуском Android 12 Google запустит эволюцию материального дизайна, получившую название Material You. Вы можете опробовать Android 12 в бета-версии, начиная с сегодняшнего дня.

Материал Вы сохраняете большое пустое пространство и визуальную простоту, к которым вы привыкли с Material Design.Но он наполнен более динамичной анимацией и меньше полагается на строгие значки и сетку интерфейса. Прежде всего, новый Android будет легко настраиваться. (Это часть «вы».) Думайте о Material You как о закодированном консультанте по дизайну Google. Но пользователь по-прежнему остается креативным директором.

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

[Изображение: Google] «Автомобильная промышленность вышла за рамки« вы можете получить его любого цвета, если он черный », — говорит Дуарте. «Мы используем наши устройства и приложения в течение дня. Они с нами ближе и в большем количестве мест, чем наша обувь, одежда и очки. Так почему же все они застряли в этом отсталом мире, особенно когда компьютеры такие хорошие и мощные? Мы действительно можем проектировать индивидуально для каждого человека. Мы думаем, что именно так будут выглядеть дизайн и технологии в будущем.И мы надеемся начать разговор, чтобы двигаться в этом направлении ».

Себастьян Бауэр, креативный директор по Android, назвал Material You «гуманистическим противоядием» предписывающим стандартам материального дизайна Google. И хотя Material You будет запущен на Android 12, в наступающем году он распространится на всю экосистему продуктов Google.

[Изображение: Google]

Сложнее, чем кажется

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

[Изображение: Google] Отличие от Material You в том, что он предлагает больше нюансов. Фундаментальная предпосылка Material You заключается в том, что интерфейс кажется живым. Когда вы пролистаете список настроек и дойдете до конца, он немного подпрыгнет (это не новый трюк пользовательского интерфейса, но новый для Google). Виджеты перемещаются с удовлетворительной инерцией.Уведомления отображаются в виде группы, но если вы возьмете одно из них большим пальцем и переместите, его изогнутые углы в ответ немного поменяются. А когда вы делаете что-то вроде разблокировки экрана или подключаете телефон, весь экран мерцает.

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

Дуарте мечтает о Материальном Тебе. Представьте себе интерфейс, в котором каждый компонент представляет собой настоящий трехмерный объект, подверженный действию реального света и построенный на параметрах, которые могут быть мгновенно обновлены. Как говорит Дуарте, я представляю себе это максимальное приложение для iPhone, которое было запущено в начале этого года. «Нас там нет!» он говорит. «Я пытаюсь нарисовать картину того, к чему это приведет».

[Изображение: Google]

Настраиваемая оболочка для выражения или необходимости

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

[Изображение: Google] Кнопки и шрифты могут быть как полужирными, так и простыми, по желанию пользователя. «Каждый может получить полный спектр настроек науки, которые идеально подходят для него, даже если ситуация меняется в течение дня», — говорит Дуарте. «Не только кому-то с особыми потребностями нужно больше контраста … иногда я теряю силы и нуждаюсь в этом».

[Изображение: Google] Такой подход, конечно, можно рассматривать как обременительный для пользователя, но чтобы уменьшить это, Google перемещает параметры настройки из настроек расширенного доступа в новый раздел «Обои и стили», который вы можете найти при долгом нажатии на лаунчер.

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

[Изображение: Google] За счет привязки настройки пользовательского интерфейса к одному варианту настройки, который уже делает большинство из нас, Google почти гарантирует, что наши интерфейсы будут отличаться друг от друга.Но это не значит, что пользователи предоставлены сами себе. Программное обеспечение Google подбирает цветовые палитры, которые не только хорошо выглядят; они были созданы в сотрудничестве с собственной командой промышленного дизайна Google, поэтому интерфейс не конфликтует с оборудованием Google.

[Изображение: Google] «Это немного пугает… самих дизайнеров Google», — говорит Дуарте. «Ужасно, что нам придется поделиться контролем над каждым пикселем с нашими пользователями! Но мы обнаруживаем, что совершаемый нами прыжок веры открывает совершенно новые положительные стороны.”

10 рекомендаций по разумному использованию Material Design

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

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

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

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

Материальный дизайн : сужение или поддержка?

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

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

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

Последние разработки в области дизайна материалов

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

Источник изображения: (снимок экрана) Inbox от Gmail

В интерфейсе Inbox от Gmail пользователи могут увидеть характерные особенности Material Design от Google.Плоские кнопки, шрифт и графика отличаются фирменным оформлением. Если вы зайдете на сайт, вы также увидите material design , специфичные для анимации .

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

Источник изображения: (скриншот) Nimbus9

Выделение вашего бренда в рамках

Material Design Framework

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

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

1. Выбирай и выбирай концепции: Ничто не говорит о том, что вам нужно дословно следовать руководству по материальному дизайну . Найдите удобство использования элементы, которые имеют смысл на современных устройствах, и объедините эти концепции дизайна с уникальным интерфейсом, который ломает стереотипы.Убедитесь, что каждая открытая для пользователя страница отражает ваш бренд.
2. Изменить цвета и шрифты: Вместо использования набора цветовой палитры и набора типографики фреймворка добавьте немного творчества к смеси с чем-то, что другие веб-сайты не используют. Создайте что-то, что выглядит свежо и отражает ваш бренд. Ваш контент должен казаться читабельным и интересным, но это не значит, что пользователи ожидают одинакового опыта от всех брендов.
3. Не игнорируйте функциональность в пользу формы: Распространенная ошибка дизайна взаимодействия — это предпочтение формы над функциональностью, то есть некоторые дизайнеры используют эстетические рекомендации Material Design и игнорируют рекомендации юзабилити .Они хотят создать внешний вид современного веб-сайта, фактически не изменяя пользовательский интерфейс в соответствии с визуальным впечатлением. В мире цифрового дизайна, если веб-сайт выглядит как удобная для пользователя страница, он также должен действовать как удобная для пользователя страница.
4. Доверьтесь своему опыту проектирования: Google часто прокладывает путь к передовым UX и UI, поэтому всегда полезно использовать их дизайн в качестве ориентира. Тем не менее, вы лучше всех знаете свою демографию пользователей и свой бренд.Доверьте этим знаниям свой общий подход к дизайну. Например, материальный дизайн иногда использует плоские кнопки для оптимизации страницы, но это может привести к путанице в отношении интерактивности. Оставьте потенциально запутанные элементы и занятую анимацию выключенной, если вы думаете, что это может помешать удобству использования .
5. Поймайте суть Material Design : Всесторонне развитые дизайнеры исследуют достоинства любой основной дизайнерской тенденции. В следующий раз, когда вы изучите философию материального дизайна , отбросьте все лишние детали.По сути, это сочетание реального и цифрового мира в едином интерфейсе. Возьмите основные идеи, но сделайте свои собственные правила для элементов, которые квалифицируются как «чистые» и «простые».
6. Перейти на сайты конкурентов: Ваши сайты похожи друг на друга или элементы контрастируют с достаточно, чтобы создать впечатление о бренде по-другому? Вы хотите включить информацию, которая соответствует уровню детализации, предоставляемому вашим конкурентом, но общий внешний вид сайта не должен быть похожим на двойник.
7. Найдите уважительную причину: Используйте элементы Material Design только в том случае, если вы можете указать причину для этого. Вам действительно нужно добавить глубины или использовать FAB (плавающую кнопку действия)? Если добавление не повысит удобство работы пользователя с интерфейсом, перейдите к статическому или плоскому элементу, который соответствует потребностям вашего пользователя.
8. Продолжайте инвестировать в собственное обучение: Ходите на семинары, посещайте занятия и продолжайте читать о более широких концепциях UI и UX вместо того, чтобы полагаться на Material Design в профессиональном плане. material design в том виде, в каком мы его знаем, в конечном итоге будет широко популярной философией, поэтому важно, чтобы вы не отставали с точки зрения основной философии — создания отличного пользовательского опыта. Создайте свою собственную отличительную дизайнерскую подпись, которая отзывчиво работает, не чувствуя себя слишком ограниченной.
9. Слушайте отзывы пользователей: Если вы постоянно не находитесь в среде конечного пользователя, вы не всегда можете заметить небольшие несоответствия, которые негативно влияют на взаимодействие с пользователем.С другой стороны, ваши пользователи могут предоставить важную информацию о том, что работает, а что нет. Если что-то не так, как задумано, разработчик приложения столкнется с последствиями. Спрашивайте и прислушивайтесь к реальным впечатлениям пользователей, когда вы идете, чтобы убедиться, что вы обслуживаете свою целевую аудиторию.
10. Примите material design , если это имеет смысл: Несмотря на важность дифференциации вашего стиля как дизайнера, material design предлагает многое с точки зрения простоты и удобства использования .Если вам нравится знакомство с языком, используйте его, чтобы придать сложному дизайну урезанную функциональность, необходимую для того, чтобы веб-сайт или приложение выполняли свою основную задачу.

Последние мысли

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

Хотите узнать больше?

Если вас интересует пересечение UX и дизайна пользовательского интерфейса, подумайте о том, чтобы пройти онлайн-курс «Шаблоны дизайна пользовательского интерфейса для успешного программного обеспечения» или «Дизайн-мышление: руководство для начинающих». Если, с другой стороны, вы хотите освежить в памяти основы UX и юзабилити, вы можете пройти онлайн-курс по пользовательскому опыту (или другой теме дизайна). Удачи в вашем познавательном путешествии!

(Источник изображения: Ingo Joseph — Creative Commons)

Google заявляет, что отказывается от компонентов Material Design в iOS в пользу UIKit

от Apple.

Google постепенно отказывается от использования компонентов пользовательского интерфейса Material Design для своих приложений для iOS в пользу того, чтобы больше опираться на собственный UIKit от Apple.Компания заявляет, что в результате перехода ее команда разработчиков iOS должна будет избавиться от лишних хлопот, но, что более важно, это изменение, вероятно, будет означать, что приложения Google для iOS будут меньше походить на злоумышленников на устройствах Apple. Вместо того, чтобы подчиняться правилам пользовательского интерфейса Android, они должны выглядеть и чувствовать себя так, как будто они принадлежат iOS.

Об изменении объявил в Twitter Джефф Веркойен, ведущий инженер Google Design на платформах Apple. Я рекомендую прочитать полную ветку, если вам интересно, но Веркойен говорит, что его команда «перевела библиотеки компонентов материалов с открытым исходным кодом для iOS в режим обслуживания» в начале этого года.Материальный дизайн — это внутренний набор дизайнерских соглашений Google, который компания ввела в 2014 году, чтобы унифицировать внешний вид своих приложений и сервисов на мобильных устройствах, в Chrome OS и в Интернете.

В этом году моя команда перевела библиотеки компонентов материалов с открытым исходным кодом для iOS в режим обслуживания. Почему?

A …

— Джефф Веркойен (@featherless) 7 октября 2021 г.

Эта эволюция нашего подхода к дизайну для платформ Apple позволила нам объединить лучшее из UIKit с лучшими особенностями языка дизайна Google.

Результат? Многие пользовательские компоненты просто больше не нужны. А те, что есть, теперь привлекают больше внимания и внимания.

— Джефф Веркойен (@featherless) 7 октября 2021 г.

Время, которое мы экономим, не создавая собственный код, теперь вкладывается в длинный хвост деталей UX, которые действительно делают продукты великолепными на платформах Apple. Перефразируя Лукаса Поупа, мы «плывем в море второстепенных вещей», и я очень рад этому новому направлению.

— Джефф Веркойен (@featherless) 7 октября 2021 г.

Verkoeyen сказал, что Google разработал собственные компоненты Material Design для iOS, но со временем обнаружил, что они «постепенно отходят все дальше и дальше от основ платформы Apple, потому что эти основы также развивались из года в год.По словам Веркойена, вместо того, чтобы создавать себе работу, заполняя эти пробелы, Google теперь решил использовать собственный UIKit от Apple для приложений iOS. Он отмечает, что это «приведет к гораздо более тесной интеграции с ОС, чем то, что мы можем разумно достичь с помощью специальных решений».

Формулировка

Веркёйена здесь несколько наклонная, но многие интерпретируют эту цепочку — в том числе и упоминание о «более тесной интеграции» — как означающее, что приложения Google для iOS в будущем будут в большей степени соответствовать соглашениям о дизайне мобильной ОС Apple.Это может означать, например, использование меньшего количества настраиваемых кнопок, которые выглядят так, как будто они принадлежат Android.

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

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

Каковы настоящие достоинства материального дизайна?

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

Однако материальный дизайн выходит за рамки приложений Google и Android.

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

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

Идея наслоения элементов в интерфейсе не нова. Тем не менее, Material Design делает шаг вперед — сочетая тактильные ощущения со смелой и яркой эстетикой.

Фотография предоставлена: Dropbox

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

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

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

1. Реалистичные визуальные подсказки: Дизайн основан на реальности и на самом деле вдохновлен дизайном с бумагой и чернилами.
2. Смелый, графический и намеренный: Фундаментальные методы дизайна определяют визуальные эффекты. Типографика, сетки, пространство, масштаб, цвет и изображения определяют весь дизайн. Элементы живут в определенных пространствах с четкой иерархией. Выбор цвета и шрифта сделан осознанно и смело.
3. Движение дает смысл: Анимация — ключевой компонент материального дизайна, но она не может существовать только ради движения. Анимации должны происходить в единой среде, служить для фокусировки дизайна и включать простые и легкие переходы. Движения и действия должны отражать физический мир.

Понимание «тактильной поверхности»

Одна из вещей, которые часто возникают при разговоре о многослойных интерфейсах, — это «тактильная поверхность».”

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

Фотография предоставлена: Google Material Design

Как объясняется в Mobile Design Trends 2015 и 2016, тактильная поверхность является контейнером для контента и информации.Контейнер плоский по конструкции, но имеет слабую тень, отделяющую его от других контейнеров и слоев. Другие методы создания разделения между слоями, такие как текстуры, градиенты или штрихи, не нужны.

Фотография предоставлена: Reddit

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

Фотография предоставлена: Google Material Design

Как показано в Android Lollipop UI Kit, тактильная поверхность четко определяет взаимосвязь и функцию контента в дизайне. (У каждого контейнера часто есть одно задание, такое как ссылка или видеоплеер.) Этот подход также устанавливает глубину, поскольку элементы в других контейнерах являются слоями, создавая, казалось бы, трехмерный мир.

Материал создан для адаптивного дизайна

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

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

Фото предоставлено: Рекомендации Google по дизайну материалов

Соображения включают:

• Точки останова: Ширина включает 480, 600, 840, 960, 1280, 1440 и 1600 пикселей
• Сетка: 12- макет столбца с полями и промежутками (8, 16, 24 или 40 пикселей) и сеткой из базовых линий
• Поведение поверхностей: Пользовательский интерфейс адаптируется к типу экрана, так что поверхности видны или переключаются, чтобы скрыть
• Шаблоны: Функция основана на размере экрана, включая раскрытие, преобразование, расширение, перекомпоновку и разделение

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

Материалы и другие тенденции мобильного дизайна

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

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

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

Фотография предоставлена: WordPress для Android

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

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

Фотография предоставлена: Morning Routine

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

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

Фотография предоставлена: Field Trip

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

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

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

Что дальше?

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

Как указано в разделе «Тенденции мобильного дизайна 2015 и 2016», мы, вероятно, увидим больше этих характеристик Android, возможно, даже в iOS от Apple и других областях, не связанных с приложениями. Материальный дизайн выглядит красиво и хорошо работает в самых разных местах. Дизайнеры захотят воспользоваться этим, и облегченная версия обеспечивает идеальный уровень рекомендаций.

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

Layers определенно сохранятся, но общий вид может быть немного более «многослойным» и немного меньше материала, так что дизайн находится где-то между стандартами Material Lite и iOS.

Фотография предоставлена: The Weather Channel

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

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

Фотография предоставлена: Elevate

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

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

Фотография предоставлена: Weather Timeline

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

Выводы

Современные многоуровневые интерфейсы — это только начало.

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

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

Чтобы узнать больше о полезных методах мобильного дизайна, ознакомьтесь с бесплатным руководством Mobile Design Trends 2015 & 2016. 79 примеров выдающегося мобильного дизайна от таких компаний, как Slack, Tinder, Waze и других, превращены в простые методы дизайна. Книга также включает 61 полезный ресурс по мобильному дизайну.

Материальный дизайн для Android | Разработчики Android

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

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

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

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

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

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

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

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

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

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

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

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

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

Анимации

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

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

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

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

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

Рисунки

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

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

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

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. Обзор формы модели и неопределенностей параметров в многомасштабном моделировании.

Обработка 9075 Неопределенность формы 9097 Параметр 9097 Неопределенность формы 9097

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

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

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

No related posts.