Материал дизайн: Material Design на русском. Часть 1 — Принципы | by Ruslan Sharipov

Material Design на русском. Часть 1 — Принципы | by Ruslan Sharipov

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь

Material — это дизайн-система, которая была создана Google, чтобы помочь всем, кто заинтересован создавать высококачественные интерфейсы для Android, iOS, Flutter и веба.

Источник: https://material.io/design/introduction#principles

Понятие «Материал» — это метафора

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

Смелый, графический, сознательный

Источник: https://material.io/design/introduction#principles

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

Анимации со смыслом

Источник: https://material.io/design/introduction#principles

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

На картинке отражены примеры некоторых компонентов, которые предлагает Material Design для проектирования и разработки интерфейсов.

Компоненты — это интерактивные строительные блоки для создания пользовательского интерфейса. Они имеют встроенную (по умолчанию) систему состояний, чтобы пользователь понимал когда элемент в фокусе, выбран, активирован или когда произошла ошибка. Также, компоненты передают состояния наведения, нажатия, перетаскивания и отключения. Библиотеки компонентов доступны для Android, iOS, Flutter и интернета.

Компоненты охватывают и закрывают широкий спектр интерфейсных потребностей, например:

• Отображение: размещение и организация контента с использованием таких компонентов, как карточки (cards), список (list) и набор действий (sheets).
• Навигация: позволяет пользователям перемещаться по продукту с помощью таких компонентов, как боковая панель навигации (navigation drawers) и вкладки (tabs).
• Действия: позволяет пользователям выполнять задачи с помощью таких компонентов, как плавающая кнопка (floating action button сокращенно FAB).
• Ввод: позволяет пользователям вводить информацию или делать выбор с помощью таких компонентов, как текстовые поля, chips (не знаю как перевести) и элементы выбора (чекбоксы, радио-кнопки и свитчеры).
• Коммуникация: оповещение пользователей о важной информации и сообщениях с помощью таких компонентов, как snackbars (не знаю как перевести), баннеры и диалоговые окна.

Цвет, типографика и форма компонентов, таких как кнопки, могут быть легко изменены в соответствии с вашим брендом.

Цвет

Если в качестве цвета у контейнера используется ”colorPrimary / основной“ цвет (1), то для внутреннего содержимого можно использовать цвет ”colorOnPrimary / на основном” (2).

Пояснения к картинке
colorPrimary — это переменная, наиболее часто отображаемый на экране и в компонентах приложения. Этот цвет должен проходить рекомендации по доступности текста / иконок при рисовании поверх цвета поверхности или фона.

colorOnPrimary — это цвет, который передает рекомендации по доступности для текста/иконографии при рисовании поверх основного цвета.

Цветовая система материал— это подход к применению цвета к пользовательскому интерфейсу. В ней все глобальные цветовые стили имеют семантические названия и определенное использование в компонентах — primary (основной цвет), secondary (второстепенный цвет) — допустим это могут быть цвета вашего бренда, а также цвета для surface (поверхность), background (фон) и error (ошибка).

Каждый цвет также имеет дополнительный цвет, который используется для элементов, размещенных «сверху», чтобы предоставить согласованность и достаточный контраст (например colorOnPrimary, colorOnSecondary, colorPrimaryVariant, colorSecondaryVariant и т.д.).

Типографика

Вся типографика в компонентах использует один из 13 глобальных стилей.

Типографика представлена в виде шкалы из 13 стилей: от заголовков до основного текста и мелких подписей. Каждый стиль имеет четкое значение и применение в интерфейсе.

Важные атрибуты, такие как шрифт, начертание шрифта и регистр букв, могут быть изменены в соответствии с вашим брендом и дизайном.

Форма

Категории позволяют применять один стиль, например срезанный угол, в различных размерах в зависимости от размера компонента.

Если делать разные формы для компонентов, то это может помочь усилить внимание пользователя или более явно выделить/отделить компоненты, а также передать их состояние и выразить ваш бренд.

Все компоненты сгруппированы по категориям в зависимости от их размера (маленький, средний, большой). Эти глобальные стили позволяют быстро изменять форму компонентов одинакового размера.

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

Что такое Material Design и как делать анимацию в стиле Google — статьи на Skillbox

Сегодня мы привыкли к тому, что интерфейсы Google выглядят и работают примерно одинаково. Но так было не всегда. Еще десять лет назад приложения для Android, десктопная почта и мобильный веб были похожи друг на друга не больше, чем крот на пианино.

В 2011 году в Google решили, что с этим пора что-то делать, и действительно что-то сделали. А именно — унифицировали свои продукты, создали единый стиль для приложений Android Holo. Только вот они снова оказались разными.

В результате пользователи все так же терялись при переключении между мобильным и десктопным интерфейсами: выглядели они по-разному, управлялись тоже — проблема оставалась.

Gmail.com (Kennedy)Gmail for Android (Holo)

К 2014 году проблему удалось решить. Именно тогда на конференции I/O Google представили свою новую дизайн-систему Material Design. Компания не просто представила гайдлайн по визуальному стилю, но и заявила о себе как о единой цифровой среде.

Что касается визуального стиля, Material Design примирил скевоморфизм с флэтом. Он не вернулся к реализму, но добавил в плоский дизайн его опыт взаимодействия с реальным миром — за счет знакомых тактильных характеристик и глубины.

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

Material Design базируется на тактильной реальности, вдохновлен изучением бумаги и чернил, технологически продвинут и открыт

для воображения и магии.

В основе Material Design лежат четыре принципа:

1. Тактильные поверхности

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

2. Полиграфический дизайн

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

3. Осознанная анимация

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

4. Адаптивный дизайн

Все вышеперечисленное должно работать на любых устройствах.

Четыре основных принципа Material Design наглядно. Источник

Как видите, анимация — одна из основ Material Design. И хотя некоторые ее критикуют, поклонников все же больше. И вот почему.

В отличие от Apple, у которых анимация несет преимущественно эстетическую функцию, Google делает ставку на UX и функциональность. В их рекомендациях анимации уделено гораздо больше внимания, а на конференциях то и дело им посвящаются доклады.

Основная идея анимации в Material Design — сделать пользовательский интерфейс выразительным и простым в использовании. Для этого она должна отвечать трем принципам.

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

Анимация фокусирует внимание на том, что важно, и не отвлекает от основного действия.

Анимация выражает характер, индивидуальность и стиль каждого продукта.

Таким образом, с помощью анимации можно:

Показать пользователю, как элементы связаны друг с другом.

Показать, как выполнять разные действия.

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

И это только верхушка айсберга. Google действительно заставил мир пересмотреть отношение к анимации и сделал ее полноценной частью UX-дизайна. Можно искать недостатки в рекомендациях Material Design, но, думаем, не стоит совсем игнорировать значение анимации сегодня.

А вот забавное замечание об одном из положений Material Design — о том, что все предметы, выходящие из экрана, должны ускоряться. Ведущий разработчик Джон Шлеммер считает, что неважно, где именно они остановятся.

«В руководстве по материальному дизайну Google, похоже, думают, что вы должны только ускоряться при выходе из экрана», — Паскаль Д’Сильва. Источник

Благодаря Material Design анимация сегодня — не просто эффектное дополнение дизайна, а полноценная его часть. Если вы все делаете правильно, движение оживляет ваш интерфейс и заставляет пользователей любить интерфейс.

Научиться создавать крутые анимации можно на курсе «Анимация интерфейсов».

Курс «Анимация интерфейсов»

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

• Живая обратная связь с преподавателями
• Неограниченный доступ к материалам курса
• Стажировка в компаниях-партнёрах
• Дипломный проект от реального заказчика
• Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

