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

Содержание

Что такое 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 анимация сегодня — не просто эффектное дополнение дизайна, а полноценная его часть. Если вы все делаете правильно, движение оживляет ваш интерфейс и заставляет пользователей любить интерфейс. Научиться создавать крутые анимации можно на курсе «Анимация интерфейсов».

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

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

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

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

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

alt

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

alt

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

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

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

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

Откуда взялся Материал Дизайн

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

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

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

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

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

google material design

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

Google material design

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

кнопки материал дизайн

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

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

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

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

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

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

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

Какие текстуры подойдут для 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 colours

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

Что такое 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 восхищаемся материальным дизайном и с радостью возьмёмся реализовать любой проект в рамках этого направления.

8 примеров сайтов в стиле Material Design — Dark site of marketing


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

Прежде, чем перейти к примерам, давайте уясним одну простую истину:

Material Design — это корпоративный стиль корпорации Google. Подражать ему так же глупо, как, например, производителю лапши быстрого приготовления пытаться подрожать бренду “Ferrari”.

Гайдлайн Material Design, кроме самого Google, также распространяется на продукты компаний-партнеров, в основном, на приложения для платформы Android. У всех остальных, кто не имеет отношение к корпорации Google и платформе Android, интерес к Material Design должен быть сугубо познавательным.

Читайте также: Что такое material design? Подробный обзор языка визуальных образов от корпорация Google

Корпоративный веб-сайт требует более осмысленный подход, чем просто сказать “хочу вот так”. Если сайт — это лицо бренда в сети, то оно должно иметь индивидуальные черты и визуально соответствовать общему образу компании.

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

Примеры сайтов в стиле Material Design

Kiosk Browser

http://www.android-kiosk.com

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

International School of Europe


http://www.internationalschoolofeurope.it

Очень удачное решение, в котором гармонично сочетаются детали и конструкции из гайдлайна Material Design (тени, кнопки, flat design, цвета и JS эффекты) и корпоративный стиль группы международных школ ISoE.

Lifeaweso.me

http://lifeaweso.me

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

Futurice


http://futurice.com

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

Daniel Angel

http://danielangel.media

Данный сайт испо

на Луну и обратно / Блог компании Redmadrobot / Хабр

“Это унылое диалоговое окно действительно нужно?”

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


Когда-то все продукты Google выглядели по-разному плохо. Даже один продукт на разных платформах выглядел неконсистентно.

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

При чем тут Кеннеди?

Легенда такова: президент Кеннеди инициировал программу полёта человека на Луну (если верить, что этот полёт когда-либо был). А большой начальник в Google Ларри Пейдж исповедует принцип, что продукты нет смысла улучшать на 10% — они должны быть в 10 раз лучше, чем у конкурентов. Если уж запускать продукт, то сразу на Луну. Вот и здесь было решено круто всё переделать.

Результат в первую очередь коснулся веба, но затронул и некоторые мобильные продукты. В то же время шла отдельная работа над дизайном Android — Holo, который пришел на смену не слишком эстетически приятным интерфейсам старой Android.
Но оставалась одна проблема: Holo по-прежнему отличался от Project Kennedy.

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

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

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

4 принципа Material Design

Material Design зиждется на четырех основных принципах:

  1. Тактильные поверхности. В Material Design интерфейс складывается из осязаемых слоёв так называемой «цифровой бумаги». Эти слои расположены на разной высоте и отбрасывают тени друг на друга, что помогает пользователям лучше понимать анатомию интерфейса и принцип взаимодействия с ним.
  2. Полиграфический дизайн. Если считать слои кусками «цифровой бумаги», то в том, что касается «цифровых чернил» (всего того, что изображается на «цифровой бумаге»), используется подход из традиционного графического дизайна: например, журнального и плакатного.
  3. Осмысленная анимация. В реальном мире предметы не возникают из ниоткуда и не исчезают в никуда — такое бывает только в кино. Поэтому в Material Design мы всё время думаем о том, как с помощью анимации в слоях и в «цифровых чернилах» давать пользователям подсказки о работе интерфейса.
  4. Адаптивный дизайн. Речь идет о том, как мы применяем предыдущие три концепции на разных устройствах с разными разрешениями и размерами экранов.

Итак, будем двигаться по порядку.

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

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

Поверхность

