Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Material Design
Code

Что можно подчеркнуть из Google Material Design

by
Length:MediumLanguages:

Russian (Pусский) translation by Ivan Gryaziev (you can also view the original English article)

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

Введение

Google Material Design можно разделить на два важные компонента:

  • Материал
  • Движение

О Материале

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

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

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

О Движение

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

Как именно работает "Движение" в MD? Вот пример. Там представлена главная полоса состоящая из набора карточек.  Когда вы жмете по одной из карт, материал карты расширяется до полной ширины и высоты экрана.

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

Материал

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

Цвет

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

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

Типографика

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

Простейший способ начать работать с этой сеткой это скачать sticker sheet. Material Design предоставляет вам структуру для вашей типографии когда вы начинаете новый дизайн.

Макет (Layout)

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

Эта иллюстрация отображает концепцию глубины в пользовательских интерфейсах.

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

Пример трех уровней глубины: меню, навигация на верхней панели  и в области контента.

Для более продвинутых дизайнеров руководство описывает сетки из базовых линий. Раздел руководства метрика и ключевые точки подробно описывает дает вам место для экспериментов. 

Если вы предпочитаете работать с заранее заготовленными шаблонами, вы можете скачать Google's white frames template.

Пример разработанного дизайна.

Движение

Движение плотно взаимодействует с материалом, как видно в ранее описанном примере карточки. Движение оживляет материал.

Смягчение

Когда вы начинаете изучение основ движения, один из первых принципов, о которых вы узнаете это Смягчение.

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

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

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

  • Animation Principles in UI Design: Understanding Easing(Medium, by Suresh Selvaraj). Это отличная статья чтобы научиться основам смягчения.
  • Authentic Motion (Google). Это более обширные справочное пособие включающее несколько примеров.
Эта иллюстрация Смягчения из статьи "Animation Principles in UI Design: Understanding Easing".

Отзывчивые взаимодействия

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

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

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

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

Полезные ресурсы

Вдохновение

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

Google - Material exploration от Aurélien Salomon
Alarm Material UI от Ehsan Rahimi
Aviasales L (Material Design) от Mark M

Заключение

Это было краткое введение в Materiaд Design. Если прочитанное вызвало в Тебе интерес, я настоятельно рекомендую прочитать больше в официальном руководстве от компании Google.

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

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

Что вы думаете о Material Design? И какой опыт есть у вас?  Пожалуйста, поделитесь ниже в комментариях, мне очень любопытно и я уверен, что многим другим тоже.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.