УДК 74

Анимация и её применение в дизайне интерфейсов

Лебедев Игорь Вячеславович – магистрант кафедры Дизайна Тульского государственного университета.

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

Ключевые слова: Интерфейс, дизайн, взаимодействие, анимация, интерактивность.

Графический интерфейс пользователя, (далее ГПИ, англ. Graphical user interface, GUI) — одна из разновидностей пользовательского интерфейса, в котором его составляющие (знаки, кнопки, таблички, меню и т. п.) выполнены в виде графических изображений (иконок, панелей и т.д.).

Первый ГПИ в 70-х годах разработали в Xerox Palo Alto Research Center (PARC), благодаря исследованиям которые еще в 60-е годы проводил Даг Энгельбарт в институте Стэнфорда. Этот интерфейс применялся только для научных исследований. С течением времени ГПИ начали поддерживать работу в режиме многозадачности, работали с иконками, а такжецветную графику, обычно 3 цвета: белый, черный, синий.

Сегодня ГПИ является одним из самых распространённых видов интерфейса. Он применяется в устройствах с такими системами как windows, IOS, Linux, Andriod, а так же в веб-сайтах и других приложениях.

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

Существует проблема восприятия анимации, ее применяют как средство демонстрации продукта, хотя на самом деле анимацияиграет огромную роль, она помогает находить правильные ориентиры в окружающей действительности. Её основная цель— помогать пользователю. Соответственно во многих случаях встает вопрос: «А применяется ли анимация по назначению?». Получить ответ на него можно,если проанализировать взаимодействие всех частей продукта.

Раньше дизайнеру нужно было только создавать бросающиеся в глаза сайты, рекламу, интерфейсы и другие продукты. Они не всегда были практичными и удобными, так в 1990 и 2000-х годах одним из инструментов дизайна интерфейсов для веб (не только) был флэш. На нем создавалось много сайтов и приложений, флэш сильно влился в разработку, появлялось много никому не нужной анимации и рекламы, которая не помогала пользователю, а только мешала ориентироваться. В 2012 году флеш практически перестал использоваться из-за переизбытка интерактивности, которая вела к неудобству использования. Однако сейчасфлеш снованачинает набирать популярность, благодаря таким продуктам, в которых анимация используется на благо пользователя. Она не навязывает пользователю, что-либо, а помогает ориентироваться как в небольших, так и в огромных объемах информации спрятанных за интерфейсом продукта.

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

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

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

Можно выделить несколько способов применения анимации:

1. Привлечение внимания человека.

2. Демонстрация.

3. Пояснение, какой либо нестандартной навигации.

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

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

Для чего же все-таки нужна анимация? Она не всегда в деталях показывает какой-либо реальный процесс, но заимствуют лишь какую либо часть процесса. Анимация при правильном использовании повышает уровень доверия к интерфейсу, создавая некую стабильность, предсказуемость, которая ожидается от реального объекта. При этом не обязательно создавать полную достоверность, достаточно воспроизвести какой либо красочный аспект реального действия, подав его наиболее читаемым и удобным образом. Чем более преувеличенной будет анимация по сравнению с реальным аналогом, тем более «живой» она будет восприниматься, но в то же время и более «мультяшной», несерьезной. Именно так описаны «12 базовых принципов анимации», сформулированных художниками-мультипликаторами студии Walt Disney Ф. Томасом и О. Джонстоном в книге «Иллюзия жизни». Некоторые приемы как, доводка (follow through), упреждение (anticipation), движение по дуге (arcs) позволяют придать анимации движения выразительность и создать иллюзию подчинения законам физики.

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

Список литературы

1. Jenifer Tidwell, Designing Interfaces. СПб, 2008. — 416 с.

2. Thomas F., Johnston O. The Illusion of Life: Disney Animation. New York, 1995. — 548 с.

3. Гультяев А.К., Машин В.А. Проектирование и дизайн пользовательского интерфейса . Учебное пособие. - СПб.: Корона-Принт, 2007. - 239 с.

4. Richard Williams, The Animator’s Survival Kit. Faber s Faber, New York, 2001. — 305 с.