что за зверь (объяснение, примеры, галерея)

Вероятно, вы не раз встречали словосочетание «материальный дизайн». Концепция материал дизайн не новая и уже довольно крепко устоявшаяся на рынке веб дизайна, в первую очередь, благодаря своему обращению к пользовательскому опыту. Материальный дизайн впервые был представлен летом 2015 года компанией Google, и с тех пор является неразрывно связанным с этой компанией понятием. Какие его отличительные черты, основные принципы, и так ли он хорош, как о нем поют? Об этом далее в статье.

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

Что такое материальный дизайн?

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

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

Цели материального дизайна

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

Принципы материального дизайна:

1. Материальный дизайн это метафора: визуальные сигналы и все графические элементы оформления должны быть основаны и взаимосвязаны с окружающей действительностью, материальным миром.
2. Графичность, четкость, целенаправленность: базовая теория дизайна (использование типов, сетки, организация пространства, масштаб, пропорции, цвет и изображения) должна определять визуальные эффекты и составлять визуальную основу материал дизайна.
3. Каждое перемещение или действие имеет значение: перемещение объектов или другие совершаемые действия не должны мешать пользователю, напротив, они должны обеспечивать удобство и согласованность совершаемых действий.

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

Все эти рекомендации основываются на основных свойствах материального дизайна. Самое главное то, что материальный дизайн основан на реальности, в нем объекты находятся в почти трехмерном пространстве. С точки зрения эстетики, материальный дизайн находится где-то между шкалой плоского дизайна (flat design) и скевоморфизмом.

Цвет и типографика материального дизайна

Цвета в материальном дизайне имеют много общего с цветами плоского дизайна. Палитры матириал довольно смелые и яркие. Шрифты, так же как в плоском дизайне, простые без засечек.

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

А лучшее в цветовой концепции материального дизайна  это использование четкого контраста. Для удобства пользователей Google предоставляет полную цветовую палитру с образцами, доступными для скачивания. Концепции цвета настолько просты, что моет возникнуть вопрос, не думает ли Google, что дизайнеры напрочь забыли теорию цвета.

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

Шаблоны, структура и дизайн

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

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

Базовые элементы материал дизайна

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

• Нижний экран (нижние слои дизайна)
• Кнопки
• Карты
• Диалоги
• Разделители
• Сетки
• Списки
• Меню
• Полосы прогресса и активности
• Слайдеры
• Подзаголовки
• Переключатели
• Вкладки
• Текстовые поля
• Всплывающие окна

Дизайнеры, которым нравится внешний вид предложенных компонентов, могут даже загрузить их исходники для Photoshop, Sketch или Illustrator. Иконки и другие детали идут в паре со стилями и подстраиваются под выбранный шаблон.

Удобство, доступность и пользовательский опыт

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

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

Особенно полезен раздел о моделях взаимодействия. Он раскрывает идеи, направленные на то, чтобы сделать некоторые элементы дизайна универсальными по отношению ко всем возможным веб проектам. Например, формат указания даты и времени, или работа поиска. Они могут отличаться на разных сайтах, но отличия незначительны, и в основном эти элементы довольно универсальны. Если посетитель видит лупу – он понимает что перед ним поиск, которым можно воспользоваться, даже если рядом с ней нет текстового указателя. Именно поэтому материальный дизайн содержит некоторые из самых простых инструментов, которые пользователи ожидают увидеть на любом сайте, и с которыми они привыкли работать.

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

10 Ресурсов по материальному дизайну

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

1. Наборы элементов в стиле материал дизайн для смартфонов и других мобильных устройств (см. ниже).
2. Иконки в стиле материал.
3. Цветовые схемы и палетки.
4. Материальный дизайн для Bootstrap.
5. Материальный дизайн для AngularJS.
6. Платформа по созданию материал дизайна Materialize.
7. Чеклист материального дизайна для Android.

Часть 1: Галерея материального дизайна для сайтов и приложений – бесплатные материалы

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

Материальный дизайн от UXPin

Материал дизайн от Creative Tim

Бесплатная подборка материал от Designtory

UIDE – бесплатный материал скетч от Mateusz Dembek

Google ресурс скетчей по материальному дизайну

L Bootstrap материальный дизайн в стиле Android от Виталия Чернеги

Скетч ресурс по материальному дизайну от Boilerplate

Материальный дизайн для EL Passion

Froala блоки в стиле материал

Бесплатный Landing 1.

0 в материальном стиле

Мобильный материальный дизайн

Android Nougat бесмлатный GUIдизайн

Материальный дизайн для мобильных приложений

avsc материал дизайн

Материальный дизайн от PsdRepo

Материальный дизайн для музыкальных приложений от Divan Raj

UI материал дизайн от Jakub Kośla

Маткриальный дизайн для андроид от Ivan Bjelajac

Материал дизайн от Ultralinx

Мобильный материальный дизайн от Emma Drews

Бесплатная материал подборка от Adrian Goia

Материал дизайн от UI8

Материальный дизайн для Photoshop от Psddd

Android материал дизай PSD от Nine Hertz

Другие подборки материального дизайна, которые могут быть полезными

Station интерактивный материал дизайн от Nelson Sakwa

Виджеты в стиле материал от Elad Izak

Материал скетч от Benjamin Schmidt

Цифры в стиле материал, PSD от Crunk C

Рецепты в стиле материал – мокап для приложения от Mitchell Millsaps

Часть 2: Цветовый схеммы материал дизайна

Стиль – цвет: официальное руководство Google

Google инструмент для подбора цветов

Инструмент для подбора цветовых схем

materialuicolors цветовые схеммы

Инструмент подбора цветов материал Color Picker

Часть 3: Материал дизайн иконки

Официальная коллекция материал иконок от Google

Материал дизайн шрифты от Austin Andrews

Материал дизайн PSD иконки от Sergey

Коллекция материальных иконок от Jurre Houtkamp

Материальные иконки в PSD от Anton Kosolapov

Материальный дизайн для Powerpoint от Kyle Ledbetter

Подводим итоги

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

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

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

Купить хостинг

Все, что вам нужно знать о Material Design

Главное правило компании Google — тщательно следить за потребностями пользователя и, исходя из них, корректировать свой дизайн (и не только его). Такой тренд как Material Design позволяет совершенствовать UX, вызывая желание возвращаться к ресурсу снова и снова. И одним из его ключевых элементов является возможность беспрепятственного взаимодействия различных функций на одной платформе.

Принципы Material Design

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

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

Кроме того, Material Design использует принципы полиграфического дизайна для эффектной расстановки акцентов (то есть фокусировки внимания на нужном элементе), упрощения навигации в интерфейсе, интуитивной передачи смысла его элементов. Для Material Design характерны насыщенные, ровные цвета, резкие, очерченные края, крупная типографика и немалые отступы между элементами. В совокупности эти элементы не просто складываются в приятную для глаз картинку, а создают новую реальность с концептуальным смыслом и множеством функций, которые дарят пользователю уникальный UX.

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

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

Material Design — это история об интерактивности. Страница отзывается на любое малейшее движение пользователя, при этом каждый переход должен быть плавным, как будто вы плывете в лодке по спокойной реке и знаете, куда и зачем вам поворачивать.

Поэтому Material Design — это еще и история об осознанности: помимо того, что каждое действие приятно (и легко) выполнять, пользователь должен ясно и четко понимать, что и зачем он делает и куда его приведет очередное прикосновение. Таким образом, обратная связь должна быть ясной, доступной и легко распознаваемой.

Макеты и вопросы

