Graphics, Animation, Web design

Evolution of animation in user interface design: from decoration to functional communication

УДК: 004.51
Шифр научной специальности: 5.10.3
DOI: 10.47055/19904126_2026_2(94)_27
EDN: XSFLQQ
Type: RAR Scientific

Abstract

Введение

Эволюция цифровых интерфейсов представляет собой сложный процесс взаимовлияния технологических возможностей, когнитивных моделей пользователей и дизайн-практик. Важно подчеркнуть, что история интерфейсной анимации не сводится к истории веб-дизайна. Первые примеры целенаправленного использования движения для обратной связи появились в настольных графических интерфейсах (GUI) еще до массового распространения Веба. Анимация как декоративный элемент, изначально использовавшаяся как маркер технологической продвинутости, претерпела фундаментальную трансформацию, став семиотически нагруженным языком интерфейсной коммуникации. Современный этап развития характеризуется сдвигом парадигмы от анимации-украшения к анимации-коммуникатору, выполняющей конкретные задачи в пользовательском сценарии, что согласуется с принципами функциональной анимации, систематизированными в работах последних лет [1].

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

Цель данного исследования – выявление и систематизация ключевых этапов эволюции анимации в пользовательских интерфейсах, а также анализ смены дизайн-парадигм под влиянием технологических и когнитивных факторов. Для достижения цели решались следующие задачи: 1) провести периодизацию развития интерфейсной анимации с учетом разных типов интерфейсов (GUI, веб, мобильные); 2) проанализировать изменение ее функциональной роли на каждом этапе; 3) рассмотреть влияние теоретических работ (диссертаций, статей) на формирование современных принципов; 4) выявить перспективные направления развития.

Методы

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

● Сравнительный анализ дизайн-подходов, технологий и результатов пользовательских исследований в различные хронологические периоды.
● Контент-анализ ключевых научных работ, диссертационных исследований (Сергин Р.П., Корзина М.И.) и статей (Малахов Ю.А., Галанова И.С., Чжан Синьюй, Wolowelsky Y. и др.) для выявления доминирующих концепций и терминов.
● Обобщение и систематизация выявленных тенденций в рамках предложенной периодизации.

В результате исследования выделены четыре ключевых этапа эволюции пользовательских интерфейсов:

1. Зарождение микроанимации и GUI-метафор (1980-е – середина 1990-х гг.). В ранних настольных интерфейсах (Mac OS, Windows) анимация выполняла важную когнитивную функцию. Именно в 80-е с выходом первых коммерческих систем (например, Apple Lisa в 1983, Macintosh в 1984) начали использоваться простейшие анимации, такие как мигающий курсор, открытие окон или перемещение иконок, что уже являлось функциональной микроанимацией. В середине и конце 1980-х произошло развитие компьютерных технологий, которое позволило добавлять более сложные элементы визуальной обратной связи. В этот период анимация стала использоваться для индикации «занятости» системы (например, часы или песочные часы). Игровая индустрия. В 1980-х гг. активно развивалась компьютерная графика, что привело к появлению анимации в интерфейсах видеоигр, где микроэлементы (подсветка, выбор) были необходимы для взаимодействия пользователя с игрой.

Рис. 1. Пример интерфейса 1980-х – середин 1990-х гг. – Macintosh

2. Эпоха «динамического веба» и Flash (конец 1990-х – конец 2000-х гг.). С распространением Веба 1.0 и затем Веба 2.0, анимация пережила период технологической и стилистической дифференциации. С одной стороны, в стандартном HTML/CSS/JS окружении анимация оставалась ограниченной и часто фрагментарной (анимированные GIF-баннеры, мигающие кнопки), что породило критику отвлекающего «бесплатного сыра» [3]. С другой стороны, технологии Adobe Flash (и его предшественника FutureSplash Animator) и, позднее, Microsoft Silverlight и ранний SVG (масштабируемая векторная графика) позволили создавать принципиально иной опыт. Flash давал возможность реализовывать сложные, синхронизированные со звуком, векторные анимации, полноэкранные интрозаставки и даже полноценные веб-приложения с плавной анимацией, что было невозможно в «чистом» HTML. Именно Flash сформировал язык «динамического веба», где анимация была не просто обратной связью, а частью нарратива и брендинга [4]. Однако эта технология была проприетарной, создавала проблемы с доступностью и SEO, что в итоге привело к ее упадку.