Что такое поверхность? В основе своей это “контейнер” с тенью и ничего больше. Но и этого вполне достаточно, чтобы отличить один объект от другого и показать, как они расположены друг относительно друга. Философия Material Design стремится к простоте и “чистому” дизайну.

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

Глубина

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

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

Важно заметить, что у глубины есть “дно”. Предполагается, что она ограничена толщиной самого мобильного устройства. То есть, если на смартфоне это сантиметр от стекла до задней стенки, а у вас в интерфейсе есть кредитная карточка, то её нельзя просто перевернуть — она упрётся в стекло и заднюю стенку.

NB!

  1. Глубина должна иметь смысл. Задавайте себе вопрос: «Почему так, а не иначе?» Если ответа нет, имеет смысл поискать другое решение.
  2. Позаботьтесь о логистике. Плавающие кнопки, тулбары и диалоговые окна находятся на определенной высоте. Иногда им нужно перемещаться по оси Z, чтобы избегать столкновений, когда что-то происходит. С этой вот хореографией нужно быть предельно внимательным.
  3. Не надо насиловать кнопку. Плавающая кнопка — очень характерный элемент. Многие считают, что стоит добавить её в интерфейс: так это сразу становится Material Design. Но она должна использоваться только для ключевого действия в вашем приложении. Если вам нужно закрыть какое-то окошко или подтвердить действие, то не нужно использовать плавающую кнопку. Для этого есть другие элементы.
  4. Не все должно быть на карточке. Если у какого-то объекта есть много форм и он содержит в себе много разного контента, то карточка подходит. А если нет, то, может, лучше сделать это обычным текстом или текстовым списком?
  5. Это унылое диалоговое окно действительно нужно? Дизайнеры Google постарались, чтобы сделать диалоговые окна получше, но всё равно для большинства задач больше подходят Bottom Sheets. Есть еще Snackbars. Диалоговые окна нужны только чтобы задать вопрос пользователю.
  6. Используйте раскрытие списков. Это недооценённый паттерн, но он вполне себе Material и хорошо решает задачу.

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

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

Изящная типографика

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

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

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

Размер шрифта

На сайте google.com/design/spec есть стандартная палитра шрифтов, которую можно смело использовать. В палитре используется шрифт Roboto, но его можно заменять своим фирменным шрифтом, чтобы поддержать бренд. Важно всё внимательно протестировать, так как на разных устройствах рендеринг шрифтов может работать по-разному. Обычно OTF шрифты работают лучше, чем TTF.

Контрастная типографика

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

Модульная сетка и направляющие

Теперь к расположению контента на экране. В полиграфическом дизайне используются модульные сетки, в экранном дизайне это больше базовые сетки с очень маленькими модулями. Так, в Material Design используется сетка с шагом в 8dp. DP — это density-independent pixel, единица во многом аналогичная единице point в iOS.

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

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

Геометрическая иконографика

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

Цвет

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

Основной используется для больших областей вроде action bar, а в его более тёмную вариацию красится status bar. Более яркий акцентный цвет используется точечно в элементах управления, кнопках, полосках, индикаторах и т.д. Акцентный цвет призван привлекать внимание пользователя к ключевым элементам, таким как плавающая кнопка.

Насколько много цвета применять? Акценты ставятся точечно, в небольшом количестве. Для раскрашивания остальной части интерфейса есть простое базовое правило. Когда текста много, например, это список почты, стоит оставить app bar стандартного размера и покрасить его, чтобы позволить пользователю сосредоточиться на содержимом. Если контента не так много, например, детальный просмотр отдельного элемента, фото или калькулятор, то это отличная возможность для применения больших цветных плашек — 2х или 3х высоты app bar.

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

Мы взяли фотографию, и алгоритм выделил из него 6 цветов с разными характеристиками:

— есть 3 сочных и 3 приглушенных цвета;

— они делятся на светлые, стандартные и тёмные тона;

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

Красивые фото

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

NB!

  1. Брендируйте с удовольствием. Google находится в более выгодном положении с тем, что может использовать яркие цвета в качестве фирменных, но это не стоит воспринимать как проблему. Цвета можно выбрать из корпоративного брендбука и вообще использовать логотип.
  2. Не забывайте отступы и “давайте воздуха”. Базовая сетка в 8dp и отступ слева в 72dp — практически правило. Пусть контенту будет хорошо и свободно.
  3. Выразительные фото делают погоду. Фотографии и иллюстрации в качестве выразительных средств — наш выбор.

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

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

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

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

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

