Восхитительные анимации |

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

Изменение рамки и/или цвета кнопки на touchDown

Обычно мы ставим действие кнопки на touchUpInside и причина этого в том, чтобы дать пользователю шанс передумать. Но выполняемое физическое действие — это фактическое прикосновение к кнопке, которое обрабатывается touchDown. На этом этапе мы можем заставить пользовательский интерфейс реагировать на действия пользователя, чтобы сообщить ему что-то. делал случиться, изменив внешний вид.

Однако не переусердствуйте с этим. Я бы начал со шкалы 0.97задний фон alpha изменить на 0.85а borderWidth увеличение 1 или же 2, или сочетание двух из них — больше двух будет слишком агрессивно. Отсюда у вас есть много других вариантов, и среди них: увеличение масштаба, y изменение положения, добавление легкой тени, анимация «покачивания», пока кнопка удерживается нажатой (как если бы кнопка спрашивала Я получил твое прикосновение, что теперь?), увеличение веса шрифта или изменение цвета фона.

Этот вид анимации не должен выделяться; его единственная цель — внести приятный последний штрих и дать пользователю информацию о том, что что-то делал случаться.

Добавление в корзину или подобное

Точно так же, как Apple анимирует действие добавления закладки в Safari, то же самое можно сделать и при добавлении в корзину. Направьте взгляд пользователя туда, где его действие произвело эффект — на кнопку корзины. Если у вас есть значок (скорее всего), анимируйте его масштаб, например, с хорошим эффектом отскока. Или, как это делает Apple, анимируйте всю иконку и, возможно, элемент «в нее».

Это, опять же, служит приятным завершающим штрихом и заставляет пользовательский интерфейс реагировать на действия пользователя, но также служит «вот куда двигаться дальше». Это помогает пользователю ориентироваться в том, что произошло, а также куда изменение произошло. Вы можете сказать: «После добавления в корзину 15 раз пользователь будет знать, где его искать», и вы будете правы; но подтвердить это не помешает.

Призыв к действию

При правильной иерархии кнопка призыва к действию уже должна выделяться. Но иногда это невозможно или недостаточно. Таким образом, можно было бы добавить к нему тонкую анимацию. Это может быть пульс (шкала между 1.03 а также 0.97 с медленной продолжительностью и с задержкой между анимациями), покачивание (поворот на несколько градусов в быстрой последовательности, но с большой задержкой между ними), или, может быть, пульсация фона, цвета текста, размера текста, ширины границы или границы цвет. Но, опять же, не берите слишком много сразу.

Создание, удаление и отправка

Такую же тактику можно использовать при возникновении события или ошибки.

При отправке формы, но один из UITextFields пуст, добавьте к нему легкую дрожь или подсветите его границу/текст красным цветом, привлекая внимание пользователя к проблемному месту.

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

Когда пользователь успешно создает элемент, вместо того, чтобы просто перезагружать пользовательский интерфейс, вставьте новый элемент, затемните его или и то, и другое; или воспользуйтесь встроенным tableView.insertRows(at:with:) анимации. То же самое относится и к удалению элемента, но в обратном порядке.

Выбор

Подумайте о переключателе или флажке. В этом конкретном случае единственная цель анимации — добавить приятный штрих, так как реальной ценности UX не так много. Тем не менее, это добавляет визуальное подтверждение, которое длится до тех пор, пока палец не будет поднят. У флажка может быть нарисована галочка, точно так же, как вы рисуете ее на листе бумаги; центр радиокнопки может быть заполнен, например:

Советы

Смотря на мой пост Что касается приведенной выше анимации переключателя, мы можем видеть, что я разбил анимацию на очень маленькие шаги. Дело в том, чтобы:

1. Правильно понимать, из чего состоит анимация.
2. Имейте действенные шаги, которые легко реализовать.
3. Шаги должны быть достаточно маленькими, чтобы их можно было легко изменить или убрать, если это необходимо.

Это невозможно переоценить: не переусердствуйте, начните с малого. Преувеличенная анимация вреднее, чем отсутствие анимации. Начните с небольших значений, небольшой продолжительности и нескольких свойств, а затем продвигайтесь дальше. Лучше иметь что-то тонкое, что заметит небольшой процент ваших пользователей, чем что-то навязчивое, что ненавидит большой процент ваших пользователей (или даже небольшой).

Суть с несколькими примерами можно найти здесь а анимацию переключателя можно найти в самом элементе управления, здесь.

Удачной анимации!