Как стать автором
Обновить

Дизайнеры пользовательских интерфейсов Apple практикуются в Pixar?

Время на прочтение 2 мин
Количество просмотров 780
Автор оригинала: Watching apple
Анимация Squash and Stretch в пользовательском интерфейсе Apple

Дизайнеры, разрабатывающие в Apple пользовательские интерфейсы, научились привлекать внимание пользователей при помощи техники, которая называется Squash and Stretch (дословный перевод «сжать и растянуть»). Эффект, как в мультике, когда у персонажа расплющенный нос после удара о стену вдруг возвращается в исходное состояние – это и есть squash and stretch. Аниматоры десятилетиями используют этот эффект для придания нарисованным персонажам глубины. Ну и плюс ко всему это смешно.

В Tiger iChat использует тот же эффект для того чтобы показать вам, что кто-то с вами только что поздоровался. Когда в iChat появляется окошко-приглашение о том, что кто-то хочет с вами пообщаться, оно сначала маленькое, потом «раздувается» до большого размера, потом хлоп… и оно становится нормального размера. Вот этот последний «хлоп» и есть squash and stretch в действии и происходит все очень быстро – практически незаметно. Эффект отдаления похож на то, как будто кто-то наклоняется к вам, его лицо кажется больше, а потом вдруг снова уменьшается.

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

Эффект squash and stretch в Леопарде

Анимационный эффект squash and stretch появляется в Леопарде повсеместно. Почта автоматически выделяет даты, адреса и телефонные номера, когда получает письмо и выдает их в небольшом всплывающем меню с возможностью настройки. Если выбрать «Добавить контакт» или «Создать новый», iCal открывает миниатюрное окно редактирования с похожим приближением как и у iChat.

Тоже самое для настроек «Mail’s To Do»: при нажатии на стрелку рядом с элементом «To Do» окно настроек появляется с эффектом squash and stretch.

И кажется, что в новой функции Леопарда «Stacks» используется тот же эффект.

Эффект squash and stretch в iPhone

При просмотре Google Map в iPhone/iPod touch сверху появляются небольшие булавки и приземляются на карте. В момент приземления, они немного «погружаются» в карту, а потом снова вытягиваются на всю свою длину. А когда появляется указатель местности, он тоже немного растягивается при появлении, а потом становится нормального размера. И то и другое – эффект squash and stretch в движении. И в том и другом случае выглядит это очень эффектно и весело.



Кажется, что анимация открывает новые возможности для дизайнеров. В окне «Log In» используется очень изящная анимация для обозначения того, что произошла ошибка в логине или пароле. Анимация расширяет границы для дизайнеров Apple, и позволяет им искать очень интересные и необычные решения. Ну и не надо забывать о том, что анимация придает живость и разнообразие дизайну как таковому.

Посмотрим, что еще придумают разработчики. Если им удалось сделать что-то подобное CoverFlow без анимации, то представьте, что они могут придумать с ней.
Теги:
Хабы:
+29
Комментарии 19
Комментарии Комментарии 19

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн