Скотт Хёрф - Как создать продукт, который полюбят

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

В конце концов, мы живем в мире движения. Движение – это история о том, как существуют вещи, как они перемещаются из одного места в другое.

Джонатан Бадин говорит об этом так:

Анимации рассказывают историю. Она может быть о том, как и почему появился или исчез элемент или как вы перешли от одного экрана к другому. Истории создают эмоции, поэтому я считаю, что, рассказав хорошую историю, вы автоматически их пробудите. В каждой истории есть действующие лица, мы хотим, чтобы их представили, хотим знать, что с ними происходит. Думая так об элементах на экране, вы помогаете себе правильно выстроить элементы перехода снаружи и внутри, а также между экранами. Когда это имеет смысл, я пытаюсь включить действующее лицо между сценами. В Tinder это легче всего заметить в переходах между стопкой карт и профилем, когда мы пытаемся сделать так, чтобы карта, по меньшей мере частично, переходила в профиль (рис. 7.28). Это, надеюсь, позволяет пользователю понять, что если он кликнул на фотографию, чтобы открыть профиль, то он может сделать обратное и закрыть профиль.

Рис. 7.28. Закрытая и открытая анимации Tinder превращают фотографию в карту с полным профилем, сообщая, что одним нажатием два вида просмотра доступны

Сравните этот пример с примером Паскуале ДаСилва из Elepath – безумно прекрасные «Переходные интерфейсы» (рис. 7.29).

Рис. 7.29. Паскуале ДаСилва из Elepath показывает, как анимация способна имитировать реальную жизнь и помочь понять, что происходит на экране

ДаСилва говорит:

Для того чтобы добавить новый элемент, список должен освободить для него место, и после этого новый элемент заполняет пространство. Так гораздо меньше дисбаланса. Мягкая анимация обыгрывает изменения, что воспринимается более естественно, потому что мы имеем контекстный аналог – зеркальное отображение того, как вы бы добавили нечто к пачке вещей в реальной жизни! [169]

На самом деле это просто. Подражание реальной жизни помогает нашему мозгу лучше понять, что происходит. Это «иллюзия жизни».

Кстати, именно так [170]называется самая большая книга об анимации. Ее авторы – аниматоры компании Disney Олли Джонстон и Фрэнк Томас [171].

Эти два парня – легенды. Томас присоединился к Disney в 1934 году, а Джонстон – в 1935 году. Они работали с самим Уолтом и анимировали множество персонажей: от Белоснежки до Спасателей.

Их книга стала итогом 50 лет работы аниматорами в Disney. Опираясь на опыт работы над 23 анимационными фильмами, они сформулировали «12 принципов анимации» [172]. В чем же их цель? В том, чтобы отразить эмоции и подчеркнуть индивидуальность персонажа.

Результат? Правдоподобное движение на экране и персонажи, которые казались реальными и, как следствие, стали запоминающимися (рис. 7.30).

Рис. 7.30. Белоснежка оживает благодаря невинным радостным движениям

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

Давайте рассмотрим несколько принципов анимации и проанализируем, какую роль они играют в создании продуктов.

Джонстон и Томас написали, что важно повторять реалистичное движение, и назвали это принципом «замедления внутрь и наружу». Этот принцип аналогичен компьютерной версии «легкий вход и легкий выход» [из анимации]. Для движения объектов в гравитационном поле Земли характерны периоды ускорения и замедления. Смысл этого явления для анимации в том, что у начальной и конечной позиции должно быть больше кадров, а в середине – меньше. Дополнительные кадры смягчают действие в начале и конце, чтобы имитировать реалистичное движение.

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