Material Design на русском. Часть 28 — Форма и анимация

Published in

Дизайн-кабак

3 min readFeb 25, 2021

--

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

Использование

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

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

Морфинг может повлиять на:

Значимость
Эргономику
Смысл конкретной формы
Хорошо ли элемент передает идею бренда
Взаимодействие между элементами

**Правильно**: форма может меняться в ответ на изменения в интерфейсе. На примере выше нижняя панель приложения меняется при появлении плавающей кнопки

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

Трансформация формы

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

Размеры

Растяжение и сжатие

Форма может растягиваться или сжиматься в ответ на изменение размеров. Морфинг формы должен сохранять пропорции.

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

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

Изменение размера фигуры

Сохраняй соотношение сторон при изменении размера формы, чтобы избежать искажений.

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

Преобразование формы

Форма может трансформироваться в другую форму.

**Осторожно**: трансформация схожих форм ведет к более плавным переходам. Трансформации между разными формами могут криво отображаться.

Отображение контента

Видимость контента

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

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

**Неправильно**: Не отделяй поверхность от ее контента при морфинге. Форма этой верхней панели приложения является причиной того, почему иконки выглядят отдельно от панели.

Форма по умолчанию

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

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

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