Как уже было сказано, структура интерфейса позаимствовала множество «фишек» полиграфического дизайна, однако все они применяются не в первоначальном, а усовершенствованном виде. Material Design добавляет к этим «фишкам» неограниченные возможности масштабирования и изменения размеров страницы, которые позволяют адаптировать дизайн для любого устройства, например, планшета или смартфона. Все эти возможности дарят ощущение максимального комфорта при работе с навигацией и всем интерфейсом (так как неограниченные возможности подчиняются принципам простоты) и вызывают чувство доверия.

Главный вопрос, на который стоит ответить дизайнеру перед разработкой — что именно пользователь будет (или захочет) делать при работе с приложением? Как только вы сформулировали ответ, можно начинать воплощение идей Material Design.

При создании приложения помните, что контент здесь не менее важен, чем его визуальное оформление. Он не должен вводить пользователя в ступор, а наоборот, должен создавать ощущение комфорта и четкое понимание, зачем он здесь и что он будет сейчас делать.

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

Помните о принципах функциональности и старайтесь направлять пользователя, не «бросайте» его на первой же странице. Такой подход окажется более выигрышным: вы сможете заострить внимание посетителя на важных аспектах продукта/услуги, который вы предоставляете. Задумайтесь уже на этапе разработки о создании навигационной системы, позволяющей выделить опорные составляющие, до которых сможет легко и быстро добраться каждый посетитель.

Анимация в Material Design

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

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

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

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

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

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

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

Еще одна хорошая идея — вставить описания ссылок, которые вы размещаете на ресурсе. Они нужны для четкого и быстрого понимания, куда в итоге придет пользователь. Менее эффективным инструментом является использование кнопки «нажмите здесь»

Полезные ссылки и приемы

1. Шаблоны макетов:

2. Шрифт Roboto:

3. Цветовая палитра:

4. Шаблон иконок от Google Design:

5. Icon Grid System для Android L:

6. Material Design Playground:

7. Material design с Polymer:

8. Использование Polymer:

9. Radial Action в Material Design:

10. Material design и изменяющиеся иконки (морфинг-эффект):

11. Формы Google Material Design на CSS3:

12. Меню в Material Design:

13. Выразительные трансформации:

Заключение

Google использует материальный дизайн, чтобы создать первое (и последующее) положительное впечатление, но не только. Material Design — это больше, чем просто элегантный пользовательский интерфейс. Это передовые технологии, которые способны максимально упростить жизнь пользователя и сэкономить его время.

Высоких вам конверсий!

По материалам: designyourway.net 

16-06-2016

Что такое Material Design — особенности и принцип ее работы системы

Материальный дизайн создан для того, чтобы сделать цифровые объекты реалистичными. То есть им добавляют физические свойства. Они считаются осязаемыми и реальными.

В этом материале мы поговорим о революции в мире веб-дизайна, которую совершил Google.

История возникновения

Когда-то у веб-сайтов и мобильных приложений экосистемы Гугла не было единого стиля. У каждого продукта были свои недостатки. В 2011 году корпорация решила интегрировать во все проекты концепцию, которую назвали Project Kennedy.

Отсылка к президенту США Кеннеди связана с тем, что основатель технологической корпорации Ларри Пейдж считает, что продукты нельзя улучшать на 5-10%. Если изменять их, то целиком. Джон Кеннеди запустил программу полёта на Луну. А Пейдж поставил задачу поменять подход к оформлению интерфейсов.

Совместная работа дизайнеров и программистов изменила внешний вид сервисов Google и приложений для смартфонов. В тоже время пользователи столкнулись с серьезной проблемой —структура продуктов на телефонах сильно отличалась от веб-версий. IT-гигант бросил все силы на то, чтобы быстро устранить недочёт.

В 2014 году на ежегодной конференции Google I/O компания представила на суд общественности новую систему, которая получила название Material Design. В ней специалисты корпорации глобально пересмотрели подход к структуре интерфейсов и взаимодействию с графическими объектами на экране. Она обеспечивает уникальный пользовательский опыт на разных устройствах: от компьютеров до маленьких смартфонов.

Дизайнеры Гугла ставили перед собой несколько основных задач:

1. Создать систему оформления, которая будет чем-то бо̀льшим, чем просто стиль.
2. Разработать свежую концепцию на основе существующих направлений Flat и Metro.
3. Вывести дизайн на новый уровень. Сделать интерфейс не просто красивым, а осязаемым.

Новый подход задаёт вектор движения, а не создаёт чёткие границы. UI рассматривается как живой объект со всеми присущими ему свойствами.

Надо отдать дань уважения корпорации с мировым именем. Она взяла наработки Metro и Flat, добавила уникальные фишки и создала новую философию, которая мгновенно стала популярным и превратилась в рабочую концепцию для миллионов интерфейсов по всему миру.

Материальный дизайн начал развиваться более 5 лет назад, но многие специалисты до сих пор обходят его стороной и не хотят вникать в особенности. Для них он остаётся непокорённой вершиной Эвереста, до которой непросто добраться.

Цель статьи — рассказать о главных принципах идеи Google и показать, что с этим прорывом в сфере user interface надо познакомиться поближе. Профессионалы должны понимать, что макеты в графических редакторах — не просто красивые картинки. Гугл первым вдохнул в них жизнь и показал, что объектам можно задать свойства и логику поведения.

Главные принципы

В основе лежат 4 основных правила, которые Гугл изложил в справочном руководстве на официальном сайте. Прежде чем переходить к их рассмотрению, давайте проанализируем сильные стороны концепции.

Главные преимущества:

• простота восприятия;
• унифицированный интерфейс на всех платформах;
• логичное поведение объектов;
• адаптивность.

Material — метафора, которая объединяет правильную организацию пространства и движение сущностей.

Тактильные поверхности

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

Поверхность — контейнер с границами в виде тени. Минималистичный подход кажется слишком простым, но этого набора хватает чтобы различать элементы и понимать, как они соотносятся.

Главные особенности:

• минимум эффектов;
• верхние объекты отбрасывают тень на нижние;
• фигуры привязаны к одному месту с координатами по оси Z.

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

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

Тактильные поверхности базируются на использовании нескольких уровней — фигуры размещаются на разной высоте и отбрасывают тени. «Магия» обязательно происходит в рамках законов физики. Реалистичность изображения достигается за счёт того, что верхние слои направляют «лучи» на нижние.

Полиграфический дизайн

Взаимодействие компонентов в цифровой среде осуществляется по определённым правилам. Если интерфейс — это «бумага», то все блоки, располагающиеся внутри системы, написаны «чернилами». Философия идеи Google предполагает использование прописных истин полиграфии в сфере проектирования UI. Это касается шрифтов, сеток, иконок, цветовых схем и мультимедиа.

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

Второй принцип Material Design состоит из 7 «кирпичиков». Давайте кратко остановимся на каждом из них.

На первом месте находится типографика. В печатной продукции она решает две главные задачи:

1. Задаёт стиль издания.
2. Образует «скелет» контента.

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

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

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

Сетка и направляющие помогают создавать UI с максимальной точностью. В Material Design используются модульные сетки с шагом 8dp. Dp — единица измерения, которая учитывает плотность экрана устройства. Границы задают структуру макета и обеспечивают удобное восприятие контента.

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

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

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

Если кратко охарактеризовать свойства полиграфии в материальном дизайне, то это:

• видимые отступы и границы;
• гармоничные шрифты и цвета;
• яркие фотографии и «мультяшные» иллюстрации.

Осмысленная анимация

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

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

