CC BY
77
Engineering sciences
УДК 37
РС! 10.21661/Г-530979 Юй С.
Научный руководитель: С.К. Ткалич
Роль и принципы дизайна анимации в пользовательском интерфейсе
Аннотация
Анимационные эффекты являются важной частью и незаменимым инструментом при разработке пользовательского интерфейса. В статье рассматривается роль анимации во взаимодействии, анализируются принципы проектирования анимации в интерфейсе и обсуждаются направления исследований анимации интерфейса.
I
Ключевые слова: пользовательский интерфейс, принцип анимации, дизайн взаимодействия, динамический дизайн.
Yu X.
Scientific adviser: S.K. Tkalich
Role and Principles of Animation in UI Design
Abstract
Animation effects are an important part and an indispensable tool in the development of UI. The article considers the role of animation in interaction, analyzes the principles of animation design in UI, and discusses directions for interface animation research.
I Keywords: user interface, animation principle, interaction design, dynamic design.
Введение
Пользовательский интерфейс состоит из таких элементов, как: - макет рамки;
- функциональные кнопки;
- цвета;
- значки;
- анимация;
- контент (текст и изображения).
Впечатления пользователей о программных продуктах или веб-страницах также основаны на сочетании и интеграции этих элементов. Для пользователей основная функция интерфейса представлена тем, что она помогает ориентироваться: как отображать контент, как интерпретировать контент, который пользователь не может увидеть или понять.
Анимация. Как элемент интерфейса анимация, естественно, должна помогать достигать эти функциональные цели. По сравнению со статичным текстом и изображениями форма анимации более выразительна и привлекательна.
Применение анимации в пользовательском интерфейсе имеет долгую историю, но ранее были ограниченные
технические условия, потому предыдущая анимация была более «простой» по форме. В последние годы быстрое развитие компьютерных аппаратных технологий, Интернета и мобильных интеллектуальных устройств заложило основу для применения анимации в пользовательских интерфейсах. В то же время ежедневный контакт людей с компьютерами и Интернетом становится все длиннее и длиннее, и они также предъявляют более высокие эстетические и эмоциональные требования к пользовательским интерфейсам, что делает анимацию все более важной в интерфейсах и, как следствие, в социальных коммуникативных взаимодействиях пользователей.
Общее понятие Роль анимации в пользовательском интерфейсе Как мы отметили выше, для пользователей основной функцией интерфейса является отображение контента и объяснение, как использовать функции. По сравнению со статичным текстом и изображениями форма анимации, очевидно, более привлекательна и убедительна.
Анимацию в пользовательском интерфейсе можно условно разделить на два типа: пассивную, классическую анимацию и интерактивную. Каждый тип ани-
Технические науки
мации отличается эффектами анимации. Уточним, чем они отличаются друг от друга.
1. Так, пассивная, классическая анимация не запускается пользователем, или запускается пользователем «косвенно».
2. Интерактивные анимации запускаются пользовательскими операциями. При этом эффекты анимации появляются в реальном времени.
Необходимо запомнить, что если два механизма запуска анимации различны, следовательно, их роли во взаимодействии также различны.
Пассивная анимация
Во многих случаях данные автоматически обновляются сайтом или системным фоном. Этот процесс не предполагает непосредственного участия пользователей, поэтому для привлечения внимания пользователей требуются привлекательные напоминания. Этот вид анимации часто можно сочетать со звуком для достижения наилучших результатов. Напоминания о сообщениях, такие как:
1) текстовые сообщения в iOS;
2) новые твиттер-напоминания Twitter
попадают в эту категорию.
Используйте пассивную анимацию, когда элементы интерфейса находятся за пределами интерфейса. Область на веб-странице является основной областью для чтения пользователями, и ее периферия может использоваться для размещения некоторого вспомогательного или дополнительного содержания.
Многие веб-сайты размещают на правой стороне страницы мигающие рекламные баннеры и используют внешнюю область для достижения бизнес-целей.
Следует отметить, что этот тип анимации часто мешает пользователю, и интенсивное использование не только серьёзно повлияет на восприятие пользователя, но также может оказать неблагоприятное влияние, делая всю периферию субъективно игнорируемой пользователем.
Интерактивная анимация
Мгновенная обратная связь является важной частью обеспечения пользовательского опыта в дизайне взаимодействия. Традиционная обратная связь приходит в виде текста, переходов или всплывающих окон. Например, обновление страницы после нажатия на ссылку на веб-странице и всплывающее окно с сообщением об ошибке в Windows XP.
Этот тип обратной связи является относительно простым, но ему также не хватает эмоционального общения с пользователем, особенно при передаче неправильной информации легко дать пользователю неприятное чувство (даже ожесточение).
Правильное использование интерактивной анимации может сделать обратную связь более естественной и даже интимной, а также помочь пользователям понять прогресс, причины или содержание.
Принципы проектирования анимации в пользовательских интерфейсах
Принцип 1. Учитывайте частоту анимации, слишком многократная будет мешать нормальной работе пользователя.
Важным фактором при рассмотрении динамического дизайна является частота одного посещения пользователя. Повторные анимации увеличивают время, необходимое пользователям для выполнения задач. Что должно быть ясно, так это то, что использование эффектов движения помогает пользователям лучше выполнять задачи, а не привлекать и удерживать всё внимание пользователей. Хотя эффекты многих анимаций хороши, но если пользователям придется «оценивать» эту анимацию снова и снова, им это надоест.
Мы суммируем общие задачи процессов в дизайне взаимодействия на три категории:
1 - есть только один важный шаг;
2 - есть несколько ключевых шагов;
3 - ключевой шаг повторяется непрерывно.
Когда поток задач относится ко второму типу, пользователю необходимо выполнить несколько шагов. В этом случае время анимации каждого ключевого шага не должно быть слишком длинным. Типичным примером является процесс регистрации учетной записи. Этот процесс должен заполнять много информации, поэтому динамическое время каждого поля ввода должно быть очень коротким, что не может вызвать задержки и повлиять на ввод пользователя.
То же самое верно для примера отправки текстового сообщения на мобильный телефон: вам нужно нажать на текстовое сообщение - отправить текстовое сообщение - найти адресную книгу - ввести содержание текстового сообщения - отправить его.
Третий поток задач относится к функции, которая используется пользователем несколько раз. Например, меню на веб-сайте или экран разблокировки на мобильном телефоне. Из-за требований к веб-страницам, чтобы адаптироваться к мобильным устройствам, таким, как мобильные телефоны, многие веб-страницы скрывают меню через «кнопки гамбургера», чтобы сэкономить место для чтения. Пользователи могут щелкнуть, чтобы развернуть меню и просмотреть элементы.
Этот дизайн взаимодействия на самом деле является компромиссным методом, он увеличивает нагрузку на память пользователя и этапы операций, поэтому он не подходит для настольных веб-страниц. Поскольку пользователю нужно смотреть на анимацию каждый раз, когда он переключает страницы, даже если анимация перехода разработана очень красивой, она будет раздражать пользователя после многих появлений.
Принцип 2. Учитывайте скорость анимации, адаптируйтесь к соответствующей сцене.
Скорость анимации прямо пропорциональна эффекту, который привлекает внимание пользователя. Поэтому при разработке анимации необходимо учитывать контекст, в котором появляется анимация, и какого эффекта она должна достичь.
Если информация, представленная анимацией, не находится в потоке текущей задачи пользователя, то анимация должна появляться в более медленной и более лёгкой форме, не перемещать положение, чтобы предотвратить прерывание обычной задачи пользователя.
68 Интерактивная наука | 4 (50) • 2020
Engineering sciences
Если информация, представленная анимацией, очень важна для пользователя и находится за пределами области фокусировки чтения пользователя, то может быть принята более быстрая и более драматичная форма, чтобы соответствующим образом привлечь внимание пользователя.
Принцип 3. Сделайте анимацию более естественной, используя законы движения.
Проектирование анимации по законам движения объектов в реальном мире может сделать анимацию более естественной. В частности, вы можете обратиться к законам движения, вызванным физическими свойствами, такими как гравитация, трение, инерция и эластичность, чтобы анимация не выглядела тусклой и механической.
Принцип 4. Оцените производительность устройства, чтобы обеспечить бесперебойное взаимодействие с пользователем.
При проектировании анимации необходимо учитывать несущую способность конечного устройства. Анимация не может использоваться для уменьшения беглости системы. Будь то веб-страница или системное приложение, она должна быть хорошо протестирована.
Для веб-страниц Flash-анимация - уже желтый цветок завтра, и больше не рекомендуется его использовать. По сравнению с CSS и Javascript производительность будет немного лучше, поэтому постарайтесь использовать как можно больше форм анимации CSS. Поскольку в Javascript есть много зрелых пакетов, его будет удобнее применять.
Заключение
Анимация не просто декоративный элемент для интерфейса и взаимодействия. Как инструмент дизайна анимация может показывать контент и направлять операции, которые могут повысить эффективность работы пользователя. Кроме того, анимация также является эффективным методом для улучшения изображения продукта, придания индивидуальности продукту, преодоления эмоциональной дистанции с пользователем и улучшения взаимодействия с пользователем. Особенно с быстрым развитием мобильного Интернета, режим взаимодействия человека с компьютером умных мобильных устройств также требует анимации.
Литература
1. Цай Ц. Цифровое выживание и гуманизированный дизайн // Украшение. - 1994.
2. Чжу С. «Исследование функции метафоры в графическом интерфейсе пользователя // Декорирование. - 2014. -№3. - С. 116-117.
3. Чэнь Х. Принципы дизайнерского искусства. - Ухань: Учебный центр Уханьского технического университета.
4. Лю Ш. Гуманистическая индустрия промышленного дизайна для современных продуктов // Тенденции дизайна. - 2001.
References
1. Cai, J. (1994). Digital Survival and Humanized Design. Decoration.
2. Zhu, X. (2014). "Research on the role of metaphor in graphical user interface. Decoration, 3, 116-117.
3. Chen, H. Principles of Design Art. Wuhan: Wuhan University of Technology Textbook Center.
4. Liu, Sh. (2001). Humanistic Care Industrial Design for Modern Products. Design Trends.