В этот же период активно развивалась анимация в GUI настольных и мобильных (первые КПК) операционных системах: появление тем, анимированных курсоров, заставок и сложных визуальных эффектов (например, Windows 95/98). Тем не менее, проблема заключалась в технологической разрозненности: подходы к анимации сильно различались в разных средах, что затрудняло создание единой теории.

Рис. 2. Интерфейс сайта, полностью выполненного во Flash с характерной сложной векторной анимацией
и нестандартной навигацией. FutureWave Software in 1996. – Источник: Web Design Museum

3. Функционализация и стандартизация (2010-е гг.). С распространением смартфонов и стандартизацией CSS3/JavaScript, а также с отказом от Flash (Apple не поддержала его на iPhone), произошел парадигмальный сдвиг. Анимация стала универсальным, кросс-платформенным инструментом решения утилитарных задач: обеспечение непрерывности контекста, визуализация причинно-следственных связей, предоставление обратной связи. Этот период окончательно утвердил микроанимацию как стандарт де-факто для всех типов интерфейсов: от веб-сайтов до мобильных приложений. Технологии CSS-переходов (transitions) и CSS-анимации (keyframes), а также мощные JS-библиотеки (jQuery, затем GreenSock) сделали анимацию доступной и производительной. Работа Ю.А. Малахова и Галановой И.С. систематизировала эргономические принципы, выделив такие ключевые функции анимации, как: указание на изменение состояния объекта, демонстрация результата действия пользователя и структурирование информации во времени [5]. Этот период утвердил микроанимацию как стандарт. Y. Wolowelsky подчеркивает, что эффективная интерфейсная анимация должна быть целенаправленной, служить ясной функциональной цели и улучшать общее понимание системы пользователем [6].

Рис. 3. Пример состояний компонентов интерфейса: UI Microinteractions – Interactive Components. 2018.
Источник: Figma Community

4. Коммуникативная и предиктивная анимация (2020-е гг.). Сегодня анимация осмысляется как полноценный язык коммуникации в интерфейсе. В диссертации Р.П. Сергина развивается концепция коммуникативной анимационной графики, где движение выступает семиотической системой, передающей сложные смыслы и состояния, аналогично невербальной коммуникации [7]. Чжан Синьюй акцентирует внимание на дизайн-принципах оптимизации, связывая параметры движения (длительность, кривые Bezier) не только с эстетикой, но и с восприятием производительности системы и формированием доверия [8]. Анимация становится предиктивной (предвосхищающей действия) и иммерсивной, создавая иллюзию глубины и материальности. Принципы функциональной анимации, сформулированные R. Ávila Muñoz, J. Clemente Mediavilla и M.J. Pérez-Luque Maricalva, непосредственно связывают характеристики движения с конкретными задачами в пользовательском сценарии, такими как наведение порядка, направление внимания и установление причинно-следственных связей [1]. Развитие no-code/low-code платформ демократизирует доступ к созданию сложной анимации, позволяя дизайнерам воплощать теоретические принципы без глубокого погружения в код, что ускоряет итерационный процесс проектирования.

Рис. 4. Пример эффекта параллакс при скролле: Parallax scrolling website design. 2024. 
Источник: Figma Community

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

Генеративное создание и параметризация. ИИ-алгоритмы позволяют создавать сложные анимационные последовательности на основе примеров (example-based) и параметрических моделей, что существенно расширяет творческий инструментарий дизайнера и сокращает время на рутинные операции [9]. Это позволяет автоматизировать создание вариативных, но стилистически выдержанных анимационных сценариев для больших дизайн-систем.

Интерактивная совместная творческая среда. Развитие систем знаменует переход к совместному творчеству дизайнера и ИИ. В таких средах генеративный ИИ не только создает визуальные эффекты по текстовым или эскизным промптам, но и предоставляет разработчику понятное объяснение сгенерированного кода, способствуя лучшему пониманию принципов реализации и обучению [10]. Это снижает порог входа для создания профессиональной анимации и стирает грань между прототипированием и финальной реализацией.

Рис. 5. Пример совместной работы ИИ и человека, на примере диалогового окна Uizard