Давайте рассмотрим механизм на примере. По нажатию на кнопку с плюсиком открывается экран добавления нового события. Карточка появляется плавно, без резкости и чрезмерного пафоса. Отмена действия осуществляется с той же изящностью. Прямоугольная область аккуратно превращается в круглый объект. Анимация не просто добавляет wow-эффект в стандартное действие. Она рассказывает историю, а пользователь её слушает и мгновенно понимает.

Этот принцип работает благодаря 4 важным атрибутам:

1. Асимметричность. Границы интерфейса зависят от толщины устройства, поэтому трансформации должны осуществляться в пределах плоскости. Изменение пропорций объектов выполняются независимо. Если не следовать этому правилу, пользователь столкнётся с неправильным масштабированием объектов. Необходимо, чтобы анимация осуществлялась равномерно.
2. Реакция. В центре должно находиться прикосновение. Реакция на действия обычно происходит мгновенно. Прикоснулся пальцем к кнопке, и она отреагировала на касание.
3. Микроанимации. Инструмент позволяет задавать сценарии работы для маленьких элементов. В интерфейсе важна каждая деталь, микроанимации обеспечивают детализацию и максимальное погружение в работу цифровой среды.
4. Чёткость и резкость. Суть последнего критерия заключатся в том, что перемещение должно быть резким, но в тоже время чётким. Важно соблюдать принцип естественности. Как будто фигура двигается по своему желанию, а не за счёт программного кода.

Анимация — важный элемент, сценарий работы с ней надо писать заранее. Лучше не оставлять задачу на потом. Опытные дизайнеры советуют соблюдать баланс и помнить, что динамика должна быть осмысленной.

Адаптивность

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

Адаптивный дизайн изящно решает проблему отображения контента на девайсах с разными параметрами дисплея.

Начнём с того, что по мере уменьшения экрана девайса надо резко сокращать объём контента. Если на широкоформатном мониторе компьютера легко помещаются длинные раскрывающиеся списки, то на смартфоне пространство сильно ограничено. На помощь приходит разделение действий на несколько экранов. Сначала показываем список, а затем по клику выводим подробное описание.

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

Единицей измерения отступов является независимый пиксель dp. Стоит учитывать, что для устройств с разными форм-факторами расстояние будет разным. Для смартфонов 72dp, а для планшетов — 80. При создании фигур надо использовать кратные пропорции.

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

Графический дизайнер должен быть не только умелым проектировщиком, но ещё и тестировщиком. Он должен чётко понимать, как будет отображаться UI на смартфонах, планшетах, ноутбуках и 30-дюймовых мониторах. Если учесть, что на компактных устройствах есть горизонтальный и вертикальный режимы отображения, специалисту надо потратить ни один день на создание прототипов с учётом особенностей гаджетов.

Популярность Material Design

После презентации революционного подхода к дизайну виртуальных продуктов концепция Google быстро распространилась и укоренилась в профессиональном сообществе. Некоторые проекты хотели поменять оформление, чтобы следовать за трендами. Другие поняли преимущества осмысленного интерфейса. IT-корпорация совершила большой прорыв.

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

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

Мы в IDBI восхищаемся материальным дизайном и с радостью возьмёмся реализовать любой проект в рамках этого направления.

Что такое стиль material design: простое объяснение

❤️ Стиль Material design остаётся для большинства непонятным и неизведанным объектом. Мы с вами разберёмся на простых и понятных примерах, что это такое и как его использовать.

Выдано в печать 2018-04-21

Стиль Material design (материал дизайн в русской версии), набрав безумную популярность, остаётся для большинства непонятным и неизведанным объектом. Мы с вами разберёмся на простых и понятных примерах, что такое material design (в основном будем говорить про дизайн сайтов) и как его использовать.

Изначально дизайнеры Google ставили перед собой три глобальные задачи:

• Создать не просто новый стиль, а целую систему оформления, в которой принципы и правила будут четко прописаны;
• Обновить существующие стили (FLAT/Metro, минимализм и другие), опираясь на новые технологии.

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

Откуда взялся Материал Дизайн: статистика мобильного интернета

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

«Материал» в дизайне: что это?

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

• Его должно хотеться пощупать;
• Он интерактивен, и на экране монитора ведёт себя так же, как вел бы себя какой-то физический объект в жизни;
• Он похож на бумагу;
• Он создаёт тени, изгибается, движется как настоящий.

Пример наложения слоёв «цифровой бумаги»

Google material design

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

Кнопка в стиле material дизайна и кнопка Web 2.0

Кроме того, по правилам, которые придумали дизайнеры Google для материал дизайна, отдельные элементы «лежат» вплотную друг на друге, а не висят в воздухе. Вследствие этого тени всегда небольшие и имеют четкие контуры (вместо теней от близкого рассеянного света, например).

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

Ошибки и заблуждения

Первое. Чтобы получился материал дизайн, достаточно все элементы и бекграунды на сайте заменить на текстуры. Нет! Если вы так сделаете, то получится грязный и некрасивый сайт, который не дотянет даже до вебдванольных.

Второе. Материалы в дизайне нужно использовать реалистичные. Не обязательно! Важно, чтобы они вели себя, как настоящие. Неважно, будет это реальная текстура дерева или «синтетическая» текстура, созданная в фотошопе с помощью инструмента Noise.

Какие текстуры подойдут для material design с в стилу Google

Третье. Материал и его интерактив – это единственное, что отличает этот стиль. Нет! Чтобы получился «канонический» material design, как у Google, нужно соблюдать и другие принципы:

• Картинки оформляются без промежутков, край к краю;
• Крупные, хорошо читаемые шрифты без засечек;
• Цветовое кодирование;
• Иконки, выполненные по тем же принципам материал дизайна;
• Адаптивная вёрстка.

Полный список правил можно узнать в официальном разделе Google про material design.

Android material design

В применении общих правил к мобильным приложениям есть и свои особенности. Помните, мы говорили про тени? Изначально элементы material design для Android действительно лежат друг на друге, как листки бумаги. Но при взаимодействии каждый элемент, будь то диалоговое окно или кнопка навигации, поднимается вверх. Это способ, с помощью которого в этом стиле выделяются активные блоки. Здесь используется тот же принцип, который со времен Web 2.0 заложен в технологию всплывающих окон (popup-ов).

Теперь «послойный принцип перешел от попапов ко всему интерфейсу

Интересно, что разработчики материал дизайна в Гугле даже прописали чётко все параметры для каждого из возможных элементов интерфейса!

Цвета в материал дизайне

Подход к цветовой гамме напоминает FLAT-style. Это достаточно яркие, сочные, природные цвета. Material design подразумевает использование трёх основных типов цветов:

• Главный цвет, который преобладает во всех экранах интерфейса;
• Дополнительный цвет, который обычно обозначает блоки, связанные с основным контентом, поясняющие или дополняющие его. Часто это просто более светлый или темный оттенок главного цвета.
• Акцидентный цвет, который служит для выделения кнопок, конверсионных элементов и прочих важных вещей.

Цвета material design: палитра Google

Что такое материальный дизайн (Material Design)

Материальный дизайн – новый способ взаимодействия или очередной тренд?

25 июня 2014 года компания Google представила общественности свое новое видение на дизайн интерфейсов будущего – целый комплекс правил и условий, по которым впредь будут строиться интерфейсы всех продуктов корпорации. Зачем все это понадобилось? Еще пять лет назад все продукты Google сильно отличались друг от друга, в том числе различные версии одного приложения на разных устройствах. Разработчики задумались о создании специальных правил построения и унификации всех разрабатываемых приложений и сервисов, которые позже объединились под общим названием «Проект Кеннеди». Именно этот проект позже развился в Material Design (материальный дизайн).

