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

Приложение Qik (Skype) (рис. 7.31) – отличный пример добавления в пользовательский интерфейс компонента с воображаемой массой. Моделируемое сопротивление дает ощущение веса, которое не удивляет человека, когда появляется меню. Кроме того, по вектору движения понятно, где оно возникло.

Рис. 7.31. Приложение Skype Qik в движении

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

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

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

Мне очень нравится, как этот принцип был представлен в меню Keezy (рис. 7.32).

Рис. 7.32. Keezy использует «следование и нахлест»

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

Я интерпретирую этот принцип двумя способами.

Быть конкретным.Не тратить слишком много времени на анимацию элементов пользовательского интерфейса в поле зрения. На собственном опыте я понял, что любая анимация дольше 0,2 секунды ощущается как слишком длинная.

Двигаться должно только то, что имеет значение.Отвлечение клиента слишком большим количеством элементов в поле зрения только умаляет эффект.

В руководстве по дизайну от Google – Google Material Design – есть отличный пример, воплощающий этот принцип, – «Иерархическая синхронизация» [173](рис. 7.33).

Рис. 7.33. Какая часть этой истории самая важная? Иерархическая синхронизации Google воплощает принцип анимационной «постановки», чтобы обозначить приоритет

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

Движение – довольно захватывающая перспектива в продуктовом дизайне. И еще более захватывающей ее делает состояние наших инструментов, ведь даже с Quartz Composer, Framer.js, InVision или Keynote по-прежнему очень трудно создать полностью оригинальную анимацию и переходы, соответствующие цели продукта.

Другими словами, все-таки очень трудно создать оригинальную анимацию, которая не мешала бы сценариям, существующим в продукте. Но, руководствуясь 12 принципами анимации, можно сократить время, потраченное на пробы и ошибки, и сосредоточить свои усилия на движении.

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

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

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

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

• Практически всегда при разработке дизайна продукта есть особые сценарии, по которым вы стремитесь направить пользователя в конкретный момент времени. Здесь-то и нужны циклы. Для того чтобы цикл был действительно эффективным, он должен проникать в разум клиента, успешно меняя его поведение, и по этому пути стоит идти, так как отдача будет колоссальной.