Анимация: пружины

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

Рассмотрим знакомый пример. Нажатие кнопки вызвало ошибку, и теперь задача состоит в том, чтобы человек понял, что случилось (A) и как действовать дальше (B).

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

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

Испытательная площадка

Поиграйтесь с анимацией: настройте длительность, количество и силу колебаний по всем направлениям.

Длительность:

Движение горизонтали:

Движение по вертикали:

Вращение:

Изменение размера: