В чем разница между «плоским стилем» и «материальным дизайном»?

После выхода Windows 8 все говорили о «Metro UI», а затем и о «Flat design». Теперь, после выхода Android Lollipop все говорят о «Материальном дизайне». Может кто-нибудь объяснить разницу между «Материальным дизайном» и «Плоским стилем»?

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

Следует 3 принципам

1. Материал это метафора
2. Будь смелым, графическим, намеренным
3. Обеспечить смысл с движением

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

_{Дизайнеры Google сделали бумажные модели, чтобы определить слои и тени для их материального дизайна.}

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

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

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

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

Metro Design = новый дизайн пользовательского интерфейса Microsoft (теперь называемый языком дизайна Microsoft ) для Windows 8, который использует визуальную эстетику плоского дизайна .

Material Design = Google новый дизайн пользовательского интерфейса для Android, который использует визуальную эстетику плоского дизайна .

(Обратите внимание, что Metro и Material - это больше, чем просто эстетика плоского дизайна. Они также говорят о интерактивном дизайне, потоках, библиотеках шаблонов и т. Д.)

Спасибо Йоханнесу за то, что он заметил изменение названия пользовательского интерфейса Microsoft.

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

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

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

http://www.google.com/design/spec/material-design/introduction.html#

«Плоский дизайн» - это то, что вам там объяснили, а «Материальный дизайн» - это не «скейоморфный», а «плоский дизайн». «Material Design» использует плоские вещи и выравнивает их по оси Z, чтобы получить «3D Flat Design». Я надеюсь, что это помогло.

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