Асимметрия

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

Реакция

Другой очень важный принцип анимации в Material Design — реакция на действия пользователя. Там, где это возможно, эпицентром изменений в интерфейсе должно быть прикосновение к экрану устройства. Например, волна, которая появляется и идёт от точки касания пальцем. Этот эффект без проблем реализуется в Android L.

Микроанимации

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

Четкость и резкость

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

NB!

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

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

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

От общего к частному

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

Отступы

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

Whiteframes

Идеи по организации пространства и отступам для разных экранов можно подсмотреть на сайте google.com/design/spec в разделе Whiteframes. Это отличное место, чтобы начать, понять общий смысл и затем продолжить собственные эксперименты.

Направляющие

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

Размеры

Рекомендуется брать кратные пропорции для всех элементов. В частности — выбирать размер app bar значительно удобнее, если делать его кратным: 1х, 2х, 3х. На смартфонах и планшетах этот размер разный, но приложение без проблем адаптируется.

Блоки

Мышление блоками вообще может быть полезным. Если задать такую вот модульную сетку из блоков, кратных 8dp, то получится отличный визуальный ритм и принимать решения будет удобнее. Зайдите на сайт с вайтфреймами и посмотрите материалы.

Toolbar

Action bar — одна из самых важных частей интерфейса. В нём размещается заголовок, кнопки действий и навигация. В Android Lollipop action bar превратился из скованной полоски сверху в полноценный виджет — функциональный и красивый блок управления приложением. Это стало возможным благодаря тому, что теперь в тулбар можно поместить много функциональных элементов, о которых раньше и мечтать не приходилось:
— поля ввода, формы;
— плавающая кнопка основного действия;
— тулбар скрыт выдвинутой навигацией, но и здесь мы видим вполне функциональный виджет;
— тулбаром удобно управлять при необходимости.

NB!

  1. Далеко не всегда нужен navigation drawer. Google очень часто использует выдвижную навигацию в своих приложениях, поэтому вы можете видеть её в разных примерах. Но у Google очень много задач, которые можно решить с её помощью: разместить помощь, настройки, логин/логаут, информацию о пользователе и так далее. Если у вас похожие задачи, то всё OK, а если вы делаете простой инструмент, то не стоит.
  2. Cмелее и остроумнее с тулбарами. Возможность менять размер тулбара динамически, делать его двойного и тройного размера — это очень круто и удобно. Большинство дизайнеров боится с этим связываться и выбирают один размер раз и навсегда, но тут можно и стоит быть смелее.
  3. Не надо делать из нижнего угла гетто для плавающей кнопки. Плавающая кнопка может быть где угодно: снизу, сверху, справа, слева. Конечно, в углу до неё может быть удобно дотягиваться, но это не единственный вариант. Кнопка может перемещаться с места на место в зависимости от задач.
  4. И смартфоны, и планшеты; и вертикально, и горизонтально. Линейка Android-устройств велика, и это не упрощает жизнь разработчикам. Но правда в том, что у пользователей действительно есть все эти устройства, которые они поворачивают и так и этак (даже если речь идет о смартфонах). Этот момент надо отрабатывать.

Это Material Design. Не бойтесь экспериментировать и ошибаться: не стоит зацикливаться на копировании существующих решений. Пробуйте!

Новое в материальном дизайне? 12 принципов, которые нужно знать — Дизайн на vc.ru

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

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

Материальный дизайн для вас?

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

В основном ответьте себе на следующий вопрос: «Соответствуют ли принципы и принципы материального дизайна тому, чего я хочу достичь? »

1. Познакомьтесь с основным ресурсом

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

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

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

2. Понять «материал» в материальном дизайне

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

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

Сравнение Material Design CSS фреймворков / Хабр

Доброго время суток. В статье рассказно о Material Design фреймворках для создания Web-страничек. Если вас интересует тема Material Design, также как и меня, то Добро пожаловать под кат, возможно, откроете для себя что-нибудь новое и интересное.


Вкратце расскажу что такое Material Design, когда появился и где используется.

Material Design — Визуальный язык, представлен в 2014 году Google, используется чаще всего в мобильных приложения. Пример использования Material Design’a можно увидеть во многих мобильных приложения Google(Play, Music, Books и т.д.), а также в Chrome OS.

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

Ссылки: Materialize и Github

И первым в моем списке станет Materialize, который сюда попал благодаря интересным функциям.

