В одной из последних статей, в которых излагаются самые популярные тенденции на 2016 года, я упомянул стиль дизайна материалов, который становится все более популярным и все чаще появляется на веб-сайтах и приложениях.
Хотя о самом стиле слышали много, не все знают, что это такое и откуда оно взялось. Материальный дизайн был создан Google, который хотел предоставить своим пользователям простой, но читаемый и легко настраиваемый графический стиль. Это было также отчасти ответом на популярный плоский стиль, недостатки которого выявились после столкновения с реальностью.
Впервые материал был введен во время запуска Google Now и впоследствии был реализован в других издательских приложениях. Material Design анонсировала официальный дизайн мобильных приложений Google, таких как Gmail, Google Диск, Документы Google, в 2014 году. Быстро, другие создатели также начали использовать свои предположения при создании своих проектов.
Сегодня дизайн материалов касается не только приложений Google, но и глобального стиля, который набирает популярность, а также используется на веб-страницах с его простотой, удобством и простотой применения.
Большая часть дизайна материалов может сообщить нам наш официальный веб-сайт, вы найдете основные рекомендации по стилю, описанные в основном на основе дизайна мобильных приложений, но их можно легко перевести в дизайн веб-страниц.
Что такое дизайн-материал?
Расположение на трехмерной плоскости
Важнейшей особенностью конструкционного материала является его треугольное положение. Это предположение, хотя может показаться немного странным, в основном довольно простое. Оно просто состоит в том, чтобы осознать соответствующую иерархию элементов страницы или приложения и маркировать ее тенями. В материале дизайна есть три основные глубины, которые можно использовать для различения элементов над другими.
На графике ниже показана эта иерархия, здесь можно отметить различия в используемых тени – те, что ниже, гораздо мягче, благодаря чему точно известно, где они находятся.
Яркие и хорошо подобранные цвета
Другая очень важная особенность стиля материала — правильное совпадение цветов. В идеале они должны быть живыми, но не яркими, но каждый может выбирать их по своему усмотрению.
Два основных цвета используются для создания цветовых палитр для приложений и веб-страниц. Основание является основой для создания следующего варианта и обозначается как 500. На его основе должны быть сгенерированы цвета с отметкой 50 — 900, где эти 50-400 светлее и 600 — 900 темнее.
Второй цвет (дополнительный) должен определенно выделяться на фоне и использоваться для выделения соответствующих элементов интерактивного дизайна, таких как кнопки действий или ссылки. Он также должен исходить из дополнительной палитры (обозначенной буквами A выше) и быть намного более насыщенным.
Правила оформления материалов также применяются к цветам текста, используемым в интерфейсе. Основы всегда должны опираться на RGB (# 000000) черном и осветлять с 87% прозрачностью для основного текста, 54% для вторичного текста, 38% для неактивных, сносок и значков. Тексты, используемые на темном фоне, должны основываться на белых и осветлять до 100%, 70% и 50% соответственно. Использование прозрачности вместо постоянных оттенков позволяет поддерживать высокую эстетику при значительном упрощении стилей (вам не нужно писать для конкретных цветов фона или даже задаваться вопросом, что именно они должны быть).
Простой, интуитивно понятный значок
Еще одним важным моментом в стиле дизайна материалов является использование подходящих иконок. Несмотря на то, что у вас есть большое количество свойств Google, доступных в вашей базе Google, вы также можете создать свою собственную подгонку.
Однако для того, чтобы все значки были согласованными, существуют некоторые основные правила их создания:
Максимальная простота значков должна оставаться неизменной, избегая любых сложных форм, которые могут быть искажены в низком разрешении,
Любые концы строк должны быть простыми,
Округление углов значков должно основываться на фиксированном соотношении, определяемом Google как 2dp,
Тот же размер (2dp) должен также иметь все внутренние огни, вырезы и метки разделения между элементами, составляющими значок,
Вам следует избегать стилизации значков на 3D, наклонять их и давать им глубину,
Все формы должны исходить из основных геометрических форм, не слишком сложных.
Дополнительный контент для графики
Google позволяет использовать графическую и векторную графику или иллюстрации в материале дизайна. Они всегда должны быть соответствующим образом подобраны к климату конкретного проекта и соответствовать стилистике. Кроме того, следует избегать тенденций, как правило, запасов, и тех, чья резолюция слишком мала для отображения на всех рабочих столах и мобильных экранах (особенно с высокой плотностью пикселей).
Если на фотографиях есть тексты, примените градиент (на основе черного). В зависимости от яркости фотографии он должен иметь прозрачность от 20 до 40%, чтобы обеспечить максимальную читаемость и, следовательно, удобство использования, но не преувеличивать эффект затемнения.
книгопечатание
Основной шрифт, используемый в материале дизайна, должен быть разрезан Roboto. Альтернативой, которая может использоваться альтернативно для языков со специфическими символами, которые не находятся в Roboto (например, китайском или японском), является Noto.
Базовый масштаб иерархии текста должен основываться на размерах 12, 14, 16, 20 и 34. В конкретных ситуациях, конечно, могут использоваться более крупные и меньшие символы, но толщина текста должна управляться соответствующим образом, чтобы поддерживать визуальную согласованность с остальной частью текста. Кроме того, для больших размеров шрифтов уменьшите размер символов в словах, а для небольших шрифтов и размеров — увеличьте его.
Material Design Lite для веб-дизайнеров
Google предоставил разработчикам веб-страниц и приложений ряд хорошо продуманных элементов интерфейса. Для дизайнеров приложения посвящена ранее упомянутой странице, в то время как веб-дизайнеры создали Material Design Lite.
Это, как и в предыдущем случае, набор правил, стилей и готовых элементов, которые вы можете использовать для создания своих собственных проектов. Сайт не содержит базовых правил, только веб-специфических. Вы найдете правильную сетку, заметки о типографии и компоненты. Интересные шаблоны также могут быть интересными и хорошими примерами использования.
Хорошие примеры хорошего использования показывают, что привлекательный материал для дизайна не должен жестко придерживаться всех жестких правил, но основан только на идее и развивается в направлении, подходящем для вас и вашей реализации.
Помощь в создании материалов в дизайне — бесплатные материалы
В дополнение к вышеупомянутым страницам также есть целый ряд других, которые могут помочь вам создать этот стиль.
Бумажные элементы — это бесплатный набор стилей, который сделает дизайн материала бутстрапа.
MDBootstrap — еще одна кожа под Bootstrapa, укладывая ее под материал дизайна. Лично я думаю, что это визуально лучше, но это немного похоже на Widnows 8 и 10.
Значки дизайна материалов — выпущены под лицензией SIL Open Font 1.1.
Дизайн иконок на FlatIcon — еще один источник одинаковых значков (здесь вы удобно загружаете разные форматы и создаете webfont с выбранными элементами).
Material Palette — простой генератор цветов для страниц дизайна материалов.
Material Design Colors — другой генератор, который может помочь вам при выборе цветов для вашего приложения.
Material Design Colors — еще один генератор, это позволяет вам выбрать базовый цвет и сопоставить его с дополнительным списком (яркость и затемнение).
Android Grid Psd — несколько значков и сетка, которые могут помочь вам создать свой собственный.
Material UI Kit — PSD, содержащий основные элементы пользовательского интерфейса.
Free UI Kit — другой шаблон пользовательского интерфейса, в нем содержится более 40 наименований.
Наконец, некоторые примеры
Если все, что вы прочитали до сих пор, не дает вам изображения того, что такое материальный дизайн, ознакомьтесь с некоторыми интересными и хорошо продуманными страницами для его использования. Первые четыре примера показаны на официальном сайте Material Design Lite, поэтому обратите на них пристальное внимание.
Классический пример веб-сайта с использованием материального дизайна. Используемый разрез — Roboto. Доминирующие цвета — синий (для различий) и зеленый (в основном показаны в приложениях). Кроме того, создатели использовали комбинацию серого и белого для разделения разделов.
Интересное соединение шрифта с засечками в заголовках Roboto в основных текстах. Основной цвет — бирюзовый, плюс несколько других (в заголовках). На этом сайте рассматривается очень легкое предположение, на первый взгляд это видно только в заголовке.
Интересный пример довольно ограничительного подхода к материальному дизайну (шрифты, коробки), но очень интересная сторона. Особо заслуживают внимания иконы, форма которых (круглые концы) несовместимы с основными правилами.
Однако реализация, с одной стороны, далека от основных принципов стиля, с другой стороны, вполне вписывается в нее. Используются нестандартные шрифты, но в дизайне используются два основных цвета, а также отличительная кнопка действия и трехмерный элемент (ноутбук).
На сайте очень хорошо сочетается идея материального дизайна с собственными потребностями. Здесь используются кнопки, типография и значки.
Этот стиль очень универсален, поэтому он хорошо вписывается в различные шаблоны, предназначенные для широкой аудитории.