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

20

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

user3631654
источник

Ответы:

20

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

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

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

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


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

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

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

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

Зак Соусье
источник
В этом Material Design, визуально, используется множество плоских иконок и стилей дизайна, я бы сказал, что они, безусловно, связаны в этом смысле. Материальный дизайн, конечно, больше, чем визуальный взгляд, как вы указали.
DA01
@ DA01 Спасибо, я попытался прояснить свою точку зрения в самой последней редакции
Зак Сауцер
На заметку, эта статья отлично подходит для сравнения iOS с Material Design и узнать больше о каждой из них.
Зак Соусье
5

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

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

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

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

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

DA01
источник
Я не думаю, что это достаточно подробно описывает то, чем они на самом деле являются . Похоже, что они используют больше
Зак Заусье
@ ZachSaucier верно. ОП спрашивал в основном о разнице. Я бы сказал, что разница в том, что один - это общий термин для визуального стиля, два других - это конкретные термины для фирменных руководств по пользовательскому интерфейсу.
DA01
1
@ DA01, просто хочу отметить, что интерфейс от Microsoft еще не был назван метро с 2012 года он вместо этого под названием «Microsoft язык дизайна» источник . Я понимаю, что вопрос ОП также упоминается под этим именем, но это неверно.
Ханна
@ Йоханнес да, это хорошая заметка.
DA01
Material Design можно использовать не только для Android, но и для веб-дизайна и дизайна приложений для настольных компьютеров.
vovahost
3

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

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

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

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

Zach Saucier
источник
-1

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

luharanu
источник
-2

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

Джим
источник