Философия материала

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

Одной из черт унифицированного дизайна стали карточки с информацией, которые могли размещаться в любой части рабочей области. Исследуя их в приложении Google Now, разработчики задали себе вопрос: «А что находится под этими карточками?». По словам вице-президента по дизайну Google Матиаса Дуарте (Matias Duarte), этот «невинный вопрос зажег мощную искру».

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

После тотального засилья скевоморфизма (точная имитация реальных объектов физического мира в дизайне) все резко двинулись в противоположную сторону – плоский flat дизайн. Именно его взяла за основу Google, изобретая «материал». При этом сделав небольшой шаг назад к реалистичности.

Квантовая бумага (Quantum paper)

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

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

Цифровые чернила (Digital Ink)

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

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

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

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

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

Android поддерживает специальную библиотеку Палитра, которая способна выделять из изображения основной и акцентирующие цвета и динамически менять оформление приложения, подстраиваясь под активное изображение (пример вверху).

Значимость анимации

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

Активное движение привлекает внимание пользователя, поэтому для достижения эффекта реализма необходимо использовать некоторые правила:

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

Заключение

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

В самом Google разработку материального дизайна ставят в один ряд с такими значительными событиями как разработка оконного интерфейса и управление курсором (Xerox PARC) и создание сенсорных экранов (Apple). Что ж, посмотрим, что из этого получится.

Новый логотип и айдентика Google продвигают идеи материального дизайна

Подробные гайдлайны от разработчика материального дизайна вы найдете здесь — http://www.google.com/design/spec/material-design/introduction.html

Что такое материальный дизайн? | Фонд дизайна взаимодействия (IxDF)

Material Design — это язык дизайна, ориентированный на Android, созданный Google, поддерживающий сенсорное управление на экране с помощью функций с множеством подсказок и естественных движений, имитирующих реальные объекты. Дизайнеры оптимизируют работу пользователей с помощью 3D-эффектов, реалистичного освещения и анимации в иммерсивном, совместимом с платформой графическом интерфейсе пользователя.

Посмотрите, как Material Design вписывается в UX-дизайн.

Материальный дизайн — почему пользователи доверяют «реальным» интерфейсам

Материальный дизайн возник как детище Google в середине 2014 года под кодовым названием «Квантовая бумага» и представлял собой свежий подход «чернила и перо». С помощью Material Design цель состоит в том, чтобы предоставлять высококачественные выходные данные на всех платформах, давая пользователям возможность управлять четко обозначенными, приятными на вид компонентами, которые ведут себя как объекты реального мира. В отличие от изображения значимых для культуры предметов (например, мусорных корзин) в скевоморфизме, дизайнеры Material Design применяют основные, естественные законы физического мира, в основном касающиеся освещения и движения.Идея состоит в том, что, имитируя физический мир, мы уменьшаем когнитивные нагрузки пользователей за счет пристального внимания к макету, визуальному языку и библиотеке шаблонов, максимизируя предсказуемость и устраняя двусмысленность. «Карточная» концепция Material Design служит системой для наложения элементов и анимации; это также позволяет более персонализированный опыт (например, показывать подписчиков в Twitter).

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

— Матиас Дуарте, вице-президент по материальному дизайну в Google

Для Material Design жизненно важно оправдать ожидания пользователей относительно того, как должны себя вести компоненты . Например, экранные объекты вызывают большее доверие, если они подчиняются законам гравитации.

Автор / правообладатель: Google LLC. Условия авторских прав и лицензия: Добросовестное использование

Три простых элемента — одно мгновенное сообщение

«Волшебный» и «предсказуемый» — незаменимый парадокс

Чтобы эффективно применять материальный дизайн, вам необходимо понимать следующие принципы:

• Метафора материала

Вы берете понятие тактильной реальности, и вы:

• Дизайн, предлагающий пользователям атрибуты, которые им знакомы как возможности.Сразу узнаваемые реальные функции, такие как кнопки, должны немедленно позволить пользователям увидеть, что им делать. Поверхности и швы / края должны дополнять их подсказками. Используйте реалистичный свет / тень, чтобы разделить пространство дизайна и выявить движущиеся части.
• Используйте адаптивный дизайн — убедитесь, что иерархия, цвета, значки и пространственные пропорции согласованы на всех устройствах с помощью адаптивного выбора версии.
• Смелые, графические и хорошо подобранные элементы добавляют смысла и радуют глаз
  • Сделайте дизайн жирным, чтобы пользователи сразу заметили иерархию и могли сосредоточиться и нарисовать соответствующие значения.Превосходное использование цвета и пробелов, четкие изображения и крупная типографика на экране помогают пользователям погрузиться в процесс.
  • Дизайн, побуждающий пользователей к действию и демонстрация функциональности за счет выделения значков и поверхностей в качестве сигналов.
• Создавайте сообщения с помощью движения
  • Предоставьте пользователям контроль, показывая изменения, которые приводят к непосредственно в результате их действий.
  • Сделайте так, чтобы анимация воспроизводилась в единой среде / сцене в непрерывных плавных движениях.
  • Убедитесь, что ответы четкие, но тонкие: без резких / непредсказуемых движений.

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

Автор / правообладатель: Google LLC. Условия авторских прав и лицензия: Добросовестное использование

Использование контрастной заливки поверхности для изображения высоты

Материальный дизайн, переработанный

В мае 2018 года Google выпустила пересмотренную версию, чтобы исправить серьезную проблему — исходные правила были ограничительными, подчеркивая функциональность, а не стиль.Поскольку приложения, созданные в соответствии с ними, выглядели одинаково, многим разработчикам приложений не нравился Material Design. Google пришлось сбалансировать согласованность Material Design с возможностью дифференциации, чтобы предоставить дизайнерам гибкость, позволяющую адаптировать его к потребностям бренда. Версия 2 содержит не только новые рекомендации, но и набор инструментов (включая новые пакеты значков и редактор тем материалов), которые вы можете использовать для настройки своих дизайнов. Таким образом, вы можете настроить эстетику в соответствии с присутствием бренда вашей организации, опираясь на фундамент вечных законов природы.

Автор / правообладатель: Google LLC. Условия авторских прав и лицензия: Добросовестное использование

Значки с контуром 2DP для максимальной читаемости, где бы вы их ни применяли

Подробнее о материальном дизайне

Вы можете найти руководство и библиотеку Google по материальному дизайну здесь: https://design.google/resources/ и здесь: https://material.io/design/

Узнайте, как создавать интерфейсы, имитирующие объекты реального мира: https: // www.Interaction-design.org/courses/how-to-create-intuitive-products-by-imitating-physicality

Подробная статья о выделении с помощью Material Design: https://usabilitygeek.com/10-guidelines-material-design/

Поучительное руководство по материальному дизайну: https://uxplanet.org/dont-risk-making-a-crappy-ui-use-material-design-520ebaceffe4

Зачем нужен материальный дизайн? Взвешивая за и против

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

Material Design также был принят широким сообществом дизайнеров, и теперь его можно найти на веб-сайтах и ​​в приложениях далеко за пределами собственных платформ Google (и даже на конкурирующих платформах). Simplenote, например, использует эстетику Material Design в своих приложениях для настольных и мобильных платформ. Это всего лишь один пример того, почему Material Design — отличный выбор для множества вариантов реализации дизайна.

Simplenote — это один из примеров интерфейса на основе материального дизайна, который используется не только на собственных платформах Google.

Что такое материальный дизайн?

