1. Материал Максимов
2. Разве Material Design - это не просто версия Flat?
3. Материал Дизайн: скейоморфный / плоский Ловечайлд?
4. Краткое примечание о последовательности
5. Галерея материалов дизайна
6. Заключение

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

Согласно официальному введению Google в Material Design, целью этой концепции было следующее:

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

... это действительно причудливый способ ничего не сказать о существе.

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

«Динамические смещения по высоте - это целевое превышение, к которому перемещается компонент, относительно состояния покоя компонента».

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

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

Давайте начнем.

Материал Максимов

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

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

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

Хотя материал чрезвычайно разносторонний, есть несколько вещей (в соответствии с рекомендациями Google), которые он абсолютно не может сделать.

• Два куска материала не могут занимать одно и то же пространство одновременно
• Два куска материала не могут проходить сквозь друг друга
• Материал не может согнуть или сложить
• Материал не может изменить свою глубину (толщина 1dp)

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

• Смелые цвета
• Большая графика
• Очевидные типографские иерархии
• Расчетное использование отрицательного пространства
• Взаимодействие с пользователем обозначается движением

Эти характеристики должны напоминать другой вид дизайна, который прочно лежит в сфере двух измерений. Но действительно ли они одно и то же?

Разве Material Design - это не просто версия Flat?

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

Тем не менее, даже скейоморфизм материального дизайна имеет много общего с плоским дизайном. Это потому, что единственная форма реализма, которую пытается спроектировать Материальный дизайн, это та, которая представлена ​​в печатных СМИ. Под этим я подразумеваю, что все аналоговые элементы в дизайне материалов основаны на бумажные представления , Таким образом, хотя вы увидите некоторые приближения «реальных» элементов в дизайне материала, они все равно будут казаться скорее иллюстрированными, чем реалистичными.

Материал Дизайн: скейоморфный / плоский Ловечайлд?

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

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

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

Вот анимированный пример как плоских, так и скеоморфных принципов в дизайне материалов в действии:

Или как насчет этого удивительного портфолио сайта от Нг Кха Мэн.

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

Это не выглядит наполовину плохо на мобильном телефоне:

,

Говоря о мобильных ...

Краткое примечание о последовательности

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

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

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

Галерея материалов дизайна

1. Магазин времени

2. Материализм

3. Coders.pub

4. Материальное взаимодействие

5. Аппика 2

Заключение

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

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

Теперь, когда вы немного более знакомы с предметом, что вы думаете о небольшом набеге Google на лингвистику дизайна? Здесь, чтобы остаться? Проходящий модный тренд? Оставьте свои мысли в комментариях!