Анимация в интерфейсах: 12 принципов UX-анимации (UX in Motion)
Как понять в каких случаях использовать анимацию в приложениях? Да так, чтобы с пользой. И еще, чтобы приложение стало в разы удобнее.
Вы читаете перевод статьи “Creating Usability with Motion: The UX in Motion
В статье 5 частей:
Интро в UI-анимацию
Взаимодействие в реальном времени и пост-события
Четыре способа улучшить юзабилити с помощью анимации
Принципы, приемы, параметры и значения
12 принципов анимации в интерфейсах
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_boQYFGPLtlDof3RRs124bQ.gif&width=768&dpr=4&quality=100&sign=b4e8e26b&sv=1)
Интро в UI-анимацию
Почему-то так сложилось, что под UI-анимацией понимают просто красивый интерфейс: когда что-то выезжает, выплывает, пролетает или плавно появляется на экране. Но мир анимации в разы интереснее и глубже.
UI-анимация – это, в первую очередь, про ценность для пользователя и только потом про красоту. Поэтому UI-анимация – это не бонус, это конкурентное преимущество в борьбе за клиента.
И как вы правильно поняли, это не какой-то финальный штрих, который запиливают в самом конце проекта.
В этой статье я постараюсь в полном объеме объяснить все, что озвучил выше и подкрепить мои доводы 12-ю принципами, которые лежат в основе хорошей анимации. Надеюсь, эта статья станет вашим чек-листом. И еще один важный момент. UI-анимация – это работа инженера, это грамотно спроектированная конструкция, цель которой сделать приложение еще полезнее для пользователя.
Взаимодействие в реальном времени и пост-события
К делу. Есть «состояние» и «действие». Состояние в UX — это нечто постоянное. Действие — это что-то временное, основанное на движении. Объект может быть в определенном состоянии или действовать.
Действия могут происходить в реальном времени или наступать после каких либо событий. При взаимодействии в реальном времени анимация происходит одновременно с действиями пользователя. Альтернатива взаимодействию в реальном времени – пост-события, когда действие наступает после действий пользователя.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_5FaCRpgM0oUwiqc_j_mL3w.gif&width=768&dpr=4&quality=100&sign=508d8276&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_SRLhjyyJA43ELZ65Zu6o4w.gif&width=768&dpr=4&quality=100&sign=6ecc4628&sv=1)
Это важное отличие.
Взаимодействия в реальном времени еще называют – прямое управление (direct manipulation). Пост-события происходят только после действий пользователя.
Четыре способа улучшить юзабилити с помощью анимации
Способ 1. Ожидания
Существуют двух видов – то, что пользователи ждут от объекта, и то, как на самом деле ведет себя объект. Мы как дизайнеры стремимся уменьшать разрыв между между ожиданием и реальностью.
Способ 2. Непрерывность
Хороший опыт взаимодействия – непрерывный. Непрерывность бывает в пределах сцены, и при переходе от сцены к сцене.
Способ 3. История
История — по сути, это серия моментов и событий, которые связаны между собой посредством UX.
Способ 4. Отношения
Отношения между объектами (пространство, время, иерархия), благодаря которым пользователи схватываю что к чему, перед тем как двигаться дальше.
Принципы, приемы, параметры и значения
Кто-то однажды сказал, что «Принципы… это фундамент.». Запомните эти принципы, они пригодятся в разборе любой анимации. Принципы не зависят от дизайна. Запомните: принципы → приемы → параметры → значения.
Приемы – это разнообразные и неограниченные реализации принципов и/или комбинации принципов.
Параметры — это параметры конкретного объекта, который анимируется для реализации приема. Параметры включают в себя положение, прозрачность, масштаб, поворот, опорные точки, цвет, ширину штриха, фигуру и т. д.
Значения — это собственно численные значения параметров, которые меняются во времени, что и создает так называемую «анимацию».
Для примера: гипотетический пример анимации с использованием принципа Затемнения (Obscuration Principle) посредством приема «затемненного стекла» (blurred glass), который задействует параметры Размытия (Blur) и Прозрачности (Opacity Properties) со значениями 25px и 70% соответственно.
Итак. У нас появились инструменты для работы. Они не зависит от конкретного инструмента прототипирования.
12 принципов UX-анимации
Плавность (Easing), Смещение и Задержка (Offset & Delay) относятся к таймингу;
Трансформация (Transformation), Изменение значений (Value Change), Маска (Masking), Слои (Overlay) и Клонирование (Cloning) — относятся к непрерывности;
Параллакс (Parallax) относится к временной иерархии;
Затемнение (Obscuration), Многомерность (Dimensionality), Отъезжание и Масштаб (Dolly & Zoom) относятся к пространственной целостности (spatial continuity).
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_FQwVeyJ8pxngEGAxruGW-A.jpeg&width=768&dpr=4&quality=100&sign=14a374d5&sv=1)
Принцип 1: Easing (Плавность)
Easing добавляет «естественности». Объекты кажутся нам знакомыми и живыми. Дисней описывал этот принцип как «Slow In and Slow Out».
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_KcWZCCOMr7QrFpqxWirtMw.gif&width=768&dpr=4&quality=100&sign=e01418ca&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_NBmptOO9ZTC9bQ-98-mWcg.gif&width=768&dpr=4&quality=100&sign=f71a390e&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_HwK2vxdY0vveZdvqoEY_8w.gif&width=768&dpr=4&quality=100&sign=ac261b8a&sv=1)
Вариант «Linear Motion» выглядит «плохо». Вариант с «Easing» хорош. Кстати, все три примера имеют одинаковое количество кадров и длятся одно и то же количество времени. У них отличается только плавность (easing).
Какой из примеров лучше других улучшает юзабилити? Плавное движение меньше отвлекает. Линейное движение всегда выглядит топорно и искусственно, незавершенно и не гармонично, оно сильно отвлекает.
Кстати. Движение в примере «Elastic Motion» так себе, оно не плавное. Потому что мы видим как приземляется объект и чувствуем что что-то «не так» Но, тем не менее, оно лучше чем линейное движение.
Учтите. Если неправильно использовать Easing юзабилити может и не вырасти. Например, если ваш тайминг слишком медленный или слишком быстрый, вы разочаруете пользователей и будете только отвлекать.
Easing – это мир возможностей. В нем есть просто бесконечное количество вариаций «сделать плавно» (добавить Easing), которые вы, как дизайнер, можете внедрять в свои проекты. Все они будут иметь свой отклик у пользователей. Подытожим: когда использовать Easing? Всегда.
Вы можете больше узнать про Easing в моей статье «The irony of usability and linear motion.’»
Принцип 2: Offset & Delay (Смещение и Задержка)
Этот принцип помогает подсказать пользователю связь объектов на сцене.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_7rRMvWTms2t7FnR0kyJN3g.gif&width=768&dpr=4&quality=100&sign=9385e90e&sv=1)
Offset & Delay — второй из всего лишь двух принципов UX в моушн, на который влияют Диснеевские принципы анимации. Я имею ввиду принцип «Follow Through and Overlapping Action».
Принципы Диснея приводят к «более привлекательным анимациям». Перекладывая их на анимацию пользовательского интерфейса, мы значительно улучшаем UX.
К примеру, принцип «Offset & Delay» подсказывает, что два верхних объекта – вместе, а нижний как-то связан с ними. Возможно, верхние два объекта могут быть неинтерактивным изображением и текстом, а нижний — кнопкой.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_CCRJjHIyq4PKECbmpUM3rA.gif&width=768&dpr=4&quality=100&sign=22efc469&sv=1)
Следите за плавающей кнопкой действия (floating action button — FAB). Она преобразуется в элементы навигации в шапке – три кнопки. И эти три кнопки – те же три точки внутри круглой кнопки.
Чтобы лучше показать этот эффект на деле, я покажу пример, который как раз нарушает принцип Offset & Delay.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_DJHXB3kDHesSwHxLYeJyFg.gif&width=768&dpr=4&quality=100&sign=9b6e51e&sv=1)
Разберем пример. Визуально мы сказали: “Есть иконки поверх фона”. Иконки отделены друг от друга и выполняют разные функции. Тем не менее, движение этому противоречит.
Иконки сгруппированы в строки и ведут себя как один объект. Их названия сгруппированы в строки, и также ведут себя как единый объект. Движение подсказываем пользователю, что все эти штуки делают примерно одно и то же. А по-факту, вводит в заблуждение, потому что все кнопки выполняют разные функции.
Объекты, которые ведут себя одинаково должны решать похожие задачи.
Принцип 3: Parenting (Связи и влияние)
Помогает показать влияние одного объекта на другой.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_AK-IvsnBGJFVwZnqxYjqrQ.gif&width=768&dpr=4&quality=100&sign=63382137&sv=1)
Parenting — это мощный принцип, который «связывает» объекты в пользовательском интерфейсе. В примере выше «масштаб» и «положение» верхнего или «дочернего» объекта подчиняются параметру положения нижнего, или «родительского» объекта.
Parenting — это связь параметров одного объекта с параметрами другого объекта. Это создает связи между объектами и иерархии объектов для поддержки юзабилити.
Parenting позволяет дизайнерам лучше координировать события пользовательского интерфейса во времени, передавая пользователям природу связей объектов.
Помните, что параметры объекта включают в себя масштаб, прозрачность, положение, поворот, форму, цвет и т. д. Любое из этих свойств одних объектов, может быть связано с любыми другими свойствами других объектов.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_vAAs4k5reIuVNx9KFoZCCw.gif&width=768&dpr=4&quality=100&sign=cb9525cc&sv=1)
В примере выше, смайлик в кружочке меняется в зависимости от того, какую позицию на шкале занимает ползунок. Смайлик делает рассказ нагляднее и помогает сориентироваться в оценке.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_oEKY3b97GnxizyVO2Bdglg-1.gif&width=768&dpr=4&quality=100&sign=da1724ef&sv=1)
Parenting лучше всего работает при взаимодействии «в реальном времени». Поскольку пользователь непосредственно управляет объектами интерфейса, дизайнер сообщает пользователю — через анимацию — как объекты связаны, и какая взаимосвязь между ними.
Parenting бывает 3-х видов: «прямое влияние» (как в двух примерах выше), «отложенное влияние» и «обратное влияние», см. ниже).
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_RsyF9JEfaM1evRFPmhMAjA.gif&width=768&dpr=4&quality=100&sign=e0b936ca&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_l2a36kW3kgkYgPZRfDqhog.gif&width=768&dpr=4&quality=100&sign=24a9776b&sv=1)
Принцип 4: Трансформация (Transformation)
Помогает плавно преобразовать объект из одного состояния в другое.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_3obIWzQMTkX74ndGcmW_eg.gif&width=768&dpr=4&quality=100&sign=d50fe0cd&sv=1)
Кажется это самый очевидный и заметный принцип анимации. Рассмотрим на примере.
Кнопка «submit», (см. ниже прим.ред) изменяющая форму, чтобы стать прогресс-баром и, наконец, снова изменить форму, чтобы стать меткой «checked» – трансформацию сложно пропустить. Трансформация захватывает наше внимание, рассказывает историю и завершает ее.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_JNE8gIhMViaL-Yri9SiCjg.gif&width=768&dpr=4&quality=100&sign=4f2746fc&sv=1)
Трансформация создает плавный переход пользователя от сцены к сцене или от сущности к сущности (в примере это кнопка → прогресс-бар → затем галочка). От точки старт в точку результат.
В трансформацию заложен принцип «chunking» (порционность). Каждая порция – содержит важный момент для UX. Схватывая каждую порцию, пользователь понимает, что все идет как задумано.
Принцип 5: Изменение значений (Value change)
Помогает создать ощущение актуальной информации.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_3IWEaIssuoLSu4U7Y-hdgQ.gif&width=768&dpr=4&quality=100&sign=59300504&sv=1)
Не секрет что, в интерфейсах цифры и текст, могут менять свое значение. Это настолько привычно, что пользователи даже не обращают на это внимания. Когда значения изменяются, пользователи чувствуют что интерфейс живой. Поглядите на dashboard.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_Ek1bbmWLyMJU5wQiMZCSJA.gif&width=768&dpr=4&quality=100&sign=b0acb886&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_fY2GeYo6Uj0l9qziupfn3Q.gif&width=768&dpr=4&quality=100&sign=22bccf7a&sv=1)
Когда данные в интерфейсе загружаются без «смены значений», пользователю кажется, что это статика. Как знаки на дороге, с ограничением скорости в 55 миль/ч, как правило или константа, которую уже не изменить.
В интерфейсе числа могут обозначать: время, доход, очки в игре, бизнес-метрики, фитнес-трекинг и т. д. За счет движения мы показываем, что значения свежие, только подсчитанные.
Числа поданные таким образом, вызывают у пользователей желание как-то повлиять на них. Например пройти еще пару шагов за сегодня, чтобы фитнес-браслет сказал «молодец».
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_FmT4vosDI453IK0aJbuW9Q.gif&width=768&dpr=4&quality=100&sign=55a70a49&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_2LB6MevUJaYZdRYg39T3Qw.gif&width=768&dpr=4&quality=100&sign=7a7cad72&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_TFFz9-Zl1UIUWRlc1rY11Q.gif&width=768&dpr=4&quality=100&sign=61555a85&sv=1)
Запомните. Этот принцип хорош как для взаимодействий в реальном времени, так и для пост-событий (например загрузка данных), когда мы хотим подчеркнуть актуальность данных с помощью анимации «смотрите мы только сделали свежий расчет».
Принцип 6: Маскирование (Masking)
Помогает сохранять контекст но изменять форму и положение объекта на экране.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_Ah_FBCcqm7YsqChgz-GYOA.gif&width=768&dpr=4&quality=100&sign=78e7171f&sv=1)
Маска знакома всем, кто уже делал визуальный дизайн. Только здесь ее нужно воспринимать не как состояние, а как действие в течение времени.
В один момент времени мы скрываем часть изображения, а в другой показываем его полностью. Маска помогает соблюсти принцип непрерывности и плавности за счет того, что отображается один и тот же контент.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_OSe67jIPfPzgaSODFaJ5gg.gif&width=768&dpr=4&quality=100&sign=69ba6209&sv=1)
В примере выше шапка меняет форму и положение и превращается в альбом. Но ее содержимое не изменяется. Маска помогает изменять объект и сохранять контент. Перед нами пост-событие переход – запускается после нажатия пользователем.
Принцип 7: Слои (Overlay)
Помогает предоставить доступ к слоям с доп. информацией и операциями.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_XCEmrzdTIbLt0a37pj0nBQ.gif&width=768&dpr=4&quality=100&sign=318fcb72&sv=1)
К примеру, это может быть колода карточек и нам нужно обеспечить их пролистывание с помощью жестов. Или когда нам требуется предоставить доступ к доп. опциями под карточкой контакта.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_g-MHVlWPL1RF1W4UZIk6Qg.gif&width=768&dpr=4&quality=100&sign=ffdbf2ae&sv=1)
В примере сверху объект на переднем плане съезжает вправо, чтобы показать объекты на заднем плане. В примере снизу вся композиция съезжает вниз, чтобы отобразить дополнительный контент и опции.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_KV5hGH2CVcPQ_e7dfpKsuw.gif&width=768&dpr=4&quality=100&sign=a836f66f&sv=1)
Принцип 8: Клонирование (Cloning)
Помогает плавно рождать новые объекты на сцене из текущих объектов.
Очень важно прозрачно вводить новые объекты на сцену и удалять существующие. Так пользователи будут схватывать законы по которым организована информация.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_UsnQMriM_Bjz480Ob70egg.gif&width=768&dpr=4&quality=100&sign=8c9b8b6c&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_2tUFeu74yCK-BhXjoTZrEQ.gif&width=768&dpr=4&quality=100&sign=44f5e5e1&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_knAuRUPJFue8Z-nvxH2bUQ.gif&width=768&dpr=4&quality=100&sign=d81200a7&sv=1)
Принцип 9: Затемнение (Obscuration)
Помогает увести контекст на задний план и сфокусировать пользователя на текущем действии.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_dYmhIISFfqIh-w5hMD8-aw.gif&width=768&dpr=4&quality=100&sign=11ab2854&sv=1)
Принцип 10: Параллакс
Помогает плавно перейти от одной сцены к другой и сохранить у пользователя ощущение единой картины.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_tVCAaCgws_1Q2u8ViQ6z6w.gif&width=768&dpr=4&quality=100&sign=1badfdb4&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_flKRcXTaSjJ9eyGAIIx4Aw.gif&width=768&dpr=4&quality=100&sign=f83cf79b&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_BssDbeOCt1sXpfkh2WxdKw.gif&width=768&dpr=4&quality=100&sign=693a184f&sv=1)
Принцип 11: Многомерность (Dimensionality)
Помогает придать плоским сущностям на экране объем и приблизить объекты цифрового мира к реальным объектам.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_f6MiFmeYfXqGim9Vo8ymwg.gif&width=768&dpr=4&quality=100&sign=5a542c95&sv=1)
Многомерность бывает в трех видах — оригами, плавающая многомерность и объектная многомерность.
Оригами
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_II33u0hSsLFblYSCQhfxMA.gif&width=768&dpr=4&quality=100&sign=eeb38b07&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_iZuMzfPgGwH_im_9Ofb5vg.gif&width=768&dpr=4&quality=100&sign=a1daa8d0&sv=1)
Пространство на плоскости
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_PhZLxUbjetc5nMgMv90qxg.gif&width=768&dpr=4&quality=100&sign=4b9972f4&sv=1)
3D-объект
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_ni2fxsm6pKMYQ6Jc75DzLw-1.gif&width=768&dpr=4&quality=100&sign=b7a319c9&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_yWhLvwAkVNoYaqmfzlxiYQ-1.gif&width=768&dpr=4&quality=100&sign=49f18c1f&sv=1)
Принцип 12: Приемы Dolly & Zoom
Помогает плавно переходить с дальнего плана на ближний.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_NwAD-XMtBzzY8n8c9NpXqg.gif&width=768&dpr=4&quality=100&sign=485cef&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_R9wPWQUu26wjibaTBUstqQ.gif&width=768&dpr=4&quality=100&sign=89814997&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_I4yZ2k1zeo3qc9qrbn0LDw.gif&width=768&dpr=4&quality=100&sign=b5297d56&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_XVtnYMrp8LhGJzcsF0Lw7Q.gif&width=768&dpr=4&quality=100&sign=f61c5376&sv=1)
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_o2ellGNN8CTJbwUoJ0ts8Q.gif&width=768&dpr=4&quality=100&sign=472e6bd1&sv=1)
Dolly — это киношный термин, обозначающий движение камеры ближе к объекту или дальше от него.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_8TYALn5P87i2OuuZfhfELg.gif&width=768&dpr=4&quality=100&sign=ef3e07c&sv=1)
Масштаб дает зрителю понять, что «внутри» объектов интерфейса находятся другие объекты.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Fux-journal.ru%2Fwp-content%2Fuploads%2F2018%2F09%2F1_I6-dXGCq9cXjAZGyVOkXrA.gif&width=768&dpr=4&quality=100&sign=8b3cb883&sv=1)
Это довольно мощный принцип для создания ментальных моделей.
Ура! Вот мы и дочитали статью. Надеюсь, все эти gif-ки не убили ваш браузер и помогли разобраться с принципами UX-анимации. Я рад, если этот пост поможет улучшить анимации в ваших дизайн-проектах.
Last updated