Дизайн
Алина Окунева
20 016

Моушн-дизайн не должен быть сложным Материал редакции

Перевод материала моушн-дизайнера Google в команде Material Design Йонаса Наймарка.

В закладки
Аудио

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

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

Сбивает с толку и общий подход к анимации интерфейса и классической анимации. На освоение двенадцати принципов анимации компании Disney можно потратить всю жизнь; значит ли это, что дизайн интерфейсов организован так же сложно?

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

С чего начать

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

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

Модели переходов

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

  • переходы с блоками;
  • переходы без блоков.

Переходы на основе блоков

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

Блоки, блоки и элементы. Такие элементы, как текст, иконки и картинки, объединяются внутри блока

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

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

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

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

Элементы появляются и исчезают. Справа указаны размеры блока. 

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

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

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

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

Переходы без блоков

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

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

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

При нажатии кнопки «Дальше» в процессе ознакомления с приложением (онбординг) композиции движутся одинаково плавно по горизонтали. Такое движение слева направо подчёркивает пошаговое движение вперёд. В общих движениях используется стандартная плавность Material Design.

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

Рекомендации: чем проще, тем лучше

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

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

Простое, ступенчатое и пружинистое движения

Определите верную продолжительность и плавность движения

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

А у маленьких элементов, таких как переключатели, продолжительность движения короткая — 100 мс. Если переход кажется слишком быстрым или, наоборот, медленным, уменьшайте либо увеличивайте скорость на интервал в 25 мс, пока не найдёте золотую середину.

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

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

Линейная плавность и несимметричная. Справа высота списка и время

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

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

{ "author_name": "Алина Окунева", "author_type": "self", "tags": ["\u043c\u043e\u0443\u0448\u043d\u0434\u0438\u0437\u0430\u0439\u043d","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441","\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f","materialdesign"], "comments": 14, "likes": 85, "favorites": 321, "is_advertisement": false, "subsite_label": "design", "id": 59012, "is_wide": true, "is_ugc": true, "date": "Wed, 20 Feb 2019 10:23:35 +0300", "is_special": false }
0
{ "id": 59012, "author_id": 258318, "diff_limit": 1000, "urls": {"diff":"\/comments\/59012\/get","add":"\/comments\/59012\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/59012"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
14 комментариев
Популярные
По порядку
Написать комментарий...
5

Крутая статья, спасибо

Ответить
1

Анимация дольше чем почти моментальная мешает пользоваться приложениями.

Ответить
0

Тут она замедленна для демонстрации. Но вообще да, анимация скрывает тормоза. По крайней мере я так это ощущаю.

Ответить
1

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

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

Ответить
0

Очень крутая работа, но чёрт побери, как сложно в реальной жизни это реализовать

Ответить
0

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

Ответить
0

Это в стандартной либе должно быть, а не в сторонних

Ответить
0

Так оно и есть в стандартной либе.

Ответить
0

Основательно, но инкубаторский material дизайн уже приелся.

Ответить
0

это справедливо для любого дизайн-языка. Apple HID, IBM, Material

Ответить
0

это бы лебедеву показать, что ли

Ответить
0

Ссылка на Material Design под первой картинкой битая - нужно убрать пробелы

Ответить
0

Привет. Кто знает как в principle или в ae сделать такую анимацию ( вроде называется mouse hover) https://leviev-group.com/

Ответить
0

Привет! Посмотри с 44 мин https://www.youtube.com/watch?v=ojbMvrikZlo, там Кирюха почти тоже сделал в Тильде.

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }