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

Автор оригинала: 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 без анимации, то представьте, что они могут придумать с ней.
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 19

    0
    Я такие вкусные эффекты по демосценерской привычке называю eye-candy.
      +6
      "eye-candy" всё-таки семантически является чисто "визуальным" комплиментом.
      а "squash and stretch" оживляет и очеловечивает любой интерфейс при самых скупых графических возможностях (хоть в текстовом режиме), так как рассчитано на особенности восприятия человеком окружающих объектов с опорой на предыдущий опыт.

      предположим, у нас есть прямоугольное (информационное/модальное) окно, которое должно вылететь из-за границ экрана, скажем сверху. возможны несколько вариантов решения:

      1) самый отвратительный и неестественный: окно с постоянной скоростью выезжает из-за границ экрана. мгновенно останавливается в заданном месте. затем также, с постоянной скоростью улетает.
      Именно такой эффект реализован в Firefox, как уведомление об окончании загрузки. Тут сразу несколько ошибок: ни один обьект в реальном мире не движется прямолинейно и с постоянной скоростью (обьекты разгоняются и тормозят). Ни один обьект в реальном мире не останавливается мгновенно - перед остановкой он замедляется. Именно по-этому данный эффект так неприятен: невозможно предугадать где остановится окно, так-как оно не замедляется. Неприятно смотреть как прямолинейно и с одинаковой скоростью "летит" окно. В лучшем случае возникают ассоциации с ползущим слизнем или улиткой, так как только они двигаются с такими скоростями, на которых ни ускорение, ни замедление - не ощущается. Весь look&feel летит в тар-тарары.

      2) второй вариант: окно на высокой скорости вылетает из-за границ экрана. затем резко замедляясь (по масштабированному графику y = (1-sin(x)), при x=(0 -> pi/2)) останавливается. Затем, с ускорением улетает.
      Уже гораздо лучше, движение хоть и прямолинейное, но совершается с ускорением/замедлением, что позволяет определить район остановки окна, что гораздо ближе к реальному миру и к реальным обьектам. Однако остаётся несколько неучтённых моментов: обьект движется по прямолинейной (вертикальной) траектории, у его расположения изменяется только одна координата, в жизни так не бывает.

      3) "идеальный" вариант: окно вылетает на высокой скорости из-за границ экрана, при этом у него изменяется не только координата y, но и координата x (в соотношении 1 к 10 или 1 к 15), затем замедляется, почти останавливается, но "промахивается" мимо целевых координат на 2-3 пикселя по ходу движения, затем переходит в систему координат связанную с целевыми координатами и по промасштабированной затухающей косинусоиде встаёт на место. Вот это и будет тот самый "Squash and Stretch".

      Скоростью затухания и частотой колебаний можно изменять такие условные характеристики эффекта как "исполнительность" и "упругость". Например окно может промахнувшись вальяжно встать на место (низкая частота и высокая скорость затухания). А может суетливо подёргавшись "выслужиться" (высокая частота + средняя скорость затухания).

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

        Ну да ладно. Эффекты IMHO хороший инструмент для одружествления GUI.
        +1
        Регулярно применяю основные принципы анимации при создании флеш-анимашек, интерфейсов и прочей дребедени. К слову, один из ведущих аниматоров студии Диснея как-то отлично описал все прелести этого дела. Рекомендую... :)
          0
          хабракат не помешает :)
          • НЛО прилетело и опубликовало эту надпись здесь
              +1
              Эппловцам плюс за чувство меры, за использование это дела с умом. Сейчас железо позволяет делать почти что угодно. В том же Бериле этого анимационного добра - хоть чем ешь, желание поразить явно победило хороший вкус и здравый смысл.

              И интересно, причем здесь вообще Pixar? С таким же правом можно на кота Феликса, Микки Мауса или "Ну, погоди" ссылаться.
                +2
                Ну просто Pixar и Apple сотрудничают тесно и у них один директор -Джобс.
                  0
                  Т.е. аниматоры Пиксара в свободное от работы время обучают дизайнеров Эппла этому бородатому приему. А Хосе Мауриньё вечерами тренирует заводскую команду Сибнефти :-)
                    0
                    или в Челси сейчас Грант? Не суть...
                      0
                      Возможно, почему бы и нет )
                  0
                  Шикарно! Реально я это все ощутил, когда приобрел iPod Touch! ^_^
                    0
                    Хотелось бы посмотреть на то, о чём вы говорите (хотябы видео).
                    • НЛО прилетело и опубликовало эту надпись здесь
                        +1
                        Вот именно. НАДОЕДАЮТ. А Apple'вские Дизайнеры умудряются сделать так, чтобы они не то чтобы надоедали, а наоборот — без них казалось бы неправильным всё.
                        Ни в Tiger ни в Leopard мне ни разу не пришла мысль отключить какую-либо анимацию — пока всё гармонично...
                        2 Alaska: В Leopard очень забавна сделана (по своему революционная?) подсветка пункта меню, находимая через поле поиска в справке.... брр... кто видел тот поймет короче :)
                          0
                          Всему своё время. Поддержка всех этих эффектов появилась ещё в NextStep'овском железе, в Mac OS 10.0 хотелось кого-то убить, до того они отвлекали, но постепенно всё было приведено в рабочее состояние и выглядит красиво и отключать не хочется (хотя в MacOS хватает других проблем, так что использовать её для реальной работы я не могу, но проблема не в графических спецэффуктах нынче). Compiz же фактически только начинает: многие разработчики всё ещё думают на тему "а оно нам нада?" (ибо работает не на всех видеокартах, на nVidia приходится использовать самые новые драйвера, etc). Со временем отшлифуют...
                            0
                            Конечно отшлифуют. Но и Apple надеюсь на месте сидеть не будет. Их новый Core Image уже впечатляет, хотя совсем не исследованный — софта, использующего ее на всю катушку, пока нет (ибо оно появилось только в Leo). Я на вскидку сейчас только «резалку» Disco вспомню.
                        0
                        Если не ошибаюсь, эффект относится больше к изменению персонажа (вытягиванию, сжатию) во время различных действий, таких как прыжки, бег и т.п., чем к "залипающему" носу.

                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                        Самое читаемое