Первый коммит датирован 2014 годом, собственно в тот же год, когда и был презентован Material Design на конференции Google.

Из приятного можно отметить, что недавно вышла Alpha 1.0, которая привнесла независимость от сторонних JS библиотек, таких как JQuery и Hummer.js

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

Размер: ~194kb

Ссылки: Material Design Lite и Github

Официальный фреймворк от Google для Web’a.

В отличии от Materialize, Material Design Lite не зависит от других JS фреймворков, что делает его немного легче.

Слово Lite стоит в названии не зря — этот фреймворк предлагает только основные компоненты Material Design’a, здесь нету Carousel, сетки, эффекта Параллакса и т.д.

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

На сайте есть конструктор тем, где вы можете создать свою цветовую тему.

Размер: ~27 kb

Ссылки: MUI и Github

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

Большой вес фреймворка компенсируется поддержкой React.js версии 16, Angular.js и наличием модуля для верстки почтовых писем.

Письма сверстанные с использованием этого фреймворка поддерживаются многими популярными платформами для работы с e-mail ящиками, например GMail, Microsoft Outlook, Apple Mail и т.д., а если письмо оформлено красиво и, в первую очередь, приятно для чтения, то с помощью обычной рассылки вы сможете заинтересовать человека вашим продуктом или чем-либо другим.

Размер: ~61kb

Ссылка: Surface и Github

Фреймворк написан на чистом CSS без использования Javascript, именно этот факт делает его самым легким из всех перечисленных. Кстати, интересно еще то, что фреймворк написан всего за 2 недели.

Не смотря на все эти факты, он обладает всеми основными элементами Material Design’a.

Но к сожалению, нету поддержки Bower и NPM.

Хотелось бы отдельно отметить, что автор фреймворка просит отправлять пожертвования, направленные для него, в Фонд исследования раковых болезней в Великобритании.

Размер: ~5.7kb

Ссылки: Bootstrap Material Design и Github

Как следует из названия, это не отдельный фреймворк, а просто тема для Bootstrap.

По сколько это тема для Bootstrap’a, то здесь есть все фишки из Bootstrap’a и все элементы из Material Design, есть даже встроенные значки в стиле Material.

Размер: ~648kb

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

Если вам нужен простой, как топор, или просто легковесный фреймворк, то вашим выбором скорей всего станет Surface или Material Design Lite. Если вам нужно полностью готовое решение, где будут и различные слайдеры и, например эффект Параллакса, то скорее всего вы остановитесь на Materialize. Если же вы делаете более сложный проект, где будет использоваться MVC, и вам необходима поддержка React.js или Angular.js, то вам стоит посмотреть на MUI.
Отдельного внимания, по моему мнению, отдельного внимания заслуживает тема для Bootstrap.
Я считаю, что рационально использовать ее будет в случае, если вы такой же консерватор, как и я у вас весь сайт написан с использованием Bootstrap и вы не хотите использовать по 10 CSS библиотек в одном проекте или хотите немного сократить время загрузки сайта.

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

Material Style — Материальный дизайн для всех от AGMStudio

WrapBootstrap

  • Популярные
  • новейшие
  • Обновлено
  • Войти
  • Зарегистрироваться

темы

  • Общие 217
  • Услуги дизайна и творчества 166
  • Деловые и корпоративные 95
  • Розничная торговля и покупки 33
  • Приложения и программное обеспечение 24
  • Маркетинг и конверсия 23
  • Стартапы и SaaS 23
  • Рестораны и кафе 16
  • Образование и обучение 10
  • Свадьбы 9
  • Недвижимость и ипотека 8
  • Строительство и архитектура 7
  • Развлечения и СМИ 7
  • Мероприятия и конференции 6
  • Путешествия и отели 6
  • Работа и найм 5
  • Еда и напитки 4
  • Медицина и здравоохранение 4
  • Некоммерческая и благотворительная организация 4
  • Веб-хостинг 4
  • Искусство и фотография 3
  • Адвокаты и юридические фирмы 3
  • Красота и мода 3
  • Фитнес и физическая культура 3
  • Музыка и группы 3
  • Домашние и животные 2
  • Дети и уход за детьми 1
  • Краудфандинг 1
  • Финансы и бухгалтерский учет 1
  • Мебель и дизайн интерьера 1

Смотреть все темы →