Material Design был создан Google в 2014 году, частично на основе карточного макета, используемого в Google Now. Отношение к стилю дизайна на основе бумаги отличало его от стиля плоского дизайна, который широко использовался в то время.

Как и большинство дизайн-систем, Material Design был создан для обеспечения унифицированного взаимодействия с пользователем на различных устройствах, платформах и методах ввода.Подобно тому, как Apple реализовала принципы плоского дизайна в качестве своего стандарта, Google использовал Material Design, чтобы гарантировать, что независимо от того, как пользователи получают доступ к своим продуктам, у них будет согласованный пользовательский интерфейс.

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

Карточная структура

Basil во многом основана на рекомендациях по верстке Material Design.

Зачем нужен материальный дизайн?

Как и в случае любой хорошо зарекомендовавшей себя дизайн-системы, у использования Material Design есть несколько основных преимуществ, которые дизайнеры должны учитывать.

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

Google поддерживает Material Design и хранит обширную документацию по его использованию и реализации. Такой поддержки и документации может не хватать для многих современных систем проектирования.

Shrine использует несколько сложных макетов, включая карточные страницы продуктов.

Несмотря на всю эту полноту и документацию, Material Design остается довольно гибкой библиотекой дизайна.В рамках руководящих принципов большая часть специфики реализации дизайна полностью оставлена ​​на усмотрение дизайнера.

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

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

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

Rally отлично справляется с реализацией темной темы Material Design.

Недостатки использования материального дизайна

Хотя у материального дизайна есть очевидные плюсы, это не значит, что у него нет минусов.

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

Одна из основных причин того, что это может быть отрицательным, заключается в том, что он ограничивает эффективность другого брендинга при использовании дизайн-системы. Да, дизайнеры могут использовать логотипы, цветовые палитры (в соответствии с рекомендациями по Material Design) и другие отличительные факторы для поддержки идентичности бренда, но продукт, соответствующий спецификациям Material Design, почти всегда также будет связан с Google.

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

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

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

Crane использует как светлые, так и темные темы для создания сложного и эстетичного дизайна.

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

В Material Design также есть некоторые проблемы с удобством использования, которые могут сделать веб-сайты и приложения очень удобными для пользователей — и . Одна из самых больших проблем связана с так называемой «загадочной» навигацией, которая встречается во многих мобильных дизайнерских приложениях. Иконки часто используются вместо текста, и хотя иногда значки сразу узнаваемы и достаточно удобны, в других случаях это не так.

Круг, обозначающий «Дом», определить значительно труднее, чем значок дома, который ранее использовался в большинстве интерфейсов Android. Это яркий пример того, как форма ставится над функцией, что является наследием плоских корней дизайна Material Design.

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

Reply решает проблему с плавающим значком навигации с помощью более подробного выдвижного меню, которое включает текстовые метки.

Заключение

Если приложение создается в первую очередь для платформы Android, то использование Material Design — простой выбор. Благодаря широкому распространению Google любое приложение, основанное на принципах материального дизайна, будет ощущаться как нативное приложение.

Тем не менее, существует множество других вариантов использования вне платформы Android, где Material Design — хороший выбор. По мере того, как дизайн-система становится все более зрелой, количество таких ситуаций неизбежно увеличивается. Дизайнеры должны, по крайней мере, ознакомиться с руководящими принципами, чтобы они могли определить для себя, когда уместно использовать Material Design, а когда другие системы могут быть более подходящими.

• • •

Дополнительная литература в блоге Toptal Design:

Что на самом деле представляет собой материальный дизайн Google

С ноябрьским выпуском Android Lollipop язык материального дизайна Google начал впервые появляться в мире.Дизайнеры и технологи повсюду трепещут от похвалы за новый язык дизайна, который стремится объединить обширную продуктовую линейку Google с богатым набором стилей и принципов дизайна.

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

Интерфейс — это бренд

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

Material Design не просто создает порядок, он создает порядок с целью и смыслом. Это чувственное выражение бренда Google. Если он найдет покупку, это может стать первой серьезной угрозой очевидной монополии Apple на безупречный пользовательский интерфейс. Как приверженец iPhone, я должен признаться, что впервые я начал бросать косые взгляды на Android (Android имеет примерно такие же хорошие шансы заслужить мою любовь, как Ллойд Кристмас с Мэри Свенсон).

Все продумано

Ошеломляющая специфика материального дизайна — это ответ на два факта:

• Если разработчик может испортить пользовательский интерфейс, он будет
• Альтернатива хорошему дизайну — не дизайн, это плохой дизайн.

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

Эволюция дизайна от Google

Стоит отметить, что материальный дизайн создавался не ex nihilo; проницательные наблюдатели видели осторожную эволюцию Google за последние несколько лет.В 2011 году Gmail был переработан: кнопки стали более плоскими, а поля и пробелы были увеличены. В 2012 году Google Now представил многоуровневые «карточки», еще больше пробелов и хорошо продуманные типографские иерархии. Подобные дискретные обновления дизайна, теперь формализованные с помощью Material Design, были частью — по крайней мере, с внешней точки зрения — очень целенаправленного процесса.

Несмотря на то, что всегда есть возможности для улучшения, больше всего впечатляет стремление Google и последующее достижение единства в разнообразном и разрозненном наборе продуктов.Любой, кто работал с программным обеспечением, может подтвердить, что даже скромные обновления устаревших систем — с существующими пользователями, устаревшим кодом и конкурирующими бизнес-интересами — могут быть невероятно сложными. Материальный дизайн может оказаться доказательством того, что это возможно даже в больших масштабах.

Натан Синсабо — директор по дизайну консалтинговой компании KA + A.

Автор сообщения:

Натан Синсабо Вернуться к началу. Перейти к: Начало статьи.

Система проектирования с массовым внедрением

В начале 2000-х, когда команды Google начали серьезно размышлять о том, как они могут использовать системы для организации своей инженерной и проектной работы, они углубились.Фактически, молекулярно глубоко. Полимер, названный в честь вещества, молекулярная структура которого состоит из связанных вместе схожих единиц, был представлен на Google I / O 2013 как набор шаблонных, но настраиваемых элементов для разработки адаптивных веб-сайтов. Хотя в то время мир дизайна этого не знал, это была предварительная версия кодового названия: Quantum Paper, или того, что мы знаем сегодня как материальный дизайн Google. Материал был расширением или, возможно, дополнением к Polymer, и дал Google новую репутацию, когда дело дошло до его внимательного отношения к дизайну.

Дебют материала на Google I / O 2014 показал, что не только Google хотел обеспечить согласованность во всем дизайне и устройствах Android, но и одновременный выпуск API доказал заинтересованность Google в приглашении сторонних разработчиков для участия в их новом дизайне. система тоже. Это привело к массовому внедрению Материалов и послужило отправной точкой для создания сотен других систем проектирования.

Перевод бумаги в цифровой материал

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

Когда был анонсирован материал, Google подчеркнула, что, хотя настоящая бумага послужила источником вдохновения для их нового внешнего вида, этот цифровой материал может «разумно расширяться и реформироваться. Материал имеет физические поверхности и края.Швы и тени дают представление о том, к чему вы можете прикоснуться «. Но бумага не остается статичной, когда к ней прикасаются — она ​​складывается, сдавливается, возвращается в форму, она мнется. Поэтому, когда Google перевел все свойства бумаги в цифровой формат материал, он представил новый элемент, который будет первым для аналогичных систем дизайна — как вещи движутся. В частности, заранее подготовленные анимации, такие как рябь чернил на кнопке, когда она нажимается или нажимается. Включение движения добавило еще один слой к Google система дизайна, которая говорила о возможностях и эволюции дизайна по мере развития технологий.

