Material Design на русском. Часть 32 — Скорость

Published in

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

4 min readMar 7, 2021

--

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

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

Управление скоростью

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

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

**Неравильно**: Избегай слишком быстрых и слишком медленных переходов.

Длительность

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

Анимация выхода и закрытия

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

Боковая навигация открывается дольше 250 мс, но закрывается меньше чем за 200 мс.

Карточка открывается за более чем 300 мс, но сворачивается меньше чем за 250 мс.

Область переходов

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

Маленькая область

Маленькие элементы с небольшой областью перехода, такие как иконки и элементы по типу свитчера, чекбокса или радио-кнопки, имеют маленькую длительность перехода.

У свитчера длительность анимации равна 100мс

Средняя область

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

Анимация нижнего списка: раскрытие за 250мс. Сворачивание за 200мс

Анимация чипса: раскрытие за 250мс. Сворачивание за 200мс.

Большая

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

Переход из FAB в полноценный экран. Раскрытие за 300мс. Сворачивание за 250мс.

Раскрытие за 300мс. Сворачивание за 250мс

Сглаживание анимации

Сглаживание (easing) — это изменение скорости анимации элемента, который может как ускоряться так и замедляться.

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

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

Типы сглаживания

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

Стандартное сглаживание

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

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

Элемент со стандартным сглаживанием замедляется по мере приближения к концу траектории. На этом графике ось Y указывает положение элемента на экране, а ось X показывает время.

Акцентное сглаживание

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

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

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

Замедленное сглаживание

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

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

Ускоренное сглаживание

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