категории

  • Административные шаблоны 142
  • Многоцелевые шаблоны 157
  • Целевые страницы 134
  • Портфолио и резюме 102
  • Электронная торговля 35
  • Блоги и журналы 28
  • Справочники и списки 20
  • Комплекты пользовательского интерфейса и конструкторы веб-сайтов 7
  • Другие шаблоны 69
  • Детали
  • Комментарии

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

  • Описание

.

Лучший способ стилизовать Material-UI? | автор: siriwatknp

Во-первых, слишком много процессов

 import {withStyles} из '@ material-ui / core / styles'; const styles = {
card: {
...
},
media: {
...
},
... otherAttribute
};
...
экспортировать по умолчанию withStyles (стили) (NewCard)

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

В тот момент мое чутье спросило: «Почему мне приходится проходить через множество процессов, чтобы переопределить несколько стилей, это должно быть проще»

Это продолжало меня раздражать каждый раз, когда я создавал новые компоненты. Однако я все же следил за официальными демками.

Есть много ситуаций, когда вам нужно скопировать существующий компонент и создать новый. Я обнаружил, что копирование компонента, в котором реализован подход withStyles, для создания нового иногда бывает болезненным.По моему опыту, было время, когда мне приходилось повторно использовать компонент моего коллеги, чтобы создать новый. После того, как я скопировал и попытался изменить, меня смутила структура и название объекта стилей . Наконец, я переписал новый, не используя существующий. (Это также связано с навыками разработчика, а не только с подходом)

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

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

Я покажу вам подход withStyles для поворота левого направо. Взгляните на эту песочницу.

https://codesandbox.io/s/50l225l964

Как видите, компонент полагается на опору классов из withStyles.Если этот компонент содержит логику, его будет сложно перемещать, поскольку он прикреплен к опоре.

Вот что я пытался решить.

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

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

https://codesandbox.io/s/m51z3y8plx

Результат тот же, но теперь мой компонент чище, потому что он больше не зависит от поддержки классов !. Более того, это не повлияет на другие компоненты, потому что я использую className = "MuiEngagementCard - 01" только как ссылку на этот компонент, затем я определяю каждый дочерний элемент className , чтобы переопределить его от родительского.

 MuiCard: {
'& .MuiEngagementCard - 01': {
transition: '0.3s',
maxWidth: 300,
margin: 'auto',
'&: hover': {
boxShadow: '0 16px 70px -12.125px rgba (0,0,0,0.3) ',
},
' & .MuiCardMedia-root ': {
paddingTop: '56 .25%' // 16: 9
}
},
...
}

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

Код jsx, использующий тематический подход (все еще содержит много имен классов)

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

Card DOM, который уже содержит CSS-in-JS className Команда

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

https://codesandbox.io/s/yv7kv238yz

Ура, так лучше. Этот подход решает множество проблем, с которыми я столкнулся, и мне это нравится. Здесь вы можете спросить, а как насчет className типографики, оно не чистое. Я полностью согласен с этим, но здесь проблема другая. Типографика должна иметь возможность определять сами стили, потому что она определенно будет использоваться во всем приложении. Если не понимаешь, взгляни на это.

  
...

...
...

Нет className на типографика, просто свойства, которые их определяют. Подробнее об этом я напишу в следующем рассказе. Это называется «Системный стиль».

Наконец, это результат того, что я использую этот подход для создания стиля. Он доступен на официальном сайте Material-UI. Проверить это.

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

Хорошие новости, я создал бесплатную коллекцию компонентов UI-материала, которую вы можете просто КОПИРОВАТЬ и ВСТАВИТЬ в свой проект, она называется «MUI Treasury». Удачи в хранении! https://mui-treasury.com

Карта казначейства Mui Страница

Спасибо за чтение. Надеюсь вам нравится.

.

Правильный способ стилизации UI материала? | автор: siriwatknp

siriwatknp

Этот рассказ рекомендуется для людей, которые уже имели опыт работы с React Material-UI. Для тех, кто еще не пробовал, попробуйте.

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

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

Pros

  • Компонент очень хорошо структурирован с помощью CSS-API, который отлично подходит для создания долгосрочного компонента (если вы правильно его кодируете, ха-ха)
  • Не так просто изменить стили сравнить на чистый CSS, SCSS.

Минусы

  • Переопределение и настройка очень сложны для новичков.
  • Невозможно стилизовать вложенные компоненты в родительском элементе.(CSS может)