Трамплин для других систем дизайна

Хотя большинство современных систем дизайна служат внутренними ориентирами для команд, Google дал понять, что Материал предназначен для всех и везде. Разработчики и дизайнеры ухватились за приглашение, быстро применили подготовленные проекты и анимацию к сотням тысяч интерфейсов и приложений и использовали Материал в качестве трамплина для создания своих собственных систем. Хотя концепция организации шаблонных решений существовала со времен Кристофера Александра, Material впервые столкнулся с системой проектирования, и начали возникать непредвиденные проблемы.А именно, ошеломляющее разнообразие простых дизайнов — Google насчитал 3000 различных версий основной «кнопки действия», которые разработчики создали самостоятельно, — и в противоположном спектре, разработчики беспокоились о том, чтобы отклониться от руководящих принципов, поэтому они придерживались стиль, который вскоре сделал Материал однообразным. Ответ Google? На Google I / O 2018 было объявлено о более простом способе использования материала под названием Material Theming. С помощью Material Theming разработчики и дизайнеры могут вносить изменения с помощью простых вкладок и ползунков, которые позволяют настраивать в пределах границ материала.Матиас Дуарте, вице-президент Google по дизайну, назвал это «дизайн-системой для создания дизайн-систем».

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

Источники

https://www.androidpolice.com/2014/06/11/exclusive-quantum-paper-and-googles-upcoming-effort-to-make-consistent-ui-simple/

https: / /en.wikipedia.org/wiki/Material_Design

https://www.fastcompany.com/1672605/how-google-unified-its-products -with-a-simple-index-card

https://en.wikipedia.org/wiki/Material_Design

Создание адаптивного макета с материальным дизайном | Google Codelabs

Ознакомьтесь с новыми принципами адаптивного дизайна Material Design, которые помогут вам добиться единообразия при разных размерах экрана.В этой лаборатории дизайна вы перенесете мобильный дизайн в формат планшета, узнаете об адаптивной сетке, шаблонах адаптивной композиции и использовании правильных компонентов.

Что такое адаптивный дизайн и почему я должен его использовать?

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

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

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

Что вы узнаете

• Узнайте, как использовать новые принципы адаптивного дизайна Material Design для создания дизайна для больших экранов.
• Вы узнаете, как перенести дизайн клавишного экрана с мобильного на большой экран.
• Адаптивные концепции, которые можно использовать в своих проектах

Предварительные требования

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

• Знание основных концепций проектирования: сетка, шкала типов, компоненты материалов
• Знание Figma

Что вам понадобится

Настройка

Затем вам необходимо настроить среду проектирования.

Для начала вам потребуется доступ к файлу Adaptive Designlab Figma. Все, что вам нужно для лаборатории, находится в файле Figma. Вы можете либо скачать и импортировать файл, либо продублировать его из сообщества Figma.

Сначала войдите в Figma или создайте аккаунт.

Перейдите к дизайну адаптивного макета с материальным дизайном или найдите Дизайн адаптивного макета с материальным дизайном в сообществе Figma. Нажмите «Дублировать» в правом верхнем углу, чтобы скопировать файл в свои файлы.

Дубликат файла Figma

Макет файла

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

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

Начните с монтажной области Intro, там есть кнопки, которые связывают монтажные области по порядку, доступ к ссылке можно получить, нажав кнопку.

Сетка адаптивного макета Material Design адаптируется к размеру и ориентации экрана, обеспечивая единообразие макетов.

1 колонка, 2 желоба, 3 поля

Колонны, желоба и поля

Колонны

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

Ширина столбца определяется с использованием процентов, а не фиксированных значений, чтобы контент можно было гибко адаптировать к любому размеру экрана. Количество столбцов, отображаемых в сетке, определяется диапазоном точек останова (диапазоном заранее определенных размеров экрана), в котором просматривается экран, будь то точка останова для мобильного телефона, планшета или другого размера.

Сетка на основе столбцов легко реагирует на экран.

Желоба

Желоба — это промежутки между колоннами. Они помогают разделять контент. Ширина желоба — это фиксированные значения в каждом диапазоне точек останова. Для лучшей адаптации к экрану

Ширина желоба

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

Сетки макета

могут быть настроены в соответствии с вашими требованиями.

Точки останова — это заранее определенный диапазон размеров экрана для требований макета.В заданной точке останова макет настраивается (или адаптируется) в соответствии с размером экрана. [ссылка на точки останова]

Области макета

Сетка столбцов помогает создавать области макета для иерархии информации. Панель приложения, текст и навигация могут составлять 3 таких области в адаптивном макете.

Часто адаптивная сетка больше всего влияет на основную часть макета, так как расположение элементов содержимого в сетке может меняться для каждого макета точки останова.

Сетка колонн от очень маленьких до маленьких

В первом упражнении мы исследуем, как сетка может адаптироваться к малой точке останова при переходе от 4 столбцов к 8.

Переместите свою сетку с 360dp с 4 столбцами на 600dp с 8 столбцами.

1. Расширьте рамку «Exercise Layout 1» с точки останова «Очень маленькая» 360dp (для мобильных устройств) до точки останова «Маленькая» 600dp (для планшета).
2. Отобразите скрытые слои столбцов и желобов, щелкнув значок глаза.

3. Выберите Желоба настраиваются на 24dp для точки останова 600dp.
4. Отрегулируйте поля с 16dp до 32dp.

Сетка колонн малая и средняя

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

1. Расширьте рамку с 600dp до 1280dp.
2. Отобразите скрытые столбцы и желоба, чтобы получилось 12 столбцов.
3. Отрегулируйте поля с 32dp до 200dp.

Теперь ваша сетка настроена для устройства с большим экраном и готова к адаптации макета!

Основные выводы

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

В следующем разделе мы подробнее обсудим состав элементов в сетке столбцов.

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

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

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

Примечание

Ограничение — это концепция визуального группирования для создания границ с использованием белого пространства или видимых элементов.

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

1. Выровняйте и систематизируйте содержимое по сетке столбцов.
2. Чтобы помочь с устройством большего размера, нам нужно масштабировать содержимое. Отрегулируйте масштаб шрифта для удобочитаемости на больших экранах: обновите заголовок до 60sp , основной текст описания на 24sp , а весь остальной текст на 20sp .

3. Значок описания кажется маленьким в новом макете, масштабирование до 40x40dp для пространства.

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

1. Масштабирование изображения до 6 столбцов с выравниванием по левому краю.
2. Сгруппируйте заголовок и факты по уходу справа от изображения в 6 столбцов.Сохранение выравнивания сетки. Оставьте пространство 40dp под группой заголовков, чтобы создать неявную границу.

3. Для содержания описания используйте длину строки 60 символов для определения диапазона столбцов (11 столбцов). С 1 ведущим столбцом белого пространства.

Основные выводы

• Композиция может масштабироваться в точках останова.
• Группирование похожих элементов поможет создать более читаемый контент.
• Containment использует группировку для создания визуальных границ, которые могут быть неявными или явными.

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

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

Адаптивные шаблоны — это распространенные методы, которые помогают компонентам адаптироваться к своему пространству.

Reposition — это один из тех шаблонов, при котором элементы меняются местами на экране, чтобы использовать дополнительное пространство экрана.

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

Переключение компонентов Компоненты

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

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

Компоненты могут иметь внутреннюю композицию, — их внутренние элементы и их контейнер, то, как эти элементы визуально сгруппированы, и использовать локализацию.

