Хотите узнать больше об одном из самых быстрорастущих направлений в мире дизайна? Что такое настоящий язык дизайна? Короче говоря, вы хотите знать, что такое материальный дизайн и откуда он взялся?
В этой статье я хочу рассказать о Material Design, что это такое, откуда он взялся и как применяется. Если вы уже что-то знаете об этом, вы увидите, что я все равно смогу вас удивить интересным контентом, но если вы ничего об этом не знаете, то вам предстоит открыть для себя много информации!
Итак, я вам сразу скажу, что Google имеет отношение ко всему этому. Google имеет к этому какое-то отношение именно потому, что материальный дизайн — это язык, с помощью которого Google за последний год отказалась от графики всех своих продуктов, от Gmail до новенькой мобильной операционной системы Android Lollipop.
Материальный дизайн родился прежде всего на контрасте и в то же время как синтез между Flat Design или Metro Style Microsoft и шейморфизмом первых Apple iPhone.
Хорошо, если вы уже знаете flat и skeu, вы также знаете, что борьба между этими двумя стилями была в основном борьбой между двумя компаниями, как уже упоминалось, Microsoft и Apple .
Материальный дизайн — это стиль, код, язык дизайна. Это стиль, в котором Google решил обновить все свои продукты и в соответствии с которым управлять ими всеми одинаково, с теми же принципами графического экстерьера.
Он был представлен 25 июня 2014 года во время Google I / O, ежегодной конференции компании, предназначенной для всех различных программистов и разработчиков приложений и устройств с программным обеспечением и операционными системами Daddy Google.
Матиас Дуарте, дизайнер, руководивший всем этим творческим процессом (гений), объяснил, что:
Как и бумага, наш цифровой материал может расширяться или сжиматься путем разумного преобразования. Материалы имеют физические поверхности и края. Такие вещи, как тени и швы, придают смысл тому, к чему вы прикасаетесь.
Хорошо, но разве это не то же самое, что и плоский дизайн?
Краткий ответ: нет. Материальный дизайн — это эволюция плоского дизайна. На самом деле, он использует некоторые фундаментальные характеристики квартиры, такие как использование сильной цветовой палитры, основные геометрические формы, такие как квадрат и круг, для представления интерфейсов, большое пространство, оставленное для текстов и т. д.
В некотором смысле, однако, он улучшает плоский дизайн, сочетая его с метафорой материала, о котором я вам рассказывал выше, и тем самым, по сути, внося во все это толику шейморфизма.
На заре материального дизайна, в 2013 году, когда Google начал модифицировать графику некоторых своих инструментов, еще не успев закодировать новый язык, американский дизайнер и блогер Мэтью Мур смог сразу проанализировать предстоящее изменение и определить каким бы он был, будущий материальный дизайн как почти плоский дизайн , почти плоский.
Поэтому с самого начала стиля было ясно, сколько и каковы различия, как внешние, так и содержательные, между плоскостью и материей.
Но давайте посмотрим, каковы эти основные характеристики материального дизайна.
Характеристики материального дизайна
Я пришел к выводу, что ключевыми принципами, фундаментальными характеристиками материального дизайна являются 4: тактильные поверхности, интеллектуальная анимация, адаптивность и цифровые чернила . Не беспокойтесь, сейчас я проанализирую их один за другим, а также объясню, почему некоторые из этих аспектов представляют собой большое новшество.
1. Тактильные поверхности (квантовая бумага)
Первой фундаментальной характеристикой материального дизайна является использование цифровых поверхностей или квантовой бумаги. На практике каждый элемент графического интерфейса становится реальной и осязаемой поверхностью, к которой можно прикоснуться.
Все поверхности имеют толщину 1 dpi ( точек на дюйм, минимальный размер в цифровой графике). Определение квантовой бумаги также происходит от использования единицы толщины, фактически слово «квант» в квантовой механике представляет собой минимальную и неделимую единицу.
При этом элементы приобретают реалистичные тени, потому что они иерархически структурированы друг над другом.
По сути, разделение цифровых поверхностей на уровни улучшает взаимодействие с пользователем и фокусирует его внимание на важных элементах страницы, таких как кнопки или навигационные меню.
И это принципиальное отличие от плоского дизайна, который, как следует из названия (flat означает «плоский»), направлен на то, чтобы все сгладить. Материальный дизайн, с другой стороны, привносит глубину и трехмерность интерфейсных поверхностей. Но делает это, оставаясь при этом в простоте линий и форм.
Затем различные квантовые бумаги размещаются на разной высоте, что приводит к изменению генерируемой тени в зависимости от их важности на странице. Основные навигационные кнопки, например, размещены на переднем плане, а карточки, то есть основные блочные структуры интерфейса, размещены ниже и с гораздо менее последовательной тенью.
2. Интеллектуальные анимации
Очевидно, что графические интерфейсы не статичны. Я говорю конечно, но на самом деле это не так очевидно, но это должно быть для пользователя, который использует устройство. И дизайнеры и разработчики Google твердо верили в этот аспект.
Прежде всего, они сосредоточились на том факте, что эти анимации в графическом интерфейсе должны быть очень разумными и соответствовать пользовательскому опыту в данный момент. Анимация должна быть следствием жеста и, следовательно, намерения пользователя. Короче говоря, это должны быть интеллектуальные анимации!
3. Адаптивность
Все графические интерфейсы должны быть абсолютно отзывчивыми, то есть динамически и автоматически адаптироваться к каждому устройству, с которого осуществляется доступ к этому интерфейсу, будь то компьютер, планшет или мобильный телефон.
В основном адаптивность работает благодаря переходу от общего к частному, то есть в уменьшении количества индивидуальной информации, отображаемой на экране, по мере уменьшения размера экрана. Это значительно улучшает взаимодействие с пользователем, который сможет одинаково читать или смотреть видео и изображения на любом устройстве.
Один из способов структурировать веб-страницу или интерфейс приложения таким образом, чтобы ее можно было использовать на любом устройстве, — это разработать различные размеры блоков, карточек, составляющих графику. Например, при ширине экрана менее 700 пикселей этот контент будет отображаться иначе, чем на больших экранах и так далее.
4. Цифровые «чернила»
Последним из 4 основных компонентов «материального дизайна» Google являются так называемые цифровые «чернила», то есть применение потребностей печати к цифровым поверхностям интерфейсов.
По сути, все, что наносится на цифровые поверхности, в рамках метафоры материала, на котором основан язык, становится, таким образом, цифровыми чернилами и поэтому обретает реальную форму.
Как и в мире «печатного» дизайна, типографика играет решающую роль, так же как и цифровой дизайн материального языка. В частности, Google критиковали за ограниченный выбор шрифта, только один, Roboto, но на самом деле этот шрифт имеет 8 начертаний (плюс 8 версий, выделенных курсивом), что гарантирует широкое использование.
Помимо всего прочего, Roboto — это шрифт, который Google распространяет бесплатно.
Конечно, все используемые цвета и изображения также являются частью цифровых чернил. Google предлагает некоторые рекомендации для разработчиков (в основном Android), множество рекомендаций о том, какие цвета и / или изображения выбирать при применении материальных принципов.
Например, рекомендуется не выбирать более 3 цветов или не использовать изображения, которые плохо объясняют представляемый контекст или имеют низкое качество и так далее.
Оседлай волну
Материальный дизайн, безусловно, уже является точкой отсчета и тенденцией во всей области веб-дизайна и дизайна графических интерфейсов, так называемого интерактивного дизайна. Но материал становится новой тенденцией и в области графического дизайна с его формами, структурой и цветами.
Так почему бы не оседлать волну новизны и не попробовать следовать этой тенденции? Очевидно, вы не должны следовать ему, потому что это модно, но вы должны взять аспекты и (особенно) полезные концепции, о которых я рассказал вам в этой статье, и повторно использовать их, применяя их к своим проектам, когда это необходимо.
Например, если вы веб-дизайнер, вы можете подумать (как я полагаю, вы уже делаете) структурировать все адаптивным и адаптируемым образом. Или использовать так называемое «плавающее меню», то есть меню, которое следует за вами, как плавающая кнопка (благодаря интеллектуальной анимации) на протяжении всего взаимодействия с пользователем.