Чтобы дать вам четкое представление, давайте посмотрим на этот пример. Я хочу сделать этот параметр меню компонентом, составив два компонента, которые у меня уже есть [Option (Parent) & Chip (Child)]. Условие заключается в том, что при наведении указателя Option на нем должен быть синий фон с белым текстом, у Chip также должен быть более темный фон с белым текстом.

Звучит просто и легко, если вы создадите его с нуля. Но если у вас уже есть компонент Chip справа, и вы хотите скомпоновать его с помощью Option, это не так просто.

# 1st Attempt

давайте попробуем настроить его.

Проблема в том, что Child получит другие стили от Parent , и вам необходимо указать правильный CSS API, который принимает Child , в противном случае вы получите предупреждение. Более того, если вы используете Parent как вложенный компонент в другие компоненты. Представьте структуру классов, которые вам нужно передать через Parent в Child .

Во-первых, Ребенок слушает собственные стили и на экране он отлично отображается.

У ребенка свои стили.

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

3. Вы пытаетесь настроить стили Дочерний при наведении указателя мыши на Родительский , Дочерний получаете дополнительные стили, а если Родительский станет вложенным компонентом, они получат больше. классы становятся более сложными и не масштабируемыми.

# 2-я попытка

Мне в голову пришла идея. Что, если мы объединим стили Child с стилями Parent , а затем передадим их в компонент Child .

Здравствуйте, это работает, потому что теперь мы можем управлять Child на основе Parent ! но поскольку Дочерний по-прежнему слушает свои собственные стили, в Дочерний

Дублирующиеся стили есть в Дочернем

# 3-я попытка

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

Родительский + дочерний компонент при третьей попытке

Родительский все еще может использоваться как вложенный компонент. Ex.что-то вроде этого

Теперь Root может настраивать Parent и Child в пределах своей собственной области.

Я понимаю, и после того, как я докажу эту концепцию, я создал эту пряжу

 add mui-styling 

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

Краткое объяснение: mui-styling расширяет с помощью стилей из material-ui, чтобы обеспечить лучший пользовательский интерфейс для разработчиков и помочь им создавать устойчивые компоненты.

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

.

API - Material-UI

Справочник по API для @ material-ui / core / styles.

createGenerateClassName ([options]) => генератор имени класса

Функция, которая возвращает функцию генератора имени класса.

Аргументы

  1. options ( Object [необязательно]):
    • options.disableGlobal ( Boolean [optional]): по умолчанию false . Отключите генерацию детерминированных имен классов.
    • options.productionPrefix ( String [необязательно]): по умолчанию 'jss' . Строка, используемая для префикса имен классов в производстве.
    • options.seed ( String [необязательно]): по умолчанию '' . Строка, используемая для однозначной идентификации генератора. Его можно использовать, чтобы избежать конфликтов имен классов при использовании нескольких генераторов в одном документе.

Возвращает

генератор имени класса : Генератор должен быть предоставлен JSS.

Примеры

  импорт React из react;
импортировать {StylesProvider, createGenerateClassName} из '@ material-ui / core / styles';

const generateClassName = createGenerateClassName ({
  productionPrefix: 'c',
});

экспортировать функцию по умолчанию App () {
  возвращение (
     ... 
  );
}  

createStyles (styles) => styles

Эта функция на самом деле ничего не «делает» во время выполнения, это просто идентичность
функция.Его единственная цель - предотвратить расширение типа TypeScript при предоставлении
правила стиля makeStyles / withStyles , которые являются функцией темы Theme .

Аргументы

  1. стилей ( объект ): объект стилей.

Возвращает

стилей : объект стилей.

Примеры

  импорт {makeStyles, createStyles} из '@ material-ui / core / styles';

const useStyles = makeStyles ((theme: Theme) => createStyles ({
  root: {
    backgroundColor: тема.красный цвет,
  },
}));

экспортировать функцию по умолчанию MyComponent {
  константные классы = useStyles ();
  return 
; }

makeStyles (styles, [options]) => hook

Свяжите таблицу стилей с функциональным компонентом, используя шаблон hook .