Прямо сейчас компоненты плавно расширяются, заполняя пространство. Используя шаблон репозиции и группировку, мы адаптируем контент для большего пространства. Мы переместим карточки на экране «Сегодня», чтобы использовать горизонтальное пространство и сетку столбцов.

1. Подумайте, как Задачи и Список желаний могут расширяться по вертикали с разной скоростью, адаптируя их к 6 столбцам.а по горизонтали лучше использовать пространство.

2. Переместите карточку с подсказками по уходу над двумя другими карточками.
3. Отрегулируйте внутреннюю вертикальную плотность (расстояние между элементами) на карточке списка желаний на 36dp.

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

1. Найдите компонент Navigation Rail и поместите его в область навигации.

2. Обновите метки и значки в соответствии с нижней навигацией.
3. Стиль, соответствующий остальной части макета или цвет поверхности.

Теперь мы можем комбинировать адаптивные концепции, чтобы превратить этот макет списка с вкладками для раздела «Завод» в полностью адаптивный макет.

1. Отобразите остальные столбцы и желоба, чтобы открыть сетку из 12 столбцов. Поля для большей точки останова уже обновлены.Заблокируйте слой сетки.
2. В настоящее время макет плавно отображает один список, но у нас достаточно места на экране по горизонтали, чтобы разделить вкладки и отобразить оба списка. Перетащите макет списка желаний снизу на цель перетаскивания.

3. Удалите вкладки и добавьте метки над каждым списком, выровняв их по сетке.

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

1. Карты позволят фотографиям произвести большее впечатление. Удалить список / мои растения. Используйте карты растений ниже. В My Plants должно быть 6 столбцов, но играйте с переменной шириной карт, чтобы каждая третья карта состояла из 6 столбцов.

2. Масштабируйте тип в списке желаний до 20sp, чтобы он соответствовал масштабированию предыдущего типа.
3. Измените стиль списка желаний в соответствии с карточками на панели инспектора: отобразите заливку, отобразите падающие тени и измените отступы Auto Layout вокруг элементов на 16.

4. Удалите FAB из текущего положения и покажите FAB в Nav Rail.

Основные выводы

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

Отличная работа по использованию принципов Material Design Adaptive для переноса дизайна с маленьких экранов на большие.

Следующие шаги

• Ознакомьтесь с новыми адаптивными подсказками и характеристиками для больших экранов.
• Попробуйте изменить сетку столбцов на одном из макетов и скорректировать содержимое.
• Попробуйте разные адаптивные шаблоны с предоставленными макетами. Какие еще компоненты будут работать?
• Примените к вашим собственным мобильным дизайнам!

Ресурсы

Материальный дизайн для больших экранов

I / O • 5 способов подготовить приложение к работе с большими экранами

Если у вас есть вопросы, не стесняйтесь задавать их нам в любое время, используя @MaterialDesign в Twitter.

Следите за новостями о дизайне и обучайте на youtube.com/MaterialDesign

Material Design для WordPress — плагин для WordPress

Официальный плагин Material Design для WordPress. Настройте навигацию, цвета, типографику и формы своего сайта, используйте компоненты материалов и выберите один из более чем 1000 шрифтов Google и значков для дизайна материалов. От команды разработчиков системы дизайна с открытым исходным кодом Google.

С Material Design для WordPress легко начать работу:

Установить тему и примеры материалов

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

Настройте свою тему

Настройте и просмотрите свои глобальные стили темы в настройщике. Выбирайте цвета, типографику, формы и значки, чтобы выразить свой уникальный стиль.

Построить с блоками материалов

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

Примените свою тему

Используйте свои цвета, формы и типографику для встроенных элементов WordPress, таких как верхний и нижний колонтитулы вашего сайта.

Авторы

Material Design — это система дизайна, созданная Google и поддерживаемая открытым исходным кодом, которая помогает командам создавать высококачественный цифровой опыт.

1. Загрузите папку в каталог / wp-content / plugins / .
2. Активируйте плагин через меню «Плагины» в WordPress.

Не нашли ответа на свой вопрос? Поищите на форуме поддержки, не обсуждалось ли это ранее. В противном случае откройте новую тему поддержки.

как выглядит обзор? Я использую это, но у него нет другого стиля на этом веб-сайте, просто посмотрите на закругление, там нет shaow.

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

Отличный плагин! Спасибо, что сделали это доступным. Делает использование MDC очень простым! Я думаю, что низкие оценки отражают людей, которые не знают или не понимают концепцию материального дизайна. Отличная работа!

Что мне не хватает: Языковой файл для перевода Интеграция кода Google Analytics

BEWARE — Этот плагин начинается с простой панели включения / выключения, которая при включении (по умолчанию) добавляет на сайт примеры страниц и сообщений, текст и графику вместе с очень простой темой.Если у вас уже есть тема сайта с контентом, она заменит ее. Это сильно испортило мой установленный сайт. Лучше изучить материальный дизайн и применить его самостоятельно. Этот плагин слишком прост для дизайна тем. Определенно НЕ для использования на установленном веб-сайте.

Прочитать 5 отзывов

«Материальный дизайн для WordPress» — это программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

авторов

Проектирование и создание приложений с материальным дизайном

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

В FullStack Labs мы используем систему материального дизайна Google для разработки и создания большинства собственных проектов веб-приложений и мобильных приложений. Мы неравнодушны к Material Design, в частности, потому что:

• Он был тщательно исследован
• Хорошо задокументирован
• Он легко настраивается
• Библиотеки компонентов доступны для большинства инструментов проектирования и фреймворков кода

Исследования

В начале 2014 года перед ведущими дизайнерами Google была поставлена ​​задача создать язык дизайна, чтобы унифицировать взаимодействие с пользователем во всем наборе продуктов компании.В июне того же года, после нескольких месяцев исследований и испытаний, команда выпустила первые спецификации для Material Design ⁠ — системы дизайна на основе бумаги, первоначально названной Quantum Paper.

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

Документация

Сегодня Material Design, возможно, стал самой хорошо документированной и общедоступной дизайн-системой в мире. На сайте material.io есть подробные инструкции, описывающие все, от стиля состояний кнопки при наведении курсора до обработки визуализации данных. Компоненты тщательно задокументированы на простом английском языке, а многие описания содержат наглядные ссылки и передовой опыт. Исчерпывающая документация по компонентам позволяет дизайнерам и разработчикам обсуждать пользовательский интерфейс с помощью общего языка и, в конечном итоге, приводит к реализации проекта, который более точно соответствует прототипу дизайна.

Пример спецификации Material Design с информацией о поведении диалогов.

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

Настройка

Многие дизайнеры и владельцы бизнеса обеспокоены тем, что внедрение системы дизайна излишне ограничит эстетику приложения или его набор функций.Мы редко сталкиваемся с этим в случае с Material Design, поскольку его компоненты достаточно гибкие, чтобы поддерживать почти все запросы брендов и функций. ‍

Тематика и брендинг ‍

Беспокоитесь, что ваше приложение будет выглядеть как продукт Google? Хотя в руководстве по Material Design содержатся предложения по тематике, в конечном итоге шрифты, цвета и стили значков оставлены на усмотрение дизайнера и могут быть настроены для придания вашему приложению уникального внешнего вида.

Настраиваемые компоненты

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

Взгляните на некоторые проекты, которые наша команда разработала и построила с использованием Material Design.

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

Совместимые библиотеки

По мере роста популярности системы Material Design росла и коллекция библиотек дизайна и кода с компонентами, предварительно созданными в соответствии со спецификациями Material Design. Вот некоторые из наиболее популярных: ‍

Design Libraries and R esources

Code Libraries and Resources

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

No related posts.