Современный дизайнер при проектировании пользовательских интерфейсов должен интегрировать эргономическую целесообразность [5], коммуникативную семантику [7], оптимизацию восприятия [8] и функциональную целенаправленность [1, 6]. Вызовом остается баланс между выразительностью и доступностью (включая требования WCAG – Руководства по обеспечению доступности веб-контента), а также производительностью интерфейса: скоростью загрузки, плавностью анимации и отзывчивостью.

Выводы

Проведенный анализ позволяет выявить ключевые драйверы эволюции:
● Технологический – от ранних микроанимаций в GUI и проприетарных решений (Flash) к открытым веб-стандартам (CSS3/JS), мощным графическим библиотекам и ИИ-генерации.
● Когнитивно-эргономический – от осознания вреда отвлекающей анимации к научному обоснованию ее полезности для восприятия и построения ментальных моделей.
● Профессионально-методологический – от фрагментарных «эффектов» к системным принципам проектирования, закрепленным в научных трудах. Совместное действие этих драйверов привело к четко различимым результатам в исторической ретроспективе и определило текущие тренды:

1. Эволюция анимации в UI прошла четыре этапа: от зарождения микроанимации в GUI (1980–1990-е), через эпоху технологической дифференциации и Flash (конец 1990-х – 2000-е), этап функциональной стандартизации (2010-е) к современному коммуникативно-предиктивному этапу (2020-е).

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

3. Основными векторами дальнейшего развития являются: углубление интеграции с предиктивными интерфейсами и искусственным интеллектом (генеративное создание, параметризация, интерактивные ко-творческие среды) [9, 10], развитие принципов accessible motion design, а также создание основ для нейроадаптивных анимированных интерфейсов.

References

1. Ávila Muñoz, R., Clemente Mediavilla, J. and Pérez-Luque Maricalva, M.J. (2020). Principles of Functional Animation in Interface Design. UDIT International Journal of Science Value. Available at: https://sciencevalue.udit.es/cgi/viewcontent.cgi?article=1061&context=articulos_cientificos 

2. Hilbrand, T. (2021). How Animation in User Interfaces can Affect HCI. Bachelor's thesis. Hamburg: HAW Hamburg.

3. Malakhov, Yu.A. and Galanova, I.S. (2021). Ergonomic Principles of User Interface Animation Construction. Sovremennye nauchnye issledovaniya i innovatsii, No. 12. Available at: https://naukaru.ru/ru/nauka/article/36677/view . (in Russian)

4. Korzina, M.I. (2014). Design technology of website development. Candidate of Arts dissertation. Saint-Petersburg, Russia. (in Russian)

5. Sergin, R.P. (2022). Design of communicative animation graphics: principles and methods of design. Candidate of Arts dissertation. Moscow, Russia. (in Russian)

6. Zhang Xinyu (2023). Animation in Graphical Interfaces: Optimization, Efficiency and Design Principles. Kul'tura i iskusstvo, No. 8, pp. 94-105. [Online] Available at: http://publishing-vak.ru/file/archive-culture-2023-8/a13-zhang-xinyu.pdf. (in Russian)

7. Wolowelsky, Y. (2021). The Impact of Animation in User Interface Design. Bachelor's thesis. Helsinki: Metropolia University of Applied Sciences.

8. Wang, Y., Han, P. and Yang, B. (2022). An Intelligent Animation Interaction Design Algorithm Based on Example and Parameterization. Computational Intelligence and Neuroscience, Vol. 2022, Article ID 2800784. Available at: https://pmc.ncbi.nlm.nih.gov/articles/PMC9334100/  DOI: https://doi.org/10.1155/2022/2800784 

9. Zhu, Y., Ma, X., Sun, M. et al. (2025). AnyAni: An Interactive System with Generative AI for Animation Effect Creation and Code Understanding in Web Development. arXiv preprint. Available at: https://arxiv.org/html/2506.21962v1 

Citation link

Kolesnikov N.S., Belko T.V. Evolution of animation in user interface design: from decoration to functional communication //Architecton: Proceedings of Higher Education. – 2026. – №2(94). – URL: http://archvuz.ru/en/2026_2/27/  – DOI: https://doi.org/10.47055/19904126_2026_2(94)_27 

© Kolesnikov N.S., Belko T.V. 2026
Лицензия Creative Commons
Это произведение доступно по лицензии Creative Commons "Attrubution-ShareALike" ("Атрибуция - на тех же условиях"). 4.0 Всемирная