Аргументы

  1. стилей (Функция | Объект ): функция, генерирующая стили или объект стилей.
    Он будет связан с компонентом.Используйте подпись функции, если вам нужен доступ к теме. Он предоставляется как первый аргумент.
  2. options ( Object [необязательно]):
    • options.defaultTheme ( Object [optional]): тема по умолчанию для использования, если тема не предоставляется через поставщик темы.
    • options.name ( String [необязательно]): имя таблицы стилей. Полезно для отладки.
    • options.flip ( Boolean [необязательно]): если установлено значение false , этот лист откажется от преобразования rtl .Если установлено значение true , стили инвертируются. Если установлено значение null , он следует theme.direction .
    • Остальные ключи передаются аргументу options jss.createStyleSheet ([стили], [параметры]).

Возвращает

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

Примеры

  импорт React из react;
импортировать {makeStyles} из '@ material-ui / core / styles';

const useStyles = makeStyles ({
  root: {
    backgroundColor: 'красный',
    цвет: props => props.color,
  },
});

экспортировать функцию по умолчанию MyComponent (props) {
  const classes = useStyles (реквизиты);
  return 
; }

ServerStyleSheets

Это помощник класса для обработки рендеринга на стороне сервера. Вы можете следовать этому руководству для практического подхода.

  импортировать ReactDOMServer из 'response-dom / server';
импортировать {ServerStyleSheets} из '@ material-ui / core / styles';

константные листы = новый ServerStyleSheets ();
const html = ReactDOMServer.renderToString (sheet.collect ());
const cssString = sheet.toString ();

const response = `


  <Голова>
    <Стиль> $ {cssString} 
  
  <Тело> $ {HTML} 

`;  

новый ServerStyleSheets ([параметры])

Создание экземпляра принимает объект параметров в качестве первого аргумента.

  1. options ( Object [необязательно]): параметры распространяются как свойства для компонента StylesProvider .

sheet.collect (node) => React element

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

sheet.toString () => CSS строка

Метод возвращает собранные стили.

⚠️ Перед использованием этого метода необходимо вызвать .collect () .

sheet.getStyleElement () => CSS React element

Этот метод является альтернативой .toString () , когда вы визуализируете всю страницу с помощью React.

⚠️ Перед использованием этого метода необходимо вызвать .collect () .

со стилем (Компонент) (стили, [параметры]) => Компонент

Свяжите таблицу стилей с функциональным компонентом, используя шаблон стилей компонентов .

Аргументы

  1. Компонент : Компонент, который будет упакован.
  2. стилей (функция | Объект ): функция, генерирующая стили или объект стилей.
    Он будет связан с компонентом.
    Используйте подпись функции, если вам нужен доступ к теме. Он предоставляется как свойство первого аргумента.
  3. options ( Object [необязательно]):
    • options.defaultTheme ( Object [optional]): тема по умолчанию для использования, если тема не предоставляется через поставщик темы.
    • options.withTheme ( Boolean [необязательно]): по умолчанию false . Предоставьте компоненту тему как свойство.
    • options.name ( String [необязательно]): имя таблицы стилей. Полезно для отладки.
      Если значение не указано, он попытается вернуться к имени компонента.
    • options.flip ( Boolean [необязательно]): если установлено значение false , этот лист откажется от преобразования rtl .Если установлено значение true , стили инвертируются. Если установлено значение null , он следует theme.direction .
    • Остальные ключи передаются аргументу options jss.createStyleSheet ([стили], [параметры]).

Возвращает

Компонент : новый компонент создан.

Примеры

  импорт React из react;
импортировать {стили} из '@ material-ui / core / styles';

const MyComponent = styled ('div') ({
  backgroundColor: 'красный',
});

const MyThemeComponent = styled ('div') (({
  тема
}) => ({
  обивка: тема.Расстояние между (1),
}));

экспортировать функцию по умолчанию StyledComponents () {
  возвращение (
    
      
    
  );
}  

StylesProvider

Этот компонент позволяет изменять поведение решения для стилизации. Он делает параметры доступными в дереве React благодаря контексту.

Предпочтительно использовать его в корне дерева компонентов .

Стойка

Название Тип По умолчанию Описание
дети * узел Ваше дерево компонентов.
disableGeneration булев ложь Вы можете отключить создание стилей с помощью этой опции. Это может быть полезно при обходе дерева React за пределами этапа рендеринга HTML на сервере. Допустим, вы используете response-apollo для извлечения всех запросов, сделанных серверной частью интерфейса. Вы можете значительно ускорить обход с этим свойством.
generateClassName функция Генератор имени класса JSS.
Впрыск булев ложь По умолчанию стили вставляются последними в элемент страницы. В результате они получают большую специфичность, чем любая другая таблица стилей. Если вы хотите переопределить стили Material-UI, установите этот параметр.
jss объект Экземпляр

JSS.

Примеры

  import React from 'react';
импортировать ReactDOM из react-dom;
импортировать {StylesProvider} из '@ material-ui / core / styles';

function App () {
  возвращение (
    ... 
  );
}

ReactDOM.render (, document.querySelector ('# app'));  

ThemeProvider

Этот компонент принимает свойство темы и делает его доступным в дереве React благодаря контексту.
Желательно использовать его в корне вашего дерева компонентов .

Стойка

Название Тип По умолчанию Описание
дети * узел Ваше дерево компонентов.
тема * объединение: объект | func Объект темы. Вы можете предоставить функцию для расширения внешней темы.

Примеры

  import React from 'react';
импортировать ReactDOM из react-dom;
импортировать {ThemeProvider} из '@ material-ui / core / styles';

const theme = {};

function App () {
  возвращение (
     ... 
  );
}

ReactDOM.render (, документ.querySelector ( '# приложение'));  

useTheme () => theme

Этот хук возвращает объект theme , поэтому его можно использовать внутри функционального компонента.

Возвращает

theme : объект темы, ранее введенный в контекст.

Примеры

  импорт React из react;
импортировать {useTheme} из '@ material-ui / core / styles';

экспортировать функцию по умолчанию MyComponent () {
  const theme = useTheme ();

  return 
{`интервал $ {тема.Расстояние между} `} ; }

withStyles (styles, [options]) => компонент более высокого порядка

Свяжите таблицу стилей с компонентом, используя шаблон компонента более высокого порядка .
Он не изменяет переданный ему компонент; вместо этого он возвращает новый компонент со свойством classes .
Этот объект classes содержит имена имен классов, введенных в DOM.

Некоторые детали реализации, о которых может быть интересно знать:

  • Он добавляет свойство classes , чтобы вы могли переопределить имена внедренных классов извне.
  • Перенаправляет ссылки на внутренний компонент.
  • Опора innerRef устарела. Вместо этого используйте ref .
  • Это , а не копирует статику.
    Например, его можно использовать для определения статического метода getInitialProps () (next.js).

Аргументы

  1. стилей (функция | Объект ): функция, генерирующая стили или объект стилей.
    Он будет связан с компонентом.Используйте подпись функции, если вам нужен доступ к теме. Он предоставляется как первый аргумент.
  2. options ( Object [необязательно]):
    • options.defaultTheme ( Object [optional]): тема по умолчанию для использования, если тема не предоставляется через поставщик темы.
    • options.withTheme ( Boolean [необязательно]): по умолчанию false . Предоставьте компоненту тему как свойство.
    • options.name ( String [необязательно]): имя таблицы стилей. Полезно для отладки.
      Если значение не указано, он попытается вернуться к имени компонента.
    • options.flip ( Boolean [необязательно]): если установлено значение false , этот лист откажется от преобразования rtl . Если установлено значение true , стили инвертируются. Если установлено значение null , он следует theme.direction .
    • Остальные ключи передаются аргументу options jss.createStyleSheet ([стили], [параметры]).

Возвращает

компонент более высокого порядка : следует использовать для обертывания компонента.

Примеры

  импорт React из react;
импортировать {withStyles} из '@ material-ui / core / styles';

const styles = {
  root: {
    backgroundColor: 'красный',
  },
};

function MyComponent (props) {
  return 
; } экспорт по умолчанию withStyles (стили) (MyComponent);

Также вы можете использовать в качестве декораторов вот так:

  импортировать React из react;
импортировать {withStyles} из '@ material-ui / core / styles';

const styles = {
  root: {
    backgroundColor: 'красный',
  },
};

@withStyles (стили)
class MyComponent расширяет React.Component {
  render () {
    return 
; } } экспорт по умолчанию MyComponent

withTheme (Компонент) => Компонент

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

Аргументы

  1. Компонент : Компонент, который будет упакован.

Возвращает

Компонент : новый компонент создан. Перенаправляет ссылки на внутренний компонент.

Примеры

  импорт React из react;
импортировать {withTheme} из '@ material-ui / core / styles';

function MyComponent (props) {
  возврат 
{props.theme.direction}
; } экспорт по умолчанию withTheme (MyComponent);

,

Отправить ответ

avatar
  Подписаться  
Уведомление о